Skip to main content

Pagination


Example

items per page
1-10 of 50 items
of 5 pages
<Pagination
page={page}
onPageChange={setPage}
pageCount={5}
itemsPerPage={itemsPerPage}
itemsPerPageOptions={{
10: "10",
25: "25",
50: "50",
100: "100",
}}
onItemsPerPageChange={setItemsPerPage}
messages={{
itemsPerPageOptionsLabel: "items per page",
currentPageItemsLabel: (start: number, end: number, total: number) =>
`${start}-${end} of ${total} items`,
pageCountLabel: (pageCount: number) => `of ${pageCount} pages`,
singlePageLabel: "1 page",
previousPageButtonLabel: "Previous page",
nextPageButtonLabel: "Next page",
}}
/>

Props

NameTypeDefault ValueRequiredDescription
pagenumberYes
pageCountnumberYes
itemsPerPage10 | 25 | 50 | 100Yes
itemsPerPageOptionsRecord<10 | 25 | 50 | 100, string>Yes
onPageChange(page: number) => voidYes
onItemsPerPageChange(itemsPerPage: 10 | 25 | 50 | 100) => voidYes
messagesPaginationMessagesYes