@bazhe/paginator NPM

@bazhe/paginator

@bazhe/paginator provides utilities for handling your pagination. Used in: @bazhe/use-pagination, @bazhe/with-pagination, @bazhe/pagination-wrapper

Playground/Demo: https://blagoj5.github.io/pagination/#playground
Full documentation: https://blagoj5.github.io/pagination

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'; // The paginator class itself, provides with a lot of methods for building your pagination object
import { generatePaginator } from '@bazhe/paginator'; // Implements Paginator class and creates the paginator object. generatePaginator is an initializer for the Paginator class (in case you don't want to use it manually)

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

generatePaginator(paginationOptions):

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	\(total_results: number, current_page?: number, items?: T[]) => PaginationResult	The main method 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

Pagination Result/Return

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 - itemsfirst_result (depends on link and limit)
last_result	number	Last result is the index of the item that's last for the current page - itemslast_result (depends on link and limit)
limit	number	The limit of items per page