[data grid] Hide filter item from the filter panel

[YosefSchwartz]

Steps to reproduce

Steps:

1. Open this link to live example: Link to SandBox
2. Click on "Filters" to expand the filters

Current behavior

Even I filter out the FilterItem, the value of the FilterItem still appears on the panel with another column as a key

Expected behavior

Filter panel should be an empty

Context

Hi!

I try to use the filterColumns function to hide FilterItems.

I take the example of initialize the filter from MUI Link to example, and add slotProps to hide rating column from filter panel.
In this example, we set a initial filter (column: rating, value :greater then 2.5) and the data are indeed filtered, but I want to hide this from the panel

In the image below you can see the the key is indeed filtered out (key “rating”), but the value is appear.

slotProps={{
          filterPanel: {
            filterFormProps: {
              filterColumns: ({columns}) => {
                return columns.map(col => col.field).filter(field => field !== 'rating');
              },
            }
          }
        }}

My main goal is to filter the data from initial state or external filter button (using gridApiRef and upserFilterItems), and hide from the users that filter applied.

Your environment

npx @mui/envinfo

System: OS: macOS 15.2 Binaries: Node: 22.8.0 npm: 7.7.6 Browsers: Chrome: 133.0.6943.100 Safari: 18.2

Search keywords: hidding filter item from filter panel

[michelengelen]

I agree that this behavior is a bit strange, but the UX for this would also be very weird ... since a filter is applied it will always show the indicator on the toolbar button and on filtericon in the column header.

I can see 2 different solutions to this:

1. prefilter the rows with our filtering without showing this to the user
2. add a property to the filteritem to hide the filter from the user (in the indicator, column, form, etc.)

I'll add this to the board as an enhancement, but i would like some opinions on this from @mui/xgrid.

EDIT: There is a similar issue here #16650

[michelengelen]

This just came to mind while working on another issue: Did you consider using a read-only filter for this @YosefSchwartz?

Here is an example on the docs how this could look like: Filter non-filterable columns programmatically

[YosefSchwartz]

This just came to mind while working on another issue: Did you consider using a read-only filter for this @YosefSchwartz?

Here is an example on the docs how this could look like: Filter non-filterable columns programmatically

@michelengelen
Yes, but it is not what I expect for.

My data is a quite complex, and the relationship between my entities is not straightforward.
I using some pivot tables to connect them and I need to support filtering the data values (simple filter panel), in addition to a “super filter” component that inject the filter using upsertFilterItems (and will omitted from the panel).

The “super filter” component is something I developed outside and use the api grid context to inject the data.

While using the “super filter” the data will changed according the value, but I leave the filter panel clear and allow the users to add more filters from the panel.

My expected behavior is allow me as developer to hide entire FilterItem instead of just the “key”.