Pagination
Lets users navigate through large collections of items.
Pagination
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 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. | 
enum
| size | 
|---|
"small" | 
"normal" | 
Functional specs
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)} />