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

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