Pagination

Description

Components for navigating through pages of items

Installation

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

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	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.

Signatures

Signature onPageChange

(newPage: number) => void

Signature onPerPageChange

(newPerPage: number) => void