Table (tabela)

Tables display sets of data. Eles 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.

Tables can include:

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

Ao incluir ferramentas, elas devem ser colocadas diretamente acima ou abaixo da tabela.

Estrutura

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

Caixas de seleção devem acompanhar cada linha se o usuário precisar selecionar ou manipular dados.

Para acessibilidade, a primeira coluna é ajustada para ser um elemento <th>, com um escopo de "linha". Isso permite que os leitores de tela identifiquem o valor de uma célula por seu nome de linha e coluna.

Tabela Simples

Um exemplo simples sem frescuras.

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

Um exemplo simples de uma tabela densa sem frescuras.

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

Classificando & Selecionando

Este exemplo demonstra o uso de linhas clicáveis e Checkbox para a seleção, com uma barra de ferramentas personalizada Toolbar. 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 personalizada' abaixo mostra a paginação dentro de TableFooter.)

Nutrition

Dessert (100g serving)	Caloriessorted ascending	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
Marshmallow	318	0	81	2

Dense padding

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

Custom pagination options

It's possible to customise the options shown in the "Rows per page" select using the rowsPerPageOptions prop. You should either provide an array of:

numbers, each number will be used for the option's label and value.
```
  <TablePagination rowsPerPageOptions={[10, 50]} />
```
objects, the value and label keys will be used respectively for the value and label of the option (useful for language strings such as 'All').
```
  <TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />
```

Custom pagination actions

A propriedade Action 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
Linhas por página: 1-5 de 13

Cabeçalho fixo

Um exemplo de uma tabela com linhas roláveis e cabeçalhos de coluna fixos. Ele aproveita do suporte de stickyHeader (⚠️ sem suporte ao IE 11).

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 de abrangência

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)

Projetos Complementares

Para usos mais avançados, você pode tirar vantagem com:

material-table

npm downloads

material-table é uma tabela de dados simples e poderosa para React baseado na tabela do Material-UI com alguns recursos adicionais. Eles suportam muitos formas de utilização (edição, filtragem, agrupamento, ordenação, seleção, i18n, árvore de dados e muito mais). Você deveria dar uma olhada.

Editable Example

Actions	Name	Surname	Birth Year	Birth Place
	Mehmet	Baran	1987	Şanlıurfa
	Zerya Betül	Baran	2017	İstanbul

Outros

dx-react-grid-material-ui Uma grade de dados para Material-UI com paginação, ordenação, filtragem, agrupamento e funções de edição.(Com licenciamento de uso pago).
mui-datatables: Tabelas de dados responsivas para Material-UI com filtro, ordenação, pesquisa e muito mais.
tubular-react: Uma tabela de Material-UI com fonte de dados local ou remota. Com filtragem, classificação, pesquisa de texto livre, exportação para CSV localmente e agregações.

Acessibilidade

(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