Ravox KitDados

Tabela

As partes de uma tabela HTML de verdade com o visual do Kit: números à direita com algarismos alinhados, cabeçalho que gruda ao rolar, linha selecionada, listras, rodapé de totais e três densidades. Funciona em Server Component.

Faturas de outubro. Valores em reais.
Fatura	Cliente	Vence	Status	Valor
F-2291	Clínica Aurora	05/10	Paga	R$ 1.290,00
F-2292	Padaria Trigo Bom	07/10	Aberta	R$ 349,90
F-2293	Studio Vértice	10/10	Paga	R$ 2.780,50
F-2294	Oficina Duarte	12/10	Atrasada	R$ 89,00
F-2295	Escola Passo Certo	15/10	Aberta	R$ 12.400,00
Total				R$ 16.909,40

Ajustes

Densidade

ListradaRodapé de totalLinha selecionada

Exemplos

Cabeçalho fixo ao rolar

Produto	SKU	Qtd.	Preço
Camiseta básica P	CB-P-PRT	142	R$ 39,90
Camiseta básica M	CB-M-PRT	88	R$ 39,90
Camiseta básica G	CB-G-PRT	12	R$ 39,90
Moletom canguru M	MC-M-CNZ	31	R$ 159,00
Moletom canguru G	MC-G-CNZ	4	R$ 159,00
Boné aba reta	BN-UN-PRT	57	R$ 74,50
Meia cano alto (3 pares)	MA-UN-BRC	210	R$ 29,90
Ecobag lona crua	EB-UN-CRU	76	R$ 24,00
Caneca esmaltada	CE-UN-BRC	23	R$ 49,00
Garrafa térmica 500 ml	GT-UN-PRT	9	R$ 119,90

Comparar planos (título de linha)

O que cada plano inclui
Recurso	Avulso	Anual	Equipe
Designs	1	Todos	Todos
Pessoas	1	1	Até 5
Atualizações	6 meses	12 meses	12 meses
Preço	R$ 49	R$ 297	R$ 890

Compacta e listrada (log)

Hora	Evento	ms
14:02:11	POST /api/pedidos	182
14:02:09	GET /api/produtos	41
14:01:58	POST /api/login	312
14:01:44	GET /api/produtos/88	27
14:01:30	PATCH /api/pedidos/5120	1.204

Instalação

O shadcn cria components/ui/tabela.tsx no seu projeto e instala o tema junto. O arquivo é seu: edite à vontade.

npx shadcn@latest add https://ui.ravoxlabs.com/r/tabela.json

Opções

Opção	Tipo	Padrão	O que faz
densidade	"compacta" \| "normal" \| "folgada"	"normal"	Respiro de todas as células de uma vez: 32, 44 ou 56px de altura por linha.
cabecalhoFixo	boolean	false	O cabeçalho gruda no topo enquanto o corpo rola. Use com alturaMaxima.
alturaMaxima	number \| string	—	Altura máxima da moldura (320, "60vh"). Passou disso, rola; a moldura entra no Tab para rolar pelo teclado.
listrada	boolean	false	Fundo alternado nas linhas do corpo, para tabelas largas.
rotulo	string	—	Nome da área de rolagem para leitores de tela (quando a tabela rola).
classeMoldura	string	—	Classes da moldura com borda; className vai no <table>.
TabelaTitulo · numerico	boolean	false	No <th>: alinha o título de uma coluna de números à direita. scope="col" já vem; use scope="row" no título de linha.
TabelaCelula · numerico	boolean	false	No <td>: à direita, com tabular-nums (as casas decimais ficam uma embaixo da outra).
TabelaLinha · selecionada	boolean	false	Pinta a linha como escolhida. Quem anuncia a seleção é a caixa de marcar dentro dela.
TabelaLegenda	ComponentProps<"caption">	—	O <caption>: nome da tabela, embaixo dela. Com className="sr-only" fica só para leitores de tela.
TabelaCabeca · TabelaCorpo · TabelaRodape	ComponentProps<"thead" \| "tbody" \| "tfoot">	—	As seções da tabela. O rodapé leva fundo leve e peso médio (totais).