[DataGridPro] Fix column resize with pinned rows

[cherniavskii]

Fixes #10206

Before: https://codesandbox.io/s/ancient-haze-26rlql
After: https://codesandbox.io/s/small-waterfall-n36zd2

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-10229--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	-195.7	209.8	-65.2	-58.56	144.069
Sort 100k rows	ms	757.7	1,320.4	1,266.7	1,157.24	203.125
Select 100k rows	ms	620.2	850.1	729.5	737.78	80.076
Deselect 100k rows	ms	141.7	279.6	194.9	193.2	48.871

Generated by 🚫 dangerJS against 71c212a

[MBilalShafi]

Works great 🎉

[MBilalShafi]

A small opportunity: We could possibly avoid one loop by targeting rows directly from the virtualScroller.

diff --git a/packages/grid/x-data-grid-pro/src/utils/domUtils.ts b/packages/grid/x-data-grid-pro/src/utils/domUtils.ts
index 42046bf72..b21304b32 100644
--- a/packages/grid/x-data-grid-pro/src/utils/domUtils.ts
+++ b/packages/grid/x-data-grid-pro/src/utils/domUtils.ts
@@ -28,9 +28,9 @@ export function findGridCellElementsFromCol(col: HTMLElement, api: GridPrivateAp
   const colIndex = Number(ariaColIndex) - 1;
   const cells: Element[] = [];
 
-  api.virtualScrollerRef?.current?.childNodes.forEach((child) => {
-    const renderedRowElements = (child as HTMLElement).querySelectorAll(
-      `:scope > div > .${gridClasses.row}`, // Use > to ignore rows from detail panels
+  if (api.virtualScrollerRef?.current) {
+    const renderedRowElements = api.virtualScrollerRef.current.querySelectorAll(
+      `div > .${gridClasses.row}`, // Use > to ignore rows from detail panels
     );
 
     renderedRowElements.forEach((rowElement) => {
@@ -50,7 +50,7 @@ export function findGridCellElementsFromCol(col: HTMLElement, api: GridPrivateAp
         cells.push(cell);
       }
     });
-  });
+  }
 
   return cells;
 }

[cherniavskii]

This will break #9670 (the very same PR that caused this regression 😅)

[MBilalShafi]

Ah, correct 🤦 I missed backtracking the original problem.

Just out of curiosity I tried updating the selector from div > .${gridClasses.row} to :scope > div > div > .${gridClasses.row} and it seems to work without breaking #9670.
Its a CSS-only solution, still I am not sure if it's the most elegant of the solutions, since the selector has become a bit longer than usual and also depends on a strict DOM hierarchy. 😆
Feel free to go with whatever you feel better.

[MBilalShafi]

Also, comment // Use > to ignore rows from detail panels could probably become // Use > to ignore rows from nested data grids as the grid could also be nested in a cell other than a detail panel.

[cherniavskii]

Alright, that works, thanks!