Pagination

Paginate long list of data split in different pages. There are controls to go to a particular page, or navigate to the next/previous page.

Pagination renders truncation icon if total number of pages is more than 10. The first and last pages are always visible.

It consists of 2 sub-components - PerPage and Records

Accessibility

• Use tab or shift+tab to navigate among pages.

Usage

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

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

  const linkFunc = (num) => ({
    to: `/Hello?page=${num}`,
  })

  const pageChangeHandler = ({ page, event }) => {
    event.preventDefault()
    setActive(page)
  }

  return (
    <Pagination
      totalPages={totalPages}
      as={Link}
      getTagProps={linkFunc}
      active={active}
      onChange={pageChangeHandler}
    />
  )
}

Props

totalPages

Total number of available pages

as

Name of the element to be used for each Pagination element

getTagProps

function to generate props for props.as

active

A number to determine the active page.

onChange

Function to be called when page changes

onChange receives an object with the following signature

• page - active page number
• event - browser event

({page, event}) => void

PerPage

Set number of records visible on each page.

Props

pages

Array of numbers representing PerPage indices.

as

Name of the element to be used for each PerPage element

perPage

Number of records per page

getTagProps

function to generate props for props.as

onChange

Function to be called when props.perPage value

onChange receives an object with the following signature

• records - number of records to show per page
• event - click event

 ({records, event}) => void

Records

Displays the index of records shown in the current page along with total records.

Props

perPage

Number of records per page

total

Number of total records

active

Active page's number

translate

Function to replace text with the preferred language

({start, end, total}) => string

start: starting index of the records shown in page

end: last index of the records shown in page

total: total records present