From 1f5a91175ca89cb60f52c673135b7200826c2f3e Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 25 May 2024 17:36:11 +0300
Subject: [PATCH] Removed obsolete class

---
 doc/datatable/LazyLoadDoc.vue              | 32 +++++++--------
 doc/datatable/StatefulDoc.vue              | 32 +++++++--------
 doc/datatable/edit/FilterSortEditDoc.vue   |  8 ++--
 doc/datatable/filter/AdvancedFilterDoc.vue | 32 +++++++--------
 doc/datatable/filter/BasicFilterDoc.vue    | 48 +++++++++++-----------
 doc/datatable/samples/CustomersDoc.vue     | 32 +++++++--------
 doc/treetable/FilterDoc.vue                | 24 +++++------
 7 files changed, 104 insertions(+), 104 deletions(-)

diff --git a/doc/datatable/LazyLoadDoc.vue b/doc/datatable/LazyLoadDoc.vue
index 5a9b2aed9..11e4e61fc 100644
--- a/doc/datatable/LazyLoadDoc.vue
+++ b/doc/datatable/LazyLoadDoc.vue
@@ -38,7 +38,7 @@
                 <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
                 <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
                     <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search" />
+                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" />
                     </template>
                 </Column>
                 <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
@@ -49,12 +49,12 @@
                         </div>
                     </template>
                     <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search" />
+                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" />
                     </template>
                 </Column>
                 <Column field="company" header="Company" filterMatchMode="contains" sortable>
                     <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search" />
+                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" />
                     </template>
                 </Column>
                 <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
@@ -65,7 +65,7 @@
                         </div>
                     </template>
                     <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search" />
+                        <InputText v-model="filterModel.value" type="text" @keydown.enter="filterCallback()" placeholder="Search" />
                     </template>
                 </Column>
             </DataTable>
