Datatable: how to implement simple filters?

[plweil]

I'm new to Prime, and am using only the datatable component. Everything works fine until I try to implement a simple text filter. I'm basically copying the code from the docs, and trying to insert my own data where it seems necessary. But I get a Cannot read properties of undefined (reading 'global') typeerror for this line:

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

Similarly, I'd like to use a dropdown filter for one column (in my case, each row represents a project, and I want to filter by project.status), but the docs say nothing about the various data attributes, and where they're supposed to come from.

Can anyone give me a little nudge in the right direction?

[sezisfurkan]

Hi,

First, make sure to import the FilterMatchMode from 'primevue/api' in your component.

Next, you should implement the filterSalesTable as a ref like this:

import { FilterMatchMode } from 'primevue/api';

const filterSalesTable = ref({
    global: { value: null, matchMode: FilterMatchMode.CONTAINS }
});

Afterwards, you'll need to add an input area like this:
<InputText type="text" v-model="filterSalesTable.global.value" placeholder="Filter" />
Finally, when using the DataTable component, make sure to pass the filters prop like this:
<DataTable :value="products" v-model:filters="filterSalesTable">
This should help you implement the filtering functionality correctly. If you have any more questions or need further assistance, feel free to ask.