How to customise single row on the basis of sorting in react-bootstrap-table

Question

I am trying to give background color to rows according to column status. But unable to do so. Data is coming from 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>

Nadezhda Serafimova · Answer 1 · 2018-06-11T08:36:27.900

1

You can use trClassName property and change it according the status of the row.

Here is how it will look like:

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

and the function for example:

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

edited Jun 11 '18 at 08:36

answered Jun 08 '18 at 12:11

Nadezhda Serafimova

722
1
13
21

I want to change the color of all rows having a status "In Progress" otherwise it remains white. – Manish Jun 11 '18 at 07:55
Here is the main check `return row.status === 'In Progress' ? 'red' : 'white'`. Can you please check again the data in `row`? And do you have classes for adding the different colors? – Nadezhda Serafimova Jun 11 '18 at 08:39
Nadezhda, I wrote this code only but it is not working."Status" is the header under which all the values of status in json are coming. Now if value of status in json is "In Progress" so it will come under Status header and that row should become blue. – Manish Jun 11 '18 at 10:27
Can you please change `dataField='Status'` to `dataField='status'`? – Nadezhda Serafimova Jun 11 '18 at 12:27
Yes Nadezhda i have changed it but it's not working. – Manish Jun 12 '18 at 03:26
So please share the code, everything seems to be correct. – Nadezhda Serafimova Jun 12 '18 at 20:11

How to customise single row on the basis of sorting in react-bootstrap-table

1 Answers1