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
- 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
- Filters: Filters are displayed on left side.
- Item Count: An updated item count is displayed on the right side.
- Single Select: Select single items by checking the box on the left of each item row.
- Multi-Select: Select all items within a single page by checking the box in the column header.
- Select All: Select all items within the table by clicking Select All option under the kebab menu.
- 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.
PatternFly Core Example Not Available
There is no PatternFly-Core code available for this pattern at this time. Links to the JS framework implementations can be seen above.
Visit the Contributing to PatternFly documentation to learn how to contribute the code.