Pagination

import { useState } from "react";
import { Pagination } from "@arcadia/ui";

function Turns() {
  const [page, setPage] = useState(0);
  const [size, setSize] = useState(10);
  return (
    <Pagination page={page} pageSize={size} total={351} noun={["turn", "turns"]}
      onPageChange={setPage} onPageSizeChange={(n) => { setSize(n); setPage(0); }} />
  );
}

A table's footer: the rows showing, how many there are, rows per page and the pages.

TSX

import { useState } from "react";
import { Pagination } from "@arcadia/ui";

function Usage() {
  const [page, setPage] = useState(0);
  return <Pagination page={page} pageSize={10} total={42} noun={["file", "files"]} onPageChange={setPage} />;
}

The parent owns page (from 0) and pageSize; the control reads the range from total and never shows a page past the last. Pass onPageSizeChange for the Rows picker and reset to the first page when it changes. Name a row with noun so the range says what it counts. Every paged table uses this one footer, so paging reads and works the same everywhere.

Examples

Fixed page size

Without onPageSizeChange only the range and the pages show.

import { useState } from "react";
import { Pagination } from "@arcadia/ui";

function Fixed() {
  const [page, setPage] = useState(2);
  return <Pagination page={page} pageSize={25} total={85} noun={["chat", "chats"]} onPageChange={setPage} />;
}

A list that fits its page

useFitRows sizes the page to the height the list is given, so the page never scrolls around a paged list and there is no Rows picker: the window decides.

Chat 1
Chat 2
Chat 3

import { useRef, useState } from "react";
import { Pagination, useFitRows } from "@arcadia/ui";

function Fit() {
  const box = useRef<HTMLUListElement>(null);
  const size = useFitRows(box, { rowHeight: 32 });
  const [page, setPage] = useState(0);
  const items = Array.from({ length: 64 }, (_, i) => `Chat ${i + 1}`);
  return (
    <div style={{ display: "flex", flexDirection: "column", height: 260 }}>
      <ul ref={box} style={{ flex: "1 1 auto", minHeight: 0, margin: 0, padding: 0, listStyle: "none", overflow: "hidden" }}>
        {items.slice(page * size, page * size + size).map((t) => <li key={t} style={{ height: 32 }}>{t}</li>)}
      </ul>
      <Pagination page={page} pageSize={size} total={items.length} noun={["chat", "chats"]} showPage={false} onPageChange={setPage} />
    </div>
  );
}

showPage={false} drops “Page 2 of 6”: the range says where you are, and the footer stays one line.

A navigation landmark named by label ("Pages" by default). Previous and Next are named buttons that disable at the ends rather than vanish, so focus never jumps. The range is a polite live region: changing the page or the rows per page announces the new range. The Rows picker is a segmented control with arrow-key focus.

pagerequired: number; The current page, from 0. Out of range reads as the last page.
pageSizerequired: number; Rows per page.
totalrequired: number; Every row there is, across pages.
onPageChangerequired: (page: number) => void
pageSizes: readonly number[]Default [10, 25, 50]; The row-count choices; with onPageSizeChange, a "Rows" picker appears.
onPageSizeChange: (size: number) => void
noun: readonly [one: string, many: string]Default ["row", "rows"]; What a row is, singular and plural, for the range ("1 to 10 of 351 turns"). Default: row.
label: stringDefault "Pages"; Names the navigation landmark. Default: "Pages".
showPage: booleanDefault true; "Page 2 of 6" between the arrows. False for a list that fits its page: the range already says where you are, and the footer keeps to one line beside a meter.
rootStyle: PaginationStyle; Pagination has no knobs of its own: place it with rootStyle.

Rest props go to HTMLAttributes<HTMLElement>.

Usage

Examples

Fixed page size

A list that fits its page

Accessibility

API reference

Pagination