Question

我正在使用react-data-table-component的数据表，我的表是根据API响应数据生成的。我想为根据条件生成的每一行动态添加一个类。我该如何实现？

https://www.npmjs.com/package/react-data-table-component

我正在使用上面的数据表。

let  columns= [
            {
                name: "ID",
                selector: "ID",
                sortable: true,
                cell: row => <div>{row.ID}</div>
            }];

<Datatable
columns={columns}
data={this.state.mydata} />

我想根据条件将自定义CSS类添加到此数据表的整个行中。

Answer 1

我认为您可能在表格道具中寻找getTrProps回调：

getTrProps={ rowInfo => rowInfo.row.status ? 'green' : 'red' }

这是动态添加类或更改行元素样式的回调

如果我没记错的话应该像这样工作：

getTrProps = (state, rowInfo, instance) => {
  if (rowInfo) {
    return {
      className: (rowInfo.row.status == 'D') ? "status-refused" : "", // no effect
      style: {
        background: rowInfo.row.age > 20 ? 'red' : 'green'
      }
    }
  }
  return {};
}

render() {

  <Datatable
  columns={columns}
  data={this.state.mydata} 
  getTrProps={this.getTrProps}
  />

}

Answer 2

示例：

...
const conditionalRowStyles = [
  {
    when: row => row.calories < 300,
    style: {
      backgroundColor: 'green',
      color: 'white',
      '&:hover': {
        cursor: 'pointer',
      },
    },
  },
];
 
const MyTable = () => (
  <DataTable
    title="Desserts"
    columns={columns}
    data={data}
    conditionalRowStyles={conditionalRowStyles}
  />
);

更多信息请点击此处：） https://www.npmjs.com/package/react-data-table-component#conditional-row-styling

React-data-table-将CSS类动态添加到行

2 个答案: