@clayui/pagination

ClayPagination component

Usage no npm install needed!

<script type="module">
  import clayuiPagination from 'https://cdn.skypack.dev/@clayui/pagination';
</script>

README

title: 'Pagination' description: 'Pagination provides horizontal navigation between chunks(pages) of a dataset.' lexiconDefinition: 'https://liferay.design/lexicon/core-components/pagination/' packageNpm: '@clayui/pagination'

import { Pagination, PaginationWithBasicItems, } from '$packages/clay-pagination/docs/index';

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:

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: