react-next-paging
Pagination react component
Installation
This module is distributed via npm which is bundled
with node and should be installed as one of your project's
dependencies
:
npm install --save react-next-paging
or if you use yarn
:
yarn add react-next-paging
The UMD build is also available on unpkg:
You can find the library on window.ReactNextPaging
.
This package also depends on
react
andprop-types
. Please make sure you have those installed as well.
Usage
import React from "react";import ReactNextPaging from "react-next-paging"; const buttonStyles = border: "1px solid #ccc" background: "#fff" fontSize: "1em" padding: 10 margin: 5 width: 70; const PaginacionTabla = itemsperpage nocolumns items pagesspan return <ReactNextPaging = = = = > getBackButtonProps getFastBackButtonProps getFwdButtonProps getFastFwdButtonProps getSelPageButtonProps nopages inipagearray pagesforarray currentpage noitems initialitem lastitem goBackBdisabled goFastBackBdisabled goFwdBdisabled goFastFwdBdisabled <tbody> items noitems > 0 ? <tr => <td = => <button = = > "<<" </button> <button = = > "<" </button> Array <button = = > ">" </button> <button = = > ">>" </button> </td> </tr> : null </tbody> </ReactNextPaging> ;; ;
and in the main app file
import React Component from "react";import PaginacionTabla from "PaginacionTabla/PaginacionTabla";<table ="table table-hover"> <thead> <tr> <th>Id pedido</th> <th>Agregado</th> <th>Despacho</th> <th>Cliente</th> <th /> </tr> </thead> <PaginacionTabla = = = = /></table>
Props
itemsperpage
number
| defaults to10
Pass a number which represents the number of items per page.
nocolumns
number
Pass a number which represents the number of columns for the <td/>
colSpan
property.
pagesspan
number
| defaults to10
Pass a number which represents the pages span.
items
any
| defaults to[]
Pass an array of table row items that should be rendered.
License
react-next-paging is available under the MIT License.