[data grid] Aggregated columns don't respond to changes in the "editable" property of the GridColDef

[JohannesByle]

Steps to reproduce

Link to live example: (required)
https://codesandbox.io/s/cranky-carson-v8g2v7?file=/src/demo.tsx
Steps:

1. Click the "Editable: false" button to enable editing
2. Attempt to edit the "Unit Price" column

Current behavior

When controlling a columns editable property using a stateful value aggregated columns don't respond to changes to the value. So in the codesandbox example the editable state of the aggregated unitPrice column always reflects the initial value of the useState variable. The un-aggregated quantity column reflects the correct state.

Expected behavior

I would expect editable state of the aggregated column to reflect the state in the GridColDef. In the case of this example I would expect the unitPrice column to behave like the quantity column.

Context

I had a grid to display sub-items based on items selected in a sidebar. Some of these items are read only, others are editable. The column I was editing happened to be aggregated, and after switching to v6 I noticed that I couldn't edit the column anymore. I was able to work around the issue by placing a key on the parent component so that its state reset whenever the item changed.

Your environment

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz        
    Memory: 11.76 GB / 31.71 GB
  Binaries:
    Node: 14.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Managers:
    pip3: 23.1.2 - ~\AppData\Local\Programs\Python\Python311\Scripts\pip3.EXE
  Utilities:
    FFmpeg: 13.1.0 - C:\Program Files\ffmpeg-master-latest-win64-gpl\bin\ffmpeg.EXE
    Curl: 8.0.1 - C:\WINDOWS\system32\curl.EXE
  IDEs:
    VSCode: 1.83.1 - C:\Users\johannesbyle\AppData\Local\Programs\Microsoft VS Code\bin\code.CMD
  Languages:
    Python: 3.11.4
  Browsers:
    Chrome: 118.0.5993.118
    Edge: Spartan (44.19041.3570.0), Chromium (118.0.2088.76)
    Internet Explorer: 11.0.19041.3570

Search keywords: aggregation, editing
Order ID: 71096

[DanailH]

@JohannesByle the problem is not with the property itself but rather the way you control it. In order to change column configuration once the grid is initially loaded you need to use apiRef.current.updateColumns method. This is explained in the docs here https://mui.com/x/react-data-grid/column-definition/ (right below the first example).

[JohannesByle]

Thanks for the quick response. I had read that section of the docs, but because the two different columns behaved differently I assumed it was a bug.

In my case I have props that control whether or not a column is editable. Would the correct approach be to update the columns in a useEffect like this?

  const {editable} = props;

  useEffect(() => {
    const cols = baseCols.map((c)=> ({...c, editable}));
    apiRef.current.updateColumns(cols);
  }, [editable]);

[JohannesByle]

After doing further testing it looks like it's broken for the apiRef.current.updateColumns as well:
https://codesandbox.io/s/interesting-wiles-mr5vx5?file=/src/demo.tsx

[DanailH]

Ah ok, I can confirm, It doesn't seem to be working.

[scamden]

this is a fairly huge bug.. any update on progress?

[DanailH]

@scamden I've added it for today's grooming session so we can discuss and see how to proceed.

[cherniavskii]

This is a regression from #9334

v6.9.2: https://codesandbox.io/s/shy-wildflower-xqzpqp
v6.10.2: https://codesandbox.io/s/angry-david-ncrxph

The relevant change is here: https://github.com/mui/mui-x/pull/9334/files#diff-d6677e3149e60f2ede0c6ad76a8014630705d0668b5d8c92284a8e643d75a145