Table

Tabela de dados com header, body, footer e caption. Composta por sub-componentes semânticos.

import {
  Table, TableHeader, TableBody, TableRow,
  TableHead, TableCell, TableCaption,
} from "@workspace/ui/components/table";

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Nome</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Ana Paula</TableCell>
      <TableCell>Ativa</TableCell>
    </TableRow>
  </TableBody>
</Table>

Default

Tabela simples com dados de pedidos.

Pedido	Status	Total
#1024	Pago	R$ 491,10
#1025	Pendente	R$ 993,40
#1026	Enviado	R$ 245,50

Com Footer e Caption

Tabela com footer para totalização e caption descritivo.

Resumo de comissões do período.
Vendedora	Vendas	Comissão
Julia Silva	12	R$ 340,00
Carla Santos	8	R$ 220,00
Total		R$ 560,00

API Reference

Prop	Type	Default	Descrição
`Table`	`HTMLTableElement`	—	Container principal da tabela
`TableHeader`	`HTMLTableSectionElement`	—	Seção de cabeçalho (thead)
`TableBody`	`HTMLTableSectionElement`	—	Corpo da tabela (tbody)
`TableFooter`	`HTMLTableSectionElement`	—	Rodapé da tabela (tfoot) com bg-muted/50
`TableRow`	`HTMLTableRowElement`	—	Linha da tabela (tr) com hover state
`TableHead`	`HTMLTableCellElement`	—	Célula de cabeçalho (th) com font-medium
`TableCell`	`HTMLTableCellElement`	—	Célula de dados (td) com padding padrão
`TableCaption`	`HTMLTableCaptionElement`	—	Legenda descritiva abaixo da tabela