React-Table: Change Background Color of Rows Depending Upon Row Props Value
I Have a Situation Where I Have to Change Background Color of Rows Depending Upon Row Props. I Am Currently Doing This: Const getTrProps = (State, rowInfo...
I have a situation where I have to change background color of rows depending upon row props. I am currently doing this:
const getTrProps = (state, rowInfo, instance) => {
if (rowInfo) {
return {
style: {
'background-color': rowInfo.original.customercomplaints.order_ref === currentOrderId ? '' : 'yellow',
}
}
}
return {};
}
In react-table, it is like this:
<ReactTableFixedColumns className="-striped"
columns={customerComplaintsColumns}
data={customerComplaintsData}
daultPageSize={10}
defaultFilterMethod={filterCaseInsensitive}
getTrProps={getTrProps}
/>
If I inspect the element, I do get this:
<div class="rt-tr -even" role="row" style="background-color: yellow;">
but it doesn't apply on the row. How can I resolve this?
My react version is ^16.13.1 and react-table version is 6.8.6.
1 Answer
First, you are wrong with assigning style. you might want to pass background-color as object style.
e.g.
return {
style: {
'background': rowInfo.original.customercomplaints.order_ref === currentOrderId ? '' : 'yellow',
}
}
Also instead of passing empty string as default, you might want to pass 'white' or color you want as default.
I think that is the most reason, please let me know if it doesn't work.
Example link which is written by react-table maintainer
James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.
