[DataGridPro] Make Header filters feature stable (#11243)

mui · Dec 5, 2023 · b06480f · b06480f
1 parent d02cc33
commit b06480f
Show file tree

Hide file tree

Showing 36 changed files with 127 additions and 143 deletions.
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.js
@@ -107,7 +107,7 @@ export default function CustomHeaderFilterDataGridPro() {
         slots={{
           headerFilterCell: CustomHeaderFilter,
         }}
-        unstable_headerFilters
+        headerFilters
       />
     </div>
   );

diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx
@@ -114,7 +114,7 @@ export default function CustomHeaderFilterDataGridPro() {
         slots={{
           headerFilterCell: CustomHeaderFilter,
         }}
-        unstable_headerFilters
+        headerFilters
       />
     </div>
   );

diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx.preview b/docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx.preview
@@ -12,5 +12,5 @@
   slots={{
     headerFilterCell: CustomHeaderFilter,
   }}
-  unstable_headerFilters
+  headerFilters
 />
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.js
@@ -80,7 +80,7 @@ export default function CustomHeaderFilterOperatorDataGridPro() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPro {...data} columns={columns} unstable_headerFilters />
+      <DataGridPro {...data} columns={columns} headerFilters />
     </div>
   );
 }
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx
@@ -89,7 +89,7 @@ export default function CustomHeaderFilterOperatorDataGridPro() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPro {...data} columns={columns} unstable_headerFilters />
+      <DataGridPro {...data} columns={columns} headerFilters />
     </div>
   );
 }
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx.preview b/docs/data/data-grid/filtering/CustomHeaderFilterOperatorDataGridPro.tsx.preview
@@ -1 +1 @@
-<DataGridPro {...data} columns={columns} unstable_headerFilters />
+<DataGridPro {...data} columns={columns} headerFilters />
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.js
@@ -89,12 +89,7 @@ export default function CustomHeaderFilterSingleDataGridPro() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPro
-        {...data}
-        columns={columns}
-        disableColumnFilter
-        unstable_headerFilters
-      />
+      <DataGridPro {...data} columns={columns} disableColumnFilter headerFilters />
     </div>
   );
 }
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx
@@ -92,12 +92,7 @@ export default function CustomHeaderFilterSingleDataGridPro() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGridPro
-        {...data}
-        columns={columns}
-        disableColumnFilter
-        unstable_headerFilters
-      />
+      <DataGridPro {...data} columns={columns} disableColumnFilter headerFilters />
     </div>
   );
 }
diff --git a/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx.preview b/docs/data/data-grid/filtering/CustomHeaderFilterSingleDataGridPro.tsx.preview
@@ -1,6 +1 @@
-<DataGridPro
-  {...data}
-  columns={columns}
-  disableColumnFilter
-  unstable_headerFilters
-/>
+<DataGridPro {...data} columns={columns} disableColumnFilter headerFilters />
diff --git a/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.js b/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.js
@@ -21,7 +21,7 @@ export default function HeaderFilteringDataGridPro() {
             },
           },
         }}
-        unstable_headerFilters
+        headerFilters
       />
     </div>
   );

diff --git a/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.tsx b/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.tsx
@@ -21,7 +21,7 @@ export default function HeaderFilteringDataGridPro() {
             },
           },
         }}
-        unstable_headerFilters
+        headerFilters
       />
     </div>
   );

diff --git a/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.tsx.preview b/docs/data/data-grid/filtering/HeaderFilteringDataGridPro.tsx.preview
@@ -9,5 +9,5 @@
       },
     },
   }}
-  unstable_headerFilters
+  headerFilters
 />
diff --git a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.js
@@ -22,7 +22,7 @@ export default function SimpleHeaderFilteringDataGridPro() {
           },
         }}
         disableColumnFilter
-        unstable_headerFilters
+        headerFilters
         slots={{
           headerFilterMenu: null,
         }}

diff --git a/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx b/docs/data/data-grid/filtering/SimpleHeaderFilteringDataGridPro.tsx
@@ -22,7 +22,7 @@ export default function SimpleHeaderFilteringDataGridPro() {
           },
         }}
         disableColumnFilter
-        unstable_headerFilters
+        headerFilters
         slots={{
           headerFilterMenu: null,
         }}

diff --git a/docs/data/data-grid/filtering/header-filters.md b/docs/data/data-grid/filtering/header-filters.md
@@ -7,11 +7,6 @@ title: Data Grid - Header filters
 <p class="description">Quickly accessible per-column filters on grid header.</p>
 
 :::warning
