fix #1451

Author: AllenFang

src/BootstrapTable.js

@@ -441,6 +441,7 @@ class BootstrapTable extends Component {
             expandParentClass={ this.props.options.expandParentClass }
             columns={ columns }
             trClassName={ this.props.trClassName }
+            trStyle={ this.props.trStyle }
             striped={ this.props.striped }
             bordered={ this.props.bordered }
             hover={ this.props.hover }
@@ -1478,6 +1479,7 @@ BootstrapTable.propTypes = {
   strictSearch: PropTypes.bool,
   columnFilter: PropTypes.bool,
   trClassName: PropTypes.any,
+  trStyle: PropTypes.any,
   tableStyle: PropTypes.object,
   containerStyle: PropTypes.object,
   headerStyle: PropTypes.object,
@@ -1640,6 +1642,7 @@ BootstrapTable.defaultProps = {
   multiColumnSort: 1,
   columnFilter: false,
   trClassName: '',
+  trStyle: undefined,
   tableStyle: undefined,
   containerStyle: undefined,
   headerStyle: undefined,

src/TableBody.js

@@ -16,7 +16,7 @@ class TableBody extends Component {
   }
 
   render() {
-    const { cellEdit, beforeShowError, x, y, keyBoardNav } = this.props;
+    const { cellEdit, beforeShowError, x, y, keyBoardNav, trStyle } = this.props;
     const tableClasses = classSet('table', {
       'table-striped': this.props.striped,
       'table-bordered': this.props.bordered,
@@ -168,7 +168,8 @@ class TableBody extends Component {
         onRowMouseOut={ this.handleRowMouseOut }
         onSelectRow={ this.handleSelectRow }
         onExpandRow={ this.handleClickCell }
-        unselectableRow={ disable }>
+        unselectableRow={ disable }
+        style={ trStyle }>
         { this.props.expandColumnOptions.expandColumnVisible &&
             this.props.expandColumnOptions.expandColumnBeforeSelectColumn &&
             expandedRowColumn }
@@ -204,7 +205,7 @@ class TableBody extends Component {
         + ((isSelectRowDefined && !this.props.selectRow.hideSelectColumn) ? 1 : 0)
         + (this.props.expandColumnOptions.expandColumnVisible ? 1 : 0);
       tableRows = [
-        <TableRow key='##table-empty##'>
+        <TableRow key='##table-empty##' style={ trStyle }>
           <td data-toggle='collapse'
               colSpan={ colSpan }
               className='react-bs-table-no-data'>

src/TableRow.js

@@ -73,7 +73,8 @@ class TableRow extends Component {
 
   render() {
     this.clickNum = 0;
-    const { selectRow, row, isSelected, className } = this.props;
+    const { selectRow, row, isSelected, className, index } = this.props;
+    let { style } = this.props;
     let backgroundColor = null;
     let selectRowClass = null;
 
@@ -85,8 +86,17 @@ class TableRow extends Component {
         selectRow.className(row, isSelected) : ( isSelected ? selectRow.className : null);
     }
 
+    if (Utils.isFunction(style)) {
+      style = style(row, index);
+    } else {
+      style = { ...style } || {};
+    }
+    // the bgcolor of row selection always overwrite the bgcolor defined by global.
+    if (style && backgroundColor && isSelected) {
+      style.backgroundColor = backgroundColor;
+    }
     const trCss = {
-      style: { backgroundColor },
+      style: { ...style },
       className: classSet(selectRowClass, className)
     };
 
@@ -102,6 +112,7 @@ class TableRow extends Component {
 TableRow.propTypes = {
   index: PropTypes.number,
   row: PropTypes.any,
+  style: PropTypes.any,
   isSelected: PropTypes.bool,
   enableCellEdit: PropTypes.bool,
   onRowClick: PropTypes.func,