DataGrid with "autoHeight" infinite re-renders and keeps increasing width

[oalexdoda]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Use a <DataGrid /> with autoHeight

Current behavior 😯

The DataGrid keeps expanding width

Expected behavior 🤔

It shouldn't

Context 🔦

"@mui/x-data-grid": "^6.0.3",

Demo-DateGrid.Bug.mov

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 13.2.1
  Binaries:
    Node: 18.13.0 - /usr/local/bin/node
    npm: 8.19.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Safari: 16.3

Order ID or Support key 💳 (optional)

No response

[oalexdoda]

Just tested with 5.17.26 and it doesn't happen. But with anything newer than that it does.

[MBilalShafi]

It looks related to #8182 which has been fixed and released in v6.0.4. Can you try using v6.0.4 and see if the issue is still reproducible?

If it is, it will be great to have a minimal reproduction in a codesandbox. You can use this as a starting point: https://codesandbox.io/s/datagrid-v5-quick-start-54iz1

[Deraen]

Here is one related example with 6.0.4 and what I'm seeing in a project, though this doesn't use autoHeight, so maybe this is a separate problem?

https://codesandbox.io/s/data-grid-community-forked-3ctumy

• flex container
• border on the MuiDataGrid-main
• container height so big that the table doesn't have a vertical scroll

(this one can be fixed by moving the border from main container element to root)

[yaredtsy]

the style is glitching.

bandicam.2023-04-03.19-58-39-184.mp4

give the data grid a width.

<DataGridPro
        sx={{
          width: "100%"
        }}
      ....
<DataGridPro/>

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[Luv-m]

Any update on this bug. I can still see this exact issue in 6.7.0.

[houman-sanati]

set its parent display property to grid :

sx={{display: 'grid'}}

[steckdev]

set its parent display property to grid :

sx={{display: 'grid'}}

This worked perfectly for us. Simple fix to ensure the the infinite horizontal growth went away. We only had 1/2 of the browsers affected by this issue.

[pwuk]

display: grid fixed a weird issue for me too.
I have a grid, which when the rows array is empty causes the grid to constantly expand, 1px at a time
Actually, it fixed two issues !
Second, my grid colums are all flex: N and would grow when expanding the width but would not shrink this also fixed that!

[Sadiqshah94]

Im facing the same issue
Now I fixed with using
sx={{display: 'grid'}}

  <DataGrid
      rows={rows}
      sx={{display: 'grid'}}
      columns={columns}
      checkboxSelection
      onRowSelectionModelChange={(selectionModel) =>
        handleRowSelectionChange(selectionModel as GridRowId[])   
      }
      slots={{
        toolbar: () => (
          <CustomToolbar
            exportToPDF={exportToPDF}
          />
        ),
        noRowsOverlay: NoRowsOverlay,
      }}
      disableRowSelectionOnClick
      density='compact'
      pagination
      paginationModel={paginationModel}
      rowCount={rowCount}
      paginationMode={paginationMode}
      pageSizeOptions={[5, 10, 20, 50]}
      onPaginationModelChange={handlePaginationModelChange}
    />