Tabela

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

As tabelas apresentam informação de uma forma que é fácil de digitalizar, para que os utilizadores possam procurar padrões e informações. 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.

The DataGrid component is designed for use-cases that are focused on handling large amounts of tabular data. Enquanto vem com uma estrutura mais rígida, em troca, você ganha recursos poderosos.

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  rowsPerPageOptions={[5]}
  checkboxSelection
/>

Tabela Simples

Um exemplo simples de uma tabela densa sem muito enfeite.

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4
Ice cream sandwich	237	9	37	4.3
Eclair	262	16	24	6
Cupcake	305	3.7	67	4.3
Gingerbread	356	16	49	3.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

Dense padding

Tabelas Customizadas

Aqui está um exemplo de customização do componente. You can learn more about this in the overrides documentation page.

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4
Ice cream sandwich	237	9	37	4.3
Eclair	262	16	24	6
Cupcake	305	3.7	67	4.3
Gingerbread	356	16	49	3.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 ActionsComponent do componente TablePagination permite a implementação de ações customizadas.

Frozen yoghurt	159	6
Ice cream sandwich	237	9
Eclair	262	16
Cupcake	305	3.7
Marshmallow	318	0
Rows per page: 1–5 of 13

Aqui está um exemplo de uma tabela com linhas roláveis e cabeçalhos de coluna fixos. Ela aproveita a propriedade stickyHeader. (⚠️ no IE 11 support)

Name	ISO Code	Population	Size (km²)	Density
India	IN	1,324,171,354	3,287,263	402.82
China	CN	1,403,500,365	9,596,961	146.24
Italy	IT	60,483,973	301,340	200.72
United States	US	327,167,434	9,833,520	33.27
Canada	CA	37,602,103	9,984,670	3.77
Australia	AU	25,475,400	7,692,024	3.31
Germany	DE	83,019,200	357,578	232.17
Ireland	IE	4,857,000	70,273	69.12
Mexico	MX	126,577,691	1,972,550	64.17
Japan	JP	126,317,000	377,973	334.20

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>

Country		Details
Name	ISO Code	Population	Size (km²)	Density
India	IN	1,324,171,354	3,287,263	402.82
China	CN	1,403,500,365	9,596,961	146.24
Italy	IT	60,483,973	301,340	200.72
United States	US	327,167,434	9,833,520	33.27
Canada	CA	37,602,103	9,984,670	3.77
Australia	AU	25,475,400	7,692,024	3.31
Germany	DE	83,019,200	357,578	232.17
Ireland	IE	4,857,000	70,273	69.12
Mexico	MX	126,577,691	1,972,550	64.17
Japan	JP	126,317,000	377,973	334.20

Tabela minimizável

Um exemplo de uma tabela com linhas expansíveis, revelando mais informações. It utilizes the Collapse component.

Dessert (100g serving)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4

Ice cream sandwich	237	9	37	4.3

Eclair	262	16	24	6

Cupcake	305	3.7	67	4.3

Gingerbread	356	16	49	3.9

Abrangendo Tabela

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

Details			Price
Desc	Qty.	Unit	Sum
Paperclips (Box)	100	1.15	115.00
Paper (Case)	10	45.99	459.90
Waste Basket	2	17.99	35.98
	Subtotal		610.88
	Tax	7 %	42.76
	Total		653.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)

Accessibility

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

Caption

A caption functions like a heading for a table. Most screen readers announce the content of 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)	Calories	Fat (g)	Carbs (g)	Protein (g)
Frozen yoghurt	159	6	24	4
Ice cream sandwich	237	9	37	4.3
Eclair	262	16	24	6

Unstyled

If you would like to use an unstyled Table, you can use the primitive HTML elements and enhance the table with the TablePaginationUnstyled component. See the demos in the unstyled table pagination docs