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's | Don'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 definedWith extra props
The following is an example of pagination with extra props:
ReferenceError: React is not definedProps
| Property | Required | Type | Default | Description |
|---|---|---|---|---|
activePage | no | Number | The selected page number (starts at 1) | |
items | no | Number | 1 | The number of page links displayed |
next | no | Boolean | true | Option to display a 'next page' button |
onSelect | no | Function | Callback that is called when a page number or next/previous button is clicked. It receives an object containing newActivePage. | |
prev | no | Boolean | true | Option 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';