Import
import { Pagination } from '@contentful/f36-components';// orimport { Pagination } from '@contentful/f36-pagination';
Examples
Basic
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.
With total number of items
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.
With view per page selector
With total and view per page selector
Props (API reference)
Open in StorybookName | 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 | 0 |
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 | false |
itemsPerPage | number Sets how many items are displayed per page. Must be one of the values passed on viewPerPageOptions prop. | 20 |
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 | 20 |
showViewPerPage | false true Sets if the View per page selector is shown | false |
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 | [20, 100] |
Content guidelines
onPageChange
prop must update the list displayed to the user based on the page navigated to.
Accessibility
- All the necessary a11y attributes are provided for the pagination elements.
- Pass an
aria-label
to the Pagination to give more context to screen readers.