2
import React from 'react'
import { DataGrid } from '@mui/x-data-grid'
import Box from '@mui/material/Box'

export default function ManageAdmins() {

  const columns = [
    { field: 'no.', headerName: 'no.' },
    { field: 'id', headerName: 'id' },
    { field: 'avatar', headerName: 'Avatar' },
    { field: 'name', headerName: 'Name' },
    { field: 'active', headerName: 'active?' },
    { field: 'email', headerName: 'Login email' },
    { field: 'contactEmail', headerName: 'Contact email' },
    { field: 'actions', headerName: 'Actions' },
  ]

  return (
    <Box sx={{ height: '500px', width: '500px' }}>
      <DataGrid columns={columns} rows={[]} />
    </Box>
  )
}

I am getting the following error:

MUI: useResizeContainer - The parent DOM element of the data grid has an empty height. Please make sure that this element has an intrinsic height. The grid displays with a height of 0px.

What's the problem?

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
Normal
  • 1,616
  • 15
  • 39
  • hope [this gitHub issue](https://github.com/mui/mui-x/issues/4911) helps with your case. – Omar Dieh Aug 08 '22 at 08:41
  • @OmarDieh, I'm actually coming from there. I wish it did – Normal Aug 08 '22 at 08:43
  • I have pasted your code in a [sandbox](https://codesandbox.io/s/eloquent-wright-ecp7tf?file=/src/App.js) and It doesn't show the error you are having. maybe check the sadbox mui version and compare it with your local project ? good luck – Omar Dieh Aug 08 '22 at 08:50
  • @OmarDieh, okay thanks, now I got it, it works as expected on code sandbox, the problem is because I'm rendering the datagrid inside a drawer – Normal Aug 08 '22 at 08:57
  • but the problem is I have no idea how to fix this problem now – Normal Aug 08 '22 at 08:58

3 Answers3

1

I had the same error showing Grids in several tabs. The tabs that were not initially open produce this type of error. What I had initially is something like this:

<div> 
    <div style={tabIdx != 1 ? 'hidden' : '' }> <DataGrid .../> </div>
    <div style={tabIdx != 2 ? 'hidden' : '' }> <DataGrid .../> </div>
    <div style={tabIdx != 3 ? 'hidden' : '' }> <DataGrid .../> </div>
</div>

So I was rendering all the tabs and DataGrids but showing only one depending on local state variable called tabIdx. In this case, the other two tabs were rendered, but had a width of 0. Thus, producing this error.

I solved this the following way:

<div> 
    {tabIdx === 1 ? <div> <DataGrid .../> </div> : null}
    {tabIdx === 2 ? <div> <DataGrid .../> </div> : null}
    {tabIdx === 3 ? <div> <DataGrid .../> </div> : null}
</div>

I hope this helps even if it is not exactly the same case.

Ahmad Wehbe
  • 53
  • 1
  • 7
0

Change

<DataGrid columns={columns} rows={[]} />

to

<DataGrid autoheight columns={columns} rows={[]} />
Jim
  • 359
  • 2
  • 15
  • autoheight is different from giving it the full height with a flex box container. When you give it autoheight you'll lose the data virtualization technology used behind the data grid. The data virtualization is the main reason we use datagrids instead of simple tables. – Normal Jul 01 '23 at 15:51
-2

you need to give it height style

<div style={{height: '300px',width: '70%'}} >
  <DataGrid ......./>
</div>
Mahmoud Almekdad
  • 25
  • 4