Ir para o conteúdo
uiify

Framework

Next.jsTanStack StartAstroVike

Estilo

CSSTailwind

Tema

Idioma

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)

Table

Tabela nativa com adaptador interativo opcional.

Navegadores
Chrome 123+Firefox 121+Safari 17.5+
Nível
0
Tamanho compactado
617 B
Limite de layout forçado
0 ms
Limite do axe
0
Compatível com SSR
Sim
Contrato publicado
Ambiente de teste

Experimentar

Table

Exemplo de tabela nativa

Integrantes da equipe
NomeFunçãoSituação
Alice ChenAdministradorAtivo
Bob SmithEditorAtivo
Carol LeeLeitorConvidado
3 integrantes · 2 ativos

Ordenar, filtrar e expandir

FunçãoDetalhes
Alice ChenAdministrador
Bob SmithEditor
Carol LeeLeitor
3 integrantes · 0 selecionados

Cabeçalhos, rodapé e colunas fixos

Integrante 1Editormember1@example.comAtivo
Integrante 2Editormember2@example.comAtivo
Integrante 3Editormember3@example.comAtivo
Integrante 4Editormember4@example.comAtivo
Integrante 5Editormember5@example.comAtivo
Integrante 6Editormember6@example.comAtivo
Integrante 7Editormember7@example.comAtivo
Integrante 8Editormember8@example.comAtivo
Integrante 9Editormember9@example.comAtivo
Integrante 10Editormember10@example.comAtivo
Integrante 11Editormember11@example.comAtivo
Integrante 12Editormember12@example.comAtivo
Integrante 13Editormember13@example.comAtivo
Integrante 14Editormember14@example.comAtivo
Integrante 15Editormember15@example.comAtivo
Integrante 16Editormember16@example.comAtivo
Integrante 17Editormember17@example.comAtivo
Integrante 18Editormember18@example.comAtivo
Integrante 19Editormember19@example.comAtivo
Integrante 20Editormember20@example.comAtivo
Integrante 21Editormember21@example.comAtivo
Integrante 22Editormember22@example.comAtivo
Integrante 23Editormember23@example.comAtivo
Integrante 24Editormember24@example.comAtivo
24 integrantes

API

Table.Root (native)

PropTipoPadrãoDescrição
layout"auto" | "fixed""auto"Layout de tabela nativa. Seleção, ordenação e expansão usam a entrada explícita TableClient.
size"sm" | "md" | "lg"—Espaçamento das células definido pela folha de estilos selecionada.
variant"solid" | "outline" | "ghost"—Variante de superfície definida pela folha de estilos selecionada.
renderReactElement | ((props, state) => ReactElement)—Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

Table.Footer

PropTipoPadrãoDescrição
stickyboolean—Fixa o rodapé no fim do eixo de bloco do contêiner de rolagem.
renderReactElement | ((props, state) => ReactElement)—Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

Table.RowHeader / Table.Cell / Table.ColumnHeader

PropTipoPadrãoDescrição
align"start" | "center" | "end""start"Alinhamento lógico do texto nesta célula.
sticky"start" | "end"—Fixa uma célula na borda lógica do eixo inline. Para células fixas adjacentes, defina --uiify-table-sticky-offset em cada uma.
renderReactElement | ((props, state) => ReactElement)—Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

TableClient.ExpandTrigger / TableClient.ExpandedRow

PropTipoPadrãoDescrição
rowId*string—Chave de linha compartilhada que conecta o botão de expansão ao <tr> nativo. Coloque um <td colSpan={columnCount}> dentro da linha expandida.

TableClient.Root — @gunkin/uiify/components/table/client

