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
| Type | Description | |
|---|---|---|
| aria-describedby | string | Optional description id for the pagination navigation region. |
| aria-label | string | Accessible label for the pagination navigation region. |
| aria-labelledby | string | Optional labelledby id for the pagination navigation region. |
| className | string | Optional extra class name(s) for custom styling. |
| currentPage | number | The currently active page (1-indexed). |
| data-testid | string | Optional test ID for testing frameworks. |
| getLiveRegionMessage | ((currentPage: number, totalPages: number) => string) | Function used to generate the live region status message. |
| getPageAriaLabel | ((page: number, isActive: boolean) => string) | Function used to generate an accessible label for each page button. |
| itemsPerPage | number | Number of items to display per page. |
| liveRegionAriaLive | "off" | "polite" | "assertive" | ARIA live politeness setting for the status message. |
| next-button-aria-label | string | Accessible label for the next page button. |
| onPageChange | (page: number) => void | Callback function invoked when a page change occurs. |
| page-list-aria-label | string | Accessible label for the page list. |
| previous-button-aria-label | string | Accessible label for the previous page button. |
| rounding | RoundingType | Rounding of the controls. One of: "none" | "small" | "medium" | "large" | "full" |
| serverControlled | boolean | Enables server side control of the paging. |
| shadow | ShadowType | Shadow of the controls. One of: "none" | "light" | "medium" | "strong" | "intense" |
| size | SizeType | Optional size modifier for pagination buttons. One of: "xs" | "small" | "medium" | "large" | "xl" |
| state | StateType | Optional state of the component for feedback styling. One of: "success" | "error" | "warning" | "disabled" | "" |
| theme | ThemeType | Optional theme to apply for pagination. One of: "primary" | "secondary" | "tertiary" | "quaternary" | "clear" |
| totalItems | number | Total number of items to paginate through. |