Pagination Bar

yarn add @clayui/pagination-bar

Pagination bar provides navigation through datasets

Stable 3.1.12 View in Lexicon CHANGELOG

ClayPaginationBar Composition
ClayPaginationBarWithBasicItems
API

ClayPaginationBar Composition

Showing a handful of items...

Code Sample (expand to see it)

ClayPaginationBarWithBasicItems

Showing 1 to 5 of 21

Code Sample (expand to see it)

API

ClayPaginationBar

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

None.

ClayPaginationBar.Results

None.

ClayPaginationBarWithBasicItems

Property	Type	Required	Default	Description
activeDelta	number	false		The value of delta that is currently selected
activePage	number	false	1	Initialize the page that is currently active. The first page is `1`.
deltas	Array<IDelta>	false	[ { label: 10, }, { label: 20, }, { label: 30, }, { label: 50, }, ]	Possible values of items per page.
disabledPages	Array<number>	false		The page numbers that should be disabled. For example, `[2,5,6]`.
ellipsisBuffer	number	false		The number of pages to show on each side of the active page before using an ellipsis dropdown.
hrefConstructor	(page?: number) => string	false		Function used to create the href provided for each page link.
labels	{ paginationResults: string; perPageItems: string; selectPerPageItems: string; }	false	{ paginationResults: 'Showing {0} to {1} of {2}', perPageItems: '{0} items', selectPerPageItems: '{0} items', }	Labels for changing some texts inside the component. Use this property for i18n.
onDeltaChange	(page: number) => void	false		Callback for when the number of elements per page changes. This is only used if an href is not provided.
onPageChange	(page: number) => void	false		Callback for when the active page changes. This is only used if an href is not provided.
spritemap	string	true		Path to spritemap from clay-css.
totalItems	number	true		The total number of items in the pagination list.

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>

ClayPaginationBar Composition

ClayPaginationBarWithBasicItems

API

ClayPaginationBar

ClayPaginationBar.DropDown

ClayPaginationBar.Results

ClayPaginationBarWithBasicItems

Sizes

Small

Default

Large

Using Buttons