Pagination
Lets users navigate through large collections of items.
GuidelinesReact
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} />
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 visible. |
| onPageChange | number => void | 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. |
| size |
|---|
"small" |
"normal" |
If the
pageCountwill be bigger than 7, the compact version will be rendered.The prop
onPageChangewill return the new index of selected page. Use arrow function for it, e.g.:
<Pagination onPageChange={selectedPage => doSomething(selectedPage)} />