Sunday, October 2, 2022
HomeCSSjavascript - learn how to change backgraound shade of cells in datatable...

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


i created under knowledge desk.

enter image description here

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:

enter image description here

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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments