[data grid] Error with useResizeContainer: The parent DOM element of the data grid has an empty height

[shikha-mobibiz]

Steps to reproduce

Link to live example: (required)

Steps:

1. We are using Micro Frontend Architecture and using DataGrid MUIX in list views, but when we load the page, below console error comes.
2. index.js:408 MUI X: 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.

More details: https://mui.com/r/x-data-grid-no-dimensions.

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

More details: https://mui.com/r/x-data-grid-no-dimensions.

3. Below is the code snippet, we have tried to fix by adding height and width on Paper and div as well .

4. <Paper
   className={styles["table__paper-wrapper"]}
   data-testid="paper"
   style={{ height: "400px" }}

   { // Keep sorting order unchanged for the column which has sortingOrder already if (col.sortingOrder) return col; // Update sorting order for all other columns dynamically return { ...col, sortingOrder: ["asc", "desc"] }; })} getRowHeight={() => rowHeight} pageSizeOptions={ROW_PER_PAGE_OPTION} onSortModelChange={handleSortModelChange} sortModel={sortModel} hideFooter={true} autoHeight={totalRows <= 10 && totalRows > 0} slots={{ columnMenu: CustomColumnMenu, noRowsOverlay: () => ( ), }} sx={{ "& .MuiDataGrid-columnHeader": { backgroundColor: "#EBEBEB", }, "--DataGrid-overlayHeight": "0px", }} className={ isContactTable ? styles["contact-datagrid-table"] : styles["datagrid-table"] } /> {!hidePagination && ( )}

5. Please help me on this.

Current behavior

Grid renders properly with mentioned console errors.
"@mui/x-data-grid": "^7.6.2",

Expected behavior

Grid should render without console errors.
"@mui/x-data-grid": "^7.6.2",

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: useResizeContainer, parent DOM, zero height

[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! 🙇🏼

[shikha-mobibiz]

Thanks for your reply but I can't provide you live example. As I already shared the code snippet which I am using in my project. what else do you want me to provide, please explain?
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.15.15",
"@mui/material": "^5.15.15",
"react-i18next": "^14.1.0",
"react-hook-form": "^7.51.5",
"@mui/x-data-grid": "^7.6.2",
"@mui/x-date-pickers": "^7.16.0",
"dayjs": "^1.11.13"
},

[michelengelen]

The code example you shared is not enough to pin down the problem you face. So we need a minimal reproduction where we can see how you implemented the grid.

From the error code alone it looks like your container has no height (even setting 'height' can lead to 0 height when in the wrong place) and the grid needs this to calculate various things.

So if you cannot provide this we unfortunately cannot really help you.

[shikha-mobibiz]

@michelengelen @zenazn Please look into the below code.
List Component Calls Table Wrapper and TableWrapper Calls Table.tsx

import React, { memo, useEffect, useRef, useState } from "react";
import { Paper, TableContainer } from "@mui/material";
import { styled } from "@mui/material/styles";
import {
DataGrid,
GridColumnMenu,
GridColumnMenuProps,
GridOverlay,
GridSortDirection,
GridSortModel,
} from "@mui/x-data-grid";

import { ROW_PER_PAGE_OPTION } from "../../../appConstants";
import ColumnOptionsPopover from "./columnOptions/ColumnOptions";
import { ThemedDeleteDialog } from "./deleteDialog/DeleteDialog";
import * as styles from "./Table.module.css";
import TableEmptyCard from "./tableCard/TableEmptyCard";

interface ColumnFilter {
handleClick: (
e: any,
columnOptions: any,
id: string,
setDeleteDialogVisibility: (visible: boolean) => void
) => void;
}

const CenteredOverlay = styled(GridOverlay)display: flex; justify-content: center; align-items: flex-start; height: 100%; background-color: #ebebeb99;;

import Pagination from "./pagination/Pagination";

type TableComponentProps = {
columns: any;
tableData: any;
hidePagination?: boolean;
isLoading?: boolean;
order: string;
orderBy: string;
rowsPerPage: number;
setOrder?: (value: string) => void;
setOrderBy?: (value: string) => void;
setPageIndex: (value: number) => void;
setRowsPerPage: (value: number) => void;
columnOptions?: [];
totalRows?: number;
getEmptyStateObject: () => {
heading?: string;
subHeading?: string;
buttonText?: string;
createHandler?: () => void;
imagePath?: string;
className?: string;
marginTop?: string;
};
editHandler?: (id: string) => void;
deleteHandler?: (id: string) => void;
searchText?: string;
actionData?: any;
rowOptions?: { icon: React.ReactElement; name: string }[];
pageIndex: number;
rowsPerPageText: string;
deleteDialogLabels?: object;
rowHeight?: any;
uniqueIds?: any;
isContactTable?: boolean;
};

const TableComponent = ({
columns,
tableData,
setOrder,
setOrderBy,
setRowsPerPage,
getEmptyStateObject,
editHandler,
deleteHandler,
searchText,
hidePagination = false,
rowsPerPage,
actionData,
rowOptions = [],
totalRows,
pageIndex,
setPageIndex,
order,
orderBy,
rowsPerPageText,
deleteDialogLabels,
rowHeight,
uniqueIds = ["id"],
isContactTable = false,
}: TableComponentProps) => {
const columnFilterRef = useRef<ColumnFilter | null>(null);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
/*
** Will remove this commented code once QA verifies the changes
*/
// const [defaultUnsortOrder, setDefaultUnsortOrder] = useState(order);
// const [defaultUnsortOrderBy, setDefaultUnsortOrderBy] = useState(orderBy);

useEffect(() => {
columnFilterRef?.current?.handleClick(
actionData.target,
rowOptions,
actionData.rowId,
setDeleteDialogVisibility
);
}, [actionData]);

const [sortModel, setSortModel] = useState([
{ field: orderBy, sort: order as GridSortDirection },
]);

const handleSortModelChange = (model) => {
if (model.length) {
const { field, sort } = model[0];
if (setOrder && setOrderBy) {
setOrder(sort); // Update the sorting order (asc or desc)
setOrderBy(field); // Update the sorting field (e.g., column name)
setSortModel(model); // Update the sort model
}
} else {
/*
* If the model is empty, reset to default sort state
*/
setSortModel([{ field: orderBy, sort: order as GridSortDirection }]);

  // will remove commented code once QA verifies the changes

  // setOrder(defaultUnsortOrder);
  // setOrderBy(defaultUnsortOrderBy);
  // setSortModel([
  //   { field: defaultUnsortOrderBy, sort: defaultUnsortOrder as GridSortDirection },
  // ]);
}

};

//to be fixed when delete functionality works
const setDeleteDialogVisibility = (state: boolean) => {
setShowDeleteDialog(state);
};

const CustomColumnMenu = (props: GridColumnMenuProps) => {
return (
<GridColumnMenu
{...props}
slots={{
// Hide columnMenuColumnsItem
columnMenuColumnsItem: null,
columnMenuFilterItem: null,
}}
/>
);
};

const getRowId = (row) => {
return uniqueIds.map((columnName) => row[columnName]).join("-");
};

return (
<Paper className={styles["table__paper-wrapper"]} data-testid="paper">
{showDeleteDialog && (

)}


<DataGrid
sortingMode={"server"}
getRowId={getRowId}
rows={tableData}
columns={columns.map((col) => {
// Keep sorting order unchanged for the column which has sortingOrder already
if (col.sortingOrder) return col;
// Update sorting order for all other columns dynamically
return { ...col, sortingOrder: ["asc", "desc"] };
})}
getRowHeight={() => rowHeight}
pageSizeOptions={ROW_PER_PAGE_OPTION}
onSortModelChange={handleSortModelChange}
sortModel={sortModel}
hideFooter={true}
// initialState={{
// sorting: {
// sortModel: [{ field: orderBy, sort: order as GridSortDirection }],
// },
// }}
autoHeight={totalRows <= 10 && totalRows > 0}
slots={{
columnMenu: CustomColumnMenu,
noRowsOverlay: () => (



),
}}
sx={{
"& .MuiDataGrid-columnHeader": {
backgroundColor: "#EBEBEB",
},
"--DataGrid-overlayHeight": "0px",
}}
className={
isContactTable
? styles["contact-datagrid-table"]
: styles["datagrid-table"]
}
/>
{!hidePagination && (

)}


);
};

export default memo(TableComponent);

and Code for CSS file is :--

.table__head {
width: 112.5rem;
margin: 0 auto;
}

.table__paper-wrapper {
overflow: hidden;
width: 96.51%;
margin: 0 auto;
}

.table__display-flex {
display: flex;
}

.table__display-flex-center {
display: flex !important;
justify-content: flex-start !important;
}

.table__display-flex-right {
display: flex !important;
justify-content: flex-end !important;
}

.table__sort-down {
color: #dfe2e8;
cursor: pointer;
}

.table__sort-icon {
cursor: pointer;
color: #252b42;
}

.table__column-option-icon {
width: 1.125rem !important;
height: 1.125rem !important;
cursor: pointer;
}

.table__column__divider {
display: flex;
align-items: center;
height: 1.5rem;
}

.table__body {
width: 100%;
background: rgba(235, 235, 235, 0.6) !important;
justify-content: center;
width: 100% !important;
height: 42.25rem !important;
}

.table__header-cell {
padding: 0rem !important;
display: flex;
margin-right: -1rem;
align-items: center;
height: 3.5rem;
}

.table__cell {
padding: 0rem !important;
padding-left: 1rem !important;
width: 25rem !important;
/* height: 3.25rem; */
}

.table__last-cell {
width: 3rem !important;
}

.datagrid-table {
height: 578px !important;
display: flex !important;
justify-content: center !important;
overflow: auto;
background-color: #FFFFFF;
}
.contact-datagrid-table {
height: 578px !important;
display: block !important;
justify-content: center !important;
overflow: auto !important;
background-color: #FFFFFF;
}
.muix-grid-column-header-sort {
display: none !important;
}

[shikha-mobibiz]

@michelengelen Please help me, My team stucked in this error from last 2 weeks.

[romgrk]

@shikha-mobibiz Please don't share code inline. If you need to share code, share a codesandbox. If you don't know how to do that, read this: https://mui.com/x/introduction/support/#bug-reproductions

As for your issue, it looks like you're not wrapping the grid with a container with explicit dimensions like the docs requires you to do: https://mui.com/x/react-data-grid/layout/

[shikha-mobibiz]

@romgrk Ok Thanks for your reply. Ok I will share the codesandbox link. Actually problem is my application consists MicroFrontend Architecture and SDK. will try to add code of Table.

[shikha-mobibiz]

@romgrk No, Actually I have tried static height also, as MUI suggested in the docs, but still same error.

import React, { memo, useEffect, useRef, useState } from "react";
import { Paper, TableContainer } from "@mui/material";
import { styled } from "@mui/material/styles";
import {
DataGrid,
GridColumnMenu,
GridColumnMenuProps,
GridOverlay,
GridSortDirection,
GridSortModel,
} from "@mui/x-data-grid";

import { ROW_PER_PAGE_OPTION } from "../../../appConstants";
import ColumnOptionsPopover from "./columnOptions/ColumnOptions";
import { ThemedDeleteDialog } from "./deleteDialog/DeleteDialog";
import * as styles from "./Table.module.css";
import TableEmptyCard from "./tableCard/TableEmptyCard";

interface ColumnFilter {
handleClick: (
e: any,
columnOptions: any,
id: string,
setDeleteDialogVisibility: (visible: boolean) => void
) => void;
}

const CenteredOverlay = styled(GridOverlay)display: flex; justify-content: center; align-items: flex-start; height: 100%; background-color: #ebebeb99;;

import Pagination from "./pagination/Pagination";

type TableComponentProps = {
columns: any;
tableData: any;
hidePagination?: boolean;
isLoading?: boolean;
order: string;
orderBy: string;
rowsPerPage: number;
setOrder?: (value: string) => void;
setOrderBy?: (value: string) => void;
setPageIndex: (value: number) => void;
setRowsPerPage: (value: number) => void;
columnOptions?: [];
totalRows?: number;
getEmptyStateObject: () => {
heading?: string;
subHeading?: string;
buttonText?: string;
createHandler?: () => void;
imagePath?: string;
className?: string;
marginTop?: string;
};
editHandler?: (id: string) => void;
deleteHandler?: (id: string) => void;
searchText?: string;
actionData?: any;
rowOptions?: { icon: React.ReactElement; name: string }[];
pageIndex: number;
rowsPerPageText: string;
deleteDialogLabels?: object;
rowHeight?: any;
uniqueIds?: any;
isContactTable?: boolean;
};

const TableComponent = ({
columns,
tableData,
setOrder,
setOrderBy,
setRowsPerPage,
getEmptyStateObject,
editHandler,
deleteHandler,
searchText,
hidePagination = false,
rowsPerPage,
actionData,
rowOptions = [],
totalRows,
pageIndex,
setPageIndex,
order,
orderBy,
rowsPerPageText,
deleteDialogLabels,
rowHeight,
uniqueIds = ["id"],
isContactTable = false,
}: TableComponentProps) => {
const columnFilterRef = useRef<ColumnFilter | null>(null);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
/*
** Will remove this commented code once QA verifies the changes
*/
// const [defaultUnsortOrder, setDefaultUnsortOrder] = useState(order);
// const [defaultUnsortOrderBy, setDefaultUnsortOrderBy] = useState(orderBy);

useEffect(() => {
columnFilterRef?.current?.handleClick(
actionData.target,
rowOptions,
actionData.rowId,
setDeleteDialogVisibility
);
}, [actionData]);

const [sortModel, setSortModel] = useState([
{ field: orderBy, sort: order as GridSortDirection },
]);

const handleSortModelChange = (model) => {
if (model.length) {
const { field, sort } = model[0];
if (setOrder && setOrderBy) {
setOrder(sort); // Update the sorting order (asc or desc)
setOrderBy(field); // Update the sorting field (e.g., column name)
setSortModel(model); // Update the sort model
}
} else {
/*
* If the model is empty, reset to default sort state
*/
setSortModel([{ field: orderBy, sort: order as GridSortDirection }]);

  // will remove commented code once QA verifies the changes

  // setOrder(defaultUnsortOrder);
  // setOrderBy(defaultUnsortOrderBy);
  // setSortModel([
  //   { field: defaultUnsortOrderBy, sort: defaultUnsortOrder as GridSortDirection },
  // ]);
}

};

//to be fixed when delete functionality works
const setDeleteDialogVisibility = (state: boolean) => {
setShowDeleteDialog(state);
};

const CustomColumnMenu = (props: GridColumnMenuProps) => {
return (
<GridColumnMenu
{...props}
slots={{
// Hide columnMenuColumnsItem
columnMenuColumnsItem: null,
columnMenuFilterItem: null,
}}
/>
);
};

const getRowId = (row) => {
return uniqueIds.map((columnName) => row[columnName]).join("-");
};

return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
sortingMode={"server"}
getRowId={getRowId}
rows={tableData}
columns={columns.map((col) => {
// Keep sorting order unchanged for the column which has sortingOrder already
if (col.sortingOrder) return col;
// Update sorting order for all other columns dynamically
return { ...col, sortingOrder: ["asc", "desc"] };
})}
getRowHeight={() => rowHeight}
pageSizeOptions={ROW_PER_PAGE_OPTION}
onSortModelChange={handleSortModelChange}
sortModel={sortModel}
hideFooter={true}
// initialState={{
// sorting: {
// sortModel: [{ field: orderBy, sort: order as GridSortDirection }],
// },
// }}
//autoHeight={totalRows <= 10 && totalRows > 0}
slots={{
columnMenu: CustomColumnMenu,
noRowsOverlay: () => (



),
}}
sx={{
"& .MuiDataGrid-columnHeader": {
backgroundColor: "#EBEBEB",
},
"--DataGrid-overlayHeight": "0px",
}}
className={
isContactTable
? styles["contact-datagrid-table"]
: styles["datagrid-table"]
}
/>

);
};

export default memo(TableComponent);

[michelengelen]

As mentioned from @romgrk please don't share code inline ... it's noisy and hard to read. If a codesandbox does not suit your implementation or it's hard to show there please create an example repository which we can check out and run locally. I know users have done this in the past for microfrontends as well, so it does work.

[shikha-mobibiz]

Sure Thanks @michelengelen. This is against the policy to share the code but I will try to add minimal files to replicate the issue and share with you on tomorrow. Meanwhile I am sharing attachment to show I have set Height and width on parent of Data Grid and showing error also. I have checked some open/closed bugs also, this issue is quite frustrated and faced by many developers even after added height/width.

[romgrk]

We can't debug an issue until we have a reproduction case, I'll wait for you to provide an update in a codesandbox.

[shikha-mobibiz]

@romgrk I will share the code of Micro Frontend architecture by Today. Thanks for helping.

[github-actions]

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