[DataGrid] Fix extending built-in column types (mui#4114)

Co-authored-by: Matheus Wichman <[email protected]>

Author: cherniavskii

packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts

@@ -18,15 +18,20 @@ import { gridColumnsSelector, gridColumnVisibilityModelSelector } from './gridCo
 import { clamp } from '../../../utils/utils';
 
 export const computeColumnTypes = (customColumnTypes: GridColumnTypesRecord = {}) => {
-  const allColumnTypes = { ...getGridDefaultColumnTypes(), ...customColumnTypes };
-  const mergedColumnTypes: GridColumnTypesRecord = {};
+  const mergedColumnTypes: GridColumnTypesRecord = { ...getGridDefaultColumnTypes() };
 
-  Object.entries(allColumnTypes).forEach(([colType, colTypeDef]) => {
-    colTypeDef = {
-      ...allColumnTypes[colTypeDef.extendType || DEFAULT_GRID_COL_TYPE_KEY],
-      ...colTypeDef,
-    };
-    mergedColumnTypes[colType] = colTypeDef;
+  Object.entries(customColumnTypes).forEach(([colType, colTypeDef]) => {
+    if (mergedColumnTypes[colType]) {
+      mergedColumnTypes[colType] = {
+        ...mergedColumnTypes[colType],
+        ...colTypeDef,
+      };
+    } else {
+      mergedColumnTypes[colType] = {
+        ...mergedColumnTypes[colTypeDef.extendType || DEFAULT_GRID_COL_TYPE_KEY],
+        ...colTypeDef,
+      };
+    }
   });
 
   return mergedColumnTypes;

packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx

@@ -858,6 +858,49 @@ describe('<DataGrid /> - Layout & Warnings', () => {
       ) as Element;
       expect(virtualScrollerContent.clientHeight).to.equal(virtualScroller.clientHeight);
     });
+
+    // See https://github.com/mui/mui-x/issues/4113
+    it('should preserve default width constraints when extending default column type', () => {
+      const rows = [{ id: 1, value: 1 }];
+      const columns = [{ field: 'id', type: 'number' }];
+
+      render(
+        <div style={{ width: 300, height: 300 }}>
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            columnTypes={{
+              number: {},
+            }}
+          />
+        </div>,
+      );
+
+      // default `width` should be used
+      expect(getCell(0, 0).offsetWidth).to.equal(100);
+    });
+
+    it('should allow to override default width constraints when extending default column type', () => {
+      const rows = [{ id: 1, value: 1 }];
+      const columns = [{ field: 'id', type: 'number' }];
+
+      render(
+        <div style={{ width: 300, height: 300 }}>
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            columnTypes={{
+              number: {
+                width: 10,
+                minWidth: 200,
+              },
+            }}
+          />
+        </div>,
+      );
+
+      expect(getCell(0, 0).offsetWidth).to.equal(200);
+    });
   });
 
   describe('warnings', () => {