I am facing an issue with a data-table that is not in a class extending the React.Component, unlike some examples I have come across. My goal is to setCellProps based on certain conditions as outlined below:
If utilization is less than or equal to 50, then color should be green and padding should be 5. If utilization is greater than 50, then color should be red and padding should still be 5.
I have not been able to locate any examples of how to handle multiple conditions like this without extending react...
<code>
const rowContents = teams.filter((team) => !!utilizations[team.id])
.map((team: Team) => ({
team,
summary: utilizations[team.id].getSummary(),
}))
.map(({ team, summary }) => (
[team.name, // name
summary.utilization.toLocaleString()])
const columns = [
{
name: "Team",
options: {
filter: true,
setCellProps: () => ({ style: { padding: 5 }}),
setCellHeaderProps: () => ({ style: { padding: 5 }}),
}
},
{
name: "Utilization",
options: {
filter: true,
setCellProps: () => ({ style: { padding: 5 }}),
setCellHeaderProps: () => ({ style: { padding: 5 }}),
}
}
return (
<MUIDataTable
title={'Teams'}
columns={columns}
data={rowContents}
options={
{"draggableColumns":{"enabled":true},
"pagination":false,
"selectableRows":"none"}
}
/>
);