React-Table 单元格样式定制化

Question

React-Table 单元格样式定制化

10

我正在使用 react-table，想要根据它们内部的数字更改特定单元格的背景颜色。例如，单元格 > 1 = 绿色，单元格 < 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

3个回答

1

如果您正在使用v7的React表格，请使用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

谢谢！你的问题已经解决了！ - nathaneast

1

我在谷歌上搜索并尝试了相当长一段时间才弄清楚这个问题，而我能找到的所有解释都是如何在样式标签中使用三元运算符为1个值提供2种颜色选项。我猜这是因为如果其他JavaScript或CSS中不能使用switch。

因此，如果还有其他人试图使用任意数量的颜色和任意数量的值来设置react-tables的单元格样式，那么这是我发现的一个解决方法。现在，我承认我是编码新手，这可能比必要的复杂得多，可能有更好的方法，但我在其他地方找不到解释。事实上，我甚至发现有人声明无法在react-table v7中完成此操作，因此我回到了v6，因为我找到了一个演示代码沙盒。然而，它使用了单元格的背景颜色属性，但在v7中不再存在，这意味着至少不能以这种方式完成，因此我回到了react-table的v6版本，但又回来尝试下面的方法在v7上进行。

所以，这就是我是如何做到的，请让我知道是否有更好的方法或者是否可以简化一下！

1 在列中，每个要着色的单元格中创建一个键/值对：函数名称

2 创建一个新文件并将函数放入其中，创建一个带有参数（例如“cell”）的函数并导出它（它接收单元格对象）

3 将其导入到列文件中

4 现在在函数文件中，使其返回一个HTML输入标记，就像使用JSX返回组件一样，它基本上是一个...

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

6 也给它一个值，将其设置为value={cell.value}

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

这将为您提供一个充满输入字段的表格，但您无法编辑它们，因为它们被设置为隐藏在它们下面的单元格值，并且您可以使用CSS将其样式设置为看起来像普通单元格，并且您可以设置它们的类名并使用CSS针对它们进行着色。我尝试过只返回div，但它们会隐藏您的单元格值，也许您可以这样做并在CSS中玩z-index，但我无法使其工作，通常CSS不是我的朋友。

如果您想要编辑表格单元格，请按照以下步骤操作：

8. 将函数变为React组件，只需在顶部导入useState。

9. 在组件函数中设置一个状态变量称为“something”。

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

11. 现在在input标记中创建一个onChange监听器，在其中创建一个带有“event”参数的箭头函数，并调用“setSomething”，并将其设置为event.target.value。

12. 设置另一个状态变量称为“isNewEntry”，并将其设置为false。

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

我认为就是这样了... 对我来说有效。就像我所说的，我可能会在逻辑上陷入困境，可能有一种方法可以使它不那么复杂？

Function file / react component:

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

- Jowin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nebuler · Accepted Answer

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