Pager

Pagination controls with page numbers, navigation arrows, and items range display. Supports three display modes: pages, items, or both.

Import

import { Pager } from 'reablocks';

Pager Props

Basic Usage

const [page, setPage] = useState(0);

<Pager
  page={page}
  size={10}
  total={100}
  onPageChange={setPage}
/>

Display Modes

{/* Page numbers only */}
<Pager page={page} size={10} total={100} onPageChange={setPage} displayMode="pages" />

{/* Item range only: "1-10 of 100 items" */}
<Pager page={page} size={10} total={100} onPageChange={setPage} displayMode="items" />

{/* Both page numbers and item range */}
<Pager page={page} size={10} total={100} onPageChange={setPage} displayMode="all" />

Without Start/End Arrows

<Pager
  page={page}
  size={10}
  total={100}
  onPageChange={setPage}
  startArrow={null}
  endArrow={null}
/>

PagerTheme Interface

interface PagerTheme {
  base: string;              // Container (flex, items-center)
  pages: {
    base: string;            // Pages container (inline-flex)
    page: {
      base: string;          // Individual page button
      active: string;        // Active page button
    };
  };
  ellipsis: string;          // Ellipsis indicator ("...")
  pagerDisplayItems: string; // Items display container
  itemsDisplay: string;      // Items range text
  showPageRange: string;     // Range numbers styling
  totalCount: string;        // Total count styling
  control: string;           // Arrow button styling
  firstPage: string;         // First page button
  prevPage: string;          // Previous page button
  lastPage: string;          // Last page button
  nextPage: string;          // Next page button
}