Question

我在材料表中有一列，其值包括成功，失败等。基于这些值，我需要在单元格上应用颜色。 如何使用材料表实现此目标。

Answer 1

此答案专门针对material-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 2

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

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 3

首先，您需要每个类都具有您想要的样式的类，然后您可以找到一些

  <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>

然后您需要检查您的值是什么，例如，如果成功，则返回该类您是否想要，如果这是els给其他课程的补充

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

希望对您有帮助

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 https://material-table.com

如何根据单元格值有条件地对ReactJs物料表单元格进行样式设置？

4 个答案: