Pagination
Some EUI components have pagination built-in, like EuiBasicTable, but for custom built paginated interfaces you can use EuiPagination manually.
ExamplesGuidelines
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.
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.