LEDA1.3.10

Pagination

Props

NameTypeDescription
currentPage
number
Current page number
defaultPageSize
number

Is used together with pageSizeOptions.

...

isLoading
boolean
No clicks are handled in this state
messages
PaginationMessages ==== interface PaginationMessages { outOf: string, pageSize: string, pageSizeAll: string, titleDotsNext: string, titleDotsPrevious: string, titleFirst: string, titleLast: string, titleNext: string, titlePrevious: string, }

Customize component text labels

Consider using Leda provider to set messages globally.

onChange
(event: ChangeEvent) => void
Current page change handler
onPageSizeChangeHandler
(event: PageSizeChangeEvent) => void
Page size change handler
pageSize
number
Number of items on the page
pageSizeOptions
number[]
In case you want more
totalItems
number
Total number of items to split across pages
_[className]
[x: string]: unknown
E.g.: _w-48 adds a css class w-48 to the component's outer wrapper.
  • Basic
  • Messages

() => {
  const [pageSize, setPageSize] = React.useState(10);
  const [currentPage, setCurrentPage] = React.useState(1);

  return (
    <L.Pagination
      pageSize={pageSize}
      pageSizeOptions={[5, 10, 20, 50]}
      totalItems={1246}
      currentPage={currentPage}
      onChange={(ev) => setCurrentPage(ev.component.value)}
      onPageSizeChange={(ev) => setPageSize(ev.component.value ? parseInt(ev.component.value, 10) : undefined)}
    />
  );
}

Customization props

NameType
itemsInfoRender
CustomRender<PaginationProps, PaginationState, PaginationInfoProps>
...
itemsRangeInfoRender
CustomRender<PaginationProps, PaginationState, PaginationRangeInfoProps>
...
itemsTotalInfoRender
CustomRender<PaginationProps, PaginationState, PaginationTotalInfoProps>
...
pagesDropDownRender
CustomRender<PaginationProps, PaginationState, PagesDropDownProps>
...