Pagination
Splits large data sets across numbered pages with previous and next navigation.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
theme | 'light' | 'dark' | 'dark' | Per-component theme override. Sets data-theme on the host element so token overrides cascade into Shadow DOM. |
total-items-count | number | 1 | Total number of items in the data set. Combined with items-per-page to compute the total page count. |
items-per-page | number | 1 | Number of items shown per page. Combined with total-items-count to compute the total page count. |
active-page | number | 1 | Index of the currently active page (1-based). Mutable — the component updates this prop on user interaction and also emits an update event. |
show-last-page | boolean | true | When true, a direct link to the last page is always shown alongside the ellipsis. Set to false when the total count is unknown. |
intl | PaginationIntl | { root, prev, next, page } | Overrides default aria-label wording. { root?: string; prev?: string; next?: string; page?: string } — all fields are optional. Assign the object programmatically, not as a JSON attribute. |
Events
| Name | Detail type | Bubbles | Description |
|---|---|---|---|
update | { page: number; previousPage: number } | No | Emitted when the user navigates to a different page. detail.page is the newly selected page; detail.previousPage is the page that was active before the click. Does not bubble. |
CSS custom properties
The component inherits all --diwa-* design tokens from the host element. Theme switching is handled by setting data-theme on the host via the theme prop — no custom property overrides are required for standard usage.