highlight selected row

README.md

@@ -213,6 +213,24 @@ var table = React.render(
           <th></th>
           <td>handle rowClick action, index means the index of current row among fatherElement[childrenColumnName]</td>
       </tr>
+      <tr>
+          <td>highlightSelectedRow</td>
+          <td>Boolean</td>
+          <th>false</th>
+          <td>whether clicked row should be highlighted</td>
+      </tr>
+      <tr>
+          <td>selectedKey</td>
+          <td>String</td>
+          <th></th>
+          <td>the key of the row that will be highlighted</td>
+      </tr>
+      <tr>
+          <td>onRowSelectionChange</td>
+          <td>Function(record, key, index)</td>
+          <th></th>
+          <td>handle rowSelectionChange action</td>
+      </tr>
       <tr>
           <td>columnsPageSize</td>
           <td>Number</td>

assets/index.less

@@ -68,6 +68,9 @@
     &.@{tablePrefixCls}-row-hover {
       background: #eaf8fe;
     }
+    &.@{tablePrefixCls}-row-selected {
+      background: #fff7e6;
+    }
   }
 
   th, td {

examples/highlightSelectedRow.js

@@ -0,0 +1,42 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp,react/jsx-boolean-value */
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Table = require('rc-table');
+require('rc-table/assets/index.less');
+
+const MyTable = React.createClass({
+  onRowSelectionChange: function(record, key, index) {
+    console.log('selection change');
+    console.log('record', record);
+    console.log('key', key);
+    console.log('index', index);
+  },
+
+  render: function() {
+    const props = this.props;
+    const columns = [
+      {title: '表头1', dataIndex: 'a', key: 'a', width: 100},
+      {id: '123', title: '表头2', dataIndex: 'b', key: 'b', width: 100},
+      {title: '表头3', dataIndex: 'c', key: 'c', width: 200},
+    ];
+    return (
+      <Table
+        columns={columns}
+        data={props.data}
+        className={props.className}
+        highlightSelectedRow={true}
+        onRowSelectionChange={this.onRowSelectionChange}
+        selectedKey="2"/>
+    );
+  },
+});
+
+const data = [{a: '123', key: '1'}, {a: 'cdd', b: 'edd', key: '2'}, {a: '1333', c: 'eee', key: '3'}];
+
+ReactDOM.render(
+  <div>
+    <h2>highlight selected row</h2>
+    <MyTable data={data} className="table"/>
+  </div>,
+  document.getElementById('__react-content')
+);

src/Table.jsx

@@ -22,6 +22,9 @@ const Table = React.createClass({
     onExpandedRowsChange: PropTypes.func,
     indentSize: PropTypes.number,
     onRowClick: PropTypes.func,
+    onRowSelectionChange: PropTypes.func,
+    highlightSelectedRow: PropTypes.bool,
+    selectedKey: PropTypes.string,
     columnsPageRange: PropTypes.array,
     columnsPageSize: PropTypes.number,
     expandIconColumnIndex: PropTypes.number,
@@ -58,6 +61,8 @@ const Table = React.createClass({
       columnsPageSize: 5,
       expandIconColumnIndex: 0,
       showHeader: true,
+      highlightSelectedRow: false,
+      selectedKey: null,
       scroll: {},
       rowRef() {
         return null;
@@ -85,6 +90,7 @@ const Table = React.createClass({
       data: props.data,
       currentColumnsPage: 0,
       currentHoverKey: null,
+      currentSelectedKey: props.selectedKey,
       scrollPosition: 'left',
       fixedColumnsRowsHeight: [],
     };
@@ -114,6 +120,11 @@ const Table = React.createClass({
         data: nextProps.data,
       });
     }
+    if ('selectedKey' in nextProps) {
+      this.setState({
+        currentSelectedKey: nextProps.selectedKey,
+      });
+    }
     if ('expandedRowKeys' in nextProps) {
       this.setState({
         expandedRowKeys: nextProps.expandedRowKeys,
@@ -125,6 +136,32 @@ const Table = React.createClass({
     clearTimeout(this.timer);
   },
 
+  onRowClick(record, i, e) {
+    const {onRowClick} = this.props;
+    const {currentSelectedKey} = this.state;
+    const eventTag = e.target.tagName.toLowerCase();
+    const eventParentTag = e.target.parentElement.tagName.toLowerCase();
+    if (eventTag !== 'input' && eventParentTag !== 'label') {
+      const key = this.getRowKey(record, i);
+      if (currentSelectedKey !== key) {
+        this.onRowSelectionChange(record, key, i);
+      }
+    }
+    if (onRowClick) {
+      onRowClick.apply(null, arguments);
+    }
+  },
+
+  onRowSelectionChange(record, key, index) { // eslint-disable-line no-unused-vars
+    const {onRowSelectionChange} = this.props;
+    this.setState({
+      currentSelectedKey: key,
+    });
+    if (onRowSelectionChange) {
+      onRowSelectionChange.apply(null, arguments);
+    }
+  },
+
   onExpandedRowsChange(expandedRowKeys) {
     if (!this.props.expandedRowKeys) {
       this.setState({
@@ -214,13 +251,12 @@ const Table = React.createClass({
     const props = this.props;
     const childrenColumnName = props.childrenColumnName;
     const expandedRowRender = props.expandedRowRender;
-    const { fixedColumnsRowsHeight } = this.state;
+    const { fixedColumnsRowsHeight, currentSelectedKey } = this.state;
     let rst = [];
     const rowClassName = props.rowClassName;
     const rowRef = props.rowRef;
     const expandedRowClassName = props.expandedRowClassName;
     const needIndentSpaced = props.data.some(record => record[childrenColumnName]);
-    const onRowClick = props.onRowClick;
     const isAnyColumnsFixed = this.isAnyColumnsFixed();
 
     const expandIconAsCell = fixed !== 'right' ? props.expandIconAsCell : false;
@@ -240,6 +276,10 @@ const Table = React.createClass({
         className += ' ' + props.prefixCls + '-row-hover';
       }
 
+      if (props.highlightSelectedRow && currentSelectedKey === key) {
+        className += ' ' + props.prefixCls + '-row-selected';
+      }
+
       const onHoverProps = {};
       if (isAnyColumnsFixed) {
         onHoverProps.onHover = this.handleRowHover;
@@ -267,7 +307,7 @@ const Table = React.createClass({
           childrenColumnName={childrenColumnName}
           columns={columns || this.getCurrentColumns()}
           expandIconColumnIndex={expandIconColumnIndex}
-          onRowClick={onRowClick}
+          onRowClick={this.onRowClick}
           style={style}
           {...onHoverProps}
           key={key}