0
214
ViewsCan I make a Material-Table column render data like this?
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} />
);
}
·
Santiago Gelvez
1 answers
Answer question0
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
·
Santiago Gelvez
Report
Answer question