update width when there is a resize

mui · Oct 8, 2021 · 6035ae6 · 6035ae6
1 parent a43edb1
commit 6035ae6
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaders.tsx b/packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaders.tsx
@@ -200,14 +200,20 @@ export const GridColumnsHeader = React.forwardRef<HTMLDivElement, any>(function
     return columns;
   };
 
-  React.useEffect(() => {
+  const updateWidth = React.useCallback(() => {
     const newWidth = Math.max(
       apiRef.current.columnHeadersContainerElementRef?.current?.clientWidth || 0,
       columnsMeta.totalWidth,
     );
     setWidth(newWidth);
   }, [apiRef, columnsMeta.totalWidth]);
 
+  const handleResize = React.useCallback(() => {
+    updateWidth();
+  }, [updateWidth]);
+
+  useGridApiEventHandler(apiRef, GridEvents.resize, handleResize);
+
   return (
     <Root style={{ width }}>
       <div