[data grid] Continuous Height Growth in DataGrid with No Rows (Empty Data) and noRowsOverlay Slot Used

[ramchandra-st]

Steps to reproduce

1. Implement a MUI DataGrid in a React project.
2. Ensure that the DataGrid is configured to display data from an empty dataset (e.g., an API call returns no results) and no row slots are used.
3. Observe the DataGrid's behavior when rendered with no data.

Current behavior

The MUI DataGrid automatically continues to grow in a loop in height when there is no data to display.

Expected behavior

The MUI DataGrid should maintain a consistent height when no data is available. The DataGrid should not continuously grow in a loop.

Context

The MUI DataGrid component exhibits a continuously auto-growing issue when no data is present and no result slots are being used. This causes the DataGrid to expand in height unnecessarily, resulting in a large empty space where the rows would typically be displayed.

Your environment

npx @mui/envinfo

``` System: OS: macOS 13.5 Binaries: Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm pnpm: Not Found Browsers: Chrome: 127.0.6533.122 Edge: Not Found Safari: 16.6 npmPackages: @emotion/react: ^11.10.4 => 11.13.0 @emotion/styled: ^11.10.4 => 11.13.0 @mui/core-downloads-tracker: 5.16.7 @mui/material: ^5.15.14 => 5.16.7 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/system: ^5.15.11 => 5.16.7 @mui/types: 7.2.15 @mui/utils: 5.16.6 @mui/x-data-grid: ^7.3.0 => 7.12.1 @mui/x-date-pickers: ^7.1.0 => 7.12.1 @mui/x-internals: 7.12.0 @types/react: ^18.2.75 => 18.2.75 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: 5.4.5 => 5.4.5 ```

Search keywords: DataGrid

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[lenardchristopher]

Also seeing this on @mui/x-data-grid-pro 7.15.0. This is my code distilled down to basically nothing but the basics and it's still happening.

const columns: (GridColDef<Show> | GridActionsColDef<Show>)[] = [
{
    ...GRID_STRING_COL_DEF,
    field: 'name',
    headerName: 'Show',
    flex: 1,
    minWidth: 200,
},
{
    ...GRID_STRING_COL_DEF,
    field: 'venueName',
    headerName: 'Location',
    flex: 1,
    minWidth: 300,
},
];

<DataGridPro
    columns={columns}
    rows={allShows?.value ?? []}
    rowCount={allShows?.count ?? 0}
    loading={dataIsLoading}
    getRowId={row => row.competitionId}
/>

[github-actions[bot]]

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

[kenny-iag]

Also seeing this on @mui/x-data-grid-pro 7.15.0. This is my code distilled down to basically nothing but the basics and it's still happening.

const columns: (GridColDef<Show> | GridActionsColDef<Show>)[] = [
{
    ...GRID_STRING_COL_DEF,
    field: 'name',
    headerName: 'Show',
    flex: 1,
    minWidth: 200,
},
{
    ...GRID_STRING_COL_DEF,
    field: 'venueName',
    headerName: 'Location',
    flex: 1,
    minWidth: 300,
},
];

<DataGridPro
    columns={columns}
    rows={allShows?.value ?? []}
    rowCount={allShows?.count ?? 0}
    loading={dataIsLoading}
    getRowId={row => row.competitionId}
/>

I had the same issue with the infinitely expanding datagrid, although mine was different in that mine had rows. I fixed it by wrapping my DataGrid with a Box with height=500.

`

`