Vox Mente
Navegação

Componentes

Table

beta

Marcação semântica de tabela, já com rolagem horizontal contida. Para ordenar, selecionar ou paginar, use Data Table.

Ainda não é estável porque Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/table

Orientação

Marcação semântica de tabela, já com rolagem horizontal contida. É a estrutura; a operação sobre a lista é o Data Table.

Quando usar

  • Os dados são tabulares de verdade: mesmas colunas para todas as linhas, e a comparação entre linhas é o ponto.
  • A lista é curta o bastante para não precisar de ordenação, seleção nem paginação.
  • A leitura importa mais que a operação — um resumo dentro de uma tela maior.

Quando não usar

  • Quando o usuário precisa ordenar, selecionar ou paginar: isso é Data Table, e reimplementar à mão custa mais.
  • Para layout. Tabela é para dado tabular; grade de cartões é grid.
  • Quando cada item tem forma própria: aí a peça é Item, ou Description List para um registro só.
Playground
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Aluno</TableHead>
      <TableHead>Progresso</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Marina Alves</TableCell>
      <TableCell>82%</TableCell>
    </TableRow>
  </TableBody>
</Table>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
Table
  └─ TableHeader
    └─ TableRow
      └─ TableHead
  └─ TableBody
    └─ TableRow
      └─ TableCell
    └─ TableRow
      └─ TableCell
  └─ TableFooter
    └─ TableRow
      └─ TableCell

Uso

Marcação semântica pura: cabeçalho, corpo e linhas. Sem ordenação, seleção ou paginação — para isso existe o data-table.

Rolagem horizontal

Table já embrulha o <table> num contêiner com overflow-x-auto. Não repita esse contêiner, e não envolva a tabela num pai com overflow-hidden — ele corta a rolagem em vez de habilitá-la.

Rodapé

TableFooter ganha fundo próprio e fica reservado para totais e resumos, não para mais linhas de dado.

Legenda

TableCaption fica fora da grade visual, abaixo da tabela — use para uma nota curta, não para título de seção.

Linha selecionada

TableRow reage a data-state="selected" e a aria-expanded sozinha — não escreva o destaque na mão em className.

Acessibilidade

O que o componente já garante, e o que continua sendo responsabilidade da tela.
  • A região que rola horizontalmente precisa ser alcançável por teclado. O sensor registrou scrollable-region-focusable nesta página — é um achado real, não hipótese.
  • Cabeçalho de coluna é cabeçalho de verdade, para que cada célula seja anunciada com o nome da coluna.
  • Em 390 px a tabela rola; verifique que a rolagem é da tabela e não da página inteira.

Em contexto de produto

Onde isto aparece numa tela real da Vox Mente, e não numa vitrine.

No painel do professor a tabela lista as turmas com pessoa, progresso e estado — leitura, sem operação.

Ver o painel do professor

Componentes relacionados

Vizinhos que resolvem o problema parecido. Os links são resolvidos contra o registro.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Origem do dado
  • Orientação, acessibilidade e relacionados: documentação
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css