javascript - 基于 react-table-6 中另一列结果的颜色单元格

Question

当前，我正在显示表格，其中Protected列中的单元格在 True 时突出显示为绿色，如果为 False 则突出显示为红色：

Name |     Source     | Protected
________________________________
Ryan      Computer       False
Briana Phone, Computer   True
Shawn      Phone         True
Serge      Phone         False

我的相应代码如下所示：

const columns = [
      {
        Header: "Name",
        accessor: "Name",
        style: {
          textAlign: "center",
        },
      },
      {
        Header: "Source",
        accessor: "Source",
        style: {
          textAlign: "center",
        },
      },
      {
        Header: "Protected",
        id: "Protected",
        accessor: (d) => d.protected.toString(),
        getProps: (state, rowInfo) => {
          if (rowInfo && rowInfo.row) {
            return {
              style: {
                textAlign: "center",
                background: rowInfo.row.protected === "false" ? "red" : "green",
              },
            };
          } else {
            return {};
          }
        },
      },
    ];

是否可以根据相应属性是真还是假来删除Protected列并用红色或绿色突出显示该列？IESourceProtected

Name |     Source (highlighted color)   
_____________________________________
Ryan       Computer  (red)     
Briana     Phone, Computer (green)  
Shawn      Phone (green)      
Serge      Phone (red)       

我的数据如下所示：

[
  {
    "Name": "Ryan",
    "Protected": false,
    "Source": ["Computer"],
  },
  {
    "Name": "Briana",
    "Protected": true,
    "Source": ["Phone, Computer"],
  },
  {
    "Name": "Shawn",
    "Protected": true,
    "Source": ["Phone"],
  },
  {
    "Name": "Serge",
    "Protected": false,
    "Source": ["Phone"],
  }
]

Answer 1

是的，这是可能的。

为此，在创建列时，您可以使用Cell道具影响其样式，并<div />在数据内容周围添加 a。

像这样：

columns = [
  {
    Header: "Source",
    accessor: "Source",
    style: {
      textAlign: "center",
    },
    Cell: (row) => {
      return (
        <div style={{ background: row.original.Protected === 'true' ? 'green' : 'red' }}>
          {row.original.Source}
        </div>
      );
    },
  });
];