React table component.
npm install
npm start
http://react-component.github.io/table/examples/
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);| Name | Type | Default | Description |
|---|---|---|---|
| prefixCls | String | rc-table | |
| className | String | additional className | |
| id | String | identifier of the container div | |
| 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 | string or Function(record):string | 'key' | 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. |
| rowClassName | string or Function(record, index, indent):string | get row's className | |
| rowRef | Function(record, index, indent):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, indent):string | get expanded row's className | |
| expandedRowRender | Function(recode, index, indent, expanded):ReactNode | Content render to expanded row | |
| 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[deprecated] | Function(record, index) | handle rowClick action, index means the index of current row among fatherElement[childrenColumnName] | |
| onRowDoubleClick[deprecated] | Function(record, index) | handle rowDoubleClick action, index means the index of current row among fatherElement[childrenColumnName] | |
| onRowMouseEnter[deprecated] | Function(record, index) | handle onRowMouseEnter action, index means the index of current row among fatherElement[childrenColumnName] | |
| onRowMouseLeave[deprecated] | Function(record, index) | handle onRowMouseLeave action, index means the index of current row among fatherElement[childrenColumnName] | |
| onRow | Function(record, index) | Set custom props per each row. | |
| onHeaderRow | Function(record, index) | Set custom props per each header row. | |
| showHeader | Boolean | true | whether table head is shown |
| title | Function(currentData) | table title render function | |
| footer | Function(currentData) | table footer render function | |
| getBodyWrapper[deprecated] | Function(body) | get wrapper of tbody, [demo](http://react-component.github.io/table/examples/animation.html) | |
| emptyText | React.Node or Function | `No Data` | Display text when data is empty |
| columns | Object[] | The columns config of table, see table below | |
| components | Object | Override table elements, see [#171](react-component#171) for more details |
| Name | Type | Default | Description |
|---|---|---|---|
| key | String | key of this column | |
| className | String | className of this column | |
| colSpan | Number | thead colSpan of this column | |
| title | React Node | title of this column | |
| dataIndex | String | display field of the data record | |
| width | String|Number | width of the specific proportion calculation according to the width of the columns | |
| fixed | String|Boolean | this column will be fixed when table scroll horizontally: true or 'left' or 'right' | |
| align | String | specify how content is aligned | |
| onCell | Function(record) | Set custom props per each cell. | |
| onHeaderCell | Function(record) | Set custom props per each header cell. | |
| render | Function(value, row, index) | 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 | |
| onCellClick[deprecated] | Function(row, event) | Called when column's cell is clicked |
rc-table is released under the MIT license.