[DataGrid] Performance: avoid layout invalidation

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -1875,12 +1875,6 @@
       "description": "Styles applied to the virtualization content when its height is bigger than the virtualization container.",
       "isGlobal": false
     },
-    {
-      "key": "virtualScrollerRenderZone",
-      "className": "MuiDataGridPremium-virtualScrollerRenderZone",
-      "description": "Styles applied to the virtualization render zone.",
-      "isGlobal": false
-    },
     {
       "key": "withBorderColor",
       "className": "MuiDataGridPremium-withBorderColor",

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -1796,12 +1796,6 @@
       "description": "Styles applied to the virtualization content when its height is bigger than the virtualization container.",
       "isGlobal": false
     },
-    {
-      "key": "virtualScrollerRenderZone",
-      "className": "MuiDataGridPro-virtualScrollerRenderZone",
-      "description": "Styles applied to the virtualization render zone.",
-      "isGlobal": false
-    },
     {
       "key": "withBorderColor",
       "className": "MuiDataGridPro-withBorderColor",

docs/pages/x/api/data-grid/data-grid.json

@@ -1657,12 +1657,6 @@
       "description": "Styles applied to the virtualization content when its height is bigger than the virtualization container.",
       "isGlobal": false
     },
-    {
-      "key": "virtualScrollerRenderZone",
-      "className": "MuiDataGrid-virtualScrollerRenderZone",
-      "description": "Styles applied to the virtualization render zone.",
-      "isGlobal": false
-    },
     {
       "key": "withBorderColor",
       "className": "MuiDataGrid-withBorderColor",

docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json

@@ -1207,10 +1207,6 @@
       "nodeName": "the virtualization content",
       "conditions": "its height is bigger than the virtualization container"
     },
-    "virtualScrollerRenderZone": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the virtualization render zone"
-    },
     "withBorderColor": {
       "description": "Styles applied to {{nodeName}}, {{conditions}}. Sets border color only.",
       "nodeName": "cells",

docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json

@@ -1149,10 +1149,6 @@
       "nodeName": "the virtualization content",
       "conditions": "its height is bigger than the virtualization container"
     },
-    "virtualScrollerRenderZone": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the virtualization render zone"
-    },
     "withBorderColor": {
       "description": "Styles applied to {{nodeName}}, {{conditions}}. Sets border color only.",
       "nodeName": "cells",

docs/translations/api-docs/data-grid/data-grid/data-grid.json

@@ -1015,10 +1015,6 @@
       "nodeName": "the virtualization content",
       "conditions": "its height is bigger than the virtualization container"
     },
-    "virtualScrollerRenderZone": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the virtualization render zone"
-    },
     "withBorderColor": {
       "description": "Styles applied to {{nodeName}}, {{conditions}}. Sets border color only.",
       "nodeName": "cells",

packages/x-data-grid-pro/src/components/GridDetailPanel.tsx

@@ -12,27 +12,32 @@ const DetailPanel = styled('div', {
   name: 'MuiDataGrid',
   slot: 'DetailPanel',
   overridesResolver: (props, styles) => styles.detailPanel,
-})<{ ownerState: OwnerState }>(({ theme }) => ({
+})<{ ownerState: OwnerState }>({
+  position: 'relative',
   width:
     'calc(var(--DataGrid-rowWidth) - var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
-  backgroundColor: (theme.vars || theme).palette.background.default,
+  backgroundColor: 'var(--DataGrid-containerBackground)',
   overflow: 'auto',
-}));
+});
 
 interface GridDetailPanelProps
   extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className' | 'children'> {
   /**
    * The row ID that this panel belongs to.
    */
   rowId: GridRowId;
