反应表单个单元格样式

Question

我正在使用 react-table 并想根据它们内部的数量更改特定单元格的背景颜色。前任。 Cell > 1 = 绿色，Cell < 1 = 红色，以及介于两者之间的不同色调。我看过很多关于为行和列着色的内容，但我正在努力研究如何根据加载的数据为特定单元格着色。

我知道这段代码不起作用，但希望它能显示出我正在寻找的东西：

 <ReactTable
  data={data}
  columns={columns}
  getTdProps={(cellInfo) => {
      return {
        if (cellInfo.value > 1) {
            cellInfo.className = "green-cell";
        }
        if (cellInfo.value < 1) {
            cellInfo.className = "red-cell";
        }
      };
    }}
/>

希望这是有道理的。谢谢您的帮助。

原文由 David 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

getTdProps 用于整行。在列定义中改用 getProps 。例如：

 <ReactTable
    data={[
        { age: 8 },
        { age: 11 },
        { age: 9 },
        { age: 6 },
        { age: 12 },
    ]}
    columns={[
        {
            Header: 'Age',
            accessor: 'age',
            getProps: (state, rowInfo, column) => {
                return {
                    style: {
                        background: rowInfo && rowInfo.row.age > 10 ? 'red' : null,
                    },
                };
            },
        }
    ]}
/>

原文由 nebuler 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您使用的是 v7 反应表，请使用 getCellProps

   <Table
    columns={[
      {
        Header: "Age",
        accessor: "age"
      }
    ]}
    data={[{ age: 8 }, { age: 11 }, { age: 9 }, { age: 6 }, { age: 12 }]}
    getCellProps={(cellInfo) => ({
      style: {
        backgroundColor: cellInfo.value > 10 ? "red" : null
      }
    })}
  />

https://codesandbox.io/s/magical-yalow-g22yz?file=/src/App.js:2447-2459

原文由 sanme98 发布，翻译遵循 CC BY-SA 4.0 许可协议