rc-table
React table component.
install
Development
npm install
npm start
Example
http://react-component.github.io/table/examples/
Usage
; 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: 'Apeartions' dataIndex: '' key:'opeartions' <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;
API
Properties
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 | ||||||||||||||||||||||||||||||||||||
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, index):string | 'key' | If rowKey is string, `record[rowKey]` will be used as key. If rowKey is function, the return value of `rowKey(record, index)` will be use as key. | ||||||||||||||||||||||||||||||||||||
rowClassName | 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 | |||||||||||||||||||||||||||||||||||||
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] | |||||||||||||||||||||||||||||||||||||
onRowDoubleClick | Function(record, index) | handle rowDoubleClick action, index means the index of current row among fatherElement[childrenColumnName] | |||||||||||||||||||||||||||||||||||||
showHeader | Boolean | true | whether table head is shown | ||||||||||||||||||||||||||||||||||||
title | Function(currentData) | table title render function | |||||||||||||||||||||||||||||||||||||
footer | Function(currentData) | table footer render function | |||||||||||||||||||||||||||||||||||||
getBodyWrapper | Function(body) | get wrapper of tbody, [demoe](http://react-component.github.io/table/examples/animation.html) | |||||||||||||||||||||||||||||||||||||
emptyText | React.Node | `No Data` | Display text when data is empty | ||||||||||||||||||||||||||||||||||||
columns | Object[] |
The columns config of table. contains
|
License
rc-table is released under the MIT license.