### File

`packages/components/eui-paginator/eui-paginator.component.ts`

### Description

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

Example :

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

### With page number navigation

Example :

    <eui-paginator
      [length]="100"
      [page]="currentPage"
      [hasPageNumberNavigation]="true"
      [nbPageNumberNavigation]="5">
    </eui-paginator>

### Basic mode (minimal UI)

Example :

    <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

### Implements

`OnInit` `OnDestroy` `OnChanges`

### Metadata

providers | `DecimalPipe`
selector | `eui-paginator`
imports | `DecimalPipe` `AsyncPipe` `TranslateModule` `FormsModule` `EUI_ICON` `EUI_BUTTON` `EUI_SELECT`
templateUrl | `./eui-paginator.component.html`
styleUrl | `./eui-paginator.scss`

### Index

###### Properties
Public length$ Public nbPage Public page$ Public range Public rangeLength
###### Methods
Public changePageSize Public getCurrentPagination Public getPage Public getRange Public goFirstPage Public goLastPage Public goNextPage Public goPreviousPage Public goToPage Public setLength Public setPage
###### Inputs
e2eAttr hasDynamicLength hasPageNumberNavigation hasPageSize isBasicMode isHidden length nbPageNumberNavigation page pageSize pageSizeOptions
###### Outputs
pageChange
###### HostBindings
class
###### Accessors
cssClasses pageNumberNavigation

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-paginator'`
Sets the `data-e2e` attribute for the host element.

hasDynamicLength
Type : `boolean`
Default value : `false`
Whether the datasource length is dynamic or not.

hasPageNumberNavigation
Type : `boolean`
Default value : `false`
Whether the page number is displayed or not.

hasPageSize
Type : `boolean`
Default value : `true`
Whether the page size is displayed or not. Default: true.

isBasicMode
Type : `boolean`
Default value : `false`
Whether the paginator is in basic mode or not. In this mode, the paginator will only display the previous and next buttons.

isHidden
Type : `boolean`
Default value : `false`
Whether the paginator is hidden or not.

length
Type : `number`
Default value : `0`
Sets the total number of items.

nbPageNumberNavigation
Type : `number`
Default value : `5`
In combination with `hasPageNumberNavigation`, sets the number of page numbers displayed in the paginator.

page
Type : `number`
Default value : `0`
Sets the current page number.

pageSize
Type : `number`
Default value : `10`
Sets the number of items displayed in the page.

pageSizeOptions
Type : `number[]`
Default value : `[5, 10, 25, 50, 100]`
Sets the page size options that will be displayed in the dropdown.

### Outputs

pageChange
Type : `EventEmitter`
Event emitted when the page has changed.

### HostBindings

class
Type : `string`
Sets the `class` attribute for the host element.

### Methods

Public changePageSize
`changePageSize(size: string)`
Changes the page size by the one provided as parameter. Parameters :
Name | Type | Optional | Description
size | `string` | No | New page size.
Returns : `void`

Public getCurrentPagination
`getCurrentPagination()`
Returns the current pagination state. Returns : `EuiPaginationEvent` An object with the properties of the paginator state.

Public getPage
`getPage(page: number, options?: literal type)`
Change the pagination to the given page number `emitEvent`: When true or not provided, event is emitted. When false, no events are emitted Parameters :
Name | Type | Optional | Description
page | `number` | No | 0-based page number to be displayed
options | `literal type` | Yes | `emitEvent`: When true or not provided, event is emitted. When false, no events are emitted
Returns : `void`

Public getRange
`getRange()`
Calculates the range of items displayed in the paginator. Returns : `void`

Public goFirstPage
`goFirstPage(options?: literal type)`
Sets the page number to 0 (first page). `emitEvent`: When true or not provided, event is emitted. When false, no events are emitted Parameters :
Name | Type | Optional | Description
options | `literal type` | Yes | `emitEvent`: When true or not provided, event is emitted. When false, no events are emitted
Returns : `void`

Public goLastPage
`goLastPage()`
Sets the page number to last page. Returns : `void`

Public goNextPage
`goNextPage()`
Sets the page number to current + 1. Returns : `void`

Public goPreviousPage
`goPreviousPage()`
Sets the page number to current - 1. Returns : `void`

Public goToPage
`goToPage(page: number, options?: literal type)`
Sets the page number to the one provided as parameter. `emitEvent`: When true or not provided, event is emitted. When false, no events are emitted Parameters :
Name | Type | Optional | Description
page | `number` | No | New page
options | `literal type` | Yes | `emitEvent`: When true or not provided, event is emitted. When false, no events are emitted
Returns : `void`

Public setLength
`setLength(length: number)`
Gives new value to the length of the datasource. Parameters :
Name | Type | Optional
length | `number` | No
Returns : `void`

Public setPage
`setPage(page: EuiPaginationEvent)`
Gives new values to page number, page size and number of pages. Parameters :
Name | Type | Optional
page | `EuiPaginationEvent` | No
Returns : `void`

### Properties

Public length$
Type : `BehaviorSubject<number>`
Default value : `new BehaviorSubject(0)`
Observable that emits the length of the datasource

Public nbPage
Type : `number`
The number of pages.

Public page$
Type : `BehaviorSubject<EuiPaginationEvent>`
Default value : `new BehaviorSubject(null)`
Observable that emits the current page number, the page size and the number of pages.

Public range
Type : `string`
The range of items displayed in the paginator.

Public rangeLength
Type : `string`
The range length of items displayed in the paginator.

### Accessors

cssClasses
get `cssClasses()`
Sets the `class` attribute for the host element. Returns : `string`

pageNumberNavigation
get `pageNumberNavigation()`
Returns the page number navigation array. Returns : `number[]`

# results matching ""

# No results matching ""