Igloo branding

Pager

Pagers allow users to navigate through items of the same table or list.

Installation

To install @igloo-ui/pager in your project, you will need to run the following command using npm:

npm install @igloo-ui/pager

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/pager

Usage

Then to use the component in your code, import it!

import Pager from '@igloo-ui/pager';

const [currentPage, setCurrentPage] = React.useState(1);

  <Pager
    pageSize={5}
    totalCount={200}
    currentPage={currentPage}
    onPageChange={(page) => setCurrentPage(page)}
  />

Internationalization

The Pager component uses the @igloo-ui/provider package to receive the correct locale. This should be wrapped around the entire application.

import IglooProvider from '@igloo-ui/provider';

<IglooProvider locale="fr-CA">
  <Pager
    pageSize={5}
    totalCount={200}
    currentPage={currentPage}
    onPageChange={(page) => setCurrentPage(page)}
  />
</IglooProvider>

API

Pager

PropTypeDescription
classNamestringAdd a specific class to the pager component
currentPagenumberThe number of the currently active page
dataTeststringAdd a data-test tag for automated tests
onPageChange(pageNum: number) => voidCalled when the page is changed
pageSizenumberSpecify the number of elements each page should contain
showValueLabelbooleanWhether or not to show the text to the right of the pager
siblingCountnumberRepresents how many pages should be on each side of the current page
totalCountnumberThe total amount of elements
valueLabelReactNodeThe label to show on the right of the pager

usePagination

PropTypeDescription
currentPagenumberThe number of the currently active page
pageSizenumberThe number of elements each page should contain
siblingCountnumberRepresents how many pages should be on each side of the current page.
totalCountnumberThe total amount of elements