Pular para o conteúdo

Tabela

Tabelas exibem conjuntos de dados. Elas podem ser totalmente customizadas.

Tables display information in a way that's easy to scan, so that users can look for patterns and insights. Elas podem ser incorporadas no conteúdo principal, assim como cartões. Elas podem incluir:

  • Uma visualização correspondente
  • Navegação
  • Ferramentas para consultar e manipular dados

Estrutura

Um exemplo simples sem frescuras.

Uma tabela de dados contém uma linha de cabeçalho no topo que lista os nomes das colunas, seguidas pelas linhas dos dados.

Tabela de dados

O componente Table tem um mapeamento próximo dos elementos nativos de <table>. Este requisito torna a construção de tabelas de dados ricas e desafiadora.

O componente DataGrid é projetado para situações de uso que focam em torno da manipulação de uma grande quantidade de dados tabulares. Enquanto vem com uma estrutura mais rígida, em troca, você ganha recursos poderosos.

Tabela Simples

Um exemplo simples de uma tabela densa sem muito enfeite.

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Tabela Densa

Este exemplo demonstra o uso de linhas clicáveis com Checkbox para a seleção, e com um componente Toolbar customizado. Ele usa o componente TableSortLabel para ajudar no estilo dos cabeçalhos das colunas.

A tabela recebeu uma largura fixa para demonstrar a rolagem horizontal. Para impedir que os controles de paginação rolem, o componente TablePagination é usado fora da tabela. (O Exemplo da 'ação de paginação customizada' abaixo mostra a paginação dentro de um TableFooter.)

Nutrition
Dessert (100g serving)Caloriessorted ascendingFat (g)Carbs (g)Protein (g)

Linhas por página:

1-5 de 13

Tabelas Customizadas

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Opções de paginação customizada

É possível customizar as opções mostradas na seleção "Rows per page" usando a propriedade rowsPerPageOptions. Você deve fornecer um array de:

  • numbers, cada número será usado para o rótulo e valor da opção.

    <TablePagination rowsPerPageOptions={[10, 50]} />
    
  • objects, as chaves value e label serão utilizadas, respectivamente para exibição do rótulo e valor da opção (útil para strings de idioma como 'Todos').

    <TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />
    

Ações de paginação customizada

A propriedade Action do componente TablePagination permite a implementação de ações customizadas.

Frozen yoghurt1596
Ice cream sandwich2379
Eclair26216
Cupcake3053.7
Marshmallow3180

Cabeçalho fixo

Um exemplo de uma tabela com linhas roláveis e cabeçalhos de coluna fixos. Ela se aproveita da propriedade stickyHeader.
(⚠️ sem suporte no IE11)

NameISO CodePopulationSize (km²)Density

Linhas por página:

1-10 de 15

Agrupando colunas

Você pode agrupar cabeçalhos de coluna renderizando várias linhas de tabela dentro de um cabeçalho de tabela:

<TableHead>
  <TableRow />
  <TableRow />
</TableHead>
CountryDetails
NameISO CodePopulationSize (km²)Density

Linhas por página:

1-10 de 15

Tabela minimizável

Um exemplo de uma tabela com linhas expansíveis, revelando mais informações. Ela utiliza o componente Collapse.

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

Abrangendo Tabela

Um exemplo simples com abrangência de linhas & colunas.

DetailsPrice
DescQty.UnitSum
Paperclips (Box)1001.15115.00
Paper (Case)1045.99459.90
Waste Basket217.9935.98
Subtotal610.88
Tax7 %42.76
Total653.64

Tabela Virtualizada

No exemplo a seguir, nós demonstramos como usar react-virtualized com o componente Table. Ela renderiza 200 linhas e pode facilmente lidar com mais. A virtualização ajuda a lidar com problemas de desempenho.

Dessert
Calories (g)
Fat (g)
Carbs (g)
Protein (g)

Acessibilidade

(WAI tutorial: https://www.w3.org/WAI/tutorials/tables/)

Caption

Um caption funciona como um título para uma tabela. A maioria dos leitores de tela anunciam o conteúdo dos captions. Captions help users to find a table and understand what it's about and decide if they want to read it.

A basic table example with a caption
Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246