Pagination

• props?: PropsConfig<PaginationProps>

PaginationWidget

a PaginationWidget

next: string

The href for the 'Next' direction link

previous: string

The href for the 'Previous' navigation link

PaginationProps

the default Pagination config

first(event?): void

To "go" to the first page

• event?: MouseEvent

void

last(event?): void

To "go" to the last page

• event?: MouseEvent

void

next(event?): void

To "go" to the next page

• event?: MouseEvent

void

previous(event?): void

To "go" to the previous page

• event?: MouseEvent

void

select(page, event?): void

To "go" to a specific page

• page: number

The page number to select

• event?: MouseEvent

void

pageFirst: Directive

A directive to be applied on the first link

pageLast: Directive

A directive to be applied on the Last link

pageLink: Directive<object>

A directive to be applied to each page link This will handle the click, tabindex and aria attributes

page: number

pageNext: Directive

A directive to be applied on the next link

pagePrev: Directive

A directive to be applied on the previous link

displayedPage: number

Displayed page

activeLabel: string

The label for the "active" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'(current)'

ariaEllipsisLabel: string

The label for the "Ellipsis" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Ellipsis page element'

ariaFirstLabel: string

The label for the "First" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for first page'

ariaLabel: string

The label for the nav element.

for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Page navigation'

ariaLastLabel: string

The label for the "Last" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for last page'

ariaLiveLabel: (currentPage, pageCount) => string

Provide the label for the aria-live element This is used for accessibility purposes. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

• currentPage: number

The current page number

• pageCount: number

The total number of pages

string

(currentPage: number, pageCount: number) => `Current page is ${currentPage}`

ariaNextLabel: string

The label for the "Next" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for next page'

ariaPageLabel: (processPage, pageCount) => string

Provide the label for each "Page" page button. This is used for accessibility purposes. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

• processPage: number

The current page number

• pageCount: number

The total number of pages

string

(processPage: number, pageCount: number) => `Page ${processPage} of ${pageCount}`

ariaPreviousLabel: string

The label for the "Previous" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for previous page'

boundaryLinks: boolean

If true, the "First" and "Last" page links are shown.

false

className: string

CSS classes to be applied on the widget main container

''

collectionSize: number

The number of items in your paginated collection.

Note, that this is not the number of pages. Page numbers are calculated dynamically based on collectionSize and pageSize.

Ex. if you have 100 items in your collection and displaying 20 items per page, you'll end up with 5 pages.

Whatever the collectionSize the page number is of minimum 1.

0

directionLinks: boolean

If true, the "Next" and "Previous" page links are shown.

true

disabled: boolean

If true, pagination links will be disabled.

false

ellipsisLabel: SlotContent<PaginationContext>

The template to use for the ellipsis slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'…'

firstPageLabel: SlotContent<PaginationContext>

The template to use for the first slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'«'

lastPageLabel: SlotContent<PaginationContext>

The template to use for the last slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'»'

nextPageLabel: SlotContent<PaginationContext>

The template to use for the next slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'›'

numberLabel: SlotContent<PaginationNumberContext>

The template to use for the number slot override any configuration parameters provided for this for I18n, we suggest to use the global configuration

The current page number

({displayedPage}: PaginationNumberContext) => `${displayedPage}`

onPageChange: (page) => void

An event fired when the page is changed.

Event payload is the number of the newly selected page.

Page numbers start with 1.

• page: number

void

() => {}

page: number

The current page.

Page numbers start with 1.

1

pageLink: (pageNumber) => string

Factory function providing the href for a "Page" page anchor, based on the current page number

• pageNumber: number

The index to use in the link

string

(_page: number) => PAGE_LINK_DEFAULT

pageSize: number

The number of items per page.

min value is 1

10

pagesDisplay: SlotContent<PaginationContext>

The template to use for the pages slot To use to customize the pages view override any configuration parameters provided for this

pagesFactory: (page, pageCount) => number[]

pagesFactory returns a function computing the array of pages to be displayed as number (-1 are treated as ellipsis). Use Page slot to customize the pages view and not this

• page: number

The current page number

• pageCount: number

The total number of pages

number[]

(_page: number, pageCount: number) => {
        const pages: number[] = [];
        for (let i = 1; i <= pageCount; i++) {
            pages.push(i);
        }
        return pages;
    }

previousPageLabel: SlotContent<PaginationContext>

The template to use for the previous slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'‹'

size: null | "sm" | "lg"

The pagination display size.

Bootstrap currently supports small and large sizes.

null

structure: SlotContent<PaginationContext>

The template to use for the structure of the pagination component The default structure uses ellipsisLabel, firstPageLabel, previousPageLabel, nextPageLabel, lastPageLabel, pagesDisplay, numberLabel,

ellipsisLabel: PaginationContext

firstPageLabel: PaginationContext

lastPageLabel: PaginationContext

nextPageLabel: PaginationContext

numberLabel: PaginationNumberContext

pagesDisplay: PaginationContext

previousPageLabel: PaginationContext

structure: PaginationContext

activeLabel: string

The label for the "active" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'(current)'

ariaEllipsisLabel: string

The label for the "Ellipsis" page. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Ellipsis page element'

ariaFirstLabel: string

The label for the "First" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for first page'

ariaLabel: string

The label for the nav element.

for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Page navigation'

ariaLastLabel: string

The label for the "Last" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for last page'

ariaLiveLabelText: string

The aria-live text

ariaNextLabel: string

The label for the "Next" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for next page'

ariaPreviousLabel: string

The label for the "Previous" page button. for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'Action link for previous page'

boundaryLinks: boolean

If true, the "First" and "Last" page links are shown.

false

className: string

CSS classes to be applied on the widget main container

''

directionLinks: boolean

If true, the "Next" and "Previous" page links are shown.

true

directionsHrefs: DirectionsHrefs

The hrefs for the direction links

disabled: boolean

If true, pagination links will be disabled.

false

ellipsisLabel: SlotContent<PaginationContext>

The template to use for the ellipsis slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'…'

firstPageLabel: SlotContent<PaginationContext>

The template to use for the first slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'«'

lastPageLabel: SlotContent<PaginationContext>

The template to use for the last slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'»'

nextDisabled: boolean

true if the next link need to be disabled

nextPageLabel: SlotContent<PaginationContext>

The template to use for the next slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'›'

numberLabel: SlotContent<PaginationNumberContext>

The template to use for the number slot override any configuration parameters provided for this for I18n, we suggest to use the global configuration

The current page number

({displayedPage}: PaginationNumberContext) => `${displayedPage}`

page: number

The current page.

Page numbers start with 1.

1

pageCount: number

The number of pages.

pages: number[]

The current pages, the number in the Array is the number of the page.

pagesDisplay: SlotContent<PaginationContext>

The template to use for the pages slot To use to customize the pages view override any configuration parameters provided for this

pagesHrefs: string[]

The hrefs for each "Page" page link

pagesLabel: string[]

The label for each "Page" page link.

previousDisabled: boolean

true if the previous link need to be disabled

previousPageLabel: SlotContent<PaginationContext>

The template to use for the previous slot for I18n, we suggest to use the global configuration override any configuration parameters provided for this

'‹'

size: null | "sm" | "lg"

The pagination display size.

Bootstrap currently supports small and large sizes.

null

structure: SlotContent<PaginationContext>

The template to use for the structure of the pagination component The default structure uses ellipsisLabel, firstPageLabel, previousPageLabel, nextPageLabel, lastPageLabel, pagesDisplay, numberLabel,