lw-react-table
v1.2.10
Published
light weight table constructor for react
Downloads
6
Readme
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']
}
}