Fixed #240 - Add filterHeaderStyle and filterHeaderClass to Column

primefaces · Mar 16, 2020 · 6254742 · 6254742
1 parent 688b386
commit 6254742
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>