From 6254742751685bf29f5591fd48e9087662a12bc9 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 16 Mar 2020 19:11:49 +0300
Subject: [PATCH] Fixed #240 - Add filterHeaderStyle and filterHeaderClass to
 Column

---
 src/components/column/Column.d.ts        |  2 ++
 src/components/column/Column.vue         |  8 ++++++++
 src/components/datatable/TableHeader.vue |  6 +++---
 src/views/datatable/DataTableDoc.vue     | 12 ++++++++++++
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/column/Column.d.ts b/src/components/column/Column.d.ts
index bdba862e04..dc23580928 100644
--- a/src/components/column/Column.d.ts
+++ b/src/components/column/Column.d.ts
@@ -14,6 +14,8 @@ export declare class Column extends Vue {
     bodyClass?: string;
     footerStyle?: object;
     footerClass?: string;
+    filterHeaderStyle?: object;
+    filterHeaderClass?: string;
     filterMatchMode?: string;
     filterFunction?: Function;
     excludeGlobalFilter?: boolean;
diff --git a/src/components/column/Column.vue b/src/components/column/Column.vue
index 04b4b90770..d8e2aa5372 100644
--- a/src/components/column/Column.vue
+++ b/src/components/column/Column.vue
@@ -54,6 +54,14 @@ export default {
             type: String,
             default: null
         },
+        filterHeaderClass: {
+            type: String,
+            default: false
+        },
+        filterHeaderStyle: {
+            type: null,
+            default: false
+        },
         filterMatchMode: {
             type: String,
             default: 'startsWith'
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index 4cb15d047e..70cf100dcd 100644
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -19,7 +19,7 @@
             <tr v-if="hasColumnFilter()">
                 <template v-for="(col,i) of columns">
                     <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" :key="col.columnKey||col.field||i"
-                        :class="getFilterColumnClass(col)" :style="col.filterStyle">
+                        :class="getFilterColumnHeaderClass(col)" :style="col.filterHeaderStyle">
                         <DTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
                         <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple'" />
                     </th>
@@ -104,8 +104,8 @@ export default {
                     {'p-highlight': sorted}
             ];
         },
-        getFilterColumnClass(column) {
-            return ['p-filter-column', column.filterClass];
+        getFilterColumnHeaderClass(column) {
+            return ['p-filter-column', column.filterHeaderClass];
         },
         getSortableColumnIcon(column) {
             let sorted = false;
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index ec1ddcac6b..2d40f1c3c2 100644
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -201,6 +201,18 @@ export default {
                                 <td>string</td>
                                 <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>