Tabela

Uma tabela acessível primitiva construída sobre React Aria - marcação semântica, navegação de teclado, seleção de linhas e colunas classificáveis. Emparelhe-a com a tabela TanStack para ordenação, filtragem e lógica de paginação, como no exemplo abaixo.

Resultados totais

48 clientes

CompraStatusAções
John Clarkson
A entrega falhou5 de set. de 2026$3.412
Aspen Lubin
A entrega falhou25 de mar. de 2026$1.899
Michael Ekstrom
Enviado1 de ago. de 2026$2.752
Kianna Vaccaro
Enviado2 de abr. de 2026$145
Livia Saris
A entrega falhou14 de nov. de 2026$708
Jaydon Aminoff
Entrega à espera17 de jul. de 2026$224
Maria Lubin
Enviado15 de nov. de 2026$2.959
Ann Press
Entrega à espera20 de set. de 2026$2.646

Instalação

Você pode adicionar este componente de tabela usando o nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add table

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Tamanhos

A tabela vem em 2 tamanhos: md (normal) e sm (compacto, com estofamento mais apertado e avatares menores). Alterne entre eles alterando o size Prop na Table componente - tente o Normal / Compacto comutar na antevisão acima.

<Table size="md" aria-label="Customers"> {/* rest of the table components */}</Table>

Carregando

Passe isLoading e o corpo vira uma página de linhas de Skeleton sob o cabeçalho real, cada célula do tamanho do que vai chegar nela em qualquer densidade, então nada se move quando os dados chegam.

Resultados totais

CompraStatusAções
const { data, isLoading } = useCustomers(); // The header stays; the body is a page of Skeleton rows until the data lands.<DataTableExample isLoading={isLoading} />

Sumário

Este guia mostra como utilizar TanStack Table - o motor sem cabeça para linhas, colunas, triagem, filtragem e seleção - juntamente com o Table primitivo para construir sua própria tabela de dados. Vamos cobrir os seguintes tópicos:

  • Tabela básica com a tabela primitiva
  • Seleção da linha
  • Ordenação
  • Filtrando & pesquisa
  • Paginação
  • Componentes reutilizáveis