The Pagination component splits data across pages and lets users navigate between them.
Importing the Pagination Component
To use the Pagination component in our app, we need to import it from our styled components. Here’s how we can import it:
import { Pagination } from "StyledComponents";
Using the Pagination Component
Pagination component can be used with various props to control its appearance. Here is an example of how we can use it:
<Pagination
currentPage={paginationDetails?.page}
handleClick={handlePageClick}
isFirstPage={paginationDetails?.first}
isLastPage={paginationDetails?.last}
nextPage={paginationDetails?.next}
prevPage={paginationDetails?.prev}
totalPages={paginationDetails?.pages}
/>Pagination component with per page view.
<Pagination
isPerPageVisible
currentPage={pagy?.page}
handleClick={handlePageClick}
handleClickOnPerPage={handleClickOnPerPage}
isFirstPage={pagy?.first}
isLastPage={pagy?.last}
itemsPerPage={pagy?.items}
nextPage={pagy?.next}
prevPage={pagy?.prev}
title="invoices/page"
totalPages={pagy?.pages}
/>
Pagination Component Props
| Name | Description | Default Value |
|---|---|---|
| totalPages | Specify the total number of pages. number | - |
| currentPage | Specify the current page number. number | - |
| isFirstPage | Specify whether the current page is first page or not. boolean | - |
| isLastPage | Specify whether the current page is last page or not. boolean | - |
| prevPage | Specify the previous page number. number | - |
| nextPage | Specify the next page number. number | - |
| handleClick | Specify the callback which will be invoked when the page number or previous or next button is clicked. func | (e) => void |
| isPerPageVisible | Specify whether per page view option with functionality required or not. boolean | false |
| title | Specify the title text that needs to be displayed on per page. string | items/page |
| itemsPerPage | Specify number of items thats needed to be fetched for per page view option. number | 10 |
| handleClickOnPerPage | Specify the callback which will be invoked when the per page option is clicked. func | (e) => void |