Can I make a Material-Table column render data like this?

Question

I am using a standard Material-Table. I would like to render the column status like in the image down below. I could use ANT Design to do this, but Material-Table requires a lot less code to allow for searching and filtering.

Here is a very simple example of my table. I am using some options to set the header color, font etc. I am also using rowStyle to alternate colors on each row.

const [intakes, setIntakes] = useState([]);
const columns = [
        { title: "Status", field: "Status" },
    ];

function Table() {
  return (
    <MaterialTable data={intakes.intakes} columns={columns} />
  );
}

Answer 1

In your columns definition, you will need to use the render property of the column object. A similar question is here

code example:

<MaterialTable       
    columns={[
      { title: "Name", field: "name" },
      { title: "Surname", field: "surname" },
      { title: "Id", field: "tableData.id" },
      { title: "Id+1", render: rowData => rowData.tableData.id + 1 },
    ]}/>

This is the important part here:

render: rowData => rowData.tableData.id + 1

using the rowData, you can call a function here using a specific field other than the id in the example (let's say

render: rowData => generateFlagText(rowData.tableData.Status)

And your function should return some div with classNames to display those status