vue.jsprimevue

How to modify the matching mode of the filters in a PrimeVue TreeTable?


I am using the TreeTable component of the PrimeVue library. In the example from the documentation (https://primevue.org/treetable/#filter ) the filters are initialized with:

const filters = ref({});

And then a template is used in each column for the input to the filter:

<template #filter>
    <InputText v-model="filters['size']" type="text" placeholder="Filter by size" />
</template>

However these filters appear to search text that starts with the given text. I want the filter to find all things that contains the given text.

By looking into the types for the filters, there appears to be way to change this behaviour with a "matchMode". The interface I found is this:

export interface TreeTableFilterMetaData {
    /**
     * Filter value
     */
    value: any;
    /**
     * Filter match mode
     */
    matchMode: HintedString<'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter'> | undefined;
}

So, it appears to be a question of passing the proper filter objects. I tried initializing the filters with:

const filters = ref({
  global: { value: null, matchMode: 'contains' },
  name: { value: null, matchMode: 'contains' },
  size: { value: null, matchMode: 'contains' },
  type: { value: null, matchMode: 'contains' },
});

and pointing the v-model to:

v-model="filters['type'].value"

But that breaks the table and no data is shown.

How can I change the matchMode of filters in a PrimeVue TreeTable?


Solution

  • Not super-obvious in docs, but you should add it as a filterMatchMode prop on your Columns.

    example