'Reactjs Toggle tr

Hi I'm using bootstrap table in React.js. I want to show or toggle child row (one simple row) for each row when I click on particular row. In simple word I need to show child row of row in which row I clicked. Currently I'm using this code. How can I solve this problem. Please help me with this one.

<BootstrapTable
  search
  striped
  condensed
  hover
  options={options}
  pagination={paginationFactory()}
  cellEdit={cellEditFactory({
    mode: 'dbclick',
    blurToSave: true,
    nonEditableRows: () => [1, 2, 3],
  })}
  data={userList}
  filter={filterFactory()}
  bootstrap4
>
  <TableHeaderColumn dataField="Project_Name" dataSort dataFormat={Image_Formatter} isKey>
    Project Name
  </TableHeaderColumn>
  <TableHeaderColumn dataField="Last_Update" dataSort dataFormat={Icon_Formatter}>
    {' '}
    Update
  </TableHeaderColumn>
  <TableHeaderColumn dataField="Automation_Report" dataSort dataFormat={Progressbar_Formatter}>
    {' '}
    Report
  </TableHeaderColumn>
</BootstrapTable>;

reactjs bootstrap-4

Solution 1:^[1]

Seems like you need to create a custom table row component, and then add state to it based on onClick.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Lior Pollak

'Reactjs Toggle tr

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]