Pagination

Usage

Simple Usage

For simple usage, AutoPagination can be used directly. It is a pre-assembled component that handles common pagination use cases.

import { AutoPagination } from "@govtechmy/myds-react/pagination";

<AutoPagination />

Advanced Usage

For user that requires more advanced use cases, the pagination functionality can be assembled manually. The user can use the subcomponents: Pagination, PaginationItem, PaginationContent, PaginationEllipsis, PaginationNext, PaginationPrevious and PaginationNumber.

import {
  Pagination,
  PaginationContext,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationNext,
  PaginationNumber,
  PaginationPrevious,
} from "@/components/myds";

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious />
    </PaginationItem>
    <PaginationItem>
      <PaginationNumber />
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Examples

AutoPagination Types

Use the type props to change the type of the AutoPagination component. Examples of use cases for each types are outlined below:

1. default: Ideal for contexts where users might want to jump to a specific page within a large number of pages.
2. simple: Suitable for simpler navigation where users primarily move forward or backward.
3. full: Similar to the simple type, this type displays the current page and total pages on the left and navigation buttons on far right.

Pagination Configurations

Opting into using AutoPagination or manual assembly of pagination subcomponents necessitates into the usage of props such as page, limit and count. The functionality and look of the pagination components will be influenced by them.

Props

AutoPagination

A pagination component that handles page navigation and different display patterns: default, simple, and full. This is a standalone and pre-assembled component that can handle common pagination use cases.

Pagination

A container component that provides pagination context and navigation structure through a nav element. It manages the core pagination state (current page, total pages, etc.).

PaginationContent

A layout component rendered as an unordered list ul that arranges PaginationItem in a horizontal row.

PaginationItem

A wrapper component rendered as a list item li that contains individual pagination elements like PaginationNext, PaginationPrevious, PaginationLabel and PaginationEllipsis.

PaginationNext

A button component that handles navigaton to the next page. The underlying component can be substituted by using the asChild props.

PaginationPrevious

A button component that handles navigaton to the previous page. The underlying component can be substituted by using the asChild props.

PaginationLabel

A text component that displays pagination information.

PaginationEllipsis

A visual indicator component that represents skipped page numbers in the pagination sequence, rendered as three dots using an icon.