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
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)} />