Pagination

Default

The range prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the range prop.

Note: If the total pages prop is 0 or 1, the Pagination component will not be displayed, as there aren't multiple pages to navigate.

import React from 'react'

import { Pagination } from 'playbook-ui'

const PaginationDefault = (props) => {

    return (
      <>
        <Pagination
            current={1}
            range={5}
            total={10}
          />
      </>
    )
}

export default PaginationDefault

Page Change

You can use the onChange prop to control the data of your table. This prop is callback function that will allow you control the state.

To ensure synchronization between multiple pagination components on a single page, use unique, dynamic keys for each pagination instance. Each Pagination component should have its own dynamic key that reflects the current active page: this example uses pagination-top-${activePage} and pagination-bottom-${activePage}.

import React, { useState } from "react";

import { Table, Pagination } from 'playbook-ui'

import { data } from "./data";

const PaginationPageChange = (props) => {

  const [activePage, setActivePage] = useState(1);
  const rowsPerPage = 3;
  const totalPages = Math.ceil(data.length / rowsPerPage);

  const onPageChange = (pageNumber) => {
    setActivePage(pageNumber);
  };

  const currentData = data.slice(
    (activePage - 1) * rowsPerPage,
    activePage * rowsPerPage
  );

    return (
      <div className="App">
      <Pagination
          current={activePage}
          key={`pagination-top-${activePage}`}
          marginBottom="xs"
          onChange={onPageChange}
          range={5}
          total={totalPages}
      />

      <Table 
          marginBottom="xs"
          responsive="none" 
          size="sm"
      >
        <Table.Head>
          <Table.Row>
            <Table.Header>{"Column 1"}</Table.Header>
            <Table.Header>{"Column 2"}</Table.Header>
            <Table.Header>{"Column 3"}</Table.Header>
            <Table.Header>{"Column 4"}</Table.Header>
            <Table.Header>{"Column 5"}</Table.Header>
          </Table.Row>
        </Table.Head>
        <Table.Body>
          {currentData.map((row, index) => (
            <Table.Row key={index}>
              {row.map((cell, cellIndex) => (
                <Table.Cell key={cellIndex}>{cell}</Table.Cell>
              ))}
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
 
      <Pagination
          current={activePage}
          key={`pagination-bottom-${activePage}`}
          onChange={onPageChange}
          range={5}
          total={totalPages}
      />
    </div>
    )
}

export default PaginationPageChange

External Control

The Pagination component supports external control of the current page. This allows for programmatically reseting or changing the current page when filters or other criteria change, without needing to unmount and remount the component.

In this example, changing the "Total Items" or "Items per Page" dropdowns will automatically reset the pagination to page 1, demonstrating how external control works. The pagination component will update its internal state to reflect the new current prop value.

import React, { useState } from "react";

import { Flex, Pagination, Select, Table } from 'playbook-ui'

import { data } from "./data";

const PaginationExternalControl = (props) => {
  const [totalItems, setTotalItems] = useState(20);
  const [itemsPerPage, setItemsPerPage] = useState(5);
  const [currentPage, setCurrentPage] = useState(1);

  const totalPages = Math.ceil(totalItems / itemsPerPage);

  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  const limitedData = data.slice(0, totalItems);
  const startIndex = (currentPage - 1) * itemsPerPage;
  const paginatedItems = limitedData.slice(startIndex, startIndex + itemsPerPage);

  const handleTotalItemsChange = (event) => {
    const value = Number(event.target.value);
    setTotalItems(value);
    setCurrentPage(1);
  };

  const handleItemsPerPageChange = (event) => {
    const value = Number(event.target.value);
    setItemsPerPage(value);
    setCurrentPage(1);
  };

  return (
    <>
        <Flex gap="sm">
            <Select
                label="Total Items"
                onChange={handleTotalItemsChange}
                options={[
                    { value: "5", text: "5" },
                    { value: "10", text: "10" },
                    { value: "20", text: "20" }
                ]}
                size="sm"
                value={String(totalItems)}
            />

            <Select
                label="Items per Page"
                onChange={handleItemsPerPageChange}
                options={[
                    { value: "3", text: "3" },
                    { value: "5", text: "5" },
                    { value: "10", text: "10" }
                ]}
                size="sm"
                value={String(itemsPerPage)}
            />
        </Flex>

        <Pagination
            current={currentPage}
            key={`pagination-top-${currentPage}`}
            marginBottom="xs"
            onChange={handlePageChange}
            range={5}
            total={totalPages}
        />
        <Table 
            marginBottom="xs"
            responsive="none" 
            size="sm"
        >
            <Table.Head>
            <Table.Row>
                <Table.Header>{"Column 1"}</Table.Header>
                <Table.Header>{"Column 2"}</Table.Header>
                <Table.Header>{"Column 3"}</Table.Header>
                <Table.Header>{"Column 4"}</Table.Header>
                <Table.Header>{"Column 5"}</Table.Header>
            </Table.Row>
            </Table.Head>
            <Table.Body>
            {paginatedItems.map((row, index) => (
                <Table.Row key={index}>
                {row.map((cell, cellIndex) => (
                    <Table.Cell key={cellIndex}>{cell}</Table.Cell>
                ))}
                </Table.Row>
            ))}
            </Table.Body>
        </Table>
        <Pagination
            current={currentPage}
            key={`pagination-bottom-${currentPage}`}
            onChange={handlePageChange}
            range={5}
            total={totalPages}
        />
    </>
  )
}

export default PaginationExternalControl

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat