Ravox UIby Ravox Labs

Ravox KitDados

Tabela de dados

Você declara as colunas e ela ordena, busca (sem acento), pagina, marca linhas com ações em lote e mostra/esconde colunas. Estados de vazio, sem resultado e carregando já prontos. Sem biblioteca de tabela.

Mostrar colunas

Pedidos da loja, ordenado por Data
#5120Marina CoutoRecife28 de setPagoR$ 77,20
#5127Rafael NogueiraBelo Horizonte27 de setEnviadoR$ 306,40
#5134Júlia AlbuquerqueSão Paulo26 de setPagoR$ 535,60
#5141Otávio MendesCuritiba25 de setAguardandoR$ 134,50
#5148Beatriz SáSalvador23 de setEnviadoR$ 363,70

Ajustes

Estado
Por página
Densidade

Exemplos

Seleção controlada

1 pedido na próxima remessa · 6 itens

1 marcada
Pedidos para enviar
#5120Marina Couto1
#5127Rafael Nogueira6
#5134Júlia Albuquerque4
#5141Otávio Mendes2
#5148Beatriz Sá7

Atualizando sem pular

Pedidos recentes
#5120Marina CoutoPagoR$ 77,20
#5127Rafael NogueiraEnviadoR$ 306,40
#5134Júlia AlbuquerquePagoR$ 535,60
#5141Otávio MendesAguardandoR$ 134,50

Rolagem com cabeçalho fixo

Todos os pedidos, ordenado por Total
#5176Ana Clara RibeiroR$ 650,20
#5253Bruno EstevesR$ 650,20
#5155Caio LinharesR$ 592,90
#5232Helena DuarteR$ 592,90
#5134Júlia AlbuquerqueR$ 535,60
#5211Pedro AssunçãoR$ 535,60
#5190Sofia AntunesR$ 478,30
#5267Lucas PimentelR$ 478,30
#5169Henrique TavaresR$ 421,00
#5246Camila FreitasR$ 421,00
#5148Beatriz SáR$ 363,70
#5225Gustavo LeiteR$ 363,70
#5127Rafael NogueiraR$ 306,40
#5204Lara MenezesR$ 306,40
#5183Diego FariasR$ 249,10
#5260Yasmin CorreiaR$ 249,10
#5162Letícia PradoR$ 191,80
#5239Tiago BarretoR$ 191,80
#5141Otávio MendesR$ 134,50
#5218Isabela RochaR$ 134,50
#5120Marina CoutoR$ 77,20
#5197Mateus CarvalhoR$ 77,20
#5274Elisa MonteiroR$ 77,20

Instalação

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

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

Opções

OpçãoTipoPadrãoO que faz
dadosT[]—As linhas. Ficam no cliente: para milhares de registros, pagine no servidor e passe só a página.
colunasColunaDados<T>[]—{ chave, titulo, valor?, celula?, numerico?, ordenavel?, buscavel?, escondivel?, oculta?, largura? }. valor serve para ordenar e buscar; celula, para desenhar.
chaveLinha(linha: T) => string—Id único de cada linha (seleção e key).
rotulostring—Nome da tabela: vira a legenda para leitores de tela e o nome da busca e da paginação.
buscabooleantrueCampo de busca nas colunas de texto (ou nas marcadas com buscavel). Esc limpa.
porPaginanumber10Linhas por página. 0 desliga a paginação.
opcoesPorPaginanumber[][10, 25, 50]Opções do "Linhas por página". Com uma só, o seletor some.
selecionavelbooleanfalseColuna de caixas. A do cabeçalho marca a página e oferece marcar todos os resultados.
selecionadas / aoSelecionarstring[] / (ids: string[]) => void—Seleção controlada (ids de chaveLinha). Sem selecionadas, ela guarda sozinha.
acoesEmLote(marcadas: T[], limpar: () => void) => ReactNode—Botões da barra que aparece quando há linhas marcadas.
ordemInicial{ chave, direcao: "asc" | "desc" } | null—Ordem no começo. O clique no título passa por crescente, decrescente e sem ordem; aria-sort acompanha.
menuColunasbooleantrueBotão "Colunas" para esconder e mostrar colunas (a última visível não some).
carregandobooleanfalseSem dados: linhas-esqueleto. Com dados: segura a tela anterior esmaecida, sem pular.
vazioReactNode—O que aparece quando dados vem vazio. Busca sem resultado tem mensagem própria com "Limpar busca".
extraReactNode—Algo à direita da barra (ex.: botão "Novo cliente").
densidade"compacta" | "normal" | "folgada""normal"Repassada para a Tabela.
alturaMaximanumber | string—Com ela, o corpo rola e o cabeçalho gruda no topo.