Pagination
Page navigation for lists and tables. Fully controlled: it renders the state you pass it.
It doesn't hold state
page and onPageChange are both required. The component never moves on its own, which is what lets the same page number live in a URL query param or a data-fetching hook rather than being trapped in here.
Siblings
Higher values keep more context visible at the cost of width. Below, the same page in a 24-page set with one sibling and then two.
In a table footer
Pair it with a count so people know the size of what they're paging through, not just where they are in it.
Showing 1–20 of 482
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| total | number | Total number of pages, not total rows. Divide by your page size first. | |
| page | number | Current page, 1-based. | |
| onPageChange | (page: number) => void | Fires with the requested page. | |
| siblings | number | 1 | How many page numbers to show either side of the current one before collapsing to an ellipsis. |