add example for expandrow with cell editing

examples/js/expandRow/demo.js

@@ -4,6 +4,7 @@ import ExpandRow from './expandRow';
 import ExpandByColumn from './expand-row-by-column';
 import ManageExpandExternal from './manage-expanding';
 import ExpandWithSelection from './expand-row-with-selection';
+import ExpandWithCellEdit from './expand-row-with-cellEdit';
 import renderLinks from '../utils';
 
 import { Col, Panel } from 'react-bootstrap';
@@ -33,6 +34,10 @@ class Demo extends React.Component {
           { renderLinks('expandRow/expand-row-with-selection.js') }
           <ExpandWithSelection/>
         </Panel>
+        <Panel header={ 'Expand Row with CellEdit' }>
+          { renderLinks('expandRow/expand-row-with-cellEdit.js') }
+          <ExpandWithCellEdit/>
+        </Panel>
       </Col>
     );
   }

examples/js/expandRow/expand-row-with-cellEdit.js

@@ -0,0 +1,90 @@
+/* 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 ExpandRow extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  isExpandableRow(row) {
+    if (row.id < 3) return true;
+    else return false;
+  }
+
+  expandComponent(row) {
+    return (
+      <BSTable data={ row.expand } />
+    );
+  }
+
+  render() {
+    const options = {
+      expandRowBgColor: 'rgb(242, 255, 163)'
+    };
+    const cellEdit = {
+      mode: 'click'
+    };
+    return (
+      <BootstrapTable data={ products }
+        options={ options }
+        expandableRow={ this.isExpandableRow }
+        expandComponent={ this.expandComponent }
+        cellEdit={ cellEdit }>
+        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
+        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}