react-studio-paginator

A react paginator component that displays a list of items in a numbered page

Props

|Name|Type|Descriptions| |-----|------|---| |customElement|(index:number)=> React.ReactNode|This is a method that will be called to retrieve a single item of the paginator.| |elementsPerView?|number|The number of elements to be shown in one page| |totalElements|number|Total number of elements to be shown in different pages| |defaultPageIdx?|number|This can be set if you need to start the page from a different index| |showPaginatorControls?|boolean|True if it should show the controls and the page numbers| |className?|string|Parent element class name| |previousButton?|React.ReactNode|Component for the previous button| |nextButton?|React.ReactNode|Component for the next button| pageStatusComponent?|(currentPage:number, totalPages:number) =>React.ReactNode|This is a function to show the current page status|

Default Props

|Name|Default| |---|---| |className|""| |showPaginatorControls|true| |elementsPerView|10| |previousButton|<button>Previous</button>| |nextButton|<button>Next</button>| |pageStatusComponent|(e,i)=> `${e} of ${i}`}|

Installation

$ npm install --save react-studio-paginator

Usage

import {Paginator} from "react-studio-paginator";

Simple Example

<Paginator 
    totalElements={data.length}
    customElement={(idx)=>{
        let item = data[idx];
        return <div>{item.label}</div>
    }}
/>

Other Links

More details on how to use this component can be found in this article