diff --git a/README.md b/README.md
index 0653d7414..fbf60e182 100644
--- a/README.md
+++ b/README.md
@@ -213,6 +213,24 @@ var table = React.render(
|
handle rowClick action, index means the index of current row among fatherElement[childrenColumnName] |
+
+ highlightSelectedRow |
+ Boolean |
+ false |
+ whether clicked row should be highlighted |
+
+
+ selectedKey |
+ String |
+ |
+ the key of the row that will be highlighted |
+
+
+ onRowSelectionChange |
+ Function(record, key, index) |
+ |
+ handle rowSelectionChange action |
+
columnsPageSize |
Number |
diff --git a/assets/index.less b/assets/index.less
index e9fd0ac93..2eeeedaba 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -68,6 +68,9 @@
&.@{tablePrefixCls}-row-hover {
background: #eaf8fe;
}
+ &.@{tablePrefixCls}-row-selected {
+ background: #fff7e6;
+ }
}
th, td {
diff --git a/examples/highlightSelectedRow.html b/examples/highlightSelectedRow.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/examples/highlightSelectedRow.js b/examples/highlightSelectedRow.js
new file mode 100644
index 000000000..c13485719
--- /dev/null
+++ b/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 (
+
+ );
+ },
+});
+
+const data = [{a: '123', key: '1'}, {a: 'cdd', b: 'edd', key: '2'}, {a: '1333', c: 'eee', key: '3'}];
+
+ReactDOM.render(
+
+
highlight selected row
+
+ ,
+ document.getElementById('__react-content')
+);
diff --git a/src/Table.jsx b/src/Table.jsx
index 3961b0b71..a04db4540 100644
--- a/src/Table.jsx
+++ b/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}