README
reactjs-table-component
Table component for react js to quick render data objects in table grid
Install
npm install --save reactjs-table-component
Demo
Usage
import React, { Component } from 'react'
import Table from 'reactjs-table-component'
import 'reactjs-table-component/dist/index.css'
class Example extends Component {
render() {
return <Table />
}
}
API
Name | Type | Default | Description |
---|---|---|---|
data | Array Array of objects | Placeholder sample data | Actual data to render in grid [{id:1,name:'ABC'},{id:2,name:'XYZ'}] |
columns | Array or Array of Objects | [] keys of data object will be uses if null |
Columns to render in table (key should match data object keys) . Key Array ['id','name'] OR Object array for advanced control over table display properties [{key:'id',label:'Item ID',width: "40", align: "center" },{key:'name',width: "200"},{key:'Amount',width: "100", align:'right}] Object Keys: align:left,center,right [Default:left] width: Integer (Width of column) |
tableClass | String | table | CSS class name/names separated by space |
caption | String | - | Table caption |
cellClass | String | - | Table cell css class <td class="cellClass"> |
children | DOM Object | - | Table body DOM object. Pass customized table body to render with custom layout <tr><td>value</td><td>Name<br/>Username</td><td><NewComponent/></td><td><button onClick={(e)=>someFunction(e)}></button></td></tr> |
renderChildren | Boolean | false | Render children DOM |
renderBody | Boolean | true | Render default data grid body |
noHeader | Boolean | true | Show/Hide table header |
headerCellCallback | Function | - | Callback function to handle header cell click function(event){ // callback method } |
cellCallback | Function | - | Callback function to handle table body cell click function(event){ // callback method } |
License
MIT © ktmcodelabs