# Data Table

Tabela densa: ordenação, seleção, edição inline e menu de contexto, em qualquer app React. Sessão e URL ficam com você: canEdit libera a edição e onSortingChange avisa a ordenação. Quem já instalou precisa passar essas props.

- Nome no registry: `data-table`
- Tipo: componente
- Dependências npm: @tanstack/react-table@^8.21.3, class-variance-authority, lucide-react, react
- Demo: https://ui.visantlabs.com/c/data-table
- Categorias: conteudo, tabela, fila, tanstack

## Quando usar

- Use quando: Tabela densa de admin ou dashboard com ordenação, seleção e edição inline
- Evite quando: Fluxo por etapas visível: kanban; lista curta sem ordenar nem editar, table

## Instalar

```bash
npx shadcn@latest add @visant/data-table
```

## Usar

```tsx
<DataTable />
```

## API

### DataTable

- `columns: ColumnDef<TData, TValue>[]`
- `data: TData[]`
- `batchBarInFlow?: boolean = false` — Render the batch action bar in normal flow (full-width, wraps and pushes the table down) instead of the default absolute overlay. Only safe when the toolbar search is hidden; otherwise the bar collides with the search box. Default false (absolute overlay).
- `canEdit?: boolean = false` — Libera a edição inline das colunas com `meta.editable` (precisa de `onCellUpdate`). Desligada por padrão: a permissão é decisão de quem usa.
- `className?: string`
- `compact?: boolean = true` — Compact style (px-3 py-2) for admin tables. Default true.
- `disableSorting?: boolean = false` — Desliga a ordenação por cabeçalho. Use quando a tela já tem um controle de ordenação próprio — dois eixos de ordenação sobre a mesma tabela se contradizem (o controle externo continua dizendo "Prazo" enquanto a tabela já reordenou por outra coluna).
- `emptyMessage?: string = "Nenhum resultado."`
- `enableRowSelection?: boolean = false` — Enable a leading checkbox column with shift-click range selection.
- `footer?: any` — Optional footer (e.g. <TableRow>...</TableRow>)
- `getRowId?: (row: TData) => string` — Stable row id (e.g. the issue id) so selection survives re-sorts/refetches.
- `hidePagination?: boolean = false` — Hide pagination controls. Default false.
- `hideToolbarSearch?: boolean = false` — Hide the built-in toolbar search box. Use when the parent already provides its own search input feeding the data (avoids two competing search fields). Default false.
- `initialColumnPinning?: ColumnPinningState` — Initial column pinning (e.g. `{ right: ['actions'] }` to freeze an actions column to the right edge). Opt-in — admin tables are unaffected when omitted.
- `initialColumnVisibility?: VisibilityState = {}`
- `initialSorting?: SortingState = []` — Ordenação com que a tabela nasce.
- `isLoading?: boolean = false`
- `onCellUpdate?: (row: TData, columnId: string, value: any) => Promise<void>` — Optional callback for updating a cell value inline (only for admins)
- `onDeleteRow?: (row: TData) => void` — Optional callback for deleting a row via context menu
- `onDuplicateRow?: (row: TData) => void`
- `onRowClick?: (row: TData) => void`
- `onSortingChange?: (sorting: SortingState) => void` — Avisa cada mudança de ordenação, para gravar na URL ou no servidor.
- `pageSize?: number = 20` — Optional initial page size. Default 20.
- `primaryColumnId?: string` — The ID of the column that should be treated as "primary". This column will have width: auto (hug content/fill) and take remaining space.
- `renderBatchBar?: (selected: TData[], clear: () => void) => any` — Rendered above the table when ≥1 row is selected.
- `renderRowContextMenu?: (row: TData) => any` — Optional extra context-menu items rendered at the top of the row menu.
- `title?: string` — Title for the table toolbar (optional)