Table
Tabela que mostra registros em linhas e colunas para a pessoa comparar, como faturas ou estoque. Para ordenar, filtrar e paginar dados, use Data table.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no servidor.
import { Table, TableCaption, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell } from "@camaleo/react";Anatomia
Uma <table> nativa dentro de uma caixa que rola para o lado quando a tabela não cabe. Cada parte tem um data-slot que você pode usar no CSS.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.
| Fatura | Situação | Valor |
|---|---|---|
| INV-4029 | Paga | R$ 1.740,00 |
| INV-4028 | Pendente | R$ 6.402,50 |
| INV-4027 | Vencida | R$ 375,00 |
| Fatura | Emissão | Valor |
|---|---|---|
| INV-4029 | 14/10/2026 | R$ 1.740,00 |
| INV-4028 | 12/10/2026 | R$ 6.402,50 |
Com legenda
Uma TableCaption dá nome à tabela. O leitor de tela lê a legenda antes das linhas, e ela também nomeia a área de rolagem quando a tabela fica larga demais.
| Cliente | Pedidos | Receita |
|---|---|---|
| Acme Logística | 142 | R$ 241.000,00 |
| Vila Nova Design | 89 | R$ 123.250,00 |
| Aurora Biotecnologia | 12 | R$ 42.000,00 |
Números à direita
Passe align="end" no cabeçalho e nas células das colunas de números. Os algarismos ficam com a mesma largura, e dá para comparar valores de relance.
| Fatura | Cliente | Valor |
|---|---|---|
| INV-4029 | Acme Logística | R$ 1.740,00 |
| INV-4028 | Vila Nova Design | R$ 6.402,50 |
| INV-4027 | Aurora Biotecnologia | R$ 375,00 |
| Total | R$ 8.517,50 | |
Linha de total
Coloque o total num TableFooter, abaixo de uma linha mais forte. Ele fica separado dos dados, então ordenar ou incluir linhas não muda a posição dele.
| Produto | Estoque | Preço |
|---|---|---|
| Teclado mecânico TKL | Disponível | R$ 749,00 |
| Mouse ergonômico sem fio | Restam 3 | R$ 449,00 |
| Hub USB-C com 8 portas | Esgotado | R$ 329,00 |
Situação numa coluna
Um selo por linha é mais fácil de bater o olho do que uma frase. Use palavras curtas e as mesmas em todas as linhas.
| Fatura | Cliente | Valor |
|---|---|---|
Nenhuma fatura ainda As faturas que você enviar para clientes aparecem aqui. | ||
Ainda sem linhas
Mantenha os cabeçalhos e preencha o corpo com uma linha que ocupa todas as colunas. Diga por que está vazia e qual é o próximo passo.
| Cliente | |
|---|---|
| Vila Nova Design | R$ 6.250,00 |
| Acme Logística | R$ 24.000,00 |
| Aurora Biotecnologia | R$ 46.600,00 |
Coluna que ordena
Clique em Receita. O botão inverte a ordem, e o aria-sort no cabeçalho avisa o leitor de tela em que sentido as linhas estão.
| Fatura | Cliente | Emissão | Vencimento | Pagamento | Situação | Valor |
|---|---|---|---|---|---|---|
| INV-4029 | Acme Logística | 14/10/2026 | 13/11/2026 | Pix | Paga | R$ 1.740,00 |
| INV-4028 | Vila Nova Design | 12/10/2026 | 11/11/2026 | Boleto | Pendente | R$ 6.402,50 |
| INV-4027 | Aurora Biotecnologia | 01/10/2026 | 15/10/2026 | Cartão | Vencida | R$ 375,00 |
Tabela larga no celular
Numa tela estreita esta tabela rola para o lado. Só nesse caso a caixa vira uma área de rolagem com nome e uma parada de Tab, para quem usa teclado rolar com as setas.
Em contexto
Tabelas costumam ficar num card ou numa seção da página, com as ações na última coluna. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
| Fatura | Emissão | Situação | Valor | |
|---|---|---|---|---|
| INV-4029 | 14/10/2026 | Paga | R$ 1.740,00 | |
| INV-4028 | 12/10/2026 | Pendente | R$ 6.402,50 | |
| INV-4027 | 01/10/2026 | Vencida | R$ 375,00 |
| Nome | Cargo | Situação | |
|---|---|---|---|
APAline Prado | Arquiteta de front-end | aline@camaleo.dev | Ativa |
TCTiago Costa | Engenheiro de DevOps | tiago@camaleo.dev | Ausente |
| SKU | Item | Quantidade | Preço unitário |
|---|---|---|---|
| SKU-8921 | Suporte de monitor de alumínio | 28 | R$ 649,00 |
| SKU-8922 | Mouse pad de feltro, grande | 114 | R$ 169,90 |
| SKU-8923 | Suporte de notebook de carvalho | 0 | R$ 289,00 |
Boas práticas
| Cliente | Valor |
|---|---|
| Acme Logística | R$ 123.250,00 |
| Vila Nova Design | R$ 375,00 |
Unidade fica embaixo de unidade, e o maior valor salta aos olhos sem ler linha por linha.
| Cliente | Valor |
|---|---|
| Acme Logística | R$ 123.250,00 |
| Vila Nova Design | R$ 375,00 |
Os centavos ficam em lugares diferentes, e a pessoa precisa ler cada valor para comparar.
| Fatura | Valor |
|---|---|
| INV-4029 | R$ 1.740,00 |
Use uma TableCaption, ou aria-label quando o título já está na página. Assim a pessoa ouve do que se trata antes da primeira linha.
| Coluna A | Coluna B |
|---|---|
| Dado 1 | 120,00 |
O leitor de tela lê o cabeçalho junto com cada célula. Um cabeçalho vago deixa todas as células vagas.
Props
<caption>.end em colunas de números: eles vão para a direita e todos os algarismos ficam com a mesma largura, então os valores se alinham na coluna.TableHead e TableCell aceitam align. Todas as partes também aceitam os atributos do elemento HTML, como colSpan e aria-sort. TableCaption (uma <caption>, a primeira coisa dentro do Table) e TableFooter (um <tfoot>) aceitam os atributos dos seus elementos.
Styling hooks
Mude o visual sem copiar o componente: use os atributos ou defina os tokens num elemento pai, num estilo ou na própria tabela.
Atributos
Tokens que ele lê
Cor
Forma e tamanho
Tipografia e movimento
Só deste componente
Acessibilidade
- O TableHead coloca scope="col", então o leitor de tela lê o cabeçalho da coluna junto com cada célula.
- Uma tabela que não cabe vira uma área de rolagem (role="region") com o nome da legenda ou do scrollLabel. Uma tabela que cabe não ganha parada de Tab.
- Dê nome a toda tabela com uma TableCaption, ou com aria-label quando um título já diz do que ela trata.
- Botões só com ícone numa linha precisam de um nome que inclua a linha, como "Baixar INV-4029", e não só "Baixar".