File

packages/eui/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.

Implements

OnInit OnDestroy OnChanges

Metadata

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

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 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

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.

Accessors

cssClasses
getcssClasses()

Sets the class attribute for the host element.

Returns : string
pageNumberNavigation
getpageNumberNavigation()

Returns the page number navigation array.

Returns : number[]

results matching ""

    No results matching ""