react-ab-table v1.2.1

react-ab-table

React-ab-table is a react component for creating tables. It has the following features:

• Pagination
• Sorting (hold shift for multisort)
• Row selection (hold ctrl or shift to select multiple rows)
• CSV data export
• Sticky toolbar
• Easy custom styling

It is very fast and lightweight, about 600 lines of code and no devependencies.

Live example is published on github.io.

React-ab-form is a part of AB-APP:rocket: boilerplate for creating serverless apps in AWS. AB-APP includes backend logic for tables, but you can use react-ab-form just as a separate component in your own application. Have fun! :tada:

Component properties

conf

Object Contains general configuration.

conf.rowsPerPage

Integer, default = 15 Number of rows rendered per page.

conf.selectable

Boolean, default = false Whether rows can be selected or not.

conf.className

String Name of a custom class. This custom class is put on top of default table styles, so all custom styles override default. For example to make headers' text green, you should set your custom class: className = "CustomTable". Then write the following CSS in the .css file of your component, where you use react-ab-table:

.CustomForm th {
    color: green;
}

conf.csvExport

Boolean, default = false Whether table can be exported as csv-file.

conf.emptyTableMessage

String, default = 'No data specified' Message when table is empty.

cols

Array of objects Each table column is an object that describes column properties.

colsi.name

String Column name, must have corresponding data in rows objects (see below).

colsi.title

String Column title.

colsi.sortOrder

Integer Default column sort priority.

colsi.sortDirection

String, default = 'ASC', possible values: 'ASC', 'DESC' Default column sort direction.

colsi.frontendFormatter

Function | Function as a string Formatter function. If it is provided, field value is calculated on the fly while page is rendering. Formatter function is executed for eact column field of the rows that are rendered for the current page. This function receives two parameters: column and row. Function must return the value to be put in table field.

For example formatter function can be used to build links

...
frontendFormatter: (col, row) => `<a href="/something/${row.id}">${row[col.name]}</a>`;
...

rows

Array of objects Each table row is an object that holds the data of the table. Object properties must be the same as names of cols objects.

...
{ 
    name: 'Buddy', 
    class: 'Dog', 
    age: 3, 
    gender: 'male' 
},
...

Install

npm install --save react-ab-table

Usage

import React, { Component } from 'react';

import AbTable from 'react-ab-table';

export default class App extends Component {
    render() {

        const conf = {
            selectable: true
        }

        const cols = [
            { name: 'name', title: 'Pet name' },
            { name: 'class', title: 'Animal class' },
            { name: 'age', title: 'Age' },
            { name: 'gender', title: 'Gender' }
        ]

        const rows = [
            { name: 'Buddy', class: 'Dog', age: 3, gender: 'male' },
            { name: 'Molly', class: 'Cat', age: 5, gender: 'female' },
            { name: 'Bonnie', class: 'Cat', age: 2, gender: 'female' },
            { name: 'Coco', class: 'Parrot', age: 22, gender: 'male' },
            { name: 'Oscar', class: 'Dog', age: 5, gender: 'male' },
            { name: 'Max', class: 'Turtle', age: 15, gender: 'male' },
            { name: 'Jack', class: 'Varan', age: 1, gender: 'male' }
        ]

        return (
            <div
                className="TableContainer" >
                <AbTable
                    data={{ conf, cols, rows }} />
            </div>
        )
    }
}

License

MIT © gnemtsov