Components
Structure
Pagination

Pagination

Pagination

Editable Example

import { Pagination } from "@wfp/react";

() => {
  return (
    <Pagination pageSizes={[5, 20]} totalItems={30} />
  );
};
PropDefaultDescriptionValue

backwardText

string
–

The description for the backward icon.

className

string
–

The CSS class names.

itemRangeText

(min: number,max: number,total: number) => string
–

The function returning a translatable text showing where the current page is, in a manner of the range of items.

forwardText

string
–

The description for the forward icon.

id

string |number
–

The unique ID of this component instance.

itemsPerPageText

string
–

The translatable text indicating the number of items per page.

itemsPerPageFollowsText

string
–

A variant of itemsPerPageText, with a sign indicating that the number follows, e.g. ':'.

itemText

(min: number,max: number) => string
–

A variant of itemRangeText, used if the total number of items is unknown.

onChange

(params: { page: number; pageSize: number; }) => void
–

The callback function called when the current page changes.

pageRangeText

(current: number,total: number) => string
–

A function returning PII showing where the current page is.

pageText

(page: number) => string
–

The translatable text showing the current page.

pageSizes

number[]
–

The choices for pageSize.

pageSizesDisabled

boolean
–

true if ture the pageSizes should be not visible.

totalItems

number
–

The total number of items.

disabled

boolean
–

true if the backward/forward buttons should be disabled.

page

number
–

The current page.

pageSize

number
–

The number dictating how many items a page contains.

pageNumberText

string
–

pagesUnknown

boolean
–

true if the total number of items is unknown.

isLastPage

boolean
–

true if the current page should be the last page.

pageInputDisabled

boolean
–

true if the select box to change the page should be disabled.

On this page

References