mui-x-data-gridmui-x

How to hide EditIcon in MUI DataGrid


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

Solution

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