[data grid] Customize GridColumnsPanel search function

[teryngull]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Hello, in the existing code

mui-x/packages/grid/x-data-grid/src/components/panel/GridColumnsPanel.tsx

Line 141 in 58fc98f

const currentColumns = React.useMemo(() => {

it appears to look for a headerName or the field to filter the search results for the columns in the GridColumnsPanel. It would be nice if this could also look at the description. We have a column called MPH, but we would like to be able to search for "Mile" and find this column in the list, based on the description being "Miles per hour". This is a change that would affect everyone, and not everyone may like this, so, it might be nice if there was a way to indicate what fields it should search across or to customize this search function instead.

I found this previous PR, which changed the logic to what it has today:
#3959

Examples 🌈

No response

Motivation 🔦

Our column headers typically will have an abbreviation in it, and the description column will have the fully spelled out names available when hovering over these column headers. For example, we have a column that we have titled "MPH" as the headerName, and the description is "Miles per hour". When searching for a field in the columns panel, we'd like to show this column when searching for "mile" and not just "MPH".

Searching for "mph" returns the column:

Searching for "mile", however, does not return this column.

Order ID 💳 (optional)

42641

[cherniavskii]

Hey @teryngull
Thanks for opening this issue!

We can add a prop to GridColumnsPanel component that will override default filter predicate function:

const columnsSearchPredicate = (column: GridStateColDef, searchValue: string) => {
  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1
    || (column.description || '').toLowerCase().indexOf(searchValue) > -1;
}

<DataGrid
  // ...
  componentsProps={{
    columnsPanel: {
      searchPredicate: columnsSearchPredicate,
    }
  }}
/>

Would that work for you?

[teryngull]

Yes, that would work perfectly!