Iryx UINavigation
IPagination
Page controls for a list that is too long to show at once. It holds no data: it reports which page was asked for, and you fetch or slice accordingly.
total is the number of items, not pages; the component divides by itemsPerPage itself.
With a table
In server mode ITable takes the same page model, so both can bind to one ref.
vue
<ITable v-model:page="page" :rows="rows" :columns="columns" :total="total" />
<IPagination v-model:page="page" :total="total" :items-per-page="20" />See the server-mode example for the full loop, including the request in between.
How many pages show
siblingCount is how many pages sit either side of the current one. The first and last are always reachable, with an ellipsis standing in for the gap.
showEdges drops the first and last pages when you would rather keep the control narrow.
Alignment
Centred by default, since pagination usually sits under a full-width list.
Sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
total | number | 0 | Total items, not pages |
itemsPerPage | number | 10 | Page size |
siblingCount | number | 1 | Pages shown either side of the current one |
showEdges | boolean | true | Always show the first and last page |
size | 'sm' | 'md' | 'lg' | 'sm' | Control scale |
align | 'start' | 'center' | 'end' | 'center' | Horizontal alignment |
prevLabel | string | 'Previous page' | Accessible name for the previous control |
nextLabel | string | 'Next page' | Accessible name for the next control |
label | string | 'Pagination' | Accessible name for the navigation region |
unstyled | boolean | — | Drop built-in classes |
class | string | — | Merged with the built-in classes |
ui | { root?, list?, item?, ellipsis? } | — | Per-element class overrides |
The model is v-model:page, one-based.
Slots
| Slot | When to use it |
|---|---|
prev / next | Replace the previous and next controls |