Pagination
Import
import { VKPagination } from "@vivakits/react-components";Basic
The handlePageChange, totalPages and currentPage props are required. The handlePageChange function updates the currentPage state. totalPages defines the total number of pages, while currentPage indicates the current page the user is on.
Total Record
The totalRecord and noOfEntries props control the total number of items and the number of items per page.
-
of 50
Alignment
The rtl prop is used to align the pagination on the left or right side.
CustomIcon
The nextIcon and previousIcon props enable customization of navigation icons for forward and backward movements within the component.
Custom pagination
Pagination can be customized using paginationWrapperClassName and paginationButtonClassName props.
-
of 50
Table pagination
| Name | Position | Age | Start Date | Salary |
|---|---|---|---|---|
| Humfrey Scain | Construction Foreman | 40 | 08/10/2023 | 150,000 |
| Jeane Sherland | Electrician | 38 | 12/12/2023 | 140,000 |
| Merrie Van Son | Construction Worker | 37 | 30/06/2023 | 110,000 |
| Myrtia Fitchell | Project Manager | 35 | 09/04/2024 | 110,000 |
| Betty Giannotti | Construction Worker | 30 | 10/02/2024 | 140,000 |
-
of 50
API Reference
| Attribute | Type | Description | Default |
|---|---|---|---|
| totalPages | number | Defines the total number of pages. | - |
| currentPage | number | Indicates the current page the user is on. | - |
| totalRecord | number | Control the total number of items. | - |
| noOfEntries | number | Control the total the number of items per page. | - |
| nextIcon | ReactNode | Enable customization of navigation icons for forward movements within the component. | - |
| previousIcon | ReactNode | Enable customization of navigation icons for backward movements within the component. | - |
| dynamicPreviousText | string | Changes the text for previous button. | - |
| dynamicNextText | string | Changes the text for next button. | - |
| rtl | boolean | Adjusts the pagination position to either the left or right side. | false |
| entriesShowingSpaceText | string | Shows text before entries. | - |
| handlePageChange | function | Callback function triggered when the page is changed. | - |
| paginationWrapperClassName | CSS | Changes pagination body style. | - |
| paginationNoOfEntriesWrapperClassName | CSS | Changes NoOfEntries body style. | - |
| paginationPrevBtnClassName | CSS | Changes previous button style. | - |
| paginationNextBtnClassName | CSS | Changes next button style. | - |
| paginationButtonClassName | CSS | Changes paginaton button style. | - |
| paginationButtonSelectedClassName | CSS | Changes paginaton selected button style. | - |