Pagination

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/pagination`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/pagination, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`analyticsContext`
Description	Additional information to be included in the `context` of analytics events.
Type	`{ [x: string]: any; }`

`components`
Description	Replace the built-in page, previous, next and/ or ellipsis component
Type	`{ Page?: React.ElementType<any, keyof React.JSX.IntrinsicElements>; Previous?: React.ElementType<any, keyof React.JSX.IntrinsicElements>; Next?: React.ElementType<...>; }`

`defaultSelectedIndex`
Description	Index of the page to be selected by default.
Type	`number`

`getPageLabel`
Description	Helper function to get text displayed on the page button. This is helpful in scenarios when page the page passed in is an object.
Type	`(page: T, pageIndex: number) => string \| number`

`isDisabled`
Description	Sets whether the Paginator is disabled
Type	`boolean`

`label`
Description	The aria-label for the pagination nav wrapper. The default value is "pagination".
Type	`string`

`max`
Description	Maximum number of pages to be displayed in the pagination.
Type	`number`

`nextLabel`
Description	The aria-label for the next button. The default value is "next".
Type	`string`

`onChange`
Description	The onChange handler which is called when the page is changed.
Type	`(event: React.SyntheticEvent<Element, Event>, page: T, analyticsEvent?: UIAnalyticsEvent) => void`

`pageLabel`
Description	The aria-label for the individual page numbers. The default value is "page". The page number is automatically appended to the pageLabel. For Example, pageLabel="página" will render aria-label="página 1" as the label for page 1.
Type	`string`

`pages`
Required
Description	Array of the pages to display.
Type	`T[]`

`previousLabel`
Description	The aria-label for the previous button. The default value is "previous".
Type	`string`

`ref`
Description	No description.
Type	`((instance: HTMLDivElement) => void) \| React.RefObject<HTMLDivElement>`

`renderEllipsis`
Description	The react Node returned from the function is rendered instead of the default ellipsis node.
Type	`(arg: { key: string; from: number; to: number; }) => React.ReactElement<any, string \| React.JSXElementConstructor<any>>`

`selectedIndex`
Description	Index of the selected page. This will make this pagination controlled.
Type	`number`

`style`
Description	Style to spread on the container element.
Type	`React.CSSProperties`

`testId`
Description	A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests. Will set data-testid on these elements when defined: Pagination nav wrapper - {testId} Page - {testId}--page-{page index} Current page - {testId}--current-page-{page index} Left navigator - {testId}--left-navigator Right navigator - {testId}--right-navigator
Type	`string`

Was this page helpful?

We use this feedback to improve our documentation.