Skip to main content

Pivotal UI

v19.2.2
Components / Pagination

Pagination

Pagination is a method for allowing a user to view a subset of sorted data into a more comprehensible format. It allows a user to progress to the next or previous view, or choose a page number you want manually.

The Pagination component provides a styled list of links used to navigate through a paginated list. By default, the component includes a 'previous page' button, a 'next page' button, and one link.

The pagination component will display a maximum of five pages. When more than five are provided, the component will shrink with ellipses to show the first, last, active, and pages adjacent to the active page.

Do'sDon'ts
Use when it is unsuitable to display all the data on a single page/screen.Do not use when you don’t want the user to pause for navigating to the next page. Instead consider simply having a scrolling vertical view.
Use when the dataset is in some way ordered.
Without extra props
ReferenceError: React is not defined
With extra props

The following is an example of pagination with extra props:

ReferenceError: React is not defined

Props

PropertyRequiredTypeDefaultDescription
activePagenoNumberThe selected page number (starts at 1)
itemsnoNumber1The number of page links displayed
nextnoBooleantrueOption to display a 'next page' button
onSelectnoFunctionCallback that is called when a page number or next/previous button is clicked. It receives an object containing newActivePage.
prevnoBooleantrueOption to display a 'previous page' button

Imports

Import React components (including CSS):

import {Pagination} from 'pivotal-ui/react/pagination';

Import CSS only:

import 'pivotal-ui/css/pagination';