API 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

• props: NavItemProps & RefAttributes<HTMLLIElement>

The properties passed to the component.

ReactNode

A list item containing a navigation button.

• props: PageItemProps & RefAttributes<HTMLLIElement>

The properties passed to the component.

ReactNode

The rendered page item component.

• props: Partial<PaginationProps>

The properties for the Pagination component.

Element

The rendered pagination navigation element.

first(): void

To "go" to the first page

void

last(): void

To "go" to the last page

void

next(): void

To "go" to the next page

void

previous(): void

To "go" to the previous page

void

select(page): void

To "go" to a specific page

• page: number

The page number to select

void

• PaginationNumberContext

api: PaginationApi

all the api functions to interact with the widget

directives: PaginationDirectives

directives to be used on html elements in the template of the widget or in the slots

state: PaginationState

the state of the widget

• slotContext: PaginationContext

The context containing pagination state and directives.

null | Element

The rendered pagination items or null if there are no pages.

The function iterates over the pages in the pagination state and generates JSX elements for each page. If a page is represented by -1, it renders an ellipsis item. Otherwise, it renders a page item.

• Ellipsis items are rendered as disabled list items with an aria-hidden attribute for accessibility.
• Page items are rendered using the PageItem component, with properties for disabled state, active state, and directives.

The function returns a fragment containing the generated JSX elements, or null if there are no pages to render.

• slotContext: PaginationContext

The context containing the state and directives for pagination.

Element

The rendered pagination component.

The function constructs the pagination structure based on the provided state and directives. It conditionally includes navigation buttons for first, previous, next, and last pages based on the state. The pagination items are wrapped in an unordered list with appropriate classes. Additionally, an aria-live region is included for accessibility purposes.

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

api: PaginationApi

all the api functions to interact with the widget

directives: PaginationDirectives

directives to be used on html elements in the template of the widget or in the slots

displayedPage: number

Displayed page

state: PaginationState

the state of the widget

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) => `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

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

pageSize: number

The number of items per page.

min value is 1

10

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,

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,