Navigation
Windowed page-number control for a list or table footer, with a "Showing X–Y of Z" summary.
Showing 11–20 of 143
| Prop | Type | Default | Description |
|---|---|---|---|
pageCount | number | — | Total pages. Or pass total + pageSize. |
total / pageSize | number | — / 10 | Item count → derives pageCount. |
page / defaultPage | number | — / 1 | Controlled / initial page (1-based). |
pageCount
number
Default: —
Total pages. Or pass total + pageSize.
total / pageSize
number
Default: — / 10
Item count → derives pageCount.
page / defaultPage
number
Default: — / 1
Controlled / initial page (1-based).
| Prop | Type | Default | Description |
|---|---|---|---|
onChange | (page: number) => void | — | Fired on any page change. |
isDisabled | boolean | false | Disable every button. |
getItemAriaLabel | (type, page, isSelected) => string | — | Localise the button labels. |
onChange
(page: number) => void
Default: —
Fired on any page change.
isDisabled
boolean
Default: false
Disable every button.
getItemAriaLabel
(type, page, isSelected) => string
Default: —
Localise the button labels.
| Prop | Type | Default | Description |
|---|---|---|---|
siblingCount | number | 1 | Pages shown either side of the current one. |
boundaryCount | number | 1 | Pages always shown at each end. |
showEdges | boolean | false | First / last jump buttons. |
hideNavigation | boolean | false | Hide the prev / next arrows. |
size | "sm" | "md" | "lg" | md | Control size. |
siblingCount
number
Default: 1
Pages shown either side of the current one.
boundaryCount
number
Default: 1
Pages always shown at each end.
showEdges
boolean
Default: false
First / last jump buttons.
hideNavigation
boolean
Default: false
Hide the prev / next arrows.
size
"sm" | "md" | "lg"
Default: md
Control size.
| Prop | Type | Default | Description |
|---|---|---|---|
classNames | { base?, list?, item?, page?, prev?, next?, ellipsis? } | — | Slot classes. |
classNames
{ base?, list?, item?, page?, prev?, next?, ellipsis? }
Default: —
Slot classes.
| Prop | Type | Default | Description |
|---|---|---|---|
PaginationSummary | { page, pageSize, total, format? } | — | Renders "Showing X–Y of Z"; format(from, to, total) overrides the text. |
PaginationSummary
{ page, pageSize, total, format? }
Default: —
Renders "Showing X–Y of Z"; format(from, to, total) overrides the text.