Pagination

A component for navigating between pages of content with previous/next controls.

CMSPayload CMS Integration

Pagination is automatically handled by Payload CMS for collection queries. Configure page size and display options through your CMS settings.

CMS Demo

See how pagination works with CMS content:

PaginationA pagination component for navigating pages

Payload Integration Example

// In your Payload CMS query
const { docs, totalPages, page, hasNextPage, hasPrevPage } = await payload.find({
  collection: 'posts',
  limit: 10,
  page: currentPage,
})

Rendering Pagination

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from "@mordecai-design-system/ui"

export function PostsPagination({ page, totalPages, baseUrl }) {
  return (
    <Pagination>
      <PaginationContent>
        {page > 1 && (
          <PaginationItem>
            <PaginationPrevious href={`${baseUrl}?page=${page - 1}`} />
          </PaginationItem>
        )}

        {Array.from({ length: totalPages }, (_, i) => i + 1)
          .filter(p => Math.abs(p - page) <= 2 || p === 1 || p === totalPages)
          .map((p, i, arr) => (
            <>
              {i > 0 && arr[i - 1] !== p - 1 && (
                <PaginationItem key={`ellipsis-${p}`}>
                  <PaginationEllipsis />
                </PaginationItem>
              )}
              <PaginationItem key={p}>
                <PaginationLink href={`${baseUrl}?page=${p}`} isActive={p === page}>
                  {p}
                </PaginationLink>
              </PaginationItem>
            </>
          ))}

        {page < totalPages && (
          <PaginationItem>
            <PaginationNext href={`${baseUrl}?page=${page + 1}`} />
          </PaginationItem>
        )}
      </PaginationContent>
    </Pagination>
  )
}

Installation

pnpm add @corew500/ui

Usage

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from "@mordecai-design-system/ui"

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Examples

With Ellipsis

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>5</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">10</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Sub-components

| Component | Description | |-----------|-------------| | Pagination | Root nav element | | PaginationContent | Container for pagination items | | PaginationItem | Individual pagination item wrapper | | PaginationLink | Page number link | | PaginationPrevious | Previous page button | | PaginationNext | Next page button | | PaginationEllipsis | Ellipsis indicator for collapsed pages |

Props

PaginationLink

Prop	Type	Default	Description
`isActive`	enum	—	—
`size`	enum	`icon`	—