[docs] upsertFilterItem expects filters with an id field

[whitehat101]

Related page

https://mui.com/x/react-data-grid/filtering/header-filters/#renderheaderfilter-method

Kind of issue

Missing information

Issue description

While trying to implement the renderHeaderFilter method as described in the docs. I was trying to use a custom filter for all fields. The issue was that all other filters were being cleared when a second filter was added. I found this bug that is very similar to issue: #11793

upsertFilterItems works by comparing the id of the filter items. However in the example code, we're upserting a filter with no id field. This works okay if there is only one custom filter being used (like the current docs example does), but it fails when there are multiple.

The current example includes:

const getDefaultFilter = (field: string) => ({ field, operator: 'is' });

It would be better as:

const getDefaultFilter = (field: string) => ({ field, operator: 'is', id: field });

There are probably even better ways to populate this ID field, too.

Before I read through the code, I was assuming it was key'd off field, but of course this would not work for multiple filters on a single field.

The docs should mention the need for filter items with an id field.

Context

No response

Search keywords: renderHeaderFilter upsertFilterItem

[michelengelen]

Nice catch @whitehat101 ... It is indeed a bit 'under-documented'. Although the type definition states that the id is only necessary when using multiple filters: https://mui.com/x/api/data-grid/grid-filter-item/

I'll still add this to the board as it can be made a bit clearer.

cc @mapache-salvaje