Fixed #240 - Add filterHeaderStyle and filterHeaderClass to Column

pull/256/head
cagataycivici 2020-03-16 19:11:49 +03:00
parent 688b38679b
commit 6254742751
4 changed files with 25 additions and 3 deletions

View File

@ -14,6 +14,8 @@ export declare class Column extends Vue {
bodyClass?: string; bodyClass?: string;
footerStyle?: object; footerStyle?: object;
footerClass?: string; footerClass?: string;
filterHeaderStyle?: object;
filterHeaderClass?: string;
filterMatchMode?: string; filterMatchMode?: string;
filterFunction?: Function; filterFunction?: Function;
excludeGlobalFilter?: boolean; excludeGlobalFilter?: boolean;

View File

@ -54,6 +54,14 @@ export default {
type: String, type: String,
default: null default: null
}, },
filterHeaderClass: {
type: String,
default: false
},
filterHeaderStyle: {
type: null,
default: false
},
filterMatchMode: { filterMatchMode: {
type: String, type: String,
default: 'startsWith' default: 'startsWith'

View File

@ -19,7 +19,7 @@
<tr v-if="hasColumnFilter()"> <tr v-if="hasColumnFilter()">
<template v-for="(col,i) of columns"> <template v-for="(col,i) of columns">
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" :key="col.columnKey||col.field||i" <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" /> <DTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple'" /> <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple'" />
</th> </th>
@ -104,8 +104,8 @@ export default {
{'p-highlight': sorted} {'p-highlight': sorted}
]; ];
}, },
getFilterColumnClass(column) { getFilterColumnHeaderClass(column) {
return ['p-filter-column', column.filterClass]; return ['p-filter-column', column.filterHeaderClass];
}, },
getSortableColumnIcon(column) { getSortableColumnIcon(column) {
let sorted = false; let sorted = false;

View File

@ -201,6 +201,18 @@ export default {
<td>string</td> <td>string</td>
<td>null</td> <td>null</td>
<td>Style class of the column.</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>
<tr> <tr>
<td>filterMatchMode</td> <td>filterMatchMode</td>