How to hide EditIcon in MUI DataGrid

Question

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>,
      ]
    },
  },
  ...
}

Answer 1

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>,
          // ...
        ];
      }
    },
  },
  ...
}

Answer 2

Through trial and error guesswork, I discovered the disabled property of the GridActionsCellItem element. I would rather hide the Edit button to match the existing application's behavior, but disabling will work. Hope this helps someone with a similar question.

  const columns = [
    {
      field: 'actions',
      type: 'actions',

... etc.

        return [
          <Tooltip title={'Edit Order'}>
            <GridActionsCellItem
              icon={<EditIcon />}
              label="Edit Order"
              className="textPrimary"
              onClick={handleEditClick(id)}
              color="inherit"
              disabled={shouldDisableEdit(id)}
            />
          </Tooltip>,
... etc.