How to use a global filter on a lazy loaded DataTable?

[daBigR--]

Hi,
I've setup a PrimeVue DataTable using lazy loading and I've managed to have it working more or less 100%. I have column filters working correctly, but now I want to add a global filter. So far I have configured the filter like this:

Code: Select all

<template>
  ...
  <DataTable
    ...
    :lazy="true"
    @filter="onFilter($event)"
    filterDisplay="menu"
    v-model:filters="filters"
    ...
  >
  ...
</template>

<script>
  ...
  export default {
    data() {
      return {
        filters: {
          'global': {value: null, matchMode: 'contains'},
          'name': {value: null, matchMode: 'contains'},
          'active': {value: null, matchMode: 'equals'}
        }
      ...
    },
    methods: {
      onFilter(e) {
        console.log('e');
        ...
      }
    }
    ...
  }
</script>

On all examples I've seen so far, the global filter field is setup in the header slot of the DataTable, something like this:

Code: Select all

<template #header>
  <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
  ...
</template>

I added an InputText to the header, and as far as I've been able to see it is updating the global filter v-model variable correctly. I mean if I enter some string in the global filters' InputText and then enter a column filter for the name column then when I apply the column filter, the onFilter event is triggered -- via the filterCallback hook -- and the console shows the event object, the global entry contains the text entered on the global filters' InputText. But I can't figure out how to trigger the 'filter' event for the global filter, in other words how do I get the filterCallback() hook inside the header slot?

[Rilisema]

I have the same problem. The onFilter event doesn't seem to get triggered