PrimeVue DataTable Filter

Question

I am trying to add filters to a DataTable using the new filter feature from the 3.3.0 version of PrimeVue.

The filters seem to be added to the table but the filter inputs are not properly displayed.

I suspect I could be missing a dependency, here are my current ones :

"dependencies": {
  "primeicons": "^4.1.0",
  "primevue": "^3.3.0",
  "vue": "^3.0.5",
  "vue-router": "^4.0.3"
}

Code sample :

<DataTable :value="anArray" :paginator="true" :rows="5"
    paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
    :rowsPerPageOptions="[5, 10, 15, 20]"
    currentPageReportTemplate="Documents {first} à {last} sur {totalRecords}"
    v-model:filters="filters"
    filterDisplay="row">
    <Column field="sujet" header="Sujet">
        <template #filter="{ filterModel, filterCallback }">
            <InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" />
        </template>
    </Column>
</DataTable>

<script>
import { FilterMatchMode, FilterOperator } from "primevue/api";

export default {
  data() {
    return {
      filters: {
        global: { value: null, matchMode: FilterMatchMode.CONTAINS },
        sujet: { value: null, matchMode: FilterMatchMode.CONTAINS },
      },
    };
  },
};
</script>

I tried using the "menu" display of the filters but the input was shrunk to nothing as well.

I also tried removing the pagination, using v-model="filters['sujet']['value']", changing the matchMode, using a placeholder, removing the "p-column-filter" class, ... Nothing had any impact so far.

So did I forgot an essential part of the shown example ? Am I missing a dependency ?

Answer 1

Never mind, the issue was specific to the InputText component which was not imported in main.js.