rc-table @3.2.0
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', key:'a',width: 100},
{id: '123', title: '表头2', dataIndex: 'b', key:'b', width: 100},
{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 | |||||||||||||||||||||||||||||
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 | |||||||||||||||||||||||||||||
expandedRowClassName | Function(recode,index):string | get expanded row's className | |||||||||||||||||||||||||||||
data | Array | data record array to be rendered | |||||||||||||||||||||||||||||
columns | Array |
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.