[feat] add onRowClick

examples/rowClick.js

@@ -0,0 +1,87 @@
+/* eslint react/no-multi-comp: 0*/
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Table = require('rc-table');
+require('rc-table/assets/index.less');
+
+const onRowClick = function(record, index) {
+  alert(`u click the nth(${index}) element of yourFather.children, record.name: ${record.name}`);
+};
+
+const onOperationClick = function(text, record) {
+  alert(`u click ${text}, record.name is ${record.name}`);
+};
+
+const columns = [{
+  title: '姓名',
+  dataIndex: 'name',
+  key: 'name',
+  width: 400,
+}, {
+  title: '年龄',
+  dataIndex: 'age',
+  key: 'age',
+  width: 100,
+  render: (text, record) => <a href="#" onClick={onOperationClick.bind(null, text, record)}>Alert: {text}, click will pop to row click</a>,
+}, {
+  title: '住址',
+  dataIndex: 'address',
+  key: 'address',
+  width: 200,
+}];
+
+const data = [{
+  key: 1,
+  name: 'a',
+  age: 32,
+  address: '我是a',
+  children: [{
+    key: 11,
+    name: 'aa',
+    age: 33,
+    address: '我是aa',
+  }, {
+    key: 12,
+    name: 'ab',
+    age: 33,
+    address: '我是ab',
+    children: [{
+      key: 121,
+      name: 'aba',
+      age: 33,
+      address: '我是aba',
+    }],
+  }, {
+    key: 13,
+    name: 'ac',
+    age: 33,
+    address: '我是ac',
+    children: [{
+      key: 131,
+      name: 'aca',
+      age: 33,
+      address: '我是aca',
+      children: [{
+        key: 1311,
+        name: 'acaa',
+        age: 33,
+        address: '我是acaa',
+      }, {
+        key: 1312,
+        name: 'acab',
+        age: 33,
+        address: '我是acab',
+      }],
+    }],
+  }],
+}, {
+  key: 2,
+  name: 'b',
+  age: 32,
+  address: '我是b',
+}];
+
+ReactDOM.render(
+  <Table columns={columns} data={data} onRowClick={onRowClick}/>,
+  document.getElementById('__react-content')
+);

src/Table.jsx

@@ -18,6 +18,7 @@ const Table = React.createClass({
     childrenColumnName: React.PropTypes.string,
     onExpandedRowsChange: React.PropTypes.func,
     indentSize: React.PropTypes.number,
+    onRowClick: React.PropTypes.func,
   },
 
   getDefaultProps() {
@@ -149,6 +150,7 @@ const Table = React.createClass({
     const expandedRowClassName = props.expandedRowClassName;
     const needIndentSpaced = props.data.some(record =>
       record[childrenColumnName] && record[childrenColumnName].length > 0);
+    const onRowClick = props.onRowClick;
     for (let i = 0; i < data.length; i++) {
       const record = data[i];
       const key = keyFn ? keyFn(record, i) : undefined;
@@ -175,6 +177,7 @@ const Table = React.createClass({
         prefixCls={`${props.prefixCls}-row`}
         childrenColumnName={childrenColumnName}
         columns={columns}
+        onRowClick={onRowClick}
         key={key}/>);
 
       const subVisible = visible && isRowExpanded;

src/TableRow.jsx

@@ -24,6 +24,7 @@ const TableRow = React.createClass({
     const indent = props.indent;
     const indentSize = props.indentSize;
     const needIndentSpaced = props.needIndentSpaced;
+    const onRowClick = props.onRowClick;
 
     for (let i = 0; i < columns.length; i++) {
       const col = columns[i];
@@ -79,7 +80,7 @@ const TableRow = React.createClass({
       }
     }
     return (
-      <tr className={`${prefixCls} ${props.className}`} style={{display: props.visible ? '' : 'none'}}>{cells}</tr>);
+      <tr onClick={onRowClick ? onRowClick.bind(null, record, index) : null} className={`${prefixCls} ${props.className}`} style={{display: props.visible ? '' : 'none'}}>{cells}</tr>);
   },
 });