custom-app
Version:
ITIMS��Ʒ�鿪��ר��React���,�Dz��ý��ּ�dhcc-app���������
366 lines (344 loc) • 9.88 kB
Markdown
# rc-table
React table component.
[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][codecov-image]][codecov-url]
[![gemnasium deps][gemnasium-image]][gemnasium-url]
[![npm download][download-image]][download-url]
[npm-image]: http://img.shields.io/npm/v/rc-table.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-table
[travis-image]: https://img.shields.io/travis/react-component/table.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/table
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/table/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/react-component/table/branch/master
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/table.svg?style=flat-square
[gemnasium-url]: https://gemnasium.com/react-component/table
[download-image]: https://img.shields.io/npm/dm/rc-table.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-table
## install
[](https://npmjs.org/package/rc-table)
## Development
```
npm install
npm start
```
## Example
http://react-component.github.io/table/examples/
## Usage
```js
import Table from 'rc-table';
const columns = [{
title: 'Name', dataIndex: 'name', key:'name', width: 100,
}, {
title: 'Age', dataIndex: 'age', key:'age', width: 100,
}, {
title: 'Address', dataIndex: 'address', key:'address', width: 200,
}, {
title: 'Operations', dataIndex: '', key:'operations', render: () => <a href="#">Delete</a>,
}];
const data = [
{ name: 'Jack', age: 28, address: 'some where', key:'1' },
{ name: 'Rose', age: 36, address: 'some where', key:'2' },
];
React.render(<Table columns={columns} data={data} />, mountNode);
```
## API
### Properties
<table class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>prefixCls</td>
<td>String</td>
<td>rc-table</td>
<td></td>
</tr>
<tr>
<td>className</td>
<td>String</td>
<td></td>
<td>additional className</td>
</tr>
<tr>
<td>id</td>
<td>String</td>
<td></td>
<td>identifier of the container div</td>
</tr>
<tr>
<td>useFixedHeader</td>
<td>Boolean</td>
<td>false</td>
<td>whether use separator table for header. better set width for columns</td>
</tr>
<tr>
<td>scroll</td>
<td>Object</td>
<td>{x: false, y: false}</td>
<td>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</td>
</tr>
<tr>
<td>expandIconAsCell</td>
<td>Boolean</td>
<td>false</td>
<td>whether render expandIcon as a cell</td>
</tr>
<tr>
<td>expandIconColumnIndex</td>
<td>Number</td>
<td>0</td>
<td>The index of expandIcon which column will be inserted when expandIconAsCell is false</td>
</tr>
<tr>
<td>rowKey</td>
<td>string or Function(record):string</td>
<td>'key'</td>
<td>
If rowKey is string, `record[rowKey]` will be used as key.
If rowKey is function, the return value of `rowKey(record)` will be use as key.
</td>
</tr>
<tr>
<td>rowClassName</td>
<td>string or Function(record, index, indent):string</td>
<td></td>
<td>get row's className</td>
</tr>
<tr>
<td>rowRef</td>
<td>Function(record, index, indent):string</td>
<td></td>
<td>get row's ref key</td>
</tr>
<tr>
<td>defaultExpandedRowKeys</td>
<td>String[]</td>
<td>[]</td>
<td>initial expanded rows keys</td>
</tr>
<tr>
<td>expandedRowKeys</td>
<td>String[]</td>
<td></td>
<td>current expanded rows keys</td>
</tr>
<tr>
<td>defaultExpandAllRows</td>
<td>Boolean</td>
<td>false</td>
<td>Expand All Rows initially</td>
</tr>
<tr>
<td>onExpandedRowsChange</td>
<td>Function(expandedRows)</td>
<td>save the expanded rows in the internal state</td>
<td>function to call when the expanded rows change</td>
</tr>
<tr>
<td>onExpand</td>
<td>Function(expanded, record)</td>
<td></td>
<td>function to call when click expand icon</td>
</tr>
<tr>
<td>expandedRowClassName</td>
<td>Function(recode, index, indent):string</td>
<td></td>
<td>get expanded row's className</td>
</tr>
<tr>
<td>expandedRowRender</td>
<td>Function(recode, index, indent, expanded):ReactNode</td>
<td></td>
<td>Content render to expanded row</td>
</tr>
<tr>
<td>data</td>
<td>Object[]</td>
<td></td>
<td>data record array to be rendered</td>
</tr>
<tr>
<td>indentSize</td>
<td>Number</td>
<td>15</td>
<td>indentSize for every level of data.i.children, better using with column.width specified</td>
</tr>
<tr>
<td>onRowClick[deprecated]</td>
<td>Function(record, index)</td>
<td></td>
<td>handle rowClick action, index means the index of current row among fatherElement[childrenColumnName]</td>
</tr>
<tr>
<td>onRowDoubleClick[deprecated]</td>
<td>Function(record, index)</td>
<td></td>
<td>handle rowDoubleClick action, index means the index of current row among fatherElement[childrenColumnName]</td>
</tr>
<tr>
<td>onRowMouseEnter[deprecated]</td>
<td>Function(record, index)</td>
<td></td>
<td>handle onRowMouseEnter action, index means the index of current row among fatherElement[childrenColumnName]</td>
</tr>
<tr>
<td>onRowMouseLeave[deprecated]</td>
<td>Function(record, index)</td>
<td></td>
<td>handle onRowMouseLeave action, index means the index of current row among fatherElement[childrenColumnName]</td>
</tr>
<tr>
<td>onRow</td>
<td>Function(record, index)</td>
<td></td>
<td>Set custom props per each row.</td>
</tr>
<tr>
<td>onHeaderRow</td>
<td>Function(record, index)</td>
<td></td>
<td>Set custom props per each header row.</td>
</tr>
<tr>
<td>showHeader</td>
<td>Boolean</td>
<td>true</td>
<td>whether table head is shown</td>
</tr>
<tr>
<td>title</td>
<td>Function(currentData)</td>
<td></td>
<td>table title render function</td>
</tr>
<tr>
<td>footer</td>
<td>Function(currentData)</td>
<td></td>
<td>table footer render function</td>
</tr>
<tr>
<td>getBodyWrapper[deprecated]</td>
<td>Function(body)</td>
<td></td>
<td>get wrapper of tbody, [demo](http://react-component.github.io/table/examples/animation.html)</td>
</tr>
<tr>
<td>emptyText</td>
<td>React.Node or Function</td>
<td>`No Data`</td>
<td>Display text when data is empty</td>
</tr>
<tr>
<td>columns</td>
<td>Object[]<Object></td>
<td></td>
<td>
The columns config of table, see table below
</td>
</tr>
<tr>
<td>components</td>
<td>Object</td>
<td></td>
<td>
Override table elements, see [#171](https://github.com/react-component/table/pull/171) for more details
</td>
</tr>
</tbody>
</table>
## Column Props
<table>
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>key</td>
<td>String</td>
<td></td>
<td>key of this column</td>
</tr>
<tr>
<td>className</td>
<td>String</td>
<td></td>
<td>className of this column</td>
</tr>
<tr>
<td>colSpan</td>
<td>Number</td>
<td></td>
<td>thead colSpan of this column</td>
</tr>
<tr>
<td>title</td>
<td>React Node</td>
<td></td>
<td>title of this column</td>
</tr>
<tr>
<td>dataIndex</td>
<td>String</td>
<td></td>
<td>display field of the data record</td>
</tr>
<tr>
<td>width</td>
<td>String|Number</td>
<td></td>
<td>width of the specific proportion calculation according to the width of the columns</td>
</tr>
<tr>
<td>fixed</td>
<td>String|Boolean</td>
<td></td>
<td>this column will be fixed when table scroll horizontally: true or 'left' or 'right'</td>
</tr>
<tr>
<td>align</td>
<td>String</td>
<td></td>
<td>specify how content is aligned</td>
</tr>
<tr>
<td>onCell</td>
<td>Function(record, index)</td>
<td></td>
<td>Set custom props per each cell.</td>
</tr>
<tr>
<td>onHeaderCell</td>
<td>Function(record)</td>
<td></td>
<td>Set custom props per each header cell.</td>
</tr>
<tr>
<td>render</td>
<td>Function(value, row, index)</td>
<td></td>
<td>The render function of cell, has three params: the text of this cell, the record of this row, the index of this row, it's return an object:{ children: value, props: { colSpan: 1, rowSpan:1 } } ==> 'children' is the text of this cell, props is some setting of this cell, eg: 'colspan' set td colspan, 'rowspan' set td rowspan</td>
</tr>
<tr>
<td>onCellClick[deprecated]</td>
<td>Function(row, event)</td>
<td></td>
<td>Called when column's cell is clicked</td>
</tr>
</tbody>
</table>
## License
rc-table is released under the MIT license.