Table
StableTabela 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 tablePreview
Basic
Card
Selection
1 de 5 itens selecionados.
Empty
Overflow
All states
Basic
Card
With Footer
Selection
1 de 5 itens selecionados.
Empty
Overflow
Usage
Props
Table
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.
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