Pagination

Pagination splits large result sets across pages, rendering Previous/Next controls plus a compact list of page numbers with ellipsis truncation. It is a fully controlled component: pass currentPage and handle onPageChange to update it. The control renders only when totalItems exceeds 10, so smaller lists stay uncluttered.

Controlled

currentPage is controlled: the component reports the page that was asked for through onPageChange and draws whatever you hand back. It hides itself entirely at ten items or fewer, so a short list never grows a control that can only ever say *page 1 of 1*. Inside a DataTable this is already wired — reach for it directly only for a list that isn't one.

Truncation and alignment

siblingCount sets how many pages flank the current one before the run collapses to an ellipsis. align places the control in its row — end is what a table footer wants, with the row count sitting at the other end.

<div class="w-full space-y-4">
	<Pagination
		currentPage={8}
		totalItems={500}
		itemsPerPage={10}
		siblingCount={0}
		align="start"
	/>
	<Pagination
		currentPage={8}
		totalItems={500}
		itemsPerPage={10}
		siblingCount={2}
		align="center"
	/>
	<Pagination currentPage={8} totalItems={500} itemsPerPage={10} align="end" />
</div>

API

Prop	Type	Default	Description
`currentPage`	`number`	`1`	The active page (1-based). Controlled — update it via onPageChange.
`totalItems` required	`number`		Total number of items across all pages. Pagination is hidden when this is 10 or fewer.
`itemsPerPage`	`number`	`10`	How many items each page holds. Used to derive the total page count.
`siblingCount`	`number`	`1`	Number of page buttons shown on each side of the current page before ellipsis truncation kicks in.
`onPageChange`	`(page: number) => void`		Callback fired with the requested page number when a control is clicked.
`align`	`'start'\|'center'\|'end'`	`'center'`	Horizontal alignment of the control within its container.
`class`	`string`		Additional classes merged onto the root `<nav>` element.