Pagination

yarn add @clayui/pagination

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

Stable 3.2.8 View in Lexicon CHANGELOG

Numbered Pagination
API

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:

Code Sample (expand to see it)

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:

Code Sample (expand to see it)

API

ClayPagination

Property	Type	Required	Default	Description
size	'lg' \| 'sm'	false		The size of pagination element.

ClayPagination.Ellipsis

Property	Type	Required	Default
items	Array<number>	false	[]
disabledPages	Array<number>	false	[]
hrefConstructor	(page?: number) => string	false
onPageChange	(page?: number) => void	false

ClayPagination.Item

Property	Type	Required	Default
active	boolean	false	false
disabled	boolean	false	false
href	string	false

ClayPaginationWithBasicItems

Property	Type	Required	Default	Description
activePage	number	true		The page that is currently active. The first page is `1`.
ariaLabels	{ previous: string; next: string; }	false	{ next: 'Next', previous: 'Previous', }	Labels for the aria attributes
ellipsisBuffer	number	false	2	The number of pages to show on each side of the active page before using an ellipsis dropdown.
disabledPages	Array<number>	false	[]	The page numbers that should be disabled. For example, `[2,5,6]`.
hrefConstructor	(page?: number) => string	false		Function used to create the href provided for each page link.
onPageChange	(page?: number) => void	false		Callback for when the active page changes. This is only used if an href is not provided.
totalPages	number	true		The total number of pages in the pagination list.
spritemap	string	false		Path to spritemap from clay-css.

Sizes
- Small
- Default
- Large
Using Buttons

Use pagination-bar's preset styles to give your users more control over the content being displayed on the page.

Showing 1 to 20 of 203 entries.

Previous
1
2
...
- - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9
16
Next

Code Sample (expand to see it)

<div class="pagination-bar">
	<div class="dropdown pagination-items-per-page">
		<a
			aria-expanded="false"
			aria-haspopup="true"
			class="dropdown-toggle"
			data-toggle="dropdown"
			href="#1"
			role="button"
		>
			10 entries
			<svg
				class="lexicon-icon lexicon-icon-caret-double-l"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-double-l"></use>
			</svg>
		</a>
		<ul class="dropdown-menu dropdown-menu-top">
			<li><a class="dropdown-item" href="#1">5</a></li>
			<li><a class="dropdown-item" href="#1">10</a></li>
			<li><a class="dropdown-item" href="#1">20</a></li>
			<li><a class="dropdown-item" href="#1">30</a></li>
			<li><a class="dropdown-item" href="#1">50</a></li>
		</ul>
	</div>
	<div class="pagination-results">Showing 1 to 20 of 203 entries.</div>
	<ul class="pagination">
		<li class="disabled page-item">
			<a class="page-link" href="#1" role="button" tabindex="-1">
				<svg
					class="lexicon-icon lexicon-icon-angle-left"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-left"></use>
				</svg>
				<span class="sr-only">Previous</span>
			</a>
		</li>
		<li class="active page-item">
			<a class="page-link" href="#1" tabindex="-1">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="#1">2</a></li>
		<li class="dropdown page-item">
			<a
				aria-expanded="false"
				aria-haspopup="true"
				class="dropdown-toggle page-link"
				data-toggle="dropdown"
				href="#1"
				role="button"
				>...</a
			>
			<ul class="dropdown-menu dropdown-menu-top-center">
				<li>
					<ul class="inline-scroller">
						<li><a class="dropdown-item" href="#1">3</a></li>
						<li><a class="dropdown-item" href="#1">4</a></li>
						<li><a class="dropdown-item" href="#1">5</a></li>
						<li><a class="dropdown-item" href="#1">6</a></li>
						<li><a class="dropdown-item" href="#1">7</a></li>
						<li><a class="dropdown-item" href="#1">8</a></li>
						<li><a class="dropdown-item" href="#1">9</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="page-item"><a class="page-link" href="#1">16</a></li>
		<li class="page-item">
			<a class="page-link" href="#1" role="button">
				<svg
					class="lexicon-icon lexicon-icon-angle-right"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-right"></use>
				</svg>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</div>

Sizes

More sizing options, add pagination-sm or pagination-lg to any pagination component to make it smaller or larger. It can be added to the parent container, such as pagination-bar, to size all the pagination components that reside within.

Small

Showing 1 to 20 of 203 entries.

Previous
1
2
...
- - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9
16
Next

Code Sample (expand to see it)

