[Bug Report][3.5.15] v-data-table headers filter do not work

[jaysonpotter]

Environment

Vuetify Version: 3.5.15
Last working version: 2.7.2
Vue Version: 3.4.21
Browsers: Chrome 122.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Set filter on headers object.

...
{
    text: 'Calories',
    value: 'calories',
    filter: value => {
        if (!this.calories) return true
            return value < parseInt(this.calories)
        },
    },
}
...

Expected Behavior

Entering value in the less than text field below the table should filter results based on desserts calories less than the entered value. Should work just like in the demo for v2 @ https://v2.vuetifyjs.com/en/components/data-tables/#custom-filter

Actual Behavior

Nothing is filtered.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

v3 multiple filter criteria workaround: https://codepen.io/jaysonpotter/pen/abxYgbp

[b-maslennikov]

did you notice that filter property has FilterFunction | undefined type? docs

export type FilterMatch = boolean | number | [number, number] | [number, number][]
export type FilterFunction = (value: string, query: string, item?: InternalItem) => FilterMatch

[jaysonpotter]

@b-maslennikov I did. So I tried to update the accepted params in this VPlay, but nothing changed.

Maybe I'm not understanding how I need to use this now, entirely possible. ;) Did you have a working demo using the headers filter approach?

[KaelWD]

Broken in #14728 by 6143358

[stephane303]

this broke all my custom filters, investigating ....
everything was working before version 3.6.8

Because I saw the bug and used a workaround, now I am removing the workaround and I should be fine

Using filter-mode solved everything! I am back to a working version !

[stephane303]

Here is the working version: VPlay

Notice the usage of filter-mode="union"