Pagination | WFP Bridge

🚧 This website is work in progress 👷

Pagination

Import statement

import { Pagination } from "@progressiveui/react"

When to use

Use Pagination when managing large datasets that need to be broken down into smaller, more manageable chunks.
Utilize the itemsPerPageText prop to indicate the number of items per page.
Leverage the pageRangeText and itemRangeText props for providing users with context on their current position within the data.

Example

<Pagination
  backwardText="Backward"
  forwardText="Forward"
  itemsPerPageText="Items per page:"
  itemRangeText={(min, max, total) => `${min}-${max} of ${total} items`}
  pageRangeText={(current, total) => `${current} of ${total} pages`}
  pageSizes={[5, 10, 20]}
  totalItems={100}
/>

This example sets up a Pagination component for navigating through 100 items, with options to display 5, 10, or 20 items per page.

References