Alpha component
Pagination is not ready to be used in production. Use at your own risk.
Pagination is not ready to be used in production. Use at your own risk.
Used to navigate between pages on a list.
import { Pagination } from '@contentful/f36-pagination';
When not using the total prop, it's necessary to pass to the component the isLastPage
and the pageLength
prop, so the Pagination component can render correctly.
When you know how many items in total there will be paginated on, you should pass that prop and the Pagination component will make all the calculations.
Name | Type | Default |
---|---|---|
onPageChange required | (page: number) => void Handler function called when user navigates to another page on the pagination. | |
activePage | number Sets which page is active on the Pagination | |
className | string CSS class to be appended to the root element | |
isLastPage | false true Sets if the user is on the last page of navigation | |
itemsPerPage | number Sets how many items are displayed per page. Must be one of the values passed on viewPerPageOptions prop. | |
onViewPerPageChange | (items: number) => void Handler function called when user changes the view per page selector. | |
pageLength | number Number of items are actually on the page. If no value is set it defaults to viewPerPage value | |
showViewPerPage | false true Sets if the View per page selector is shown | |
testId | string A [data-test-id] attribute used for testing purposes | |
totalItems | number Total amount of items the pagination is applied to. | |
viewPerPageOptions | number[] Array of options to show on the View select |
onPageChange
prop must update the list displayed to the user based on the page navigated to.aria-label
to the Pagination to give more context to screen readers.