From f8510a4f0698f969ba7d13ced7078a1da0dc7dc6 Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Thu, 16 Jan 2025 09:59:04 +0000
Subject: [PATCH] [DataGrid] Header filter design improvements (#15991)

Signed-off-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com>
---
 .../CustomHeaderFilterDataGridPro.js          |   2 +-
 .../CustomHeaderFilterDataGridPro.tsx         |   2 +-
 .../CustomHeaderFilterOperatorDataGridPro.js  |  37 ++--
 .../CustomHeaderFilterOperatorDataGridPro.tsx |  37 ++--
 .../CustomHeaderFilterSingleDataGridPro.js    |   8 +-
 .../CustomHeaderFilterSingleDataGridPro.tsx   |   8 +-
 .../HeaderFilteringInlineClearDataGridPro.js  |  48 +++++
 .../HeaderFilteringInlineClearDataGridPro.tsx |  48 +++++
 .../SimpleHeaderFilteringDataGridPro.js       |   3 +-
 .../SimpleHeaderFilteringDataGridPro.tsx      |   3 +-
 .../data-grid/filtering/header-filters.md     |   6 +
 docs/data/data-grid/localization/data.json    | 140 ++++++-------
 .../migration-data-grid-v7.md                 |   4 +
 .../x/api/data-grid/data-grid-premium.json    |  24 +++
 docs/pages/x/api/data-grid/data-grid-pro.json |  24 +++
 docs/pages/x/api/data-grid/data-grid.json     |  24 +++
 .../data-grid-premium/data-grid-premium.json  |  13 ++
 .../data-grid-pro/data-grid-pro.json          |  13 ++
 .../data-grid/data-grid/data-grid.json        |  13 ++
 .../headerFiltering/GridHeaderFilterCell.tsx  | 194 +++++++++++-------
 .../GridHeaderFilterClearButton.tsx           |   6 +-
 .../headerFiltering/GridHeaderFilterMenu.tsx  |  30 ++-
 .../GridHeaderFilterMenuContainer.tsx         |  23 ++-
 .../src/tests/filtering.DataGridPro.test.tsx  |  35 +++-
 .../src/tests/layout.DataGridPro.test.tsx     |   7 +-
 .../components/containers/GridRootStyles.ts   |   7 +
 .../filterPanel/GridFilterInputBoolean.tsx    |  32 +--
 .../panel/filterPanel/GridFilterInputDate.tsx |  71 +++----
 .../GridFilterInputMultipleSingleSelect.tsx   |   2 +-
 .../GridFilterInputMultipleValue.tsx          |   2 +-
 .../GridFilterInputSingleSelect.tsx           |  27 ++-
 .../filterPanel/GridFilterInputValue.tsx      |  69 ++++---
 .../x-data-grid/src/constants/gridClasses.ts  |  16 +-
 .../src/constants/localeTextConstants.ts      |   1 +
 packages/x-data-grid/src/locales/arSD.ts      |   1 +
 packages/x-data-grid/src/locales/beBY.ts      |   1 +
 packages/x-data-grid/src/locales/bgBG.ts      |   1 +
 packages/x-data-grid/src/locales/csCZ.ts      |   1 +
 packages/x-data-grid/src/locales/daDK.ts      |   1 +
 packages/x-data-grid/src/locales/deDE.ts      |   1 +
 packages/x-data-grid/src/locales/elGR.ts      |   1 +
 packages/x-data-grid/src/locales/esES.ts      |   1 +
 packages/x-data-grid/src/locales/faIR.ts      |   1 +
 packages/x-data-grid/src/locales/fiFI.ts      |   1 +
 packages/x-data-grid/src/locales/frFR.ts      |   1 +
 packages/x-data-grid/src/locales/heIL.ts      |   1 +
 packages/x-data-grid/src/locales/hrHR.ts      |   1 +
 packages/x-data-grid/src/locales/huHU.ts      |   1 +
 packages/x-data-grid/src/locales/isIS.ts      |   1 +
 packages/x-data-grid/src/locales/itIT.ts      |   1 +
 packages/x-data-grid/src/locales/jaJP.ts      |   1 +
 packages/x-data-grid/src/locales/koKR.ts      |   1 +
 packages/x-data-grid/src/locales/nbNO.ts      |   1 +
 packages/x-data-grid/src/locales/nlNL.ts      |   1 +
 packages/x-data-grid/src/locales/nnNO.ts      |   1 +
 packages/x-data-grid/src/locales/plPL.ts      |   1 +
 packages/x-data-grid/src/locales/ptBR.ts      |   1 +
 packages/x-data-grid/src/locales/ptPT.ts      |   1 +
 packages/x-data-grid/src/locales/roRO.ts      |   1 +
 packages/x-data-grid/src/locales/ruRU.ts      |   1 +
 packages/x-data-grid/src/locales/skSK.ts      |   1 +
 packages/x-data-grid/src/locales/svSE.ts      |   1 +
 packages/x-data-grid/src/locales/trTR.ts      |   1 +
 packages/x-data-grid/src/locales/ukUA.ts      |   1 +
 packages/x-data-grid/src/locales/urPK.ts      |   1 +
 packages/x-data-grid/src/locales/viVN.ts      |   1 +
 packages/x-data-grid/src/locales/zhCN.ts      |   1 +
 packages/x-data-grid/src/locales/zhHK.ts      |   1 +
 packages/x-data-grid/src/locales/zhTW.ts      |   1 +
 packages/x-data-grid/src/material/index.tsx   |   1 +
 .../src/models/api/gridLocaleTextApi.ts       |   1 +
 .../src/models/gridIconSlotsComponent.ts      |   5 +
 72 files changed, 706 insertions(+), 315 deletions(-)
 create mode 100644 docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js
 create mode 100644 docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx

diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
index 4cd9c80e0acde..245124b306372 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
@@ -64,7 +64,7 @@ function CustomHeaderFilter(props) {
     <Stack
       sx={[
         {
-          borderTop: `1px solid var(--DataGrid-rowBorderColor)`,
+          borderBottom: `1px solid var(--DataGrid-rowBorderColor)`,
         },
         hasFocus
           ? {
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
index 2427434235caa..99eeafa49df64 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
@@ -71,7 +71,7 @@ function CustomHeaderFilter(props: GridHeaderFilterCellProps) {
     <Stack
       sx={[
         {
-          borderTop: `1px solid var(--DataGrid-rowBorderColor)`,
+          borderBottom: `1px solid var(--DataGrid-rowBorderColor)`,
         },
         hasFocus
           ? {
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js
index 50463279c37d7..72734ad1021fb 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js
@@ -23,28 +23,25 @@ function RatingInputValue(props) {
   };
 
   return (
-    <React.Fragment>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        width: '100%',
+      }}
+    >
+      <Rating
+        name="custom-rating-filter-operator"
+        value={Number(item.value)}
+        onChange={handleFilterChange}
+        precision={0.5}
+        ref={ratingRef}
+        sx={{ mr: 0.5 }}
+      />
       {headerFilterMenu}
-      <Box
-        sx={{
-          display: 'inline-flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          height: '100%',
-          pl: '10px',
-          bl: '1px solid lightgrey',
-        }}
-      >
-        <Rating
-          name="custom-rating-filter-operator"
-          value={Number(item.value)}
-          onChange={handleFilterChange}
-          precision={0.5}
-          ref={ratingRef}
-        />
-      </Box>
       {clearButton}
-    </React.Fragment>
+    </Box>
   );
 }
 
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx
index 0276f0e9e4299..66df4353255b4 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx
@@ -32,28 +32,25 @@ function RatingInputValue(
   };
 
   return (
-    <React.Fragment>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        width: '100%',
+      }}
+    >
+      <Rating
+        name="custom-rating-filter-operator"
+        value={Number(item.value)}
+        onChange={handleFilterChange}
+        precision={0.5}
+        ref={ratingRef}
+        sx={{ mr: 0.5 }}
+      />
       {headerFilterMenu}
-      <Box
-        sx={{
-          display: 'inline-flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          height: '100%',
-          pl: '10px',
-          bl: '1px solid lightgrey',
-        }}
-      >
-        <Rating
-          name="custom-rating-filter-operator"
-          value={Number(item.value)}
-          onChange={handleFilterChange}
-          precision={0.5}
-          ref={ratingRef}
-        />
-      </Box>
       {clearButton}
-    </React.Fragment>
+    </Box>
   );
 }
 
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
index 0ed5ea252ea16..3a5c2edc10948 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
@@ -42,14 +42,18 @@ function AdminFilter(props) {
   const label = !value ? 'Filter' : 'Is admin';
 
   return (
-    <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }} fullWidth>
-      <InputLabel id="select-is-admin-label">{label}</InputLabel>
+    <FormControl variant="outlined" size="small" fullWidth>
+      <InputLabel id="select-is-admin-label" shrink>
+        {label}
+      </InputLabel>
       <Select
         labelId="select-is-admin-label"
         id="select-is-admin"
         value={value}
         onChange={handleChange}
         label={label}
+        inputProps={{ sx: { fontSize: 14 } }}
+        notched
       >
         <MenuItem value="">
           <em>None</em>
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
index ecd9ccf8be2a1..4dc9ec6bde046 100644
--- a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
@@ -43,14 +43,18 @@ function AdminFilter(props: GridRenderHeaderFilterProps) {
   const label = !value ? 'Filter' : 'Is admin';
 
   return (
-    <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }} fullWidth>
-      <InputLabel id="select-is-admin-label">{label}</InputLabel>
+    <FormControl variant="outlined" size="small" fullWidth>
+      <InputLabel id="select-is-admin-label" shrink>
+        {label}
+      </InputLabel>
       <Select
         labelId="select-is-admin-label"
         id="select-is-admin"
         value={value}
         onChange={handleChange}
         label={label}
+        inputProps={{ sx: { fontSize: 14 } }}
+        notched
       >
         <MenuItem value="">
           <em>None</em>
diff --git a/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js
new file mode 100644
index 0000000000000..e02a8bd8e2a5e
--- /dev/null
+++ b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.js
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'website'];
+
+export default function HeaderFilteringInlineClearDataGridPro() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    rowLength: 100,
+    visibleFields: VISIBLE_FIELDS,
+  });
+
+  const columns = React.useMemo(() => {
+    return data.columns.map((col) => ({
+      ...col,
+      minWidth: 200,
+    }));
+  }, [data.columns]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        columns={columns}
+        loading={loading}
+        initialState={{
+          ...data.initialState,
+          filter: {
+            filterModel: {
+              items: [
+                { field: 'name', operator: 'contains', value: 'a' },
+                { field: 'website', operator: 'contains', value: 'http://' },
+                { field: 'rating', operator: '>', value: 2 },
+              ],
+            },
+          },
+        }}
+        headerFilters
+        slotProps={{
+          headerFilterCell: {
+            showClearIcon: true,
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx
new file mode 100644
index 0000000000000..e02a8bd8e2a5e
--- /dev/null
+++ b/docs/data/data-grid/filtering/HeaderFilteringInlineClearDataGridPro.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'website'];
+
+export default function HeaderFilteringInlineClearDataGridPro() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    rowLength: 100,
+    visibleFields: VISIBLE_FIELDS,
+  });
+
+  const columns = React.useMemo(() => {
+    return data.columns.map((col) => ({
+      ...col,
+      minWidth: 200,
+    }));
+  }, [data.columns]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        columns={columns}
+        loading={loading}
+        initialState={{
+          ...data.initialState,
+          filter: {
+            filterModel: {
+              items: [
+                { field: 'name', operator: 'contains', value: 'a' },
+                { field: 'website', operator: 'contains', value: 'http://' },
+                { field: 'rating', operator: '>', value: 2 },
+              ],
+            },
+          },
+        }}
+        headerFilters
+        slotProps={{
+          headerFilterCell: {
+            showClearIcon: true,
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js
index 712837a9b07c7..cfb56f93dc3b0 100644
--- a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js
+++ b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function SimpleHeaderFilteringDataGridPro() {
@@ -27,6 +27,7 @@ export default function SimpleHeaderFilteringDataGridPro() {
         slots={{
           headerFilterMenu: null,
         }}
+        sx={{ [`.${gridClasses['columnHeader--filter']}`]: { px: 1 } }}
       />
     </div>
   );
diff --git a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx
index 712837a9b07c7..cfb56f93dc3b0 100644
--- a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx
+++ b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGridPro } from '@mui/x-data-grid-pro';
+import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function SimpleHeaderFilteringDataGridPro() {
@@ -27,6 +27,7 @@ export default function SimpleHeaderFilteringDataGridPro() {
         slots={{
           headerFilterMenu: null,
         }}
+        sx={{ [`.${gridClasses['columnHeader--filter']}`]: { px: 1 } }}
       />
     </div>
   );
diff --git a/docs/data/data-grid/filtering/header-filters.md b/docs/data/data-grid/filtering/header-filters.md
index a6ac67a32030e..264c6f1d9164a 100644
--- a/docs/data/data-grid/filtering/header-filters.md
+++ b/docs/data/data-grid/filtering/header-filters.md
@@ -24,6 +24,12 @@ You can disable the default filter panel using `disableColumnFilter` prop and on
 
 {{"demo": "SimpleHeaderFilteringDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
 
+## Inline clear button
+
+The clear button is within the header filter menu by default. To display the clear button in the header filter cell instead, set `slotProps.headerFilterCell.showClearIcon` to `true`.
+
+{{"demo": "HeaderFilteringInlineClearDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
+
 ## Customize header filters
 
 There are multiple ways to customize header filters.
diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json
index 4c3d17272b69b..9b6f682d08f5f 100644
--- a/docs/data/data-grid/localization/data.json
+++ b/docs/data/data-grid/localization/data.json
@@ -3,280 +3,280 @@
     "languageTag": "ar-SD",
     "importName": "arSD",
     "localeName": "Arabic (Sudan)",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/arSD.ts"
   },
   {
     "languageTag": "be-BY",
     "importName": "beBY",
     "localeName": "Belarusian",
-    "missingKeysCount": 44,
-    "totalKeysCount": 132,
+    "missingKeysCount": 45,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/beBY.ts"
   },
   {
     "languageTag": "bg-BG",
     "importName": "bgBG",
     "localeName": "Bulgarian",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/bgBG.ts"
   },
   {
     "languageTag": "zh-HK",
     "importName": "zhHK",
     "localeName": "Chinese (Hong Kong)",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhHK.ts"
   },
   {
     "languageTag": "zh-CN",
     "importName": "zhCN",
     "localeName": "Chinese (Simplified)",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhCN.ts"
   },
   {
     "languageTag": "zh-TW",
     "importName": "zhTW",
     "localeName": "Chinese (Taiwan)",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/zhTW.ts"
   },
   {
     "languageTag": "hr-HR",
     "importName": "hrHR",
     "localeName": "Croatian",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/hrHR.ts"
   },
   {
     "languageTag": "cs-CZ",
     "importName": "csCZ",
     "localeName": "Czech",
-    "missingKeysCount": 14,
-    "totalKeysCount": 132,
+    "missingKeysCount": 15,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/csCZ.ts"
   },
   {
     "languageTag": "da-DK",
     "importName": "daDK",
     "localeName": "Danish",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/daDK.ts"
   },
   {
     "languageTag": "nl-NL",
     "importName": "nlNL",
     "localeName": "Dutch",
-    "missingKeysCount": 9,
-    "totalKeysCount": 132,
+    "missingKeysCount": 10,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nlNL.ts"
   },
   {
     "languageTag": "fi-FI",
     "importName": "fiFI",
     "localeName": "Finnish",
-    "missingKeysCount": 14,
-    "totalKeysCount": 132,
+    "missingKeysCount": 15,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/fiFI.ts"
   },
   {
     "languageTag": "fr-FR",
     "importName": "frFR",
     "localeName": "French",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/frFR.ts"
   },
   {
     "languageTag": "de-DE",
     "importName": "deDE",
     "localeName": "German",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/deDE.ts"
   },
   {
     "languageTag": "el-GR",
     "importName": "elGR",
     "localeName": "Greek",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/elGR.ts"
   },
   {
     "languageTag": "he-IL",
     "importName": "heIL",
     "localeName": "Hebrew",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/heIL.ts"
   },
   {
     "languageTag": "hu-HU",
     "importName": "huHU",
     "localeName": "Hungarian",
-    "missingKeysCount": 16,
-    "totalKeysCount": 132,
+    "missingKeysCount": 17,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/huHU.ts"
   },
   {
     "languageTag": "is-IS",
     "importName": "isIS",
     "localeName": "Icelandic",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/isIS.ts"
   },
   {
     "languageTag": "it-IT",
     "importName": "itIT",
     "localeName": "Italian",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/itIT.ts"
   },
   {
     "languageTag": "ja-JP",
     "importName": "jaJP",
     "localeName": "Japanese",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/jaJP.ts"
   },
   {
     "languageTag": "ko-KR",
     "importName": "koKR",
     "localeName": "Korean",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/koKR.ts"
   },
   {
     "languageTag": "nb-NO",
     "importName": "nbNO",
     "localeName": "Norwegian (Bokmål)",
-    "missingKeysCount": 14,
-    "totalKeysCount": 132,
+    "missingKeysCount": 15,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nbNO.ts"
   },
   {
     "languageTag": "nn-NO",
     "importName": "nnNO",
     "localeName": "Norwegian (Nynorsk)",
-    "missingKeysCount": 14,
-    "totalKeysCount": 132,
+    "missingKeysCount": 15,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/nnNO.ts"
   },
   {
     "languageTag": "fa-IR",
     "importName": "faIR",
     "localeName": "Persian",
-    "missingKeysCount": 14,
-    "totalKeysCount": 132,
+    "missingKeysCount": 15,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/faIR.ts"
   },
   {
     "languageTag": "pl-PL",
     "importName": "plPL",
     "localeName": "Polish",
-    "missingKeysCount": 21,
-    "totalKeysCount": 132,
+    "missingKeysCount": 22,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/plPL.ts"
   },
   {
     "languageTag": "pt-PT",
     "importName": "ptPT",
     "localeName": "Portuguese",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptPT.ts"
   },
   {
     "languageTag": "pt-BR",
     "importName": "ptBR",
     "localeName": "Portuguese (Brazil)",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptBR.ts"
   },
   {
     "languageTag": "ro-RO",
     "importName": "roRO",
     "localeName": "Romanian",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/roRO.ts"
   },
   {
     "languageTag": "ru-RU",
     "importName": "ruRU",
     "localeName": "Russian",
-    "missingKeysCount": 14,
-    "totalKeysCount": 132,
+    "missingKeysCount": 15,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ruRU.ts"
   },
   {
     "languageTag": "sk-SK",
     "importName": "skSK",
     "localeName": "Slovak",
-    "missingKeysCount": 15,
-    "totalKeysCount": 132,
+    "missingKeysCount": 16,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/skSK.ts"
   },
   {
     "languageTag": "es-ES",
     "importName": "esES",
     "localeName": "Spanish",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/esES.ts"
   },
   {
     "languageTag": "sv-SE",
     "importName": "svSE",
     "localeName": "Swedish",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/svSE.ts"
   },
   {
     "languageTag": "tr-TR",
     "importName": "trTR",
     "localeName": "Turkish",
-    "missingKeysCount": 0,
-    "totalKeysCount": 132,
+    "missingKeysCount": 1,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/trTR.ts"
   },
   {
     "languageTag": "uk-UA",
     "importName": "ukUA",
     "localeName": "Ukrainian",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ukUA.ts"
   },
   {
     "languageTag": "ur-PK",
     "importName": "urPK",
     "localeName": "Urdu (Pakistan)",
-    "missingKeysCount": 18,
-    "totalKeysCount": 132,
+    "missingKeysCount": 19,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/urPK.ts"
   },
   {
     "languageTag": "vi-VN",
     "importName": "viVN",
     "localeName": "Vietnamese",
-    "missingKeysCount": 10,
-    "totalKeysCount": 132,
+    "missingKeysCount": 11,
+    "totalKeysCount": 133,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/viVN.ts"
   }
 ]
diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
index 85b8dfa37d6c5..2ecfcdefb7386 100644
--- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
+++ b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
@@ -99,6 +99,10 @@ Below are described the steps you need to make to migrate from v7 to v8.
 
 - `ariaV8` experimental flag is removed. It's now the default behavior.
 
+### Filtering
+
+- The clear button in header filter cells has moved to the header filter menu. Use `slotProps={{ headerFilterCell: { showClearIcon: true } }}` to restore the clear button in the cell.
+
 <!-- ### Editing
 
 TBD
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 a2c48c6a533db..af5816851a0e0 100644
--- a/docs/pages/x/api/data-grid/data-grid-premium.json
+++ b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -1104,6 +1104,12 @@
       "default": "GridDragIcon",
       "class": null
     },
+    {
+      "name": "menuItemCheckIcon",
+      "description": "Icon displayed to indicate that a menu item is selected.",
+      "default": "GridCheckIcon",
+      "class": null
+    },
     {
       "name": "columnMenuPinLeftIcon",
       "description": "Icon displayed in column menu for left pinning",
@@ -1358,6 +1364,12 @@
       "description": "Styles applied to the column group header cell if not empty.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeader--filter",
+      "className": "MuiDataGridPremium-columnHeader--filter",
+      "description": "Styles applied to the header filter cell.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeader--filtered",
       "className": "MuiDataGridPremium-columnHeader--filtered",
@@ -1430,6 +1442,18 @@
       "description": "Styles applied to the column header's draggable container element.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeaderFilterInput",
+      "className": "MuiDataGridPremium-columnHeaderFilterInput",
+      "description": "Styles applied to the header filter input element.",
+      "isGlobal": false
+    },
+    {
+      "key": "columnHeaderFilterOperatorLabel",
+      "className": "MuiDataGridPremium-columnHeaderFilterOperatorLabel",
+      "description": "Styles applied to the header filter operator label element.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeaderTitle",
       "className": "MuiDataGridPremium-columnHeaderTitle",
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 38b86de22a6be..c57b6d2feb2b3 100644
--- a/docs/pages/x/api/data-grid/data-grid-pro.json
+++ b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -1039,6 +1039,12 @@
       "default": "GridDragIcon",
       "class": null
     },
+    {
+      "name": "menuItemCheckIcon",
+      "description": "Icon displayed to indicate that a menu item is selected.",
+      "default": "GridCheckIcon",
+      "class": null
+    },
     {
       "name": "columnMenuPinLeftIcon",
       "description": "Icon displayed in column menu for left pinning",
@@ -1263,6 +1269,12 @@
       "description": "Styles applied to the column group header cell if not empty.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeader--filter",
+      "className": "MuiDataGridPro-columnHeader--filter",
+      "description": "Styles applied to the header filter cell.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeader--filtered",
       "className": "MuiDataGridPro-columnHeader--filtered",
@@ -1335,6 +1347,18 @@
       "description": "Styles applied to the column header's draggable container element.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeaderFilterInput",
+      "className": "MuiDataGridPro-columnHeaderFilterInput",
+      "description": "Styles applied to the header filter input element.",
+      "isGlobal": false
+    },
+    {
+      "key": "columnHeaderFilterOperatorLabel",
+      "className": "MuiDataGridPro-columnHeaderFilterOperatorLabel",
+      "description": "Styles applied to the header filter operator label element.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeaderTitle",
       "className": "MuiDataGridPro-columnHeaderTitle",
diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
index d08f6d5092e94..dea2d9a362a7b 100644
--- a/docs/pages/x/api/data-grid/data-grid.json
+++ b/docs/pages/x/api/data-grid/data-grid.json
@@ -924,6 +924,12 @@
       "description": "Icon displayed on the column reorder button.",
       "default": "GridDragIcon",
       "class": null
+    },
+    {
+      "name": "menuItemCheckIcon",
+      "description": "Icon displayed to indicate that a menu item is selected.",
+      "default": "GridCheckIcon",
+      "class": null
     }
   ],
   "classes": [
@@ -1137,6 +1143,12 @@
       "description": "Styles applied to the column group header cell if not empty.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeader--filter",
+      "className": "MuiDataGrid-columnHeader--filter",
+      "description": "Styles applied to the header filter cell.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeader--filtered",
       "className": "MuiDataGrid-columnHeader--filtered",
@@ -1209,6 +1221,18 @@
       "description": "Styles applied to the column header's draggable container element.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeaderFilterInput",
+      "className": "MuiDataGrid-columnHeaderFilterInput",
+      "description": "Styles applied to the header filter input element.",
+      "isGlobal": false
+    },
+    {
+      "key": "columnHeaderFilterOperatorLabel",
+      "className": "MuiDataGrid-columnHeaderFilterOperatorLabel",
+      "description": "Styles applied to the header filter operator label element.",
+      "isGlobal": false
+    },
     {
       "key": "columnHeaderTitle",
       "className": "MuiDataGrid-columnHeaderTitle",
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
index ea8da38d3b89e..4eabd611df028 100644
--- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
+++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -836,6 +836,10 @@
       "nodeName": "the column group header cell",
       "conditions": "not empty"
     },
+    "columnHeader--filter": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter cell"
+    },
     "columnHeader--filtered": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the column header",
@@ -879,6 +883,14 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header&#39;s draggable container element"
     },
+    "columnHeaderFilterInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter input element"
+    },
+    "columnHeaderFilterOperatorLabel": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter operator label element"
+    },
     "columnHeaderTitle": {
       "description": "Styles applied to the column header&#39;s title element;"
     },
@@ -1324,6 +1336,7 @@
     "headerFilterMenu": "Component responsible for showing menu in Header filter row",
     "loadIcon": "Icon displayed on the input while processing.",
     "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",
+    "menuItemCheckIcon": "Icon displayed to indicate that a menu item is selected.",
     "moreActionsIcon": "Icon displayed on the <code>actions</code> column type to open the menu.",
     "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.",
     "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
index 10eef41c40023..44a830fa6e680 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -774,6 +774,10 @@
       "nodeName": "the column group header cell",
       "conditions": "not empty"
     },
+    "columnHeader--filter": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter cell"
+    },
     "columnHeader--filtered": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the column header",
