example for #1370

Author: AllenFang

examples/js/expandRow/custom-expand-class.js

@@ -0,0 +1,94 @@
+/* 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 CustomExpandClass 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 = {
+      expandBodyClass: function(row, rowIndex) {
+        if (rowIndex > 1) {
+          return 'custom-expand-body-1';
+        } else {
+          return 'custom-expand-body-0';
+        }
+      },
+      expandParentClass: 'custom-expand-parent'  // expandParentClass also accept callback function
+    };
+    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>
+    );
+  }
+}

examples/js/expandRow/demo.js

@@ -1,4 +1,5 @@
 /* eslint max-len: 0 */
+require('./style.css');
 import React from 'react';
 import ExpandRow from './expandRow';
 import SingleExpandRow from './single-expanding';
@@ -7,6 +8,7 @@ import ManageExpandExternal from './manage-expanding';
 import ExpandWithSelection from './expand-row-with-selection';
 import ExpandWithCellEdit from './expand-row-with-cellEdit';
 import ExpandIndicator from './expand-indicator';
+import CustomExpandClassName from './custom-expand-class';
 import CustomExpandIndicator from './custom-expand-indicator';
 import renderLinks from '../utils';
 
@@ -29,6 +31,10 @@ class Demo extends React.Component {
           { renderLinks('expandRow/expand-indicator.js') }
           <ExpandIndicator/>
         </Panel>
+        <Panel header={ 'Custom Expand Row ClassName' }>
+          { renderLinks('expandRow/custom-expand-class.js') }
+          <CustomExpandClassName/>
+        </Panel>
         <Panel header={ 'Custom Row Expand Indicator' }>
           { renderLinks('expandRow/custom-expand-indicator.js') }
           <CustomExpandIndicator/>

examples/js/expandRow/style.css

@@ -0,0 +1,16 @@
+.custom-expand-parent {
+  background-color: salmon;
+}
+
+.custom-expand-body-1 {
+  font-size: 8px;
+  color: lawngreen;
+  background-color: darkkhaki;
+}
+
+.custom-expand-body-0 {
+  font-size: 16px;
+  font-weight: bold;
+  background-color: springgreen;
+  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}