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:
Property | Type | Default | Description |
---|---|---|---|
label | string | 'Pagination' | The aria label for the pagination container. |
previous | string | 'Previous' | The aria label for the previous button. |
next | string | 'Next' | The aria label for the next button. |
page | string | ({ page }) => string | Page {{page}} | The aria label for a page button. |
current | string | ({ page }) => string | Page {{page}}, current page | The aria label for a current page button. |
These are the placeholders available:
Property | Placeholder | Description |
---|---|---|
page | page | The page number for the button. |
current | page | The 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
.
Name | Type | Default | Description |
---|---|---|---|
pageCount | number | The total number of pages. | |
totalResults | number | The total number of results (used to calculate page count if not set). | |
resultsPerPage | number | The number of results per page (used to calculate page count if not set). | |
page | number | The current page. | |
onChange | function | The callback handler. The current page is passed as the only argument. | |
align | 'left' | 'center' | 'right' | 'center' | How to align the pagination. |
scrollToTop | boolean | false | Enable to scroll to top of the page after page change. |
scrollTarget | string | Element | document.body | Specify target to scroll to instead of document.body , alternatively you can also pass a string selector, if not found it will do nothing. |
i18n | object | See Internationalization | Internationalization for screen readers. |
language | string | ISO language code to use for i18n and formatting (e.g. en or en-US). Defaults to browser language. | |
compact | boolean | true if pagination container is narrower than 480 pixels. | Display a narrower pagination design with previous/next buttons and a current page indicator only. |