Componentes 3.x e Animações com React

"Não é possível fazer uma tabela responsiva sem duplicar código"

Passarinho

Primeiras Tabelas

Janeiro de 1997

https://www.w3.org/People/Raggett/book4/ch02.html

Função das Tabelas

"The purpose of providing a layout grid for organizing pictures and text on the screen"

Alternativa atual

Benefícios Tabelas

Muitos dados
Paginação, Ordenação
Identificação de padrões rapidamente
Boas no desktop

Benefícios Cards

Muitos dados
Alocar imagem
Ações
Boas no desktop e no mobile

Responsivo vs Flexível

Um layout flexível, no contexto web, diz a respeito de componentes visuais que podem ser reutilizados em diferentes dispositivos de forma flexível, ou seja, o componente não perde e nem ganha nenhuma propriedade em sua apresentação. O layout responsivo trata seu componente de forma diferenciada de acordo com cada resolução em que é apresentada, ganhando ou perdendo propriedades.

Embrace the power of css

Animações

https://uxdesign.cc/good-to-great-ui-animation-tips-7850805c12e5

const tableColumns = [
  { key: 'nome', label: 'Nome' },
  { key: 'idade', label: 'Idade' },
];

const tableRows = [
  { nome: 'Renato', idade: 20 },
  { nome: 'Patrick', idade: 21 },
  { nome: 'Renan', idade: 22 },
];

<DataTables
  columns={tableColumns}
  data={tableRows}
/>

const tableColumns = [
  { key: 'nome', label: 'Nome' },
  { key: 'idade', label: 'Idade' },
];

const tableRows = [
  // Propriedade 'moreOptions'
  { nome: 'Renato', idade: 20, moreOptions: [
      {
        icon: <svg/>,
        label: 'Visualizar',
        action: (event, row, toggleAnimation) => {
          // Callback 'toggleAnimation' para acionar animação
          // para esconder o menu
          console.log('Visualizar', row.id);
          toggleAnimation();
        },
      },
    ], 
  },
  { nome: 'Patrick', idade: 21 },
  { nome: 'Renan', idade: 22 },
];

<DataTables
  responsive
  columns={tableColumns}
  data={tableRows}
/>

Perguntas?

@santospatrick

patrickspteixeira@gmail.com