Components
Structure
Pagination

Pagination

Import statement

import { Pagination } from "@wfp/react"

Usage

Expand code

Editable Example

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

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

On this page

References