1.1.1 • Published 3 years ago
reactjs-table-component v1.1.1
reactjs-table-component
Table component for react js to quick render data objects in table grid
Install
npm install --save reactjs-table-componentDemo
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