I am working on changing the background color of a cell based on its value.
Currently, I am utilizing the following library: react-data-table-component
Procedure:
- If the value is above 0, then the cell's background color will be red.
- Otherwise, there will be no background color.
Here is my code snippet for the Data Table:
const CountryTable = ({items}) => {
return(
<DataTable
title="Covid-19 Stats"
defaultSortAsc="false"
responsive
defaultSortField="cases"
defaultSortAsc={false}
striped
highlightOnHover
data={items}
columns={
[
{
name: '#',
selector: (row, index) => index+1,
disableSortBy: true,
},
{
name: 'Country',
selector: 'country',
sortable: true,
},
{
name: 'Total Cases',
selector: 'cases',
sortable: true,
},
{
getProps: (state, rowInfo) => {
if (rowInfo && rowInfo.row) {
return {
style: {
background:
parseInt(rowInfo.row.todayCases) > 0 ? "red" : null
}
};
} else {
return {};
}
},
name: 'Additional New Cases',
selector: 'todayCases',
sortable: true,
},
{
name: 'Current Active Cases',
selector: 'active',
sortable: true,
},
{
name: 'Total Deaths',
selector: 'deaths',
sortable: true,
},
{
name: 'Additional New Deaths',
selector: 'todayDeaths',
sortable: true,
},
{
name: 'Total Recoveries',
selector: 'recovered',
sortable: true,
},
{
name: 'Additional New Recoveries',
selector: 'todayRecovered',
sortable: true,
},
]
}
/>
);
}
Below is an image showing the expected result: