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

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