How to conditionally style ReactJs material-table cell based on cell values? - material-ui

Question

I am having a column in material-table with values like success,failed etc.
Based on these values I need to apply color on cell.
How to achieve it using material-table.

Answer 1

This answer is specific to react material-table
In the columns section we need to have something like mentioned below, so when data is rendered in the table it will conditionally apply style based on cell values.
{
title: 'Status', field: 'status',
render: rowData => {
return
rowData.status == "Pending" ? <p style={{ color: "#E87722", fontWeight: "bold" }}>{rowData.status}</p> :
rowData.status == "SUCCESS" ? <p style={{ color: "#008240", fontWeight: "bold" }}>{rowData.status}</p> :
<p style={{ color: "#B0B700", fontWeight: "bold" }}>{rowData.status}</p>
}
}

Answer 2

I added the style in the columns declaration.
const columns = [
{ title: "ID", field: "_id" },
{ title: "Email", field: "email" },
{
title: "First Login",
field: "first_login",
cellStyle: (e, rowData) => {
if (!rowData.first_login) {
return { color: "red" };
}
},
},
];

Answer 3

first you need classes which every of them has the style you desire then you can find some
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
in your matrial Ui code , then you need to create some span in which there will be values of table for example :
<TableCell align="right">
<span>{row.value}</span>
</TableCell>
then you need to check what your value is , for example if it is success return the class
you want and if it is something els give span some other class
<TableCell align="right">
<span className={row.value === "success" ? "text-success" : "text-warning"}>{row.value}</span>
</TableCell>
Hope this help you

Answer 4

Table Output
{ title: 'Status', field: 'status',render: rowData => {
return(
rowData.status == "TODO" ? <div><span style={{color: 'gray'}}><i className="fas fa-circle" aria-hidden="true"/></span> {" "}{" "} Todo</div> :
rowData.status == "Done" ? <div><span style={{color: 'Green'}}><i className="fas fa-circle" aria-hidden="true"/></span> {" "}{" "}Done</div> :
rowData.status == "Pending Review" ? <div><span style={{color: 'gray'}}><i className="fas fa-circle" aria-hidden="true"/></span> Pending Review</div> :
rowData.status == "Approved" ? <div><span style={{color: 'yellow'}}><i className="fas fa-circle" aria-hidden="true"/></span> Approved</div> :
rowData.status == "Rejected" ? <div><span style={{color: 'red'}}><i className="fas fa-circle" aria-hidden="true"/></span> Rejected</div> :
rowData.status == "In Progress" ? <div><span style={{color: 'gray'}}><i className="fas fa-circle" aria-hidden="true"/></span> In Progress</div> :
rowData.status == "Inspection Complete" ? <div><span style={{color: 'yellow' }}><i className="fas fa-circle" aria-hidden="true"/></span> Inspection Complete</div> :
<span>{rowData.status}</span>
)}}
Url for meterial table https://material-table.com