Pagination
This pattern defines how pagination behaves within content views. When present, pagination is consistent across all three content views.
- Pagination is optional.
- Pagination is not necessary when there is a small amount of content.
- Pagination is not necessary when an application uses “lazy load” to load content as a user scrolls.
- Pagination is not displayed when there is no data to display.
- Pagination can be “sticky” and remain fixed to the bottom of a user’s browser.
- A sticky footer is not recommended for views with content below pagination.
Pagination - Table View
Pagination - List View
Pagination - Card View
Pagination
- Items per Page: This control displays the number of items on a page.
- It includes an option to modify the number of items displayed. It is recommended that the default number be less than 25 in order to minimize scrolling.
- Items Displayed: This count displays the items currently in view.
- Navigate Pages: These controls allow the user to navigate to the previous or first page.
- These controls are disabled when the user is on the first page.
- Current Page: This control displays the current page and allows users to navigate to a specific page.
- Total Pages: This count displays the total number of pages.
- Navigate Pages: These controls allow the user to navigate to the next or last page.
- These controls are disabled when the user is on the last page.
Pagination - Selection Pattern
Default View
Filters Applied
- Filters: Filters are displayed on left side.
- Item Count: An updated item count is displayed on the right side.
Single Select
- Single Select: Select single items by checking the box on the left of each item row.
Multi-Select
- Multi-Select: Select all items within a single page by checking the box in the column header.
Select All
- Select All: Select all items within the table by clicking Select All option under the kebab menu.
Clear Selected
- Clear Selected: Clear any selected items by clicking Clear Selected option under the kebab menu.
Selection While Paging
- Selection While Paging: Items remain selected even as a user pages.
Pagination - Content Below
- Content Below: A sticky footer is not recommended for views with content below pagination.
- Items per Page: It is recommended that the default number of items displayed be less than 25 in order to minimize scrolling.
- Allowing users to change the default number should be optional.
Pagination - No Data
- No Data: Pagination is not displayed when there is no data to page.