Paginator

Page navigation in four layouts: linear (prev/next + “Page X of Y”), ellipsis (numbered pages with windowing), compact (an editable page number input), and table (rows-per-page select + item range + first/prev/next/last).

Usage


import { Paginator } from '@mav-labs-inc/mavkit-react'
 
<Paginator variant="ellipsis" page={page} total={totalPages} onPageChange={setPage} />
<Paginator variant="table" page={page} totalItems={248} perPage={25} onPageChange={onPage} />

Examples

Linear, ellipsis, compact

Table

Props

Prop	Type	Default	Description
variant	'linear' \| 'ellipsis' \| 'compact' \| 'table'	'ellipsis'
page	number	—	Controlled current page — pair with onPageChange.
defaultPage	number	1
onPageChange	(page: number) => void	—
total	number	1	Total number of pages (ignored when totalItems is set).
perPage	number	—	Controlled rows-per-page (table variant) — pair with onPerPageChange.
defaultPerPage	number	25
onPerPageChange	(perPage: number) => void	—
totalItems	number	—	Total item count (table variant) — derives the page count.
delta	number	2	Ellipsis variant — pages shown on either side of the current page.
ariaLabel	string	'Pagination'
rppOptions	number[]	[5, 10, 25, 50]	Table variant — rows-per-page select options.
className	string	—