<div class="pagination-bar pagination-sm">
	<div class="dropdown pagination-items-per-page">
		<a
			aria-expanded="false"
			aria-haspopup="true"
			class="dropdown-toggle"
			data-toggle="dropdown"
			href="#1"
			role="button"
		>
			10 entries
			<svg
				class="lexicon-icon lexicon-icon-caret-double-l"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-double-l"></use>
			</svg>
		</a>
		<ul class="dropdown-menu dropdown-menu-top">
			<li><a class="dropdown-item" href="#1">5</a></li>
			<li><a class="dropdown-item" href="#1">10</a></li>
			<li><a class="dropdown-item" href="#1">20</a></li>
			<li><a class="dropdown-item" href="#1">30</a></li>
			<li><a class="dropdown-item" href="#1">50</a></li>
		</ul>
	</div>
	<div class="pagination-results">Showing 1 to 20 of 203 entries.</div>
	<ul class="pagination">
		<li class="disabled page-item">
			<a class="page-link" href="#1" role="button" tabindex="-1">
				<svg
					class="lexicon-icon lexicon-icon-angle-left"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-left"></use>
				</svg>
				<span class="sr-only">Previous</span>
			</a>
		</li>
		<li class="active page-item">
			<a class="page-link" href="#1" tabindex="-1">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="#1">2</a></li>
		<li class="dropdown page-item">
			<a
				aria-expanded="false"
				aria-haspopup="true"
				class="dropdown-toggle page-link"
				data-toggle="dropdown"
				href="#1"
				role="button"
				>...</a
			>
			<ul class="dropdown-menu dropdown-menu-top-center">
				<li>
					<ul class="inline-scroller">
						<li><a class="dropdown-item" href="#1">3</a></li>
						<li><a class="dropdown-item" href="#1">4</a></li>
						<li><a class="dropdown-item" href="#1">5</a></li>
						<li><a class="dropdown-item" href="#1">6</a></li>
						<li><a class="dropdown-item" href="#1">7</a></li>
						<li><a class="dropdown-item" href="#1">8</a></li>
						<li><a class="dropdown-item" href="#1">9</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="page-item"><a class="page-link" href="#1">16</a></li>
		<li class="page-item">
			<a class="page-link" href="#1" role="button">
				<svg
					class="lexicon-icon lexicon-icon-angle-right"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-right"></use>
				</svg>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</div>

Default

Showing 1 to 20 of 203 entries.

Previous
1
2
...
- - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9
16
Next

Code Sample (expand to see it)

<div class="pagination-bar">
	<div class="dropdown pagination-items-per-page">
		<a
			aria-expanded="false"
			aria-haspopup="true"
			class="dropdown-toggle"
			data-toggle="dropdown"
			href="#1"
			role="button"
		>
			10 entries
			<svg
				class="lexicon-icon lexicon-icon-caret-double-l"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-double-l"></use>
			</svg>
		</a>
		<ul class="dropdown-menu dropdown-menu-top">
			<li><a class="dropdown-item" href="#1">5</a></li>
			<li><a class="dropdown-item" href="#1">10</a></li>
			<li><a class="dropdown-item" href="#1">20</a></li>
			<li><a class="dropdown-item" href="#1">30</a></li>
			<li><a class="dropdown-item" href="#1">50</a></li>
		</ul>
	</div>
	<div class="pagination-results">Showing 1 to 20 of 203 entries.</div>
	<ul class="pagination">
		<li class="disabled page-item">
			<a class="page-link" href="#1" role="button" tabindex="-1">
				<svg
					class="lexicon-icon lexicon-icon-angle-left"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-left"></use>
				</svg>
				<span class="sr-only">Previous</span>
			</a>
		</li>
		<li class="active page-item">
			<a class="page-link" href="#1" tabindex="-1">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="#1">2</a></li>
		<li class="dropdown page-item">
			<a
				aria-expanded="false"
				aria-haspopup="true"
				class="dropdown-toggle page-link"
				data-toggle="dropdown"
				href="#1"
				role="button"
				>...</a
			>
			<ul class="dropdown-menu dropdown-menu-top-center">
				<li>
					<ul class="inline-scroller">
						<li><a class="dropdown-item" href="#1">3</a></li>
						<li><a class="dropdown-item" href="#1">4</a></li>
						<li><a class="dropdown-item" href="#1">5</a></li>
						<li><a class="dropdown-item" href="#1">6</a></li>
						<li><a class="dropdown-item" href="#1">7</a></li>
						<li><a class="dropdown-item" href="#1">8</a></li>
						<li><a class="dropdown-item" href="#1">9</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="page-item"><a class="page-link" href="#1">16</a></li>
		<li class="page-item">
			<a class="page-link" href="#1" role="button">
				<svg
					class="lexicon-icon lexicon-icon-angle-right"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-right"></use>
				</svg>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</div>

Large

Showing 1 to 20 of 203 entries.

Previous
1
2
...
- - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9
16
Next

Code Sample (expand to see it)

