Enable Hide row on the expand with hideRowOnExpand as an options prop

Author: powellandy

.gitignore

@@ -8,3 +8,4 @@ node_modules
 lib/
 npm-debug.log
 .vscode
+package-lock.json

dist/react-bootstrap-table.js

@@ -438,7 +438,7 @@ class BootstrapTable extends Component {
     const { toolbarPosition = Const.TOOLBAR_POS_TOP } = this.props.options;
     const showToolbarOnTop = toolbarPosition !== Const.TOOLBAR_POS_BOTTOM;
     const showToolbarOnBottom = toolbarPosition !== Const.TOOLBAR_POS_TOP;
-
+    const { hideRowOnExpand = false } = this.props.options;
     return (
       <div className={ classSet('react-bs-table-container', this.props.className, this.props.containerClass) }
         style={ this.props.containerStyle }>
@@ -513,6 +513,7 @@ class BootstrapTable extends Component {
             x={ this.state.x }
             y={ this.state.y }
             withoutTabIndex={ this.props.withoutTabIndex }
+            hideRowOnExpand={hideRowOnExpand}
             onEditCell={ this.handleEditCell } />
             {
               tableFooter
@@ -1694,7 +1695,8 @@ BootstrapTable.propTypes = {
     beforeShowError: PropTypes.func,
     printToolBar: PropTypes.bool,
     insertFailIndicator: PropTypes.string,
-    noAutoBOM: PropTypes.bool
+    noAutoBOM: PropTypes.bool,
+    hideRowOnExpand: PropTypes.bool,
   }),
   fetchInfo: PropTypes.shape({
     dataTotalSize: PropTypes.number
@@ -1861,7 +1863,8 @@ BootstrapTable.defaultProps = {
     beforeShowError: undefined,
     printToolBar: true,
     insertFailIndicator: Const.INSERT_FAIL_INDICATOR,
-    noAutoBOM: true
+    noAutoBOM: true,
+    hideRowOnExpand: false,
   },
   fetchInfo: {
     dataTotalSize: 0

dist/react-bootstrap-table.js.map

@@ -165,7 +165,7 @@ class TableBody extends Component {
       );
       const haveExpandContent = this.props.expandableRow && this.props.expandableRow(data);
       const isExpanding = haveExpandContent && this.props.expanding.indexOf(key) > -1;
-
+      const { hideRowOnExpand } = this.props;
       // add by bluespring for className customize
       let trClassName = this.props.trClassName;
       if (Utils.isFunction(this.props.trClassName)) {
@@ -189,6 +189,7 @@ class TableBody extends Component {
         onExpandRow={ this.handleClickCell }
         unselectableRow={ disable }
         style={ trStyle }
+        hidden={isExpanding && hideRowOnExpand}
         dbClickToEdit={ cellEdit.mode === Const.CELL_EDIT_DBCLICK } >
         { this.props.expandColumnOptions.expandColumnVisible &&
             this.props.expandColumnOptions.expandColumnBeforeSelectColumn &&
@@ -547,6 +548,7 @@ TableBody.propTypes = {
   x: PropTypes.number,
   y: PropTypes.number,
   onNavigateCell: PropTypes.func,
-  withoutTabIndex: PropTypes.bool
+  withoutTabIndex: PropTypes.bool,
+  hideRowOnExpand: PropTypes.bool,
 };
 export default TableBody;

dist/react-bootstrap-table.min.js

@@ -110,6 +110,7 @@ class TableRow extends Component {
           onMouseOver={ this.rowMouseOver }
           onMouseOut={ this.rowMouseOut }
           onClick={ this.rowClick }
+          hidden={this.props.hidden}
           onDoubleClick={ this.rowDoubleClick }>{ this.props.children }</tr>
     );
   }
@@ -126,10 +127,12 @@ TableRow.propTypes = {
   onExpandRow: PropTypes.func,
   onRowMouseOut: PropTypes.func,
   onRowMouseOver: PropTypes.func,
-  unselectableRow: PropTypes.bool
+  unselectableRow: PropTypes.bool,
+  hidden: PropTypes.bool,
 };
 TableRow.defaultProps = {
   onRowClick: undefined,
-  onRowDoubleClick: undefined
+  onRowDoubleClick: undefined,
+  hidden: false,
 };
 export default TableRow;