Pagination
Page navigation with smart ellipsis collapse. Combine with PageSizeSelect for full data table controls. Renders nothing when pageCount is 1 or less.
Examples
Many pages
With first / last buttons
Wider sibling range
With page size selector
248 resultsRows per page
Pagination props
page*
number
Current page (1-indexed).
pageCount*
number
Total number of pages.
onPageChange*
(page: number) => void
Called when the user navigates to a different page.
showEdges= false
boolean
Show first and last page jump buttons.
siblings= 1
number
Number of page buttons on each side of the current page.
className
string
Additional classes on the nav element.
| Prop | Type | Default | Description |
|---|---|---|---|
| page* | number | — | Current page (1-indexed). |
| pageCount* | number | — | Total number of pages. |
| onPageChange* | (page: number) => void | — | Called when the user navigates to a different page. |
| showEdges | boolean | false | Show first and last page jump buttons. |
| siblings | number | 1 | Number of page buttons on each side of the current page. |
| className | string | — | Additional classes on the nav element. |
PageSizeSelect props
pageSize*
number
Currently selected page size.
onPageSizeChange*
(size: number) => void
Called when the user picks a new page size. Reset page to 1 here.
pageSizeOptions= [10, 20, 50, 100]
number[]
Available page size options.
total
number
Total result count displayed alongside the selector.
| Prop | Type | Default | Description |
|---|---|---|---|
| pageSize* | number | — | Currently selected page size. |
| onPageSizeChange* | (size: number) => void | — | Called when the user picks a new page size. Reset page to 1 here. |
| pageSizeOptions | number[] | [10, 20, 50, 100] | Available page size options. |
| total | number | — | Total result count displayed alongside the selector. |