Pagination
stable 2 kB<hk-pagination>Page links that window with an ellipsis, so the control keeps a stable width whether you are on page 2 or page 200. The page-size control is a button and a panel rather than a native select: an OS-painted option list ignores every class on the element and comes back white on a dark theme.
#pager#table
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| page | number | 1 | Current page, 1-based. Two-way bindable. |
| pageSize | number | 10 | Rows per page. Two-way bindable. |
| total | number | 0 | Total record count. |
| pageLinks | number | 5 | How many numbered links to show around the current page. |
| pageSizeOptions | number[] | [] | Page sizes offered. Empty hides the selector. The control is a button and a panel, never a native select — an OS-painted option list ignores the component's theme and comes back white on dark. |
Outputs
pageChange / pageSizeChangeEventEmitter<number>Emits on navigation.
Keyboard
- Tab Moves through controls
- Enter / Space Activates a page link
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-page-active-bg | #b91c1c | Current page fill. |
| --hk-page-hover | rgb(15 23 42 / 0.05) | Hover wash. |
Accessibility
- The current page carries aria-current="page"; the others are plain links.
- Previous and next are disabled rather than hidden at the ends, so the control never reflows.
- Changing page size keeps the first visible record in view instead of snapping to page 1.