https://github.com/titanve/react-next-paging
Pagination react component
https://github.com/titanve/react-next-paging
javascript paging react reactjs render-props
Last synced: about 1 year ago
JSON representation
Pagination react component
- Host: GitHub
- URL: https://github.com/titanve/react-next-paging
- Owner: titanve
- Created: 2017-10-16T01:50:41.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-28T15:23:38.000Z (almost 2 years ago)
- Last Synced: 2025-03-26T06:22:36.084Z (about 1 year ago)
- Topics: javascript, paging, react, reactjs, render-props
- Language: JavaScript
- Size: 906 KB
- Stars: 9
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
react-next-paging
Pagination react component
[](https://npmcharts.com/compare/react-next-paging?minimal=true)
[](https://npmcharts.com/compare/react-next-paging?minimal=true)
[](http://badge.fury.io/js/react-next-paging)
[](https://travis-ci.org/titanve/react-next-paging)
[](http://makeapullrequest.com)
## Installation
This module is distributed via [npm](https://www.npmjs.com) which is bundled
with [node](https://nodejs.org) 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](https://unpkg.com):
```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 (
{({
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
? [
{"<<"}
{"<"}
{Array.from(
{ length: pagesforarray },
(v, i) => i + inipagearray
).map(page => {
return (
{page}
);
})}
{">"}
{">>"}
]
: null}
)}
);
};
export default PaginacionTabla;
```
and in the main app file
```jsx
import React, { Component } from "react";
import PaginacionTabla from "PaginacionTabla/PaginacionTabla";
.
.
.
Id. pedido
Agregado
Despacho
Cliente
```
## Props
### itemsperpage
> `number` | defaults to `10`
Pass a number which represents the number of items per page.
### nocolumns
> `number`
Pass a number which represents the number of columns for the `` `colSpan`
property.
### pagesspan
> `number` | defaults to `10`
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.