javascript – learn how to change backgraound shade of cells in datatable in react Js primarily based on situations?

i created under knowledge desk.

I would like to vary the background shade of the cells(if there may be any worth) apart from the “Internet Misplaced” and “Internet Recovered” columns.If there are any values together with the primary worth of the array(every sub-array in rawData within the under code-snippet) it must be purple and all values besides “Internet Misplaced” and “Internet Recovered” must be inexperienced.

Desired Output:

Code to get the datatable:

import { useState } from "react";

 export default operate DataTable1(){

 const rawData= [[7,'',2,1,4,3],[8,3,'',5,3],['','','',''],[4,4,'']]
 
 return (
    <desk>
      <thead>
        <tr>
          <th></th>
          <th>Week 1</th>
          <th>Week 2</th>
          <th>Week 3</th>
          <th>Week 4</th>
          <th>Internet Misplaced</th>
          <th>Internet Recovered</th>
        </tr>
      </thead>
      <tbody>
        {rawData.map((merchandise, index) => {
          return (
            <tr>
              <th>Week {index + 1}</th>
              {[...Array(6 - item.length)].map((merchandise) => {
                return <td></td>;  //for empty values
              })}
              {merchandise.map((itm) => {
                return <td>{itm}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </desk>
  );
   
}

i understand how to vary background colours utilizing css in regular situations. However for this actually respect your help.