title: React-bootstrap-table - Expand component only after row click and not by default
body: <p>I am using react-bootstrap-table for expanding the row and displaying the data inside it.</p>
  <p>This is my code:</p>
  <pre><code>class PhoneSystem extends Component {
  
    isExpandableRow(row) {
      if (row.uniqueid &gt; 0) return true;
      else return false;
    }
  
  //this is called when user clicks a row
    onRowClick(row) {
        console.log(&quot;Inside row click&quot;,row.uniqueid);
        return this.expandComponent(row.uniqueid);
    }
  
    expandComponent(row) {
      console.log(&quot;Inside expand component:::::);
   }
  
    render() {
      
      const options = {
        onRowClick: this.onRowClick.bind(this),
      }
      
      return (
        &lt;React.Fragment&gt;
          &lt;div className=&quot;animated fadeIn&quot;&gt;
            &lt;Row&gt;
              &lt;Col lg=&quot;12&quot;&gt;
                &lt;Card style={{ marginBottom: '100px' }}&gt;
                  &lt;CardHeader&gt;
                    &lt;h5&gt;Phone system&lt;/h5&gt;
                  &lt;/CardHeader&gt;
                    &lt;BootstrapTable data={this.state.productsData}  options={options} remote={true} striped hover search pagination = {true} fetchInfo={{ dataTotalSize: this.state.totalCount }}        
                    expandableRow={ this.isExpandableRow }
                    expandComponent={this.expandComponent.bind(this)}       
                    expandColumnOptions={ { expandColumnVisible: true } }&gt;
  
                    &lt;TableHeaderColumn isKey dataField=&quot;uniqueid&quot; dataSort width=&quot;8%&quot; tdStyle={{ whiteSpace: 'normal', wordWrap: 'break-word' }}&gt;Call Unique Id&lt;/TableHeaderColumn&gt;
                    &lt;TableHeaderColumn dataField=&quot;userfield&quot; dataSort={true} width=&quot;13%&quot;&gt;Call Type&lt;/TableHeaderColumn&gt;
                    &lt;TableHeaderColumn dataField=&quot;callee_number&quot; dataSort width=&quot;10%&quot;&gt;Source&lt;/TableHeaderColumn&gt;
                    &lt;TableHeaderColumn dataField=&quot;action_type&quot; dataSort width=&quot;17%&quot;&gt;Action Type&lt;/TableHeaderColumn&gt;
                    &lt;TableHeaderColumn dataField=&quot;caller_number&quot; dataSort width=&quot;8%&quot;&gt;Destination&lt;/TableHeaderColumn&gt;
                    &lt;TableHeaderColumn dataField=&quot;start_time&quot; dataSort width=&quot;8%&quot;&gt;Start Time&lt;/TableHeaderColumn&gt;
                    &lt;TableHeaderColumn dataField=&quot;disposition&quot; dataSort width=&quot;8%&quot;&gt;Disposition&lt;/TableHeaderColumn&gt;
                    &lt;TableHeaderColumn dataField=&quot;talk_time&quot; dataSort width=&quot;17%&quot;&gt;Duration&lt;/TableHeaderColumn&gt;
                  &lt;/BootstrapTable&gt;
                &lt;/Card&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/div&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  </code></pre>
  <p>Here is my output:</p>
  <p><a href="https://i.stack.imgur.com/7k0MR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7k0MR.png" alt="enter image description here" /></a></p>
  <p>Now, as you can see in output console, expand component function gets called on single row click and again gets called 10 times. I want the expand component function to be called only after row click.</p>
  <p>So I tried removing default <code>expandComponent={this.expandComponent.bind(this)}</code> from inside BootstrapTable component</p>
  <p>As soon as I remove expandComponent from BootstrapTable component, it throws me the error:</p>
  <blockquote>
  <p>this.props.expandComponent is not a function.</p>
  </blockquote>
  <p>Any solution for this ? Thanks in advance.</p>