reactjs-table-component

reactjs-table-component

Table component for react js to quick render data objects in table grid

Install

npm install --save reactjs-table-component

Demo

Click for 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