Components for navigating through pages of items
yarn add @commercetools-uikit/pagination
npm --save install @commercetools-uikit/pagination
Additionally install the peer dependencies (if not present)
yarn add react react-intl
npm --save install react react-intl
import { Pagination } from '@commercetools-uikit/pagination';
const Example = () => {
const items = [{ id: '1' }, { id: '2' }];
return (
<Pagination
totalItems={items.length}
page={1}
onPageChange={() => {}}
onPerPageChange={() => {}}
/>
);
};
export default Example;
Props | Type | Required | Default | Description |
---|---|---|---|---|
totalItems |
number |
✅ | Total number of items across all pages | |
page |
number |
✅ | The current page | |
onPageChange |
Function See signature. |
✅ | A callback function, called when the page is changed. | |
perPage |
number |
20 |
Number of items per page, according to the pre-defined range values. | |
perPageRange |
TPageRangeSize |
's' |
Range of items per page.
s: 20,50
m: 20,50,100
l: 200,500
|
|
onPerPageChange |
Function See signature. |
✅ | A callback function, called when perPage is changed. |
(newPage: number) => void
(newPerPage: number) => void