@bazhe/paginator
@bazhe/paginator provides utilities for handling your pagination. Used in: @bazhe/use-pagination, @bazhe/with-pagination, @bazhe/with-wrapper
Getting Started
These instructions will get you started on using paginator utilities
Installing
npm
npm install @bazhe/paginator
yarn
yarn add @bazhe/paginator
Usage
Typescript usage example in: https://github.com/Blagoj5/pagination/blob/main/example/components/paginator-demo.tsx
Import
import { Paginator } from '@bazhe/paginator';
import { generatePaginator } from '@bazhe/paginator';
Initialization
generatePaginator accepts paginationOptions as argument
export const Paginator: React.FC = () => {
return (
<div
style={{
padding: '1rem',
boxShadow: '2px 2px 7px 0 gray',
width: '30%',
background: 'white',
}}
>
<h3>Generate paginator</h3>
<pre>
{JSON.stringify(
generatePaginator({ items: [], currentPage: 1 }),
null,
2
)}
</pre>
</div>
);
};
API
API for:
- generatePaginator(paginationOptions)
- new Paginator(perPage, links)
Parameters
Pagination Options
Name | Type | Default | Description |
---|
items | T[] | undefined | [] | Initial items for the pagination |
limit | number | undefined | 4 | The limit of items per page |
currentPage | number | undefined | 1 | The current page |
links | number | undefined | 10 | Links is the number of pages/links/buttons to display. Example: How many buttons you want to show in the pagination bar? |
totalResults | number | undefined | items.length | Total results is the maximum number of items. Usually refers to items.length (so there's no need to pass it) |
Paginator
Name | Type | Description |
---|
constructor(perPage: number, links: number) | | The constructor that creates paginator object. Example: new Paginator(4, 10) |
build | <T>(total_results: number, current_page?: number, items?: T[]) => PaginationResult | The main methods that returns the fully expected pagination result |
getFirstPage | (currentPage: number) => number | Gets first page, depending on the number of links (ex. buttons displayed in the pagination bar) |
getLastPage | (currentPage: number) => number | Gets last page, depending on the number of links (ex. buttons displayed in the pagination bar) |
getFirstResult | (currentPage: number) => number | Gets first result/index, depending on the limit/perPage and current page |
getLastResult | (currentPage: number) => number | Gets last result/index, depending on the limit/perPage and current page |
The result from generatePaginator or Paginator.build:
Name | Type | Description |
---|
items | T[] | undefined | The items that will change depending on the pagination (currentPage, limit ...) |
all_items | T[] | undefined | Initial/All items for the pagination |
total_pages | number | undefined | The total pages for the provided items. Example: 12 items with limit 2 -> 6 total pages |
pages | number | The number of pages between range(first_page, last_page) |
current_page | number | Current page |
first_page | number | First page, depends on the link (buttons/links to display in the pagination bar) and limit (items per page) |
last_page | number | Last page, depends on the link (buttons/links to display in the pagination bar) and limit (items per page) |
previous_page | number | Previous page, current_page - 1 |
next_page | number | Next page, current_page + 1 |
has_previous_page | boolean | |
has_next_page | boolean | |
total_results | number | The length of the initial items |
results | number | Results per page |
first_result | number | First result is the index of the item that's first for the current page - items[first_result] (depends on link and limit) |
last_result | number | Last result is the index of the item that's last for the current page - items[last_result] (depends on link and limit) |
limit | number | The limit of items per page |
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Authors
Security
This project doesn’t have any security concerns.
License
This project is licensed under the MIT License - see the LICENSE.md file for details