Paginator

Ready

The paginator component allows dividing large amounts of content into multiple pages.

Code

Usage

Specifications

Props

Name	Default	Description
currentPage: number	`1`	Number of the current selected page.
itemsPerPage: number	`5`	Number of items per page.
itemsPerPageOptions: number[]	`[]`	An array of numbers representing the items per page options. If undefined, the select with items per page options will not be displayed.
itemsPerPageFunction: function		This function will be called when the user selects an item per page option.
totalItems: number	`1`	Total number of items in the pages.
showGoToPage: boolean	`false`	If true, a select will be displayed with the page numbers to move through them
onPageChange: function		This function will be called when the user clicks on any of the button to change pages. The page number will be passed as a parameter to this function.
tabIndex: number	`0`	Value of the tabindex.

Examples

Items per page

This is an example of how to display 'Items per Page' select and how to handle it through the itemsPerPageFunction.

() => {
  const [page, changePage] = useState(1);
  const [items, changeItems] = useState(10);
  const itemsPerPageClick = (value) => {
    changeItems(value);
  };

  return (
    <DxcInset space="2rem">
      <DxcPaginator
        currentPage={page}
        itemsPerPage={items}
        itemsPerPageOptions={[5, 10, 15]}
        itemsPerPageFunction={itemsPerPageClick}
        totalItems={27}
      />
    </DxcInset>
  );
}

() => {
  const [page, changePage] = useState(1);
  const [items, changeItems] = useState(10);
  const itemsPerPageClick = (value) => {
    changeItems(value);
  };

  return (
    <DxcInset space="2rem">
      <DxcPaginator
        currentPage={page}
        itemsPerPage={items}
        itemsPerPageOptions={[5, 10, 15]}
        itemsPerPageFunction={itemsPerPageClick}
        totalItems={27}
      />
    </DxcInset>
  );
}

Props
Examples
- Items per page

Edit this page on GitHub

Number Input

NextParagraph

Paginator

Props

Examples

Items per page

Contents