@@ -817,6 +821,14 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header&#39;s draggable container element"
     },
+    "columnHeaderFilterInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter input element"
+    },
+    "columnHeaderFilterOperatorLabel": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter operator label element"
+    },
     "columnHeaderTitle": {
       "description": "Styles applied to the column header&#39;s title element;"
     },
@@ -1259,6 +1271,7 @@
     "headerFilterMenu": "Component responsible for showing menu in Header filter row",
     "loadIcon": "Icon displayed on the input while processing.",
     "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",
+    "menuItemCheckIcon": "Icon displayed to indicate that a menu item is selected.",
     "moreActionsIcon": "Icon displayed on the <code>actions</code> column type to open the menu.",
     "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.",
     "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.",
diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
index 320e6b76fb458..eb5095ab30708 100644
--- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -648,6 +648,10 @@
       "nodeName": "the column group header cell",
       "conditions": "not empty"
     },
+    "columnHeader--filter": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter cell"
+    },
     "columnHeader--filtered": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the column header",
@@ -691,6 +695,14 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the column header&#39;s draggable container element"
     },
+    "columnHeaderFilterInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter input element"
+    },
+    "columnHeaderFilterOperatorLabel": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the header filter operator label element"
+    },
     "columnHeaderTitle": {
       "description": "Styles applied to the column header&#39;s title element;"
     },
