ahgz7/table

React Table

rc-table

React table component.

install

Development

npm install
npm start

Example

http://react-component.github.io/table/examples/

Usage

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: 'Apeartions', dataIndex: '', key:'opeartions', 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

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):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	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, [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

Column Props

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'
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	Function(row, event)		Called when column's cell is clicked

License

rc-table is released under the MIT license.