Table

Componente de tabela semântico com suporte a header, body, footer e caption. Usa tokens do sistema de cores automaticamente.

Tabela Básica

Estrutura mínima com header e body.

Fatura	Cliente	Data	Valor
INV-001	Investidor Alpha	Jan 2026	R$ 12.400,00
INV-002	Fundo Beta Capital	Jan 2026	R$ 8.750,00
INV-003	Gestora Gamma	Dez 2025	R$ 31.200,00

Tabela completa com footer de totais e badges de status.

Fatura	Cliente	Status	Valor
INV-001	Investidor Alpha	Pago	R$ 12.400,00
INV-002	Fundo Beta Capital	Pendente	R$ 8.750,00
INV-003	Gestora Gamma	Pago	R$ 31.200,00
INV-004	Holdings Delta	Vencido	R$ 5.900,00
INV-005	Epsilon Ventures	Pendente	R$ 19.600,00
Total			R$ 77.850,00

Exemplo aplicado ao domínio financeiro com variação colorida.

Ativos monitorados — atualizado em Jan 2026
Ticker	Nome	Setor	Preço	Variação
PETR4	Petrobras PN	Energia	R$ 38,42	+1,24%
VALE3	Vale ON	Mineração	R$ 62,15	-0,87%
ITUB4	Itaú Unibanco PN	Financeiro	R$ 34,90	+2,11%
BBDC4	Bradesco PN	Financeiro	R$ 12,78	-1,33%

1	import {
2	Table, TableHeader, TableBody, TableFooter,
3	TableHead, TableRow, TableCell, TableCaption,
4	} from "@/components/ui/table"

1	<Table>
2	<TableCaption>Descrição opcional</TableCaption>
3	<TableHeader>
4	<TableRow>
5	<TableHead className="w-[100px]">Fatura</TableHead>
6	<TableHead>Status</TableHead>
7	<TableHead className="text-right">Valor</TableHead>
8	</TableRow>
9	</TableHeader>
10	<TableBody>
11	<TableRow>
12	<TableCell className="font-medium">INV-001</TableCell>
13	<TableCell>Pago</TableCell>
14	<TableCell className="text-right">R$ 12.400,00</TableCell>
15	</TableRow>
16	</TableBody>
17	<TableFooter>
18	<TableRow>
19	<TableCell colSpan={2}>Total</TableCell>
20	<TableCell className="text-right">R$ 12.400,00</TableCell>
21	</TableRow>
22	</TableFooter>
23	</Table>