packages/eui/packages/components/eui-paginator/eui-paginator.component.ts
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:
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:
OnInit
OnDestroy
OnChanges
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 |
Properties |
|
Methods |
|
Inputs |
Outputs |
HostBindings |
Accessors |
e2eAttr |
Type : string
|
Default value : 'eui-paginator'
|
Sets the |
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 |
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. |
pageChange |
Type : EventEmitter
|
Event emitted when the page has changed. |
class |
Type : string
|
Sets the |
Public changePageSize | ||||||||
changePageSize(size: string)
|
||||||||
Changes the page size by the one provided as parameter.
Parameters :
Returns :
void
|
Public getPage | ||||||||||||
getPage(page: number, options?: literal type)
|
||||||||||||
Change the pagination to the given page number
Parameters :
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).
Parameters :
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.
Parameters :
Returns :
void
|
Public setLength | ||||||
setLength(length: number)
|
||||||
Gives new value to the length of the datasource.
Parameters :
Returns :
void
|
Public setPage | ||||||
setPage(page: EuiPaginationEvent)
|
||||||
Gives new values to page number, page size and number of pages.
Parameters :
Returns :
void
|
EuiAppShellService |
Default value : inject(EuiAppShellService)
|
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. |
cssClasses |
getcssClasses()
|
Sets the
Returns :
string
|
pageNumberNavigation |
getpageNumberNavigation()
|
Returns the page number navigation array.
Returns :
number[]
|