Pagination

Navigation for a paginated list or table with page numbers and prev/next controls.

Basic

Show code

import { Pagination } from "@makeplane/propel/components/pagination";
import * as React from "react";

export default function BasicDemo() {
  const [page, setPage] = React.useState(1);

  return <Pagination page={page} pageCount={25} onPageChange={setPage} />;
}

With selector and range

Pass pageSize to add the per-page selector and range to show the 1-50 of 250 label before the controls; both are optional.

Show code

import { Pagination } from "@makeplane/propel/components/pagination";
import * as React from "react";

export default function WithSelectorAndRangeDemo() {
  const [page, setPage] = React.useState(1);
  const [pageSize, setPageSize] = React.useState(50);

  return (
    <Pagination
      page={page}
      pageCount={5}
      onPageChange={setPage}
      pageSize={{ value: pageSize, options: [25, 50, 100], onValueChange: setPageSize }}
      range={{ current: "1-50", total: 250 }}
    />
  );
}

Truncation

The visible page window is derived from where the current page sits within pageCount — first and last are always anchored, and runs of two or more skipped pages collapse to an ellipsis.

Show code

import { Pagination } from "@makeplane/propel/components/pagination";

export default function TruncationDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Pagination
        page={1}
        pageCount={5}
        onPageChange={() => {}}
        labels={{ root: "All pages visible" }}
      />
      <Pagination
        page={1}
        pageCount={100}
        onPageChange={() => {}}
        labels={{ root: "Near start" }}
      />
      <Pagination page={45} pageCount={100} onPageChange={() => {}} labels={{ root: "Middle" }} />
      <Pagination
        page={100}
        pageCount={100}
        onPageChange={() => {}}
        labels={{ root: "Near end" }}
      />
    </div>
  );
}

Loading

Set loading to render the current page as a spinner while navigating to it is in flight.

Show code

import { Pagination } from "@makeplane/propel/components/pagination";

export default function LoadingDemo() {
  return <Pagination page={3} pageCount={25} onPageChange={() => {}} loading />;
}

Installation

import { Pagination } from "@makeplane/propel/components/pagination";

Props

Pagination

Prop	Type	Required	Description
page	number	Yes	The current page, 1-based.
pageCount	number	Yes	Total number of pages.
onPageChange	(page: number) => void	Yes	Called with the target page (1-based) when a control is activated.
loading	boolean	No	The current page is rendered as a loading spinner instead of its number — for when navigating to that page is in flight.
pageSize	{ value: number; options: number[]; onValueChange: (pageSize: number) => void; }	No	Optional per-page size selector (Figma `50 v per page`). Provide `value`, the `options`, and `onValueChange`; omit to hide the selector entirely.
range	{ current: ReactNode; total: ReactNode; }	No	Optional range label shown before the controls (Figma `1-50 of 250`). Provide the already-formatted `current` range and `total`.
labels	Partial<PaginationLabels>	No	Override the default English accessible names / visible selector text.