ReactJS component for easy pagination

March 04, 2019 0 Comments

ReactJS component for easy pagination



ReactJS component for easy pagination.


This module is distributed via npm which is bundled
with node and should be installed as one of your project's

npm install --save react-next-paging

or if you use yarn:

yarn add react-next-paging

The UMD build is also available on unpkg:

<script src=""></script>

You can find the library on window.ReactNextPaging.

This package also depends on react and prop-types. Please make sure you
have those installed as well.


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 itemsperpage={itemsperpage} nocolumns={nocolumns} items={items} pagesspan={pagesspan} > {({ getBackButtonProps, getFastBackButtonProps, getFwdButtonProps, getFastFwdButtonProps, getSelPageButtonProps, nopages, inipagearray, pagesforarray, currentpage, noitems, initialitem, lastitem, goBackBdisabled, goFastBackBdisabled, goFwdBdisabled, goFastFwdBdisabled }) => ( <tbody> {items.slice(initialitem, lastitem).map((item, index) => { return item; })} {noitems > 0 ? [ <tr key={"pagingrow" + 100}> <td colSpan={nocolumns} style={{ textAlign: "center" }}> <button style={buttonStyles} {...getFastBackButtonProps()} disabled={goFastBackBdisabled} > {"<<"} </button> <button style={buttonStyles} {...getBackButtonProps()} disabled={goBackBdisabled} > {"<"} </button> {Array.from( { length: pagesforarray }, (v, i) => i + inipagearray ).map(page => { return ( <button key={page} {...getSelPageButtonProps({ page: page })} disabled={currentpage == page} > {page} </button> ); })} <button style={buttonStyles} {...getFwdButtonProps()} disabled={goFwdBdisabled} > {">"} </button> <button style={buttonStyles} {...getFastFwdButtonProps()} disabled={goFastFwdBdisabled} > {">>"} </button> </td> </tr> ] : null} </tbody> )} </ReactNextPaging> );
}; export default PaginacionTabla;

and in the main app file

import React, { Component } from "react";
import PaginacionTabla from "PaginacionTabla/PaginacionTabla";
<table className="table table-hover"> <thead> <tr> <th>Id. pedido</th> <th>Agregado</th> <th>Despacho</th> <th>Cliente</th> <th /> </tr> </thead> <PaginacionTabla itemsperpage={this.state.itemsperpage} nocolumns={this.state.nocolumns} items={filas} pagesspan={4} />



number | defaults to 10

Pass a number which represents the number of items per page.



Pass a number which represents the number of columns for the <td/> colSpan


number | defaults to 10

Pass a number which represents the pages span.


any | defaults to []

Pass an array of table row items that should be rendered.


Tag cloud