Installation
yarn add @bytesoftio/helpers-pagination
or npm install @bytesoftio/helpers-pagination
Table of contents
Description
Collection of helpers related to pagination.
Calculate total amount of pages, visible pages, more / less indicators and so on, based on the current page, total
items, page size, etc.
This helper can be used to build paginations like:
< << ... 6 7 8 [9] 10 11 12 ... >> >
< << 7 8 [9] 10 11 >> >
< ... 7 8 [9] 10 11 ... >
< [9] >
[ v Select page ]
Usage example:
import { createPagination } from "@bytesoftio/helpers-pagination"
const currentPage = 7
const totalItems = 1337
const pageSize = 20
const surroundBy = 2
const pagination = createPagination({ currentPage, totalItems, pageSize, surroundBy })
With the calculated information below you can build almost every possible kind of pagination you can
think of.
{
currentPage: 7,
firstPage: 1,
lastPage: 67,
firstVisiblePage: 5,
lastVisiblePage: 9,
visiblePages: [ 5, 6, 7, 8, 9 ],
allPages: [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,
13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36,
37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48,
49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60,
61, 62, 63, 64, 65, 66, 67
],
hasPrevious: true,
hasNext: true,
hasLess: true,
hasMore: true,
itemsOffset: 120,
pageSize: 20,
isFirstPage: false,
isLastPage: false
}