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.