Skip to content

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

Open
@Zitrooone

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    component: data gridThis is the name of the generic UI component, not the React module!feature: FilteringRelated to the data grid Filtering featurefeature: Tree dataRelated to the data grid Tree data feature

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions