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 Overview

Pagination - List View

Pagination Overview

Pagination - Card View

Pagination Overview

Pagination

Pagination Callouts

  1. 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.
  2. Items Displayed: This count displays the items currently in view.
  3. 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.
  4. Current Page: This control displays the current page and allows users to navigate to a specific page.
  5. Total Pages: This count displays the total number of pages.
  6. 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

Pagination Select 1

Filters Applied

Pagination Select 2

  1. Filters: Filters are displayed on left side.
  2. Item Count: An updated item count is displayed on the right side.

Single Select

Pagination Select 3

  1. Single Select: Select single items by checking the box on the left of each item row.

Multi-Select

Pagination Select 4

  1. Multi-Select: Select all items within a single page by checking the box in the column header.

Select All

Pagination Select 5

  1. Select All: Select all items within the table by clicking Select All option under the kebab menu.

Clear Selected

Pagination Select 6

  1. Clear Selected: Clear any selected items by clicking Clear Selected option under the kebab menu.

Selection While Paging

Pagination Select 7

  1. Selection While Paging: Items remain selected even as a user pages.

Pagination - Content Below

Pagination Content Below

  1. Content Below: A sticky footer is not recommended for views with content below pagination.
  2. 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

Pagination Select 7

  • No Data: Pagination is not displayed when there is no data to page.
Code icon

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.