Pagination

Used to navigate between pages on a list.

Import

import { Pagination } from '@contentful/f36-components';
// or
import { 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 Storybook

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

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.