Skip to Content

Pagination

Controlled: pass the current page and handle onChange. Provide either pageCount directly, or total + pageSize and let it compute the count. siblingCount controls how many pages show on each side of the current one.

import { Pagination } from '@gg-software/ui'; const [page, setPage] = useState(1); <Pagination page={page} pageCount={12} onChange={setPage} /> // derived from a result count <Pagination page={page} total={480} pageSize={20} onChange={setPage} siblingCount={2} />

Props

PropTypeDefaultDescription
page*number
pageCountnumbertotal number of pages (or provide `total` + `pageSize`)
totalnumber
pageSizenumber10
onChange*(page: number) => void
siblingCountnumber1pages shown on each side of the current page
classNamestring

* required · generated from packages/ui/src/navigation/Pagination/Pagination.tsx