Pagination

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add pagination

Usage#

import { Pagination } from "@/components/ui/pagination"

export function Example() {
  const [page, setPage] = useState(1)

  return (
    <Pagination
      page={page}
      pageCount={10}
      onPageChange={setPage}
    />
  )
}

Anatomy#

import {
  PaginationRoot,
  PaginationRowsPerPage,
  PaginationInfo,
  PaginationGoTo,
  PaginationControls,
  PaginationPrevButton,
  PaginationNextButton,
} from "@/components/ui/pagination"

<PaginationRoot page={…} pageCount={…}>
  <PaginationRowsPerPage />
  <PaginationInfo />
  <PaginationGoTo />
  <PaginationControls />
  {/* or the buttons one by one */}
  <PaginationPrevButton />
  <PaginationNextButton />
</PaginationRoot>

Default#

Out of the box you get the page readout and prev/next controls. The component is fully controlled: drive it with page and onPageChange. The buttons disable themselves at the first and last page.

Go to page#

Set showGoTo to add a numeric field for jumping to an arbitrary page. The value commits on Enter or blur and is clamped into range, so an out-of-bounds entry snaps back to the nearest valid page.

Rows per page#

Set showRowsPerPage and wire rowsPerPage / onRowsPerPageChange to let users choose how many rows to load. Customize the choices with rowsPerPageOptions.

Density#

Like the rest of Koala, Pagination honors the density axis (prop or DensityProvider). The whole toolbar lands on one matched control height: a 40px row when comfortable, a 32px row when compact.

Custom layout#

For a bespoke arrangement, drop the show* toggles and compose the parts yourself inside PaginationRoot. Every part: PaginationInfo, PaginationControls, PaginationGoTo, PaginationRowsPerPage, reads the shared state from context.

API reference#

FAQ#