Component
DataTableAdvanced
Extends the data table with expandable detail rows, frozen columns, and a sticky header, plus a headless useDataTable hook.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/data-table-advancedExamples
Live previews render through the docs app's PandaCSS codegen.
<MembersTable />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `emptyMessage` | `string` | No | - | Message shown when there are no rows. |
| `stickyHeader` | `boolean` | No | - | Keep the header pinned while the body scrolls (pairs with \`maxHeight\`). |
| `maxHeight` | `number \ | string` | No | - |
| `renderSubRow` | `(row: TData) => ReactNode` | No | - | Render an expandable detail panel for a row; adds a leading expand toggle. |
| `expandLabel` | `string` | No | - | Accessible label for the expand toggle (i18n). Default \`'Toggle row details'\`. |
| `enableColumnVisibility` | `boolean` | No | - | Show a column-visibility menu in the toolbar. |
| `columnsLabel` | `string` | No | - | Trigger label for the column-visibility menu (i18n). |
| `exportFileName` | `string` | No | - | Show a CSV export button downloading the current view under this name. |
| `exportLabel` | `string` | No | - | Label for the CSV export button (i18n). |
| `enableVirtualization` | `boolean` | No | - | Only mount the rows intersecting the scroll viewport, for large backlogs.<br />Requires a scroll region (\`maxHeight\` defaults to \`400\` when enabled) and is<br />mutually exclusive with \`renderSubRow\`. Pagination is forced off — the whole<br />dataset is windowed instead. |
| `estimateRowHeight` | `number` | No | - | Estimated row height in px when virtualizing; refined by measurement (default \`48\`). |
| `overscan` | `number` | No | - | Extra rows rendered beyond the viewport while virtualizing (default \`8\`). |
| `className` | `string` | No | - | - |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
No recipe variants are documented for this component.
Registry
Files this component contributes to your registry install.
- Manifest: `/r/data-table-advanced.json`
- Recipe: `dataTable`
- Files: `src/components/ui/data-table-advanced.tsx`