Twitter Bootstrap Question posted in

Creating collapsible table cells with Bootstrap 4 and ReactJS-Twitter bootstrap

Each table row will have to allow the user to click it and get a subset of information pertaining to that row. I did a bit of searching and found this thread: Twitter Bootstrap Use collapse.js on table cells [Almost Done]

I got this solution sorta working on my code but I am having an issue where I am only getting one hidden row that displays at the bottom of the table as the last row, instead of under each individual row being mapped over from the grapevine array.

Here is 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>

Any help would be appreciated, thanks!

Tags:

2

Answers


  1. 0

    The tr holding the hidden row should move inside of the map function and the data-target attribute and the id should be variables (ex the index)

    something like:

    map((grapevine, idx) => (
  <tr data-toggle="collapse" data-target={"#demo"+idx} className="accordion-toggle">
  ...
  <tr >
    <td colSpan="6" className="hiddenRow"><div className="accordian-body collapse" id={"#demo"+idx}> Demo1 </div></td>
  </tr>
)
    Login or Signup to reply.
  2. 0 
    data.map(sale => {
            return (
              <tbody key={sale.id}>
                <tr id={sale.id} onClick={handleCollapse}>
                  <td>
                    <a className="no">{sale.id}</a>
                  </td>
                  <td>{date.utcToLocal(sale.createdOn)}</td>
                </tr>
                { toggleDetails && 
                 <tr>
                  <td>Order Details is here must be</td>
                </tr> }
              </tbody>
            );
          })}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search