Table

Dadosserver safe

Tabela de dados com variantes bordered, compact, striped e hoverable, e célula numérica alinhada em font-mono.

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Table } from "@trdr/ui/table"

Uso

import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead } from "@trdr/ui/table"

export function Exemplo() {
  return <Table />
}

Variantes

GrupoValoresPadrão
bordered
truefalse
false

Props

TablePropsestende React.TableHTMLAttributes<HTMLTableElement>, VariantProps<typeof tableVariants>, VariantProps<typeof tableWrapperVariants>
TableHeaderPropsestende React.HTMLAttributes<HTMLTableSectionElement>
TableBodyPropsestende React.HTMLAttributes<HTMLTableSectionElement>
TableFooterPropsestende React.HTMLAttributes<HTMLTableSectionElement>
TableRowPropsestende React.HTMLAttributes<HTMLTableRowElement>
TableHeadPropsestende React.ThHTMLAttributes<HTMLTableCellElement>
TableCellPropsestende React.TdHTMLAttributes<HTMLTableCellElement>, VariantProps<typeof tableCellVariants>
TableCaptionPropsestende React.HTMLAttributes<HTMLTableCaptionElement>

Quando usar

Use a tabela para dados tabulares de verdade, onde faz sentido comparar valores entre linhas e colunas: ordens, posicoes, historico de operacoes. O container tem rolagem horizontal por padrao, entao uma tabela com muitas colunas continua usavel em telas estreitas.

Quando nao usar

Nao use tabela para layout (duas colunas de texto lado a lado que nao sao dados relacionados): isso e grid. Para uma lista simples de itens sem necessidade de comparar colunas, um Card por item ou uma lista comum costuma comunicar melhor do que forcar linhas e colunas.

Anatomia

  • Table (data-slot="table", dentro de um data-slot="table-container" com rolagem horizontal): a raiz.
  • TableHeader (data-slot="table-header"): o <thead>.
  • TableBody (data-slot="table-body"): o <tbody>.
  • TableFooter (data-slot="table-footer"): o <tfoot>, para totais e resumos.
  • TableRow (data-slot="table-row"): uma linha, dentro de header, body ou footer.
  • TableHead (data-slot="table-head"): celula de cabecalho (<th>).
  • TableCell (data-slot="table-cell"): celula de dado (<td>). Aceita a prop numeric.
  • TableCaption (data-slot="table-caption"): legenda da tabela.

Variantes da tabela

  • bordered (padrao false): adiciona borda e cantos arredondados ao container.
  • compact (padrao false): reduz padding e tamanho de fonte das celulas, para tabelas densas.
  • striped (padrao false): alterna o fundo das linhas do corpo.
  • hoverable (padrao true): destaca a linha do corpo sob o cursor.

Variante de celula

  • numeric (padrao false) em TableCell: alinha o conteudo a direita e usa font-mono. Preco, quantidade, percentual e horario devem sempre usar numeric, para nao depender de cada consumidor lembrar de aplicar a fonte monoespacada e o alinhamento manualmente.

Migracao do componente legado

O Table do Hub antigo (src/components/ui/Table.tsx) recebia os filhos prontos (um <table> inteiro em HTML puro por fora) e so controlava classes de modificador via props booleanas (bordered, compact, striped, hoverable). O TRDR UI preserva exatamente esses quatro nomes e os mesmos valores padrao, mas agora thead/tbody/tfoot/tr/th/td tambem sao componentes proprios (TableHeader, TableBody, TableRow, TableHead, TableCell...), em vez de HTML cru dentro do Table. O ganho novo em relacao ao legado e a variante numeric de TableCell, que nao existia antes.

Acessibilidade

Use sempre TableHead para celulas de cabecalho (nunca TableCell estilizado para parecer cabecalho): e o <th> que da ao leitor de tela a relacao entre cabecalho e dado. Adicione TableCaption quando a tabela nao tem um titulo visivel logo acima dela no layout.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="table"][data-slot="table-body"][data-slot="table-caption"][data-slot="table-cell"][data-slot="table-container"][data-slot="table-footer"][data-slot="table-head"][data-slot="table-header"][data-slot="table-row"]
12 tokens usados
bg-surface-secondaryborder-bborder-b-0border-border-subtleborder-ttext-b3text-b4text-content-secondarytext-content-tertiarytext-lefttext-muted-foregroundtext-right