[data grid] FilterPanel column select menu is not customizable

[michGreg]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

It is not possible customize FilterPanel column select menu because native select is used as component.

Expected behavior 🤔

Posibility set styles via componentProps: { filterFormProps: { columnInputProps: .....} } , or possibility use custom component.

Steps to reproduce 🕹

Steps:

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID 💳 (optional)

No response

[m4theushw]

You can change to use the non-native select with

<DataGrid componentsProps={{ baseSelect: { native: false } }} />

Note that it will change all selects. You can also pass a custom component to components.BaseSelect but it will also change all selects. We don't have yet an option to pass props only to this specific select.

Which styles do you want to apply? Do the CSS classes are not sufficient?

[michGreg]

Thanks, that's it.
I need it because we use mui inputs with styled menu, but i can not set e.g. border-radius for menu with native input and the input's menu looks different than all others inputs.
Why datagrid does not use mui components as default?

[m4theushw]

Why datagrid does not use mui components as default?

The filter panel uses the ClickAwayListener. By default, this component doesn't work with the non-native Select (mui/material-ui#25578). In #4361, we enabled an option that allowed to use the non-native variant. In v6 we may want to make this the default behavior.

[flaviendelangle]

It would be nice to add it to the v6 issue if we do want to make this the default behavior.
I think I make sense to do it.

cc @joserodolfofreitas

[etlos]

The current list of columns seems to list all available columns, including hidden ones.

In our organization, we have a page which uses the DataGridPremium, with 87 available columns. Most of which are hidden by default.
We would like the possibility to provide a custom component to this slot, like an Autocomplete wrapper component, making it possible to filter the list of columns.

Overriding the entire filterPanel seems excessive when all we want is an input that can filter the list of columns before selection.
@flaviendelangle Is this someting you plan on implementing, or are we better off with just creating a custom filter panel?

[flaviendelangle]

cc @cherniavskii

[Incin]

This has been a problem for our organization as well. From all of my tinkering and looking into this, I think the only option is to create a custom filter panel. Our list is huge and we want an autocomplete so we can filter it as well as add the list item component for the menu to allow for subtitles. It is extremely strange to me that it is not customizable as most mui items allow for different components to be passed in as props to override stuff.