title: Expand row by column : Expand row by multiple columns and load different components according to the column clicked
body: <p>I am following below example to implement "expand row by column".</p>
  
  <pre><code>/* 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 &lt; quantity; i++) {
      const id = startId + i;
      if (i &lt; 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 (
          &lt;BootstrapTable data={ this.props.data }&gt;
            &lt;TableHeaderColumn dataField='fieldA' isKey={ true }&gt;Field A&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn dataField='fieldB'&gt;Field B&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn dataField='fieldC'&gt;Field C&lt;/TableHeaderColumn&gt;
            &lt;TableHeaderColumn dataField='fieldD'&gt;Field D&lt;/TableHeaderColumn&gt;
          &lt;/BootstrapTable&gt;);
      } else {
        return (&lt;p&gt;?&lt;/p&gt;);
      }
    }
  }
  
  export default class ExpandRow extends React.Component {
    constructor(props) {
      super(props);
    }
  
    isExpandableRow(row) {
      if (row.id &lt; 3) return true;
      else return false;
    }
  
    expandComponent(row) {
      return (
        &lt;BSTable data={ row.expand } /&gt;
      );
    }
  
    render() {
      const options = {
        expandRowBgColor: 'rgb(242, 255, 163)',
        expandBy: 'column'  // Currently, available value is row and column, default is row
      };
      return (
        &lt;BootstrapTable data={ products }
          options={ options }
          expandableRow={ this.isExpandableRow }
          expandComponent={ this.expandComponent }
          search&gt;
          &lt;TableHeaderColumn dataField='id' isKey={ true }&gt;Product ID&lt;/TableHeaderColumn&gt;
          &lt;TableHeaderColumn dataField='name' expandable={ false }&gt;Product Name&lt;/TableHeaderColumn&gt;
          &lt;TableHeaderColumn dataField='price' expandable={ false }&gt;Product Price&lt;/TableHeaderColumn&gt;
        &lt;/BootstrapTable&gt;
      );
    }
  }
  </code></pre>
  
  <p>Questions:
  I want to implement expand row on "multiple columns". For eg:</p>
  
  <p>I would make 2 columns out of 3 to expand rows.</p>
  
  <p>Product ID
  Product Name
  Product Price</p>
  
  <p>Behavior I want is :</p>
  
  <p>1.) When user clicks on "product id" column, I want to show some other BSTTableNew component like above (on expand row) but with columns "field A" &amp; "field B" and some other functionality.</p>
  
  <p>2.) When user clicks on "product name" column, I want to show BSTTable (on expand row) with similarly as above.</p>
  
  <p>What changes I have to make in below code to load respective component class based upon the column I click to expand row with additional details?</p>
  
  <p>I believe i have to make some changes in below code to load other components:</p>
  
  <pre><code>expandComponent(row) {
  
  if( column === "productID") { //something of this sort I want
    return (
      &lt;BSTableNew data={ row.expand } /&gt;
    );
  }
  
  if( column === "productName") {  //something of this sort I want
    return (
      &lt;BSTable data={ row.expand } /&gt;
    );
  }
  }
  </code></pre>
  
  <p>How to achieve above?</p>