Pagination

Pagination separates large amounts of content into separate pages, which helps reduce cognitive load.

import { ... } from '@ag.ds-next/react/pagination';

Usage

Pagination components can be imported via the pagination entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/pagination';

Pagination Props
Prop	Type	Description
currentPage	number	The current page number.
generateHref	(pageNumber: number) => string	Function to generate a href for each list item.
totalPages	number	The total number of pages.
aria-label?	string	Describes the navigation element to assistive technologies.
itemRangeText?	string	Text to describe the range of items shown.
itemsPerPage?	number	The selected number of items per page.
itemsPerPageOptions?	number[]	The options for the items per page select.
onItemsPerPageChange?	((itemsPerPage: number) => void)	Callback when the items per page is changed.
windowLimit?	numberDefault: "3"	Controls how many list items are shown.

PaginationButtons Props
Prop	Type	Description
currentPage	number	The current page number.
onChange	(pageNumber: number) => void	Callback for when a list item is pressed.
totalPages	number	The total number of pages.
aria-label?	string	Describes the navigation element to assistive technologies.
itemRangeText?	string	Text to describe the range of items shown.
itemsPerPage?	number	The selected number of items per page.
itemsPerPageOptions?	number[]	The options for the items per page select.
onItemsPerPageChange?	((itemsPerPage: number) => void)	Callback when the items per page is changed.
windowLimit?	numberDefault: "3"	Controls how many list items are shown.

You can view the full source code for this package on Github.