The parent DOM element of the data grid has an empty height

Question

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?

Answer 1

you need to give it height style

<div style={{height: '300px',width: '70%'}} >
  <DataGrid ......./>
</div>