add example for hide row on expanding

Author: AllenFang

examples/js/expandRow/demo.js

@@ -11,6 +11,7 @@ import ExpandIndicator from './expand-indicator';
 import CustomExpandClassName from './custom-expand-class';
 import CustomExpandIndicator from './custom-expand-indicator';
 import AutoCollapse from './auto-collapse';
+import HideRowWhenExpanding from './hide-row-when-expanding';
 import renderLinks from '../utils';
 
 import { Col, Panel } from 'react-bootstrap';
@@ -65,6 +66,10 @@ class Demo extends React.Component {
           { renderLinks('expandRow/auto-collapse.js') }
           <AutoCollapse/>
         </Panel>
+        <Panel header={ 'Hide Row When Expanding' }>
+          { renderLinks('expandRow/hide-row-when-expanding.js') }
+          <HideRowWhenExpanding/>
+        </Panel>
       </Col>
     );
   }

examples/js/expandRow/hide-row-when-expanding.js

@@ -0,0 +1,87 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+const products = [];
+
+function addProducts(quantity) {
+  const startId = products.length;
+  for (let i = 0; i < quantity; i++) {
+    const id = startId + i;
+    if (i < 3) {
+      products.push({
+        id: id,
+        name: 'Item name ' + id,
+        price: 2100 + i,
+        expand: [ {
+          fieldA: 'test1',
+          fieldB: (i + 1) * 99,
+          fieldC: (i + 1) * Math.random() * 100,
+          fieldD: '123eedd' + i
+        }, {
+          fieldA: 'test2',
+          fieldB: i * 99,
+          fieldC: i * Math.random() * 100,
+          fieldD: '123eedd' + i
+        } ]
+      });
+    } else {
+      products.push({
+        id: id,
+        name: 'Item name ' + id,
+        price: 2100 + i
+      });
+    }
+  }
+}
+addProducts(5);
+
+class BSTable extends React.Component {
+  render() {
+    if (this.props.data) {
+      return (
+        <BootstrapTable data={ this.props.data }>
+          <TableHeaderColumn dataField='fieldA' isKey={ true }>Field A</TableHeaderColumn>
+          <TableHeaderColumn dataField='fieldB'>Field B</TableHeaderColumn>
+          <TableHeaderColumn dataField='fieldC'>Field C</TableHeaderColumn>
+          <TableHeaderColumn dataField='fieldD'>Field D</TableHeaderColumn>
+        </BootstrapTable>);
+    } else {
+      return (<p>?</p>);
+    }
+  }
+}
+
+export default class HideRowWhenExpanding extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  isExpandableRow(row) {
+    if (row.id < 4) return true;
+    else return false;
+  }
+
+  expandComponent(row) {
+    return (
+      <BSTable data={ row.expand } />
+    );
+  }
+
+  render() {
+    const options = {
+      hideRowOnExpand: true
+    };
+    return (
+      <BootstrapTable data={ products }
+        options={ options }
+        expandableRow={ this.isExpandableRow }
+        expandComponent={ this.expandComponent }
+        search>
+        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}