Table

Tabela semântica do HeroUI, composta célula a célula, para quando você controla cada linha.

A Table (OSS) é a tabela composta peça por peça: você escreve Table.Header, Table.Column, Table.Row e Table.Cell. No Admin, a regra é preferir o DataGrid, que recebe columns e data e cuida de ordenação, seleção e células; use Table quando precisar de células muito diferentes entre si, linhas fora do padrão, rodapé com paginação ou controle total do markup.

import { Table } from "@rastreio-x/ui";

Padrão

A tabela vive em Table.ScrollContainer (rolagem horizontal dentro dela), com Table.Content recebendo o aria-label. A coluna com isRowHeader nomeia a linha.

Pedido	Cliente	Transportadora	Estado
ped-8	Marina Souza	Pluma	Em trânsito
ped-7	Rafael Lima	Nimbo	Entregue
ped-6	Beatriz Alves	Trilha	Atrasado

Variante secundária

primary (padrão) tem fundo cinza no contêiner; secondary é plana, para usar dentro de Widget, Card e Sheet.

Pedido	Cliente	Transportadora	Estado
ped-8	Marina Souza	Pluma	Em trânsito
ped-7	Rafael Lima	Nimbo	Entregue
ped-6	Beatriz Alves	Trilha	Atrasado

Ordenação

allowsSorting na coluna, sortDescriptor e onSortChange em Table.Content. Você ordena os dados; Table.SortableColumnHeader desenha o indicador de direção.

Data	Motivo	Créditos
2026-10-14	Jornada publicada (ped-9)	-1
2026-10-13	Jornada publicada (ped-8)	-1
2026-10-12	Compra de pacote	500

Seleção

selectionMode em Table.Content, mais um Checkbox com slot="selection" no cabeçalho (selecionar todos) e em cada linha.

	Pedido	Cliente
	ped-8	Marina Souza
	ped-7	Rafael Lima
	ped-6	Beatriz Alves

0 selecionados

Sem dados

renderEmptyState em Table.Body diz o que fazer quando não há linhas.

Pedido	Cliente	Estado
Nenhum Pedido ainda. Conecte uma Fonte para receber o primeiro.

Rodapé com paginação

Table.Footer recebe a Pagination ou o "Carregar Mais".

Horário	Resultado
14:20	Aceita
13:05	Retida por duplicidade
11:02	Aceita

Table ou DataGrid

Situação	Use
Lista de Pedidos, extrato de Créditos, Fontes (colunas conhecidas)	`DataGrid` dentro de `Widget`
Células muito diferentes ou linhas de formato próprio	`Table`
Rodapé com paginação, resumo ou carregamento incremental	`Table` com `Table.Footer`
Celular	`ItemCard` ou `ListView` (nunca uma tabela estreita)

Anatomia

Table
├── Table.Body
├── Table.Cell
├── Table.Collection
├── Table.Column
├── Table.ColumnResizer
├── Table.Content
├── Table.Footer
├── Table.Header
├── Table.LoadMore
├── Table.LoadMoreContent
├── Table.ResizableContainer
├── Table.Row
├── Table.ScrollContainer
└── Table.SortableColumnHeader

Table.ScrollContainer: contêiner de rolagem horizontal.
Table.Content: a tabela, com aria-label, seleção e ordenação.
Table.Header e Table.Column: cabeçalho e colunas.
Table.Body, Table.Row e Table.Cell: o corpo.
Table.SortableColumnHeader: rótulo ordenável com indicador.
Table.Footer: rodapé opcional.
Table.ColumnResizer, Table.LoadMore e Table.Collection: redimensionar, carregar mais e coleções dinâmicas.

Propriedades

Table:

Table
Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`render`	`DOMRenderFunction<E, undefined>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`React.JSX.IntrinsicElements[E]['style']`	-	Estilos em linha aplicados ao elemento.
`variant`	`'primary' \| 'secondary'`	-	Estilo: `primary` (com sombra suave) ou `secondary` (sem sombra, para uso dentro de cartões).

Table.Content:

Table.Content
Prop	Tipo	Padrão	Descrição
`aria-label`	`string`	-	Nome acessível, lido por leitores de tela quando não há rótulo visível.
`children`	`React.ReactNode`	-	Conteúdo do componente.
`className`	`string`	-	Classes CSS aplicadas ao elemento.
`defaultExpandedKeys`	`Iterable<Key>`	-	Chaves das linhas expandidas inicialmente (não controlado).
`defaultSelectedKeys`	`Iterable<Key> \| 'all'`	-	Chaves selecionadas inicialmente (não controlado).
`disabledBehavior`	`DisabledBehavior`	`'all'`	Define se `disabledKeys` vale para todas as interações ou só para a seleção.
`disabledKeys`	`Iterable<Key>`	-	Chaves dos itens desabilitados: não podem ser focados nem selecionados.
`disallowEmptySelection`	`boolean`	-	Impede ficar sem nenhum item selecionado.
`dragAndDropHooks`	`DragAndDropHooks`	-	Hooks de `useDragAndDrop` para arrastar e reordenar itens.
`escapeKeyBehavior`	`'none' \| 'clearSelection'`	`'clearSelection'`	O que a tecla Esc faz: limpar a seleção ou nada.
`expandedKeys`	`Iterable<Key>`	-	Chaves das linhas expandidas (controlado).
`keyboardNavigationBehavior`	`'tab' \| 'arrow'`	`'arrow'`	Como o teclado chega a elementos focáveis dentro das células: `tab` ou `arrow`.
`onExpandedChange`	`((keys: Set<Key>) => any)`	-	Chamada quando as linhas expandidas mudam.
`onRowAction`	`((key: Key) => void)`	-	Chamada quando uma linha é acionada.
`onSelectionChange`	`((keys: Selection) => void)`	-	Chamada quando a seleção muda.
`onSortChange`	`((descriptor: SortDescriptor) => any)`	-	Chamada quando a ordenação muda.
`render`	`DOMRenderFunction<'div' \| 'table', TableRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`selectedKeys`	`Iterable<Key> \| 'all'`	-	Chaves selecionadas (controlado).
`selectionBehavior`	`SelectionBehavior`	`'toggle'`	Modelo de interação da seleção: `toggle` marca cada item; `replace` troca a seleção.
`selectionMode`	`SelectionMode`	-	Tipo de seleção permitida: nenhuma, única ou múltipla.
`shouldSelectOnPressUp`	`boolean`	-	Seleciona ao soltar, em vez de ao pressionar.
`sortDescriptor`	`SortDescriptor`	-	Coluna e direção da ordenação atual (controlada).
`style`	`StyleOrFunction<TableRenderProps>`	-	Estilos em linha aplicados ao elemento.
`treeColumn`	`Key`	-	Id da coluna que mostra a seta da hierarquia.

