Pagination
Reusable pagination controls for lists and tables. Shows simple Previous/Next buttons on mobile, and expands to include result counts and page indicators on desktop. Automatically hides when there is only one page.
Import
import { Pagination } from '@wavebooking/aqua-fusion';Preview
Live PreviewOpen in Storybook (opens in a new tab)
Loading preview...
Usage
<Pagination
page={currentPage}
pageSize={10}
total={97}
totalPages={10}
onPageChange={(newPage) => setCurrentPage(newPage)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
page* | number | - | Current page index (0-based). |
pageSize* | number | - | Number of items displayed per page. |
total* | number | - | Total number of items across all pages. |
totalPages* | number | - | Total number of pages. |
onPageChange* | (page: number) => void | - | Callback when the page changes. Receives the new 0-based page index. |
className | string | - | Additional CSS classes for the pagination container. |