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.

import { useState } from 'react';
import { Pager } from 'reablocks';


export default function App() {
const [page, setPage] = useState<number>(0);


return (
  <Pager
    page={page}
    size={10}
    total={100}
    onPageChange={setPage}
    displayMode="pages"
  />
);
}

import { useState } from 'react';
import { Pager } from 'reablocks';

export default function App() {
const [page, setPage] = useState<number>(0);

return (
  <Pager
    page={page}
    size={10}
    total={100}
    onPageChange={setPage}
    displayMode="pages"
  />
);
}

...

Examples

Basic Usage

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:

Name	Type	Default
`className`	`string` The class name to add to the pager.
`pageClassName`	`string` The class name to add to the page buttons.
`activePageClassName`	`string` The class name for the active page button.
`pagesContainerClassName`	`string` The class name to add to the pages container.
`page`	`number` The current page number.
`size`	`number` The number of items per page.
`total`	`number` The total number of items.
`previousArrow`	`ReactNode` The React node or string to use for the previous arrow.	`<PreviousArrow />`
`nextArrow`	`ReactNode` The React node or string to use for the next arrow.	`<NextArrow />`
`startArrow`	`ReactNode` The React node or string to use for the start arrow.	`<StartArrow />`
`endArrow`	`ReactNode` The React node or string to use for the end arrow.	`<EndArrow />`
`onPageChange`	`(page: number) => void` A callback function that is called when the page changes.
`displayMode`	`"pages" \| "items" \| "all"` The type of table data for the pager to display.	`'pages'`
`theme`	`PagerTheme` The theme for the Pager.

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.