Displaying fetched devices data by using the map function but I can't make striped color Table. I want to display the background color of the tbody tag in stripes (using Bootstrap)

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

React.js

<table className="table table-striped table-bordered">
<thead className="table_thead ">
  <tr className="table_font_color">
    <th scope="col">Device Name</th>
    <th scope="col">Type</th>
    <th scope="col">Room</th>
  </tr>
</thead>
{entities.map((entity, i) => (
<tbody>
  <tr className="table_font_color">
    <th scope="row">
      <Icon entityKey={entity.key} type={entity.type} state={entity.state} entityID={entity.entity_id} objectID={entity.object_id} />
      <p className="">{entity.entity_id}</p>
    </th>
    <td className="align-middle">
      {entity.key === "camera" && <div>Smart Camera</div>}
      {entity.key === "cover" && <div>Garage</div>}
      {entity.key === "climate" && <div>Smart Themostat</div>}
      {entity.key === "lock" && <div>Smart Lock</div>}
      {entity.key === "light" && <div>Smart Light</div>}
      {entity.key === "sensor" && <div>Sensor</div>}
      {entity.key === "switch" && <div>Smart Plug</div>}
    </td>
    <td className="align-middle table_rightside">
      {entity.key === "switch" && <button className="btn btn-primary button_table_rightside">Unassigned</button>}
      {entity.key === "sensor" && <button className="btn btn-primary button_table_rightside">Unassigned</button>}
      {entity.key === "light" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
      {entity.key === "camera" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
      {entity.key === "climate" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
      {entity.key === "cover" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
      {entity.key === "lock" && <div className="table_rightside_p"><p>{entity.room_name}</p><img className="ic_edit_in_table" src={ic_edit} /></div>}
    </td>
  </tr>

</tbody>
))};
</table>

CSS

.table_thead {
  background-color: #152D58 !important;
}

.table-bordered {
  border: none !important;
}

.table-striped > tbody > tr:nth-child(0) > td, .table-striped > tbody > tr:nth-child(0) > th {
  background-color: #152D58 !important;
}

.table-striped > tbody > tr:nth-child(2n 1) > td, .table-striped > tbody > tr:nth-child(2n 1) > th {
  background-color: #1E3E75 !important;
}

.table-striped > tbody > tr:nth-child(2n) > td, .table-striped > tbody > tr:nth-child(2n) > th {
  background-color: #152D58 !important;
}

table.table-bordered > thead > tr > th{
  border:3px solid #022055 !important;
}

.table-bordered td {
  border:3px solid #022055 !important;
}

.table-bordered th {
  border:3px solid #022055 !important;
}

.table_font_color {
  color: white !important;
}

Added photo

CodePudding user response：

Use conditional class according to your index in your map method

  <tr className={`table_font_color ${i % 2 === 0 ? 'table-striped' : ''}`}>

and then in your css

.table-striped > td {
  background-color: #152D58 !important;
}

CodePudding user response：

Using nth-child odd and even you can alternate between the two.

tbody tr:nth-child(odd){
  background-color: #111;
  color: #fff;
}

tbody tr:nth-child(even){
  background-color: #222;
  color: #fff;
}

Edit:

Since you are using map, you can get access to index in map and check whether it's odd or even. Based on that you can add a class and modify css accordingly.

map((element, index) => {
    return <TableRow
            class = {index % 2 !== 0 ? "odd-row" : "even-row"}
        />
});