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
type | required | default |
---|---|---|
number | true | N/A |
as
Name of the element to be used for each Pagination
element
type | required | default |
---|---|---|
elementType | false | "a" |
getTagProps
function to generate props for props.as
type | required | default |
---|---|---|
func | false | N/A |
active
A number to determine the active page.
type | required | default |
---|---|---|
number | false | 1 |
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
type | required | default |
---|---|---|
func | false | N/A |
PerPage
Set number of records visible on each page.
Props
pages
Array of numbers representing PerPage indices.
type | required | default |
---|---|---|
arrayOf | false | [10, 25, 50, 100] |
as
Name of the element to be used for each PerPage
element
type | required | default |
---|---|---|
elementType | false | "a" |
perPage
Number of records per page
type | required | default |
---|---|---|
number | false | 10 |
getTagProps
function to generate props for props.as
type | required | default |
---|---|---|
func | false | N/A |
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
type | required | default |
---|---|---|
func | false | N/A |
Records
Displays the index of records shown in the current page along with total records.
Props
perPage
Number of records per page
type | required | default |
---|---|---|
number | true | N/A |
total
Number of total records
type | required | default |
---|---|---|
number | true | N/A |
active
Active page's number
type | required | default |
---|---|---|
number | true | N/A |
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
type | required | default |
---|---|---|
func | false | N/A |