Pagination

• config?: PropsConfig<PaginationProps>

an optional pagination config

PaginationWidget

a PaginationWidget

next: string

The href for the 'Next' direction link

previous: string

The href for the 'Previous' navigation link

object

a copy of the default config

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

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

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

size: null | "sm" | "lg"

The pagination display size.

Bootstrap currently supports small and large sizes.

null

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

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

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

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

size: null | "sm" | "lg"

The pagination display size.

Bootstrap currently supports small and large sizes.

null

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

nextDisabled: boolean

true if the next link need to be disabled

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.

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

size: null | "sm" | "lg"

The pagination display size.

Bootstrap currently supports small and large sizes.

null