[DataGrid] Make column autosizing work with flex columns (@cherniavskii…

…) (#15712) Co-authored-by: Andrew Cherniavskii <andrew@mui.com>
mui · Dec 3, 2024 · 3b3ccbc · 3b3ccbc
1 parent b3b8918
commit 3b3ccbc
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 28 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
@@ -25,18 +25,9 @@ describe('<DataGridPro /> - Columns', () => {
   const baselineProps = {
     autoHeight: isJSDOM,
     rows: [
-      {
-        id: 0,
-        brand: 'Nike',
-      },
-      {
-        id: 1,
-        brand: 'Adidas',
-      },
-      {
-        id: 2,
-        brand: 'Puma',
-      },
+      { id: 0, brand: 'Nike' },
+      { id: 1, brand: 'Adidas' },
+      { id: 2, brand: 'Puma' },
     ],
     columns: [{ field: 'brand' }],
   };
@@ -443,22 +434,10 @@ describe('<DataGridPro /> - Columns', () => {
     });
 
     const rows = [
-      {
-        id: 0,
-        brand: 'Nike',
-      },
-      {
-        id: 1,
-        brand: 'Adidas',
-      },
-      {
-        id: 2,
-        brand: 'Puma',
-      },
-      {
-        id: 3,
-        brand: 'Lululemon Athletica',
-      },
+      { id: 0, brand: 'Nike' },
+      { id: 1, brand: 'Adidas' },
+      { id: 2, brand: 'Puma' },
+      { id: 3, brand: 'Lululemon Athletica' },
     ];
     const columns = [
       { field: 'id', headerName: 'This is the ID column' },
@@ -493,6 +472,26 @@ describe('<DataGridPro /> - Columns', () => {
       expect(getWidths()).to.deep.equal([155, 177]);
     });
 
+    it('should work with flex columns', async () => {
+      render(
+        <Test
+          rows={rows}
+          columns={[
+            { field: 'id', flex: 1 },
+            { field: 'brand', flex: 2 },
+          ]}
+        />,
+      );
+      const separators = document.querySelectorAll(`.${gridClasses['columnSeparator--resizable']}`);
+      fireEvent.doubleClick(separators[0]);
+      await microtasks();
+      expect(columns.map((_, i) => getColumnHeaderCell(i).offsetWidth)).to.deep.equal([50, 233]);
+
+      fireEvent.doubleClick(separators[1]);
+      await microtasks();
+      expect(columns.map((_, i) => getColumnHeaderCell(i).offsetWidth)).to.deep.equal([50, 64]);
+    });
+
     describe('options', () => {
       const autosize = async (options: GridAutosizeOptions | undefined, widths: number[]) => {
         render(<Test rows={rows} columns={columns} />);

diff --git a/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx
@@ -726,6 +726,7 @@ export const useGridColumnResize = (
           ...column,
           width: widthByField[column.field],
           computedWidth: widthByField[column.field],
+          flex: 0,
         }));
 
         if (options.expand) {