From 5c0bf10e8a8b32a26ef0a3fc6d3dc4df96ffab77 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 16 Mar 2020 21:46:22 +0300
Subject: [PATCH] Fixed #241 - Move TreeTable filters to their own header row

---
 src/components/treetable/TreeTable.vue | 22 +++++++++++++++++++++-
 src/views/datatable/DataTableDoc.vue   |  2 +-
 src/views/treetable/TreeTableDoc.vue   | 12 ++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 175750b19..6413948ad 100644
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -29,9 +29,15 @@
                             <TTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
                             <span class="p-column-title" v-if="col.header">{{col.header}}</span>
                             <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
-                            <TTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
                         </th>
                     </tr>
+                    <tr v-if="hasColumnFilter()">
+                        <template v-for="(col,i) of columns">
+                            <th :key="col.columnKey||col.field||i" :class="getFilterColumnHeaderClass(col)" :style="col.filterHeaderStyle">
+                                <TTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
+                            </th>
+                        </template>
+                    </tr>
                 </thead>
                 <tfoot class="p-treetable-tfoot" v-if="hasFooter">
                     <tr>
@@ -360,6 +366,9 @@ export default {
                     {'p-highlight': sorted}
             ];
         },
+        getFilterColumnHeaderClass(column) {
+            return ['p-filter-column', column.filterHeaderClass];
+        },
         isColumnSorted(column) {
             if (column.sortable)
                 return this.sortMode === 'single' ? (this.d_sortField === (column.field || column.sortField)) : this.getMultiSortMetaIndex(column) > -1;
@@ -733,6 +742,17 @@ export default {
             else {
                 return null;
             }
+        },
+        hasColumnFilter() {
+            if (this.columns) {
+                for (let col of this.columns) {
+                    if (col.$scopedSlots.filter) {
+                        return true;
+                    }
+                }
+            }
+
+            return false;
         }
     },
     computed: {
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 2d40f1c3c..a838eaff5 100644
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -202,7 +202,7 @@ export default {
                                 <td>null</td>
                                 <td>Style class of the column.</td>
                             </tr>
-                             <tr>
+                            <tr>
                                 <td>filterHeaderStyle</td>
                                 <td>object</td>
                                 <td>null</td>
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index 9019bea5b..4cc206e7e 100644
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -593,6 +593,18 @@ export default {
                                 <td>null</td>
                                 <td>Style class of the column.</td>
                             </tr>
+                            <tr>
+                                <td>filterHeaderStyle</td>
+                                <td>object</td>
+                                <td>null</td>
+                                <td>Inline style of the column filter header.</td>
+                            </tr>
+                            <tr>
+                                <td>filterHeaderClass</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Style class of the column filter header.</td>
+                            </tr>
                             <tr>
                                 <td>filterMatchMode</td>
                                 <td>string</td>