Pager
The Pager component allows for pagination controls to navigate large datasets by limiting the number of items displayed at once.
Usage
Default
<Pager
totalItems={20}
itemsPerPage={2}
currentPage={1}
onPageChange={(pageNumber) => console.log("Page changed:", pageNumber)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| totalItems | number | - | Total number of items in the full data set. |
| itemsPerPage | number | - | Number of items to display per page. |
| currentPage | number | - | Current active page number (1-based). |
| onPageChange | (pageNumber: number) => void | - | Callback fired with new page number when user changes page. |
| serverControlled | boolean | false | If true, disables client-side page list and only renders prev/next/current. Use for server-side paging. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Theme color variant for Pager buttons. |
| state | "" | "success" | "error" | "warning" | - | Optional state coloring for Pager controls. |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Size of the Pager buttons and controls. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius for Pager buttons. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Shadow for Pager buttons. |
| className | string | - | Additional custom class names for the Pager container. |
| data-testid | string | "pager" | Test ID for querying the component in tests. |