Carregando…Carregando…Carregando…Carregando…Presentational shell over a @tanstack/react-table instance — sort/filter/paginate/select stay in your table state.
$ npx kikitocn add headless-table@/lib/utils@/components/ui/cn/table@/components/ui/cn/pagination@/components/ui/cn/select@tanstack/react-table| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
table* | Table<TRow> (@tanstack/react-table) | — | Instância pronta de useReactTable() — todo estado mora nela, controlado pelo consumidor |
emptyMessage | string | 'No results found.' | Texto quando não há linhas |
actionBar | (selectedRowIds: string[]) => React.ReactNode | undefined | Barra de ação acima da tabela, exibida quando há linhas selecionadas |
onRowClick | (row: TRow) => void | undefined | Callback ao clicar numa linha |
stickyHeader | boolean | false | Fixa o cabeçalho ao rolar |
striped | boolean | false | Linhas zebradas |
size | 'sm' | 'md' | 'lg' | 'md' | Densidade de padding das células |
hideViewOptions | boolean | false | Esconde o dropdown de visibilidade de coluna |
pageSizeOptions | number[] | [10, 20, 30, 50] | Opções do seletor de linhas por página |
className | string | — | Classes CSS extras |
style | React.CSSProperties | — | Estilos inline extras |
instância useReactTable() controlada por fora
| Fatura | Cliente | Status | Valor | |
|---|---|---|---|---|
| INV-001 | Ana Souza | pago | R$ 420.00 | |
| INV-002 | Bruno Lima | pendente | R$ 180.00 | |
| INV-003 | Carla Mendes | atrasado | R$ 960.00 | |
| INV-004 | Diego Alves | pago | R$ 75.00 | |
| INV-005 | Elis Farias | pendente | R$ 310.00 |
import { HeadlessTable } from "@/components/ui/cn/headless-table/HeadlessTable";
export function HeadlessTableExample() {
return (
<HeadlessTable size="sm" />
);
}