fix filter value in filter button tooltip

Author: Владимир Колесников

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import Rating from '@mui/material/Rating';
-import { DataGrid } from '@mui/x-data-grid';
+import { DataGrid, GridToolbarFilterButton } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 function RatingInputValue(props) {
@@ -88,6 +88,7 @@ const ratingOnlyOperators = [
     },
     InputComponent: RatingInputValue,
     InputComponentProps: { type: 'number' },
+    getValueAsString: (value) => `${value} starts`,
   },
 ];
 
@@ -116,6 +117,9 @@ export default function CustomRatingOperator() {
   return (
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
+        components={{
+          Toolbar: GridToolbarFilterButton,
+        }}
         {...data}
         columns={columns}
         initialState={{

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

@@ -62,6 +62,7 @@ const ratingOnlyOperators: GridFilterOperator[] = [
     },
     InputComponent: RatingInputValue,
     InputComponentProps: { type: 'number' },
+    getValueAsString: (value: number) => `${value} stars`, 
   },
 ];
 

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

@@ -203,6 +203,10 @@ The [`valueFormatter`](/x/react-data-grid/column-definition/#value-formatter) is
 If the column has a [`valueGetter`](/x/react-data-grid/column-definition/#value-getter), then `params.value` will be the resolved value.
 :::
 
+:::info
+The `getValueAsString` function allows you to convert the value of a filter item to a human-readable form before displayed in the UI of filter button tooltip.
+:::
+
 In the demo below, you can see how to create a completely new operator for the Rating column.
 
 {{"demo": "CustomRatingOperator.js", "bg": "inline", "defaultCodeOpen": false}}

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

@@ -17,6 +17,7 @@ import { GridFilterOperator } from '@mui/x-data-grid';
 | 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;V, R, 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">InputComponent<sup><abbr title="optional">?</abbr></sup></span>      | <span class="prop-type">React.JSXElementConstructor&lt;GridFilterInputValueProps&gt; \| React.JSXElementConstructor&lt;GridFilterInputMultipleValueProps&gt; \| React.JSXElementConstructor&lt;GridFilterInputMultipleSingleSelectProps&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.                                                                                                                                                           |

packages/grid/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx

@@ -77,6 +77,14 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
           .getLocaleText(`filterOperator${capitalize(item.operator!)}` as GridTranslationKeys)!
           .toString();
 
+      const getFilterItemValue = (item: GridFilterItem): string => {
+        const { getValueAsString } = lookup[item.field!].filterOperators!.find(
+          (operator) => operator.value === item.operator,
+        )!;
+
+        return getValueAsString ? getValueAsString(item.value) : item.value;
+      };
+
       return (
         <div>
           {apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length)}
@@ -86,7 +94,7 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
                 <li key={index}>
                   {`${lookup[item.field!].headerName || item.field}
                   ${getOperatorLabel(item)}
-                  ${item.value ?? ''}`}
+                  ${item.value ? getFilterItemValue(item.value) : ''}`}
                 </li>
               )),
             }))}

packages/grid/x-data-grid/src/models/gridFilterOperator.ts

@@ -42,6 +42,12 @@ export interface GridFilterOperator<R extends GridValidRowModel = any, V = any,
    * The props to pass to the input component in the filter panel for this filter operator.
    */
   InputComponentProps?: Record<string, any>;
+  /**
+   * Converts the value of a filter item to a human-readable form.
+   * @param {GridFilterItem['value']} value The filter item value.
+   * @returns {string} The value formatted to be displayed in the UI of filter button tooltip.
+   */
+  getValueAsString?: (value: GridFilterItem['value']) => string;
   /**
    * If `false`, filter operator doesn't require user-entered value to work.
    * Usually should be set to `false` for filter operators that don't have `InputComponent` (for example `isEmpty`)