PropTipoPadrãoDescrição
aria-labelstring—Nome acessível da tabela quando não houver legenda ou título visível que a nomeie.
aria-labelledbystring—Id do elemento que rotula a tabela.
selectionMode"none" | "single" | "multiple""none"Define se as linhas podem ser selecionadas e quantas por vez; "none" renderiza uma tabela estática simples sem o papel grid.
selectionBehavior"toggle" | "replace"—Define se clicar em uma linha a adiciona à seleção ou substitui a seleção atual.
defaultSelectedKeysIterable<string>—Ids das linhas selecionadas inicialmente, mantendo a seleção não controlada dentro do componente.
selectedKeysIterable<string>—Ids das linhas selecionadas agora, tornando a seleção controlada por quem chama.
onSelectionChange(selectedKeys: Set<string>) => void—Chamado com o novo conjunto de ids de linhas selecionadas sempre que a seleção muda.
defaultSortDescriptorSortDescriptor | null—Coluna e direção da ordenação inicial, mantendo o estado de ordenação não controlado dentro do componente.
sortDescriptorSortDescriptor | null—Coluna e direção da ordenação atual, tornando a ordenação controlada.
onSortChange(descriptor: SortDescriptor | null) => void—Chamado com o novo descritor de ordenação, ou null, quando um cabeçalho de coluna ordenável é ativado.
expandedKeys / defaultExpandedKeysIterable<string>—Chaves das linhas expandidas, controladas ou iniciais.
onExpandedChange(keys: Set<string>) => void—Informa solicitações de expansão. Linhas controladas aguardam as chaves atualizadas.
renderReactElement | ((props, state) => ReactElement)—Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

Table.Header

PropTipoPadrãoDescrição
stickybooleanfalseFixa esta seção no contêiner de rolagem; Header usa o início do eixo de bloco e Footer usa o fim.
renderReactElement | ((props, state) => ReactElement)—Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

Table.Body

PropTipoPadrãoDescrição
childrenReactNode—As linhas do corpo da tabela.
renderReactElement | ((props, state) => ReactElement)—Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

Table.Row

PropTipoPadrãoDescrição
id*string—Id estável da linha, usado como chave de seleção e id do elemento.
disabledbooleanfalseImpede que a linha seja selecionada ou receba foco por teclado.
selectedboolean—Marca a linha como selecionada na marcação renderizada no servidor antes de o armazenamento de seleção assumir o controle.
renderReactElement | ((props, state) => ReactElement)—Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

Table.ColumnHeader

PropTipoPadrãoDescrição
id*string—Id de coluna ao qual os descritores de ordenação se referem.
allowsSortingbooleanfalseFaz o cabeçalho alternar a ordenação da coluna e publicar aria-sort.
sortDirection"ascending" | "descending" | null—Direção de ordenação renderizada para esta coluna, usada na marcação inicial do servidor quando a ordenação é permitida.
onClickReact.MouseEventHandler<HTMLTableCellElement>—Executa antes da ordenação; preventDefault() veta a alteração da ordenação.
childrenReactNode—O rótulo do cabeçalho.
renderReactElement | ((props, state) => ReactElement)—Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

Table.Cell

PropTipoPadrãoDescrição
childrenReactNode—O conteúdo da célula.
renderReactElement | ((props, state) => ReactElement)—Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

Table.Caption

PropTipoPadrãoDescrição
childrenReactNode—O texto da legenda que descreve a tabela.
renderReactElement | ((props, state) => ReactElement)—Substitua o elemento renderizado preservando comportamento e conexões de acessibilidade.

Table.RowSelect

PropTipoPadrãoDescrição
rowId*string—Id da linha que esta caixa de seleção seleciona e desseleciona.

Teclado

TeclaAção
TabFoque os controles de ordenação, seleção e expansão no TableClient
Enter / SpaceAtive um botão de ordenação ou expansão em foco; alterne uma caixa de seleção
Arrow keysMova o foco entre linhas selecionáveis do corpo no TableClient

Acessibilidade

O Table padrão renderiza <table>, <caption>, <thead>, <tbody> e <tfoot> nativos sem JavaScript no cliente; use ColumnHeader e RowHeader para a semântica dos cabeçalhos. A entrada /client acrescenta ordenação, seleção, navegação por teclado entre linhas e expansão controlada, expostas por aria-sort, aria-expanded e aria-controls. ExpandedRow é um <tr> nativo; coloque uma Cell com colSpan dentro dele. Filtragem e ordenação dos dados ficam a cargo do consumidor.

Pontos de integração de estilos

data-uiify-tabledata-partdata-layoutdata-sizedata-variantdata-stickydata-selecteddata-disabled--uiify-table-sticky-offset