Docs
πŸ—οΈ ⏐ Components
Data
Pager

Pager

The Pager component facilitates navigation through pages of data, allowing users to easily switch between different subsets of data. It supports customization of navigation indicators (arrows) and provides various display modes to tailor how pagination information is presented.

Quick Start

To start using the Pager component, import it from the reablocks library and provide the page, size, total props. Anso set the onPageChange prop to handle page changes.

...Β 

Examples

Basic Usage

Simple Pager with Page Numbers

In this example, the pager displays page numbers, allowing users to navigate through pages based on a specific range of items:

Displaying Range of Items

To show the current range of items (e.g., "1-10 of 100 items"), you can set the displayMode to "items":

Comprehensive Pagination Information

For a more detailed view, including both page numbers and the items range, set displayMode to "all":

API

The Pager component offers a range of properties for customization and flexibility:

PropDescriptionDefault
classNameThe class name to add to the pager.
string
pageClassNameThe class name to add to the page buttons.
string
activePageClassNameThe class name for the active page button.
string
pagesContainerClassNameThe class name to add to the pages container.
string
page *The current page number.
number
size *The number of items per page.
number
total *The total number of items.
number
previousArrowThe React node or string to use for the previous arrow.
ReactNode
<PreviousArrow />
nextArrowThe React node or string to use for the next arrow.
ReactNode
<NextArrow />
startArrowThe React node or string to use for the start arrow.
ReactNode
<StartArrow />
endArrowThe React node or string to use for the end arrow.
ReactNode
<EndArrow />
onPageChangeA callback function that is called when the page changes.
(page: number) => void
displayModeThe type of table data for the pager to display.
"pages" | "items" | "all"
pages
themeThe theme for the Pager.
PagerTheme

Design and Usability Tips

  • Predictable Navigation: Design pager controls to be predictable and consistent, with clear indications of current page and total number of pages, aiding in orientation within the dataset.
  • Responsive Adaptation: Ensure pager controls adapt responsively to different screen sizes, maintaining usability and accessibility on mobile devices.