CODEWITHSUNDEEP
javascripthtmlcssreactjsbackground-color
Deric
Deric

Reputation: 47

how to change backgraound color of cells in datatable in react Js based on conditions?

I created the below data table.

enter image description here

I need to change the background color of the cells (if there is any value), except for the "Net Lost" and "Net Recovered" columns. If there are any values including the first value of the array (each sub-array in rawData in the below code-snippet), then it should be red and all values except "Net Lost" and "Net Recovered" should be green.

Desired Output:

enter image description here

Code to get the datatable:

    import { useState } from "react";
    
     export default function DataTable1(){
    
     const rawData= [[7,'',2,1,4,3],[8,3,'',5,3],['','','',''],[4,4,'']]
     
     return (
        <table>
          <thead>
            <tr>
              <th></th>
              <th>Week 1</th>
              <th>Week 2</th>
              <th>Week 3</th>
              <th>Week 4</th>
              <th>Net Lost</th>
              <th>Net Recovered</th>
            </tr>
          </thead>
          <tbody>
            {rawData.map((item, index) => {
              return (
                <tr>
                  <th>Week {index + 1}</th>
                  {[...Array(6 - item.length)].map((item) => {
                    return <td></td>;  //for empty values
                  })}
                  {item.map((itm) => {
                    return <td>{itm}</td>;
                  })}
                </tr>
              );
            })}
          </tbody>
        </table>
      );
       
    }

I know how to change the background colors using CSS in normal scenarios. But for this I would really appreciate your support.

Upvotes: 0

Views: 316

Answers (2)

Peyman Mihankhah
Peyman Mihankhah

Reputation: 111

Just use a .css file to style the className, and its down.

 <tr>
    <th>Week {index + 1}</th>
      {[...Array(6 - items.length)].map((item) => {
        return <td>-</td>; //for empty values
          })}
      {items.map((item, i) => {
         return (
           <>
            {i == 0 && item != "" ? (
              <td className="red">{item}</td>
                ) : index + i < 4 && item != "" ? (
                  <td className="green">{item}</td>
                ) : (
                  <td className="">{item}</td>
                )}{" "}
              </>
            );
     })}
   </tr>

codesandbox

Upvotes: 1

epascarello
epascarello

Reputation: 207557

You can just do it with CSS

table, tr, td, th {
  border: .1em solid black;
  border-collapse: collapse;
  text-align: center;
  padding: .4em;
}

tbody > tr > td {
  background-color: red;
}

tbody > tr > td:not(:empty) ~ td.data {
  background-color: green;
}

tbody > tr > td:empty,
tbody > tr > td:nth-child(n+6) {
  background-color: white;
}
<table>
  <thead>
    <tr>
      <th></th>
      <th>Week 1</th>
      <th>Week 2</th>
      <th>Week 3</th>
      <th>Week 4</th>
      <th>Net Lost</th>
      <th>Net Recovered</th>
    </tr>
  </thead>
  <tbody>
    <tbody>
      <tr>
        <th>Week 1</th>
        <td class="data">7</td>
        <td></td>
        <td class="data">2</td>
        <td class="data">1</td>
        <td>4</td>
        <td>3</td>
      </tr>
      <tr>
        <th>Week 2</th>
        <td></td>
        <td class="data">8</td>
        <td class="data">3</td>
        <td></td>
        <td>5</td>
        <td>3</td>
      </tr>
      <tr>
        <th>Week 3</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th>Week 4</th>
        <td></td>
        <td></td>
        <td></td>
        <td class="data">4</td>
        <td>4</td>
        <td></td>
      </tr>      
    </tbody>
</table>

and without adding a class, can use important

table, tr, td, th {
  border: .1em solid black;
  border-collapse: collapse;
  text-align: center;
  padding: .4em;
}

tbody > tr > td {
  background-color: red;
}

tbody > tr > td:not(:empty) ~ td {
  background-color: green;
}

tbody > tr > td:empty,
tbody > tr > td:nth-child(n+6) {
  background-color: white !important;
}
<table>
  <thead>
    <tr>
      <th></th>
      <th>Week 1</th>
      <th>Week 2</th>
      <th>Week 3</th>
      <th>Week 4</th>
      <th>Net Lost</th>
      <th>Net Recovered</th>
    </tr>
  </thead>
  <tbody>
    <tbody>
      <tr>
        <th>Week 1</th>
        <td>7</td>
        <td></td>
        <td>2</td>
        <td>1</td>
        <td>4</td>
        <td>3</td>
      </tr>
      <tr>
        <th>Week 2</th>
        <td></td>
        <td>8</td>
        <td>3</td>
        <td></td>
        <td>5</td>
        <td>3</td>
      </tr>
      <tr>
        <th>Week 3</th>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th>Week 4</th>
        <td></td>
        <td></td>
        <td></td>
        <td>4</td>
        <td>4</td>
        <td></td>
      </tr>      
    </tbody>
</table>

Upvotes: 2

Related Questions