Pagination

Pagination component is a versatile and reusable component that provides functionality to display data in pages. We can customize it by passing various props to suit our component needs. In this guide, we’ll walk through how to use the Pagination component in codebase.

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