[DataGridPro] Fix width of right-pinned column group during resize (@…

…cherniavskii) (#16207) Co-authored-by: Andrew Cherniavskii <andrew@mui.com>
mui · Jan 16, 2025 · 3719061 · 3719061
1 parent 014db97
commit 3719061
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 3 deletions.
diff --git a/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
@@ -278,6 +278,62 @@ describe('<DataGridPro /> - Columns', () => {
       expect(pinnedHeaderCell.getBoundingClientRect().right).to.equal(pinnedRightPosition);
     });
 
+    // /~https://github.com/mui/mui-x/issues/15755
+    it('should keep right-pinned column group aligned with its pinned children', () => {
+      render(
+        <Test
+          rows={[
+            { id: 1, brand: 'Nike', category: 'Shoes' },
+            { id: 2, brand: 'Adidas', category: 'Shoes' },
+            { id: 3, brand: 'Puma', category: 'Shoes' },
+          ]}
+          columns={[
+            { field: 'id', width: 50 },
+            { field: 'brand', width: 50 },
+            { field: 'category', width: 50 },
+          ]}
+          initialState={{ pinnedColumns: { right: ['brand', 'category'] } }}
+          columnGroupingModel={[
+            {
+              groupId: 'group1',
+              children: [{ field: 'brand' }, { field: 'category' }],
+            },
+          ]}
+        />,
+      );
+
+      const lastColumnSeparator = document.querySelector(
+        `[role="columnheader"][data-field="category"] .${gridClasses['columnSeparator--resizable']}`,
+      )!;
+
+      // resize the last column to the left
+      fireEvent.mouseDown(lastColumnSeparator, { clientX: 150 });
+      fireEvent.mouseMove(lastColumnSeparator, { clientX: 100, buttons: 1 });
+
+      const rightPinnedColumns = [
+        document.querySelector<HTMLElement>('[role="columnheader"][data-field="brand"]')!,
+        document.querySelector<HTMLElement>('[role="columnheader"][data-field="category"]')!,
+      ];
+
+      const rightPinnedHeadersTotalWidth = rightPinnedColumns.reduce(
+        (acc, column) => acc + column.offsetWidth,
+        0,
+      );
+
+      const rightPinnedColumnGroup = document.querySelector<HTMLElement>(
+        '[role="columnheader"][data-fields="|-brand-|-category-|"]',
+      )!;
+
+      expect(rightPinnedColumnGroup.offsetWidth).to.equal(
+        rightPinnedHeadersTotalWidth,
+        'offsetWidth',
+      );
+      expect(rightPinnedColumnGroup.offsetLeft).to.equal(
+        rightPinnedColumns[0].offsetLeft,
+        'offsetLeft',
+      );
+    });
+
     // /~https://github.com/mui/mui-x/issues/13548
     it('should fill remaining horizontal space in a row with an empty cell', () => {
       render(<Test columns={[{ field: 'id', width: 100 }]} />);

diff --git a/packages/x-data-grid/src/utils/domUtils.ts b/packages/x-data-grid/src/utils/domUtils.ts
@@ -203,7 +203,7 @@ const findPinnedHeaders = ({
   api: GridPrivateApiCommunity;
   colIndex: number | null;
   position: 'left' | 'right';
-  filterFn: (colIndex: number) => boolean;
+  filterFn: (colIndex: number, element: Element) => boolean;
 }) => {
   if (!api.columnHeadersContainerRef?.current) {
     return [];
@@ -219,7 +219,7 @@ const findPinnedHeaders = ({
     )
     .forEach((element) => {
       const currentColIndex = parseCellColIndex(element);
-      if (currentColIndex !== null && filterFn(currentColIndex)) {
+      if (currentColIndex !== null && filterFn(currentColIndex, element)) {
         elements.push(element as HTMLElement);
       }
     });
@@ -250,7 +250,12 @@ export function findRightPinnedHeadersBeforeCol(
     api,
     position: isRtl ? 'left' : 'right',
     colIndex,
-    filterFn: (index) => (isRtl ? index > colIndex! : index < colIndex!),
+    filterFn: (index, element) => {
+      if (element.classList.contains(gridClasses['columnHeader--last'])) {
+        return false;
+      }
+      return isRtl ? index > colIndex! : index < colIndex!;
+    },
   });
 }