[data grid] Discrepancy between data grid virtualScroller height and overlay

[timozander]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-fqwwfbhv?file=Demo.tsx
2. Issue is immediately visible

Current behavior

The docs state that

By default, the Data Grid has no intrinsic dimensions. Instead, it takes up the space given by its parent.

(source)

However, at the same time it states

When data grid has no content, overlays (such as "Loading" or "No rows") take the height of two rows by default.

(source)

As a consequence, if I have pinned columns (that have a background via the filler container) and have no rows, the virtual spacer pushes away the background:

Expected behavior

It seems like these two are not aligned: Either the grid, by default, should take all the space of the parents (and therefore, so should the virtual scroller), or it should completely shrink down to two rows. However, it now is in this weird middle ground.

It's manually fixable by setting the --DataGrid-overlayHeight, but IMO this visual issue should not be the default.

Context

A data grid with a pinned action column that may at times be empty, therefore being visually off.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.7.1
  Binaries:
    Node: 20.15.1 - ~/.nvm/versions/node/v20.15.1/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.140
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: ^11.11.4 => 11.14.0
    @emotion/styled: ^11.11.5 => 11.14.0
    @mui/base:  5.0.0-beta.66
    @mui/core-downloads-tracker:  6.2.0
    @mui/icons-material: ^6.2.0 => 6.2.0
    @mui/lab: ^6.0.0-beta.19 => 6.0.0-beta.19
    @mui/material: ^6.2.0 => 6.2.0
    @mui/private-theming:  6.2.0
    @mui/styled-engine:  6.2.0
    @mui/system: ^6.2.0 => 6.2.0
    @mui/types:  7.2.19
    @mui/utils:  6.2.0
    @mui/x-data-grid:  7.23.2
    @mui/x-data-grid-premium: ^7.23.2 => 7.23.2
    @mui/x-data-grid-pro:  7.23.2
    @mui/x-date-pickers:  7.23.2
    @mui/x-date-pickers-pro: ^7.23.2 => 7.23.2
    @mui/x-internals:  7.23.0
    @mui/x-license: ^7.23.2 => 7.23.2
    @types/react: ~18.3.16 => 18.3.16
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.7.2 => 5.7.2

Firefox and Chrome

Order ID: 95800
Search keywords: data grid, overlay, no rows, virtual scroller, virtualscroller

[michelengelen]

I agree that this should be handled internally.

For now you can fix this by applying a background color to the overlayWrapperInner class.

I'll add it to the board! 👍🏼