NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

Pagination

import Pagination from '@concur/nui-widgets/lib/Pagination/Pagination';

The Pagination component provides the ability to show and navigate to different “pages” of content.

Examples

Sizes

There are three supported sizes of pagination. Use the size property to set the size. Options are 'lg', 'md' and ‘sm'. The default is 'md'.

<Pagination
    items={10}
    size='lg' />

<Pagination
    items={10}
    size='md' />

<Pagination
    items={10}
    size='sm' />

Maximum Buttons

The maxButtons prop is used to limit how many items are displayed at once. The below example shows a 10 item Pagination component with and without the maxButtons prop. Additionally, consumers can add prev, next, first or last navigation items to convey the ability to scroll.

<Pagination
    items={10}
    maxButtons={5} />

<Pagination
    items={10} />

Scrolling

When there are more items than can be shown at once, the component will scroll different ranges into view. Additional navigation links can also be provided.

<Pagination
    boundaryLinks
    ellipsis
    first
    items={20}
    last
    maxButtons={5}
    next
    previous />

Usage

Properties

Property Type Default Description
activePage Number 1 Sets the active (current) page.
boundaryLinks Boolean false When true, the first and the last page buttons will be displayed when displaying a middle ellipsis.
className String   Custom classes to be added to the wrapping <ul>.
ellipsis Boolean or Node '...' When true, the default node value ('...') will be displayed. Otherwise, the provided node will be displayed (when specified).
first Boolean or Node '«' When true, the default “jump to first page” symbol (“«”) will be displayed. Otherwise, the provided symbol will be displayed (when specified).
items Number 1 The total number of pages in the pagination component.
last Boolean or Node '»' When true, the default “jump to last page” symbol (“»”) value will be displayed. Otherwise, the provided symbol will be displayed (when specified).
localizedText Object   Contains all the localized text strings for the component. See Localized Text for details.
maxButtons Number   Maximum number of page buttons to display. When 0 there is no max, all page buttons are displayed.
next Boolean or Node '›' When true, the default “next page” symbol (“›”) will be displayed. Otherwise, provided symbol will be displayed (when specified).
prev Boolean or Node '‹' When true, the default “previous page” symbol (“‹”) will be displayed. Otherwise, the provided symbol will be displayed (when specified).
size String 'md' Size of the component. Options are 'lg', 'md' and ‘sm'.

Callbacks

Property Parameters Description
onSelect eventKey, event Called when a page button is selected.

Localized Text

Property Type Default Description
activeLabel String '(current)' Localized text to label the current activePage
ellipsisAriaLabel String 'More' Localized text for aria-label of the ellipsis item.
firstAriaLabel String 'First' Localized text for aria-label of the first item.
lastAriaLabel String 'Last' Localized text for aria-label of the last item.
nextAriaLabel String 'Next' Localized text for aria-label of the next item.
prevAriaLabel String 'Previous' Localized text for aria-label of the prev item.