[data grid][docs] Revise the Pro filter docs (@mapache-salvaje) (#18815)

Signed-off-by: mapache-salvaje <[email protected]>
Co-authored-by: mapache-salvaje <[email protected]>
Co-authored-by: Andrew Cherniavskii <[email protected]>
Co-authored-by: Sycamore <[email protected]>

Author: 3 people

docs/data/data-grid/filtering/header-filters.md

@@ -4,33 +4,37 @@ title: Data Grid - Header filters
 
 # Data Grid - Header filters [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
-<p class="description">Quickly accessible per-column filters on grid header.</p>
+<p class="description">Give users quick-access column filters in the Data Grid header.</p>
 
-:::warning
+By default, users access the Data Grid's filtering features through the filter panel in the toolbar.
+The header filter feature adds a row to the top of the Data Grid Pro that lets users quickly filter columns directly in place.
+Filters added through the filter panel are synchronized with header filters, and vice versa.
 
-To use header filters, you need to upgrade to the [Pro plan](/x/introduction/licensing/#pro-plan) or above.
+In the demo below, you can switch between different operators by clicking the operator button in the header filter cell or pressing <kbd><kbd class="key">⌘ Command</kbd>+<kbd class="key">Enter</kbd></kbd> (or <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">Enter</kbd></kbd> on Windows) when focusing on a header filter cell.
 
-:::
+{{"demo": "HeaderFilteringDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
 
-Header filters add a new header row that lets users quickly filter the columns. The filters added on the filter panel are synchronized with the header filters and vice versa.
+## Implementing header filters
 
-You can switch between different operators by clicking the operator button in the header filter cell or pressing <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">Enter</kbd></kbd> (or <kbd><kbd class="key">⌘ Command</kbd>+<kbd class="key">Enter</kbd></kbd> on macOS) when focusing on a header filter cell.
+To enable header filters, pass the `headerFilters` prop to the Data Grid Pro:
 
-{{"demo": "HeaderFilteringDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
+```tsx
+<DataGridPro headerFilters>
+```
 
-## Simple header filters
+### Disabling the default filter panel
 
-You can disable the default filter panel using `disableColumnFilter` prop and only show the default operator by passing `slots.headerFilterMenu` as `null`.
+You can disable the default filter panel using the `disableColumnFilter` prop, and show only the default operator by passing `slots.headerFilterMenu` as `null`.
 
 {{"demo": "SimpleHeaderFilteringDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
 
-## Customize header filters
+## Customizing header filters
 
-There are multiple ways to customize header filters.
+You can override header filter cells individually or across the entire row.
 
-### `renderHeaderFilter` method
+### One header filter cell in a specific column
 
-You can use the `renderHeaderFilter` method of the `GridColDef` to customize the header filter cell for a specific column.
+Use the `renderHeaderFilter()` method of the `GridColDef` to customize the header filter cell for a specific column.
 
 ```tsx
 const columns: GridColDef[] = [
@@ -43,42 +47,59 @@ const columns: GridColDef[] = [
 ];
 ```
 
-The following demo uses the `renderHeaderFilter` method to customize the header filter cell for the `isAdmin` column and hide the filter cell for the `phone` column.
+The demo below uses the `renderHeaderFilter()` method to hide the header filter cell for the **Phone** column and customize it for the **Is admin?** column:
 
 {{"demo": "CustomHeaderFilterSingleDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
 
-### Customize using `filterOperators`
+### All header filter cells in every column
 
-If the filter operator has a [custom `InputComponent`](https://mui.com/x/react-data-grid/filtering/#custom-input-component), the same component is being used for the header filter.
+Use `slots.headerFilterCell` to override all header filter cells in the row with a custom component:
 
-When rendered as a header filter, the `InputComponent` also receives the `headerFilterMenu` and `clearButton` props that contain the filter operator menu and clear button.
+```tsx
+<DataGridPro {...data} slots={{ headerFilterCell: MyCustomHeaderFilterCell }} />
+```
 
-{{"demo": "CustomHeaderFilterOperatorDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
+The default slot component handles keyboard navigation and focus management, so your custom component should also account for these accessibility features.
+The demo below shows how to do this.
 
-### `headerFilterCell` slot
+{{"demo": "CustomHeaderFilterDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
 
-You can use `slots.headerFilterCell` to customize the header filter cell completely. Since the default slot component handles keyboard navigation and focus management, you may have to handle them yourself if you are using a custom component.
+:::success
+Similarly, you can use `slots.headerFilterMenu` if you need to customize the header filter menu.
+:::
 
-Additionally, `slots.headerFilterMenu` could also be used to customize the menu of the header filter cell.
+### Header filter cells with custom filter operators
 
-```tsx
-<DataGridPro {...data} slots={{ headerFilterCell: MyCustomHeaderFilterCell }} />
-```
+If you're using a [custom input component](/x/react-data-grid/filtering/customization/#custom-input-component) for the filter operator, you can use that same component in the header filter cell for a better user experience.
+The custom input component receives the `headerFilterMenu` and `clearButton` props that you can use to render the filter operator menu and **Clear filter** button, respectively.
 
-{{"demo": "CustomHeaderFilterDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
+In the demo below, the **Rating** column uses a custom input, and you can filter by clicking on a star rating in the header filter cell:
 
-### Custom header filter height
+{{"demo": "CustomHeaderFilterOperatorDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
+
+### Header filter row height
 
 By default, the height of the header filter row is the same as the header row (represented by `columnHeaderHeight` prop).
-You can customize the height of the header filter cell using the `headerFilterHeight` prop.
+You can use the the `headerFilterHeight` prop to change this:
 
 ```tsx
 <DataGridPro {...data} headerFilterHeight={52} />
 ```
 
 ## Ignore diacritics (accents)
 
-You can ignore diacritics (accents) when filtering the rows. See [Quick filter - Ignore diacritics (accents)](/x/react-data-grid/filtering/quick-filter/#ignore-diacritics-accents).
+When filtering, diacritics—accented letters such as _é_ or _à_—are considered distinct from their standard counterparts (_e_ and _a_).
+This can lead to a poor experience when users expect them to be treated as equivalent.
+
+If your dataset includes diacritics that need to be ignored, you can pass the `ignoreDiacritics` prop to the Data Grid:
+
+```tsx
+<DataGrid ignoreDiacritics />
+```
+
+:::info
+The `ignoreDiacritics` prop affects all columns and filter types, including [standard filters](/x/react-data-grid/filtering/), [quick filters](/x/react-data-grid/filtering/quick-filter/), and [header filters](/x/react-data-grid/filtering/header-filters/).
+:::
 
 ## API
 

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

@@ -157,7 +157,18 @@ To send the user back to the first page when a new filter is applied, use the `r
 
 ## Ignore diacritics (accents)
 
-You can ignore diacritics (accents) when filtering the rows. See [Quick filter - Ignore diacritics (accents)](/x/react-data-grid/filtering/quick-filter/#ignore-diacritics-accents).
+When filtering, diacritics—accented letters such as _é_ or _à_—are considered distinct from their standard counterparts (_e_ and _a_).
+This can lead to a poor experience when users expect them to be treated as equivalent.
+
+If your dataset includes diacritics that need to be ignored, you can pass the `ignoreDiacritics` prop to the Data Grid:
+
+```tsx
+<DataGrid ignoreDiacritics />
+```
+
+:::info
+The `ignoreDiacritics` prop affects all columns and filter types, including [standard filters](/x/react-data-grid/filtering/), [quick filters](/x/react-data-grid/filtering/quick-filter/), and [header filters](/x/react-data-grid/filtering/header-filters/).
+:::
 
 ## apiRef
 

docs/data/data-grid/filtering/multi-filters.md

@@ -1,34 +1,42 @@
 ---
-title: Data Grid - Multi filters
+title: Data Grid - Multi-filters
 ---
 
-# Data Grid - Multi filters [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
+# Data Grid - Multi-filters [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
 
-<p class="description">Apply multiple filters at the same time.</p>
+<p class="description">Let end users apply multiple filters to the Data Grid simultaneously.</p>
 
-Multi filters allow filtering rows by multiple columns with multiple criteria.
-To add more filters, use the `Add Filter` button on the filter panel.
+By default, it's only possible to apply one filter at a time to the Data Grid.
+With the Data Grid Pro, users can apply multiple filters based on different criteria for more fine-grained data analysis.
+They can apply multiple filters to a single column and multiple columns simultaneously.
 
-The following demo lets you filter the rows according to several criteria at the same time.
+The demo below shows how this feature works.
+Click the filter icon to open the menu and add the first filter—the Data Grid dynamically responds as you enter a value.
+Then click **Add Filter** to apply additional criteria.
 
 {{"demo": "BasicExampleDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
 
-## One filter per column
+## Implementing multi-filters
 
-You can also limit to only one filter per column while still allowing to filter other columns. For this, use the [`filterColumns`](/x/api/data-grid/grid-filter-form/) and [`getColumnForNewFilter`](/x/api/data-grid/grid-filter-panel/) props available in `slotProps.filterPanel`.
+The multi-filter feature is available by default with the Data Grid Pro and doesn't require any additional configuration.
 
-### Use cases
+### One filter per column
 
-- Sometimes it's a limitation of some server-side filtering APIs to only allow one filter per column.
-- You can also write custom logic to prevent some columns from being shown as possible filters.
-
-This demo implements a basic use case to prevent showing multiple filters for one column.
+To limit the user to only applying one filter to any given column, you can use the [`filterColumns`](/x/api/data-grid/grid-filter-form/) and [`getColumnForNewFilter`](/x/api/data-grid/grid-filter-panel/) props available to `slotProps.filterPanel` as shown in the demo below:
 
 {{"demo": "DisableMultiFiltersDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
 
-## Disable action buttons
+## Disabling multi-filters
+
+To disable multi-filtering, pass the `disableMultipleColumnsFiltering` to the Data Grid Pro.
+
+```tsx
+<DataGridPro disableMultipleColumnsFiltering />
+```
+
+### Remove multi-filter action buttons
 
-To disable `Add filter` or `Remove all` buttons, pass `disableAddFilterButton` or `disableRemoveAllButton` to `componentsProps.filterPanel`.
+To disable the **Add Filter** or **Remove All** buttons, pass `disableAddFilterButton` or `disableRemoveAllButton`, respectively, to `componentsProps.filterPanel` as shown below:
 
 {{"demo": "DisableActionButtonsDataGridPro.js", "bg": "inline", "defaultCodeOpen": false}}
 

docs/data/data-grid/filtering/quick-filter.md

@@ -128,19 +128,21 @@ In the following demo, the quick filter value `"Saint Martin, Saint Lucia"` will
 
 ## Ignore diacritics (accents)
 
-In some languages, the letters can have diacritics (accents) - for instance, the letter `é` in French.
-By default, these letters are considered different from their non-accented versions when filtering.
+When filtering, diacritics—accented letters such as _é_ or _à_—are considered distinct from their standard counterparts (_e_ and _a_).
+This can lead to a poor experience when users expect them to be treated as equivalent.
 
-To ignore diacritics, set the `ignoreDiacritics` prop to `true`:
+If your dataset includes diacritics that need to be ignored, you can pass the `ignoreDiacritics` prop to the Data Grid:
 
 ```tsx
 <DataGrid ignoreDiacritics />
 ```
 
+In the demo below, you can use the **Ignore diacritics** toggle to see how the filtering behavior changes:
+
 {{"demo": "QuickFilteringDiacritics.js", "bg": "inline", "defaultCodeOpen": false}}
 
-:::warning
-Note that the `ignoreDiacritics` prop affects all columns and all filter types: [normal filters](/x/react-data-grid/filtering/), [quick filter](/x/react-data-grid/filtering/quick-filter/) and [header filters](/x/react-data-grid/filtering/header-filters/).
+:::info
+The `ignoreDiacritics` prop affects all columns and filter types, including [standard filters](/x/react-data-grid/filtering/), [quick filters](/x/react-data-grid/filtering/quick-filter/), and [header filters](/x/react-data-grid/filtering/header-filters/).
 :::
 
 ## API