For each table row, I need to implement a feature that allows users to click on it and view specific information related to that row. After doing some research, I came across this thread: Twitter Bootstrap Use collapse.js on table cells [Almost Done]
I managed to partially integrate this solution into my code, however, I encountered an issue where only one hidden row is displayed at the bottom of the table instead of under each individual row from the grapevine array.
Below is an excerpt of my code:
<div className="card-block">
<Table hover bordered>
<thead>
<tr className="table-heading">
<th className="table-header">Entity</th>
<th className="table-header">Category</th>
<th className="table-header">Source</th>
<th className="table-header">Risk Score</th>
</tr>
</thead>
<tbody>
{this.state.gvEntries.map(grapevine => (
<tr data-toggle="collapse" data-target="#demo1" className="accordion-toggle">
<td>{grapevine.entity}</td>
<td>{grapevine.category}</td>
<td>{grapevine.source}</td>
<td>{grapevine.rscore}</td>
</tr>
))}
<tr >
<td colSpan="6" className="hiddenRow"><div className="accordian-body collapse" id="demo1"> Demo1 </div></td>
</tr>
</tbody>
</Table>
</div>
If anyone can provide assistance with this problem, I would greatly appreciate it. Thank you!