Pagination
Pagination allows users to navigate through a large set of data, such as tables, filtered lists or search results across multiple pages. Pagination helps users to find the information they need without overwhelming them with too much content at once.
Import
Default Pagination
Pagination With Default Values
Custom Results Per Page
In Container
Hide Results Per Page
Props
Pagination Props
| Name | Description | Default |
|---|---|---|
| id* | ID used for accessible labeling string | - |
| totalResults* | The total number of results number | - |
| selectedPage | The selected page number | - |
| defaultSelectedPage | The default selected page (uncontrolled component) number | - |
| onChange | The event handler for changes to the page number. The first parameter is the page number.
The second parameter is an object with key ((pageNumber: number, { target, }: { target: "nextButton" | "previousButton" | "skipToFirstButton" | "skipToLastButton" | "pageSelect" | "resultsPerPageSelect"; }) => void) | - |
| onResultsPerPageChange | The event handler for changes to the results per page ((resultsPerPage: number) => void) | - |
| resultsPerPageValues | The possible values for results per page dropdown number[] | - |
| resultsPerPageSelectedValue | The currently selected value for results per page dropdown (controlled component) number | - |
| defaultResultsPerPageSelectedValue | The default selected value for results per page dropdown (uncontrolled component) number | - |
| showResultsPerPage | If the results per page is displayed boolean | - |
| showInContainer | If the component is displayed within a container boolean | - |
| resultsPerPageProps | Props to be spread onto the ResultsPerPage component Omit<ResultsPerPageProps, "id" | "resultsPerPageSelectedValue" | "resultsPerPageValues" | "onResultsPerPageChange" | "resultsPerPageLabel"> | - |
| skipToFirstButtonProps | Props to be spread onto the skip to first button PaginationButtonOtherProps | - |
| previousButtonProps | Props to be spread onto the previous button PaginationButtonOtherProps | - |
| nextButtonProps | Props to be spread onto the next button PaginationButtonOtherProps | - |
| skipToLastButtonProps | Props to be spread onto the skip to last button PaginationButtonOtherProps | - |
| selectProps | Props to be spreadd onto the Pagination Select PaginationSelectOtherProps | - |
| reactlytics | ReactlyticsProp | - |
| labelOverrides | Overrides for labels that have been defaulted in the component. PaginationLabelOverrides | - |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.