@@ -1129,6 +1141,7 @@
     "groupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed",
     "loadIcon": "Icon displayed on the input while processing.",
     "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.",
+    "menuItemCheckIcon": "Icon displayed to indicate that a menu item is selected.",
     "moreActionsIcon": "Icon displayed on the <code>actions</code> column type to open the menu.",
     "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.",
     "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.",
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
index 476ba93d1d2ef..81036900df53c 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { styled } from '@mui/material/styles';
 import {
   unstable_useForkRef as useForkRef,
   unstable_composeClasses as composeClasses,
@@ -22,6 +23,7 @@ import {
   GridFilterInputSingleSelect,
   gridFilterModelSelector,
   gridFilterableColumnLookupSelector,
+  gridClasses,
 } from '@mui/x-data-grid';
 import {
   PinnedColumnPosition,
@@ -34,6 +36,7 @@ import {
 } from '@mui/x-data-grid/internals';
 import { useRtl } from '@mui/system/RtlProvider';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { inputBaseClasses } from '@mui/material/InputBase';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProProcessedProps } from '../../models/dataGridProProps';
 import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
@@ -69,12 +72,47 @@ type OwnerState = DataGridProProcessedProps & {
   showLeftBorder: boolean;
 };
 
+const StyledInputComponent = styled(GridFilterInputValue, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderFilterInput',
+})(({ theme }) => ({
+  flex: 1,
+  marginRight: theme.spacing(0.5),
+  marginBottom: theme.spacing(-0.25),
+  '& input[type="number"], & input[type="date"], & input[type="datetime-local"]': {
+    '&[value=""]:not(:focus)': {
+      color: 'transparent',
+    },
+  },
+  [`& .${inputBaseClasses.input}`]: {
+    fontSize: '14px',
+  },
+  [`.${gridClasses['root--densityCompact']} & .${inputBaseClasses.input}`]: {
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
+    height: 23,
+  },
+}));
+
+const OperatorLabel = styled('span', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderFilterOperatorLabel',
+})(({ theme }) => ({
+  flex: 1,
+  marginRight: theme.spacing(0.5),
+  color: theme.palette.text.secondary,
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+}));
+
 const useUtilityClasses = (ownerState: OwnerState) => {
   const { colDef, classes, showRightBorder, showLeftBorder, pinnedPosition } = ownerState;
 
   const slots = {
     root: [
       'columnHeader',
+      'columnHeader--filter',
       colDef.headerAlign === 'left' && 'columnHeader--alignLeft',
       colDef.headerAlign === 'center' && 'columnHeader--alignCenter',
       colDef.headerAlign === 'right' && 'columnHeader--alignRight',
@@ -84,24 +122,25 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft',
       pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight',
     ],
+    input: ['columnHeaderFilterInput'],
+    operatorLabel: ['columnHeaderFilterOperatorLabel'],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const emptyFieldSx = {
-  [`& input[value=""]:not(:focus)`]: { color: 'transparent' },
-};
-const defaultInputComponents: { [key in GridColType]: React.JSXElementConstructor<any> | null } = {
-  string: GridFilterInputValue,
-  number: GridFilterInputValue,
-  date: GridFilterInputDate,
-  dateTime: GridFilterInputDate,
-  boolean: GridFilterInputBoolean,
-  singleSelect: GridFilterInputSingleSelect,
-  actions: null,
-  custom: null,
-};
+const DEFAULT_INPUT_COMPONENTS: { [key in GridColType]: React.JSXElementConstructor<any> | null } =
+  {
+    string: GridFilterInputValue,
+    number: GridFilterInputValue,
+    date: GridFilterInputDate,
+    dateTime: GridFilterInputDate,
+    boolean: GridFilterInputBoolean,
+    singleSelect: GridFilterInputSingleSelect,
+    actions: null,
+    custom: null,
+  };
+
 const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProps>((props, ref) => {
   const {
     colIndex,
@@ -113,7 +152,7 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
     item,
     headerFilterMenuRef,
     InputComponentProps,
-    showClearIcon = true,
+    showClearIcon = false,
     pinnedPosition,
     pinnedOffset,
     style: styleProp,
@@ -163,7 +202,7 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
 
   const InputComponent =
     colDef.filterable || isFilterReadOnly
-      ? (currentOperator.InputComponent ?? defaultInputComponents[colDef.type as GridColType])
+      ? (currentOperator.InputComponent ?? DEFAULT_INPUT_COMPONENTS[colDef.type as GridColType])
       : null;
 
   const clearFilterItem = React.useCallback(() => {
@@ -293,18 +332,35 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
 
   const classes = useUtilityClasses(ownerState as OwnerState);
 
-  const isNoInputOperator = currentOperator.requiresFilterValue === false;
-
-  const isApplied = item?.value !== undefined || isNoInputOperator;
-
   const label =
     currentOperator.headerLabel ??
     apiRef.current.getLocaleText(
       `headerFilterOperator${capitalize(item.operator)}` as 'headerFilterOperatorContains',
     );
 
+  const isNoInputOperator = currentOperator.requiresFilterValue === false;
+  const isApplied = item?.value !== undefined || isNoInputOperator;
   const isFilterActive = isApplied || hasFocus;
 
+  const headerFilterMenu = (
+    <GridHeaderFilterMenuContainer
+      operators={filterOperators}
+      item={item}
+      field={colDef.field}
+      disabled={isFilterReadOnly}
+      applyFilterChanges={apiRef.current.upsertFilterItem}
+      headerFilterMenuRef={headerFilterMenuRef}
+      buttonRef={buttonRef}
+      showClearItem={!showClearIcon && isApplied}
+      clearFilterItem={clearFilterItem}
+    />
+  );
+
+  const clearButton =
+    showClearIcon && isApplied ? (
+      <GridHeaderFilterClearButton onClick={clearFilterItem} disabled={isFilterReadOnly} />
+    ) : null;
+
   return (
     <div
       className={clsx(classes.root, headerClassName)}
@@ -326,61 +382,53 @@ const GridHeaderFilterCell = forwardRef<HTMLDivElement, GridHeaderFilterCellProp
       ref={handleRef}
     >
       {headerFilterComponent}
-      {InputComponent && headerFilterComponent === undefined ? (
+      {headerFilterComponent === undefined ? (
         <React.Fragment>
-          <InputComponent
-            apiRef={apiRef}
-            item={item}
-            inputRef={inputRef}
-            applyValue={apiRef.current.upsertFilterItem}
-            onFocus={() => apiRef.current.startHeaderFilterEditMode(colDef.field)}
-            onBlur={(event: React.FocusEvent) => {
-              apiRef.current.stopHeaderFilterEditMode();
-              // Blurring an input element should reset focus state only if `relatedTarget` is not the header filter cell
-              if (!event.relatedTarget?.className.includes('columnHeader')) {
-                apiRef.current.setState((state) => ({
-                  ...state,
-                  focus: {
-                    cell: null,
-                    columnHeader: null,
-                    columnHeaderFilter: null,
-                    columnGroupHeader: null,
-                  },
-                }));
-              }
-            }}
-            label={capitalize(label)}
-            placeholder=""
-            isFilterActive={isFilterActive}
-            clearButton={
-              showClearIcon && isApplied ? (
-                <GridHeaderFilterClearButton
-                  onClick={clearFilterItem}
-                  disabled={isFilterReadOnly}
-                />
-              ) : null
-            }
-            disabled={isFilterReadOnly || isNoInputOperator}
-            tabIndex={-1}
-            InputLabelProps={null}
-            sx={
-              colDef.type === 'date' || colDef.type === 'dateTime' || colDef.type === 'number'
-                ? emptyFieldSx
-                : undefined
-            }
-            {...(isNoInputOperator ? { value: '' } : {})}
-            {...currentOperator?.InputComponentProps}
-            {...InputComponentProps}
-          />
-          <GridHeaderFilterMenuContainer
-            operators={filterOperators!}
-            item={item}
-            field={colDef.field}
-            disabled={isFilterReadOnly}
-            applyFilterChanges={apiRef.current.upsertFilterItem}
-            headerFilterMenuRef={headerFilterMenuRef}
-            buttonRef={buttonRef}
-          />
+          {isNoInputOperator ? (
+            <React.Fragment>
+              <OperatorLabel className={classes.operatorLabel}>{label}</OperatorLabel>
+              {clearButton}
+              {headerFilterMenu}
+            </React.Fragment>
+          ) : null}
+          {InputComponent && !isNoInputOperator ? (
+            <StyledInputComponent
+              as={InputComponent}
+              className={classes.input}
+              apiRef={apiRef}
+              item={item}
+              inputRef={inputRef}
+              applyValue={apiRef.current.upsertFilterItem}
+              onFocus={() => apiRef.current.startHeaderFilterEditMode(colDef.field)}
+              onBlur={(event: React.FocusEvent) => {
+                apiRef.current.stopHeaderFilterEditMode();
+                // Blurring an input element should reset focus state only if `relatedTarget` is not the header filter cell
+                if (!event.relatedTarget?.className.includes('columnHeader')) {
+                  apiRef.current.setState((state) => ({
+                    ...state,
+                    focus: {
+                      cell: null,
+                      columnHeader: null,
+                      columnHeaderFilter: null,
+                      columnGroupHeader: null,
+                    },
+                  }));
+                }
+              }}
+              label={capitalize(label)}
+              placeholder=""
+              isFilterActive={isFilterActive}
+              variant="outlined"
+              size="small"
+              disabled={isFilterReadOnly || isNoInputOperator}
+              tabIndex={-1}
+              headerFilterMenu={headerFilterMenu}
+              clearButton={clearButton}
+              {...(isNoInputOperator ? { value: '' } : {})}
+              {...currentOperator?.InputComponentProps}
+              {...InputComponentProps}
+            />
+          ) : null}
         </React.Fragment>
       ) : null}
     </div>
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
index bb22108ee9025..317eab72d11b9 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
@@ -4,11 +4,8 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 type BaseIconButtonProps = GridSlotProps['baseIconButton'];
 
-// FIXME(v8:romgrk): Make parametric
 interface GridHeaderFilterClearIconProps extends BaseIconButtonProps {}
 
-const style = { padding: '2px' };
-
 function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
   const rootProps = useGridRootProps();
   return (
@@ -16,9 +13,8 @@ function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
       tabIndex={-1}
       aria-label="Clear filter"
       size="small"
-      style={style}
-      {...props}
       {...rootProps.slotProps?.baseIconButton}
+      {...props}
     >
       <rootProps.slots.columnMenuClearIcon fontSize="inherit" />
     </rootProps.slots.baseIconButton>
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
index c3fe31d4aea70..175ef75abc90b 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenu.tsx
@@ -19,6 +19,8 @@ interface GridHeaderFilterMenuProps {
   id: string;
   labelledBy: string;
   target: HTMLElement | null;
+  showClearItem: boolean;
+  clearFilterItem: () => void;
 }
 
 function GridHeaderFilterMenu({
@@ -30,6 +32,8 @@ function GridHeaderFilterMenu({
   item,
   id,
   labelledBy,
+  showClearItem,
+  clearFilterItem,
 }: GridHeaderFilterMenuProps) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
@@ -61,7 +65,21 @@ function GridHeaderFilterMenu({
         id={id}
         onKeyDown={handleListKeyDown}
       >
-        {operators.map((op, i) => {
+        {showClearItem && [
+          <rootProps.slots.baseMenuItem
+            key="filter-menu-clear-filter"
+            iconStart={<rootProps.slots.columnMenuClearIcon fontSize="small" />}
+            onClick={() => {
+              clearFilterItem();
+              hideMenu();
+            }}
+          >
+            {apiRef.current.getLocaleText('headerFilterClear')}
+          </rootProps.slots.baseMenuItem>,
+          <rootProps.slots.baseDivider key="filter-menu-divider" />,
+        ]}
+        {operators.map((op) => {
+          const selected = op.value === item.operator;
           const label =
             op?.headerLabel ??
             apiRef.current.getLocaleText(
@@ -70,13 +88,15 @@ function GridHeaderFilterMenu({
 
           return (
             <rootProps.slots.baseMenuItem
+              key={`${field}-${op.value}`}
+              iconStart={
+                selected ? <rootProps.slots.menuItemCheckIcon fontSize="small" /> : <span />
+              }
               onClick={() => {
                 applyFilterChanges({ ...item, operator: op.value });
                 hideMenu();
               }}
-              autoFocus={i === 0 ? open : false}
-              selected={op.value === item.operator}
-              key={`${field}-${op.value}`}
+              autoFocus={selected ? open : false}
             >
               {label}
             </rootProps.slots.baseMenuItem>
@@ -93,6 +113,7 @@ GridHeaderFilterMenu.propTypes = {
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
   applyFilterChanges: PropTypes.func.isRequired,
+  clearFilterItem: PropTypes.func.isRequired,
   field: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
   item: PropTypes.shape({
@@ -115,6 +136,7 @@ GridHeaderFilterMenu.propTypes = {
       value: PropTypes.string.isRequired,
     }),
   ).isRequired,
+  showClearItem: PropTypes.bool.isRequired,
   target: HTMLElementType,
 } as any;
 
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
index c50440d8aac0f..4195fd228187a 100644
--- a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
+++ b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
@@ -11,12 +11,6 @@ import { refType, unstable_useId as useId } from '@mui/utils';
 import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
-const style = {
-  width: 22,
-  height: 22,
-  margin: 'auto 0 10px 5px',
-};
-
 function GridHeaderFilterMenuContainer(props: {
   operators: GridFilterOperator<any, any, any>[];
   field: GridColDef['field'];
@@ -25,6 +19,8 @@ function GridHeaderFilterMenuContainer(props: {
   headerFilterMenuRef: React.RefObject<HTMLButtonElement | null>;
   buttonRef: React.Ref<HTMLButtonElement>;
   disabled?: boolean;
+  showClearItem?: boolean;
+  clearFilterItem?: () => void;
 }) {
   const {
     operators,
@@ -33,6 +29,8 @@ function GridHeaderFilterMenuContainer(props: {
     buttonRef,
     headerFilterMenuRef,
     disabled = false,
+    showClearItem,
+    clearFilterItem,
     ...others
   } = props;
 
@@ -69,11 +67,16 @@ function GridHeaderFilterMenuContainer(props: {
         tabIndex={-1}
         size="small"
         onClick={handleClick}
-        style={style}
         disabled={disabled}
         {...rootProps.slotProps?.baseIconButton}
       >
-        <rootProps.slots.openFilterButtonIcon fontSize="small" />
+        <rootProps.slots.baseBadge
+          color="primary"
+          variant="dot"
+          badgeContent={showClearItem ? 1 : 0}
+        >
+          <rootProps.slots.openFilterButtonIcon fontSize="inherit" />
+        </rootProps.slots.baseBadge>
       </rootProps.slots.baseIconButton>
       <rootProps.slots.headerFilterMenu
         field={field}
@@ -83,6 +86,8 @@ function GridHeaderFilterMenuContainer(props: {
         operators={operators}
         labelledBy={buttonId!}
         id={menuId!}
+        clearFilterItem={clearFilterItem}
+        showClearItem={showClearItem}
         {...others}
       />
     </React.Fragment>
@@ -96,6 +101,7 @@ GridHeaderFilterMenuContainer.propTypes = {
   // ----------------------------------------------------------------------
   applyFilterChanges: PropTypes.func.isRequired,
   buttonRef: refType,
+  clearFilterItem: PropTypes.func,
   disabled: PropTypes.bool,
   field: PropTypes.string.isRequired,
   headerFilterMenuRef: PropTypes.shape({
@@ -119,6 +125,7 @@ GridHeaderFilterMenuContainer.propTypes = {
       value: PropTypes.string.isRequired,
     }),
   ).isRequired,
+  showClearItem: PropTypes.bool,
 } as any;
 
 export { GridHeaderFilterMenuContainer };
diff --git a/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
index 1750df815a92d..09b0ff3a30090 100644
--- a/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/filtering.DataGridPro.test.tsx
@@ -993,7 +993,7 @@ describe('<DataGridPro /> - Filter', () => {
       expect(getColumnValues(0)).to.deep.equal([]);
     });
 
-    it('should allow to clear the filter by clear button', () => {
+    it('should allow to clear the filter from operator menu', () => {
       render(
         <TestCase
           initialState={{
@@ -1013,6 +1013,39 @@ describe('<DataGridPro /> - Filter', () => {
         />,
       );
 
+      expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Puma']);
+      const filterCell = getColumnHeaderCell(0, 1);
+      fireEvent.click(filterCell);
+      fireEvent.click(within(filterCell).getByLabelText('Operator'));
+      fireEvent.click(screen.getByRole('menuitem', { name: 'Clear filter' }));
+      expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']);
+    });
+
+    it('should allow to clear the filter with clear button', () => {
+      render(
+        <TestCase
+          initialState={{
+            filter: {
+              filterModel: {
+                items: [
+                  {
+                    field: 'brand',
+                    operator: 'contains',
+                    value: 'a',
+                  },
+                ],
+              },
+            },
+          }}
+          headerFilters
+          slotProps={{
+            headerFilterCell: {
+              showClearIcon: true,
+            },
+          }}
+        />,
+      );
+
       expect(getColumnValues(0)).to.deep.equal(['Adidas', 'Puma']);
       fireEvent.click(screen.getByRole('button', { name: 'Clear filter' }));
       expect(getColumnValues(0)).to.deep.equal(['Nike', 'Adidas', 'Puma']);
diff --git a/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx
index d83b6ba6c9101..b8b1f50448540 100644
--- a/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/layout.DataGridPro.test.tsx
@@ -139,18 +139,17 @@ describeSkipIf(isJSDOM)('<DataGridPro /> - Layout', () => {
 
   it('should work with `headerFilterHeight` prop', () => {
     render(
-      <div style={{ width: 300, height: 300 }}>
+      <div style={{ display: 'flex', flexDirection: 'column', width: 300 }}>
         <DataGridPro
           {...baselineProps}
-          autoHeight
           headerFilters
           columnHeaderHeight={20}
-          headerFilterHeight={32}
+          headerFilterHeight={60}
           rowHeight={20}
         />
       </div>,
     );
-    expect(grid('main')!.clientHeight).to.equal(baselineProps.rows.length * 20 + 20 + 32);
+    expect(grid('main')!.clientHeight).to.equal(baselineProps.rows.length * 20 + 20 + 60);
   });
 
   it('should support translations in the theme', () => {
diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index 3e52d28189683..2c878936990ac 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -348,6 +348,13 @@ export const GridRootStyles = styled('div', {
       display: 'flex',
       alignItems: 'center',
     },
+    [`& .${c['columnHeader--filter']}`]: {
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingRight: 5,
+      minHeight: 'min-content',
+      overflow: 'hidden',
+    },
     [`& .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}`]: {
       overflow: 'hidden',
     },
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
index 8766f6825039f..b68ef4f385aff 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
@@ -2,12 +2,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TextFieldProps } from '@mui/material/TextField';
 import { refType, unstable_useId as useId } from '@mui/utils';
-import { styled } from '@mui/material/styles';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 
 export type GridFilterInputBooleanProps = GridFilterInputValueProps &
   TextFieldProps & {
+    headerFilterMenu?: React.ReactNode;
     clearButton?: React.ReactNode | null;
     /**
      * It is `true` if the filter either has a value or an operator with no value
@@ -16,15 +16,6 @@ export type GridFilterInputBooleanProps = GridFilterInputValueProps &
     isFilterActive?: boolean;
   };
 
-const BooleanOperatorContainer = styled('div')({
-  display: 'flex',
-  alignItems: 'center',
-  width: '100%',
-  [`& button`]: {
-    margin: 'auto 0px 5px 5px',
-  },
-});
-
 function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
   const {
     item,
@@ -32,11 +23,14 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
     apiRef,
     focusElementRef,
     isFilterActive,
+    headerFilterMenu,
     clearButton,
     tabIndex,
     label: labelProp,
-    variant = 'standard',
+    variant = 'outlined',
+    InputProps,
     InputLabelProps,
+    sx,
     ...others
   } = props;
   const [filterValueState, setFilterValueState] = React.useState<boolean | undefined>(
@@ -69,8 +63,8 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
 
   return (
-    <BooleanOperatorContainer>
-      <rootProps.slots.baseFormControl fullWidth>
+    <React.Fragment>
+      <rootProps.slots.baseFormControl fullWidth sx={sx}>
         <rootProps.slots.baseInputLabel
           {...rootProps.slotProps?.baseInputLabel}
           id={labelId}
@@ -89,11 +83,15 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           notched={variant === 'outlined' ? true : undefined}
           native={isSelectNative}
           displayEmpty
-          inputProps={{ ref: focusElementRef, tabIndex }}
+          inputProps={{
+            ref: focusElementRef,
+            tabIndex,
+            ...InputProps?.inputProps,
+          }}
+          {...baseSelectProps}
           {
             ...(others as any) /* FIXME: typing error */
           }
-          {...baseSelectProps}
         >
           <rootProps.slots.baseSelectOption
             {...baseSelectOptionProps}
@@ -118,8 +116,9 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           </rootProps.slots.baseSelectOption>
         </rootProps.slots.baseSelect>
       </rootProps.slots.baseFormControl>
+      {headerFilterMenu}
       {clearButton}
-    </BooleanOperatorContainer>
+    </React.Fragment>
   );
 }
 
@@ -144,6 +143,7 @@ GridFilterInputBoolean.propTypes = {
   applyValue: PropTypes.func.isRequired,
   clearButton: PropTypes.node,
   focusElementRef: refType,
+  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx
index 0005842a9f18e..a0d68ba77c580 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputDate.tsx
@@ -9,8 +9,9 @@ import { GridFilterItem } from '../../../models/gridFilterItem';
 
 export type GridFilterInputDateProps = GridFilterInputValueProps &
   TextFieldProps & {
-    type?: 'date' | 'datetime-local';
+    headerFilterMenu?: React.ReactNode;
     clearButton?: React.ReactNode | null;
+    type?: 'date' | 'datetime-local';
     /**
      * It is `true` if the filter either has a value or an operator with no value
      * required is selected (for example `isEmpty`)
@@ -51,6 +52,7 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
     focusElementRef,
     InputProps,
     isFilterActive,
+    headerFilterMenu,
     clearButton,
     tabIndex,
     disabled,
@@ -86,40 +88,38 @@ function GridFilterInputDate(props: GridFilterInputDateProps) {
   }, [item.value, type]);
 
   return (
-    <rootProps.slots.baseTextField
-      fullWidth
-      id={id}
-      label={apiRef.current.getLocaleText('filterPanelInputLabel')}
-      placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
-      value={filterValueState}
-      onChange={onFilterChange}
-      variant="standard"
-      type={type || 'text'}
-      InputLabelProps={{
-        shrink: true,
-      }}
-      inputRef={focusElementRef}
-      InputProps={{
-        ...(applying || clearButton
-          ? {
-              endAdornment: applying ? (
-                <rootProps.slots.loadIcon fontSize="small" color="action" />
-              ) : (
-                clearButton
-              ),
-            }
-          : {}),
-        disabled,
-        ...InputProps,
-        inputProps: {
-          max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
-          tabIndex,
-          ...InputProps?.inputProps,
-        },
-      }}
-      {...other}
-      {...rootProps.slotProps?.baseTextField}
-    />
+    <React.Fragment>
+      <rootProps.slots.baseTextField
+        fullWidth
+        id={id}
+        label={apiRef.current.getLocaleText('filterPanelInputLabel')}
+        placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
+        value={filterValueState}
+        onChange={onFilterChange}
+        variant="standard"
+        type={type || 'text'}
+        disabled={disabled}
+        InputLabelProps={{
+          shrink: true,
+        }}
+        inputRef={focusElementRef}
+        InputProps={{
+          endAdornment: applying ? (
+            <rootProps.slots.loadIcon fontSize="small" color="action" />
+          ) : null,
+          ...InputProps,
+          inputProps: {
+            max: type === 'datetime-local' ? '9999-12-31T23:59' : '9999-12-31',
+            tabIndex,
+            ...InputProps?.inputProps,
+          },
+        }}
+        {...rootProps.slotProps?.baseTextField}
+        {...other}
+      />
+      {headerFilterMenu}
+      {clearButton}
+    </React.Fragment>
   );
 }
 
@@ -137,6 +137,7 @@ GridFilterInputDate.propTypes = {
     PropTypes.func,
     PropTypes.object,
   ]),
+  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
index 0e1674bb12555..12085d7d2f9fd 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
@@ -38,7 +38,7 @@ function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingl
     error,
     helperText,
     size,
-    variant = 'standard',
+    variant = 'outlined',
     ...other
   } = props;
   const TextFieldProps = {
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
index 50da622479b8e..db6ca06257358 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
@@ -21,7 +21,7 @@ function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps)
     error,
     helperText,
     size,
-    variant = 'standard',
+    variant = 'outlined',
     ...other
   } = props;
   const TextFieldProps = {
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
index d88468fb9cd1b..1966b1bf4e2eb 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { TextFieldProps } from '@mui/material/TextField';
 import { SelectChangeEvent } from '@mui/material/Select';
 import { unstable_useId as useId } from '@mui/utils';
-import { styled } from '@mui/material/styles';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
 import { GridSingleSelectColDef } from '../../../models/colDef/gridColDef';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
@@ -46,17 +45,9 @@ const renderSingleSelectOptions = ({
   });
 };
 
-const SingleSelectOperatorContainer = styled('div')({
-  display: 'flex',
-  alignItems: 'flex-end',
-  width: '100%',
-  [`& button`]: {
-    margin: 'auto 0px 5px 5px',
-  },
-});
-
 export type GridFilterInputSingleSelectProps = GridFilterInputValueProps &
   TextFieldProps & {
+    headerFilterMenu?: React.ReactNode;
     clearButton?: React.ReactNode | null;
     /**
      * It is `true` if the filter either has a value or an operator with no value
@@ -76,10 +67,13 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
     placeholder,
     tabIndex,
     label: labelProp,
-    variant = 'standard',
+    variant = 'outlined',
     isFilterActive,
     clearButton,
+    headerFilterMenu,
+    InputProps,
     InputLabelProps,
+    sx,
     ...others
   } = props;
   const filterValue = item.value ?? '';
@@ -122,8 +116,8 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
   const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
 
   return (
-    <SingleSelectOperatorContainer>
-      <rootProps.slots.baseFormControl fullWidth>
+    <React.Fragment>
+      <rootProps.slots.baseFormControl fullWidth sx={sx}>
         <rootProps.slots.baseInputLabel
           {...rootProps.slotProps?.baseInputLabel}
           id={labelId}
@@ -145,13 +139,14 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
             tabIndex,
             ref: focusElementRef,
             placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+            ...InputProps?.inputProps,
           }}
           native={isSelectNative}
           notched={variant === 'outlined' ? true : undefined}
+          {...rootProps.slotProps?.baseSelect}
           {
             ...(others as any) /* FIXME: typing error */
           }
-          {...rootProps.slotProps?.baseSelect}
         >
           {renderSingleSelectOptions({
             column: resolvedColumn,
@@ -163,8 +158,9 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
           })}
         </rootProps.slots.baseSelect>
       </rootProps.slots.baseFormControl>
+      {headerFilterMenu}
       {clearButton}
-    </SingleSelectOperatorContainer>
+    </React.Fragment>
   );
 }
 
@@ -182,6 +178,7 @@ GridFilterInputSingleSelect.propTypes = {
     PropTypes.func,
     PropTypes.object,
   ]),
+  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)
diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
index 826e0cef68a4f..78fe5dbaf3c64 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
@@ -10,6 +10,7 @@ import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 export type GridTypeFilterInputValueProps = GridFilterInputValueProps &
   TextFieldProps & {
     type?: 'text' | 'number' | 'date' | 'datetime-local';
+    headerFilterMenu?: React.ReactNode;
     clearButton?: React.ReactNode | null;
     /**
      * It is `true` if the filter either has a value or an operator with no value
@@ -31,8 +32,9 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
     disabled,
     isFilterActive,
     clearButton,
+    headerFilterMenu,
     InputProps,
-    variant = 'standard',
+    variant = 'outlined',
     ...others
   } = props;
 
@@ -71,38 +73,38 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
   }, [id, item]);
 
   return (
-    <rootProps.slots.baseTextField
-      id={id}
-      label={apiRef.current.getLocaleText('filterPanelInputLabel')}
-      placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
-      value={filterValueState ?? ''}
-      onChange={onFilterChange}
-      variant={variant}
-      type={type || 'text'}
-      InputProps={{
-        ...(applying || clearButton
-          ? {
-              endAdornment: applying ? (
-                <rootProps.slots.loadIcon fontSize="small" color="action" />
-              ) : (
-                clearButton
-              ),
-            }
-          : {}),
-        disabled,
-        ...InputProps,
-        inputProps: {
-          tabIndex,
-          ...InputProps?.inputProps,
-        },
-      }}
-      InputLabelProps={{
-        shrink: true,
-      }}
-      inputRef={focusElementRef}
-      {...others}
-      {...rootProps.slotProps?.baseTextField}
-    />
+    <React.Fragment>
+      <rootProps.slots.baseTextField
+        id={id}
+        label={apiRef.current.getLocaleText('filterPanelInputLabel')}
+        placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
+        value={filterValueState ?? ''}
+        onChange={onFilterChange}
+        variant={variant}
+        type={type || 'text'}
+        disabled={disabled}
+        InputProps={{
+          endAdornment: applying ? (
+            <rootProps.slots.baseInputAdornment position="end">
+              <rootProps.slots.loadIcon fontSize="small" color="action" />
+            </rootProps.slots.baseInputAdornment>
+          ) : null,
+          ...InputProps,
+          inputProps: {
+            tabIndex,
+            ...InputProps?.inputProps,
+          },
+        }}
+        InputLabelProps={{
+          shrink: true,
+        }}
+        inputRef={focusElementRef}
+        {...rootProps.slotProps?.baseTextField}
+        {...others}
+      />
+      {headerFilterMenu}
+      {clearButton}
+    </React.Fragment>
   );
 }
 
@@ -128,6 +130,7 @@ GridFilterInputValue.propTypes = {
     PropTypes.func,
     PropTypes.object,
   ]),
+  headerFilterMenu: PropTypes.node,
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)
diff --git a/packages/x-data-grid/src/constants/gridClasses.ts b/packages/x-data-grid/src/constants/gridClasses.ts
index 30e9df86d3d0c..56414374fd728 100644
--- a/packages/x-data-grid/src/constants/gridClasses.ts
+++ b/packages/x-data-grid/src/constants/gridClasses.ts
@@ -173,7 +173,14 @@ export interface GridClasses {
    * @ignore - do not document.
    */
   'columnHeader--siblingFocused': string;
-
+  /**
+   * Styles applied to the header filter input element.
+   */
+  columnHeaderFilterInput: string;
+  /**
+   * Styles applied to the header filter operator label element.
+   */
+  columnHeaderFilterOperatorLabel: string;
   /**
    * Styles applied to the header checkbox cell element.
    */
@@ -206,6 +213,10 @@ export interface GridClasses {
    * Styles applied to the empty column group header cell.
    */
   'columnHeader--emptyGroup': string;
+  /**
+   * Styles applied to the header filter cell.
+   */
+  'columnHeader--filter': string;
   /**
    * Styles applied to the column headers.
    */
@@ -728,6 +739,9 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'columnHeader--last',
   'columnHeader--lastUnpinned',
   'columnHeader--siblingFocused',
+  'columnHeader--filter',
+  'columnHeaderFilterInput',
+  'columnHeaderFilterOperatorLabel',
   'columnHeaderCheckbox',
   'columnHeaderDraggableContainer',
   'columnHeaderTitle',
diff --git a/packages/x-data-grid/src/constants/localeTextConstants.ts b/packages/x-data-grid/src/constants/localeTextConstants.ts
index ceaafee36c5ab..5f528025ccc0b 100644
--- a/packages/x-data-grid/src/constants/localeTextConstants.ts
+++ b/packages/x-data-grid/src/constants/localeTextConstants.ts
@@ -112,6 +112,7 @@ export const GRID_DEFAULT_LOCALE_TEXT: GridLocaleText = {
   'headerFilterOperator>=': 'Greater than or equal to',
   'headerFilterOperator<': 'Less than',
   'headerFilterOperator<=': 'Less than or equal to',
+  headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'any',
diff --git a/packages/x-data-grid/src/locales/arSD.ts b/packages/x-data-grid/src/locales/arSD.ts
index 6bf6384234824..e38397e88ae82 100644
--- a/packages/x-data-grid/src/locales/arSD.ts
+++ b/packages/x-data-grid/src/locales/arSD.ts
@@ -113,6 +113,7 @@ const arSDGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'أكبر من او يساوي',
   'headerFilterOperator<': 'اصغر من',
   'headerFilterOperator<=': 'اصغر من او يساوي',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'أي',
diff --git a/packages/x-data-grid/src/locales/beBY.ts b/packages/x-data-grid/src/locales/beBY.ts
index e08dcc017c49c..c7be6370cb2b6 100644
--- a/packages/x-data-grid/src/locales/beBY.ts
+++ b/packages/x-data-grid/src/locales/beBY.ts
@@ -136,6 +136,7 @@ const beBYGrid: Partial<GridLocaleText> = {
   // 'headerFilterOperator>=': 'Greater than or equal to',
   // 'headerFilterOperator<': 'Less than',
   // 'headerFilterOperator<=': 'Less than or equal to',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'усякі',
diff --git a/packages/x-data-grid/src/locales/bgBG.ts b/packages/x-data-grid/src/locales/bgBG.ts
index 06eadc68a47bb..c4cc12cb209ec 100644
--- a/packages/x-data-grid/src/locales/bgBG.ts
+++ b/packages/x-data-grid/src/locales/bgBG.ts
@@ -112,6 +112,7 @@ const bgBGGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'По-голямо или равно на',
   'headerFilterOperator<': 'По-малко от',
   'headerFilterOperator<=': 'По-малко или равно на',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'всякакви',
diff --git a/packages/x-data-grid/src/locales/csCZ.ts b/packages/x-data-grid/src/locales/csCZ.ts
index 43ed7268aaf42..28c2edc1f15bb 100644
--- a/packages/x-data-grid/src/locales/csCZ.ts
+++ b/packages/x-data-grid/src/locales/csCZ.ts
@@ -120,6 +120,7 @@ const csCZGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Větší než nebo rovno',
   'headerFilterOperator<': 'Menší než',
   'headerFilterOperator<=': 'Menší než nebo rovno',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'jakýkoliv',
diff --git a/packages/x-data-grid/src/locales/daDK.ts b/packages/x-data-grid/src/locales/daDK.ts
index 6e05df468d412..91b39e716d8f6 100644
--- a/packages/x-data-grid/src/locales/daDK.ts
+++ b/packages/x-data-grid/src/locales/daDK.ts
@@ -113,6 +113,7 @@ const daDKGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Større end eller lig med',
   'headerFilterOperator<': 'Mindre end',
   'headerFilterOperator<=': 'Mindre end eller lig med',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'hvilken som helst',
diff --git a/packages/x-data-grid/src/locales/deDE.ts b/packages/x-data-grid/src/locales/deDE.ts
index 26162e1b4146a..306d254f9d1a0 100644
--- a/packages/x-data-grid/src/locales/deDE.ts
+++ b/packages/x-data-grid/src/locales/deDE.ts
@@ -114,6 +114,7 @@ const deDEGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Größer als oder gleich',
   'headerFilterOperator<': 'Kleiner als',
   'headerFilterOperator<=': 'Kleiner als oder gleich',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'Beliebig',
diff --git a/packages/x-data-grid/src/locales/elGR.ts b/packages/x-data-grid/src/locales/elGR.ts
index db548b4bc7ad1..ce1b8cc1c9bf3 100644
--- a/packages/x-data-grid/src/locales/elGR.ts
+++ b/packages/x-data-grid/src/locales/elGR.ts
@@ -113,6 +113,7 @@ const elGRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Μεγαλύτερο ή ίσο με',
   'headerFilterOperator<': 'Μικρότερο από',
   'headerFilterOperator<=': 'Μικρότερο ή ίσο με',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'οποιοδήποτε',
diff --git a/packages/x-data-grid/src/locales/esES.ts b/packages/x-data-grid/src/locales/esES.ts
index 24b78720d0cec..5f0f9700565ce 100644
--- a/packages/x-data-grid/src/locales/esES.ts
+++ b/packages/x-data-grid/src/locales/esES.ts
@@ -114,6 +114,7 @@ const esESGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Es mayor o igual que',
   'headerFilterOperator<': 'Es menor que',
   'headerFilterOperator<=': 'Es menor o igual que',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'cualquiera',
diff --git a/packages/x-data-grid/src/locales/faIR.ts b/packages/x-data-grid/src/locales/faIR.ts
index 05256edba0f1e..4cd02de67cafd 100644
--- a/packages/x-data-grid/src/locales/faIR.ts
+++ b/packages/x-data-grid/src/locales/faIR.ts
@@ -113,6 +113,7 @@ const faIRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'بزرگتر یا مساوی',
   'headerFilterOperator<': 'کوچکتر',
   'headerFilterOperator<=': 'کوچکتر یا مساوی',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'هرچیزی',
diff --git a/packages/x-data-grid/src/locales/fiFI.ts b/packages/x-data-grid/src/locales/fiFI.ts
index 4bcd709021b26..15e763df36eec 100644
--- a/packages/x-data-grid/src/locales/fiFI.ts
+++ b/packages/x-data-grid/src/locales/fiFI.ts
@@ -113,6 +113,7 @@ const fiFIGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Enemmän tai yhtä paljon kuin',
   'headerFilterOperator<': 'Vähemmän kuin',
   'headerFilterOperator<=': 'Vähemmän tai yhtä paljon kuin',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'mikä tahansa',
diff --git a/packages/x-data-grid/src/locales/frFR.ts b/packages/x-data-grid/src/locales/frFR.ts
index be535568d8eec..4b7bdd287991d 100644
--- a/packages/x-data-grid/src/locales/frFR.ts
+++ b/packages/x-data-grid/src/locales/frFR.ts
@@ -113,6 +113,7 @@ const frFRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Est supérieur ou égal à',
   'headerFilterOperator<': 'Est inférieur à',
   'headerFilterOperator<=': 'Est inférieur ou égal à',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'tous',
diff --git a/packages/x-data-grid/src/locales/heIL.ts b/packages/x-data-grid/src/locales/heIL.ts
index becf3c591944f..3bfe383ac780a 100644
--- a/packages/x-data-grid/src/locales/heIL.ts
+++ b/packages/x-data-grid/src/locales/heIL.ts
@@ -113,6 +113,7 @@ const heILGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'גדול שווה ל-',
   'headerFilterOperator<': 'קטן מ-',
   'headerFilterOperator<=': 'קטן שווה ל-',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'כל ערך',
diff --git a/packages/x-data-grid/src/locales/hrHR.ts b/packages/x-data-grid/src/locales/hrHR.ts
index 6c1028ad172a4..718990aecf84e 100644
--- a/packages/x-data-grid/src/locales/hrHR.ts
+++ b/packages/x-data-grid/src/locales/hrHR.ts
@@ -120,6 +120,7 @@ const hrHRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Veće ili jednako',
   'headerFilterOperator<': 'Manje od',
   'headerFilterOperator<=': 'Manje od ili jednako',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'bilo koji',
diff --git a/packages/x-data-grid/src/locales/huHU.ts b/packages/x-data-grid/src/locales/huHU.ts
index f7fbf11010570..0ae1c185bc96c 100644
--- a/packages/x-data-grid/src/locales/huHU.ts
+++ b/packages/x-data-grid/src/locales/huHU.ts
@@ -112,6 +112,7 @@ const huHUGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Nagyobb vagy egyenlő',
   'headerFilterOperator<': 'Kisebb mint',
   'headerFilterOperator<=': 'Kisebb vagy egyenlő',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'bármilyen',
diff --git a/packages/x-data-grid/src/locales/isIS.ts b/packages/x-data-grid/src/locales/isIS.ts
index 409e8ec548c59..b058fa1ae0cb6 100644
--- a/packages/x-data-grid/src/locales/isIS.ts
+++ b/packages/x-data-grid/src/locales/isIS.ts
@@ -113,6 +113,7 @@ const isISGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Stærra en eða jafnt og',
   'headerFilterOperator<': 'Minna en',
   'headerFilterOperator<=': 'Minna en eða jafnt og',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'hvað sem er',
diff --git a/packages/x-data-grid/src/locales/itIT.ts b/packages/x-data-grid/src/locales/itIT.ts
index 967f96f2e4340..123284cdf3516 100644
--- a/packages/x-data-grid/src/locales/itIT.ts
+++ b/packages/x-data-grid/src/locales/itIT.ts
@@ -113,6 +113,7 @@ const itITGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Maggiore o uguale a',
   'headerFilterOperator<': 'Minore di',
   'headerFilterOperator<=': 'Minore o uguale a',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'qualunque',
diff --git a/packages/x-data-grid/src/locales/jaJP.ts b/packages/x-data-grid/src/locales/jaJP.ts
index 82774b9a22716..21ce444cd4440 100644
--- a/packages/x-data-grid/src/locales/jaJP.ts
+++ b/packages/x-data-grid/src/locales/jaJP.ts
@@ -112,6 +112,7 @@ const jaJPGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': '以上',
   'headerFilterOperator<': '未満',
   'headerFilterOperator<=': '以下',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'いずれか',
diff --git a/packages/x-data-grid/src/locales/koKR.ts b/packages/x-data-grid/src/locales/koKR.ts
index 6d1fb7f802a93..4da460f91959e 100644
--- a/packages/x-data-grid/src/locales/koKR.ts
+++ b/packages/x-data-grid/src/locales/koKR.ts
@@ -113,6 +113,7 @@ const koKRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': '같거나 더 큰',
   'headerFilterOperator<': '더 작은',
   'headerFilterOperator<=': '같거나 더 작은',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: '아무값',
diff --git a/packages/x-data-grid/src/locales/nbNO.ts b/packages/x-data-grid/src/locales/nbNO.ts
index 87baf3f7a9287..1f94a0cc33a4e 100644
--- a/packages/x-data-grid/src/locales/nbNO.ts
+++ b/packages/x-data-grid/src/locales/nbNO.ts
@@ -113,6 +113,7 @@ const nbNOGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Større enn eller lik',
   'headerFilterOperator<': 'Mindre enn',
   'headerFilterOperator<=': 'Mindre enn eller lik',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'noen',
diff --git a/packages/x-data-grid/src/locales/nlNL.ts b/packages/x-data-grid/src/locales/nlNL.ts
index bd8e8c27ca1ed..d6ec3adeabd2e 100644
--- a/packages/x-data-grid/src/locales/nlNL.ts
+++ b/packages/x-data-grid/src/locales/nlNL.ts
@@ -113,6 +113,7 @@ const nlNLGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Is groter dan of gelijk aan',
   'headerFilterOperator<': 'Is kleiner dan',
   'headerFilterOperator<=': 'Is kleiner dan of gelijk aan',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'alles',
diff --git a/packages/x-data-grid/src/locales/nnNO.ts b/packages/x-data-grid/src/locales/nnNO.ts
index 73184bcb1e773..615b636249780 100644
--- a/packages/x-data-grid/src/locales/nnNO.ts
+++ b/packages/x-data-grid/src/locales/nnNO.ts
@@ -113,6 +113,7 @@ const nnNOGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Større enn eller lik',
   'headerFilterOperator<': 'Mindre enn',
   'headerFilterOperator<=': 'Mindre enn eller lik',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'nokon',
diff --git a/packages/x-data-grid/src/locales/plPL.ts b/packages/x-data-grid/src/locales/plPL.ts
index cc5de7359d39a..376d510dc52b8 100644
--- a/packages/x-data-grid/src/locales/plPL.ts
+++ b/packages/x-data-grid/src/locales/plPL.ts
@@ -112,6 +112,7 @@ const plPLGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Większy lub równy',
   'headerFilterOperator<': 'Mniejszy niż',
   'headerFilterOperator<=': 'Mniejszy lub równe',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'dowolny',
diff --git a/packages/x-data-grid/src/locales/ptBR.ts b/packages/x-data-grid/src/locales/ptBR.ts
index 7d8e46afeb343..c6feb6fc6b18d 100644
--- a/packages/x-data-grid/src/locales/ptBR.ts
+++ b/packages/x-data-grid/src/locales/ptBR.ts
@@ -114,6 +114,7 @@ const ptBRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Maior que ou igual a',
   'headerFilterOperator<': 'Menor que',
   'headerFilterOperator<=': 'Menor que ou igual a',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'qualquer',
diff --git a/packages/x-data-grid/src/locales/ptPT.ts b/packages/x-data-grid/src/locales/ptPT.ts
index 25607c37c96cb..1abd0a4d22ca4 100644
--- a/packages/x-data-grid/src/locales/ptPT.ts
+++ b/packages/x-data-grid/src/locales/ptPT.ts
@@ -114,6 +114,7 @@ const ptPTGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Melhor que ou igual a',
   'headerFilterOperator<': 'Menor que',
   'headerFilterOperator<=': 'Menos que ou igual a',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'qualquer',
diff --git a/packages/x-data-grid/src/locales/roRO.ts b/packages/x-data-grid/src/locales/roRO.ts
index c7949fe83a726..46c8e1d86bd19 100644
--- a/packages/x-data-grid/src/locales/roRO.ts
+++ b/packages/x-data-grid/src/locales/roRO.ts
@@ -114,6 +114,7 @@ const roROGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Mai mare sau egal cu',
   'headerFilterOperator<': 'Mai mic decât',
   'headerFilterOperator<=': 'Mai mic sau egal cu',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'Aleatoriu',
diff --git a/packages/x-data-grid/src/locales/ruRU.ts b/packages/x-data-grid/src/locales/ruRU.ts
index e735fb745ec07..0d91ed721c716 100644
--- a/packages/x-data-grid/src/locales/ruRU.ts
+++ b/packages/x-data-grid/src/locales/ruRU.ts
@@ -137,6 +137,7 @@ const ruRUGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'больше или равно',
   'headerFilterOperator<': 'меньше чем',
   'headerFilterOperator<=': 'меньше или равно',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'любой',
diff --git a/packages/x-data-grid/src/locales/skSK.ts b/packages/x-data-grid/src/locales/skSK.ts
index d49222bf9ec4f..52391f6147d77 100644
--- a/packages/x-data-grid/src/locales/skSK.ts
+++ b/packages/x-data-grid/src/locales/skSK.ts
@@ -120,6 +120,7 @@ const skSKGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Väčší ako alebo rovný',
   'headerFilterOperator<': 'Menší ako',
   'headerFilterOperator<=': 'Menší ako alebo rovný',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'akýkoľvek',
diff --git a/packages/x-data-grid/src/locales/svSE.ts b/packages/x-data-grid/src/locales/svSE.ts
index 80e3381c27f6a..43d5558520fed 100644
--- a/packages/x-data-grid/src/locales/svSE.ts
+++ b/packages/x-data-grid/src/locales/svSE.ts
@@ -113,6 +113,7 @@ const svSEGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Större eller lika med',
   'headerFilterOperator<': 'Mindre än',
   'headerFilterOperator<=': 'Mindre eller lika med',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'något',
diff --git a/packages/x-data-grid/src/locales/trTR.ts b/packages/x-data-grid/src/locales/trTR.ts
index cd0bb0dad56a6..6bfb9dcf951c5 100644
--- a/packages/x-data-grid/src/locales/trTR.ts
+++ b/packages/x-data-grid/src/locales/trTR.ts
@@ -113,6 +113,7 @@ const trTRGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Büyük veya eşit',
   'headerFilterOperator<': 'Küçüktür',
   'headerFilterOperator<=': 'Küçük veya eşit',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'herhangi',
diff --git a/packages/x-data-grid/src/locales/ukUA.ts b/packages/x-data-grid/src/locales/ukUA.ts
index f52cd9579af9a..2006b9bc13957 100644
--- a/packages/x-data-grid/src/locales/ukUA.ts
+++ b/packages/x-data-grid/src/locales/ukUA.ts
@@ -137,6 +137,7 @@ const ukUAGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Більше або дорівнює',
   'headerFilterOperator<': 'Менше ніж',
   'headerFilterOperator<=': 'Менше або дорівнює',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'будь-який',
diff --git a/packages/x-data-grid/src/locales/urPK.ts b/packages/x-data-grid/src/locales/urPK.ts
index c60e2ff35aa68..c2afaefda4531 100644
--- a/packages/x-data-grid/src/locales/urPK.ts
+++ b/packages/x-data-grid/src/locales/urPK.ts
@@ -113,6 +113,7 @@ const urPKGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'ذیادہ یا برابر ہے',
   'headerFilterOperator<': 'کم ہے',
   'headerFilterOperator<=': 'کم یا برابر ہے',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'کوئی بھی',
diff --git a/packages/x-data-grid/src/locales/viVN.ts b/packages/x-data-grid/src/locales/viVN.ts
index 478d77e19cd42..5c45271a104d6 100644
--- a/packages/x-data-grid/src/locales/viVN.ts
+++ b/packages/x-data-grid/src/locales/viVN.ts
@@ -113,6 +113,7 @@ const viVNGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': 'Lớn hơn hoặc bằng',
   'headerFilterOperator<': 'Nhỏ hơn',
   'headerFilterOperator<=': 'Nhỏ hơn hoặc bằng',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: 'bất kỳ giá trị nào',
diff --git a/packages/x-data-grid/src/locales/zhCN.ts b/packages/x-data-grid/src/locales/zhCN.ts
index cdba5352b3137..6a55a054f6a5a 100644
--- a/packages/x-data-grid/src/locales/zhCN.ts
+++ b/packages/x-data-grid/src/locales/zhCN.ts
@@ -112,6 +112,7 @@ const zhCNGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': '大于或等于',
   'headerFilterOperator<': '小于',
   'headerFilterOperator<=': '小于或等于',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: '任何',
diff --git a/packages/x-data-grid/src/locales/zhHK.ts b/packages/x-data-grid/src/locales/zhHK.ts
index 808184786e511..d0ee2ab4ce2af 100644
--- a/packages/x-data-grid/src/locales/zhHK.ts
+++ b/packages/x-data-grid/src/locales/zhHK.ts
@@ -113,6 +113,7 @@ const zhHKGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': '大於或等於',
   'headerFilterOperator<': '少於',
   'headerFilterOperator<=': '小於或等於',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: '任何',
diff --git a/packages/x-data-grid/src/locales/zhTW.ts b/packages/x-data-grid/src/locales/zhTW.ts
index 2356a46c0f415..ac45c10da6ab6 100644
--- a/packages/x-data-grid/src/locales/zhTW.ts
+++ b/packages/x-data-grid/src/locales/zhTW.ts
@@ -112,6 +112,7 @@ const zhTWGrid: Partial<GridLocaleText> = {
   'headerFilterOperator>=': '大於或等於',
   'headerFilterOperator<': '小於',
   'headerFilterOperator<=': '小於或等於',
+  // headerFilterClear: 'Clear filter',
 
   // Filter values text
   filterValueAny: '任何值',
diff --git a/packages/x-data-grid/src/material/index.tsx b/packages/x-data-grid/src/material/index.tsx
index 0981a623540bb..fc7e5333e1fd8 100644
--- a/packages/x-data-grid/src/material/index.tsx
+++ b/packages/x-data-grid/src/material/index.tsx
@@ -88,6 +88,7 @@ const iconSlots: GridIconSlotsComponent = {
   filterPanelAddIcon: GridAddIcon,
   filterPanelRemoveAllIcon: GridDeleteForeverIcon,
   columnReorderIcon: GridDragIcon,
+  menuItemCheckIcon: GridCheckIcon,
 };
 
 const baseSlots: GridBaseSlots = {
diff --git a/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts b/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts
index 17a1ea32356d0..9ced6d619e02b 100644
--- a/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts
+++ b/packages/x-data-grid/src/models/api/gridLocaleTextApi.ts
@@ -123,6 +123,7 @@ export interface GridLocaleText {
   'headerFilterOperator>=': string;
   'headerFilterOperator<': string;
   'headerFilterOperator<=': string;
+  headerFilterClear: string;
 
   // Filter values text
   filterValueAny: string;
diff --git a/packages/x-data-grid/src/models/gridIconSlotsComponent.ts b/packages/x-data-grid/src/models/gridIconSlotsComponent.ts
index 90d024a3ea006..3fec27c41c213 100644
--- a/packages/x-data-grid/src/models/gridIconSlotsComponent.ts
+++ b/packages/x-data-grid/src/models/gridIconSlotsComponent.ts
@@ -179,4 +179,9 @@ export interface GridIconSlotsComponent {
    * @default GridDragIcon
    */
   columnReorderIcon: React.JSXElementConstructor<any>;
+  /**
+   * Icon displayed to indicate that a menu item is selected.
+   * @default GridCheckIcon
+   */
+  menuItemCheckIcon: React.JSXElementConstructor<any>;
 }