-This feature is unstable, it needs to be explicitly activated using the `unstable_headerFilters` prop.
-
-```tsx
-<DataGridPro unstable_headerFilters {...otherProps} />
-```
 
 To use header filters, you need to upgrade to the [Pro plan](/x/introduction/licensing/#pro-plan) or above.
 

diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md
@@ -180,6 +180,16 @@ Below are described the steps you need to make to migrate from v6 to v7.
 - The Quick Filter now ignores hidden columns by default.
   See [Including hidden columns](/x/react-data-grid/filtering/quick-filter/#including-hidden-columns) section for more details.
 
+- The header filters feature is now stable. `unstable_` prefix is removed from prop `headerFilters` and the following exports.
+
+  | Old name                                          | New name                                 |
+  | :------------------------------------------------ | :--------------------------------------- |
+  | `unstable_gridFocusColumnHeaderFilterSelector`    | `gridFocusColumnHeaderFilterSelector`    |
+  | `unstable_gridHeaderFilteringEditFieldSelector`   | `gridHeaderFilteringEditFieldSelector`   |
+  | `unstable_gridHeaderFilteringMenuSelector`        | `gridHeaderFilteringMenuSelector`        |
+  | `unstable_gridHeaderFilteringStateSelector`       | `gridHeaderFilteringStateSelector`       |
+  | `unstable_gridTabIndexColumnHeaderFilterSelector` | `gridTabIndexColumnHeaderFilterSelector` |
+
 <!-- ### Editing
 
 - -->

diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -169,6 +169,7 @@
       }
     },
     "groupingColDef": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;object" } },
+    "headerFilters": { "type": { "name": "bool" } },
     "hideFooter": { "type": { "name": "bool" } },
     "hideFooterPagination": { "type": { "name": "bool" } },
     "hideFooterRowCount": {
@@ -611,8 +612,7 @@
       "additionalInfo": { "sx": true }
     },
     "throttleRowsMs": { "type": { "name": "number" }, "default": "0" },
-    "treeData": { "type": { "name": "bool" } },
-    "unstable_headerFilters": { "type": { "name": "bool" } }
+    "treeData": { "type": { "name": "bool" } }
   },
   "slots": [
     {

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -146,6 +146,7 @@
       }
     },
     "groupingColDef": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;object" } },
+    "headerFilters": { "type": { "name": "bool" } },
     "hideFooter": { "type": { "name": "bool" } },
     "hideFooterPagination": { "type": { "name": "bool" } },
     "hideFooterRowCount": {
@@ -549,8 +550,7 @@
       "additionalInfo": { "sx": true }
     },
     "throttleRowsMs": { "type": { "name": "number" }, "default": "0" },
-    "treeData": { "type": { "name": "bool" } },
-    "unstable_headerFilters": { "type": { "name": "bool" } }
+    "treeData": { "type": { "name": "bool" } }
   },
   "slots": [
     {

diff --git a/docs/pages/x/api/data-grid/selectors.json b/docs/pages/x/api/data-grid/selectors.json
@@ -221,6 +221,12 @@
     "description": "",
     "supportsApiRef": true
   },
+  {
+    "name": "gridFocusColumnHeaderFilterSelector",
+    "returnType": "GridColumnIdentifier | null",
+    "description": "",
+    "supportsApiRef": true
+  },
   {
     "name": "gridFocusColumnHeaderSelector",
     "returnType": "GridColumnIdentifier | null",
@@ -233,6 +239,24 @@
     "description": "",
     "supportsApiRef": false
   },
+  {
+    "name": "gridHeaderFilteringEditFieldSelector",
+    "returnType": "string | null",
+    "description": "",
+    "supportsApiRef": true
+  },
+  {
+    "name": "gridHeaderFilteringMenuSelector",
+    "returnType": "string | null",
+    "description": "",
+    "supportsApiRef": true
+  },
+  {
+    "name": "gridHeaderFilteringStateSelector",
+    "returnType": "GridHeaderFilteringState",
+    "description": "",
+    "supportsApiRef": false
+  },
   {
     "name": "gridPageCountSelector",
     "returnType": "number",
@@ -406,6 +430,12 @@
     "description": "",
     "supportsApiRef": true
   },
+  {
+    "name": "gridTabIndexColumnHeaderFilterSelector",
+    "returnType": "GridColumnIdentifier | null",
+    "description": "",
+    "supportsApiRef": true
+  },
   {
     "name": "gridTabIndexColumnHeaderSelector",
     "returnType": "GridColumnIdentifier | null",
@@ -483,40 +513,10 @@
     "description": "",
     "supportsApiRef": true
   },
-  {
-    "name": "unstable_gridFocusColumnHeaderFilterSelector",
-    "returnType": "GridColumnIdentifier | null",
-    "description": "",
-    "supportsApiRef": true
-  },
-  {
-    "name": "unstable_gridHeaderFilteringEditFieldSelector",
-    "returnType": "string | null",
-    "description": "",
-    "supportsApiRef": true
-  },
-  {
-    "name": "unstable_gridHeaderFilteringMenuSelector",
-    "returnType": "string | null",
-    "description": "",
-    "supportsApiRef": true
-  },
-  {
-    "name": "unstable_gridHeaderFilteringStateSelector",
-    "returnType": "GridHeaderFilteringState",
-    "description": "",
-    "supportsApiRef": false
-  },
   {
     "name": "unstable_gridTabIndexColumnGroupHeaderSelector",
     "returnType": "GridColumnGroupIdentifier | null",
     "description": "",
     "supportsApiRef": true
-  },
-  {
-    "name": "unstable_gridTabIndexColumnHeaderFilterSelector",
-    "returnType": "GridColumnIdentifier | null",
-    "description": "",
-    "supportsApiRef": true
   }
 ]
diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json
@@ -323,6 +323,11 @@
       "deprecated": "",
       "typeDescriptions": {}
     },
+    "headerFilters": {
+      "description": "If <code>true</code>, enables the data grid filtering on header feature.",
+      "deprecated": "",
+      "typeDescriptions": {}
+    },
     "hideFooter": {
       "description": "If <code>true</code>, the footer component is hidden.",
       "deprecated": "",
@@ -945,11 +950,6 @@
       "description": "If <code>true</code>, the rows will be gathered in a tree structure according to the <code>getTreeDataPath</code> prop.",
       "deprecated": "",
       "typeDescriptions": {}
-    },
-    "unstable_headerFilters": {
-      "description": "If <code>true</code>, enables the data grid filtering on header feature.",
-      "deprecated": "",
-      "typeDescriptions": {}
     }
   },
   "classDescriptions": {

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json
@@ -275,6 +275,11 @@
       "deprecated": "",
       "typeDescriptions": {}
     },
+    "headerFilters": {
+      "description": "If <code>true</code>, enables the data grid filtering on header feature.",
+      "deprecated": "",
+      "typeDescriptions": {}
+    },
     "hideFooter": {
       "description": "If <code>true</code>, the footer component is hidden.",
       "deprecated": "",
@@ -843,11 +848,6 @@
       "description": "If <code>true</code>, the rows will be gathered in a tree structure according to the <code>getTreeDataPath</code> prop.",
       "deprecated": "",
       "typeDescriptions": {}
-    },
-    "unstable_headerFilters": {
-      "description": "If <code>true</code>, enables the data grid filtering on header feature.",
-      "deprecated": "",
-      "typeDescriptions": {}
     }
   },
   "classDescriptions": {

diff --git a/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
@@ -431,6 +431,11 @@ DataGridPremiumRaw.propTypes = {
    * The grouping column used by the tree data.
    */
   groupingColDef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, enables the data grid filtering on header feature.
+   * @default false
+   */
+  headerFilters: PropTypes.bool,
   /**
    * If `true`, the footer component is hidden.
    * @default false
@@ -1034,9 +1039,4 @@ DataGridPremiumRaw.propTypes = {
    * @default false
    */
   treeData: PropTypes.bool,
-  /**
-   * If `true`, enables the data grid filtering on header feature.
-   * @default false
-   */
-  unstable_headerFilters: PropTypes.bool,
 } as any;
diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
@@ -383,6 +383,11 @@ DataGridProRaw.propTypes = {
    * The grouping column used by the tree data.
    */
   groupingColDef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  /**
+   * If `true`, enables the data grid filtering on header feature.
+   * @default false
+   */
+  headerFilters: PropTypes.bool,
   /**
    * If `true`, the footer component is hidden.
    * @default false
@@ -938,9 +943,4 @@ DataGridProRaw.propTypes = {
    * @default false
    */
   treeData: PropTypes.bool,
-  /**
-   * If `true`, enables the data grid filtering on header feature.
-   * @default false
-   */
-  unstable_headerFilters: PropTypes.bool,
 } as any;
diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts b/packages/grid/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts
@@ -31,7 +31,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES: DataGridProPropsWithDefaultValu
   rowReordering: false,
   rowsLoadingMode: 'client',
   getDetailPanelHeight: () => 500,
-  unstable_headerFilters: false,
+  headerFilters: false,
 };
 
 const defaultSlots = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;