[data grid] Quick Filter is not correctly applied to dynamically added columns

[Zitrooone]

Steps to reproduce

Link to live example: (required) https://codesandbox.io/p/sandbox/quick-filter-example-n2znvw Steps:

1. Type J into Quick filter input
2. Check Tree Data checkbox
3. Uncheck checkbox and find no results

Current behavior

In the regular grid, the column "name" displays the name. In the tree data grid, the column "group" displays the name. Switching from non tree data to tree data correctly applies the quick filter. Switching back does not produce a match on the column "name" after it was added dynamically. When searching for something found in the "balance" column, everything works fine.

Expected behavior

After switching from tree data to non tree data, I expect the quick filter to be applied to any columns I provide to the grid.

Context

I've built the codesandbox to accurately reproduce the environment I'm working with. I know it might be an unconventional way of hiding columns, but let me explain. We have a number of varying grids, that all allow the user to adjust column visibility as well as other grid settings. These settings are then stored in local storage. For storing the grid settings we have one generalised function that is used in the different grids. In this example, the name column is removed because it would be a duplicate of the data found in the grouping column. Working with the visibility model is not ideal due to our generalised storage function. Besides, this would allow the user to enable a column that has no meaning in the given context. I am curious to know whether this is a fundamental flaw with our architecture, or whether this could be fixed in the library. I tried it in the latest version of Chrome (122.0.6261.129) and Firefox (123.0.1).

Your environment

npx @mui/envinfo

``` System: OS: Windows 11 10.0.22631 Binaries: Node: 21.6.2 - C:\Program Files\nodejs\node.EXE npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (122.0.2365.80) npmPackages: @emotion/react: ^11.11.3 => 11.11.3 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.36 @mui/core-downloads-tracker: 5.15.9 @mui/icons-material: ^5.15.7 => 5.15.9 @mui/material: ^5.15.7 => 5.15.9 @mui/private-theming: 5.15.9 @mui/styled-engine: 5.15.9 @mui/system: 5.15.9 @mui/types: 7.2.13 @mui/utils: 5.15.9 @mui/x-data-grid: 6.19.3 @mui/x-data-grid-pro: ^6.19.3 => 6.19.3 @mui/x-date-pickers: ^6.19.3 => 6.19.3 @mui/x-license-pro: 6.10.2 @types/react: ^18.2.54 => 18.2.55 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.3.3 => 5.3.3 ```

Search keywords: quick filter data grid pro

[michelengelen]

Hey @Zitrooone, I can confirm that this behavior seems incorrect. Lets add this to the grid board for the team to evaluate and estimate! Thanks again! 🙇🏼

[michelengelen]

FYI: You can still use the visibility model and remove the hidden column from the visibility panel. It is explained in more detail in this comment

Would that work for you?

[Zitrooone]

Hey @michelengelen, thanks for your help! If I understood the suggested fix correctly, it does not solve my problem, as I can still hide/unhide the duplicate column in the "manage columns" panel. Currently, this is not a critical issue for us, so I'm happy to wait for any potential bug fixes regarding the filter application.

Is there a way for me to see the grid board to track status? Cheers

[michelengelen]

I think you might have misunderstood what i was trying to suggest. Here is an updated example of what would work in your case: Example.

Would that work for you?

[Zitrooone]

You are correct, I did misunderstand your suggestion. The usage of the slot props is a nice addition I did not know about, thank you! However, as I mentioned in my initial post, we have a generalised hook that is saving column visibility and other settings to the local storage. I've implemented a dumbed down version in this example. If I'm not mistaken, I would have to mix the user's choice (stored by the hook) with what I want the user to see. This would either have to be implemented per grid, or into the hook itself. An implementation within the hook would most likely make it much more complex than it needs to be.

After all, the issue is fairly minor to me. Simply retyping the search term or even removing one character will then apply the filter correctly again. I appreciate your help!

[michelengelen]

OK, Got it! In that case we do still have some buggy behavior in the original post. So I will add this to the board for the team to have a look. 👍🏼