@asphalt-react/pagination NPM

Pagination

npm

Pagination component divides content into discrete pages. Use this component to show long lists of data divided across pages for a better experience. Pagination contains a list of links or buttons called page tiles to navigate through the pages. You can control the number of page tiles visible. Pagination also allows users to navigate to next, previous, first and last pages through actionable elements called steppers. They are visible by default, but you can choose to hide them.

Pagination components exports PerPage component. You can use this to set the number of records visible on each page.

You can also create a custom Pagination through a family of unit components and hooks exported by Pagination and other Asphalt React components.

Usage

import React, { useState } from "react"
import { Link } from "gatsby" // or any other router like react-router
import { Pagination, PerPage } from "@asphalt-react/pagination"

function App() {
  const [active, setActive] = useState(1)
  const [current, setCurrent] = useState(10)

  const getTileProps = (num) => ({
    to: `?page=${num}`,
  })

  const getPerPageTileProps = (recordsPerPage) => ({
    to: `?perPage=${recordsPerPage}`,
  })

  const handlePageChange = (e, pageNum) => {
    setActive(pageNum)
  }

  const handlePerPageChange = (e, records) => {
    setCurrent(records)
  }

  return (
    <div >
      <Pagination
        totalPages={50}
        as={Link}
        getTileProps={getTileProps}
        active={active}
        onChange={handlePageChange}
        slim
      />
      <div>
        <div>Items/Page: </div>
        <PerPage
          as={Link}
          getTileProps={getPerPageTileProps}
          recordsPerPage={[10, 25, 50, 100]}
          active={current}
          onChange={handlePerPageChange} 
        />
      </div>
    </div>
  )
}

Variants

Pagination has 3 variants to configure the number of page tiles:

minimal - contains only active page tile.
slim - contains 3 page tiles including active page tile. This is the default variant.
extended - contains 5 page tiles including active page tile.

Accessibility

Use tab or shift+tab to navigate among pages.

Creating a custom Pagination

Pagination exports layout unit components and hooks using which you can create a custom implementation.

Components

BasePagination
PageItem

Hooks

usePagination

React hook to implement the functionality of Pagination in your custom implementation. You can customize the tile count and add truncation to your component. Truncation is a visual aid to let users know that some page tiles are hidden behind the truncation symbol like an ellipses.

import { BasePagination, usePagination } from "@asphalt-react/pagination"
import { ToggleButton } from "@asphalt-react/toggle-button"
import { ToggleButton } from "@asphalt-react/button"
import {
	ChevronBackward,
	ChevronForward,
	ChevronLeft,
	ChevronRight,
	More
} from "@asphalt-react/iconpack"

export const Pagination = () => {
	const { getPagesList } = usePagination({
    active,
    totalPages,
    tileCount: 5,
  })

	const pages = getPagesList({ truncate: false })

	return (
		<BasePagination>
      <PageItem>
        <Button
          link={false}
          disabled={!link && active === 1}
          nude
          icon
          compact
          system
          onClick={(e) => onChange(e, 1)}
        >
          <ChevronBackward />
        </Button>
      </PageItem>
      <PageItem>
        <Button
          link={false}
          disabled={!link && active === 1}
          nude
          icon
          compact
          system
          onClick={(e) => onChange(e, active - 1)}
        >
          <ChevronLeft />
        </Button>
      </PageItem>

      {pages.map((pageNum) =>
        <PageItem key={`page-${pageNum}`}>
          <ToggleButton
            link={false}
            seamless
            compact
            underline={false}
            onClick={(e) => onChange(e, pageNum)}
            on={pageNum === active}
          >
            {pageNum}
          </ToggleButton>
        </PageItem>
      )}

      <PageItem>
        <Button
          link={false}
          disabled={!link && active === totalPages}
          nude
          icon
          compact
          system
          onClick={(e) => onChange(e, active + 1)}
        >
          <ChevronRight />
        </Button>
      </PageItem>

      <PageItem>
        <Button
          link={false}
          disabled={!link && active === totalPages}
          nude
          icon
          compact
          system
          onClick={(e) => onChange(e, totalPages)}
        >
          <ChevronForward />
        </Button>
      </PageItem>
    </BasePagination>
	)
}

usePagination accepts the following props:
- active - active page number.
- totalPages - total number of pages.
- tileCount - page tile count.
It returns functions which exposes certain functionality of pagination.
- isStartTruncated() - returns a boolean value denoting truncation at start of page tiles
- isEndTruncated - returns a boolean value denoting truncation at end of page tiles
- getPagesList({ truncate = false }) - returns an array of page numbers which can be used to render the page tiles of pagination. Accepts truncate as a boolean argument.
- The output of getPagesList contains -1, specifying the position of truncation.

Props

totalPages

Total number of available pages.

type	required	default
number	true	N/A

active

Current page number.

type	required	default
number	false	1

onChange

Callback to be called when page changes.

onChange receives an object with the following shape.

event - browser event
page - active page number

({ event, page }) => {}

type	required	default
func	false	N/A

as

Html element/React component to replace the default element. Using this prop, you can use your router's link element, such as "react-router-dom"'s Link element.

type	required	default
elementType	false	"a"

getTileProps

Function to generate props such as "href", "id", data-attributes etc. for page tiles.

type	required	default
func	false	N/A

link

Render a link.

type	required	default
bool	false	true

stepper

Toggle visibility for next and previous stepper.

type	required	default
bool	false	true

previousStepperProps

Function to generate props such as "href", "id", data-attributes etc. for the previous stepper element.

type	required	default
func	false	N/A

nextStepperProps

Function to generate props such as "href", "id", data-attributes etc. for the next stepper element.

type	required	default
func	false	N/A

edgeStepper

Toggle visibility for left and right edge stepper.

type	required	default
bool	false	true

leftEdgeStepperProps

Function to generate props such as "href", "id", data-attributes etc. for the left edge stepper element.

type	required	default
func	false	N/A

rightEdgeStepperProps

Function to generate props such as "href", "id", data-attributes etc. for the right edge stepper element.

type	required	default
func	false	N/A

minimal

Variant to show current active tile, stepper and edge stepper.

type	required	default
bool	false	false

slim

Variant to show 3 page tiles, stepper and edge stepper.

type	required	default
bool	false	false

extended

Variant to show 5 page tiles, stepper and edge stepper.

type	required	default
bool	false	false

nextStepperLabel

aria-label for next stepper.

type	required	default
string	false	"go to next page"

previousStepperLabel

aria-label for previous stepper.

type	required	default
string	false	"go to previous page"

leftEdgeStepperLabel

aria-label for left edge stepper.

type	required	default
string	false	"go to first page"

rightEdgeStepperLabel

aria-label for right edge stepper.

type	required	default
string	false	"go to last page"

PerPage

Set number of records visible on each page.

Props

recordsPerPage

Array of numbers representing PerPage indices.

type	required	default
arrayOf	false	10, 25, 50, 100

as

Html element/React component to replace the default element. Using this prop, you can use your router's link element, such as "react-router-dom"'s Link element.