rc-table @3.6.3
rc-table
react table component
install
Development
npm install
npm start
Example
http://localhost:8000/examples/
online example: http://react-component.github.io/table/examples/
Usage
var React = require('react');
var Table = require('rc-table');
require('rc-table/assets/index.css');
var columns = [
{title: '表头1', dataIndex: 'a', colSpan: 2,key:'a',width: 100},
{id: '123', title: '表头2', dataIndex: 'b', colSpan: 0,key:'b', width: 100, render: function(o, row, index){
let obj ={
children:o,
props:{}
}
if(index === 0){
obj.props.rowSpan = 2;
}
if(index === 1){
obj.props.rowSpan = 0;
}
return obj;
}},
{title: '表头3', dataIndex: 'c', key:'c',width: 200},
{
title: '操作', dataIndex: '', key:'d',render: function () {
return <a href="#">操作</a>
}
}
];
var data = [{a: '123',key:'1'}, {a: 'cdd', b: 'edd',key:'2'}, {a: '1333', c: 'eee', d: 2,key:'3'}];
var table = React.render(
<div>
<h2>simple table</h2>
<Table columns={columns}
data={data}
className="table"/>
</div>,
document.getElementById('__react-content')
);
API
property
name | type | default | description | ||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
prefixCls | String | rc-table | |||||||||||||||||||||||||||||
className | String | additional className | |||||||||||||||||||||||||||||
colSpan | Number | thead colSpan of this column | |||||||||||||||||||||||||||||
useFixedHeader | Boolean | false | whether use separator table for header. better set width for columns | ||||||||||||||||||||||||||||
expandIconAsCell | Boolean | false | whether render expandIcon as a cell | ||||||||||||||||||||||||||||
rowKey | Function(recode,index):string | record.key | default use record.key as rowKey | ||||||||||||||||||||||||||||
rowClassName | Function(recode,index):string | get row's className | |||||||||||||||||||||||||||||
defaultExpandedRowKeys | String[] | [] | initial expanded rows keys | ||||||||||||||||||||||||||||
expandedRowKeys | String[] | current expanded rows keys | |||||||||||||||||||||||||||||
onExpandedRowsChange | Function(expandedRows) | save the expanded rows in the internal state | function to call when the expanded rows change | ||||||||||||||||||||||||||||
expandedRowClassName | Function(recode,index):string | get expanded row's className | |||||||||||||||||||||||||||||
data | Object[] | data record array to be rendered | |||||||||||||||||||||||||||||
columns | Object[] |
The columns config of table. contains
|
Test Case
http://localhost:8000/tests/runner.html?coverage
Coverage
License
rc-table is released under the MIT license.