Skip to main content
0.57.0
View Zag.js on Github
Join the Discord server

Pagination

Pagination is an interface that allows navigating between pages that contain split information, instead of being shown on a single page.

Properties

Features

  • Full keyboard navigation.
  • Optimized for screen readers.

Installation

To use the pagination machine in your project, run the following command in your command line:

npm install @zag-js/pagination @zag-js/react
# or
yarn add @zag-js/pagination @zag-js/react

This command will install the framework agnostic pagination logic and the reactive utilities for your framework of choice.

Anatomy

To set up the pagination correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Usage

First, import the pagination package into your project

import * as pagination from "@zag-js/pagination"

The pagination package exports two key functions:

  • machine — The state machine logic for the pagination widget.
  • connect — The function that translates the machine's state to JSX attributes and event handlers.

You'll also need to provide a unique id to the useMachine hook. This is used to ensure that every part has a unique identifier.

import * as pagination from "@zag-js/pagination"
import { useMachine, normalizeProps } from "@zag-js/react"
import { data } from "./data"

function Pagination() {
  const [state, send] = useMachine(
    pagination.machine({ id: "1", count: data.length }),
  )

  const api = pagination.connect(state, send, normalizeProps)

  return (
    <div>
      {api.totalPages > 1 && (
        <nav {...api.getRootProps()}>
          <ul>
            <li>
              <a href="#previous" {...api.getPrevTriggerProps()}>
                Previous <span className="visually-hidden">Page</span>
              </a>
            </li>
            {api.pages.map((page, i) => {
              if (page.type === "page")
                return (
                  <li key={page.value}>
                    <a href={`#${page.value}`} {...api.getItemProps(page)}>
                      {page.value}
                    </a>
                  </li>
                )
              else
                return (
                  <li key={`ellipsis-${i}`}>
                    <span {...api.getEllipsisProps({ index: i })}>&#8230;</span>
                  </li>
                )
            })}
            <li>
              <a href="#next" {...api.getNextTriggerProps()}>
                Next <span className="visually-hidden">Page</span>
              </a>
            </li>
          </ul>
        </nav>
      )}
    </div>
  )
}

const api = connect(state, send)

// You can slice the data, to get data for current page
const currentPageData = data.slice(api.pageRange.start, api.pageRange.end)

api.page
// => 1

api.setPage(3)
// page => 3

api.previousPage
// => 2

api.nextPage
// => 4

api.pages
/*
    [
      {
        "type": "page",
        "value": 1,
      },
      {
        "type": "page",
        "value": 2,
      },
      {
        "type": "ellipsis",
      },
      {
        "type": "page",
        "value": 3,
      },
      {
        "type": "page",
        "value": 4,
      },
    ]
*/

api.pageRange
// => { start: 4, end: 13 }

Styling guide

Earlier, we mentioned that each pagination part has a data-part attribute added to them to select and style them in the DOM.

[data-part="root"] {
  /* styles for the pagination's root */
}

[data-part="item"] {
  /* styles for the pagination's items */
}

[data-part="ellipsis"] {
  /* styles for the pagination's ellipsis */
}

[data-part="prev-trigger"] {
  /* styles for the pagination's previous page trigger */
}

[data-part="next-trigger"] {
  /* styles for the pagination's next page trigger */
}

/* We add a data-disabled attribute to the prev/next items when on the first/last page  */

[data-part="prev-trigger"][data-disabled] {
  /* styles for the pagination's previous page trigger when on first page */
}

[data-part="next-trigger"][data-disabled] {
  /* styles for the pagination's next page trigger when on first page */
}

Methods and Properties

Machine Context

The pagination machine exposes the following context properties:

  • idsPartial<{ root: string; ellipsis(index: number): string; prevTrigger: string; nextTrigger: string; item(page: number): string; }>The ids of the elements in the accordion. Useful for composition.
  • translationsIntlTranslationsSpecifies the localized strings that identifies the accessibility elements and their states
  • countnumberTotal number of data items
  • pageSizenumberNumber of data items per page
  • siblingCountnumberNumber of pages to show beside active page
  • pagenumberThe active page
  • onPageChange(details: PageChangeDetails) => voidCalled when the page number is changed
  • onPageSizeChange(details: PageSizeChangeDetails) => voidCalled when the page size is changed
  • type"button" | "link"The type of the trigger element
  • dir"ltr" | "rtl"The document's text/writing direction.
  • idstringThe unique identifier of the machine.
  • getRootNode() => ShadowRoot | Node | DocumentA root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

Machine API

The pagination api exposes the following methods:

  • pagenumberThe current page.
  • pageSizenumberThe number of data items per page.
  • totalPagesnumberThe total number of pages.
  • pagesPagesThe page range. Represented as an array of page numbers (including ellipsis)
  • previousPagenumberThe previous page.
  • nextPagenumberThe next page.
  • pageRangePageRangeThe page range. Represented as an object with `start` and `end` properties.
  • slice<V>(data: V[]) => V[]Function to slice an array of data based on the current page.
  • setCount(count: number) => voidFunction to set the total number of pages.
  • setPageSize(size: number) => voidFunction to set the page size.
  • setPage(page: number) => voidFunction to set the current page.

Data Attributes

Item
data-scope
pagination
data-part
item
data-index
The index of the item
data-selected
Present when selected
PrevTrigger
data-scope
pagination
data-part
prev-trigger
data-disabled
Present when disabled
NextTrigger
data-scope
pagination
data-part
next-trigger
data-disabled
Present when disabled

Edit this page on GitHub

Proudly made in🇳🇬by Segun Adebayo

Copyright © 2024
On this page