Reputation: 763
I know how to change the background color of a row in a ReactTable
object (code below).
How do I change the color of the border of the row (not the border of the entire table)? I have tried replacing background
in the below code to border-color
, or borderColor
, or border
, and none of these options work - either, I get an error or nothing at all happens when it's compiled.
getTrProps={(state, rowInfo, column) => {
if(rowInfo) {
return {
style: {
background: "blue"
}
};
}
return {};
}
Upvotes: 1
Views: 6996
Reputation: 1
Follow this to change individual cell color based on row.value condition
{
Header: () => <div className="text-center font-weight-bold">Status</div>,
accessor: "selectedstatus",
className: "font",
width: 140,
Cell: (row) => (
<div
className="text-center h-6"
style={{ background: row.value === "Selected" ? "green" : "red" }}
>
{row.value}
</div>
),
},
Upvotes: 0
Reputation: 3621
Like this:
getTrProps = (state, rowInfo, instance) => {
if (rowInfo) {
return {
style: {
border: rowInfo
? rowInfo.row.age >= 20
? "solid 1px black"
: "none"
: "none"
}
};
}
return {};
};
Working Example: https://codesandbox.io/s/react-table-gettrprops-ijgzy
Upvotes: 1