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

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" };
        }
      },
    },
  ];