React Table Paginator

A powerful, simple, flexible and customizable paginator for react html tables

$3

- Paginate tables
- Customize number of elements per page
- Auto pagination detection
- Highly customizable (see list of class names below)
- Icon customization (uses Font Awesome)
- Super simple implementation (get started quickly)
- Responsive
- Mobile friendly

$3

- Code Sandbox playground

$3

Customize it yourself:

- Codesandbox:

$3

npm i react-atomics-paginator

$3

``javascript
import React from 'react';
import PaginatorTable from 'react-atomics-paginator'

export default function MyTable() {

options={[5,7,11]}
items={products}
headers={['SKU','Product','Price','Stock','Rating']}
title="Products"
btnColor="#5628ee"
iconColor="#fff"
activeBtnColor="#f1f1f1"
activeIconColor="#333"
/>

const products = [
{
sku: 2440,
name: 'Winter Coat',
price: 500,
stock: 'In Stock',
rating: 4
},
{
sku: 2441,
name: 'Hat',
price: 100,
stock: 'In Stock',
rating: 4
},
{
sku: 2442,
name: 'Summer Jacket',
price: 300,
stock: 'Out Stock',
rating: 5
},
{
sku: 2443,
name: 'Jeans',
price: 600,
stock: 'Out Stock',
rating: 4
},
{
sku: 2444,
name: 'Pants',
price: 700,
stock: 'In Stock',
rating: 3
},
{
sku: 2445,
name: 'Shoes',
price: 340,
stock: 'In Stock',
rating: 2
},
//...more objects here...
]

})

`

$3

- options: Array of numbers that will give the option to display # of elements by that given number
(Add 'all' as last element to provide the option to display all elements on one page.)

- items: Array of elements in the table (see example code)
- headers: Array of table titles that will go inside th html tags
- title: String that will be displayed as the title of the table
- btnColor: String of table buttons colors (for more specificity, use class names provided below)
- iconColor: String of table icon colors
- activeBtnColor: String that targets the active pagination button background color
- activeIconColor: String that targets the active pagination icon color
- backicon: String of Font Awesome icon
- fastbackicon: String of Font Awesome icon
- forwardicon: String of Font Awesome icon
- fastforwardicon: String of Font Awesome icon
- fastbtns: Boolean to display the fast forward and fast backwards buttons
- textbtns: Boolean to display text buttons instead of icon buttons
- fastbacktext: String for the last back text
- backtext: String for the single back text
- forwardtext: String for the single forward text
- fastforwardtext: String for fast forward text
- footTitle: String for text of the footer title (default is "Show")
- footSubTitle: String for the footer subtitle (Default is "per page")

$3

$3

The contributing guide contains details on how to create pull requests and setup your dev environment.

=======================

License

MIT Standard License

`

``