如何根据单元格值有条件地设置 ReactJs material-table 单元格的样式？

Question

我在 material-table 中有一个列，其中包含成功、失败等值。基于这些值，我需要在单元格上应用颜色。 如何使用material-table.

实现

Answer 1

首先你需要class每一个都有你想要的风格然后你可以找到一些

  <TableCell align="right">{row.calories}</TableCell>
  <TableCell align="right">{row.fat}</TableCell>
  <TableCell align="right">{row.carbs}</TableCell>
  <TableCell align="right">{row.protein}</TableCell>

在您的矩阵 Ui 代码中，然后您需要创建一些跨度，其中将包含 table 的值，例如：

  <TableCell align="right">
       <span>{row.value}</span>
  </TableCell>

然后你需要检查你的价值是什么，例如如果它是成功 return class 你想要，如果它是 els 给 span 一些其他 class

  <TableCell align="right">
      <span className={row.value === "success" ? "text-success" : "text-warning"}>{row.value}</span>
  </TableCell>

希望对您有所帮助

Answer 2

此答案特定于反应material-table

在列部分，我们需要像下面提到的那样，所以当数据在 table 中呈现时，它会根据单元格值有条件地应用样式。

    {
    title: 'Status', field: 'status',
        render: rowData => {
            return
            rowData.status == "Pending" ? <p style={{ color: "#E87722", fontWeight: "bold" }}>{rowData.status}</p> :
                rowData.status == "SUCCESS" ? <p style={{ color: "#008240", fontWeight: "bold" }}>{rowData.status}</p> :
                    <p style={{ color: "#B0B700", fontWeight: "bold" }}>{rowData.status}</p>
        }
}

Answer 3

我在列声明中添加了样式。

const columns = [
    { title: "ID", field: "_id" },
    { title: "Email", field: "email" },
    {
      title: "First Login",
      field: "first_login",
      cellStyle: (e, rowData) => {
        if (!rowData.first_login) {
          return { color: "red" };
        }
      },
    },
  ];

Answer 4

Table Output

{ title: 'Status', field: 'status',render: rowData => {                                         
                                            
return(
    rowData.status == "TODO" ? <div><span style={{color: 'gray'}}><i className="fas fa-circle" aria-hidden="true"/></span> {" "}{" "} Todo</div> :
    rowData.status == "Done" ? <div><span style={{color: 'Green'}}><i className="fas fa-circle" aria-hidden="true"/></span> {" "}{" "}Done</div> :
    rowData.status == "Pending Review" ? <div><span style={{color: 'gray'}}><i className="fas fa-circle" aria-hidden="true"/></span> Pending Review</div> :
    rowData.status == "Approved" ? <div><span style={{color: 'yellow'}}><i className="fas fa-circle" aria-hidden="true"/></span> Approved</div> :
    rowData.status == "Rejected" ? <div><span style={{color: 'red'}}><i className="fas fa-circle" aria-hidden="true"/></span> Rejected</div> :
    rowData.status == "In Progress" ? <div><span style={{color: 'gray'}}><i className="fas fa-circle" aria-hidden="true"/></span> In Progress</div> :
    rowData.status == "Inspection Complete" ? <div><span style={{color: 'yellow' }}><i className="fas fa-circle" aria-hidden="true"/></span> Inspection Complete</div> :
     <span>{rowData.status}</span>
)}}

Url for meterial table https://material-table.com

如何根据单元格值有条件地设置 ReactJs material-table 单元格的样式？

How to conditionally style ReactJs material-table cell based on cell values?

material-ui

material-table