Components
Pagination
Page-number navigation with ellipsis collapsing for paged tables and lists.
Pagination renders numbered page buttons with previous/next arrows,
collapsing distant pages into an ellipsis once totalPages gets large. It's
fully controlled: you own the current page and update it in onPageChange.
Use siblingCount to control how many page numbers show on each side of the
current page before they collapse.
Example
Preview
import { Pagination } from '@officina/ui';
import { useState } from 'react';
function InvoiceTablePager() {
const [page, setPage] = useState(1);
return <Pagination page={page} totalPages={20} onPageChange={setPage} siblingCount={1} />;
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| onPageChange* | (page: number) => void | — | Called with the new page when the user navigates. |
| page* | number | — | Current 1-based page number. |
| totalPages* | number | — | Total number of pages. |
| siblingCount | number | 1 | Page buttons shown either side of the current page. |