# EuiPaginatorComponent

**Type:** component



The eui-paginator component is in charge of the pagination by splitting up content or data into several pages and adding visual controls for better user experience like:
- identifying the current page: clearly identify which page the user is on by displaying the current page number.
- providing context into how many pages there are in total: can help provide clarity around the data displayed.
- providing various options for navigating: previous and next chevrons or links are the most useful way for the user to move forward or backward through pages of data.
- items per page: allows selecting the amount of data displayed per page.

 Best practices & Usage
Generally, pagination is recommended to be used if there are more than 25 items displayed in one view. The default number of displayed items may vary depending on the context.

The main benefits of using pagination:
- delivers structure and feedback over the displayed data
- supports embedded navigation (and in particular back and forward, first and last)
- pagination is accessible (see A11Y)
- pagination typically means smaller, shorter pages and as a result reduced load times
- compared to infinite scroll display, it helps to focus the user's mind and not continue to offer more and more choices.

### Basic usage
```html
<eui-paginator
  [length]="totalItems"
  [pageSize]="10"
  (pageChange)="onPageChange($event)">
</eui-paginator>
```

### With page number navigation
```html
<eui-paginator
  [length]="100"
  [page]="currentPage"
  [hasPageNumberNavigation]="true"
  [nbPageNumberNavigation]="5">
</eui-paginator>
```

### Basic mode (minimal UI)
```html
<eui-paginator [length]="50" [isBasicMode]="true"></eui-paginator>
```

### Accessibility
- Navigation buttons have descriptive labels for screen readers
- Current page and total pages announced to assistive technologies
- Keyboard navigable with standard tab and enter interactions
- Page size selector is a standard accessible dropdown

### Notes
- Use `hasDynamicLength` when total items count changes during pagination
- Page numbers are zero-indexed internally but displayed as 1-indexed
- Hide with `isHidden` when only one page exists
- Customize page size options via `pageSizeOptions` array


**Selector:** `eui-paginator`

## Inputs
- **e2eAttr**: `string` - Sets the `data-e2e` attribute for the host element.
- **hasDynamicLength**: `boolean` - Whether the datasource length is dynamic or not.
- **hasPageNumberNavigation**: `boolean` - Whether the page number is displayed or not.
- **hasPageNumberNavigationCompact**: `boolean` - Whether the page number is displayed or not.
- **hasPageSize**: `boolean` - Whether the page size is displayed or not. Default: true.
- **isBasicMode**: `boolean` - Whether the paginator is in basic mode or not. In this mode, the paginator will only display the previous and next buttons.
- **isHidden**: `boolean` - Whether the paginator is hidden or not.
- **length**: `number` - Sets the total number of items.
- **nbPageNumberNavigation**: `number` - In combination with `hasPageNumberNavigation`, sets the number of page numbers displayed in the paginator.
- **page**: `number` - Sets the current page number.
- **pageSize**: `number` - Sets the number of items displayed in the page.
- **pageSizeOptions**: `number[]` - Sets the page size options that will be displayed in the dropdown.

## Outputs
- **pageChange**: `EventEmitter` - Event emitted when the page has changed.