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] autosizeOnMount renders twice causing autosize blink #15044

Open
nphmuller opened this issue Oct 21, 2024 · 1 comment
Open

[data grid] autosizeOnMount renders twice causing autosize blink #15044

nphmuller opened this issue Oct 21, 2024 · 1 comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module!

Comments

@nphmuller
Copy link

nphmuller commented Oct 21, 2024

Steps to reproduce

Link to live example: (required)
https://stackblitz.com/edit/react-jisqwk?file=Demo.tsx

Steps:
Just open the link

Repro

Current behavior

You can see an initial render where the columns are not sized correctly, and very quickly it re-renders with the columns sizes calculated correctly.

Expected behavior

The initial render that already shows all data should ideally be auto sized already.

Context

No response

Your environment

(My current env uses MUI-X DataGrid v6, but I also tried v7 and the issue also occurs there)

npx @mui/envinfo
  System:
    OS: macOS 15.0
  Binaries:
    Node: 20.13.0 - ~/.nvm/versions/node/v20.13.0/bin/node
    npm: 10.8.3 - ~/.nvm/versions/node/v20.13.0/bin/npm
    pnpm: 9.6.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 129.0.6668.101
    Edge: Not Found
    Safari: 18.0
  npmPackages:
    @emotion/react: ^11.10.5 => 11.13.3
    @emotion/styled: ^11.10.5 => 11.13.0
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.16.7
    @mui/icons-material: ^5.14.19 => 5.16.7
    @mui/lab: ^5.0.0-alpha.162 => 5.0.0-alpha.173
    @mui/material: ^5.14.20 => 5.16.7
    @mui/material-nextjs: ^5.15.3 => 5.16.6
    @mui/private-theming:  5.16.6
    @mui/styled-engine:  5.16.6
    @mui/system:  5.16.7
    @mui/types:  7.2.17
    @mui/utils:  5.16.6
    @mui/x-data-grid:  6.20.4
    @mui/x-data-grid-pro: ^6.18.4 => 6.20.4
    @mui/x-date-pickers:  6.20.2
    @mui/x-date-pickers-pro: ^6.18.4 => 6.20.2
    @mui/x-license-pro:  6.10.2
    @types/react: ^18 => 18.3.9
    react: ^18 => 18.3.1
    react-dom: ^18 => 18.3.1
    typescript: ^5 => 5.6.2

Search keywords: datagrid data grid autosizeOnMount Autosizing

@nphmuller nphmuller added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 21, 2024
@github-actions github-actions bot added the component: data grid This is the name of the generic UI component, not the React module! label Oct 21, 2024
@KenanYusuf KenanYusuf added support: commercial Support request from paid users and removed support: commercial Support request from paid users labels Oct 22, 2024
@KenanYusuf
Copy link
Contributor

This flicker is undesirable - will add this issue to the board to discuss with the team about potential solutions.

@KenanYusuf KenanYusuf removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module!
Projects
Status: 🆕 Needs refinement
Development

No branches or pull requests

2 participants