Pagination

Navigate between muitple pages of records.

Overview

The Pagination component shows a series of related content split across multiple pages. It allows an end user to navigate between these pages of records.

The Pagination component.

Usage

The Pagination component is best used for large lists and tables.

Anatomy

Anatomy of the Pagination component.Page Action1Prev/Next2
  1. Page Action. This allows the user to quickly jump to a specific page of records.
  2. Prev/Next. These buttons move the page number by +/-1.

Sizing & Spacing

The Pagination component is of fixed size.

States (if applicable)

Page Action StatesPrev/Next Button StatesText Pagination component states.

Multiple sub-components of the Pagination component have many different states. The Page Action buttons have default, hover, and active states, whereas the Prev/Next buttons have default and hover.

Hierarchy & Placement

The Pagination component should be placed above and below a table or list and aligned to the right-hand side. Do not nest the Pagination component. If another level is required, direct the user to a new page.

The Pagination component allows an end user to navigate between pages of records.

Basic Usage

  1. ...
<Pagination
  onChange={(currentPage, totalPages) => {
    console.log(currentPage, totalPages)
  }}
  pageSize={10}
  total={1000}
/>

Pagination Properties

NameTypeRequiredDefaultDescription
onChangeFunction<any>Falsen/aA callback function invoked when the current page is changed.
pageSizeNumberFalse10The number of records to display per page.
totalNumberTruen/aThe total number of records to paginate.