DataTable: new `filterButtonProp` property

components/lib/datatable/BaseDataTable.vue

@@ -273,6 +273,17 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        filterButtonProps: {
+            type: Object,
+            default() {
+                return {
+                    addRule: { severity: 'info', text: true, size: 'small' },
+                    removeRule: { severity: 'danger', text: true, size: 'small' },
+                    apply: { size: 'small' },
+                    clear: { outlined: true, size: 'small' }
+                };
+            }
         }
     },
     style: DataTableStyle,

components/lib/datatable/ColumnFilter.vue

@@ -94,9 +94,7 @@
                                         @click="removeConstraint(i)"
                                         :label="removeRuleButtonLabel"
                                         :unstyled="unstyled"
-                                        text
+                                        v-bind="filterButtonProps.removeRule"
-                                        severity="danger"
-                                        size="small"
                                         :pt="getColumnPT('filterRemoveButton')"
                                     >
                                         <template #icon="iconProps">
@@ -114,9 +112,7 @@
                                 :class="cx('filterAddRuleButton')"
                                 @click="addConstraint()"
                                 :unstyled="unstyled"
-                                text
+                                v-bind="filterButtonProps.addRule"
-                                severity="info"
-                                size="small"
                                 :pt="getColumnPT('filterAddRuleButton')"
                             >
                                 <template #icon="iconProps">
@@ -132,13 +128,21 @@
                                 :label="clearButtonLabel"
                                 @click="clearFilter"
                                 :unstyled="unstyled"
-                                size="small"
+                                v-bind="filterButtonProps.clear"
-                                outlined
                                 :pt="getColumnPT('filterClearButton')"
                             ></CFButton>
                             <component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
                             <template v-if="showApplyButton">
-                                <CFButton v-if="!filterApplyTemplate" type="button" :class="cx('filterApplyButton')" :label="applyButtonLabel" @click="applyFilter()" :unstyled="unstyled" size="small" :pt="getColumnPT('filterApplyButton')"></CFButton>
+                                <CFButton
+                                    v-if="!filterApplyTemplate"
+                                    type="button"
+                                    :class="cx('filterApplyButton')"
+                                    :label="applyButtonLabel"
+                                    @click="applyFilter()"
+                                    :unstyled="unstyled"
+                                    v-bind="filterButtonProps.apply"
+                                    :pt="getColumnPT('filterApplyButton')"
+                                ></CFButton>
                                 <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
                             </template>
                         </div>
@@ -275,6 +279,10 @@ export default {
             type: null,
             default: null
         },
+        filterButtonProps: {
+            type: null,
+            default: null
+        },
         column: null
     },
     data() {

components/lib/datatable/DataTable.d.ts

@@ -9,6 +9,7 @@
  */
 import { InputHTMLAttributes, TableHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ButtonProps } from '../button';
 import { ColumnPassThroughOptionType } from '../column';
 import { ColumnGroupPassThroughOptionType } from '../columngroup';
 import { PaginatorPassThroughOptionType } from '../paginator';
@@ -159,6 +160,28 @@ export interface DataTableExportCSVOptions {
     selectionOnly: boolean;
 }
 
+/**
+ * Custom datatable filter button props options.
+ */
+export interface DataTableFilterButtonPropsOptions {
+    /**
+     * Add rule button props
+     */
+    addRule: ButtonProps | undefined;
+    /**
+     * Remove rule button props
+     */
+    removeRule: ButtonProps | undefined;
+    /**
+     * Apply button props
+     */
+    apply: ButtonProps | undefined;
+    /**
+     * Apply button props
+     */
+    clear: ButtonProps | undefined;
+}
+
 /**
  * Custom sort event.
  * @see {@link DataTableEmits.sort}
@@ -1130,6 +1153,16 @@ export interface DataTableProps {
      * Used to pass all properties of the HTMLInputElement to the focusable filter input element inside the component.
      */
     filterInputProps?: InputHTMLAttributes | undefined;
+    /**
+     * Used to pass all filter button property object
+     * @defaultValue {
+            addRule: { severity: 'info', text: true, size: 'small' },
+            removeRule: { severity: 'danger', text: true, size: 'small' },
+            apply: { size: 'small' },
+            clear: { outlined: true, size: 'small' }
+        }
+     */
+    filterButtonProps?: DataTableFilterButtonPropsOptions | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {DataTablePassThroughOptions}

components/lib/datatable/DataTable.vue

@@ -86,6 +86,7 @@
                             :filters="d_filters"
                             :filtersStore="filters"
                             :filterDisplay="filterDisplay"
+                            :filterButtonProps="headerFilterButtonProps"
                             :filterInputProps="filterInputProps"
                             :first="d_first"
                             @column-click="onColumnHeaderClick($event)"
@@ -2069,6 +2070,17 @@ export default {
         groupRowSortField() {
             return this.sortMode === 'single' ? this.sortField : this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null;
         },
+        headerFilterButtonProps() {
+            return {
+                ...{
+                    addRule: { severity: 'info', text: true, size: 'small' },
+                    removeRule: { severity: 'danger', text: true, size: 'small' },
+                    apply: { size: 'small' },
+                    clear: { outlined: true, size: 'small' }
+                },
+                ...this.filterButtonProps
+            };
+        },
         virtualScrollerDisabled() {
             return ObjectUtils.isEmpty(this.virtualScrollerOptions) || !this.scrollable;
         }

components/lib/datatable/HeaderCell.vue

@@ -58,6 +58,7 @@
                 :filters="filters"
                 :filtersStore="filtersStore"
                 :filterInputProps="filterInputProps"
+                :filterButtonProps="filterButtonProps"
                 @filter-change="$emit('filter-change', $event)"
                 @filter-apply="$emit('filter-apply')"
                 :filterMenuStyle="columnProp('filterMenuStyle')"
@@ -182,6 +183,10 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        filterButtonProps: {
+            type: null,
+            default: null
         }
     },
     data() {

components/lib/datatable/TableHeader.vue

@@ -29,6 +29,7 @@
                         :filterDisplay="filterDisplay"
                         :filtersStore="filtersStore"
                         :filterInputProps="filterInputProps"
+                        :filterButtonProps="filterButtonProps"
                         :first="first"
                         @filter-change="$emit('filter-change', $event)"
                         @filter-apply="$emit('filter-apply')"
@@ -69,6 +70,7 @@
                             :filters="filters"
                             :filtersStore="filtersStore"
                             :filterInputProps="filterInputProps"
+                            :filterButtonProps="filterButtonProps"
                             @filter-change="$emit('filter-change', $event)"
                             @filter-apply="$emit('filter-apply')"
                             :filterMenuStyle="columnProp(col, 'filterMenuStyle')"
@@ -231,6 +233,10 @@ export default {
         filterInputProps: {
             type: null,
             default: null
+        },
+        filterButtonProps: {
+            type: null,
+            default: null
         }
     },
     provide() {