[data grid] Entering in edit mode, reload column configuration

[GeoffreyHervet]

Steps to reproduce

Link to live example: (required)

1. Resize the width of the Name column
2. Enter in edit mode in a row

https://github.com/mui/mui-x/assets/617780/1a0c3d63-b152-4eec-8725-34f498903002

Current behavior

When you resize a column (or even you reorder the columns), then you enter in edit mode, you lost the width of the column.

Expected behavior

The column width should not be updated.

Context

If a useMemo is used for the column definition, it won't fix the issue, you will have a issue in the action column. getActions won't have the right value of rowModesModel. If in the useMemo, you give rowModesModel as a dependency, you will have the same issue ...

Your environment

{
  "name": "vrwhkv--run",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "11.11.4",
    "@emotion/styled": "11.11.0",
    "@mui/icons-material": "5.15.12",
    "@mui/material": "5.15.12",
    "@mui/system": "^5.4.1",
    "@mui/x-data-grid": "6.19.6",
    "@mui/x-data-grid-generator": "6.19.6",
    "@mui/x-data-grid-pro": "^6.19.6",
    "@types/react": "18.2.65",
    "@types/react-dom": "18.2.21",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}

Search keywords: datagrid edit resize Order ID: Not provided

[cherniavskii]

This is a tricky one. You're right about the useMemo - it's not going to change anything because the columns would be instantiated on dependencies change anyway.

To solve this issue, we need to somehow pass things to the actions cells without creating columns during render. I'll think about this.

[romgrk]

Is there any issue beyond column width? We could maintain a column width cache to avoid resetting it. Not elegant at all, but column width is kinda special as it can be changed by the end-user without going through the columns prop.

[cherniavskii]

Is there any issue beyond column width?

Yes, column ordering. Maintaining the column sizes and order makes sense to me. If users need to reset the columns – they can force it by changing the key on the data grid.

[GeoffreyHervet]

Hello,

Does the label support:commercial means the ticket is prioritized and the issue will be fixed ?

Thanks

[roveri-softwares]

Hello,

I have the same workaround.

Thanks

✌

[Csszabi98]

A rather simple client world workaround is to listen for onColumnResize and/or onColumnOrderChange events on the grid, store the updated values for each field, then feed it into the column definition for each changed column (columns prop). Performance seems not to be impacted (Your mileage may vary based on your use case).

[romgrk]

For context, the root cause here is that users are expecting the grid to be both in controlled mode (if the columns prop changes, update the columns with that value) and uncontrolled mode (if the user resizes or reorders the grid, just do the change without needing an update to columns). The proper react way to do it is either one of those, not both. Allowing both like we've done until now is the cause of this issue. So the workaround above by @Csszabi98 is the right one: use the grid in controlled mode if you need control over everything.

I'm not sure if we had discussed any solution for the issue. The suggestion I made above would not work and would cause bugs for some use-cases. Imho we should define what controlled and uncontrolled modes are, and don't mix the paradigms. We could also make it easier for users to understand how to use the grid in both modes.

[cherniavskii]

This can be solved by passing things to the component returned by getActions via the React context. This would allow having a stable columns reference, therefore columns size and order won't be reset on rerender. I'll create a demo later.

Related: https://github.com/mui/mui-x/issues/6220

[claudio-viola]

came here after i had already implemented. Used onColumnWidthChange and useState to save widths and apply to columns no issues like @Csszabi98 suggested

[cherniavskii]

Hi, I've created a demo that addresses the issues with column sizing and ordering being reset: https://deploy-preview-15040--material-ui-x.netlify.app/x/react-data-grid/editing/#full-featured-crud Feel free to use it as a workaround until we have a better alternative.

Meanwhile, I've opened https://github.com/mui/mui-x/pull/15041 to explore a better solution.

Hope this helps!