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.
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>
)
}
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.
- Use tab or shift+tab to navigate among pages.
Pagination exports layout unit components and hooks using which you can create a custom implementation.
- BasePagination
- PageItem
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.
-
Total number of available pages.
type | required | default |
---|---|---|
number | true | N/A |
Current page number.
type | required | default |
---|---|---|
number | false | 1 |
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 |
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" |
Function to generate props such as "href", "id", data-attributes etc. for page tiles.
type | required | default |
---|---|---|
func | false | N/A |
Render a link.
type | required | default |
---|---|---|
bool | false | true |
Toggle visibility for next and previous stepper.
type | required | default |
---|---|---|
bool | false | true |
Function to generate props such as "href", "id", data-attributes etc. for the previous stepper element.
type | required | default |
---|---|---|
func | false | N/A |
Function to generate props such as "href", "id", data-attributes etc. for the next stepper element.
type | required | default |
---|---|---|
func | false | N/A |
Toggle visibility for left and right edge stepper.
type | required | default |
---|---|---|
bool | false | true |
Function to generate props such as "href", "id", data-attributes etc. for the left edge stepper element.
type | required | default |
---|---|---|
func | false | N/A |
Function to generate props such as "href", "id", data-attributes etc. for the right edge stepper element.
type | required | default |
---|---|---|
func | false | N/A |
Variant to show current active tile, stepper and edge stepper.
type | required | default |
---|---|---|
bool | false | false |
Variant to show 3 page tiles, stepper and edge stepper.
type | required | default |
---|---|---|
bool | false | false |
Variant to show 5 page tiles, stepper and edge stepper.
type | required | default |
---|---|---|
bool | false | false |
aria-label for next stepper.
type | required | default |
---|---|---|
string | false | "go to next page" |
aria-label for previous stepper.
type | required | default |
---|---|---|
string | false | "go to previous page" |
aria-label for left edge stepper.
type | required | default |
---|---|---|
string | false | "go to first page" |
aria-label for right edge stepper.
type | required | default |
---|---|---|
string | false | "go to last page" |
Set number of records visible on each page.
Array of numbers representing PerPage indices.
type | required | default |
---|---|---|
arrayOf | false | [10, 25, 50, 100] |
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" |
Number of records per page
type | required | default |
---|---|---|
number | false | 10 |
Function to generate props such as "href", "id" for the custom link element passed in as
prop.
type | required | default |
---|---|---|
func | false | N/A |
Function to be called when per page value changes
onChange receives an object with the following signature
- event - click event
- records - number of records to show per page
({event, record}) => void
type | required | default |
---|---|---|
func | false | N/A |
Render a link
type | required | default |
---|---|---|
bool | false | true |
The base container unit component.
Container for the BasePagination content.
type | required | default |
---|---|---|
node | false | N/A |
Adds gap between child elements
type | required | default |
---|---|---|
bool | false | true |
Renders the list element for page tiles.
Content for a page list item.
type | required | default |
---|---|---|
node | true | N/A |