4

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.

Column with diff color for cells based on values

yb007
  • 1,377
  • 2
  • 11
  • 17

4 Answers4

11

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>
        }
}
yb007
  • 1,377
  • 2
  • 11
  • 17
4

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" };
        }
      },
    },
  ];
Shano
  • 346
  • 4
  • 15
0

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

Shayan Moghadam
  • 1,860
  • 2
  • 10
  • 19
  • this is not related to OP's question this is simple table styling he is talking about Material-Table its a separate package. – Hadi Pawar Aug 19 '20 at 23:00
  • 1
    @HadiPawar Right , this question has 2 hashtags Material-UI and Material-Table , i think it's not a bad idea to keep this answer for those who will looking for Material-Ui table answer, it might help someone in future , Thank you for your comment – Shayan Moghadam Aug 21 '20 at 16:36
0

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

Jeewantha
  • 13
  • 4