Package Exports
- rc-table
- rc-table/assets/index.css
- rc-table/lib/Table
- rc-table/lib/TableRow
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 | |||||||||||||||||||||||||||||
indentSize | Number | 15 | indentSize for every level of data.i.children, better using with column.width specified | ||||||||||||||||||||||||||||
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.