@@ -108,7 +108,7 @@ export default {
     <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
     <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
         <template #filter="{filterModel,filterCallback}">
-            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
+            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
         </template>
     </Column>
     <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
@@ -119,12 +119,12 @@ export default {
             </div>
         </template>
         <template #filter="{filterModel,filterCallback}">
-            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
+            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
         </template>
     </Column>
     <Column field="company" header="Company" filterMatchMode="contains" sortable>
         <template #filter="{filterModel,filterCallback}">
-            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
+            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
         </template>
     </Column>
     <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
@@ -135,7 +135,7 @@ export default {
             </div>
         </template>
         <template #filter="{filterModel,filterCallback}">
-            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
+            <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
         </template>
     </Column>
 </DataTable>
@@ -150,7 +150,7 @@ export default {
             <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
             <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
                 </template>
             </Column>
             <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
@@ -161,12 +161,12 @@ export default {
                     </div>
                 </template>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
                 </template>
             </Column>
             <Column field="company" header="Company" filterMatchMode="contains" sortable>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
                 </template>
             </Column>
             <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
@@ -177,7 +177,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
                 </template>
             </Column>
         </DataTable>
@@ -284,7 +284,7 @@ export default {
             <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
             <Column field="name" header="Name" filterMatchMode="startsWith" sortable>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
                 </template>
             </Column>
             <Column field="country.name" header="Country" filterField="country.name" filterMatchMode="contains" sortable>
@@ -295,12 +295,12 @@ export default {
                     </div>
                 </template>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
                 </template>
             </Column>
             <Column field="company" header="Company" filterMatchMode="contains" sortable>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
                 </template>
             </Column>
             <Column field="representative.name" header="Representative" filterField="representative.name" sortable>
@@ -311,7 +311,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{filterModel,filterCallback}">
-                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" placeholder="Search"/>
+                    <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" placeholder="Search"/>
                 </template>
             </Column>
         </DataTable>
diff --git a/doc/datatable/StatefulDoc.vue b/doc/datatable/StatefulDoc.vue
index 67d4214e9..84f277263 100644
--- a/doc/datatable/StatefulDoc.vue
+++ b/doc/datatable/StatefulDoc.vue
@@ -32,7 +32,7 @@
                 </template>
                 <Column field="name" header="Name" sortable style="width: 25%">
                     <template #filter="{ filterModel }">
-                        <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+                        <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
                     </template>
                 </Column>
                 <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
@@ -43,7 +43,7 @@
                         </div>
                     </template>
                     <template #filter="{ filterModel }">
-                        <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+                        <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
                     </template>
                 </Column>
                 <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
@@ -54,7 +54,7 @@
                         </div>
                     </template>
                     <template #filter="{ filterModel }">
-                        <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                        <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
                             <template #option="slotProps">
                                 <div class="flex items-center gap-2">
                                     <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
@@ -69,7 +69,7 @@
                         <Tag :value="data.status" :severity="getSeverity(data.status)" />
                     </template>
                     <template #filter="{ filterModel }">
-                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
                             <template #option="slotProps">
                                 <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                             </template>
@@ -121,7 +121,7 @@ export default {
     </template>
     <Column field="name" header="Name" sortable style="width: 25%">
         <template #filter="{ filterModel }">
-            <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+            <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
         </template>
     </Column>
     <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
@@ -132,7 +132,7 @@ export default {
             </div>
         </template>
         <template #filter="{ filterModel }">
-            <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+            <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
         </template>
     </Column>
     <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
@@ -143,7 +143,7 @@ export default {
             </div>
         </template>
         <template #filter="{ filterModel }">
-            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
                 <template #option="slotProps">
                     <div class="flex items-center gap-2">
                         <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
@@ -158,7 +158,7 @@ export default {
             <Tag :value="data.status" :severity="getSeverity(data.status)" />
         </template>
         <template #filter="{ filterModel }">
-            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
                 <template #option="slotProps">
                     <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                 </template>
@@ -184,7 +184,7 @@ export default {
             </template>
             <Column field="name" header="Name" sortable style="width: 25%">
                 <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
                 </template>
             </Column>
             <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
@@ -195,7 +195,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
                 </template>
             </Column>
             <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
@@ -206,7 +206,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel }">
-                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
                         <template #option="slotProps">
                             <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
@@ -221,7 +221,7 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel }">
-                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
@@ -312,7 +312,7 @@ export default {
             </template>
             <Column field="name" header="Name" sortable style="width: 25%">
                 <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
                 </template>
             </Column>
             <Column header="Country" sortable sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
@@ -323,7 +323,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
                 </template>
             </Column>
             <Column header="Representative" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="width: 25%">
@@ -334,7 +334,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel }">
-                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
                         <template #option="slotProps">
                             <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
@@ -349,7 +349,7 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel }">
-                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
diff --git a/doc/datatable/edit/FilterSortEditDoc.vue b/doc/datatable/edit/FilterSortEditDoc.vue
index 82a60b5b8..0f068f40a 100644
--- a/doc/datatable/edit/FilterSortEditDoc.vue
+++ b/doc/datatable/edit/FilterSortEditDoc.vue
@@ -21,7 +21,7 @@
             >
                 <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
                     <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
+                        <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" />
                     </template>
                     <template #editor="{ data, field }">
                         <InputText v-model="data[field]" autofocus />
@@ -62,7 +62,7 @@ export default {
 >
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
         <template #filter="{ filterModel, filterCallback }">
-            <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
+            <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" />
         </template>
         <template #editor="{ data, field }">
             <InputText v-model="data[field]" autofocus />
@@ -85,7 +85,7 @@ export default {
         >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
                 <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
+                    <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" />
                 </template>
                 <template #editor="{ data, field }">
                     <InputText v-model="data[field]" autofocus />
@@ -177,7 +177,7 @@ export default {
         >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
                 <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
+                    <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" />
                 </template>
                 <template #editor="{ data, field }">
                     <InputText v-model="data[field]" autofocus />
diff --git a/doc/datatable/filter/AdvancedFilterDoc.vue b/doc/datatable/filter/AdvancedFilterDoc.vue
index 39030a9a7..92d04d072 100644
--- a/doc/datatable/filter/AdvancedFilterDoc.vue
+++ b/doc/datatable/filter/AdvancedFilterDoc.vue
@@ -23,7 +23,7 @@
                         {{ data.name }}
                     </template>
                     <template #filter="{ filterModel }">
-                        <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+                        <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
                     </template>
                 </Column>
                 <Column header="Country" filterField="country.name" style="min-width: 12rem">
@@ -34,7 +34,7 @@
                         </div>
                     </template>
                     <template #filter="{ filterModel }">
-                        <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+                        <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
                     </template>
                     <template #filterclear="{ filterCallback }">
                         <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
@@ -54,7 +54,7 @@
                         </div>
                     </template>
                     <template #filter="{ filterModel }">
-                        <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                        <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
                             <template #option="slotProps">
                                 <div class="flex items-center gap-2">
                                     <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
@@ -85,7 +85,7 @@
                         <Tag :value="data.status" :severity="getSeverity(data.status)" />
                     </template>
                     <template #filter="{ filterModel }">
-                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
                             <template #option="slotProps">
                                 <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                             </template>
@@ -164,7 +164,7 @@ export default {
             {{ data.name }}
         </template>
         <template #filter="{ filterModel }">
-            <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+            <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
         </template>
     </Column>
     <Column header="Country" filterField="country.name" style="min-width: 12rem">
@@ -175,7 +175,7 @@ export default {
             </div>
         </template>
         <template #filter="{ filterModel }">
-            <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+            <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
         </template>
         <template #filterclear="{ filterCallback }">
             <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
@@ -195,7 +195,7 @@ export default {
             </div>
         </template>
         <template #filter="{ filterModel }">
-            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
                 <template #option="slotProps">
                     <div class="flex items-center gap-2">
                         <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
@@ -226,7 +226,7 @@ export default {
             <Tag :value="data.status" :severity="getSeverity(data.status)" />
         </template>
         <template #filter="{ filterModel }">
-            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
                 <template #option="slotProps">
                     <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                 </template>
@@ -279,7 +279,7 @@ export default {
                     {{ data.name }}
                 </template>
                 <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
                 </template>
             </Column>
             <Column header="Country" filterField="country.name" style="min-width: 12rem">
@@ -290,7 +290,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
                 </template>
                 <template #filterclear="{ filterCallback }">
                     <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
@@ -310,7 +310,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel }">
-                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
                         <template #option="slotProps">
                             <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
@@ -341,7 +341,7 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel }">
-                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
@@ -486,7 +486,7 @@ export default {
                     {{ data.name }}
                 </template>
                 <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
                 </template>
             </Column>
             <Column header="Country" filterField="country.name" style="min-width: 12rem">
@@ -497,7 +497,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
                 </template>
                 <template #filterclear="{ filterCallback }">
                     <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
@@ -517,7 +517,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel }">
-                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
                         <template #option="slotProps">
                             <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
@@ -548,7 +548,7 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel }">
-                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
diff --git a/doc/datatable/filter/BasicFilterDoc.vue b/doc/datatable/filter/BasicFilterDoc.vue
index 4f7a613c2..d72b6dd83 100644
--- a/doc/datatable/filter/BasicFilterDoc.vue
+++ b/doc/datatable/filter/BasicFilterDoc.vue
@@ -26,7 +26,7 @@
                         {{ data.name }}
                     </template>
                     <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" placeholder="Search by name" />
+                        <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by name" />
                     </template>
                 </Column>
                 <Column header="Country" filterField="country.name" style="min-width: 12rem">
@@ -37,10 +37,10 @@
                         </div>
                     </template>
                     <template #filter="{ filterModel, filterCallback }">
-                        <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" placeholder="Search by country" />
+                        <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by country" />
                     </template>
                 </Column>
-                <Column header="Agent" filterField="representative" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+                <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
                     <template #body="{ data }">
                         <div class="flex items-center gap-2">
                             <img :alt="data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${data.representative.image}`" style="width: 32px" />
@@ -48,7 +48,7 @@
                         </div>
                     </template>
                     <template #filter="{ filterModel, filterCallback }">
-                        <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter" style="min-width: 14rem" :maxSelectedLabels="1">
+                        <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" style="min-width: 14rem" :maxSelectedLabels="1">
                             <template #option="slotProps">
                                 <div class="flex items-center gap-2">
                                     <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
@@ -58,12 +58,12 @@
                         </MultiSelect>
                     </template>
                 </Column>
-                <Column field="status" header="Status" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+                <Column field="status" header="Status" :showFilterMenu="false" style="min-width: 12rem">
                     <template #body="{ data }">
                         <Tag :value="data.status" :severity="getSeverity(data.status)" />
                     </template>
                     <template #filter="{ filterModel, filterCallback }">
-                        <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
+                        <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" style="min-width: 12rem" :showClear="true">
                             <template #option="slotProps">
                                 <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                             </template>
@@ -135,7 +135,7 @@ export default {
             {{ data.name }}
         </template>
         <template #filter="{ filterModel, filterCallback }">
-            <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" placeholder="Search by name" />
+            <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by name" />
         </template>
     </Column>
     <Column header="Country" filterField="country.name" style="min-width: 12rem">
@@ -146,10 +146,10 @@ export default {
             </div>
         </template>
         <template #filter="{ filterModel, filterCallback }">
-            <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" placeholder="Search by country" />
+            <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by country" />
         </template>
     </Column>
-    <Column header="Agent" filterField="representative" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+    <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
         <template #body="{ data }">
             <div class="flex items-center gap-2">
                 <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
@@ -157,7 +157,7 @@ export default {
             </div>
         </template>
         <template #filter="{ filterModel, filterCallback }">
-            <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter" style="min-width: 14rem" :maxSelectedLabels="1">
+            <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" style="min-width: 14rem" :maxSelectedLabels="1">
                 <template #option="slotProps">
                     <div class="flex items-center gap-2">
                         <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
@@ -167,12 +167,12 @@ export default {
             </MultiSelect>
         </template>
     </Column>
-    <Column field="status" header="Status" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+    <Column field="status" header="Status" :showFilterMenu="false" style="min-width: 12rem">
         <template #body="{ data }">
             <Tag :value="data.status" :severity="getSeverity(data.status)" />
         </template>
         <template #filter="{ filterModel, filterCallback }">
-            <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
+            <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" style="min-width: 12rem" :showClear="true">
                 <template #option="slotProps">
                     <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                 </template>
@@ -211,7 +211,7 @@ export default {
                     {{ data.name }}
                 </template>
                 <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" placeholder="Search by name" />
+                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by name" />
                 </template>
             </Column>
             <Column header="Country" filterField="country.name" style="min-width: 12rem">
@@ -222,10 +222,10 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" placeholder="Search by country" />
+                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by country" />
                 </template>
             </Column>
-            <Column header="Agent" filterField="representative" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+            <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
                 <template #body="{ data }">
                     <div class="flex items-center gap-2">
                         <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
@@ -233,7 +233,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel, filterCallback }">
-                    <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter" style="min-width: 14rem" :maxSelectedLabels="1">
+                    <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" style="min-width: 14rem" :maxSelectedLabels="1">
                         <template #option="slotProps">
                             <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
@@ -243,12 +243,12 @@ export default {
                     </MultiSelect>
                 </template>
             </Column>
-            <Column field="status" header="Status" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+            <Column field="status" header="Status" :showFilterMenu="false" style="min-width: 12rem">
                 <template #body="{ data }">
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel, filterCallback }">
-                    <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
+                    <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" style="min-width: 12rem" :showClear="true">
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
@@ -367,7 +367,7 @@ export default {
                     {{ data.name }}
                 </template>
                 <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" placeholder="Search by name" />
+                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by name" />
                 </template>
             </Column>
             <Column header="Country" filterField="country.name" style="min-width: 12rem">
@@ -378,10 +378,10 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel, filterCallback }">
-                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" class="p-column-filter" placeholder="Search by country" />
+                    <InputText v-model="filterModel.value" type="text" @input="filterCallback()" placeholder="Search by country" />
                 </template>
             </Column>
-            <Column header="Agent" filterField="representative" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
+            <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width: 14rem">
                 <template #body="{ data }">
                     <div class="flex items-center gap-2">
                         <img :alt="data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${data.representative.image}\`" style="width: 32px" />
@@ -389,7 +389,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel, filterCallback }">
-                    <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter" style="min-width: 14rem" :maxSelectedLabels="1">
+                    <MultiSelect v-model="filterModel.value" @change="filterCallback()" :options="representatives" optionLabel="name" placeholder="Any" style="min-width: 14rem" :maxSelectedLabels="1">
                         <template #option="slotProps">
                             <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
@@ -399,12 +399,12 @@ export default {
                     </MultiSelect>
                 </template>
             </Column>
-            <Column field="status" header="Status" :showFilterMenu="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 12rem">
+            <Column field="status" header="Status" :showFilterMenu="false" style="min-width: 12rem">
                 <template #body="{ data }">
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel, filterCallback }">
-                    <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" class="p-column-filter" style="min-width: 12rem" :showClear="true">
+                    <Select v-model="filterModel.value" @change="filterCallback()" :options="statuses" placeholder="Select One" style="min-width: 12rem" :showClear="true">
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
diff --git a/doc/datatable/samples/CustomersDoc.vue b/doc/datatable/samples/CustomersDoc.vue
index 7edb68c2b..383046aee 100644
--- a/doc/datatable/samples/CustomersDoc.vue
+++ b/doc/datatable/samples/CustomersDoc.vue
@@ -32,7 +32,7 @@
                         {{ data.name }}
                     </template>
                     <template #filter="{ filterModel }">
-                        <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+                        <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
                     </template>
                 </Column>
                 <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
@@ -43,7 +43,7 @@
                         </div>
                     </template>
                     <template #filter="{ filterModel }">
-                        <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+                        <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
                     </template>
                 </Column>
                 <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
@@ -54,7 +54,7 @@
                         </div>
                     </template>
                     <template #filter="{ filterModel }">
-                        <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                        <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
                             <template #option="slotProps">
                                 <div class="flex items-center gap-2">
                                     <img :alt="slotProps.option.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.option.image}`" style="width: 32px" />
@@ -85,7 +85,7 @@
                         <Tag :value="data.status" :severity="getSeverity(data.status)" />
                     </template>
                     <template #filter="{ filterModel }">
-                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                        <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
                             <template #option="slotProps">
                                 <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                             </template>
@@ -160,7 +160,7 @@ export default {
             {{ data.name }}
         </template>
         <template #filter="{ filterModel }">
-            <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+            <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
         </template>
     </Column>
     <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
@@ -171,7 +171,7 @@ export default {
             </div>
         </template>
         <template #filter="{ filterModel }">
-            <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+            <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
         </template>
     </Column>
     <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
@@ -182,7 +182,7 @@ export default {
             </div>
         </template>
         <template #filter="{ filterModel }">
-            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+            <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
                 <template #option="slotProps">
                     <div class="flex items-center gap-2">
                         <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
@@ -213,7 +213,7 @@ export default {
             <Tag :value="data.status" :severity="getSeverity(data.status)" />
         </template>
         <template #filter="{ filterModel }">
-            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+            <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
                 <template #option="slotProps">
                     <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                 </template>
@@ -262,7 +262,7 @@ export default {
                     {{ data.name }}
                 </template>
                 <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
                 </template>
             </Column>
             <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
@@ -273,7 +273,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
                 </template>
             </Column>
             <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
@@ -284,7 +284,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel }">
-                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
                         <template #option="slotProps">
                             <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
@@ -315,7 +315,7 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel }">
-                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
@@ -455,7 +455,7 @@ export default {
                     {{ data.name }}
                 </template>
                 <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by name" />
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by name" />
                 </template>
             </Column>
             <Column header="Country" sortable sortField="country.name" filterField="country.name" style="min-width: 14rem">
@@ -466,7 +466,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel }">
-                    <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
+                    <InputText v-model="filterModel.value" type="text" placeholder="Search by country" />
                 </template>
             </Column>
             <Column header="Agent" sortable sortField="representative.name" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{ width: '14rem' }" style="min-width: 14rem">
@@ -477,7 +477,7 @@ export default {
                     </div>
                 </template>
                 <template #filter="{ filterModel }">
-                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
+                    <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any">
                         <template #option="slotProps">
                             <div class="flex items-center gap-2">
                                 <img :alt="slotProps.option.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.option.image}\`" style="width: 32px" />
@@ -508,7 +508,7 @@ export default {
                     <Tag :value="data.status" :severity="getSeverity(data.status)" />
                 </template>
                 <template #filter="{ filterModel }">
-                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" class="p-column-filter" showClear>
+                    <Select v-model="filterModel.value" :options="statuses" placeholder="Select One" showClear>
                         <template #option="slotProps">
                             <Tag :value="slotProps.option" :severity="getSeverity(slotProps.option)" />
                         </template>
diff --git a/doc/treetable/FilterDoc.vue b/doc/treetable/FilterDoc.vue
index 8790dc508..74c5c1e7e 100644
--- a/doc/treetable/FilterDoc.vue
+++ b/doc/treetable/FilterDoc.vue
@@ -22,17 +22,17 @@
                 </template>
                 <Column field="name" header="Name" expander style="min-width: 12rem">
                     <template #filter>
-                        <InputText v-model="filters['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
+                        <InputText v-model="filters['name']" type="text" placeholder="Filter by name" />
                     </template>
                 </Column>
                 <Column field="size" header="Size" style="min-width: 12rem">
                     <template #filter>
-                        <InputText v-model="filters['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
+                        <InputText v-model="filters['size']" type="text" placeholder="Filter by size" />
                     </template>
                 </Column>
                 <Column field="type" header="Type" style="min-width: 12rem">
                     <template #filter>
-                        <InputText v-model="filters['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
+                        <InputText v-model="filters['type']" type="text" placeholder="Filter by type" />
                     </template>
                 </Column>
             </TreeTable>
@@ -68,17 +68,17 @@ export default {
     </template>
     <Column field="name" header="Name" expander style="min-width: 12rem">
         <template #filter>
-            <InputText v-model="filters['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
+            <InputText v-model="filters['name']" type="text" placeholder="Filter by name" />
         </template>
     </Column>
     <Column field="size" header="Size" style="min-width: 12rem">
         <template #filter>
-            <InputText v-model="filters['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
+            <InputText v-model="filters['size']" type="text" placeholder="Filter by size" />
         </template>
     </Column>
     <Column field="type" header="Type" style="min-width: 12rem">
         <template #filter>
-            <InputText v-model="filters['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
+            <InputText v-model="filters['type']" type="text" placeholder="Filter by type" />
         </template>
     </Column>
 </TreeTable>
@@ -100,17 +100,17 @@ export default {
             </template>
             <Column field="name" header="Name" expander style="min-width: 12rem">
                 <template #filter>
-                    <InputText v-model="filters['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
+                    <InputText v-model="filters['name']" type="text" placeholder="Filter by name" />
                 </template>
             </Column>
             <Column field="size" header="Size" style="min-width: 12rem">
                 <template #filter>
-                    <InputText v-model="filters['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
+                    <InputText v-model="filters['size']" type="text" placeholder="Filter by size" />
                 </template>
             </Column>
             <Column field="type" header="Type" style="min-width: 12rem">
                 <template #filter>
-                    <InputText v-model="filters['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
+                    <InputText v-model="filters['type']" type="text" placeholder="Filter by type" />
                 </template>
             </Column>
         </TreeTable>
@@ -155,17 +155,17 @@ export default {
             </template>
             <Column field="name" header="Name" expander style="min-width: 12rem">
                 <template #filter>
-                    <InputText v-model="filters['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
+                    <InputText v-model="filters['name']" type="text" placeholder="Filter by name" />
                 </template>
             </Column>
             <Column field="size" header="Size" style="min-width: 12rem">
                 <template #filter>
-                    <InputText v-model="filters['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
+                    <InputText v-model="filters['size']" type="text" placeholder="Filter by size" />
                 </template>
             </Column>
             <Column field="type" header="Type" style="min-width: 12rem">
                 <template #filter>
-                    <InputText v-model="filters['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
+                    <InputText v-model="filters['type']" type="text" placeholder="Filter by type" />
                 </template>
             </Column>
         </TreeTable>