Vue 3 - Filtering on dynamic Datatable

[Eireternal]

Is this possible? I can't get filters to work with the following code. The filter input boxes appear, I type but nothing changes.
The documentation shows an example with hardcoded Columns. Could this be an issue with dynamically looped Columns?

Also please look at the v-model value. I know its supposed to have a string in the filters array. The col.field type is string but is my syntax here correct? Thanks for any help.

Code: Select all

<DataTable :value="entries"
               :paginator="true"
               class="p-datatable-customers p-datatable-sm p-datatable-responsive d-table"
               :rows="100"
               dataKey="id"
               :filters="filters"
               removableSort
               autoLayout="true"
               resizableColumns="true">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field" sortable="true" filterMatchMode="contains">
            <template #filter>
                <InputText type="text" v-model="filters[col.field]" class="p-column-filter" />
            </template>
            <template #body="slotProps">
                <span class="p-column-title" v-tooltip.top="slotProps.data[col.field]"><span>{{col.header}}:</span> {{slotProps.data[col.field]}}</span>

            </template>
        </Column>
</Datatable>

[Herald]

Hi Eireternal,
are you still facing the issue? any error?
even i am using dynamic columns and that worked for me, credits to you (i implemented after seeing your code, tq for that)

[sanjosebadger]

i'm having the same propblem. Have you solved the issue?