DataTable

Default

ID	Name	Status
p1	Catalog	Active
p2	Editor	Active
p3	Viewer	Draft
p4	Sync	Active
p5	Archive	Draft
p6	Portal	Active
p7	Module 7	Active
p8	Module 8	Active
p9	Module 9	Draft
p10	Module 10	Active

Show search

Show pagination

Selectable rows

Dense padding

Resizable columns

Search placeholder

Empty message

Page size

Props

Prop	Type	Default	Notes
rows	T[]	—	Rows on the current page; the caller filters, sorts, and slices.
rowId	(row: T) => string	—	Stable key per row.
columns	DataTableColumn<T>[]	—	Column defs with optional cell renderers.
loading	boolean	false	Shows the spinner when there are no rows yet.
emptyMessage	string	'No rows'	Shown when rows is empty.
searchValue	string	''	Bindable search text; filtering stays with the caller.
searchAriaLabel	string	'Search'	Accessible name for the search field.
searchPlaceholder	string	'Search'	Search placeholder.
showSearch	boolean	true	Renders the search field.
chooserColumns	ChooserColumn[]	—	Column selector entries; the chooser is omitted when undefined.
chooserLabel	string	'Choose columns'	Accessible name for the column selector.
chooserResetLabel	string	'Reset columns'	Accessible name for the reset button.
onToggleColumn	(key, checked) => void	—	Column visibility handler.
onResetColumns	() => void	—	Reset handler; the caller also bumps resetWidthsSignal to drop resized widths.
paginationTrailing	Snippet	—	Arbitrary content for the pagination row’s right edge.
selectable	boolean	false	Renders the checkbox column.
selectedIds	Set<string>	—	Selected row ids; managed by the caller.
onToggleSelection	(id, checked) => void	—	Row checkbox handler.
onToggleAll	() => void	—	Header checkbox handler.
total	number	—	Total rows across all pages.
pageSize	number	—	Rows per page.
currentPage	number	—	One-based current page.
onPageChange	(page: number) => void	—	Page navigation handler.
onPageSizeChange	(size: number) => void	—	Page-size handler.
tableClass	string	'min-w-0'	Extra classes for the table element; raise the minimum width when columns need a horizontal scroll floor.
fillHeight	boolean	false	Fills the parent; table body scrolls.
bodyScroll	boolean	false	Fixed header band with a body-only scrollport (needs fillHeight).
showPagination	boolean	true	Renders the pagination footer.
dense	boolean	false	Compact padding for panel tables.
sortKey	string \| null	null	Bindable active sort column.
sortDirection	'asc' \| 'desc'	'asc'	Bindable sort direction.
onSort	(key, direction) => void	—	Sort handler; or bind sortKey/sortDirection.
resizable	boolean	false	Draggable column resize handles.
storageKey	string	—	Persists resized widths under this key.