Skip to Content

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

NameTypeDescription
pageCountnumberTotal number of pages
totalItemsnumberTotal number of items (used when pageCount is not set)
pageSizenumberItems per page used with totalItems (default: 10)
pagenumberControlled current page
defaultPagenumberDefault current page (default: 1)
siblingCountnumberPages shown on each side of the current page (default: 1)
isDisabledbooleanDisables all pagination controls
onChange(page: number) => voidCalled when the page changes