如何在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>

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'
}