lw-react-table v1.2.10

lw-react-table

build table from json data.

##Install

npm install lw-react-table --save
npm install prop-types --save

Simple example

import React, {Component} from 'react';
import LWReactTable from 'lw-react-table';

class MyTable extends Component{


    render(){


        return (

            <LWReactTable
                Body={
                        [
                            {"id":17631,"amount":1000,"account":"Some account"},
                            {"id":17632,"amount":5000,"account":"my account"}
                        ]
                    }
                Head={
                    {
                        id: 'Number',
                        account: 'Account',
                        amount: 'Amount'
                    }
                }
                >

            </LWReactTable>

        );
    }
}

export default MyTable;

Example with some hooks

import React, {Component} from 'react';
import LWReactTable from 'lw-react-table';

class MyTable extends Component{


    onTableTagsRender = (children) => {
        return <table className="table table-striped margin-top-15">{children}</table>;//you could modify this code if you want
    };


    onBodyRender = (value, key, row) => {
        return <td key={key}>{value}</td>; //you could modify this code if you want
    };


    onHeadRender = (value, key) => {
        return <th key={key}>{value}</th>; //you could modify this code if you want
    };


    render(){


        return (

            <LWReactTable
                Body={
                        [
                            {"id":17631,"amount":1000,"account":"Some account"},
                            {"id":17632,"amount":5000,"account":"my account"}
                        ]
                    }
                Head={
                    {
                        id: 'Number',
                        account: 'Account',
                        amount: 'Amount'
                    }
                }
                    onTableTagsRender={this.onTableTagsRender}
                    onBodyCellRender={this.onBodyRender}
                    onHeadRender={this.onHeadRender}
                >

            </LWReactTable>

        );
    }
}

export default MyTable;

available hooks

• onHeadRender(value, key);
• onTableTagsRender(children) -used for customize table attr. Where children - rendered table between html <table></table> tags;
• onBodyCellRender(value, key, row) - execute when td tags rendering (return <td key={key}>{value}</td>);
• onRowRender = (row, key, current) (return <tr key={key}>{row}</tr>), where "current" is current element of array.

you can also add Header and Footer attributes, as a html.

Table with checkboxes example

import React, {Component} from 'react';
import LWReactTable from 'lw-react-table/checkboxes';

class MyTable extends Component{

    
    onRowChecked = (row, checked, target) => {

        console.log('row: ', row, ' checkbox state: ', checked, ' target element', target);

    };


    render(){


        return (

            <LWReactTable
                Body={
                        [
                            {"id":17631,"amount":1000,"account":"Some account"},
                            {"id":17632,"amount":5000,"account":"my account"}
                        ]
                    }
                Head={
                    {
                        id: 'Number',
                        account: 'Account',
                        amount: 'Amount'
                    }
                }
                PrimaryKey={'id'}
                onRowChecked={this.onRowChecked}
                >

            </LWReactTable>

        );
    }
}

export default MyTable;

Checkboxes is a wrapper of lw-reac-table, that added new hook - "onRowChecked" and key "PrimaryKey". !!!Hook "onRowRender" doesn't working if use checkboxes!!!

webpack

you should add jsx files support:

{
        test: /\.jsx$/,
        loader: ['babel-loader'], query: {
        presets: [
            'es2015',
            'react',
            'stage-0'
        ],
        plugins: ['transform-runtime']
    }
}