Table

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

Tabelas apresentam informações de uma forma fácil de visualizar, de modo que os usuários podem procurar por padrões e percepções. Elas podem ser incorporadas no conteúdo principal, assim como cartões. They can include:

• 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.

Classificando & Selecionando

The Table component has a close mapping to the native <table> elements. This constraint makes building rich data tables challenging.

The DataGrid component is designed for use-cases that are focused around handling a large amounts of tabular data. While it comes with a more rigid structure, in exchange, you gain more powerful features.

Tabela Simples

Um exemplo simples de uma tabela densa sem muito enfeite.

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.)

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.

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.

Cabeçalho fixo

Um exemplo de uma tabela com linhas roláveis e cabeçalhos de coluna fixos. It leverages the stickyHeader prop.
(⚠️ no IE11 support)

Column grouping

You can group column headers by rendering multiple table rows inside a table head:

<TableHead>
  <TableRow />
  <TableRow />
</TableHead>

Tabela minimizável

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

Abrangendo Tabela

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

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.

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. Os captions ajudam os usuários a encontrar uma tabela e a entender o que ela representa e decidir se querem lê-la.

API

• <Table />
• <TableBody />
• <TableCell />
• <TableContainer />
• <TableFooter />
• <TableHead />
• <TablePagination />
• <TableRow />
• <TableSortLabel />