diff --git a/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx b/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx index cd70b20f857a..30ab1314ffd0 100644 --- 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 = ( + column, + searchValue, +) => { + return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1; +}; + function GridColumnsPanel(props: GridColumnsPanelProps) { const apiRef = useGridApiContext(); const searchInputRef = React.useRef(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 index ebae45838daf..1ca345054f49 100644 --- 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(' - 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( +
+ +
, + ); + + 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); + }); }); });