fix #1370

Author: AllenFang

src/BootstrapTable.js

@@ -418,6 +418,8 @@ class BootstrapTable extends Component {
             expandableRow={ this.props.expandableRow }
             expandRowBgColor={ this.props.options.expandRowBgColor }
             expandBy={ this.props.options.expandBy || Const.EXPAND_BY_ROW }
+            expandBodyClass={ this.props.options.expandBodyClass }
+            expandParentClass={ this.props.options.expandParentClass }
             columns={ columns }
             trClassName={ this.props.trClassName }
             striped={ this.props.striped }
@@ -1479,6 +1481,8 @@ BootstrapTable.propTypes = {
     expanding: PropTypes.array,
     onExpand: PropTypes.func,
     onlyOneExpanding: PropTypes.bool,
+    expandBodyClass: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
+    expandParentClass: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
     beforeShowError: PropTypes.func,
     printToolBar: PropTypes.bool
   }),
@@ -1627,6 +1631,8 @@ BootstrapTable.defaultProps = {
     expanding: [],
     onExpand: undefined,
     onlyOneExpanding: false,
+    expandBodyClass: null,
+    expandParentClass: null,
     beforeShowError: undefined,
     printToolBar: true
   },

src/ExpandComponent.js

@@ -11,7 +11,7 @@ class ExpandComponent extends Component {
       style: {
         backgroundColor: this.props.bgColor
       },
-      className: classSet(className)
+      className: this.props.hidden ? null : classSet(className)
     };
     return (
       <tr hidden={ this.props.hidden } width={ this.props.width } { ...trCss }>

src/TableBody.js

@@ -147,11 +147,19 @@ class TableBody extends Component {
           this.props.expanding.indexOf(key) > -1,
           ExpandColumnCustomComponent, r, data
       );
+      const haveExpandContent = this.props.expandableRow && this.props.expandableRow(data);
+      const isExpanding = haveExpandContent && this.props.expanding.indexOf(key) > -1;
+
       // add by bluespring for className customize
       let trClassName = this.props.trClassName;
       if (isFun(this.props.trClassName)) {
         trClassName = this.props.trClassName(data, r);
       }
+      if (isExpanding && this.props.expandParentClass) {
+        trClassName += isFun(this.props.expandParentClass) ?
+          this.props.expandParentClass(data, r) :
+          this.props.expandParentClass;
+      }
       const result = [ <TableRow isSelected={ selected } key={ key } className={ trClassName }
         index={ r }
         row={ data }
@@ -174,14 +182,17 @@ class TableBody extends Component {
         { tableColumns }
       </TableRow> ];
 
-      if (this.props.expandableRow && this.props.expandableRow(data)) {
+      if (haveExpandContent) {
+        const expandBodyClass = isFun(this.props.expandBodyClass) ?
+          this.props.expandBodyClass(data, r) :
+          this.props.expandBodyClass;
         result.push(
           <ExpandComponent
             key={ key + '-expand' }
             row={ data }
-            className={ trClassName }
+            className={ expandBodyClass }
             bgColor={ this.props.expandRowBgColor || this.props.selectRow.bgColor || undefined }
-            hidden={ !(this.props.expanding.indexOf(key) > -1) }
+            hidden={ !isExpanding }
             colSpan={ expandColSpan }
             width={ "100%" }>
             { this.props.expandComponent(data) }
@@ -502,6 +513,8 @@ TableBody.propTypes = {
   expandBy: PropTypes.string,
   expanding: PropTypes.array,
   onExpand: PropTypes.func,
+  expandBodyClass: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
+  expandParentClass: PropTypes.oneOfType([ PropTypes.string, PropTypes.func ]),
   onlyOneExpanding: PropTypes.bool,
   beforeShowError: PropTypes.func,
   keyBoardNav: PropTypes.oneOfType([ PropTypes.bool, PropTypes.object ]),