[DataGrid] Header filter design improvements (#15991)

Signed-off-by: Kenan Yusuf <[email protected]> Co-authored-by: Bilal Shafi <[email protected]>
mui · Jan 16, 2025 · f8510a4 · f8510a4
1 parent a2c7b00
commit f8510a4
Show file tree

Hide file tree

Showing 72 changed files with 706 additions and 315 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,7 +64,7 @@ function CustomHeaderFilter(props) { @@
         <Stack
           sx={[
             {
-              borderTop: `1px solid var(--DataGrid-rowBorderColor)`,
+              borderBottom: `1px solid var(--DataGrid-rowBorderColor)`,
             },
             hasFocus
               ? {
@@ Expand Down @@