Pagination

Description

Components for navigating through pages of items

Installation

pnpm add @commercetools-uikit/pagination

npm --save install @commercetools-uikit/pagination

Additionally install the peer dependencies (if not present)

pnpm add react react-intl

npm --save install react react-intl

Usage

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;

Properties

| Props | Type | Required | Default | Description | | ----------------- | ----------------------------------------------------------- | :------: | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | totalItems | number | ✅ | | Total number of items across all pages | | page | number | ✅ | | The current page | | onPageChange | FunctionSee 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. xs: 5,10,15,20 s: 20,50 m: 20,50,100 l: 200,500 | | onPerPageChange | FunctionSee signature. | ✅ | | A callback function, called when perPage is changed. |

Signatures

Signature onPageChange

(newPage: number) => void

Signature onPerPageChange

(newPerPage: number) => void