Pagination Bar

yarn add @clayui/pagination-bar

React Component
CSS / Markup

Stable3.0.5

Pagination bar provides navigation through datasets

ClayPaginationBar Composition
ClayPaginationBarWithBasicItems
API

Take a look at our Storybook for more information about this component.

Check the Lexicon Pagination Pattern for a more in-depth look at the motivations and proper usage of this component.

ClayPaginationBar Composition

Showing a handful of items...

import ClayPaginationBar from '@clayui/pagination-bar';
import ClayButton from '@clayui/button';
import ClayIcon from '@clayui/icon';
import React from 'react';

import ClayPaginationBar from '@clayui/pagination-bar';
import ClayButton from '@clayui/button';
import ClayIcon from '@clayui/icon';
import React from 'react';

const Component = () => {
  return (
    <ClayPaginationBar>
      <ClayPaginationBar.DropDown
        items={[
          {
            label: "10",
            onClick: () => {}
          }
        ]}
        trigger={
          <ClayButton displayType="unstyled">
            {"10 items per page"}

            <ClayIcon spritemap={spritemap} symbol="caret-double-l" />
          </ClayButton>
        }
      />

      <ClayPaginationBar.Results>
        {"Showing a handful of items..."}
      </ClayPaginationBar.Results>

      <ClayPaginationWithBasicItems
        activePage={1}
        onPageChange={() => {}}
        spritemap={spritemap}
        totalPages={10}
      />
    </ClayPaginationBar>
  );
};
render(<Component />);

const Component = () => {
  return (
    <ClayPaginationBar>
      <ClayPaginationBar.DropDown
        items={[
          {
            label: "10",
            onClick: () => {}
          }
        ]}
        trigger={
          <ClayButton displayType="unstyled">
            {"10 items per page"}
            <ClayIcon spritemap={spritemap} symbol="caret-double-l" />
          </ClayButton>
        }
      />
      <ClayPaginationBar.Results>
        {"Showing a handful of items..."}
      </ClayPaginationBar.Results>
      <ClayPaginationWithBasicItems
        activePage={1}
        onPageChange={() => {}}
        spritemap={spritemap}
        totalPages={10}
      />
    </ClayPaginationBar>
  );
};
render(<Component />);

ClayPaginationBarWithBasicItems

Showing 1 to 5 of 21

import {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar';
import React from 'react';

import {ClayPaginationBarWithBasicItems} from '@clayui/pagination-bar';
import React from 'react';

const Component = () => {
  const [activePage, setActivePage] = useState(1);
  const [delta, setDelta] = useState(5);

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

  return (
    <ClayPaginationBarWithBasicItems
      activeDelta={delta}
      activePage={activePage}
      deltas={deltas}
      ellipsisBuffer={3}
      onDeltaChange={setDelta}
      onPageChange={setActivePage}
      spritemap={spritemap}
      totalItems={21}
    />
  );
};
render(<Component />);

const Component = () => {
  const [activePage, setActivePage] = useState(1);
  const [delta, setDelta] = useState(5);
  const deltas = [
    {
      href: "#1",
      label: 1
    },
    {
      label: 2
    },
    {
      href: "#3",
      label: 3
    },
    {
      label: 4
    }
  ];
  return (
    <ClayPaginationBarWithBasicItems
      activeDelta={delta}
      activePage={activePage}
      deltas={deltas}
      ellipsisBuffer={3}
      onDeltaChange={setDelta}
      onPageChange={setActivePage}
      spritemap={spritemap}
      totalItems={21}
    />
  );
};
render(<Component />);

API

ClayPaginationBar

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

None.

ClayPaginationBar.Results

None.

ClayPaginationBarWithBasicItems

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

Pagination bar provides navigation through datasets

Sizes
- Small
- Default
- Large
Using Buttons

Check the Lexicon Badges Pattern for a more in-depth look at the motivations and proper usage of this component.

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