Table.Column:

Table.Column
Prop	Tipo	Padrão	Descrição
`allowsArrowNavigation`	`boolean`	-	Permite navegar entre células com as setas, mesmo com Tab como padrão.
`allowsSorting`	`boolean`	-	Permite ordenar por esta coluna.
`children`	`ChildrenOrFunction<ColumnRenderProps>`	-	Conteúdo do componente.
`className`	`ClassNameOrFunction<ColumnRenderProps>`	`'react-aria-Column'`	Classes CSS aplicadas ao elemento.
`defaultWidth`	`ColumnSize \| null`	-	Largura inicial da coluna (só dentro de `Table.ResizableContainer`).
`focusMode`	`'cell' \| 'child'`	-	Define se o foco vai para a célula ou para o primeiro filho focável.
`id`	`Key`	-	Identificador único do elemento.
`isRowHeader`	`boolean`	-	Marca a coluna como cabeçalho de linha, anunciado por leitores de tela.
`maxWidth`	`ColumnStaticSize \| null`	-	Largura máxima da coluna (só dentro de `Table.ResizableContainer`).
`minWidth`	`ColumnStaticSize \| null`	-	Largura mínima da coluna (só dentro de `Table.ResizableContainer`).
`render`	`DOMRenderFunction<'div' \| 'th', ColumnRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`style`	`StyleOrFunction<ColumnRenderProps>`	-	Estilos em linha aplicados ao elemento.
`textValue`	`string`	-	Texto do item, usado na busca por digitação e na acessibilidade.
`width`	`ColumnSize \| null`	-	Largura da coluna (só dentro de `Table.ResizableContainer`).

Table.Body:

Table.Body
Prop	Tipo	Padrão	Descrição
`children`	`React.ReactNode \| ((item: T) => React.ReactNode)`	-	Conteúdo do componente.
`className`	`ClassNameOrFunction<TableBodyRenderProps>`	`'react-aria-TableBody'`	Classes CSS aplicadas ao elemento.
`dependencies`	`readonly any[]`	-	Valores que invalidam o cache dos itens em coleções dinâmicas.
`items`	`Iterable<T>`	-	Itens a renderizar (coleção dinâmica).
`render`	`DOMRenderFunction<'div' \| 'tbody', TableBodyRenderProps>`	-	Troca o elemento DOM padrão por outro, mantendo o comportamento e as props do componente.
`renderEmptyState`	`((props: TableBodyRenderProps) => React.ReactNode)`	-	Conteúdo exibido quando não há itens.
`style`	`StyleOrFunction<TableBodyRenderProps>`	-	Estilos em linha aplicados ao elemento.

Animações

Sem movimento
indicativo

A Table não anima: só hover e foco de linha mudam de cor, e o indicador de ordenação troca de direção. Com prefers-reduced-motion, a folha global da fachada reduz qualquer transição a 0,01 ms.

Acessibilidade

Baseada em Table do React Aria: papéis grid, row, columnheader e gridcell.
aria-label obrigatório em Table.Content; marque uma coluna com isRowHeader.
Teclado: setas navegam entre células, Espaço seleciona a linha, Enter em um cabeçalho ordenável alterna a direção; a ordenação é anunciada.
Checkboxes de seleção precisam de aria-label ("Selecionar ped-8").
Em telas estreitas, a rolagem fica dentro do ScrollContainer, nunca na página.

Boas práticas

Faça

Cabeçalhos curtos, estado em ícone mais texto e vazio com próximo passo.

Evite

Uma tabela de cinco colunas espremida em 390 px, ou célula só com cor para indicar estado.

Prefira DataGrid quando as colunas forem uniformes.
Dê min-w-* ao Table.Content para a rolagem horizontal funcionar.
Alinhe números à direita e use algarismos tabulares.

Relacionados

DataGrid a tabela orientada a dados, preferida no Admin.
Pagination para o rodapé.
EmptyState para o vazio.
ListView e ItemCard para o celular.