createPagination(
props?):PaginationWidget
Create a PaginationWidget with given config props
• props?: PropsConfig<PaginationProps>
a PaginationWidget
Interface representing the hrefs for pagination navigation links.
next:
string
The href for the 'Next' direction link
previous:
string
The href for the 'Previous' navigation link
getPaginationDefaultConfig():
PaginationProps
Retrieve a shallow copy of the default Pagination config
the default Pagination config
NavButton(
props):ReactNode
NavButton is a React functional component that renders a navigation button
within a list item (<li>) element. It uses React.forwardRef to forward the ref
to the <li> element.
• props: NavItemProps & RefAttributes<HTMLLIElement>
The properties passed to the component.
ReactNode
A list item containing a navigation button.
PageItem(
props):ReactNode
PageItem is a React component that renders a list item (<li>) element
with the appropriate classes for pagination. It uses React.forwardRef to
forward the ref to the <li> element.
• props: PageItemProps & RefAttributes<HTMLLIElement>
The properties passed to the component.
ReactNode
The rendered page item component.
Pagination(
props):Element
Pagination component that renders a navigation element for paginated content. It uses the useWidgetWithConfig hook to create a pagination widget with the provided props.
• props: Partial<PaginationProps>
The properties for the Pagination component.
Element
The rendered pagination navigation element.
Interface representing pagination API for navigating through pages.
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
A type for the slot context of the pagination widget
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
PaginationDefaultSlotPages(
slotContext):null|Element
Renders the default slot pages for the pagination component.
• 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
PageItemcomponent, 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.
PaginationDefaultSlotStructure(
slotContext):Element
Renders the default slot structure for the pagination component.
• 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.
Interface representing the directives for pagination components.
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
A type for the slot context of the pagination widget when the slot is the number label
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
Represents the properties for the Pagination component.
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_DEFAULTpagesDisplay:
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,
Represents the state of a pagination component.
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,
PaginationWidget:
Widget<PaginationProps,PaginationState,PaginationApi,PaginationDirectives>
Represents a pagination widget component.
This type defines a widget that handles pagination functionality, including properties, state, api and directives specific to pagination.