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:

``shell
npm install --save react-next-paging
`

or if you use yarn:

`shell
yarn add react-next-paging
`

The UMD build is also available on unpkg:

`html

`

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.

Usage

`jsx
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 (
itemsperpage={itemsperpage}
nocolumns={nocolumns}
items={items}
pagesspan={pagesspan}
>
{({
getBackButtonProps,
getFastBackButtonProps,
getFwdButtonProps,
getFastFwdButtonProps,
getSelPageButtonProps,
nopages,
inipagearray,
pagesforarray,
currentpage,
noitems,
initialitem,
lastitem,
goBackBdisabled,
goFastBackBdisabled,
goFwdBdisabled,
goFastFwdBdisabled
}) => (

{items.slice(initialitem, lastitem).map((item, index) => {
return item;
})}
{noitems > 0
? [


style={buttonStyles}
{...getFastBackButtonProps()}
disabled={goFastBackBdisabled}
>
{"<<"}

style={buttonStyles}
{...getBackButtonProps()}
disabled={goBackBdisabled}
>
{"<"}

{Array.from(
{ length: pagesforarray },
(v, i) => i + inipagearray
).map(page => {
return (
key={page}
{...getSelPageButtonProps({ page: page })}
disabled={currentpage == page}
>
{page}

);
})}
style={buttonStyles}
{...getFwdButtonProps()}
disabled={goFwdBdisabled}
>
{">"}

style={buttonStyles}
{...getFastFwdButtonProps()}
disabled={goFastFwdBdisabled}
>
{">>"}



]
: null}

)}

);
};

export default PaginacionTabla;
`

and in the main app file

`jsx
import React, { Component } from "react";
import PaginacionTabla from "PaginacionTabla/PaginacionTabla";
.
.
.











itemsperpage={this.state.itemsperpage}
nocolumns={this.state.nocolumns}
items={filas}
pagesspan={4}
/>


Id. pedido	Agregado	Despacho	Cliente


`

Props

$3

> number | defaults to 10

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

$3

> number

Pass a number which represents the number of columns for the colSpan
property.

$3

> number | defaults to 10

Pass a number which represents the pages span.

$3

> any | defaults to []`

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

License

_react-next-paging_ is available under the MIT License.