Pagination (PMWCS Addon)

The Pagination component enables the user to select a specific page from a range of pages.

• Module @pmwcs/pagination
• Import styles:
  • Using CSS Loader
    • import '@pmwcs/pagination/styles';
  • Or include stylesheets
    • '@pmwcs/icon-button/styles'
    • '@pmwcs/pagination/pagination.css'

Uncontrolled

<Pagination onChange={(evt, page) => {}} />
<Pagination count={3} onChange={(evt, page) => {}} defaultPage={1} />
<Pagination count={5} onChange={(evt, page) => {}} defaultPage={3} showFirstButton showLastButton />

Controlled

function MyPagination ({ count }) {
  const [page, setPage] = useState(1)

  return (
    <Pagination
      page={page}
      count={count}
      onChange={(evt, page) => setPage(page)}
    />
  )
}

Variants

<Pagination primary count={10}  />
<Pagination secondary count={10} />
<Pagination disabled count={10} />
<Pagination rounded count={3} />

Pagination

Enables the user to select a specific page from a range of pages.

Props

| Name | Type | Description | |------|------|-------------| | boundaryCount | number | Number of always visible pages at the beginning and end. Default is 1. | | count | number | The total number of pages. Default is 1. | | defaultPage | number | The page selected by default when the component is uncontrolled. Default is 1. | | page | number | The page selected. (controlled mode) | | disabled | boolean | If true, the pagination component will be disabled. | | hideNextButton | boolean | If true, hide the next-page button. | | hidePrevButton | boolean | If true, hide the previous-page button. | | onChange | (event: Event, page: number) => void | Callback fired when the page is changed. event The event source of the callback. page The page selected. | | showFirstButton | boolean | If true, show the first-page button. | | showLastButton | boolean | If true, show the last-page button. | | siblingCount | number | Number of always visible pages before and after the current page. Default is 1. | | className | string | additional className of ul element | | getItemAriaLabel | (type, page, selected) => string | Custom label generator for aria labels. | | renderItem | (item) => <PaginationItem {...item} /> | Custom render item. Defaults to PaginationItem. | | rounded | boolean | The shape of the pagination items, rounded edges instead of circle. | | size | 'small' \| 'medium' \| 'large' | The size of the pagination component. | primary | boolean | Primary theme. | | secondary | boolean | Secondary theme. |

PaginationItem

Pagination element to select a specific page.

| Name | Type | Description | |------|------|-------------| | className | string | Additional className | | disabled | boolean | Disabled component if true. @default false | | page | number | page number on click | selected | boolean | item is selected | rounded | boolean | item has rounded corners. If false then item is displayed with circle. | size | 'small' \| 'medium' \| 'large' | different sizes of component. @default 'medium' | | type | 'page' \| 'start-ellipsis' \| 'end-ellipsis' \| 'previous' \| 'next' \| 'first' \| 'last' | type of item |