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.

Accessibility recommendation

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 HTMLAttributes


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

Extends AnchorHTMLAttributes, ButtonHTMLAttributes


Prop	Description and type	Default value
Prop pageIndex#	Description and type Type: `number`	Default value Required
Prop color#	Description and type Any of the named color palette options. Type: `"primary" \| "text" \| "accent" \| "accentSecondary" \| "success" \| "warning" \| "danger"`	Default value
Prop size#	Description and type Type: `"xs" \| "s" \| "m"`	Default value
Prop flush#	Description and type Ensure the text of the button sits flush to the left, right, or both sides of its container Type: `"left" \| "right" \| "both"`	Default value
Prop isDisabled#	Description and type `disabled` is also allowed Type: `boolean`	Default value
Prop isLoading#	Description and type Force disables the button and changes the icon to a loading spinner Type: `boolean`	Default value
Prop isSelected#	Description and type Applies the boolean state as the `aria-pressed` property to create a toggle button. Only use when the readable text does not change between states. Type: `boolean`	Default value
Prop href#	Description and type Type: `string`	Default value
Prop target#	Description and type Type: `string`	Default value
Prop rel#	Description and type Type: `string`	Default value
Prop type#	Description and type Type: `"button" \| "reset" \| "submit"`	Default value
Prop buttonRef#	Description and type Type: `Ref<HTMLAnchorElement \| HTMLButtonElement>`	Default value
Prop contentProps#	Description and type Object of props passed to the `<span>` wrapping the button's content Type: `CommonProps & EuiButtonDisplayContentType`	Default value
Prop iconType#	Description and type Any `type` accepted by EuiIcon Type: `IconType`	Default value
Prop iconSide#	Description and type Can only be one side `left` or `right` Type: `ButtonContentIconSide`	Default value
Prop textProps#	Description and type Object of props passed to the `<span>` wrapping the content's text/children only (not icon) This span wrapper can be removed by passing `textProps={false}`. Type: `false \| (HTMLAttributes<HTMLSpanElement> & CommonProps & { ref?: Ref<HTMLSpanElement>; 'data-text'?: string; })`	Default value
Prop iconSize#	Description and type Type: `"s" \| "m"`	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 onClick#	Description and type Type: `MouseEventHandler<HTMLAnchorElement> \| MouseEventHandler<HTMLButtonElement> \| (MouseEventHandler<HTMLButtonElement> & MouseEventHandler<...>) \| (MouseEventHandler<...> & MouseEventHandler<...>)`	Default value
Prop isActive#	Description and type Type: `boolean`	Default value
Prop totalPages#	Description and type Type: `number`	Default value

EuiTablePagination


Prop	Description and type	Default value
Prop showPerPageOptions#	Description and type Option to completely hide the "Rows per page" selector. Type: `boolean`	Default value `true`
Prop itemsPerPage#	Description and type Current selection for "Rows per page". Pass `0` to display the selected "Show all" option and hide the pagination. Type: `number`	Default value `10`
Prop itemsPerPageOptions#	Description and type Custom array of options for "Rows per page". Pass `0` as one of the options to create a "Show all" option. Type: `number[]`	Default value `[10, 25, 50]`
Prop onChangeItemsPerPage#	Description and type Click handler that passes back selected `pageSize` number Type: `ItemsPerPageChangeHandler`	Default value
Prop onChangePage#	Description and type Type: `(pageIndex: number) => void`	Default value
Prop aria-controls#	Description and type Requires the `id` of the table being controlled Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	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
Prop compressed#	Description and type If true, will only show next/prev arrows and simplified number set. Type: `boolean`	Default value
Prop pageCount#	Description and type The total number of pages. Pass `0` if total count is unknown. Type: `number`	Default value
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

Basic usage with many pages.css-1pgbpvp{-webkit-margin-start:8px;margin-inline-start:8px;opacity:0;}.css-1pgbpvp:focus,.heading:hover .css-1pgbpvp{opacity:1;}