React-table 单个单元格样式

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

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

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

Answer 2

如果您使用的是 v7 react-table，请使用 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

Answer 3

我在谷歌上搜索并试图弄清楚这个问题很长一段时间，我所能找到的只是关于如何使用样式标签中的三元组执行此操作的解释，为 1 个值提供 2 种颜色的选项。我猜是因为你不能使用 switch if other javascript it CSS..

因此，如果有其他人尝试使用任意数量的颜色和其中任意数量的值来设置 react-table 的单元格的样式，这是我发现的解决方法。现在，举起手来，我是编码的新手，这可能比需要的复杂得多，可能有更好的方法，但我找不到其他任何地方的解释。事实上，我什至发现有人说它不能用 react-table v7 完成，所以我恢复到 v6，因为我找到了一个代码沙箱来演示这个。然而，它使用了背景颜色属性的单元格，这在 v7 中不再存在，这意味着它至少不可能那样做，所以我恢复到 react-table 的 v6 但是来了返回以在 v7 上尝试以下内容。

所以，这就是我的处理方式，请告诉我是否有更好的方法，或者这是否有效但有一种方法可以稍微清理一下！

1 列，在要为单元格着色的每一列中制作 key/value 对：functionName

2 创建一个新文件并将函数放在那里，创建一个参数为 'cell' 的函数并导出它，（它接收单元格对象）

3 将其导入列文件，

4 现在在函数文件中，将它设为 return 一个像你一样的 html 输入标签会用一个组件 returning jsx，它基本上是一个...

5 在输入标签中给它一个 class 名称并将其设置为 className={cell.value}

6 也给它赋值，设值={cell.value}

7 现在使用 CSS 删除输入字段的边框并使其填充 table 的单元格，使其看起来像一个带有颜色

的普通单元格

这会给你一个 table 完整的输入字段，但你不能编辑它们，因为它们被设置为隐藏在它们下面的 cell.value，你可以设置它的样式使其看起来像带有 CSS 的普通单元格，您可以设置它们的 class 名称并使用 css 将它们定位为颜色。我只用 returning div 尝试过，但它们隐藏了你单元格的值，也许你可以这样做并在 css 中使用 z-index，但我无法让它工作，CSS平时不是我朋友。

如果您希望能够编辑 table 单元格，请执行以下操作：

8 把函数做成react组件，只需要在顶部引入useState，

9 在组件函数中设置一个名为“something”的状态变量

10 将其初始值设置为 cell.value，现在将 className 设置为此变量，

11 现在在输入标签中创建一个 onChange 侦听器，在其中使用 'event' 参数创建一个箭头函数并调用 'setSomething' 并将其设置为等于 event.target.value.

12 设置另一个名为 say 'isNewEntry' 的状态变量并将其设置为 false

13 值属性现在使用三元； {!isNewEntry ？ cell.value : "something"} - 即，如果单元格未被编辑，则将值设置为原始值，如果已编辑则忽略原始值，现在将其设置为新条目。

我想就是这样..对我有用。就像我说的那样，我可能已经把自己束缚在逻辑上，可能有办法让它不那么复杂？

函数文件/反应组件：

import { useState, useEffect } from 'react'

const InputCell = (cell) => {

const [colorClass, setColorClass] = useState(cell.value)
const [isNewCharacter, setIsNewCharacter] = useState(false)

    return (
            <input 
              className={colorClass} 
              value={!isNewCharacter ? cell.value : colorClass}
              onChange={(event)=>{
                setIsNewCharacter(true)
                setColorClass(event.target.value)
                    }
              }}
            />
         )
       }

export default InputCell

const columns =[
{
    Header: "First Name",
    Footer: "First Name",
    accessor: "first_name",
    Cell: inputCell,
},
{
    Header: "Second Name",
    Footer: "Second Name",
    accessor: "second_name",
    Cell: inputCell,
}]

React-table 单个单元格样式

React-table Individual Cell Style

javascript

reactjs

react-table