<div class="pagination-bar pagination-lg">
	<div class="dropdown pagination-items-per-page">
		<a
			aria-expanded="false"
			aria-haspopup="true"
			class="dropdown-toggle"
			data-toggle="dropdown"
			href="#1"
			role="button"
		>
			10 entries
			<svg
				class="lexicon-icon lexicon-icon-caret-double-l"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-double-l"></use>
			</svg>
		</a>
		<ul class="dropdown-menu dropdown-menu-top">
			<li><a class="dropdown-item" href="#1">5</a></li>
			<li><a class="dropdown-item" href="#1">10</a></li>
			<li><a class="dropdown-item" href="#1">20</a></li>
			<li><a class="dropdown-item" href="#1">30</a></li>
			<li><a class="dropdown-item" href="#1">50</a></li>
		</ul>
	</div>
	<div class="pagination-results">Showing 1 to 20 of 203 entries.</div>
	<ul class="pagination">
		<li class="disabled page-item">
			<a class="page-link" href="#1" role="button" tabindex="-1">
				<svg
					class="lexicon-icon lexicon-icon-angle-left"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-left"></use>
				</svg>
				<span class="sr-only">Previous</span>
			</a>
		</li>
		<li class="active page-item">
			<a class="page-link" href="#1" tabindex="-1">1</a>
		</li>
		<li class="page-item"><a class="page-link" href="#1">2</a></li>
		<li class="dropdown page-item">
			<a
				aria-expanded="false"
				aria-haspopup="true"
				class="dropdown-toggle page-link"
				data-toggle="dropdown"
				href="#1"
				role="button"
				>...</a
			>
			<ul class="dropdown-menu dropdown-menu-top-center">
				<li>
					<ul class="inline-scroller">
						<li><a class="dropdown-item" href="#1">3</a></li>
						<li><a class="dropdown-item" href="#1">4</a></li>
						<li><a class="dropdown-item" href="#1">5</a></li>
						<li><a class="dropdown-item" href="#1">6</a></li>
						<li><a class="dropdown-item" href="#1">7</a></li>
						<li><a class="dropdown-item" href="#1">8</a></li>
						<li><a class="dropdown-item" href="#1">9</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="page-item"><a class="page-link" href="#1">16</a></li>
		<li class="page-item">
			<a class="page-link" href="#1" role="button">
				<svg
					class="lexicon-icon lexicon-icon-angle-right"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-right"></use>
				</svg>
				<span class="sr-only">Next</span>
			</a>
		</li>
	</ul>
</div>

Using Buttons

Showing 1 to 20 of 203 entries.

- - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9

Code Sample (expand to see it)

<div class="pagination-bar">
	<div class="dropdown pagination-items-per-page">
		<button
			aria-expanded="false"
			aria-haspopup="true"
			class="btn btn-unstyled dropdown-toggle"
			data-toggle="dropdown"
			type="button"
		>
			10 entries
			<svg
				class="lexicon-icon lexicon-icon-caret-double-l"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#caret-double-l"></use>
			</svg>
		</button>
		<ul class="dropdown-menu dropdown-menu-top">
			<li><a class="dropdown-item" href="#1">5</a></li>
			<li><a class="dropdown-item" href="#1">10</a></li>
			<li><a class="dropdown-item" href="#1">20</a></li>
			<li><a class="dropdown-item" href="#1">30</a></li>
			<li><a class="dropdown-item" href="#1">50</a></li>
		</ul>
	</div>
	<div class="pagination-results">Showing 1 to 20 of 203 entries.</div>
	<ul class="pagination">
		<li class="disabled page-item">
			<button
				class="btn btn-unstyled page-link"
				disabled=""
				type="button"
			>
				<svg
					class="lexicon-icon lexicon-icon-angle-left"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-left"></use>
				</svg>
				<span class="sr-only">Previous</span>
			</button>
		</li>
		<li class="active page-item">
			<button
				class="btn btn-unstyled page-link"
				tabindex="-1"
				type="button"
			>
				1
			</button>
		</li>
		<li class="page-item">
			<button class="btn btn-unstyled page-link" type="button">2</button>
		</li>
		<li class="dropdown page-item">
			<button
				aria-expanded="false"
				aria-haspopup="true"
				class="btn btn-unstyled dropdown-toggle page-link"
				data-toggle="dropdown"
				type="button"
			>
				...
			</button>
			<ul class="dropdown-menu dropdown-menu-top-center">
				<li>
					<ul class="inline-scroller">
						<li><a class="dropdown-item" href="#1">3</a></li>
						<li><a class="dropdown-item" href="#1">4</a></li>
						<li><a class="dropdown-item" href="#1">5</a></li>
						<li><a class="dropdown-item" href="#1">6</a></li>
						<li><a class="dropdown-item" href="#1">7</a></li>
						<li><a class="dropdown-item" href="#1">8</a></li>
						<li><a class="dropdown-item" href="#1">9</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="page-item">
			<button class="btn btn-unstyled page-link" type="button">16</button>
		</li>
		<li class="page-item">
			<button class="btn btn-unstyled page-link" type="button">
				<svg
					class="lexicon-icon lexicon-icon-angle-right"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#angle-right"></use>
				</svg>
				<span class="sr-only">Next</span>
			</button>
		</li>
	</ul>
</div>