+  /**
+   * The top position.
+   */
+  top: number;
   /**
    * The panel height.
    */
   height: number | 'auto';
 }
 
 function GridDetailPanel(props: GridDetailPanelProps) {
-  const { rowId, height, className, children } = props;
+  const { rowId, height, top, className, children } = props;
   const apiRef = useGridPrivateApiContext();
   const ref = React.useRef<HTMLDivElement | null>(null);
   const rootProps = useGridRootProps();
@@ -65,7 +70,7 @@ function GridDetailPanel(props: GridDetailPanelProps) {
       ref={ref}
       ownerState={ownerState}
       role="presentation"
-      style={{ height }}
+      style={{ top, height }}
       className={className}
     >
       {children}

packages/x-data-grid-pro/src/components/GridDetailPanels.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import { getDataGridUtilityClass, useGridSelector, GridRowId } from '@mui/x-data-grid';
+import {
+  getDataGridUtilityClass,
+  gridRowsMetaSelector,
+  useGridSelector,
+  GridRowId,
+} from '@mui/x-data-grid';
 import { GridDetailPanelsProps, EMPTY_DETAIL_PANELS } from '@mui/x-data-grid/internals';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -31,6 +36,7 @@ function GridDetailPanelsImpl({ virtualScroller }: GridDetailPanelsProps) {
   const classes = useUtilityClasses();
   const { setPanels } = virtualScroller;
 
+  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   const detailPanelsContent = useGridSelector(
     apiRef,
@@ -55,19 +61,21 @@ function GridDetailPanelsImpl({ virtualScroller }: GridDetailPanelsProps) {
 
       const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(rowId);
       const height = hasAutoHeight ? 'auto' : detailPanelsHeights[rowId];
+      const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(rowId);
 
       return (
         <GridDetailPanel
           key={`panel-${rowId}`}
           rowId={rowId}
+          top={top}
           height={height}
           className={classes.detailPanel}
         >
           {content}
         </GridDetailPanel>
       );
     },
-    [apiRef, classes.detailPanel, detailPanelsHeights, detailPanelsContent],
+    [apiRef, classes.detailPanel, rowsMeta, detailPanelsHeights, detailPanelsContent],
   );
 
   React.useEffect(() => {

packages/x-data-grid-pro/src/components/GridPinnedRows.tsx

@@ -5,6 +5,7 @@ import { getDataGridUtilityClass, gridClasses, useGridSelector } from '@mui/x-da
 import {
   GridPinnedRowsProps,
   gridPinnedRowsSelector,
+  gridRenderContextSelector,
   useGridPrivateApiContext,
 } from '@mui/x-data-grid/internals';
 
@@ -19,10 +20,22 @@ export function GridPinnedRows({ position, virtualScroller, ...other }: GridPinn
   const classes = useUtilityClasses();
   const apiRef = useGridPrivateApiContext();
 
+  const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const pinnedRowsData = useGridSelector(apiRef, gridPinnedRowsSelector);
+  const rows = pinnedRowsData[position];
+
   const pinnedRows = virtualScroller.getRows({
     position,
-    rows: pinnedRowsData[position],
+    rows,
+    renderContext: React.useMemo(
+      () => ({
+        firstRowIndex: 0,
+        lastRowIndex: rows.length,
+        firstColumnIndex: renderContext.firstColumnIndex,
+        lastColumnIndex: renderContext.lastColumnIndex,
+      }),
+      [rows, renderContext.firstColumnIndex, renderContext.lastColumnIndex],
+    ),
   });
 
   return (

packages/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx

@@ -365,20 +365,20 @@ describe('<DataGridPro /> - Column pinning', () => {
       it('should change the side when called on a pinned column', () => {
         render(<TestCase />);
 
-        const renderZone = $(`.${gridClasses.virtualScrollerRenderZone}`)!;
+        const content = $(`.${gridClasses.virtualScrollerContent}`)!;
 
-        expect($(renderZone, '[data-field="currencyPair"]')!.className).not.to.include('pinned');
+        expect($(content, '[data-field="currencyPair"]')!.className).not.to.include('pinned');
 
         act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.LEFT));
         expect(
-          $(renderZone, `.${gridClasses['cell--pinnedLeft']}[data-field="currencyPair"]`),
+          $(content, `.${gridClasses['cell--pinnedLeft']}[data-field="currencyPair"]`),
         ).not.to.equal(null);
-        expect($(renderZone, '[data-field="currencyPair"]')!.className).to.include('pinned');
+        expect($(content, '[data-field="currencyPair"]')!.className).to.include('pinned');
 
         act(() => apiRef.current.pinColumn('currencyPair', GridPinnedColumnPosition.RIGHT));
-        expect($$(renderZone, `.${gridClasses['cell--pinnedLeft']}`).length).to.equal(0);
+        expect($$(content, `.${gridClasses['cell--pinnedLeft']}`).length).to.equal(0);
         expect(
-          $(renderZone, `.${gridClasses['cell--pinnedRight']}[data-field="currencyPair"]`),
+          $(content, `.${gridClasses['cell--pinnedRight']}[data-field="currencyPair"]`),
         ).not.to.equal(null);
       });
 
@@ -398,8 +398,8 @@ describe('<DataGridPro /> - Column pinning', () => {
         expect($$(`.${gridClasses['cell--pinnedLeft']}`).length).not.to.equal(0);
         act(() => apiRef.current.unpinColumn('currencyPair'));
         expect($$(`.${gridClasses['cell--pinnedLeft']}`).length).to.equal(0);
-        const renderZone = $(`.${gridClasses.virtualScrollerRenderZone}`)!;
-        expect(renderZone.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
+        const content = $(`.${gridClasses.virtualScrollerContent}`)!;
+        expect(content.querySelector('[data-field="currencyPair"]')).not.to.equal(null);
       });
     });
 

packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx

@@ -447,17 +447,15 @@ describe('<DataGridPro /> - Rows', () => {
       );
 
       const virtualScroller = grid('virtualScroller')!;
-      const renderingZone = grid('virtualScrollerRenderZone')!;
+      const content = grid('virtualScrollerContent')!.querySelectorAll('[role="row"]');
       virtualScroller.scrollTop = 10e6; // scroll to the bottom
       act(() => virtualScroller.dispatchEvent(new Event('scroll')));
 
       const lastCell = $$('[role="row"]:last-child [role="gridcell"]')[0];
       expect(lastCell).to.have.text('995');
-      expect(renderingZone.children.length).to.equal(
-        Math.floor((height - 1) / rowHeight) + rowBuffer,
-      ); // Subtracting 1 is needed because of the column header borders
+      expect(content.length).to.equal(Math.floor((height - 1) / rowHeight) + rowBuffer); // Subtracting 1 is needed because of the column header borders
       const scrollbarSize = apiRef.current.state.dimensions.scrollbarSize;
-      const distanceToFirstRow = (nbRows - renderingZone.children.length) * rowHeight;
+      const distanceToFirstRow = (nbRows - content.length) * rowHeight;
       expect(gridOffsetTop()).to.equal(distanceToFirstRow);
       expect(virtualScroller.scrollHeight - scrollbarSize).to.equal(nbRows * rowHeight);
     });
@@ -503,12 +501,12 @@ describe('<DataGridPro /> - Rows', () => {
         <TestCaseVirtualization rowHeight={rowHeight} rowBuffer={0} rowThreshold={rowThreshold} />,
       );
       const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
-      const renderingZone = document.querySelector('.MuiDataGrid-virtualScrollerRenderZone')!;
-      let firstRow = renderingZone.firstChild;
+      const content = document.querySelector('.MuiDataGrid-virtualScrollerContent')!;
+      let firstRow = content.firstChild;
       expect(firstRow).to.have.attr('data-rowindex', '0');
       virtualScroller.scrollTop = rowThreshold * rowHeight;
       act(() => virtualScroller.dispatchEvent(new Event('scroll')));
-      firstRow = renderingZone.firstChild;
+      firstRow = content.firstChild;
       expect(firstRow).to.have.attr('data-rowindex', '3');
     });
 
@@ -519,13 +517,13 @@ describe('<DataGridPro /> - Rows', () => {
         <TestCaseVirtualization nbRows={1} columnBuffer={0} columnThreshold={columnThreshold} />,
       );
       const virtualScroller = grid('virtualScroller')!;
-      const renderingZone = grid('virtualScrollerRenderZone')!;
-      const firstRow = $(renderingZone, '[role="row"]:first-child')!;
+      const content = grid('virtualScrollerContent')!;
+      const firstRow = $(content, '[role="row"]:first-child')!;
       let firstColumn = $$(firstRow, '[role="gridcell"]')[0];
       expect(firstColumn).to.have.attr('data-colindex', '0');
       virtualScroller.scrollLeft = columnThreshold * columnWidth;
       act(() => virtualScroller.dispatchEvent(new Event('scroll')));
-      firstColumn = $(renderingZone, '[role="row"] > [role="gridcell"]')!;
+      firstColumn = $(content, '[role="row"] > [role="gridcell"]')!;
       expect(firstColumn).to.have.attr('data-colindex', '3');
     });
 
@@ -570,7 +568,7 @@ describe('<DataGridPro /> - Rows', () => {
         expect(lastCell).to.have.text('99');
         expect(virtualScroller.scrollTop).to.equal(0);
         expect(virtualScroller.scrollHeight).to.equal(virtualScroller.clientHeight);
-        expect(grid('virtualScrollerRenderZone')!.children).to.have.length(4);
+        expect(grid('virtualScrollerContent')!.children).to.have.length(4);
       });
 
       it('should paginate small dataset in auto page-size #1492', () => {
@@ -586,7 +584,7 @@ describe('<DataGridPro /> - Rows', () => {
 
         expect(virtualScroller.scrollTop).to.equal(0);
         expect(virtualScroller.scrollHeight).to.equal(virtualScroller.clientHeight);
-        expect(grid('virtualScrollerRenderZone')!.children).to.have.length(7);
+        expect(grid('virtualScrollerContent')!.children).to.have.length(7);
       });
     });
 

packages/x-data-grid-pro/src/utils/domUtils.ts

@@ -118,15 +118,17 @@ export function findGridCells(api: GridPrivateApiPro, field: string) {
   const container = api.virtualScrollerRef!.current!;
   return Array.from(
     container.querySelectorAll(
-      `:scope > div > div > div > [data-field="${field}"][role="gridcell"]`,
+      `:scope > div > div > [data-field="${field}"][role="gridcell"],
+       :scope > div > div > div > [data-field="${field}"][role="gridcell"]`,
     ),
   );
 }
 
 function queryRows(api: GridPrivateApiPro) {
   return api.virtualScrollerRef.current!.querySelectorAll(
     // Use > to ignore rows from nested data grids (e.g. in detail panel)
-    `:scope > div > div > .${gridClasses.row}`,
+    `:scope > div > .${gridClasses.row},
+     :scope > div > div > .${gridClasses.row}`,
   );
 }