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} />;
}

Usage

Examples

Fixed page size

Accessibility

API reference