diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
index 15aa583960c24..211d3303349f0 100644
--- a/docs/pages/x/api/data-grid/data-grid-premium.json
+++ b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -267,6 +267,8 @@
       "columnHeaderTitle",
       "columnHeaderTitleContainer",
       "columnHeaderTitleContainerContent",
+      "columnGroupHeaderTitleContainerContent",
+      "columnGroupHeader--withName",
       "columnHeaders",
       "columnHeadersInner",
       "columnHeadersInner--scrollable",
diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
index c2d20fe1b7d68..b4f414824b38a 100644
--- a/docs/pages/x/api/data-grid/data-grid-pro.json
+++ b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -334,6 +334,8 @@
       "columnHeaderTitle",
       "columnHeaderTitleContainer",
       "columnHeaderTitleContainerContent",
+      "columnGroupHeaderTitleContainerContent",
+      "columnGroupHeader--withName",
       "columnHeaders",
       "columnHeadersInner",
       "columnHeadersInner--scrollable",
diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
index c3068e3bf175f..59e97a0a69378 100644
--- a/docs/pages/x/api/data-grid/data-grid.json
+++ b/docs/pages/x/api/data-grid/data-grid.json
@@ -289,6 +289,8 @@
       "columnHeaderTitle",
       "columnHeaderTitleContainer",
       "columnHeaderTitleContainerContent",
+      "columnGroupHeaderTitleContainerContent",
+      "columnGroupHeader--withName",
       "columnHeaders",
       "columnHeadersInner",
       "columnHeadersInner--scrollable",
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-pt.json b/docs/translations/api-docs/data-grid/data-grid-premium-pt.json
index 73dc24a57f676..098fa29991248 100644
--- a/docs/translations/api-docs/data-grid/data-grid-premium-pt.json
+++ b/docs/translations/api-docs/data-grid/data-grid-premium-pt.json
@@ -277,6 +277,15 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header's title excepted buttons"
     },
+    "columnGroupHeaderTitleContainerContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column group header's title excepted buttons"
+    },
+    "columnGroupHeader--withName": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column group header cell",
+      "conditions": "not empty"
+    },
     "columnHeaders": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column headers"
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium-zh.json b/docs/translations/api-docs/data-grid/data-grid-premium-zh.json
index 73dc24a57f676..098fa29991248 100644
--- a/docs/translations/api-docs/data-grid/data-grid-premium-zh.json
+++ b/docs/translations/api-docs/data-grid/data-grid-premium-zh.json
@@ -277,6 +277,15 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header's title excepted buttons"
     },
+    "columnGroupHeaderTitleContainerContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column group header's title excepted buttons"
+    },
+    "columnGroupHeader--withName": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column group header cell",
+      "conditions": "not empty"
+    },
     "columnHeaders": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column headers"
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json
index 73dc24a57f676..098fa29991248 100644
--- a/docs/translations/api-docs/data-grid/data-grid-premium.json
+++ b/docs/translations/api-docs/data-grid/data-grid-premium.json
@@ -277,6 +277,15 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header's title excepted buttons"
     },
+    "columnGroupHeaderTitleContainerContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column group header's title excepted buttons"
+    },
+    "columnGroupHeader--withName": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column group header cell",
+      "conditions": "not empty"
+    },
     "columnHeaders": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column headers"
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
index a657a61c3b354..c7e252f555d5d 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
@@ -273,6 +273,15 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header's title excepted buttons"
     },
+    "columnGroupHeaderTitleContainerContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column group header's title excepted buttons"
+    },
+    "columnGroupHeader--withName": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column group header cell",
+      "conditions": "not empty"
+    },
     "columnHeaders": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column headers"
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
index a657a61c3b354..c7e252f555d5d 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
@@ -273,6 +273,15 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header's title excepted buttons"
     },
+    "columnGroupHeaderTitleContainerContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column group header's title excepted buttons"
+    },
+    "columnGroupHeader--withName": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column group header cell",
+      "conditions": "not empty"
+    },
     "columnHeaders": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column headers"
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json
index a657a61c3b354..c7e252f555d5d 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro.json
@@ -273,6 +273,15 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header's title excepted buttons"
     },
+    "columnGroupHeaderTitleContainerContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column group header's title excepted buttons"
+    },
+    "columnGroupHeader--withName": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column group header cell",
+      "conditions": "not empty"
+    },
     "columnHeaders": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column headers"
diff --git a/docs/translations/api-docs/data-grid/data-grid-pt.json b/docs/translations/api-docs/data-grid/data-grid-pt.json
index 13fbe0260d5d4..91fd00b395766 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pt.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pt.json
@@ -244,6 +244,15 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header's title excepted buttons"
     },
+    "columnGroupHeaderTitleContainerContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column group header's title excepted buttons"
+    },
+    "columnGroupHeader--withName": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column group header cell",
+      "conditions": "not empty"
+    },
     "columnHeaders": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column headers"
diff --git a/docs/translations/api-docs/data-grid/data-grid-zh.json b/docs/translations/api-docs/data-grid/data-grid-zh.json
index 13fbe0260d5d4..91fd00b395766 100644
--- a/docs/translations/api-docs/data-grid/data-grid-zh.json
+++ b/docs/translations/api-docs/data-grid/data-grid-zh.json
@@ -244,6 +244,15 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header's title excepted buttons"
     },
+    "columnGroupHeaderTitleContainerContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column group header's title excepted buttons"
+    },
+    "columnGroupHeader--withName": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column group header cell",
+      "conditions": "not empty"
+    },
     "columnHeaders": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column headers"
diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json
index 13fbe0260d5d4..91fd00b395766 100644
--- a/docs/translations/api-docs/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid.json
@@ -244,6 +244,15 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header's title excepted buttons"
     },
+    "columnGroupHeaderTitleContainerContent": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column group header's title excepted buttons"
+    },
+    "columnGroupHeader--withName": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the column group header cell",
+      "conditions": "not empty"
+    },
     "columnHeaders": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column headers"
diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
index 5168e70bd4a83..97d9b870d70f5 100644
--- a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
+++ b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
@@ -132,6 +132,7 @@ DataGridPremiumRaw.propTypes = {
       freeReordering: PropTypes.bool,
       groupId: PropTypes.string.isRequired,
       headerName: PropTypes.string,
+      renderHeaderGroup: PropTypes.func,
     }),
   ),
   /**
diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
index 86b23e90269a4..7dbe240a3a4ed 100644
--- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
+++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
@@ -129,6 +129,7 @@ DataGridProRaw.propTypes = {
       freeReordering: PropTypes.bool,
       groupId: PropTypes.string.isRequired,
       headerName: PropTypes.string,
+      renderHeaderGroup: PropTypes.func,
     }),
   ),
   /**
diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx
index 0851d0c453833..3d134f97f85d2 100644
--- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx
+++ b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx
@@ -103,6 +103,7 @@ DataGridRaw.propTypes = {
       freeReordering: PropTypes.bool,
       groupId: PropTypes.string.isRequired,
       headerName: PropTypes.string,
+      renderHeaderGroup: PropTypes.func,
     }),
   ),
   /**
diff --git a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
index 66c266277a902..c689890816a0d 100644
--- a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -1,4 +1,4 @@
-import { borderBottom, CSSInterpolation } from '@mui/system';
+import { CSSInterpolation } from '@mui/system';
 import { darken, lighten, alpha, styled } from '@mui/material/styles';
 import { gridClasses } from '../../constants/gridClasses';
 
@@ -82,16 +82,16 @@ export const GridRootStyles = styled('div', {
       },
     },
     [`& .${gridClasses['virtualScrollerContent--overflowed']} .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]:
-      {
-        borderBottomColor: 'transparent',
-      },
+    {
+      borderBottomColor: 'transparent',
+    },
     [`& .${gridClasses.columnHeader}, & .${gridClasses.columnGroupHeader}, & .${gridClasses.cell}`]:
-      {
-        WebkitTapHighlightColor: 'transparent',
-        lineHeight: null,
-        padding: '0 10px',
-        boxSizing: 'border-box',
-      },
+    {
+      WebkitTapHighlightColor: 'transparent',
+      lineHeight: null,
+      padding: '0 10px',
+      boxSizing: 'border-box',
+    },
     [`& .${gridClasses.columnHeader}:focus-within, & .${gridClasses.cell}:focus-within`]: {
       outline: `solid ${alpha(theme.palette.primary.main, 0.5)} 1px`,
       outlineWidth: 1,
@@ -111,21 +111,21 @@ export const GridRootStyles = styled('div', {
       alignItems: 'center',
     },
     [`& .${gridClasses['columnHeader--sorted']} .${gridClasses.iconButtonContainer}, & .${gridClasses['columnHeader--filtered']} .${gridClasses.iconButtonContainer}`]:
-      {
-        visibility: 'visible',
-        width: 'auto',
-      },
+    {
+      visibility: 'visible',
+      width: 'auto',
+    },
     [`& .${gridClasses.columnHeader}:not(.${gridClasses['columnHeader--sorted']}) .${gridClasses.sortIcon}`]:
-      {
-        opacity: 0,
-        transition: theme.transitions.create(['opacity'], {
-          duration: theme.transitions.duration.shorter,
-        }),
-      },
+    {
+      opacity: 0,
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.shorter,
+      }),
+    },
     [`& .${gridClasses.columnHeader}:not(.${gridClasses['columnHeader--sorted']}):hover .${gridClasses.sortIcon}`]:
-      {
-        opacity: 0.5,
-      },
+    {
+      opacity: 0.5,
+    },
     [`& .${gridClasses.columnHeaderTitleContainer}`]: {
       display: 'flex',
       alignItems: 'center',
@@ -140,9 +140,9 @@ export const GridRootStyles = styled('div', {
       alignItems: 'center',
     },
     [`& .${gridClasses['columnGroupHeader--withName']} .${gridClasses.columnGroupHeaderTitleContainerContent}`]:
-      {
-        borderBottom: `solid ${theme.palette.divider} 2px`,
-      },
+    {
+      borderBottom: `solid ${theme.palette.divider} 2px`,
+    },
     [`& .${gridClasses.withBorder} .${gridClasses.columnGroupHeaderTitleContainerContent}`]: {
       borderBottom: `none`,
     },
@@ -159,19 +159,19 @@ export const GridRootStyles = styled('div', {
       justifyContent: 'center',
     },
     [`& .${gridClasses['columnHeader--alignRight']} .${gridClasses.columnHeaderDraggableContainer}, & .${gridClasses['columnHeader--alignRight']} .${gridClasses.columnHeaderTitleContainer}`]:
-      {
-        flexDirection: 'row-reverse',
-      },
+    {
+      flexDirection: 'row-reverse',
+    },
     [`& .${gridClasses['columnHeader--alignCenter']} .${gridClasses.menuIcon}, & .${gridClasses['columnHeader--alignRight']} .${gridClasses.menuIcon}`]:
-      {
-        marginRight: 'auto',
-        marginLeft: -6,
-      },
+    {
+      marginRight: 'auto',
+      marginLeft: -6,
+    },
     [`& .${gridClasses['columnHeader--alignRight']} .${gridClasses.menuIcon}, & .${gridClasses['columnHeader--alignRight']} .${gridClasses.menuIcon}`]:
-      {
-        marginRight: 'auto',
-        marginLeft: -10,
-      },
+    {
+      marginRight: 'auto',
+      marginLeft: -10,
+    },
     [`& .${gridClasses['columnHeader--moving']}`]: {
       backgroundColor: theme.palette.action.hover,
     },
diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json
index c542c6263cd8e..c515ec157cd5b 100644
--- a/scripts/x-data-grid-premium.exports.json
+++ b/scripts/x-data-grid-premium.exports.json
@@ -108,6 +108,7 @@
   { "name": "gridColumnDefinitionsSelector", "kind": "Variable" },
   { "name": "gridColumnFieldsSelector", "kind": "Variable" },
   { "name": "GridColumnGroup", "kind": "TypeAlias" },
+  { "name": "GridColumnGroupHeaderParams", "kind": "TypeAlias" },
   { "name": "GridColumnGroupingModel", "kind": "TypeAlias" },
   { "name": "gridColumnGroupingSelector", "kind": "Variable" },
   { "name": "gridColumnGroupsLookupSelector", "kind": "Variable" },
diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
index cc13aedbb86d6..e5a327a54f79f 100644
--- a/scripts/x-data-grid-pro.exports.json
+++ b/scripts/x-data-grid-pro.exports.json
@@ -105,6 +105,7 @@
   { "name": "gridColumnDefinitionsSelector", "kind": "Variable" },
   { "name": "gridColumnFieldsSelector", "kind": "Variable" },
   { "name": "GridColumnGroup", "kind": "TypeAlias" },
+  { "name": "GridColumnGroupHeaderParams", "kind": "TypeAlias" },
   { "name": "GridColumnGroupingModel", "kind": "TypeAlias" },
   { "name": "gridColumnGroupingSelector", "kind": "Variable" },
   { "name": "gridColumnGroupsLookupSelector", "kind": "Variable" },
diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
index 782b84dd462c3..31c3d35e65ee8 100644
--- a/scripts/x-data-grid.exports.json
+++ b/scripts/x-data-grid.exports.json
@@ -100,6 +100,7 @@
   { "name": "gridColumnDefinitionsSelector", "kind": "Variable" },
   { "name": "gridColumnFieldsSelector", "kind": "Variable" },
   { "name": "GridColumnGroup", "kind": "TypeAlias" },
+  { "name": "GridColumnGroupHeaderParams", "kind": "TypeAlias" },
   { "name": "GridColumnGroupingModel", "kind": "TypeAlias" },
   { "name": "gridColumnGroupingSelector", "kind": "Variable" },
   { "name": "gridColumnGroupsLookupSelector", "kind": "Variable" },