Pagination

yarn add @clayui/pagination

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

React Component
CSS / Markup

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:

import ClayPagination from '@clayui/pagination';

import ClayPagination from '@clayui/pagination';

const Component = () => {
  return (
    <ClayPagination>
      <ClayPagination.Item>{1}</ClayPagination.Item>
      <ClayPagination.Ellipsis items={[2, 3, 4, 5]} />
      <ClayPagination.Item>{"End"}</ClayPagination.Item>
    </ClayPagination>
  );
};
render(<Component />);

const Component = () => {
  return (
    <ClayPagination>
      <ClayPagination.Item>{1}</ClayPagination.Item>
      <ClayPagination.Ellipsis items={[2, 3, 4, 5]} />
      <ClayPagination.Item>{"End"}</ClayPagination.Item>
    </ClayPagination>
  );
};
render(<Component />);

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 {ClayPaginationWithBasicItems} from '@clayui/pagination';

import {ClayPaginationWithBasicItems} from '@clayui/pagination';

const Component = () => {
  const [active, setActive] = useState(8);

  return (
    <ClayPaginationWithBasicItems
      activePage={active}
      ellipsisBuffer={2}
      onPageChange={setActive}
      spritemap={spritemap}
      totalPages={25}
    />
  );
};
render(<Component />);

const Component = () => {
  const [active, setActive] = useState(8);
  return (
    <ClayPaginationWithBasicItems
      activePage={active}
      ellipsisBuffer={2}
      onPageChange={setActive}
      spritemap={spritemap}
      totalPages={25}
    />
  );
};
render(<Component />);

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.