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?