[DataGrid] Add searchPredicate prop to GridColumnsPanel component (…

…#6572)
mui · Oct 20, 2022 · 90fb123 · 90fb123
1 parent 87e6abc
commit 90fb123
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 7 deletions.
diff --git a/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx b/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx
@@ -20,6 +20,7 @@ import { GRID_EXPERIMENTAL_ENABLED } from '../../constants/envConstants';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { GridStateColDef } from '../../models/colDef/gridColDef';
 
 type OwnerState = { classes: DataGridProcessedProps['classes'] };
 
@@ -65,10 +66,18 @@ export interface GridColumnsPanelProps extends GridPanelWrapperProps {
    * If not specified, the order is derived from the `columns` prop.
    */
   sort?: 'asc' | 'desc';
+  searchPredicate?: (column: GridStateColDef, searchValue: string) => boolean;
 }
 
 const collator = new Intl.Collator();
 
+const defaultSearchPredicate: NonNullable<GridColumnsPanelProps['searchPredicate']> = (
+  column,
+  searchValue,
+) => {
+  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
+};
+
 function GridColumnsPanel(props: GridColumnsPanelProps) {
   const apiRef = useGridApiContext();
   const searchInputRef = React.useRef<HTMLInputElement>(null);
@@ -79,7 +88,7 @@ function GridColumnsPanel(props: GridColumnsPanelProps) {
   const ownerState = { classes: rootProps.classes };
   const classes = useUtilityClasses(ownerState);
 
-  const { sort, ...other } = props;
+  const { sort, searchPredicate = defaultSearchPredicate, ...other } = props;
 
   const sortedColumns = React.useMemo(() => {
     switch (sort) {
@@ -143,11 +152,8 @@ function GridColumnsPanel(props: GridColumnsPanelProps) {
       return sortedColumns;
     }
     const searchValueToCheck = searchValue.toLowerCase();
-    return sortedColumns.filter(
-      (column) =>
-        (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1,
-    );
-  }, [sortedColumns, searchValue]);
+    return sortedColumns.filter((column) => searchPredicate(column, searchValueToCheck));
+  }, [sortedColumns, searchValue, searchPredicate]);
 
   React.useEffect(() => {
     searchInputRef.current!.focus();
@@ -222,6 +228,7 @@ GridColumnsPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  searchPredicate: PropTypes.func,
   sort: PropTypes.oneOf(['asc', 'desc']),
 } as any;
 

diff --git a/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/toolbar.DataGrid.test.tsx
@@ -3,7 +3,13 @@ import * as React from 'react';
 import { createRenderer, fireEvent, screen, act } from '@mui/monorepo/test/utils';
 import { getColumnHeadersTextContent } from 'test/utils/helperFn';
 import { expect } from 'chai';
-import { DataGrid, DataGridProps, GridToolbar, gridClasses } from '@mui/x-data-grid';
+import {
+  DataGrid,
+  DataGridProps,
+  GridToolbar,
+  gridClasses,
+  GridStateColDef,
+} from '@mui/x-data-grid';
 import {
   COMFORTABLE_DENSITY_FACTOR,
   COMPACT_DENSITY_FACTOR,
@@ -269,5 +275,48 @@ describe('<DataGrid /> - Toolbar', () => {
 
       expect(column).toHaveFocus();
     });
+
+    it('should allow to override search predicate function', () => {
+      const customColumns = [
+        {
+          field: 'id',
+          description: 'test',
+        },
+        {
+          field: 'brand',
+        },
+      ];
+
+      const columnSearchPredicate = (column: GridStateColDef, searchValue: string) => {
+        return (
+          (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1 ||
+          (column.description || '').toLowerCase().indexOf(searchValue) > -1
+        );
+      };
+
+      const { getByText } = render(
+        <div style={{ width: 300, height: 300 }}>
+          <DataGrid
+            {...baselineProps}
+            columns={customColumns}
+            components={{
+              Toolbar: GridToolbar,
+            }}
+            componentsProps={{
+              columnsPanel: {
+                searchPredicate: columnSearchPredicate,
+              },
+            }}
+          />
+        </div>,
+      );
+
+      fireEvent.click(getByText('Columns'));
+
+      const searchInput = document.querySelector('input[type="text"]')!;
+      fireEvent.change(searchInput, { target: { value: 'test' } });
+
+      expect(document.querySelector('[role="tooltip"] [name="id"]')).not.to.equal(null);
+    });
   });
 });