Pagination

Some EUI components have pagination built-in, like

EuiBasicTable, but for custom built paginated interfaces you can use EuiPagination manually.

Basic usage with many pages

EuiPagination accepts a total

pageCount and only shows up to 5 consecutive pages, with shortcuts to the first and/or last page. It also requires the parent component to maintain the current activePage and handle the onPageClick.

For accessibility, it is highly recommended to provide a descriptive aria-label for each pagination set.

For accessibility, it is highly recommended to provide a descriptive aria-label for each pagination set.

Few pages

The UI simplifies when we have fewer than the maximum number of visible pages.

Centered pagination

You can use EuiFlexGroup to center the pagination in a layout.

Compressed and responsive

Use the compressed prop to minimize the horizontal footprint. This will replace the numbered buttons with static numbers and rely on the first, last, next and previous icon buttons to navigate.

This is also the same display that will occur when responsive is not false. You can adjust the responsiveness by supplying an array of named breakpoints to responsive. The default is ['xs', 's'].

Indeterminate page count

If the total number of pages cannot be accurately determined, you can pass 0 as the pageCount. This will remove the button numbers and rely solely on the arrow icon buttons for navigation. Without a total page count, the last page button will pass back -1 for the activePage.

Table pagination

You can use EuiTablePagination to create a combination "Rows per page" and pagination set, commonly used with tables. If you pass 0 in as one of the itemsPerPageOptions, it will create a "Show all" option and hide the pagination.

Customizable pagination

Or you can use EuiFlexGroup and EuiContextMenu to set up your own custom pagination layout.

Props

EuiPagination

Extends AnchorHTMLAttributes, ButtonHTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop pageCount#	Description and type The total number of pages. Pass `0` if total count is unknown. Type: `number`	Default value `1`
Prop activePage#	Description and type The current page using a zero based index. So if you set the activePage to 1, it will activate the second page. Pass `-1` for forcing to last page. Type: `number`	Default value `0`
Prop onPageClick#	Description and type Click handler that passes back the internally calculated `activePage` index Type: `(pageIndex: number) => void`	Default value `() => {}`
Prop compressed#	Description and type If true, will only show next/prev arrows and simplified number set. Type: `boolean`	Default value
Prop responsive#	Description and type Automatically reduces to the `compressed` version on smaller screens. Remove completely with `false` or provide your own list of responsive breakpoints. Type: `false \| string[]`	Default value `['xs', 's']`

EuiPaginationButton