[DataGridPro] Autosize Columns - Headers being cut off (#10666)

Co-authored-by: seunexplicit <[email protected]>
mui · Nov 7, 2023 · 129709a · 129709a
1 parent fe5198c
commit 129709a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
@@ -225,12 +225,18 @@ function extractColumnWidths(
       if (header) {
         const title = header.querySelector(`.${gridClasses.columnHeaderTitle}`);
         const content = header.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`)!;
+        const iconContainer = header.querySelector(`.${gridClasses.iconButtonContainer}`);
+        const menuContainer = header.querySelector(`.${gridClasses.menuIcon}`);
         const element = title ?? content;
 
         const style = window.getComputedStyle(header, null);
         const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
         const contentWidth = element.scrollWidth + 1;
-        const width = paddingWidth + contentWidth;
+        const width =
+          contentWidth +
+          paddingWidth +
+          (iconContainer?.clientWidth ?? 0) +
+          (menuContainer?.clientWidth ?? 0);
 
         filteredWidths.push(width);
       }

diff --git a/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columns.DataGridPro.test.tsx
@@ -450,7 +450,7 @@ describe('<DataGridPro /> - Columns', () => {
       render(<Test rows={rows} columns={columns} />);
       await apiRef.current.autosizeColumns();
       await microtasks();
-      expect(getWidths()).to.deep.equal([155, 177]);
+      expect(getWidths()).to.deep.equal([213, 235]);
     });
 
     it('should work through double-clicking the separator', async () => {
@@ -460,14 +460,14 @@ describe('<DataGridPro /> - Columns', () => {
       )[1];
       fireEvent.doubleClick(separator);
       await microtasks();
-      expect(getWidths()).to.deep.equal([100, 177]);
+      expect(getWidths()).to.deep.equal([100, 235]);
     });
 
     it('should work on mount', async () => {
       render(<Test rows={rows} columns={columns} autosizeOnMount />);
       await microtasks(); /* first effect after render */
       await microtasks(); /* async autosize operation */
-      expect(getWidths()).to.deep.equal([155, 177]);
+      expect(getWidths()).to.deep.equal([213, 235]);
     });
 
     describe('options', () => {
@@ -482,7 +482,7 @@ describe('<DataGridPro /> - Columns', () => {
         await autosize({ columns: [columns[0].field] }, [50, 100]);
       });
       it('.includeHeaders works', async () => {
-        await autosize({ includeHeaders: true }, [155, 177]);
+        await autosize({ includeHeaders: true }, [213, 235]);
       });
       it('.includeOutliers works', async () => {
         await autosize({ includeOutliers: true }, [50, 144]);