Как настроить одиночную строку на основе сортировки в реакции-бутстрап-таблице

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