The pagination component allows navigating multiple pages of data using a horizontal list of links.
Example
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| onChange | func | - | () => {} | Function that is called when a pagination Button is clicked |
| testSection | string | - | '' | Hook for automated JavaScript tests |
| currentPage | number | yes | - | Sets the current page number |
| totalPages | number | yes | - | Sets the total number of pages |
Usage
Pagination is used when there is too much data to show on a single page. This can be due to either the displayed data being too long, or because it is unusably slow to load the data in its entirety.
How it Works
The pagination molecule is placed at the bottom of a given list of infomation, and allows users to select what page of data they want to see. It also shows the current page, and the total number of pages.
When to Use
Pagination should be used sparingly. When possible, attempt to show the full dataset without pagination. However, if you are dealing with hundreds of items, then consider paginating with 50 items per page.
With Filters
Pagination and filters in Program Management for datasets should work together. A filtered set of data can then be subsequently divided into pages, and in some cases the user is able to choose the number of items on a page.
Best Practices
Do
Use pagination to mitigate performance issues when loading a large data set
Show at least 50 items per page
Don't
Don't use pagination for short datasets