I need your help related to mui/x-data-grid. I am trying to render a cell in mui/x-data-grid with text/icon in it based on the text value, but unable to do so. The following is the codesandbox link: codesandbox link
And I want something similar to this.
You can use the Chip component in MUI instead of rolling out your own, to make it look like in the screenshot, set its variant to outlined. Below is an example:
function getChipProps(params: GridRenderCellParams): ChipProps {
if (params.value === "RED") {
return {
icon: <WarningIcon style={{ fill: red[500] }} />,
label: params.value,
style: {
borderColor: red[500]
}
};
} else {
return {
icon: <CheckCircleIcon style={{ fill: blue[500] }} />,
label: params.value,
style: {
borderColor: blue[500]
}
};
}
}
const columns: GridColDef[] = [
{...},
{
field: "status",
headerName: "Status",
renderCell: (params) => {
return <Chip variant="outlined" {...getChipProps(params)} />;
}
}
];
MUI column data grid example :
{
field: "",
width:150,
renderCell: (cellValues) => {
return (
<>
<IconButton
color="secondary"
aria-label="add an alarm"
onClick={(event) =>
this.handleModalDelete(event, cellValues)
}
>
<DeleteIcon style={{ color: blue[500] }} />
</IconButton>
</>
);
},
}