m4theushw
commented
1 year ago Since columns change on every render (because rowModesModel changes), the columns are reset and the current width is discarded and restored to the value provided in the column definition. To solve that, use initialState to provide width for columns. Using this prop makes sure that the width provided is the initial value, that can be changed later by resizing the column. Here's the updated CodeSandbox: https://codesandbox.io/s/serene-hofstadter-6g235c?file=/demo.tsx:6044-6203
Instead of
const columns = [
{
field: "age",
type: "number",
width: 80, // Comment or remove this line
},
];do
<DataGridPro
initialState={{
columns: {
dimensions: {
age: {
width: 80
}
}
}
/>
Order ID or Support key 💳 (optional)
68257
Duplicates
Latest version
The problem in depth 🔍
demo
https://codesandbox.io/s/hjsfl9?file=/demo.tsx
Change column header width manually, then insert/delete row. This Operation reset the changed column header width.
How Can I keep the width event if insert/delete row.
https://github.com/mui/mui-x/assets/11783802/cb0d600b-e3af-4043-a459-41459d5d85d0
Your environment 🌎
`npx @mui/envinfo`
``` System: OS: macOS 12.4 Binaries: Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node Yarn: Not Found npm: 9.6.7 - ~/develop/nitoel/tenant/supplier-frontend/node_modules/.bin/npm Browsers: Chrome: 114.0.5735.198 Edge: Not Found Safari: 15.5 npmPackages: @emotion/react: ^11.9.3 => 11.9.3 @emotion/styled: ^11.10.4 => 11.10.4 @mui/core-downloads-tracker: 5.10.13 @mui/icons-material: ^5.10.9 => 5.10.9 @mui/material: ^5.10.13 => 5.10.13 @mui/styled-engine: 5.13.2 @mui/system: 5.13.2 @mui/utils: 5.13.6 @mui/x-data-grid: 6.9.1 @mui/x-data-grid-premium: ^6.9.1 => 6.9.1 @mui/x-data-grid-pro: 6.9.1 @mui/x-license-pro: 6.9.0 @types/react: 18.0.14 => 18.0.14 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 4.7.4 => 4.7.4 ```