Pagination

Pagination is a technique used to divide large amounts of table data into smaller, easier to manage blocks. Pagination improves usability of tables by reducing the amount of information presented to the user at one time. For longer pages, opt for pagination instead of infinite scrolling. Pagination ensures content is easily trackable and always visible, enhancing accessibility.

• Interactive Playground
• Anatomy
• Behavior
• States
• Specs
• Keyboard Interactions
• Related Content

The Interactive Playground allows you to experiment with various pagination styles and features. Once you get the results you want, copy the HTML or React code provided and paste it into your application.

<div
  class="neo-pagination__row"
  id="pagination-:R0:"
>
  <nav class="neo-pagination neo-pagination__condensed">
    <button
      type="button"
      disabled
      aria-label="previous"
      class="neo-btn-square neo-pagination__arrow-btn neo-icon-chevron-left"
    >
    </button>
    <div class="pagination__go-to-page">
      <div
        data-testid="NeoInputWrapper-root"
        class="neo-form-control"
      >
        <div
          data-testid="NeoInputWrapper-group-root"
          class="neo-input-group"
        >
          <div class="neo-input-editable__wrapper">
            <input
              class="neo-input"
              id=":Rd:"
              tabindex="0"
              type="number"
              aria-label="Go to page"
              pattern="[0-9]+"
              min="1"
              max="5"
              value="1"
            >
          </div>
        </div>
      </div>
      <span>
        / 5
      </span>
      <span>
        pages
      </span>
    </div>
    <button
      type="button"
      aria-label="next"
      class="neo-btn-square neo-pagination__arrow-btn neo-icon-chevron-right"
    >
    </button>
  </nav>
</div>

<Pagination
  alwaysShowPagination
  currentPageIndex={1}
  itemCount={100}
  itemDisplayType="count"
  itemsPerPage={20}
  itemsPerPageOptions={[
    20,
    50,
    100
  ]}
  onItemsPerPageChange={function noRefCheck() {}}
  onPageChange={function noRefCheck() {}}
/>

Shown below are the parts that make up a pagination component.

• Page Count:

  Shows the range of items (rows) displayed compared to the total number of items in the table.

• Previous Page:

  Navigate to the previous page of data. This option is disabled if you are already at page 1.

• First Page:

  Takes the user to the first page of the table. It is always visible in the pagination bar.

• Hidden Pages:

  Ellipses indicate that additional pages exist in the sequence but are not displayed.

• Current Page:

  Is highlighted with a blue background.

• Last Page:

  Takes the user to the last page of the table. It is always visible in the pagination bar.

• Next Page:

  Navigate to the next page of data. This option is disabled if you are already on the last page.

• Jump to Page:

  Enter the page number in this space to jump directly to that page of the table.

• Display Count:

  Displays the number of rows to display. This is user configurable but defaults to increments of 20, 50, or 100.

The page numbers can have one of 3 states.

Default

Hover

Active

• Default:

  The page is unselected, allowing users to select and navigate to that specific page.

• Hover:

  The page is highlighted and can be selected.

• Active:

  The current page shown on the screen.

The implementation of pagination varies depending upon the size of the table and the size of the page showing the data.

Placement

The pagination bar is always visible and positioned at the bottom of the viewable page.

On pages with fewer rows, the pagination stays visible at the bottom of the page, not directly beneath the last row.

DO: The pagination remains fixed at the bottom of the page, ensuring it is always visible.

DON'T: Do not place the pagination above the table.

Items Per Page

The number of rows to show in a table depends on how much data is being presented, the screen size and resolution of the device being used, and user preferences.

The user can choose to display 20, 50, or 100 rows of data per page. The default value is 20 rows per page.

Variations

Pagination comes in two forms: full and condensed. Use the full version when there is ample space to display all details. Select the condensed version when space is limited. If there are no additional pages, a pagination bar is unnecessary.

Full version

Condensed version

Use the diagram below to build a pagination bar.

This section illustrates keyboard interactions for the Pagination component.