Pagination

View in Lexicon

Pagination provides horizontal navigation between chunks(pages) of a dataset.

install	yarn add @clayui/pagination
version
use	import Pagination, {ClayPaginationWithBasicItems} from '@clayui/pagination';

You can use ClayPagination.Ellipsis to display a dropdown with the specified page numbers as the dropdown’s options.

ClayPagination.Item renders a basic Pagination item with content you provide.

Combining these you can reach the following result:

import {Provider} from '@clayui/core';
import Pagination from '@clayui/pagination';
import React from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<Pagination>
					<Pagination.Item>{1}</Pagination.Item>
					<Pagination.Ellipsis
						aria-label="More"
						title="More"
						items={[2, 3, 4, 5]}
					/>
					<Pagination.Item>{'End'}</Pagination.Item>
				</Pagination>
			</div>
		</Provider>
	);
}

Numbered Pagination

If you want to have a simple Pagination with integers as Pagination items you can use a simpler variant, PaginationWithBasicItems as you can see below:

import {Provider} from '@clayui/core';
import {ClayPaginationWithBasicItems} from '@clayui/pagination';
import React, {useState} from 'react';

import '@clayui/css/lib/css/atlas.css';

export default function App() {
	const [active, setActive] = useState(8);

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<ClayPaginationWithBasicItems
					active={active}
					ellipsisBuffer={2}
					ellipsisProps={{'aria-label': 'More', title: 'More'}}
					onActiveChange={setActive}
					totalPages={25}
				/>
			</div>
		</Provider>
	);
}

Accessibility

ClayPaginationWithBasicItems generates aria-label’s for the previous, next, page, and ellipsis links. Custom labels can be passed to the previous, next, and page links through the ariaLabels attribute. It is useful for providing translated labels for screen readers or custom text more relevant to your app. The component will replace the placeholder {0} with the page number.

<ClayPaginationWithBasicItems
	ariaLabels={{
		link: 'Change the page to {0}',
		next: 'Change the page to {0}',
		previous: 'Change the page to {0}',
	}}
	activePage={8}
	ellipsisBuffer={2}
	totalPages={25}
/>

The aria-label attribute on ClayPaginationWithBasicItems sets the aria-label on the nav element. It defaults to “Pagination”.

<ClayPaginationWithBasicItems
	aria-label="Pagination for 25 pages worth of stuff"
	activePage={8}
	ellipsisBuffer={2}
	totalPages={25}
/>

The ellipsis aria-label and title are customized through the ellipsisProps attribute. The placeholder text {0} will be replaced with the first page number on the list and {1} will be replaced with the last page number on the list.

<ClayPaginationWithBasicItems
	activePage={8}
	ellipsisBuffer={2}
	ellipsisProps={{
		'aria-label': 'Show links to pages {0} through {1}',
		title: 'Show links to pages {0} through {1}',
	}}
	totalPages={25}
/>