反应表单个单元格样式 [英] React-table Individual Cell Style

问题描述

我正在使用react-table，并且要根据内部特定单元格的数量来更改其背景颜色.前任.单元格> 1 =绿色，单元格<1 =红色，中间有不同的阴影.我已经看到了很多关于对行和列进行着色的内容，但是正在努力根据所加载的数据为特定的单元格着色.

I am using react-table and want to change the background color of specific cells based on their number inside. Ex. Cell > 1 = green, Cell < 1 = Red, and different shades in-between. I have seen a ton of stuff about coloring rows and columns, but am struggling on how to color specific cells based on the data that is loaded.

我知道这段代码行不通，但是希望它能显示出我正在寻找的内容:

I know this code doesn't work, but hopefully it will show kind of what I am looking for:

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

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

Hopefully that makes sense. Thanks for the help.

推荐答案

getTdProps 适用于整个行.在列定义中使用 getProps .例如:

getTdProps is for the entire row. Use getProps in the column definition instead. For example:

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

这篇关于反应表单个单元格样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！