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.

cols[i].name

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

cols[i].title

[String] Column title.

cols[i].sortOrder

[Integer] Default column sort priority.

cols[i].sortDirection

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

cols[i].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