Table Data
Batteries-included data table built on TanStack Table. Pass columns, data, and a paginator meta object; you get search, sort, filter, pagination, row selection, bulk actions, and column visibility out of the box. For static tables, use the primitive Table.
When to use TableData vs Table
Table is for static, read-only displays of small data. TableData is the full feature set when users need to search, sort, filter, paginate, or bulk-act on rows.
Default
Five rows with TanStack column definitions and a Laravel-style paginator meta.
Invoice | Customer | Status | Amount |
|---|---|---|---|
| INV-001 | Olivia Martin | Paid | $250.00 |
| INV-002 | Jackson Lee | Pending | $150.00 |
| INV-003 | Isabella Nguyen | Unpaid | $350.00 |
| INV-004 | Sofia Davis | Paid | $450.00 |
| INV-005 | Liam Brown | Paid | $120.00 |
Showing 1 to 5 of 5 results.
API Reference
Props, events, and slots for each sub-component.
TableData
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | ColumnDef[] | — | TanStack Table column definitions. Use accessorKey for data fields and id for custom columns like select / actions. header and cell accept strings or render functions. |
| data | Row[] | — | Row data array. |
| meta | PaginatorMeta | — | Laravel-style paginator metadata: { current_page, per_page, total, last_page, from, to }. |
| model | string | — | Resource slug used for query-string keys and add-button label. |
| label | string | — | Singular label shown in the add button and empty state. |
| pending | boolean | false | Show skeleton rows while data loads. |
| error | Error | string | null | null | Render an error block above the table. |
| searchable | boolean | true | Show the search input. |
| columnToggle | boolean | true | Show the column visibility menu. |
| initialSorting | SortingState | [{ id: 'created_at', desc: true }] | Initial sort. Override when your data has no created_at column. |
| initialPagination | PaginationState | { pageIndex: 0, pageSize: 10 } | Initial page index and size. |
Events
| Event | Description |
|---|---|
| refresh | Fired when the user clicks the refresh button. |
| update:pagination | Fired when the page index or size changes. |
| update:sorting | Fired when sort state changes. |
| update:columnFilters | Fired when column filters change. |
| update:rowSelection | Fired when row selection changes. |
Slots
| Slot | Description |
|---|---|
| filters | Slot for custom filter UI. Receives { table }. |
| add-button | Slot for a custom add button in the toolbar. |
| actions | Toolbar actions on the right. |
| bulk-actions | Toolbar shown when rows are selected. |