Add scroll fixes to DataGrid skeleton loading (#3257)

mui · Feb 27, 2024 · 2664c1e · 2664c1e
1 parent f0478cf
commit 2664c1e
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/packages/toolpad-components/src/DataGrid.tsx b/packages/toolpad-components/src/DataGrid.tsx
@@ -217,16 +217,29 @@ function SkeletonLoadingOverlay() {
 
   const rowsCount = apiRef.current.getRowsCount();
 
+  const scrollRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    // The `subscribeEvent` method will automatically unsubscribe in the cleanup function of the `useEffect`.
+    return apiRef.current.subscribeEvent('scrollPositionChange', (params) => {
+      if (scrollRef.current) {
+        scrollRef.current.scrollLeft = params.left;
+      }
+    });
+  }, [apiRef]);
+
   return rowsCount > 0 ? (
     <LinearProgress />
   ) : (
     <div
+      ref={scrollRef}
       style={{
         display: 'grid',
         gridTemplateColumns: `${columns
           .map(({ computedWidth }) => `${computedWidth}px`)
           .join(' ')} 1fr`,
         gridAutoRows: `${rowHeight}px`,
+        overflowX: 'hidden',
       }}
     >
       {children}