Paginator
The paginator component allows dividing large amounts of content into multiple pages.
| 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 |
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> ); }