Pagination

Gives you possibility to paginate pages with a lot of results in the list.

To implement Pagination component into your project you'll need to the import:

import Pagination from "@kiwicom/orbit-components/lib/Pagination";

After adding import into your project you can use it simply like:

<Pagination pageCount={1337} selectedPage={69} />

Props

Table below contains all types of the props available in the Pagination component.

Name Type Default Description
dataTest string Optional prop for testing purposes.
hideLabels boolean true If false, the Previous and Next labels will be hidden.
onPageChange func Function for handling onPageChange event. See Functional specs
pageCount number The page count to render into separated buttons. See Functional specs
selectedPage number 1 The index number of the selected page.
size enum "normal" The size of the Pagination.

enum

size
"small"
"normal"

Functional specs

  • If the pageCount will be bigger than 7, the compact version will be rendered.

  • The prop onPageChange will return the new index of selected page. Use arrow function for it, e.g.:

    <Pagination onPageChange={(selectedPage) => doSomething(selectedPage)} />