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.

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.

Rows per page

API Reference

TableData

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.

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.

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.

Table Tabs