CODEWITHSUNDEEP
reactjsmaterial-table
Jen
Jen

Reputation: 352

Material Table rowStyle background color change based on cell value in

I am trying to have the color of the row change colors based on the priority number. For example, if the priority is 4 the color of the entire row should be blue. The problem is that I'm unsure of how to achieve this. I know Material Table assigns ID's to the rows, but I have no way of accessing them. Below is what I have come up with so far. I need options[backgroundColor] to be set based on the priority number. I have a codesandbox here as well https://codesandbox.io/s/notifications-material-ui-spq45

import React from "react";
import { Container } from "react-bootstrap";
import MaterialTable from "material-table";
import FilterListIcon from "@material-ui/icons/FilterList";
import SearchIcon from "@material-ui/icons/Search";
import FirstPage from "@material-ui/icons/FirstPage";
import LastPage from "@material-ui/icons/LastPage";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import ChevronRight from "@material-ui/icons/ChevronRight";
import CloseIcon from "@material-ui/icons/Close";

function App() {

  //loop through the array of priority numbers, and display color based on number
  
  function colors(num) {

    for(let i = 0; i < num.length; i++) {
    if (num[i] === 4) {
      options.rowStyle.backgroundColor = "blue";
    }

    if (num[i] === 3) {
      options.rowStyle.backgroundColor = "red";
    }

    console.log(num[i]);
  }
}

  let data = [
    {
      date: "06-29-2021",
      subject: "CANBUS LOSS, Automatic Reboot!",
      message:
        "SCMs CANBUS LOSS for more than 15 min, Automatic System Reboot!",
      category: "System",
      priority: 4,
      error: "SYS0080"
    },

    {
      date: "06-28-2021",
      subject: "Reboot!",
      message: "Automatic System Reboot!",
      category: "Alarm",
      priority: 3,
      error: "SYS0090"
    },
    {
      date: "06-25-2021",
      subject: "Testing!",
      message: "Generator not running!",
      category: "Generator",
      priority: 2,
      error: "SYS0050"
    }
  ];

  let columns = [
    { title: "Date", field: "date" },
    { title: "Subject", field: "subject" },
    { title: "Message", field: "message" },
    { title: "Category", field: "category" },
    { title: "Priority Level", field: "priority" },
    { title: "Error Code", field: "error" }
  ];

  let options = {
    filtering: false,
    sorting: true,
    rowStyle: {
    fontFamily: "Mulish-Regular",
    backgroundColor: ""
    
    
       
     
    },
    headerStyle: {
      fontFamily: "Mulish-Regular",
      fontSize: "1.1em",
      fontWeight: "600",
      backgroundColor: "#D1D1D8"
    },
    searchFieldStyle: {
      fontFamily: "Mulish-Regular"
    }
  };
// Loop through all the data and find the priority number, and put it in an array

  let map = data.map((x) => x.priority);
  console.log(map);
  colors(map);

  return (
    <>
      <Container>
        <MaterialTable
          title=""
          columns={columns}
          data={data}
          options={options}
          icons={{
            Filter: (props) => <FilterListIcon style={{ fill: "#2D3155 " }} />,
            Search: (props) => <SearchIcon style={{ fill: "#2D3155 " }} />,
            FirstPage: (props) => <FirstPage style={{ fill: "#2D3155 " }} />,
            LastPage: (props) => <LastPage style={{ fill: "#2D3155 " }} />,
            NextPage: (props) => <ChevronRight style={{ fill: "#2D3155 " }} />,
            PreviousPage: (props) => (
              <ChevronLeft style={{ fill: "#2D3155 " }} />
            ),
            SortArrow: (props) => (
              <FilterListIcon
                style={{ fill: "#2D3155 ", fontSize: "1.4em", margin: ".4em" }}
              />
            ),
            ResetSearch: (props) => <CloseIcon style={{ fill: "#2D3155 " }} />
          }}
        />
      </Container>
    </>
  );
}

export default App;

Upvotes: 2

Views: 9313

Answers (1)

Ajeet Shah
Ajeet Shah

Reputation: 19823

As you can read in the docs, rowStyle accepts an object or a function.

Hence, you can set rowStyle using a function that receives rowData as parameter, an example:

const rowBackgroundColors = {
  "2": "yellow", // just for example, remove it if you don't need
  "3": "orange",
  "4": "red",
};

const options = {
  // ...
  rowStyle: (rowData) => {
    return {
      fontFamily: "Mulish-Regular",
      backgroundColor: rowBackgroundColors[rowData.priority] ?? "#fff",
    };
  },
  // ...
};

Upvotes: 2

Related Questions