Actions & Navigation
Pagination
Pagination lets users navigate between pages of content.
Total items#
Instead of pageCount, pass totalItems and pageSize and the page count is calculated automatically.
Sibling count#
Control how many pages are shown on each side of the current page with siblingCount.
Controlled#
Use the page and onChange props to control the current page.
Current page: 1
Disabled#
Component props#
| Name | Type | Description |
|---|---|---|
| pageCount | number | Total number of pages |
| totalItems | number | Total number of items (used when pageCount is not set) |
| pageSize | number | Items per page used with totalItems (default: 10) |
| page | number | Controlled current page |
| defaultPage | number | Default current page (default: 1) |
| siblingCount | number | Pages shown on each side of the current page (default: 1) |
| isDisabled | boolean | Disables all pagination controls |
| onChange | (page: number) => void | Called when the page changes |