Paginator

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

Props

Name	Type	Description	Default
currentPage	`number`	Number of the current selected page.	`1`
itemsPerPage	`number`	Number of items per page.	`5`
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	`(itemsPerPage: number) => void`	This function will be called when the user selects an item per page option. The number of items per page will be passed as a parameter to this function.	-
totalItems	`number`	Total number of items in the pages.	`1`
showGoToPage	`boolean`	If true, a select will be displayed with the page numbers to move through them	`false`
onPageChange	`(page: number) => void`	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`	Value of the `tabindex` attribute.	`0`

Examples

Items per page

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

() => {
  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

Report an issue on GitHub

Number Input

NextParagraph

Paginator

Props

Examples

Items per page

Contents