DataTable — Loidolt Theme

import { DataTable } from '@loidolt/theme-svelte';

Example

1–8 of 42

Rows per page

State lives in createDataTable(), not the component, so the search, filter, column and pagination parts all drive the same table — and you can read or change it from code.
Pass data through a getter (get data() { return rows; }) to keep the table in step with changing rows.
Paged or virtual, the table reports aria-rowcount and each row its aria-rowindex, so screen readers announce "row 27 of 43" rather than "row 2 of 8".
selection: 'multiple' adds a checkbox column with a select-all that is indeterminate when some rows on the page are selected. 'single' uses radios.
editable columns become buttons that turn into a field: Enter or leaving saves through onCellEdit, Escape restores the old value.
hideBelow drops a column on narrow screens while keeping it searchable and sortable. virtual renders only the rows in view; rows must have a fixed height and the wrapper needs sticky with --ldt-table-height.
For server data set manual and rowCount, and fetch in the on…Change callbacks.

Generated from the component source, so it cannot drift from the implementation.

DataTable props
Prop	Type	Default	Notes
`table` required	`DataTableState<T>`	`—`	The state from `createDataTable()`.
`caption`	`string`	`—`
`class`	`string`	`—`	`class` lands on the `<table>`; `wrapperClass` on the scroll container.
`editLabel`	`(header: string) => string`	(header) => `Edit ${header}`
`empty`	`Snippet`	`—`	Shown when no rows remain. Defaults to an `EmptyState` from `emptyTitle`.
`emptyDescription`	`string`	`—`
`emptyTitle`	`string`	`'No results'`
`loading`	`boolean`	`false`	Show placeholder rows while data is on its way.
`loadingRows`	`number`	`5`
`onCellEdit`	`(row: T, columnId: string, value: string) => void`	`—`	Called when an `editable` cell is saved. Update your data in response.
`ref` bindable	`HTMLTableElement \| null`	`null`
`regionLabel`	`string`	`—`
`row`	`Snippet<[DataTableRow<T>]>`	`—`	Render each row yourself. Receives the row; output a whole `<tr>`.
`selectAllLabel`	`string`	`'Select all rows on this page'`
`selectLabel`	`(row: T) => string`	`() => 'Select row'`	Accessible name of a row's selection control.
`sticky`	`boolean`	`false`	Pin the header row. Needs `--ldt-table-height` on the wrapper.
`virtual`	`{ rowHeight: number; overscan?: number }`	`—`	Render only the rows scrolled into view — for thousands of rows on one page. Every row must be `rowHeight` pixels tall, and the wrapper needs `--ldt-table-height` (with `sticky`).
`wrapperClass`	`string`	`—`
`wrapperRef` bindable	`HTMLDivElement \| null`	`null`

Plus the attributes of Omit<HTMLTableAttributes, 'children'>, forwarded to the root element.