diff --git a/src/views/treetable/TreeTableFilterDemo.vue b/src/views/treetable/TreeTableFilterDemo.vue
index 4f7768b57..fa5e86de2 100755
--- a/src/views/treetable/TreeTableFilterDemo.vue
+++ b/src/views/treetable/TreeTableFilterDemo.vue
@@ -10,26 +10,28 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Lenient Filter</h5>
-                <TreeTable :value="nodes" :filters="filters" filterMode="lenient">
+                <TreeTable :value="nodes" :filters="filters1" filterMode="lenient">
                     <template #header>
-                        <div style="text-align: right">
-                            <i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
-                            <InputText v-model="filters['global']" placeholder="Global Search" size="50" />
+                        <div class="p-text-right">
+                            <div class="p-input-icon-left">
+                                <i class="pi pi-search"></i>
+                                <InputText v-model="filters1['global']" placeholder="Global Search" size="50" />
+                            </div>
                         </div>
                     </template>
                     <Column field="name" header="Name" :expander="true">
                         <template #filter>
-                            <InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name" />
+                            <InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Filter by name" />
                         </template>
                     </Column>
                     <Column field="size" header="Size">
                         <template #filter>
-                            <InputText type="text" v-model="filters['size']" class="p-column-filter" placeholder="Filter by size"/>
+                            <InputText type="text" v-model="filters1['size']" class="p-column-filter" placeholder="Filter by size"/>
                         </template>
                     </Column>
                     <Column field="type" header="Type">
                         <template #filter>
-                            <InputText type="text" v-model="filters['type']" class="p-column-filter" placeholder="Filter by type"/>
+                            <InputText type="text" v-model="filters1['type']" class="p-column-filter" placeholder="Filter by type"/>
                         </template>
                     </Column>
                 </TreeTable>
@@ -37,26 +39,28 @@
 
             <div class="card">
                 <h5>Strict Filter</h5>
-                <TreeTable :value="nodes" :filters="filters" filterMode="strict">
+                <TreeTable :value="nodes" :filters="filters2" filterMode="strict">
                     <template #header>
-                        <div style="text-align: right">
-                            <i class="pi pi-search" style="margin: 4px 4px 0px 0px;"></i>
-                            <InputText v-model="filters['global']" placeholder="Global Search" size="50" />
+                        <div class="p-text-right">
+                            <div class="p-input-icon-left">
+                                <i class="pi pi-search"></i>
+                                <InputText v-model="filters2['global']" placeholder="Global Search" size="50" />
+                            </div>
                         </div>
                     </template>
                     <Column field="name" header="Name" :expander="true">
                         <template #filter>
-                            <InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name" />
+                            <InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Filter by name" />
                         </template>
                     </Column>
                     <Column field="size" header="Size">
                         <template #filter>
-                            <InputText type="text" v-model="filters['size']" class="p-column-filter" placeholder="Filter by size" />
+                            <InputText type="text" v-model="filters2['size']" class="p-column-filter" placeholder="Filter by size" />
                         </template>
                     </Column>
                     <Column field="type" header="Type">
                         <template #filter>
-                            <InputText type="text" v-model="filters['type']" class="p-column-filter" placeholder="Filter by type" />
+                            <InputText type="text" v-model="filters2['type']" class="p-column-filter" placeholder="Filter by type" />
                         </template>
                     </Column>
                 </TreeTable>
@@ -68,55 +72,63 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;h3&gt;Lenient Filter&lt;/h3&gt;
-&lt;TreeTable :value="nodes" :filters="filters" filterMode="lenient"&gt;
+&lt;div class="card"&gt;
+&lt;h5&gt;Lenient Filter&lt;/h5&gt;
+&lt;TreeTable :value="nodes" :filters="filters1" filterMode="lenient"&gt;
     &lt;template #header&gt;
-        &lt;div style="text-align: right"&gt;
-            &lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt;
-            &lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt;
+        &lt;div class="p-text-right"&gt;
+            &lt;div class="p-input-icon-left"&gt;
+                &lt;i class="pi pi-search"&gt;&lt;/i&gt;
+                &lt;InputText v-model="filters1['global']" placeholder="Global Search" size="50" /&gt;
+            &lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;
         &lt;template #filter&gt;
-            &lt;InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name" /&gt;
+            &lt;InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Filter by name" /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;
         &lt;template #filter&gt;
-            &lt;InputText type="text" v-model="filters['size']" class="p-column-filter" placeholder="Filter by size" /&gt;
+            &lt;InputText type="text" v-model="filters1['size']" class="p-column-filter" placeholder="Filter by size"/&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
     &lt;Column field="type" header="Type"&gt;
         &lt;template #filter&gt;
-            &lt;InputText type="text" v-model="filters['type']" class="p-column-filter" placeholder="Filter by type" /&gt;
+            &lt;InputText type="text" v-model="filters1['type']" class="p-column-filter" placeholder="Filter by type"/&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
 &lt;/TreeTable&gt;
+&lt;/div&gt;
 
-&lt;h3&gt;Strict Filter&lt;/h3&gt;
-&lt;TreeTable :value="nodes" :filters="filters" filterMode="strict"&gt;
+&lt;div class="card"&gt;
+&lt;h5&gt;Strict Filter&lt;/h5&gt;
+&lt;TreeTable :value="nodes" :filters="filters2" filterMode="strict"&gt;
     &lt;template #header&gt;
-        &lt;div style="text-align: right"&gt;
-            &lt;i class="pi pi-search" style="margin: 4px 4px 0px 0px;"&gt;&lt;/i&gt;
-            &lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt;
+        &lt;div class="p-text-right"&gt;
+            &lt;div class="p-input-icon-left"&gt;
+                &lt;i class="pi pi-search"&gt;&lt;/i&gt;
+                &lt;InputText v-model="filters2['global']" placeholder="Global Search" size="50" /&gt;
+            &lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
     &lt;Column field="name" header="Name" :expander="true"&gt;
         &lt;template #filter&gt;
-            &lt;InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Filter by name" /&gt;
+            &lt;InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Filter by name" /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
     &lt;Column field="size" header="Size"&gt;
         &lt;template #filter&gt;
-            &lt;InputText type="text" v-model="filters['size']" class="p-column-filter" placeholder="Filter by size" /&gt;
+            &lt;InputText type="text" v-model="filters2['size']" class="p-column-filter" placeholder="Filter by size" /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
     &lt;Column field="type" header="Type"&gt;
         &lt;template #filter&gt;
-            &lt;InputText type="text" v-model="filters['type']" class="p-column-filter" placeholder="Filter by type" /&gt;
+            &lt;InputText type="text" v-model="filters2['type']" class="p-column-filter" placeholder="Filter by type" /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
 &lt;/TreeTable&gt;
+&lt;/div&gt;
 </template>
 </CodeHighlight>
 
@@ -126,7 +138,8 @@ import NodeService from '../../service/NodeService';
 export default {
     data() {
         return {
-            filters: {},
+            filters1: {},
+            filters2: {},
             nodes: null
         }
     },
@@ -152,7 +165,8 @@ import NodeService from '../../service/NodeService';
 export default {
     data() {
         return {
-            filters: {},
+            filters1: {},
+            filters2: {},
             nodes: null
         }
     },