react-pagination-table

Table components for React with pagination

Install

 npm install --save react-pagination-table

Migration

After the version 2.x, the behavior of the className and paginationClassName props will be a little different. For a better way to architect your CSS, the className of the specific components will be more maintainable.

The example or the className section will be helpful to you.

Usage

The module contains two components, includes TableSimple、TablePagination

Demo

There is a data set.

const data = [
    { size: ["L", "M"], phone: 1234567, gender: "Male", age: 20, name:"Ben" },
    { size: ["L", "M", "XL"], phone: 1234567, gender: "Female", age: 22, name:"Ken" },
    { size: ["L", "S"], phone: 1234567, gender: "Female", age: 23, name:"Jay" },
    { size: ["M", "S"], phone: 1234567, gender: "Male", age: 26, name:"Chip" },
    { size: ["XL", "XS"], phone: 1234567, gender: "Male", age: 23, name:"Lee" },
    { size: ["L", "M", "S", "XS"], phone: 1234567, gender: "Female", age: 30, name:"Frank" },
    { size: ["S", "L"], phone: 1234567, gender: "Male", age: 23, name:"CoCo" },
    { size: ["L", "M", "S"], phone: 1234567, gender: "Female", age: 20, name:"Fake" },
    { size: ["XS", "L"], phone: 1234567, gender: "Male", age: 26, name:"Dump" },
    { size: ["L", "M", "S"], phone: 1234567, gender: "Female", age: 27, name:"Ocean" },
    { size: ["S", "XL"], phone: 1234567, gender: "Male", age: 20, name:"Polo" },
    { size: ["M", "XL"], phone: 1234567, gender: "Female", age: 21, name:"Queen" },
    { size: ["L", "M"], phone: 1234567, gender: "Female", age: 20, name:"Bump" },
    { size: ["L", "M", "S", "XL"], phone: 1234567, gender: "Male", age: 22, name:"Judy" },
    { size: ["XL", "M"], phone: 1234567, gender: "Female", age: 24, name:"Ryan" },
    { size: ["L", "S"], phone: 1234567, gender: "Female", age: 25, name:"Flow" },
    { size: ["S", "M"], phone: 1234567, gender: "Female", age: 31, name:"Ray" },
    { size: ["L", "M", "XS"], phone: 1234567, gender: "Male", age: 23, name:"Yen" },
    { size: ["XL", "M", "S"], phone: 1234567, gender: "Male", age: 21, name:"Gray" },
    { size: ["L", "M", "S"], phone: 1234567, gender: "Female", age: 22, name:"Tom" }
];

TableSimple

Simple table component.

import { render } from 'react-dom';
import React from 'react';
import { TableSimple } from 'react-pagination-table';

//Table header
const Header = ["Name", "Age", "Size", "Phone", "Gender" ];

const App = ({Header, data}) =>
    <div>
        <TableSimple
            title="TableSimple"
            subTitle="Sub Title"
            data={ data }
            headers={ Header }
            //Tell the component what order you wanna render.
            columns="name.age.size.phone.gender"
            arrayOption={ [["size", 'all', ', ']] }
        />
    </div>

TablePagination

Simple table with pagination.

import { render } from 'react-dom';
import React from 'react';
import { TablePagination } from 'react-pagination-table';

const Header = ["Name", "Age", "Size", "Phone", "Gender" ];

const App = ({Header, data}) =>
    <div>
        <TablePagination
            title="TablePagination"
            subTitle="Sub Title"
            headers={ Header }
            data={ data }
            columns="name.age.size.phone.gender"
            perPageItemCount={ 5 }
            totalCount={ data.length }
            arrayOption={ [["size", 'all', ' ']] }
        />
    </div>

className

The react-pagination-table(className) and pagination-status(paginationClassName) is the default className and prefix. You can pass custom name by the className and paginationClassName props.

In addition, setting the specific components to the differences styles and status by these class

{className} the wrapper of the Component

{className}__title

{className}__sub-title

{className}__header

{className}__table(the <table /> tag)

{paginationClassName} the wrapper of the Pagination

{paginationClassName}__item(the <li /> tags)

{paginationClassName}__btn(the page button)

{paginationClassName}__btn--active(the activated page button)

{paginationClassName}__btn--disable

API

TableSimple

Props	Description	Type	Default
title	the title at left	String	`empty`
subTitle	the subTitle at right	String	`empty`
data	the items you want to render	Array	isRequired
columns	the order of columns	String	isRequired
headers	table's header	Array	isRequired
arrayOption	`property`: specific which property is array. `index`: the index of the array, can be a number or all `plus`: add character between items	Array[]	`empty`
className	the TableSimple className	String	react-pagination-table

TablePagination

In addition to the above...

Props	Description	Type	Default
totalCount	the length of the items	Number	isRequired
perPageItemCount	the numbers of the items on per page	Number	isRequired
nextPageText	the text of `nextPage` button	String	下一頁
prePageText	the text of `previousPage` button	String	上一頁
paginationClassName	the pagination className	String	pagination-status
partialPageCount	the numbers of the page buttons	Number	5

Example

npm start

By default, the example is on the 8000 port after run the command above. Then you can access localhost:8000 to see the demo.

Test

npm test

Other useful component

react-pagination-status

LICENSE

MIT

TeeWallz/react-pagination-table