rc-table
React table component.
install
Development
npm install
npm start
Example
http://react-component.github.io/table/examples/
Usage
; const columns = title: '表头1' dataIndex: 'a' key:'a' width: 100 title: '表头2' dataIndex: 'b' key:'b' width: 100 title: '表头3' dataIndex: 'c' key:'c' width: 200 title: '操作' dataIndex: '' key:'d' <a href="#">操作</a>; const data = a: '123' b: '123' c: '123' key:'1' a: '123' b: '123' c: '123' key:'2' a: '123' b: '123' c: '123' key:'3' ; React;
API
Properties
name | type | default | description |
---|---|---|---|
prefixCls | String | rc-table | |
className | className | 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):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 |
title | Function(currentData) | table title render function | |
footer | Function(currentData) | table footer render function | |
getBodyWrapper | Function(body) | get wrapper of tbody, demoe | |
columns | TableColumns<Object> |
TableColumns
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 | |
fixed | String|Boolean | this column will be fixed when table scroll horizontally: true or 'left' or 'right' | |
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 | |
columns | TableColumns | define multiple table header |
License
table-v7 is released under the MIT license.