Q:

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

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.

A:

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>
        }
}

