[data grid] MUI: useResizeContainer - The parent DOM element of the data grid has an empty width.

[Mattc1221]

Order ID 💳

51377

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

In our application, our DataGridPro component works well but I am getting the following error for every DataGrid component when I empty cache and hard reload the page:

If I'm understanding correctly, the issue is that the container around DataGrid needs some set size as the DataGrid component expands to fill that size. In my case, we have a vertical scrollable container with many DataGrid components inside. The width for each DataGrid component is based on its content. Following this https://github.com/mui/mui-x/issues/1241#issuecomment-1323284756 comment to implement dynamic column widths. We calculate the width of each column based on content length (max of 500px), sum all column widths together and then set the width property of the container around the DataGrid component to that summed width. We also have a table header that has a dynamic min width and we want the DataGrids min width to be bound by that as well

Note, I have also tried inserting the example code from your doc's site (here) into the project and the issue was still present.

This is also a very tricky issue to reproduce in a sandbox. I will keep trying to create a repro, but for now, I'll add the DOM tree.

DOM tree

```html

sheet1

v1

·  

Showing

of 2 rows

ColumnOne

ColumnTwo

ColumnThree

123456

654321

1.23

347234

394858

2.35

```

Table Styling

```scss .Table-Container { width: 100%; max-width: -webkit-fill-available; border: 5px solid white; .Table-Resize-Container { min-width: -webkit-fill-available; max-width: -webkit-fill-available; .MuiDataGrid-root { border: none; .MuiDataGrid-columnHeader { padding: 0 8px; .MuiDataGrid-columnHeaderTitleContainerContent { font-size: 14px; color: gray; } .MuiDataGrid-columnSeparator { width: 0; visibility: hidden; } .MuiDataGrid-menuIcon { margin-left: -6px !important; } } .MuiDataGrid-row { &.odd { background: #f5f5f5; } &:hover { background: #f0f0f0; } .MuiDataGrid-cell { font-size: 15px; color: #2e2f3e; } &.expanded { min-height: auto !important; max-height: none !important; .MuiDataGrid-cell { min-height: auto !important; max-height: none !important; overflow: visible; text-overflow: unset; white-space: break-spaces; .link-wrapper, span { width: 100%; overflow: visible !important; text-overflow: unset !important; overflow-wrap: break-word; } } } } .MuiDataGrid-footerContainer { justify-content: start; } } } ::-webkit-scrollbar { appearance: none; height: 0.45rem; } ::-webkit-scrollbar-thumb { height: 3px; background-color: rgba(0, 0, 0, 0.3); border: 2px solid white; border-radius: 16px; } } ```

Your environment 🌎

`npx @mui/envinfo`

System: - OS: macOS 12.2.1 - CPU: (10) arm64 Apple M1 Max - Memory: 676.78 MB / 32.00 GB - Shell: 3.2.57 - /bin/bash Binaries: - Node: 16.15.1 - /usr/local/bin/node - npm: 8.1.2 - /usr/local/bin/npm Managers: - Homebrew: 3.6.6 - /usr/local/bin/brew - pip3: 22.3.1 - ~/.pyenv/shims/pip3 - RubyGems: 3.0.3.1 - /usr/bin/gem Utilities: - Make: 3.81 - /usr/bin/make - GCC: 12.3. - /usr/bin/gcc - Git: 2.37.0 - /usr/local/bin/git - Clang: 13.0.0 - /usr/bin/clang Servers: - Apache: 2.4.51 - /usr/sbin/apachectl Virtualization: - Docker: 20.10.17 - /usr/local/bin/docker IDEs: - Nano: 2.0.6 - /usr/bin/nano - Vim: 8.2 - /usr/bin/vim - Xcode: /undefined - /usr/bin/xcodebuild Languages: - Bash: 3.2.57 - /bin/bash - Go: 1.19.1 - /usr/local/go/bin/go - Perl: 5.30.3 - /usr/bin/perl - Python: 3.8.13 - /Users/mattc1221/.pyenv/shims/python - Python3: 3.8.13 - /Users/mattc1221/.pyenv/shims/python3 - R: 4.2.1 - /usr/local/bin/R - Ruby: 2.6.8 - /usr/bin/ruby Databases: - PostgreSQL: 14.4 - /usr/local/bin/postgres - SQLite: 3.36.0 - /usr/bin/sqlite3 Browsers: - Chrome: 108.0.5359.98 - Safari: 15.3

[m4theushw]

Dynamic column width is for when you don't know the width of the content beforehand but knows that maximum width of the container = possible horizontal scrollbar. It seems that in your application you want dynamic column width but also to have the width of the grid equals to the sum of all columns = no horizontal scrollbar. I'm correct? If yes, then it more or less the behavior of autoHeight, but for width, which is not supported yet.

[Mattc1221]

@m4theushw

You are correct. However, I have also tried removing that logic and setting a fixed width in the parent component of the DataGrid and am still getting this error message.

[martin-mael]

In my case, I had this issue when I was passing a sortModel to initialState with columns that were not defined (I have multiple DataGrid scenarios, with different columns, so i was passing multiple columns to the initialState). After removing the missing columns, the error was gone !

Before :

initialState={{
  sorting: {
    sortModel: [
      { field: 'account', sort: 'asc' },
      { field: 'counterpart', sort: 'asc' },
      { field: 'date', sort: 'asc' },
     ],
  },
}}

After (initialSortModel passed as prop, with type GridSortItem) :

initialState={{
  sorting: {
    sortModel: initialSortModel && [initialSortModel],
  },
}}

[RobinTail]

the problem can be the testing environment and the way how MUI detects it — see the /jsdom/ regex on the screenshot above. In my case, the issue was caused by using HappyDOM instead of JSDOM in vitest (it's faster), but it has to pretend something in config — that fixed it

    environmentOptions: {
      happyDOM: {
        width: 1280,
        height: 1024,
        settings: {
          // @see https://github.com/capricorn86/happy-dom/issues/482#issuecomment-1713338378
          navigator: {
            userAgent: "Mozilla/5.0 HappyDOM/jsdom/compatible", // <— this
          },
        },
      },
    },

[romgrk]

For the record, having the grid work in jsdom/happy-dom is somewhat hard, those are completely emulated environments that lack some standard browser APIs and features. Those are fine for simple testing, but for real production testing I would recommend playwright or any other headless browser runner.

@Mattc1221 Could you confirm if this issue is still relevant to you? If so, we would need a clear reproduction case to assist with the error.

[github-actions[bot]]

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