Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
GeoffreyHervet opened this issue Mar 12, 2024 · 5 comments
Open

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

GeoffreyHervet opened this issue Mar 12, 2024 · 5 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! customization: extend Logic customizability support: commercial Support request from paid users

Comments

@GeoffreyHervet
Copy link

GeoffreyHervet commented Mar 12, 2024

Steps to reproduce

Link to live example: (required)

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

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

@GeoffreyHervet GeoffreyHervet added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 12, 2024
@cherniavskii
Copy link
Member

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.

@cherniavskii cherniavskii added component: data grid This is the name of the generic UI component, not the React module! customization: extend Logic customizability labels Mar 12, 2024
@michelengelen michelengelen changed the title [Datagrid] Entering in edit mode, reload column configuration [data grid] Entering in edit mode, reload column configuration Mar 13, 2024
@michelengelen michelengelen removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 13, 2024
@romgrk
Copy link
Contributor

romgrk commented Mar 15, 2024

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
Copy link
Member

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.

@cherniavskii cherniavskii added the support: commercial Support request from paid users label Mar 26, 2024
@GeoffreyHervet
Copy link
Author

Hello,

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

Thanks

@roveri-softwares
Copy link

Hello,

I have the same workaround.

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! customization: extend Logic customizability support: commercial Support request from paid users
Projects
None yet
Development

No branches or pull requests

5 participants