Pagination

Documentation of the <Pagination /> component. Learn how to use it and its available props.

Installation#

To get started, install @exponentialeducation/betomic via yarn:

# Yarn
yarn add @exponentialeducation/betomic

Basic example#

A long list or sets of data can be split into several pages using Pagination. Pagination works well when the size of the dataset is already know (the total number of records).

import { Pagination } from "@exponentialeducation/betomic";

function IndexPage() {

  onPageChanged = (data) => {
    const { currentPage, totalPages, pageLimit } = data;
    /* ... */
  }

  return (
    <main>
      {/* ... */}

      <Pagination totalRecords={200} onPageChanged={onPageChanged} />

      {/* ... */}
    </main>
  )
}

The previous example describes the simplest way of using the Pagination component, it uses default props and renders a component like the following:

Alignment#

To provide an alignment for where the component is located, a wrapper can be implemented to achieve this. The following examples describes so:

import { Pagination } from "@exponentialeducation/betomic";

function IndexPage() {
  return (
    <main>
      {/* ... */}
      <div className="flex justify-start">
        <Pagination totalRecords={200} />
      </div>
      
      <div className="flex justify-center">
        <Pagination totalRecords={200} />
      </div>

      <div className="flex justify-end">
        <Pagination totalRecords={200} />
      </div>
      {/* ... */}
    </main>
  )
}

Default page#

In some cases, it is necessary to show the initial pagination on a different page. The defaultPage prop indicates in which number pagination starts.

If the defaultPage value is greater than the pagination totalPages value, defaultPage will be set to 1.

The above examples of defaultPage prop are described as following:

import { Pagination } from "@exponentialeducation/betomic";

function IndexPage() {
  onPageChanged = (data) => {
    const { currentPage, totalPages, pageLimit } = data;
    /* ... */
  }

  return (
    <main>
      {/* ... */}

      {/* Pagination starts at page 5 */}
      <Pagination totalRecords={250} defaultPage={5} />

      {/* totalPages = 9 so defaultPage is set to 1 */}
      <Pagination totalRecords={250} defaultPage={10} />

      {/* ... */}
    </main>
  )
}

Page limit & total records#

No additional pages#

Pagination determines whether is necessary or not to display an additional pages indicator button.

Additional pages indicator#

When several pages are needed to display the data, an ellipsis (...) button indicator is shown.

Some examples of the pagination pageLimit and previous records:

import { Pagination } from "@exponentialeducation/betomic";

function IndexPage() {
  onPageChanged = (data) => {
    const { currentPage, totalPages, pageLimit } = data;
    /* ... */
  }

  return (
    <main>
      {/* ... */}

      <Pagination
        pageLimit={2}
        totalRecords={8}
        onPageChanged={onPageChanged}
      />

      <Pagination
        pageLimit={1}
        totalRecords={23}
        onPageChanged={onPageChanged}
      />

      {/* ... */}
    </main>
  )
}

One page pagination#

If the result of the page limit with the total amount is determined in one page, meaning totalPages = 1, the Pagination component will render like so:

The following example describes this:

import { Pagination } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* totalPages will equal to 1 */}

      <Pagination pageLimit={5} totalRecords={5} />

      {/* ... */}
    </main>
  )
}

No records#

If totalRecords value isn't provided or is set to 0, meaning !totalRecords, the Pagination component won't render anything since it is not necesary to paginate. As shown in the following example:

import { Pagination } from "@exponentialeducation/betomic";

function IndexPage() {

  return (
    <main>
      {/* totalPages will equal to 1 */}

      <Pagination totalRecords={0} />

      {/* ... */}
    </main>
  )
}

Page neighbours#

The number of additional page-number buttons to display on each side of the current-page button can be configured using the pageNeighbours prop. The maximum number of neighbours that a pagination can have is two.

pageNeighbours = 0#

This is the pageNeighbours default value.

pageNeighbours = 1#

pageNeighbours = 2#

The above examples are described as follows:

import { Pagination } from "@exponentialeducation/betomic";

function IndexPage() {
  onPageChanged = (data) => {
    const { currentPage, totalPages, pageLimit } = data;
    /* ... */
  }

  return (
    <main>
      {/* ... */}

      <Pagination
        pageLimit={1}
        totalRecords={23}
        onPageChanged={onPageChanged}
      />

      <Pagination
        pageLimit={1}
        pageNeighbours={1}
        totalRecords={23}
        onPageChanged={onPageChanged}
      />

      <Pagination
        pageLimit={1}
        pageNeighbours={2}
        totalRecords={23}
        onPageChanged={onPageChanged}
      />

      {/* ... */}
    </main>
  )
}

Props#