[data grid] Customization of Columns input in Filter panel

[TarasRospodniuk]

The problem in depth

I need to add a search input to the dropdown of the 'Columns' input. In some cases, my DataGrid may contain hundreds of columns, which makes it difficult to quickly find the desired one. To improve the user experience, I'd like to add a search field.

However, I can't find a way to do this without re-implementing the entire filter panel using slots. Is there a simpler way to achieve this?

Your environment

`npx @mui/envinfo`

 System:
    OS: macOS 15.5
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 137.0.7151.69
    Edge: Not Found
    Safari: 18.5
  npmPackages:
    @emotion/react: ^11.11.1 => 11.14.0 
    @emotion/styled: ^11.11.1 => 11.14.0 
    @mui/base:  5.0.0-dev.20240529-082515-213b5e33ab 
    @mui/core-downloads-tracker:  5.17.1 
    @mui/icons-material: 5.16.6 => 5.16.6 
    @mui/material: 5.16.6 => 5.16.6 
    @mui/private-theming:  5.17.1 
    @mui/styled-engine:  5.16.14 
    @mui/styles: 5.16.6 => 5.16.6 
    @mui/system:  5.17.1 
    @mui/types:  7.2.24 
    @mui/utils:  5.17.1 
    @mui/x-charts: ^7.7.0 => 7.28.0 
    @mui/x-charts-vendor:  7.20.0 
    @mui/x-data-grid:  8.3.1 
    @mui/x-data-grid-premium: 8.3.1 => 8.3.1 
    @mui/x-data-grid-pro:  8.3.1 
    @mui/x-date-pickers:  6.20.2 
    @mui/x-date-pickers-pro: ^6.18.4 => 6.20.2 
    @mui/x-internals:  7.28.0 
    @mui/x-license: ^7.12.0 => 7.28.0 
    @mui/x-license-pro:  6.10.2 
    @mui/x-telemetry:  8.3.1 
    @types/react: ^18.3.17 => 18.3.18 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.3.3 => 5.8.2 

Search keywords: filtering, filter panel

Order ID: 95688

[michelengelen]

There is currently no way of doing this other than creating a fully custom filter panel. I do agree though that we could extract a new slot for the FilterFormColumnInput component. Something like slots.columnSelect or similar.

Then replace the current one here: https://github.com/mui/mui-x/blob/b308766218f1eed6d27244875696193354ebd5f9/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx#L501-L526

with the slots version

            >
              {apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))}
            </rootProps.slots.baseSelectOption>
          ))}
        </FilterFormLogicOperatorInput>
-       <FilterFormColumnInput
+       <slots.columnSelect
          as={rootProps.slots.baseSelect}
          {...columnInputProps}
          className={clsx(classes.columnInput, columnInputProps.className)}
          ownerState={rootProps}

I'll add this as a feature request to the board! Thanks!

cc @KenanYusuf