Fixed #241 - Move TreeTable filters to their own header row

src/components/treetable/TreeTable.vue

@@ -29,8 +29,14 @@
                             <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>
+                        </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">
@@ -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: {

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>