Pagination Bar

Pagination bar provides navigation through datasets

installyarn add @clayui/pagination-bar
versionNPM Version
useimport PaginationBar, {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar';

Table of Contents

PaginationBar Composition

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import PaginationBar from '@clayui/pagination-bar';
import {ClayPaginationWithBasicItems} from '@clayui/pagination';
import Button from '@clayui/button';
import Icon from '@clayui/icon';
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">
				<PaginationBar>
					<PaginationBar.DropDown
						items={[
							{
								label: '10',
								onClick: () => {},
							},
						]}
						trigger={
							<Button displayType="unstyled">
								{'10 items per page'}

								<Icon symbol="caret-double-l" />
							</Button>
						}
					/>

					<PaginationBar.Results>
						Showing a handful of items...
					</PaginationBar.Results>

					<ClayPaginationWithBasicItems
						defaultActive={1}
						ellipsisProps={{'aria-label': 'More', title: 'More'}}
						totalPages={10}
					/>
				</PaginationBar>
			</div>
		</Provider>
	);
}

PaginationBarWithBasicItems

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar';
import React, {useState} from 'react';

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

export default function App() {
	const [delta, setDelta] = useState(4);

	const deltas = [
		{
			href: '#1',
			label: 1,
		},
		{
			label: 2,
		},
		{
			href: '#3',
			label: 3,
		},
		{
			label: 4,
		},
	];

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<ClayPaginationBarWithBasicItems
					defaultActive={1}
					activeDelta={delta}
					deltas={deltas}
					ellipsisBuffer={3}
					ellipsisProps={{'aria-label': 'More', title: 'More'}}
					onDeltaChange={setDelta}
					totalItems={21}
				/>
			</div>
		</Provider>
	);
}

PaginationBarWithBasicItems Without DropDown

Open on CodeSandboxOpen Sandbox
import {Provider} from '@clayui/core';
import {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar';
import React, {useState} from 'react';

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

export default function App() {
	const [delta, setDelta] = useState(5);

	return (
		<Provider spritemap="/public/icons.svg">
			<div className="p-4">
				<ClayPaginationBarWithBasicItems
					activeDelta={delta}
					defaultActive={1}
					ellipsisBuffer={3}
					ellipsisProps={{'aria-label': 'More', title: 'More'}}
					onDeltaChange={setDelta}
					showDeltasDropDown={false}
					totalItems={21}
				/>
			</div>
		</Provider>
	);
}

Accessibility

ClayPaginationBarWithBasicItems generates aria-label’s for the previous, next, page, and ellipsis links it renders. Custom labels can be passed through the labels attribute, alongside the visible strings. It is useful for providing translated labels for screen readers or custom text more relevant to your app. The component replaces the placeholder {0} with the page number, and {0} and {1} with the first and last page the ellipsis covers. Any key that is omitted falls back to its default English label.

<ClayPaginationBarWithBasicItems
	labels={{
		ellipsisAriaLabel: 'Show pages {0} through {1}',
		nextPageAriaLabel: 'Change the page to {0}',
		pageLinkAriaLabel: 'Change the page to {0}',
		paginationResults: 'Showing {0} to {1} of {2}',
		perPageItems: '{0} items',
		previousPageAriaLabel: 'Change the page to {0}',
		selectPerPageItems: '{0} items',
	}}
	totalItems={21}
/>

API Reference

Loading API references...
Edit this page on GitHub

Table of Contents