Componentes
DataTable
Tabela de trabalho em papel. Linha de 48 (36 no denso), cabeçalho de máquina que ordena, número à direita em Sora tabular. O link da linha é o alvo do teclado.
Exemplos#
| Conta | ID | Status | Método | Responsável | Valor |
|---|---|---|---|---|---|
| PG-24A7-96F844 | Liquidado | PIX | AL | R$ 26,3 mil | |
| PG-24A7-724AA0 | Em análise | Cartão | ? | R$ 1,1 mil | |
| PG-24A7-BAAEBC | Pendente | Boleto | RS | R$ 10,3 mil | |
| PG-24A7-11C0D2 | Falhou | PIX | AL | R$ 480 |
clique ou use Tab no link da linha
Linha de 48 · número à direita · o link é o alvo do teclado
| Conta | ID | Status | Método | Responsável | Valor |
|---|---|---|---|---|---|
| PG-24A7-96F844 | Liquidado | PIX | AL | R$ 26,3 mil | |
| PG-24A7-724AA0 | Em análise | Cartão | ? | R$ 1,1 mil | |
| PG-24A7-BAAEBC | Pendente | Boleto | RS | R$ 10,3 mil | |
| PG-24A7-11C0D2 | Falhou | PIX | AL | R$ 480 |
clique ou use Tab no link da linha
Denso · 36
| Conta | Valor |
|---|---|
Nenhum pagamento hoje. | |
Vazio
Importar#
import { DataTable } from "@hiboupay/react";
import type { DataTableProps, Column } from "@hiboupay/react";Quando usar#
Use quando
- Lista de registros com colunas comparáveis.
- Dado financeiro que precisa alinhar.
Não use quando
- Poucos itens ricos: cartões.
- Layout de página.
Variantes#
padrão · 48
Leitura confortável.
dense · 36
Muitas linhas, painel operacional.
Anatomia#
- 01Contêiner papel e1 com rolagem horizontal
- 02Cabeçalho hb-label, opaco, que gruda quando pedido
- 03Botão de ordenação com seta Graffiti
- 04Linhas com divisor 5%
- 05Link ou botão na primeira célula quando a linha abre
- 06Célula numérica hb-num à direita
- 07Vazio com EmptyState compacto
- 08Carregando com esqueleto na altura da linha
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| columns* | Column<T>[] | { key, header, cell(row), align?, width?, sortable?, sortValue?, className? }. | |
| rows* | T[] | Dados. | |
| rowKey* | (row: T) => string | Chave estável. | |
| onRowClick | (row: T) => void | Ação de mouse. O teclado usa um botão na primeira célula. | |
| rowHref | (row: T) => string | Link real na primeira célula. O ::after cobre a linha. | |
| sort | SortState | null | Ordem controlada. Sem isto, a tabela guarda. | |
| onSortChange | (sort: SortState) => void | Nova ordem ao clicar no cabeçalho. | |
| loading | boolean | Corpo vira esqueleto. aria-busy na tabela. | |
| stickyHeader | boolean | Cabeçalho gruda no topo do scroll. | |
| empty | ReactNode | string | "Nada por aqui." | Conteúdo quando não há linhas. |
| dense | boolean | false | Linha de 36px. |
| caption | string | Legenda acessível (sr-only). |
Acessibilidade#
Teclado
Leitor de tela
- —Tabela semântica com th scope=col.
- —Use caption para nomear a tabela.
Boas práticas#
Faça
- Números à direita.
- ID em mono.
- Célula vazia fica vazia.
Evite
- Zebra.
- Centralizar números.
Conteúdo#
- —Cabeçalho curto, substantivo.
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Estado
Badge
Etiqueta de estado com raio 6, nunca pílula. O ponto diz que o estado está vivo. O app mapeia o domínio para um tom do Core.
Dados
Avatar
Iniciais em Sora sobre uma cor de token: Vivid Blue, Graffiti, success-ink, warning-ink ou danger-ink. A cor vem do e-mail, então a mesma pessoa tem sempre a mesma cor. Ninguém atribuído é tracejado.
Estado
EmptyState
Vazio: a coruja vigia até ter o que mostrar. Sem ilustração genérica. Sempre que puder, um próximo passo. É o StatusView no tom neutro.
Dados
Pagination
Intervalo em Sora tabular e duas setas no rodapé da lista. No estreito o texto sai da vista e fica no leitor.