https://github.com/jciccio/react-js-paginator
Simple React JS Pagination component. Can be easily customized with CSS objects
https://github.com/jciccio/react-js-paginator
paginate paginated-tables pagination paginator reactjs
Last synced: 6 months ago
JSON representation
Simple React JS Pagination component. Can be easily customized with CSS objects
- Host: GitHub
- URL: https://github.com/jciccio/react-js-paginator
- Owner: jciccio
- Created: 2018-08-20T03:29:02.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-04-29T04:44:46.000Z (over 2 years ago)
- Last Synced: 2025-04-14T02:13:00.067Z (6 months ago)
- Topics: paginate, paginated-tables, pagination, paginator, reactjs
- Language: JavaScript
- Homepage:
- Size: 1.35 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-js-paginator
Simple react JS paginator
# Description
Simple React JS Pagination component. Can be easily customized with CSS objects
# How it looks
**How to thank me?**
Just click on ⭐️ button :)
# Installation
Install it from npm and include it in your React build process (using Webpack, Browserify, etc).
```
npm i react-js-paginator
```
# Usage
It is really easy to use, just:
Import `Paginator` in your react component.
```javascript
import Paginator from 'react-js-paginator';
```
And then specify the page size, total elements and a callback function.
For example:
```javascript
{this.pageChange(e)}}
/>
```
Once the page has changed, will trigger the callback function and send back the current page.
Styles can be customized using `pageBoxStyle` and `activePageBoxStyle` props like:
```javascript
pageBoxStyle={{
border: 0,
color: 'black',
padding: 3,
fontSize: 16
}}
```
```javascript
activePageBoxStyle={{
fontWeight: 'bolder',
color: 'green',
backgroundColor: '#d7f7dc'
}}
```
Giving you as result:
# Props
| Name | Type | Mandatory | Description
| ------------- |:-------------:| -----:|:-----|
| pageSize | int | Y |How many elements will compose a page |
| totalElements | int | Y | Total elements you have in store |
| onPageChangeCallback | function | Y| function to be triggered when a page change happens |
| pageBoxStyle | object | N| style object for each pagination box |
| activePageBoxStyle | object | N| style object the active page |
| maxPagesToDisplay | int | N| how many pages will be displayed at the same time in the paginator (default 6)|
|firstArrowAlwaysVisible|present|N|showAlways the first page arrow|
|lastArrowAlwaysVisible|present|N|showAlways the first page arrow|
|firstArrowSymbol|string|N|customize first page symbol (default <<)|
|lastArrowSymbol|string|N|customize last page symbol (default >>)|
# What's new
### 0.2.0
* Dependencies updated
* Overall package size optimized
### 0.1.10
* Dependencies updated
### 0.1.9
* Proptypes added
### 0.1.8
* Background updated to be transparent
### 0.1.7
* CSS updated to be isolated under `paginator` class
### 0.1.5
* Typecheck added, minor tweaking and styling changes
### 0.1.3
* Bug fixing: last page was not always being showed.
### 0.1.1
* Fixed issue where maxPagesToDisplay was showing one more page than the prop number
### 0.1.0
* New default style (less ugly)
* Style customization properties enhanced
### 0.0.8
* Added props to force first and last arrows
* Added props to customize first and last symbols
### 0.0.6
* Added functionality to hide arrows if first page or last page is visible
# License
Licensed under the MIT License © [jciccio](https://www.npmjs.com/~jciccio)