Pagination

Open in Playground

page is 1-based; onChange receives the new page. Add pageSizeOptions, pageSize and onPageSizeChange for a "Per page" select. Changing the size is up to you: usually go back to page 1 and recompute pageCount.

The buttons are 38px tall to line up with the per-page select, and Prev and Next share one width.

Per page

Props

pagenumber
Current page (1-based).
pageCountnumber
Total number of pages.
onChange(page: number) => void
Called with the new page.
siblingsnumber
Default: 1
Page numbers shown each side of the current page.
pageSizenumber
Current items per page (shown in the per-page select).
pageSizeOptionsnumber[]
Choices for the per-page select; the select shows only with onPageSizeChange too.
onPageSizeChange(size: number) => void
Called with the chosen page size.
pageSizeLabelstring
Default: 'Per page'
Label of the per-page select.
classNamestring
Default: ''
Extra classes for the root element.

Pagination props
Prop	Type	Default	Description
`page`	number	–	Current page (1-based).
`pageCount`	number	–	Total number of pages.
`onChange`	(page: number) => void	–	Called with the new page.
`siblings`	number	`1`	Page numbers shown each side of the current page.
`pageSize`	number	–	Current items per page (shown in the per-page select).
`pageSizeOptions`	number[]	–	Choices for the per-page select; the select shows only with `onPageSizeChange` too.
`onPageSizeChange`	(size: number) => void	–	Called with the chosen page size.
`pageSizeLabel`	string	`'Per page'`	Label of the per-page select.
`className`	string	`''`	Extra classes for the root element.