[DataGrid] Fix columnHeadersContainerRef being undefined before m…

…ount (#14051) Co-authored-by: Andrew Cherniavskii <[email protected]>
mui · Aug 1, 2024 · 345c769 · 345c769
1 parent eefc4a8
commit 345c769
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 7 deletions.
diff --git a/packages/x-data-grid/src/components/GridHeaders.tsx b/packages/x-data-grid/src/components/GridHeaders.tsx
@@ -54,11 +54,7 @@ function GridHeaders() {
     cellTabIndexState === null
   );
 
-  const columnsContainerRef = React.useRef<HTMLDivElement>(null);
-
-  apiRef.current.register('private', {
-    columnHeadersContainerRef: columnsContainerRef,
-  });
+  const columnsContainerRef = apiRef.current.columnHeadersContainerRef;
 
   return (
     <rootProps.slots.columnHeaders

diff --git a/packages/x-data-grid/src/hooks/core/useGridRefs.ts b/packages/x-data-grid/src/hooks/core/useGridRefs.ts
@@ -7,6 +7,7 @@ export const useGridRefs = <PrivateApi extends GridPrivateApiCommon>(
   const rootElementRef = React.useRef<HTMLDivElement>(null);
   const mainElementRef = React.useRef<HTMLDivElement>(null);
   const virtualScrollerRef = React.useRef<HTMLDivElement>(null);
+  const columnHeadersContainerRef = React.useRef<HTMLDivElement>(null);
 
   apiRef.current.register('public', {
     rootElementRef,
@@ -15,5 +16,6 @@ export const useGridRefs = <PrivateApi extends GridPrivateApiCommon>(
   apiRef.current.register('private', {
     mainElementRef,
     virtualScrollerRef,
+    columnHeadersContainerRef,
   });
 };
diff --git a/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts b/packages/x-data-grid/src/hooks/features/scroll/useGridScroll.ts
@@ -57,7 +57,7 @@ export const useGridScroll = (
 ): void => {
   const theme = useTheme();
   const logger = useGridLogger(apiRef, 'useGridScroll');
-  const colRef = apiRef.current.columnHeadersContainerRef!;
+  const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef!;
   const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
 

diff --git a/packages/x-data-grid/src/models/api/gridCoreApi.ts b/packages/x-data-grid/src/models/api/gridCoreApi.ts
@@ -75,7 +75,7 @@ export interface GridCorePrivateApi<
   /**
    * The React ref of the grid column container virtualized div element.
    */
-  columnHeadersContainerRef?: React.RefObject<HTMLDivElement>;
+  columnHeadersContainerRef: React.RefObject<HTMLDivElement>;
   /**
    * The React ref of the grid header filter row element.
    */