我正在使用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类添加到此数据表的整个行中。
最佳答案
我认为您可能在表道具中寻找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}
/>
}