Package Exports
- rc-table
- rc-table/assets/index.css
- rc-table/lib/Table
- rc-table/lib/TableRow
- rc-table/lib/utils
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 | ||||||||||||||||||||||||||||||||
scroll | Object | {x: false, y: false} | whether table can be scroll in x/y direction, `x` or `y` can be a number that indicated the width and height of table body | ||||||||||||||||||||||||||||||||
expandIconAsCell | Boolean | false | whether render expandIcon as a cell | ||||||||||||||||||||||||||||||||
expandIconColumnIndex | Number | 0 | The index of expandIcon which column will be inserted when expandIconAsCell is false | ||||||||||||||||||||||||||||||||
rowKey | Function(recode,index):string | record.key | default use record.key as rowKey | ||||||||||||||||||||||||||||||||
rowClassName | Function(recode,index):string | get row's className | |||||||||||||||||||||||||||||||||
rowRef | Function(record,index):string | get row's ref key | |||||||||||||||||||||||||||||||||
defaultExpandedRowKeys | String[] | [] | initial expanded rows keys | ||||||||||||||||||||||||||||||||
expandedRowKeys | String[] | current expanded rows keys | |||||||||||||||||||||||||||||||||
defaultExpandAllRows | Boolean | false | Expand All Rows initially | ||||||||||||||||||||||||||||||||
onExpandedRowsChange | Function(expandedRows) | save the expanded rows in the internal state | function to call when the expanded rows change | ||||||||||||||||||||||||||||||||
onExpand | Function(expanded, record) | function to call when click expand icon | |||||||||||||||||||||||||||||||||
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 | ||||||||||||||||||||||||||||||||
onRowClick | Function(record, index) | handle rowClick action, index means the index of current row among fatherElement[childrenColumnName] | |||||||||||||||||||||||||||||||||
columnsPageSize | Number | 5 | pageSize of columns. (Deprecated, use fixed columns) | ||||||||||||||||||||||||||||||||
columnsPageRange | Array | columns index range need paging, like [2,10]. (Deprecated, use column.fixed) | |||||||||||||||||||||||||||||||||
showHeader | Boolean | true | whether table head is shown | ||||||||||||||||||||||||||||||||
footer | Function(currentData) | table footer render function | |||||||||||||||||||||||||||||||||
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.