Component
DataTable
Renders sortable, paginated tabular data with TanStack Table.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/data-tableExamples
Live previews render through the docs app's PandaCSS codegen.
<InvoiceTable />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `columns` | `ColumnDef<TData, TValue>[]` | Yes | - | - |
| `data` | `TData[]` | Yes | - | - |
| `emptyMessage` | `string` | No | - | Message shown when there are no rows. |
| `pageSize` | `number` | No | - | Rows per page; ignored when \`enablePagination\` is false. |
| `enablePagination` | `boolean` | No | - | Render the Previous/Next pagination footer (default \`true\`). |
| `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.json`
- Recipe: `dataTable`
- Files: `src/components/ui/data-table.tsx`