search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.14k stars 1.29k forks source link

[data grid] FilterPanel column select menu is not customizable #5102

Open michGreg opened 2 years ago

michGreg commented 2 years ago

Duplicates

Latest version

Current behavior 😯

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

image

Expected behavior 🤔

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

Steps to reproduce 🕹

Steps:

1. 2. 3. 4.

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 (https://github.com/mui/material-ui/issues/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 commented 2 years ago

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 commented 7 months ago

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 commented 7 months ago

cc @cherniavskii

Incin commented 3 days ago

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.