React SDK

Pagination

The Pagination component is used for paging through paged result sets.

Usage

Editable Example

Enable scrolling to top

Using the scrollToTop prop, when the page is changed, the top of document.body will be scrolled into view.

Editable Example

Scroll target

Using the scrollTarget prop, you can specify the target to scroll into view (if scrollToTop prop is added) and/or scroll within, when the page is changed.

Editable Example

Loading...

Compact mode

By default, the component will switch to its compact mode once the pagination container's width is narrower than 480 pixels, you can override this with the compact prop.

Editable Example

Loading...

Internationalization

Internationalization is handled via the i18n prop. The default values are as follows:

PropertyTypeDefaultDescription
labelstring'Pagination'The aria label for the pagination container.
previousstring'Previous'The aria label for the previous button.
nextstring'Next'The aria label for the next button.
pagestring | ({ page }) => stringPage {{page}}The aria label for a page button.
currentstring | ({ page }) => stringPage {{page}}, current pageThe aria label for a current page button.

These are the placeholders available:

PropertyPlaceholderDescription
pagepageThe page number for the button.
currentpageThe current page number.

Placeholders are passed as an object to a formatter function:

Props

The Pagination component composes the ButtonGroup component so you can pass props for ButtonGroup.

NameTypeDefaultDescription
pageCountnumberThe total number of pages.
totalResultsnumberThe total number of results (used to calculate page count if not set).
resultsPerPagenumberThe number of results per page (used to calculate page count if not set).
pagenumberThe current page.
onChangefunctionThe callback handler. The current page is passed as the only argument.
align'left' | 'center' | 'right''center'How to align the pagination.
scrollToTopbooleanfalseEnable to scroll to top of the page after page change.
scrollTargetstring | Elementdocument.bodySpecify target to scroll to instead of document.body, alternatively you can also pass a string selector, if not found it will do nothing.
i18nobjectSee InternationalizationInternationalization for screen readers.
languagestringISO language code to use for i18n and formatting (e.g. en or en-US). Defaults to browser language.
compactbooleantrue if pagination container is narrower than 480 pixels.Display a narrower pagination design with previous/next buttons and a current page indicator only.