[DataGrid] Improve the invalid sortModel and filterModel warnings

docs/data/data-grid/components/CustomSortIcons.js

@@ -35,10 +35,7 @@ export default function CustomSortIcons() {
       <DataGrid
         columns={columns}
         rows={rows}
-        sortModel={[
-          { field: 'name', sort: 'asc' },
-          { field: 'stars', sort: 'desc' },
-        ]}
+        sortModel={[{ field: 'name', sort: 'asc' }]}
         components={{
           ColumnSortedDescendingIcon: SortedDescendingIcon,
           ColumnSortedAscendingIcon: SortedAscendingIcon,

docs/data/data-grid/components/CustomSortIcons.tsx

@@ -35,10 +35,7 @@ export default function CustomSortIcons() {
       <DataGrid
         columns={columns}
         rows={rows}
-        sortModel={[
-          { field: 'name', sort: 'asc' },
-          { field: 'stars', sort: 'desc' },
-        ]}
+        sortModel={[{ field: 'name', sort: 'asc' }]}
         components={{
           ColumnSortedDescendingIcon: SortedDescendingIcon,
           ColumnSortedAscendingIcon: SortedAscendingIcon,

docs/data/data-grid/components/CustomSortIcons.tsx.preview

@@ -1,10 +1,7 @@
 <DataGrid
   columns={columns}
   rows={rows}
-  sortModel={[
-    { field: 'name', sort: 'asc' },
-    { field: 'stars', sort: 'desc' },
-  ]}
+  sortModel={[{ field: 'name', sort: 'asc' }]}
   components={{
     ColumnSortedDescendingIcon: SortedDescendingIcon,
     ColumnSortedAscendingIcon: SortedAscendingIcon,

docs/data/data-grid/filtering/CustomInputComponent.js

@@ -63,6 +63,7 @@ RatingInputValue.propTypes = {
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     /**
      * The name of the operator we want to apply.
+     * Will become required on `@mui/x-data-grid@6.X`.
      */
     operatorValue: PropTypes.string,
     /**

docs/data/data-grid/filtering/CustomMultiValueOperator.js

@@ -101,6 +101,7 @@ InputNumberInterval.propTypes = {
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     /**
      * The name of the operator we want to apply.
+     * Will become required on `@mui/x-data-grid@6.X`.
      */
     operatorValue: PropTypes.string,
     /**

docs/data/data-grid/filtering/CustomRatingOperator.js

@@ -63,6 +63,7 @@ RatingInputValue.propTypes = {
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     /**
      * The name of the operator we want to apply.
+     * Will become required on `@mui/x-data-grid@6.X`.
      */
     operatorValue: PropTypes.string,
     /**

docs/pages/api-docs/data-grid/data-grid.json

@@ -44,7 +44,12 @@
       "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
       "default": "\"client\""
     },
-    "filterModel": { "type": { "name": "custom", "description": "any" } },
+    "filterModel": {
+      "type": {
+        "name": "shape",
+        "description": "{ items: Array&lt;{ columnField: string, id?: number<br>&#124;&nbsp;string, operatorValue?: string, value?: any }&gt;, linkOperator?: 'and'<br>&#124;&nbsp;'or' }"
+      }
+    },
     "getCellClassName": { "type": { "name": "func" } },
     "getDetailPanelContent": { "type": { "name": "func" } },
     "getRowClassName": { "type": { "name": "func" } },

docs/pages/api-docs/data-grid/grid-filter-item.md

@@ -16,5 +16,5 @@ import { GridFilterItem } from '@mui/x-data-grid';
 | :---------------------------------------------------------------------------------------------- | :---------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- |
 | <span class="prop-name">columnField</span>                                                      | <span class="prop-type">string</span>           | The column from which we want to filter the rows.                                                                                       |
 | <span class="prop-name optional">id<sup><abbr title="optional">?</abbr></sup></span>            | <span class="prop-type">number \| string</span> | Must be unique.<br />Only useful when the model contains several items.                                                                 |
-| <span class="prop-name optional">operatorValue<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span>           | The name of the operator we want to apply.                                                                                              |
+| <span class="prop-name optional">operatorValue<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span>           | The name of the operator we want to apply.<br />Will become required on `@mui/x-data-grid@6.X`.                                         |
 | <span class="prop-name optional">value<sup><abbr title="optional">?</abbr></sup></span>         | <span class="prop-type">any</span>              | The filtering value.<br />The operator filtering function will decide for each row if the row values is correct compared to this value. |

docs/pages/x/api/data-grid/data-grid.json

@@ -44,7 +44,12 @@
       "type": { "name": "enum", "description": "'client'<br>&#124;&nbsp;'server'" },
       "default": "\"client\""
     },
-    "filterModel": { "type": { "name": "custom", "description": "any" } },
+    "filterModel": {
+      "type": {
+        "name": "shape",
+        "description": "{ items: Array&lt;{ columnField: string, id?: number<br>&#124;&nbsp;string, operatorValue?: string, value?: any }&gt;, linkOperator?: 'and'<br>&#124;&nbsp;'or' }"
+      }
+    },
     "getCellClassName": { "type": { "name": "func" } },
     "getDetailPanelContent": { "type": { "name": "func" } },
     "getRowClassName": { "type": { "name": "func" } },

docs/pages/x/api/data-grid/grid-filter-item.md

@@ -16,5 +16,5 @@ import { GridFilterItem } from '@mui/x-data-grid';
 | :---------------------------------------------------------------------------------------------- | :---------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------- |
 | <span class="prop-name">columnField</span>                                                      | <span class="prop-type">string</span>           | The column from which we want to filter the rows.                                                                                       |
 | <span class="prop-name optional">id<sup><abbr title="optional">?</abbr></sup></span>            | <span class="prop-type">number \| string</span> | Must be unique.<br />Only useful when the model contains several items.                                                                 |
-| <span class="prop-name optional">operatorValue<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span>           | The name of the operator we want to apply.                                                                                              |
+| <span class="prop-name optional">operatorValue<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">string</span>           | The name of the operator we want to apply.<br />Will become required on `@mui/x-data-grid@6.X`.                                         |
 | <span class="prop-name optional">value<sup><abbr title="optional">?</abbr></sup></span>         | <span class="prop-type">any</span>              | The filtering value.<br />The operator filtering function will decide for each row if the row values is correct compared to this value. |

packages/grid/_modules_/grid/hooks/features/filter/gridFilterUtils.ts

@@ -3,38 +3,21 @@ import { GridFilterItem, GridFilterModel, GridLinkOperator, GridRowId } from '..
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridAggregatedFilterItemApplier } from './gridFilterState';
+import { buildWarning } from '../../../utils/warning';
 
 type GridFilterItemApplier = {
   fn: (rowId: GridRowId) => boolean;
   item: GridFilterItem;
 };
 
-export const mergeStateWithFilterModel = (
-  filterModel: GridFilterModel,
-  disableMultipleColumnsFiltering: boolean,
-) => {
-  const cleanFilterModel = { ...filterModel };
-  if (cleanFilterModel.items.length > 1 && disableMultipleColumnsFiltering) {
-    cleanFilterModel.items = [cleanFilterModel.items[0]];
-  }
-
-  return (state: GridStateCommunity): GridStateCommunity => ({
-    ...state,
-    filter: {
-      ...state.filter,
-      filterModel,
-    },
-  });
-};
-
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
  * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
  * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operatorValue.
  * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
  */
-export const cleanFilterItem = (
+const cleanFilterItem = (
   item: GridFilterItem,
   apiRef: React.MutableRefObject<GridApiCommunity>,
 ) => {
@@ -53,6 +36,82 @@ export const cleanFilterItem = (
   return cleanItem;
 };
 
+const filterModelDisableMultiColumnsFilteringWarning = buildWarning(
+  [
+    'MUI: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.',
+    'If you are using the community version of the `DataGrid`, this prop is always `true`.',
+  ],
+  'error',
+);
+
+const filterModelMissingItemIdWarning = buildWarning(
+  "MUI: The 'id' field is required on `filterModel.items` when you use multiple filters.",
+  'error',
+);
+
+const filterModelMissingItemOperatorWarning = buildWarning([
+  'MUI: One of your filtering item have no `operatorValue` provided.',
+  'This property will become required on `@mui/x-data-grid@6.X`.',
+]);
+
+export const sanitizeFilterModel = (
+  model: GridFilterModel,
+  disableMultipleColumnsFiltering: boolean,
+  apiRef: React.MutableRefObject<GridApiCommunity>,
+) => {
+  const hasSeveralItems = model.items.length > 1;
+
+  let items: GridFilterItem[];
+  if (hasSeveralItems && disableMultipleColumnsFiltering) {
+    filterModelDisableMultiColumnsFilteringWarning();
+
+    items = [model.items[0]];
+  } else {
+    items = model.items;
+  }
+
+  const hasItemsWithoutIds = hasSeveralItems && items.some((item) => item.id == null);
+  const hasItemWithoutOperator = items.some((item) => item.operatorValue == null);
+
+  if (hasItemsWithoutIds) {
+    filterModelMissingItemIdWarning();
+  }
+
+  if (hasItemWithoutOperator) {
+    filterModelMissingItemOperatorWarning();
+  }
+
+  if (hasItemWithoutOperator || hasItemsWithoutIds) {
+    return {
+      ...model,
+      items: items.map((item) => cleanFilterItem(item, apiRef)),
+    };
+  }
+
+  if (model.items !== items) {
+    return {
+      ...model,
+      items,
+    };
+  }
+
+  return model;
+};
+
+export const mergeStateWithFilterModel =
+  (
+    filterModel: GridFilterModel,
+    disableMultipleColumnsFiltering: boolean,
+    apiRef: React.MutableRefObject<GridApiCommunity>,
+  ) =>
+  (state: GridStateCommunity): GridStateCommunity => ({
+    ...state,
+    filter: {
+      ...state.filter,
+      filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef),
+    },
+  });
+
 /**
  * Generates a method to easily check if a row is matching the current filter model.
  * @param {GridFilterModel} filterModel The model with which we want to filter the rows.

packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts

@@ -16,7 +16,6 @@ import {
   GridFilteringMethod,
   GridFilteringMethodCollection,
 } from './gridFilterState';
-import { GridFilterModel } from '../../../models/gridFilterModel';
 import { gridFilterModelSelector, gridVisibleSortedRowEntriesSelector } from './gridFilterSelector';
 import { useGridStateInit } from '../../utils/useGridStateInit';
 import { useFirstRender } from '../../utils/useFirstRender';
@@ -25,21 +24,10 @@ import { GridPreProcessor, useGridRegisterPreProcessor } from '../../core/prePro
 import { useGridRegisterFilteringMethod } from './useGridRegisterFilteringMethod';
 import {
   buildAggregatedFilterApplier,
-  cleanFilterItem,
+  sanitizeFilterModel,
   mergeStateWithFilterModel,
 } from './gridFilterUtils';
 
-const checkFilterModelValidity = (model: GridFilterModel) => {
-  if (model.items.length > 1) {
-    const hasItemsWithoutIds = model.items.find((item) => item.id == null);
-    if (hasItemsWithoutIds) {
-      throw new Error(
-        "MUI: The 'id' field is required on `filterModel.items` when you use multiple filters.",
-      );
-    }
-  }
-};
-
 /**
  * @requires useGridColumns (state, method, event)
  * @requires useGridParamsApi (method)
@@ -61,17 +49,17 @@ export const useGridFilter = (
   const lastFilteringMethodApplied = React.useRef<GridFilteringMethod | null>(null);
 
   useGridStateInit(apiRef, (state) => {
-    if (props.filterModel) {
-      checkFilterModelValidity(props.filterModel);
-    }
+    const filterModel =
+      props.filterModel ?? props.initialState?.filter?.filterModel ?? getDefaultGridFilterModel();
 
     return {
       ...state,
       filter: {
-        filterModel:
-          props.filterModel ??
-          props.initialState?.filter?.filterModel ??
-          getDefaultGridFilterModel(),
+        filterModel: sanitizeFilterModel(
+          filterModel,
+          props.disableMultipleColumnsFiltering,
+          apiRef,
+        ),
         visibleRowsLookup: {},
         filteredDescendantCountLookup: {},
       },
@@ -125,11 +113,10 @@ export const useGridFilter = (
       const filterModel = gridFilterModelSelector(apiRef);
       const items = [...filterModel.items];
       const itemIndex = items.findIndex((filterItem) => filterItem.id === item.id);
-      const newItem = cleanFilterItem(item, apiRef);
       if (itemIndex === -1) {
-        items.push(newItem);
+        items.push(item);
       } else {
-        items[itemIndex] = newItem;
+        items[itemIndex] = item;
       }
       apiRef.current.setFilterModel({ ...filterModel, items });
     },
@@ -165,12 +152,9 @@ export const useGridFilter = (
         if (filterItemOnTarget) {
           newFilterItems = filterItemsWithValue;
         } else if (props.disableMultipleColumnsFiltering) {
-          newFilterItems = [cleanFilterItem({ columnField: targetColumnField }, apiRef)];
+          newFilterItems = [{ columnField: targetColumnField }];
         } else {
-          newFilterItems = [
-            ...filterItemsWithValue,
-            cleanFilterItem({ columnField: targetColumnField }, apiRef),
-          ];
+          newFilterItems = [...filterItemsWithValue, { columnField: targetColumnField }];
         }
 
         apiRef.current.setFilterModel({
@@ -206,11 +190,9 @@ export const useGridFilter = (
     (model) => {
       const currentModel = gridFilterModelSelector(apiRef);
       if (currentModel !== model) {
-        checkFilterModelValidity(model);
-
         logger.debug('Setting filter model');
         apiRef.current.setState(
-          mergeStateWithFilterModel(model, props.disableMultipleColumnsFiltering),
+          mergeStateWithFilterModel(model, props.disableMultipleColumnsFiltering, apiRef),
         );
         apiRef.current.unstable_applyFilters();
       }
@@ -266,7 +248,7 @@ export const useGridFilter = (
         return params;
       }
       apiRef.current.setState(
-        mergeStateWithFilterModel(filterModel, props.disableMultipleColumnsFiltering),
+        mergeStateWithFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef),
       );
 
       return {

packages/grid/_modules_/grid/hooks/features/sorting/gridSortingUtils.ts

@@ -9,6 +9,7 @@ import {
   GridSortModel,
   GridSortCellParams,
 } from '../../../models/gridSortModel';
+import { buildWarning } from '../../../utils/warning';
 
 type GridSortingFieldComparator = {
   getSortCellParams: (id: GridRowId) => GridSortCellParams;
@@ -20,13 +21,30 @@ interface GridParsedSortItem {
   getSortCellParams: (id: GridRowId) => GridSortCellParams;
 }
 
+const sortModelDisableMultiColumnsSortingWarning = buildWarning(
+  [
+    'MUI: The `sortModel` can only contain a single item when the `disableMultipleColumnsSorting` prop is set to `true`.',
+    'If you are using the community version of the `DataGrid`, this prop is always `true`.',
+  ],
+  'error',
+);
+
+export const sanitizeSortModel = (model: GridSortModel, disableMultipleColumnsSorting: boolean) => {
+  if (disableMultipleColumnsSorting && model.length > 1) {
+    sortModelDisableMultiColumnsSortingWarning();
+    return [model[0]];
+  }
+
+  return model;
+};
+
 export const mergeStateWithSortModel =
-  (sortModel: GridSortModel) =>
+  (sortModel: GridSortModel, disableMultipleColumnsSorting: boolean) =>
   (state: GridStateCommunity): GridStateCommunity => ({
     ...state,
     sorting: {
       ...state.sorting,
-      sortModel,
+      sortModel: sanitizeSortModel(sortModel, disableMultipleColumnsSorting),
     },
   });