[DataGrid] No rows overlay overlaps with the header

[hbabuka]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

This overlapping happens in two scenarios:

Scenario 1

<DataGridPro rows={rows} columns={columns} autoHeight />

• When there are no rows to be shown, the NoRowsOverlay component overlaps the header.
• The problem causing this is that the element with class .MuiDataGrid-overlay has height: 0px
  Screenshot 1 :
  
  Screenshot 2:
  

Scenario 2

<DataGridPro rows={rows} columns={columns} />

• When there are no rows, the same problem as above occurs.
  Screenshot 1:
  

The reason why I show these as two different scenarios is because it seems that what happens to work fine for one scenario, does not work fine for the other scenario in a particular environment and vice versa.

Expected behavior 🤔

No rows should take up height: auto; and be vertically centered and appear within .MuiDataGrid-virtualScrollerContent

Steps to reproduce 🕹

Scenario 1

Steps:

1. Use <DataGridPro> component with autoHeight prop and show it without rows so the default NoRowsOverlay could appear
2. You can see the same problem in this storybook: https://material-ui-x.netlify.app/storybook/?path=/story/datagridpro-test-dataset--no-rows-auto-height

Scenario 2

https://codesandbox.io/s/datagridpro-v5-no-rows-ogh17

Context 🔦

It is obvious here since it looks broken, I am trying to have No rows not overlapping the header and be centered inside the DataGrid body.

Your environment 🌎

Scenario 1

`npx @mui/envinfo`

  System:
    OS: macOS 11.6
  Binaries:
    Node: 15.12.0 - ~/.nvm/versions/node/v15.12.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v15.12.0/bin/yarn
    npm: 7.6.3 - ~/.nvm/versions/node/v15.12.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.55  <--- happens in Chrome
    Edge: Not Found
    Firefox: 94.0.1 <--- happens in Firefox
    Safari: 15.1 <--- happens in Safari

Dependencies:

• MUI 5.1.1,
• React 17.0.0
• styled-components 5.3.3
• TypeScript 4.5.2

Order ID 💳 (optional)

No response

[ddolcimascolo]

Yep, looks like yet another regression linked to changes in resizing / size detection algorithm... Maybe the famous #3007?

See also #3233 that might be related

[flaviendelangle]

So me this problem was not introduced recently.
Here is an example in the 5.0.0-beta-5 which is one month old today: https://codesandbox.io/s/datagridpro-v5-no-rows-forked-ytnls

[flaviendelangle]

https://github.com/mui-org/material-ui-x/blob/master/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx#L259

The virtualization have a behavior to save some space when there is no rows and autoHeight for the overlay.
But the overlay itself don't use the dimensions of its parent because it needs to behave correctly when there is scrollbars.
I will see to improve the behavior 👍

[fryck]

My workaround 'til for now is:

const theme = createTheme({
  components: {
    ...MuiDataGrid.components,
    MuiDataGrid: {
      styleOverrides: {
        root: {
          '.MuiDataGrid-overlay': {
            height: 'auto !important',
          },
        },
      },
    },
  },
});

I know that it's not clean, but...

[flaviendelangle]

Do you have the issue on the last version of the DataGrid or a you stuck in a previous version ?

[EvgenyArtemov]

@fryck

Where do you export it from? I'm using Data-grid-pro and same problem, can't find

[flaviendelangle]

@MBilalShafi I let you that one 👍

[anthonysapien]

Did this perhaps come back? I'm seeing a zero height overlay on the latest version. The workaround above works.

[anthonysapien]

But hold on. Let me try to reproduce it in the sandbox first.

[anthonysapien]

Okay, I figured out that a parent Stack component wasn't set to flex grow, so the DataGrid doesn't grow. Is this expected, or should the DataGrid grow to a min-height to accommodate the NoRowsOverlay component?

Here's a code sandbox. If you set the parent Stack to flex={1}, the overlay appears.
https://codesandbox.io/p/sandbox/kind-carson-fqnmw6?file=%2Fsrc%2Fdemo.tsx%3A18%2C8

[Leehaeun0]

I'm using @mui/x-data-grid and found a solution, though it's not clean.

const theme = createTheme({
  components: {
    ...MuiDataGrid.components,
    MuiDataGrid: {
      styleOverrides: {
        root: {
          '.MuiDataGrid-overlayWrapper': {
            height: 'auto !important',
          },
          '.MuiDataGrid-overlayWrapperInner': {
            height: 'auto !important',
          },
        },
      },
    },
  },
});

[aentwist]

This has to be a bug. When the data grid is loaded with no rows, the thing collapses. When rows are added it expands for them, and when they are removed it appears to stay expanded. But forget about that second behavior, can it at least have a min-height of 1 row when it is given rows={[]}?

codesandbox

[azyouness]

The official MUI documentation explains how to customize the overlay height here. This solution was working perfectly in previous versions, but after updating to the latest version (7.22.0), the --DataGrid-overlayHeight variable alone stopped working for me.

The workaround is to give virtualScrollerContent a minHeight and to make overlayWrapper position absolute instead of sticky, and change height to 'auto' instead of 0.
Here's the working solution:

styleOverrides: {
  root: {
    '--DataGrid-overlayHeight': '350px',
  },
  virtualScrollerContent: {
      minHeight: 'var(--DataGrid-overlayHeight)',
  },
  overlayWrapper: {
      position: 'absolute',
      height: 'auto',
   },
}