[data grid] Expands endlessly when rendering zero rows on Chrome + Windows

[busticated]

Steps to reproduce

Link to live example: https://app.quilter.ai

Using Chrome v121 on Windows 10 and 11...

Steps:

1. Use an instance of @mui/x-data-grid on your site
2. Don't set any rows - e.g rows={[]}
3. View your page in your browser

Current behavior

On Windows, somehow the <DataGrid /> component grows endlessly in width. This does not happen on macOS (Sonoma)

https://github.com/mui/material-ui/assets/367674/c045aa7b-54ed-42ea-a565-bc05d8694404

when i look at the underlying DOM, i see JS is updating a series of style attributes on the column header elements

https://github.com/mui/material-ui/assets/367674/d2dd37eb-caa9-4de0-9864-7c475e82b2d5

Expected behavior

<DataGrid /> component renders as normal without auto-expanding width

Context

Just trying to use the <DataGrid /> to render a simple table 🤗

Your environment

npx @mui/envinfo

System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.11.0 - ~\AppData\Local\fnm_multishells\10148_1706729015593\node.EXE
    npm: 10.2.4 - ~\AppData\Local\fnm_multishells\10148_1706729015593\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (121.0.2277.83)
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.31
    @mui/core-downloads-tracker:  5.15.4
    @mui/icons-material: ^5.15.4 => 5.15.4
    @mui/lab: ^5.0.0-alpha.162 => 5.0.0-alpha.162
    @mui/material: ^5.15.4 => 5.15.4
    @mui/private-theming:  5.15.6
    @mui/styled-engine:  5.15.6
    @mui/system:  5.15.6
    @mui/types:  7.2.13
    @mui/utils:  5.15.6
    @mui/x-data-grid: ^6.19.1 => 6.19.1
    @types/react: ^18.2.45 => 18.2.45
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.3.3 => 5.3.3

Search keywords: Grid, Data Grid, Expand, x-data-grid

Search keywords:

[michelengelen]

@busticated Could you please provide a minimal code example in Codesandbox or Stackblitz? From the looks of it you are not using the DataGrid within a container with intrinsic dimensions, as described in the docs. Could you check if that fixes your problem? Thanks! 🙇🏼

[busticated]

@michelengelen thanks for taking a look 🙏 i'll try what you suggest and report back. one thing right off the top though, from the docs you linked:

By default, the Data Grid has no intrinsic dimensions. Instead, it takes up the space given by its parent. The grid will raise an error in the console if its container has no intrinsic dimensions.

I don't see any errors or notices in devtools console 🤔

[michelengelen]

@romgrk ^^

[romgrk]

I don't see a reproducible code example, could you provide one with this template: https://stackblitz.com/fork/github/mui/mui-x/tree/master/templates/x-data-grid, I'll take a look then.

[michelengelen]

Sry @romgrk for the misleading comment. I should have been more specific. I was pointing to the comment above with the intention to raise your awareness that the mentioned console warning/error is not happening if the grid is being used renderd in a container that has no intrinsic dimensions (the docs state that this should happen).

[busticated]

🤔 i'm a bit stumped on what exactly is meant by "intrinsic dimensions".

i added the autoHeight prop to the <DataGrid /> component itself and wrapped it with a <Box width="100%"> component (mirroring the template @romgrk shared). i think this reflects the behavior i'm after. in short, "as tall as the content, as wide as the container".

i doubt the wrapper is doing much though since the <DataGrid /> component was already nested in a hierarchy whose root component is <Container maxWidth="lg" sx={{ mx: 'auto' }} /> (yielding width: 100%; with max-width: 1200px; when you inspect styles).

when i manually check each parent's offsetWidth and clientWidth values (using devtools like $0.clientWidth, etc), i get a valid value - in my case 1152 (reflecting max-width of root container less padding).

is that sufficient to establish "intrinsic dimensions"? or is there an expectation that fixed px values will be set on the immediate parent of the <DataGrid /> instance?

[michelengelen]

Hey @busticated ... it basically means that the container needs set width and height, even if they are dynamic.

Here is a little example using a container with display: flex and flex: 1 on the grid: Dynamic Height

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.

[timothycoy]

I had this same issue across my app where on windows it would keep stretching whenever there is no rows. I tried to re-create it with CodeSandbox, but wasn't able to reproduce it. I also spent a lot of time trying to wrap the DataGrid component with different settings on a container element. This also didn't help. Finally, what worked for me was to set autoHeight on each of my DataGrids. In my case, this solved the issue.