Component
DataTablePagination
A data table's footer: the visible range, rows per page, and the page trail.
import { DataTablePagination } from '@loidolt/theme-svelte';
Example
| Stock | Status | Layers | |
|---|---|---|---|
| Bracket 1 | Birch ply | Ready | 1 |
| Coaster 1 | Mount board | In review | 8 |
| Sign 1 | Cork | Ready | 4 |
| Enclosure 1 | Acrylic | Blocked | 11 |
| Panel 1 | Birch ply | Ready | 7 |
1–5 of 42
Notes
- The range line is a polite status region, so paging or filtering is announced.
- Pass
pageSizes={[]}to hide the rows-per-page picker.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
table required | DataTableState<T> | — | |
class | string | — | |
label | string | 'Table pages' | Accessible name of the page navigation. |
pageSizeLabel | string | 'Rows per page' | |
pageSizes | number[] | [10, 25, 50, 100] | Choices for rows per page. An empty list hides the picker. |
ref bindable | HTMLDivElement | null | null | |
summary | (range: { from: number; to: number; total: number; selected: number }) => string | ({ from, to, total, selected }) =>
`${total === 0 ? 0 : `${from}–${to}`} of ${total}${selected ? ` · ${selected} selected` : ''}` | The status line, e.g. "11–20 of 48 · 3 selected". |
Plus the attributes of Omit<HTMLAttributes<HTMLDivElement>, 'children'>, forwarded to the root element.