| 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. If there are 100 or more options, the select will be virtualized for better performance. | - |
| 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="var(--spacing-padding-xl)"> <DxcPaginator currentPage={page} itemsPerPage={items} itemsPerPageOptions={[5, 10, 15]} itemsPerPageFunction={itemsPerPageClick} totalItems={27} /> </DxcInset> ); }