Primitivedata-display

Table

Stable

Tabela de dados sobre o `<table>` nativo: a semântica de tabela, cabeçalho de coluna e legenda é a do navegador, e nada aqui finge ser grid. Duas aparências — `default`, linhas divididas por hairlines sobre a página, e `card`, o corpo numa superfície própria. Linha selecionada é marcada com `data-state="selected"`; quem anuncia a seleção é o checkbox da linha. Para dados que se navegam por setas ou se editam célula a célula, isto não basta.

Instalação

npx up-web-ds add table

Preview

Basic

ItemTipoStatus
buttonprimitivestable
dialogprimitivestable
hero-video-dialogrecipeincoming

Card

Itens do catálogo por status
ItemCategoriaStatusVersãoDownloads
buttonactionstable1.4.01.284
dialogoverlaystable1.2.1962
segmented-controlnavigationexperimental0.6.0318
hero-video-dialogoverlayincoming0.1.027
legacy-modaloverlaydeprecated2.0.34

Selection

Itens para instalar no projeto
ItemTipoStatusDownloads
buttonprimitivestable1.284
dialogprimitivestable962
segmented-controlprimitiveexperimental318
hero-video-dialogrecipeincoming27
legacy-modalprimitivedeprecated4

1 de 5 itens selecionados.

Empty

Itens deprecated com consumidores ativos
ItemSubstitutoProjetos
Nenhum item deprecated ainda é instalado por um projeto.

Overflow

Inventário completo do catálogo
ItemTipoCategoriaStatusFonteVersãoDownloadsAtualizado emLicençaDistribuição
buttonprimitiveactionstableshadcn1.4.01.28412/09/2026MITinternal
dialogprimitiveoverlaystableshadcn1.2.196203/09/2026MITinternal
segmented-controlprimitivenavigationexperimentalcoss0.6.031828/08/2026MITinternal
hero-video-dialogrecipeoverlayincomingmagic0.1.02717/09/2026MITinternal
legacy-modalprimitiveoverlaydeprecatedinternal2.0.3414/01/2026Proprietáriainternal

All states

Basic

ItemTipoStatus
buttonprimitivestable
dialogprimitivestable
hero-video-dialogrecipeincoming

Card

Itens do catálogo por status
ItemCategoriaStatusVersãoDownloads
buttonactionstable1.4.01.284
dialogoverlaystable1.2.1962
segmented-controlnavigationexperimental0.6.0318
hero-video-dialogoverlayincoming0.1.027
legacy-modaloverlaydeprecated2.0.34

With Footer

Downloads por item no último trimestre
ItemFonteDownloads
buttonshadcn1.284
dialogshadcn962
segmented-controlcoss318
hero-video-dialogmagic27
legacy-modalinternal4
Total2.595

Selection

Itens para instalar no projeto
ItemTipoStatusDownloads
buttonprimitivestable1.284
dialogprimitivestable962
segmented-controlprimitiveexperimental318
hero-video-dialogrecipeincoming27
legacy-modalprimitivedeprecated4

1 de 5 itens selecionados.

Empty

Itens deprecated com consumidores ativos
ItemSubstitutoProjetos
Nenhum item deprecated ainda é instalado por um projeto.

Overflow

Inventário completo do catálogo
ItemTipoCategoriaStatusFonteVersãoDownloadsAtualizado emLicençaDistribuição
buttonprimitiveactionstableshadcn1.4.01.28412/09/2026MITinternal
dialogprimitiveoverlaystableshadcn1.2.196203/09/2026MITinternal
segmented-controlprimitivenavigationexperimentalcoss0.6.031828/08/2026MITinternal
hero-video-dialogrecipeoverlayincomingmagic0.1.02717/09/2026MITinternal
legacy-modalprimitiveoverlaydeprecatedinternal2.0.3414/01/2026Proprietáriainternal

Usage

@/components/ui/table
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
Table
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Item</TableHead>
      <TableHead>Tipo</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>button</TableCell>
      <TableCell>primitive</TableCell>
      <TableCell>stable</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>dialog</TableCell>
      <TableCell>primitive</TableCell>
      <TableCell>stable</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>hero-video-dialog</TableCell>
      <TableCell>recipe</TableCell>
      <TableCell>incoming</TableCell>
    </TableRow>
  </TableBody>
</Table>

Props

Table

Props de Table
PropTypeDefaultDescription
renderReact.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>sem valor padrãoReplaces the scroll container that wraps the `<table>`.
variantTableVariant'default'`card` puts the body on a raised surface of its own.

Estende React.ComponentProps<'table'>. Aceita também os atributos padrão de um elemento React (289 não listados).

TableHeader

Estende React.ComponentProps<'thead'>. Aceita também os atributos padrão de um elemento React (280 não listados).

TableBody

Estende React.ComponentProps<'tbody'>. Aceita também os atributos padrão de um elemento React (280 não listados).

TableRow

Estende React.ComponentProps<'tr'>. Aceita também os atributos padrão de um elemento React (280 não listados).

TableHead

Estende React.ComponentProps<'th'>. Aceita também os atributos padrão de um elemento React (286 não listados).

TableCell

Estende React.ComponentProps<'td'>. Aceita também os atributos padrão de um elemento React (289 não listados).

TableCaption

Estende React.ComponentProps<'caption'>. Aceita também os atributos padrão de um elemento React (280 não listados).

Composition

O Table envolve o `<table>` num contêiner rolável. Cabeçalho, corpo e rodapé são irmãos; a legenda fica no próprio Table e dá nome a ele.

Composição de Table

Table

  • Table
    • TableHeader
      • TableRow
        • TableHead
    • TableBody
      • TableRow
        • TableCell
    • TableFooter
      • TableRow
        • TableCell
    • TableCaption

Metadata

Notas de acessibilidade

Leitor de tela verificado por teste: table, rowgroup, row, columnheader e cell vêm dos elementos nativos, a legenda é o nome acessível da tabela, e `scope` do cabeçalho segue a seção — col no thead, row no tbody e no tfoot —, então "Total" é anunciado como cabeçalho da própria linha. Nenhum papel de grid e nenhum aria-selected: a seleção é dita pelo checkbox da linha, e o tom da linha é só para o olho. Teclado verificado por teste e em navegador: enquanto as colunas transbordam, o contêiner rolável entra na ordem de Tab com anel de foco visível e é nomeado pela legenda (region), e as setas o rolam; quando cabe, ele não é uma parada de Tab vazia. Touch verificado em viewport de 375px com emulação de toque: a tabela larga rola dentro do próprio contêiner sem empurrar a página, e o checkbox da linha é tocável numa área de 24x24. Hover e seleção têm tons distinguíveis do repouso em light e dark, verificados em navegador. Reduced motion: a tabela não tem movimento; o que muda de estado é só cor.

Classificação

Layer
Primitive
Domínio
Domain-free (compartilhado)
Categoria
data-display
Status
Stable

Origem e distribuição

Fonte
coss registry / table
Licença
MIT
Distribuição
Interna

Acessibilidade

  • Teclado: revisado
  • Leitor de tela: revisado
  • Touch: revisado
  • Reduced motion: revisado

Dependências

Pacotes
@base-ui/react
Ícones
Nenhum
Construído sobre
Nenhum
Usado por
Nenhum ainda