reactjs - react-bootstrap-table中如何在排序的基础上自定义单行

Question

我正在尝试根据列状态为行提供背景颜色。但无法这样做。数据来自json。

<BootstrapTable data={details} options={this.options} search>
 <TableHeaderColumn dataField='date'>Date</TableHeaderColumn>
 <TableHeaderColumn dataField='Quantity'>Quantity</TableHeaderColumn
 <TableHeaderColumn dataField='Name'>Name</TableHeaderColumn>
 <TableHeaderColumn isKey={true} dataField='Status'>Status</TableHeaderColumn>

    </BootstrapTable>

标签： reactjsreact-bootstrap-table

Answer 1

您可以使用trClassName属性并根据行的状态进行更改。

这是它的样子：

<BootstrapTable
    data={details}
    options={this.options}
    search
    trClassName={this.trClassFormat}
>
    <TableHeaderColumn dataField='date'>Date</TableHeaderColumn>
    <TableHeaderColumn dataField='quantity'>Quantity</TableHeaderColumn>
    <TableHeaderColumn dataField='name'>Name</TableHeaderColumn>
    <TableHeaderColumn isKey dataField='status'>Status</TableHeaderColumn>
</BootstrapTable>

和功能例如：

trClassFormat(row, rowIndex) {
    return row.status === 'In Progress' ? 'red' : 'white'
}