[DataGrid] Filtering performance: V7 API

docs/data/data-grid/filtering/customization.md

@@ -179,6 +179,38 @@ The demo below shows how to anchor the filter panel to the toolbar button instea
 
 {{"demo": "CustomFilterPanelPosition.js", "bg": "inline", "defaultCodeOpen": false}}
 
+### Optimize performance
+
+There is a new set of APIs with a more efficient interface that are going to be used by default at the next major release, V7.
+
+You can use them right now to make your custom filters faster. Instead of receiving a `GridCellParams` argument, they receive the parameters listed below.
+
+```ts
+const noop = () => {};
+const operator: GridFilterOperator = {
+  /* ...other operator properties */
+  getApplyFilterFn: noop /* It is required to pass a noop function until V7 */,
+  getApplyFilterFnV7: (filterItem: GridFilterItem) => {
+    /* This example is our default string filter function for V7 */
+
+    if (!filterItem.value) {
+      return null;
+    }
+    const filterItemValue = disableTrim ? filterItem.value : filterItem.value.trim();
+    const filterRegex = new RegExp(escapeRegExp(filterItemValue), 'i');
+
+    return (
+      value: any,
+      row: GridValidRowModel,
+      column: GridColDef,
+      apiRef: React.MutableRefObject<GridApiCommunity>,
+    ): boolean => {
+      return value != null ? filterRegex.test(String(value)) : false;
+    };
+  },
+};
+```
+
 ## API
 
 - [GridFilterOperator](/x/api/data-grid/grid-filter-operator/)

docs/data/data-grid/performance/performance.md

@@ -48,6 +48,10 @@ shows you which cells re-render in reaction to your interaction with the grid.
 
 {{"demo": "GridVisualization.js", "bg": "inline", "defaultCodeOpen": false}}
 
+## Filtering
+
+For filtering performance, see [the filter customization section](/x/react-data-grid/filtering/customization/#optimize-performance).
+
 ## API
 
 - [DataGrid](/x/api/data-grid/data-grid/)

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

@@ -23,13 +23,14 @@ import { GridFilterOperator } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                                                                                  | Type                                                                                                                                                                 | Default                                | Description                                                                                                                                                                                 |
-| :---------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| <span class="prop-name">getApplyFilterFn</span>                                                       | <span class="prop-type">(filterItem: GridFilterItem, column: GridColDef&lt;R, V, F&gt;) =&gt; null \| ((params: GridCellParams&lt;R, V, F&gt;) =&gt; boolean)</span> |                                        | The callback that generates a filtering function for a given filter item and column.<br />This function can return `null` to skip filtering for this item and column.                       |
-| <span class="prop-name optional">getValueAsString<sup><abbr title="optional">?</abbr></sup></span>    | <span class="prop-type">(value: GridFilterItem['value']) =&gt; string</span>                                                                                         |                                        | Converts the value of a filter item to a human-readable form.                                                                                                                               |
-| <span class="prop-name optional">headerLabel<sup><abbr title="optional">?</abbr></sup></span>         | <span class="prop-type">string</span>                                                                                                                                |                                        | The label of the filter shown in header filter row.                                                                                                                                         |
-| <span class="prop-name optional">InputComponent<sup><abbr title="optional">?</abbr></sup></span>      | <span class="prop-type">React.JSXElementConstructor&lt;any&gt;</span>                                                                                                |                                        | The input component to render in the filter panel for this filter operator.                                                                                                                 |
-| <span class="prop-name optional">InputComponentProps<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">Record&lt;string, any&gt;</span>                                                                                                             |                                        | The props to pass to the input component in the filter panel for this filter operator.                                                                                                      |
-| <span class="prop-name optional">label<sup><abbr title="optional">?</abbr></sup></span>               | <span class="prop-type">string</span>                                                                                                                                |                                        | The label of the filter operator.                                                                                                                                                           |
-| <span class="prop-name optional">requiresFilterValue<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span>                                                                                                                               | <span class="prop-default">true</span> | If `false`, filter operator doesn't require user-entered value to work.<br />Usually should be set to `false` for filter operators that don't have `InputComponent` (for example `isEmpty`) |
-| <span class="prop-name">value</span>                                                                  | <span class="prop-type">string</span>                                                                                                                                |                                        | The name of the filter operator.<br />It will be matched with the `operator` property of the filter items.                                                                                  |
+| Name                                                                                                  | Type                                                                         | Default                                | Description                                                                                                                                                                                                               |
+| :---------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------- | :------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| <span class="prop-name">getApplyFilterFn</span>                                                       | <span class="prop-type">GetApplyFilterFnLegacy&lt;R, V, F&gt;</span>         |                                        | The callback that generates a filtering function for a given filter item and column.<br />This function can return `null` to skip filtering for this item and column.                                                     |
+| <span class="prop-name optional">getApplyFilterFnV7<sup><abbr title="optional">?</abbr></sup></span>  | <span class="prop-type">GetApplyFilterFnV7&lt;R, V, F&gt;</span>             |                                        | The callback that generates a filtering function for a given filter item and column.<br />This function can return `null` to skip filtering for this item and column.<br />This function uses the more performant V7 API. |
+| <span class="prop-name optional">getValueAsString<sup><abbr title="optional">?</abbr></sup></span>    | <span class="prop-type">(value: GridFilterItem['value']) =&gt; string</span> |                                        | Converts the value of a filter item to a human-readable form.                                                                                                                                                             |
+| <span class="prop-name optional">headerLabel<sup><abbr title="optional">?</abbr></sup></span>         | <span class="prop-type">string</span>                                        |                                        | The label of the filter shown in header filter row.                                                                                                                                                                       |
+| <span class="prop-name optional">InputComponent<sup><abbr title="optional">?</abbr></sup></span>      | <span class="prop-type">React.JSXElementConstructor&lt;any&gt;</span>        |                                        | The input component to render in the filter panel for this filter operator.                                                                                                                                               |
+| <span class="prop-name optional">InputComponentProps<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">Record&lt;string, any&gt;</span>                     |                                        | The props to pass to the input component in the filter panel for this filter operator.                                                                                                                                    |
+| <span class="prop-name optional">label<sup><abbr title="optional">?</abbr></sup></span>               | <span class="prop-type">string</span>                                        |                                        | The label of the filter operator.                                                                                                                                                                                         |
+| <span class="prop-name optional">requiresFilterValue<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span>                                       | <span class="prop-default">true</span> | If `false`, filter operator doesn't require user-entered value to work.<br />Usually should be set to `false` for filter operators that don't have `InputComponent` (for example `isEmpty`)                               |
+| <span class="prop-name">value</span>                                                                  | <span class="prop-type">string</span>                                        |                                        | The name of the filter operator.<br />It will be matched with the `operator` property of the filter items.                                                                                                                |