I have a MUI DataGrid that contains an action type column. I would like to hide or disable the EditIcon (or parent GridActionsCellItem) in the action column, when a row's data meets certain conditions. Although I have looked at the documentation, and searched StackOverflow and other sites, I have not been successful in finding a property, for which I could provide a suitable function. Any guidance would be appreciated. Thanks!
const columns = [
{
field: 'actions',
type: 'actions',
headerName: '',
width: 70,
cellClassName: 'actions',
getActions: ({ id }) => {
const isInEditMode = rowModesModel[id]?.mode === GridRowModes.Edit;
if (isInEditMode) {
return [
<Tooltip title={'Save'}>
<GridActionsCellItem
icon={<SaveIcon />}
label="Save"
sx={{
color: 'primary.main',
}}
onClick={handleSaveClick(id)}
/>
</Tooltip>,
<Tooltip title={'Cancel'}>
<GridActionsCellItem
icon={<CancelIcon />}
label="Cancel"
className="textPrimary"
onClick={handleCancelClick(id)}
color="inherit" />
</Tooltip>,
];
}
return [
<Tooltip title={'Edit Order'}>
<GridActionsCellItem
icon={<EditIcon />}
label="Edit Order"
className="textPrimary"
onClick={handleEditClick(id)}
color="inherit"
/>
</Tooltip>,
<Tooltip title={'Cancel Order'}>
<GridActionsCellItem
icon={<DeleteIcon />}
label="Delete Order"
onClick={handleDeleteClick(id)}
color="inherit"
/>
</Tooltip>,
]
},
},
...
}
You can use the row
parameter in the getActions
method, and use the current row data to conditionally show the edit icon:
const isRowEditable = (row) => {
// Your own implementation
}
const columns = [
{
field: 'actions',
type: 'actions',
headerName: '',
width: 70,
cellClassName: 'actions',
getActions: ({ id, row }) => {
// ...
if (isRowEditable(row)) {
return [
<Tooltip title={'Edit Order'}>
<GridActionsCellItem
icon={<EditIcon />}
label="Edit Order"
className="textPrimary"
onClick={handleEditClick(id)}
color="inherit"
/>
</Tooltip>,
// ...
];
}
},
},
...
}