2

I am using react-bootstrap-table for expanding the row and displaying the data inside it.

This is my code:

class PhoneSystem extends Component {

  isExpandableRow(row) {
    if (row.uniqueid > 0) return true;
    else return false;
  }

//this is called when user clicks a row
  onRowClick(row) {
      console.log("Inside row click",row.uniqueid);
      return this.expandComponent(row.uniqueid);
  }

  expandComponent(row) {
    console.log("Inside expand component:::::);
 }

  render() {
    
    const options = {
      onRowClick: this.onRowClick.bind(this),
    }
    
    return (
      <React.Fragment>
        <div className="animated fadeIn">
          <Row>
            <Col lg="12">
              <Card style={{ marginBottom: '100px' }}>
                <CardHeader>
                  <h5>Phone system</h5>
                </CardHeader>
                  <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 } }>

                  <TableHeaderColumn isKey dataField="uniqueid" dataSort width="8%" tdStyle={{ whiteSpace: 'normal', wordWrap: 'break-word' }}>Call Unique Id</TableHeaderColumn>
                  <TableHeaderColumn dataField="userfield" dataSort={true} width="13%">Call Type</TableHeaderColumn>
                  <TableHeaderColumn dataField="callee_number" dataSort width="10%">Source</TableHeaderColumn>
                  <TableHeaderColumn dataField="action_type" dataSort width="17%">Action Type</TableHeaderColumn>
                  <TableHeaderColumn dataField="caller_number" dataSort width="8%">Destination</TableHeaderColumn>
                  <TableHeaderColumn dataField="start_time" dataSort width="8%">Start Time</TableHeaderColumn>
                  <TableHeaderColumn dataField="disposition" dataSort width="8%">Disposition</TableHeaderColumn>
                  <TableHeaderColumn dataField="talk_time" dataSort width="17%">Duration</TableHeaderColumn>
                </BootstrapTable>
              </Card>
            </Col>
          </Row>
        </div>
      </React.Fragment>
    );
  }
}

Here is my output:

enter image description here

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.

So I tried removing default expandComponent={this.expandComponent.bind(this)} from inside BootstrapTable component

As soon as I remove expandComponent from BootstrapTable component, it throws me the error:

this.props.expandComponent is not a function.

Any solution for this ? Thanks in advance.

Nikunj V
  • 271
  • 4
  • 18

1 Answers1

0

Try below

expandableRow={(row) => {
  return this.isExpandableRow(row);
}}

expandComponent={(row) => {
  return this.expandComponent(row);
}}
Karan
  • 1
  • 5