Skip to content

Pagination

Use the pagination component to create a connected set of links that lead to related pages (for example, previous, next, or page numbers).

Basic example

The pagination component only requires two properties to render: pageCount, which is the total number of pages, and currentPage, which is the currently selected page number (which should be managed by the consuming application).

However, to handle state changes when the user clicks a page, you also need to pass onPageChange, which is a function that takes a click event and page number as an argument:

type PageChangeCallback = (evt: React.MouseEvent, page: number) => void

By default, clicking a link in the pagination component will cause the browser to navigate to the URL specified by the page. To cancel navigation and handle state management on your own, you should call preventDefault on the event, as in this example:

Current page: 1 / 15

To customize the URL generated for each link, you can pass a function to the hrefBuilder property. The function should take a page number as an argument and return a URL to use for the link.

type HrefBuilder = (page: number) => string
The last URL clicked was: (nothing clicked yet)

Customizing which pages are shown

Two props control how many links are displayed in the pagination container at any given time. marginPageCount controls how many pages are guaranteed to be displayed on the left and right of the component; surroundingPageCount controls how many pages will be displayed to the left and right of the current page.

The algorithm tries to minimize the amount the component shrinks and grows as the user changes pages; for this reason, if any of the pages in the margin (controlled via marginPageCount) intersect with pages in the center (controlled by surroundingPageCount), the center section will be shifted away from the margin. Consider the following examples, where pages one through six are shown when any of the first four pages are selected. Only when the fifth page is selected and there is a gap between the margin pages and the center pages does a break element appear.

Previous/next pagination

To hide all the page numbers and create a simple pagination container with just the Previous and Next buttons, set showPages to false.

Current page: 1 / 10

System props

Pagination components get COMMON system props. Read our System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
currentPageNumberRequired. The currently selected page.
hrefBuilderFunction#${page}A function to generate links based on page number.
marginPageCountNumber1How many pages to always show at the left and right of the component.
onPageChangeFunctionno-opCalled with event and page number when a page is clicked.
pageCountNumberRequired. The total number of pages.
showPagesBooleantrueWhether or not to show the individual page links.
surroundingPageCountNumber2How many pages to display on each side of the currently selected page.

Theming

The following snippet shows the properties in the theme that control the styling of the pagination component:

{
// ... rest of theme ...
pagination: {
borderRadius,
spaceBetween,
colors: {
normal: {
fg
},
disabled: {
fg,
border
},
hover: {
border
},
selected: {
fg,
bg,
border
},
active: {
border
},
nextPrevious: {
fg
}
}
}
}
Edit this page on GitHub
1 contributorBinaryMuse
Last edited by BinaryMuse on May 18, 2020