Templating for header,footer and buttons in filter menu

src/components/datatable/ColumnFilter.vue

@@ -9,7 +9,7 @@
         <button v-if="showMenuButton && display === 'row'" :class="{'p-hidden-space': !hasRowFilter()}" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()"><span class="pi pi-filter-slash"></span></button>
         <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave">
             <div :ref="overlayRef" :class="overlayClass" v-if="overlayVisible" @keydown.escape="onEscape" @click="onContentClick" :style="filterMenuStyle">
-                <component :is="filterHeader" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
+                <component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
                 <template v-if="display === 'row'">
                     <ul class="p-column-filter-row-items">
                         <li class="p-column-filter-row-item" v-for="(matchMode,i) of matchModes" :key="matchMode.label" 
@@ -37,11 +37,15 @@
                         <CFButton type="button" :label="addRuleButtonLabel" icon="pi pi-plus" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()"></CFButton>
                     </div>
                     <div class="p-column-filter-buttonbar">
-                        <CFButton type="button" class="p-button-outlined p-button-sm" @click="clearFilter()" :label="clearButtonLabel"></CFButton>
+                        <CFButton v-if="!filterClearTemplate" type="button" class="p-button-outlined p-button-sm" @click="clearFilter()" :label="clearButtonLabel"></CFButton>
-                        <CFButton type="button" class="p-button-sm" @click="applyFilter()" :label="applyButtonLabel" v-if="showApplyButton"></CFButton>
+                        <component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
+                        <template v-if="showApplyButton">
+                            <CFButton v-if="!filterApplyTemplate" type="button" class="p-button-sm" @click="applyFilter()" :label="applyButtonLabel"></CFButton>
+                            <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
+                        </template>
                     </div>
                 </template>
-                <component :is="filterFooter" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
+                <component :is="filterFooterTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
             </div>
         </transition>
     </div>
@@ -105,8 +109,10 @@ export default {
             default: 2
         },
         filterElement: null,
-        filterHeader: null,
+        filterHeaderTemplate: null,
-        filterFooter: null,
+        filterFooterTemplate: null,
+        filterClearTemplate: null,
+        filterApplyTemplate: null,
         filters: {
             type: Object,
             default: null

src/components/datatable/DataTable.vue

@@ -2152,7 +2152,7 @@ export default {
     justify-content: space-between;
 }
 
-.p-column-filter-buttonbar .p-button {
+.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
     width: auto;
 }
 </style>

src/components/datatable/TableHeader.vue

@@ -16,7 +16,9 @@
                             <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
                             <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple' && filterDisplay !== 'row'" />
                             <DTColumnFilter v-if="filterDisplay === 'menu' && col.children && col.children.filter" :field="columnProp(col, 'filterField')||columnProp(col, 'field')" :type="columnProp(col, 'dataType')" display="menu"  
-                            :showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" :filterHeader="col.children && col.children.filterHeader" :filterFooter="col.children && col.children.filterFooter" 
+                            :showMenu="columnProp(col, 'showFilterMenu')" :filterElement="col.children && col.children.filter" 
+                            :filterHeaderTemplate="col.children && col.children.filterheader" :filterFooterTemplate="col.children && col.children.filterfooter" 
+                            :filterClearTemplate="col.children && col.children.filterclear" :filterApplyTemplate="col.children && col.children.filterapply" 
                             :filters="filters" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')" :filterMenuStyle="columnProp(col, 'filterMenuStyle')" :filterMenuClass="columnProp(col, 'filterMenuClass')"
                             :showOperator="columnProp(col, 'showFilterOperator')" :showClearButton="columnProp(col, 'showClearButton')" :showApplyButton="columnProp(col, 'showApplyButton')"
                             :showMatchModes="columnProp(col, 'showFilterMatchModes')" :showAddButton="columnProp(col, 'showAddButton')" :matchModeOptions="columnProp(col, 'filterMatchModeOptions')" :maxConstraints="columnProp(col, 'maxConstraints')"

src/views/datatable/DataTableFilterDemo.vue

@@ -47,6 +47,15 @@
                         <template #filter="{filterModel}">
                             <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/>
                         </template>
+                        <template #filterclear="{filterCallback}">
+                            <Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button>
+                        </template>
+                        <template #filterapply="{filterCallback}">
+                            <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
+                        </template>
+                        <template #filterfooter>
+                            <div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
+                        </template>
                     </Column>
                     <Column header="Agent" filterField="representative" :showFilterMatchModes="false" filterMenuStyle="width:14rem">
                         <template #body="{data}">