时间戳

首页 > 解决方案 > Material Table rowStyle 背景颜色根据单元格值变化

reactjs - Material Table rowStyle 背景颜色根据单元格值变化

问题描述

我试图让行的颜色根据优先级数改变颜色。例如，如果优先级为 4，则整行的颜色应为蓝色。问题是我不确定如何实现这一目标。我知道材料表将 ID 分配给行，但我无法访问它们。以下是我到目前为止的想法。我需要根据优先级编号设置 options[backgroundColor]。我这里也有一个代码框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;

标签： reactjsmaterial-table

解决方案

正如您在docs中所读到的，rowStyle接受一个对象或一个函数。

因此，您可以rowStyle使用接收rowData作为参数的函数进行设置，例如：

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",
    };
  },
  // ...
};

推荐阅读