@dolusoft/vue3-datatable 1.8.11 → 1.8.12

package/dist/vue3-datatable.cjs

@@ -2925,47 +2925,140 @@ function _sfc_render(_ctx, _cache) {
 const iconFilter = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
 const _hoisted_1$1 = { key: "hdrrow" };
 const _hoisted_2$1 = { class: "bh-checkbox" };
-const _hoisted_3$1 = ["onClick"];
-const _hoisted_4$1 = {
+const _hoisted_3$1 = {
+  key: 0,
+  class: "bh-filter bh-flex bh-justify-center"
+};
+const _hoisted_4$1 = ["disabled"];
+const _hoisted_5$1 = /* @__PURE__ */ vue.createElementVNode("svg", {
+  width: "14",
+  height: "14",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [
+  /* @__PURE__ */ vue.createElementVNode("line", {
+    x1: "18",
+    y1: "6",
+    x2: "6",
+    y2: "18"
+  }),
+  /* @__PURE__ */ vue.createElementVNode("line", {
+    x1: "6",
+    y1: "6",
+    x2: "18",
+    y2: "18"
+  })
+], -1);
+const _hoisted_6$1 = [
+  _hoisted_5$1
+];
+const _hoisted_7$1 = {
+  key: 0,
+  class: "bh-filter bh-flex bh-justify-center"
+};
+const _hoisted_8$1 = ["disabled"];
+const _hoisted_9$1 = /* @__PURE__ */ vue.createElementVNode("svg", {
+  width: "14",
+  height: "14",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [
+  /* @__PURE__ */ vue.createElementVNode("line", {
+    x1: "18",
+    y1: "6",
+    x2: "6",
+    y2: "18"
+  }),
+  /* @__PURE__ */ vue.createElementVNode("line", {
+    x1: "6",
+    y1: "6",
+    x2: "18",
+    y2: "18"
+  })
+], -1);
+const _hoisted_10$1 = [
+  _hoisted_9$1
+];
+const _hoisted_11$1 = {
+  key: 1,
+  class: "bh-filter bh-flex bh-justify-center"
+};
+const _hoisted_12$1 = ["disabled"];
+const _hoisted_13$1 = /* @__PURE__ */ vue.createElementVNode("svg", {
+  width: "14",
+  height: "14",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [
+  /* @__PURE__ */ vue.createElementVNode("line", {
+    x1: "18",
+    y1: "6",
+    x2: "6",
+    y2: "18"
+  }),
+  /* @__PURE__ */ vue.createElementVNode("line", {
+    x1: "6",
+    y1: "6",
+    x2: "18",
+    y2: "18"
+  })
+], -1);
+const _hoisted_14$1 = [
+  _hoisted_13$1
+];
+const _hoisted_15$1 = ["onClick"];
+const _hoisted_16$1 = {
   width: "16",
   height: "16",
   viewBox: "0 0 14 14",
   fill: "none"
 };
-const _hoisted_5$1 = {
+const _hoisted_17$1 = {
   key: 0,
   class: "bh-filter bh-relative"
 };
-const _hoisted_6$1 = ["onUpdate:modelValue"];
-const _hoisted_7$1 = ["onUpdate:modelValue"];
-const _hoisted_8$1 = ["onUpdate:modelValue"];
-const _hoisted_9$1 = ["onUpdate:modelValue"];
-const _hoisted_10$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: void 0 }, "All", -1);
-const _hoisted_11$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: true }, "True", -1);
-const _hoisted_12$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: false }, "False", -1);
-const _hoisted_13$1 = [
-  _hoisted_10$1,
-  _hoisted_11$1,
-  _hoisted_12$1
+const _hoisted_18$1 = ["onUpdate:modelValue"];
+const _hoisted_19$1 = ["onUpdate:modelValue"];
+const _hoisted_20$1 = ["onUpdate:modelValue"];
+const _hoisted_21$1 = ["onUpdate:modelValue"];
+const _hoisted_22$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: void 0 }, "All", -1);
+const _hoisted_23$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: true }, "True", -1);
+const _hoisted_24$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: false }, "False", -1);
+const _hoisted_25$1 = [
+  _hoisted_22$1,
+  _hoisted_23$1,
+  _hoisted_24$1
 ];
-const _hoisted_14$1 = {
+const _hoisted_26$1 = {
   key: 1,
   class: "bh-filter-input-wrapper"
 };
-const _hoisted_15$1 = ["onUpdate:modelValue"];
-const _hoisted_16$1 = ["onUpdate:modelValue"];
-const _hoisted_17$1 = ["onUpdate:modelValue"];
-const _hoisted_18$1 = ["onUpdate:modelValue"];
-const _hoisted_19$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: void 0 }, "All", -1);
-const _hoisted_20$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: true }, "True", -1);
-const _hoisted_21$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: false }, "False", -1);
-const _hoisted_22$1 = [
-  _hoisted_19$1,
-  _hoisted_20$1,
-  _hoisted_21$1
+const _hoisted_27$1 = ["onUpdate:modelValue"];
+const _hoisted_28$1 = ["onUpdate:modelValue"];
+const _hoisted_29$1 = ["onUpdate:modelValue"];
+const _hoisted_30$1 = ["onUpdate:modelValue"];
+const _hoisted_31$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: void 0 }, "All", -1);
+const _hoisted_32$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: true }, "True", -1);
+const _hoisted_33$1 = /* @__PURE__ */ vue.createElementVNode("option", { value: false }, "False", -1);
+const _hoisted_34$1 = [
+  _hoisted_31$1,
+  _hoisted_32$1,
+  _hoisted_33$1
 ];
-const _hoisted_23$1 = ["onClick"];
-const _hoisted_24$1 = ["onClick"];
+const _hoisted_35$1 = ["onClick"];
+const _hoisted_36$1 = ["onClick"];
 const __default__$1 = {
   name: "columnHeader"
 };
@@ -2980,7 +3073,9 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     "isFooter",
     "checkAll",
     "columnFilterLang",
-    "hasFilterDatetimeSlot"
+    "hasFilterDatetimeSlot",
+    "showClearAllButton",
+    "hasAnyActiveFilter"
   ],
   emits: [
     "selectAll",
@@ -2988,12 +3083,19 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     "filterChange",
     "toggleFilterMenu",
     "clearColumnFilter",
-    "filterDatetimeUpdate"
+    "filterDatetimeUpdate",
+    "clearAllFilters"
   ],
   setup(__props, { emit: __emit }) {
     const selectedAll = vue.ref(null);
     const props = __props;
     const emit = __emit;
+    const clearButtonLocation = vue.computed(() => {
+      if (props.all.hasCheckbox) return "checkbox";
+      if (props.all.hasRightPanel) return "rightpanel";
+      if (props.all.hasSubtable) return "subtable";
+      return "none";
+    });
     const filterInputs = vue.ref({});
     const columnConditions = vue.ref({});
     const watchedFields = vue.ref(/* @__PURE__ */ new Set());
@@ -3043,6 +3145,15 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
         }
       });
     };
+    const handleClearAllFilters = () => {
+      Object.keys(filterInputs.value).forEach((key) => {
+        filterInputs.value[key] = "";
+      });
+      Object.keys(columnConditions.value).forEach((key) => {
+        columnConditions.value[key] = "";
+      });
+      emit("clearAllFilters");
+    };
     vue.watch(
       () => {
         var _a;
@@ -3139,7 +3250,19 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
               vue.createVNode(iconCheck, { class: "check" }),
               vue.createVNode(iconDash, { class: "intermediate" })
             ])
-          ])
+          ]),
+          props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "checkbox" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
+            props.showClearAllButton ? (vue.openBlock(), vue.createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: vue.normalizeClass(["bh-clear-all-button", {
+                "bh-clear-all-button--active": props.hasAnyActiveFilter
+              }]),
+              disabled: !props.hasAnyActiveFilter,
+              onClick: vue.withModifiers(handleClearAllFilters, ["stop"]),
+              title: "Clear all filters"
+            }, _hoisted_6$1, 10, _hoisted_4$1)) : vue.createCommentVNode("", true)
+          ])) : vue.createCommentVNode("", true)
         ], 6)) : vue.createCommentVNode("", true),
         props.all.hasRightPanel ? (vue.openBlock(), vue.createElementBlock("th", {
           key: 1,
@@ -3152,7 +3275,20 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
             "bh-top-0": props.all.stickyHeader,
             "bh-left-0": props.all.stickyFirstColumn
           })
-        }, null, 6)) : vue.createCommentVNode("", true),
+        }, [
+          props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "rightpanel" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
+            props.showClearAllButton ? (vue.openBlock(), vue.createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: vue.normalizeClass(["bh-clear-all-button", {
+                "bh-clear-all-button--active": props.hasAnyActiveFilter
+              }]),
+              disabled: !props.hasAnyActiveFilter,
+              onClick: vue.withModifiers(handleClearAllFilters, ["stop"]),
+              title: "Clear all filters"
+            }, _hoisted_10$1, 10, _hoisted_8$1)) : vue.createCommentVNode("", true)
+          ])) : vue.createCommentVNode("", true)
+        ], 6)) : vue.createCommentVNode("", true),
         props.all.hasSubtable ? (vue.openBlock(), vue.createElementBlock("th", {
           key: 2,
           style: vue.normalizeStyle({
@@ -3164,7 +3300,19 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
             key: 0,
             expandedrows: props.expandedrows,
             expandall: props.all.expandall
-          }, null, 8, ["expandedrows", "expandall"])) : vue.createCommentVNode("", true)
+          }, null, 8, ["expandedrows", "expandall"])) : vue.createCommentVNode("", true),
+          props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "subtable" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, [
+            props.showClearAllButton ? (vue.openBlock(), vue.createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: vue.normalizeClass(["bh-clear-all-button", {
+                "bh-clear-all-button--active": props.hasAnyActiveFilter
+              }]),
+              disabled: !props.hasAnyActiveFilter,
+              onClick: vue.withModifiers(handleClearAllFilters, ["stop"]),
+              title: "Clear all filters"
+            }, _hoisted_14$1, 10, _hoisted_12$1)) : vue.createCommentVNode("", true)
+          ])) : vue.createCommentVNode("", true)
         ], 4)) : vue.createCommentVNode("", true),
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.all.columns, (col, j) => {
           return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
@@ -3190,7 +3338,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                   key: 0,
                   class: vue.normalizeClass(["bh-ml-3 bh-sort bh-flex bh-items-center", [props.currentSortColumn, props.currentSortDirection]])
                 }, [
-                  (vue.openBlock(), vue.createElementBlock("svg", _hoisted_4$1, [
+                  (vue.openBlock(), vue.createElementBlock("svg", _hoisted_16$1, [
                     vue.createElementVNode("polygon", {
                       points: "3.11,6.25 10.89,6.25 7,1.75 ",
                       fill: "currentColor",
@@ -3207,16 +3355,16 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                     }, null, 2)
                   ]))
                 ], 2)) : vue.createCommentVNode("", true)
-              ], 10, _hoisted_3$1),
+              ], 10, _hoisted_15$1),
               props.all.columnFilter && !props.isFooter ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                col.filter ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [
+                col.filter ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17$1, [
                   !props.all.showFloatingFilterLabel ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                     col.type === "string" || col.type === "String" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
                       key: 0,
                       "onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
                       type: "text",
                       class: "bh-form-control"
-                    }, null, 8, _hoisted_6$1)), [
+                    }, null, 8, _hoisted_18$1)), [
                       [vue.vModelText, filterInputs.value[col.field]]
                     ]) : vue.createCommentVNode("", true),
                     col.type === "number" || col.type === "integer" || col.type === "Integer" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
@@ -3224,7 +3372,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                       "onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
                       type: "number",
                       class: "bh-form-control"
-                    }, null, 8, _hoisted_7$1)), [
+                    }, null, 8, _hoisted_19$1)), [
                       [
                         vue.vModelText,
                         filterInputs.value[col.field],
@@ -3245,7 +3393,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                         "onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
                         type: "date",
                         class: "bh-form-control"
-                      }, null, 8, _hoisted_8$1)), [
+                      }, null, 8, _hoisted_20$1)), [
                         [vue.vModelText, filterInputs.value[col.field]]
                       ])
                     ], 64)) : col.type === "bool" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("select", {
@@ -3254,11 +3402,11 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                       class: "bh-form-control",
                       onClick: _cache[1] || (_cache[1] = //@ts-ignore
                       (...args) => props.isOpenFilter && props.isOpenFilter(...args))
-                    }, _hoisted_13$1, 8, _hoisted_9$1)), [
+                    }, _hoisted_25$1, 8, _hoisted_21$1)), [
                       [vue.vModelSelect, filterInputs.value[col.field]]
                     ]) : vue.createCommentVNode("", true)
                   ], 64)) : vue.createCommentVNode("", true),
-                  props.all.showFloatingFilterLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_14$1, [
+                  props.all.showFloatingFilterLabel ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_26$1, [
                     hasConditionSet(col) && props.all.useNewColumnFilter ? (vue.openBlock(), vue.createElementBlock("label", {
                       key: 0,
                       class: vue.normalizeClass(["bh-floating-label", {
@@ -3272,7 +3420,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                       class: vue.normalizeClass(["bh-form-control", {
                         "bh-form-control--with-label": hasConditionSet(col) && props.all.useNewColumnFilter
                       }])
-                    }, null, 10, _hoisted_15$1)), [
+                    }, null, 10, _hoisted_27$1)), [
                       [vue.vModelText, filterInputs.value[col.field]]
                     ]) : vue.createCommentVNode("", true),
                     col.type === "number" || col.type === "integer" || col.type === "Integer" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
@@ -3282,7 +3430,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                       class: vue.normalizeClass(["bh-form-control", {
                         "bh-form-control--with-label": hasConditionSet(col) && props.all.useNewColumnFilter
                       }])
-                    }, null, 10, _hoisted_16$1)), [
+                    }, null, 10, _hoisted_28$1)), [
                       [
                         vue.vModelText,
                         filterInputs.value[col.field],
@@ -3306,7 +3454,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                         class: vue.normalizeClass(["bh-form-control", {
                           "bh-form-control--with-label": hasConditionSet(col) && props.all.useNewColumnFilter
                         }])
-                      }, null, 10, _hoisted_17$1)), [
+                      }, null, 10, _hoisted_29$1)), [
                         [vue.vModelText, filterInputs.value[col.field]]
                       ])
                     ], 64)) : col.type === "bool" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("select", {
@@ -3315,7 +3463,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                       class: "bh-form-control",
                       onClick: _cache[2] || (_cache[2] = //@ts-ignore
                       (...args) => props.isOpenFilter && props.isOpenFilter(...args))
-                    }, _hoisted_22$1, 8, _hoisted_18$1)), [
+                    }, _hoisted_34$1, 8, _hoisted_30$1)), [
                       [vue.vModelSelect, filterInputs.value[col.field]]
                     ]) : vue.createCommentVNode("", true)
                   ])) : vue.createCommentVNode("", true),
@@ -3335,7 +3483,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                         "bh-text-black/70 dark:bh-text-gray-300": !hasConditionSet(col)
                       }])
                     }, null, 8, ["class"])
-                  ], 10, _hoisted_23$1)) : vue.createCommentVNode("", true),
+                  ], 10, _hoisted_35$1)) : vue.createCommentVNode("", true),
                   !props.all.useNewColumnFilter ? vue.withDirectives((vue.openBlock(), vue.createBlock(_sfc_main$6, {
                     key: 3,
                     column: col,
@@ -3385,7 +3533,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
                             "bh-text-black/70 dark:bh-text-gray-300": !hasConditionSet(col)
                           }])
                         }, null, 8, ["class"])
-                      ], 10, _hoisted_24$1)) : vue.createCommentVNode("", true)
+                      ], 10, _hoisted_36$1)) : vue.createCommentVNode("", true)
                     ]),
                     _: 2
                   }, 1032, ["shown"])) : vue.createCommentVNode("", true)
@@ -3575,6 +3723,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     stickyFirstColumn: { type: Boolean, default: false },
     cloneHeaderInFooter: { type: Boolean, default: false },
     selectRowOnClick: { type: Boolean, default: false },
+    showClearAllButton: { type: Boolean, default: false },
     enableleftmenu: { type: Boolean },
     enabletopmenu: { type: Boolean },
     enableHeaderArea: { type: Boolean, default: false },
@@ -3606,7 +3755,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     "rowDBClick",
     "currentTopMenuSize",
     "currentLeftMenuSize",
-    "rowRightPanelClick"
+    "rowRightPanelClick",
+    "clearAllFilters"
   ],
   setup(__props, { expose: __expose, emit: __emit }) {
     var _a, _b;
@@ -3670,6 +3820,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       const col = props.columns.find((d) => d.isUnique);
       return (col == null ? void 0 : col.field) || null;
     });
+    const hasAnyActiveFilter = vue.computed(() => {
+      if (!props.columns) return false;
+      return props.columns.some((col) => {
+        return col.value !== void 0 && col.value !== null && col.value !== "";
+      });
+    });
     const rowKeys = vue.computed(() => {
       if (!uniqueKey.value) return null;
       return new Map(
@@ -3934,6 +4090,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         isLeftMenuMinimized.value = minimized;
         currentLeftMenuWidth.value = minimized ? props.leftmenuMinWidth : props.leftmenuDefaultWidth;
         updateLeftMenuStyle();
+      },
+      clearAllFilters() {
+        clearAllFilters();
       }
     });
     vue.watch(
@@ -4260,6 +4419,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         expandedrows.value.set(key, false);
       });
     };
+    const clearAllFilters = () => {
+      var _a2;
+      for (const col of props.columns) {
+        if (col.filter) {
+          col.value = "";
+          col.condition = ((_a2 = col.type) == null ? void 0 : _a2.toLowerCase()) === "string" ? "Contains" : "Equal";
+        }
+      }
+      filterChange();
+      emit("clearAllFilters");
+    };
     let extracolumnlength = 0;
     if (props.hasCheckbox) {
       extracolumnlength++;
@@ -4421,11 +4591,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                     checkAll: selectedAll.value,
                                     columnFilterLang: props.columnFilterLang,
                                     hasFilterDatetimeSlot: hasFilterDatetimeSlot.value,
+                                    showClearAllButton: props.showClearAllButton,
+                                    hasAnyActiveFilter: hasAnyActiveFilter.value,
                                     onSelectAll: selectAll,
                                     onSortChange: sortChange,
                                     onFilterChange: filterChange,
                                     onToggleFilterMenu: toggleFilterMenu,
-                                    onClearColumnFilter: clearColumnFilter
+                                    onClearColumnFilter: clearColumnFilter,
+                                    onClearAllFilters: clearAllFilters
                                   }, vue.createSlots({ _: 2 }, [
                                     hasFilterDatetimeSlot.value ? {
                                       name: "filter-datetime",
@@ -4434,7 +4607,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                       ]),
                                       key: "0"
                                     } : void 0
-                                  ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot"])
+                                  ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter"])
                                 ], 2),
                                 vue.createElementVNode("tbody", null, [
                                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filterItems.value, (item, i) => {
@@ -4603,10 +4776,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                     isFooter: true,
                                     checkAll: selectedAll.value,
                                     hasFilterDatetimeSlot: hasFilterDatetimeSlot.value,
+                                    showClearAllButton: props.showClearAllButton,
+                                    hasAnyActiveFilter: hasAnyActiveFilter.value,
                                     onSelectAll: selectAll,
                                     onSortChange: sortChange,
                                     onFilterChange: filterChange,
-                                    onToggleFilterMenu: toggleFilterMenu
+                                    onToggleFilterMenu: toggleFilterMenu,
+                                    onClearAllFilters: clearAllFilters
                                   }, vue.createSlots({ _: 2 }, [
                                     hasFilterDatetimeSlot.value ? {
                                       name: "filter-datetime",
@@ -4615,7 +4791,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                       ]),
                                       key: "0"
                                     } : void 0
-                                  ]), 1032, ["currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "hasFilterDatetimeSlot"])
+                                  ]), 1032, ["currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter"])
                                 ], 2)) : vue.createCommentVNode("", true)
                               ], 2),
                               currentLoader.value && _ctx.enableloadinganimation ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -4687,11 +4863,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                               checkAll: selectedAll.value,
                               columnFilterLang: props.columnFilterLang,
                               hasFilterDatetimeSlot: hasFilterDatetimeSlot.value,
+                              showClearAllButton: props.showClearAllButton,
+                              hasAnyActiveFilter: hasAnyActiveFilter.value,
                               onSelectAll: selectAll,
                               onSortChange: sortChange,
                               onFilterChange: filterChange,
                               onToggleFilterMenu: toggleFilterMenu,
-                              onClearColumnFilter: clearColumnFilter
+                              onClearColumnFilter: clearColumnFilter,
+                              onClearAllFilters: clearAllFilters
                             }, vue.createSlots({ _: 2 }, [
                               hasFilterDatetimeSlot.value ? {
                                 name: "filter-datetime",
@@ -4700,7 +4879,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                 ]),
                                 key: "0"
                               } : void 0
-                            ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot"])
+                            ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter"])
                           ], 2),
                           vue.createElementVNode("tbody", null, [
                             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filterItems.value, (item, i) => {
@@ -4878,10 +5057,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                               isFooter: true,
                               checkAll: selectedAll.value,
                               hasFilterDatetimeSlot: hasFilterDatetimeSlot.value,
+                              showClearAllButton: props.showClearAllButton,
+                              hasAnyActiveFilter: hasAnyActiveFilter.value,
                               onSelectAll: selectAll,
                               onSortChange: sortChange,
                               onFilterChange: filterChange,
-                              onToggleFilterMenu: toggleFilterMenu
+                              onToggleFilterMenu: toggleFilterMenu,
+                              onClearAllFilters: clearAllFilters
                             }, vue.createSlots({ _: 2 }, [
                               hasFilterDatetimeSlot.value ? {
                                 name: "filter-datetime",
@@ -4890,7 +5072,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                 ]),
                                 key: "0"
                               } : void 0
-                            ]), 1032, ["currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "hasFilterDatetimeSlot"])
+                            ]), 1032, ["currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter"])
                           ], 2)) : vue.createCommentVNode("", true)
                         ], 2),
                         currentLoader.value && _ctx.enableloadinganimation ? (vue.openBlock(), vue.createElementBlock("div", {

package/dist/vue3-datatable.css

@@ -50,3 +50,42 @@
 .bh-datatable tbody tr:has(td[colspan]) {
   z-index: 0;
 }
+/* Clear All Filters Button */
+.bh-clear-all-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid #e0e6ed;
+  border-radius: 4px;
+  background: #e0e6ed;
+  color: rgba(0, 0, 0, 0.4);
+  cursor: not-allowed;
+  transition: all 0.2s ease;
+}
+.bh-clear-all-button:disabled {
+  opacity: 0.5;
+}
+.bh-clear-all-button--active {
+  background: rgba(var(--primary-rgb, 59, 130, 246), 0.1);
+  border-color: var(--primary, #3b82f6);
+  color: var(--primary, #3b82f6);
+  cursor: pointer;
+}
+.bh-clear-all-button--active:hover {
+  background: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
+}
+
+/* Dark mode */
+.dark .bh-clear-all-button {
+  background: #374151;
+  border-color: #4b5563;
+  color: rgba(255, 255, 255, 0.4);
+}
+.dark .bh-clear-all-button--active {
+  background: rgba(var(--primary-rgb, 59, 130, 246), 0.2);
+  border-color: var(--primary, #3b82f6);
+  color: var(--primary, #3b82f6);
+}

package/dist/vue3-datatable.js

@@ -2924,47 +2924,140 @@ function _sfc_render(_ctx, _cache) {
 const iconFilter = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render]]);
 const _hoisted_1$1 = { key: "hdrrow" };
 const _hoisted_2$1 = { class: "bh-checkbox" };
-const _hoisted_3$1 = ["onClick"];
-const _hoisted_4$1 = {
+const _hoisted_3$1 = {
+  key: 0,
+  class: "bh-filter bh-flex bh-justify-center"
+};
+const _hoisted_4$1 = ["disabled"];
+const _hoisted_5$1 = /* @__PURE__ */ createElementVNode("svg", {
+  width: "14",
+  height: "14",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [
+  /* @__PURE__ */ createElementVNode("line", {
+    x1: "18",
+    y1: "6",
+    x2: "6",
+    y2: "18"
+  }),
+  /* @__PURE__ */ createElementVNode("line", {
+    x1: "6",
+    y1: "6",
+    x2: "18",
+    y2: "18"
+  })
+], -1);
+const _hoisted_6$1 = [
+  _hoisted_5$1
+];
+const _hoisted_7$1 = {
+  key: 0,
+  class: "bh-filter bh-flex bh-justify-center"
+};
+const _hoisted_8$1 = ["disabled"];
+const _hoisted_9$1 = /* @__PURE__ */ createElementVNode("svg", {
+  width: "14",
+  height: "14",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [
+  /* @__PURE__ */ createElementVNode("line", {
+    x1: "18",
+    y1: "6",
+    x2: "6",
+    y2: "18"
+  }),
+  /* @__PURE__ */ createElementVNode("line", {
+    x1: "6",
+    y1: "6",
+    x2: "18",
+    y2: "18"
+  })
+], -1);
+const _hoisted_10$1 = [
+  _hoisted_9$1
+];
+const _hoisted_11$1 = {
+  key: 1,
+  class: "bh-filter bh-flex bh-justify-center"
+};
+const _hoisted_12$1 = ["disabled"];
+const _hoisted_13$1 = /* @__PURE__ */ createElementVNode("svg", {
+  width: "14",
+  height: "14",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2",
+  "stroke-linecap": "round",
+  "stroke-linejoin": "round"
+}, [
+  /* @__PURE__ */ createElementVNode("line", {
+    x1: "18",
+    y1: "6",
+    x2: "6",
+    y2: "18"
+  }),
+  /* @__PURE__ */ createElementVNode("line", {
+    x1: "6",
+    y1: "6",
+    x2: "18",
+    y2: "18"
+  })
+], -1);
+const _hoisted_14$1 = [
+  _hoisted_13$1
+];
+const _hoisted_15$1 = ["onClick"];
+const _hoisted_16$1 = {
   width: "16",
   height: "16",
   viewBox: "0 0 14 14",
   fill: "none"
 };
-const _hoisted_5$1 = {
+const _hoisted_17$1 = {
   key: 0,
   class: "bh-filter bh-relative"
 };
-const _hoisted_6$1 = ["onUpdate:modelValue"];
-const _hoisted_7$1 = ["onUpdate:modelValue"];
-const _hoisted_8$1 = ["onUpdate:modelValue"];
-const _hoisted_9$1 = ["onUpdate:modelValue"];
-const _hoisted_10$1 = /* @__PURE__ */ createElementVNode("option", { value: void 0 }, "All", -1);
-const _hoisted_11$1 = /* @__PURE__ */ createElementVNode("option", { value: true }, "True", -1);
-const _hoisted_12$1 = /* @__PURE__ */ createElementVNode("option", { value: false }, "False", -1);
-const _hoisted_13$1 = [
-  _hoisted_10$1,
-  _hoisted_11$1,
-  _hoisted_12$1
+const _hoisted_18$1 = ["onUpdate:modelValue"];
+const _hoisted_19$1 = ["onUpdate:modelValue"];
+const _hoisted_20$1 = ["onUpdate:modelValue"];
+const _hoisted_21$1 = ["onUpdate:modelValue"];
+const _hoisted_22$1 = /* @__PURE__ */ createElementVNode("option", { value: void 0 }, "All", -1);
+const _hoisted_23$1 = /* @__PURE__ */ createElementVNode("option", { value: true }, "True", -1);
+const _hoisted_24$1 = /* @__PURE__ */ createElementVNode("option", { value: false }, "False", -1);
+const _hoisted_25$1 = [
+  _hoisted_22$1,
+  _hoisted_23$1,
+  _hoisted_24$1
 ];
-const _hoisted_14$1 = {
+const _hoisted_26$1 = {
   key: 1,
   class: "bh-filter-input-wrapper"
 };
-const _hoisted_15$1 = ["onUpdate:modelValue"];
-const _hoisted_16$1 = ["onUpdate:modelValue"];
-const _hoisted_17$1 = ["onUpdate:modelValue"];
-const _hoisted_18$1 = ["onUpdate:modelValue"];
-const _hoisted_19$1 = /* @__PURE__ */ createElementVNode("option", { value: void 0 }, "All", -1);
-const _hoisted_20$1 = /* @__PURE__ */ createElementVNode("option", { value: true }, "True", -1);
-const _hoisted_21$1 = /* @__PURE__ */ createElementVNode("option", { value: false }, "False", -1);
-const _hoisted_22$1 = [
-  _hoisted_19$1,
-  _hoisted_20$1,
-  _hoisted_21$1
+const _hoisted_27$1 = ["onUpdate:modelValue"];
+const _hoisted_28$1 = ["onUpdate:modelValue"];
+const _hoisted_29$1 = ["onUpdate:modelValue"];
+const _hoisted_30$1 = ["onUpdate:modelValue"];
+const _hoisted_31$1 = /* @__PURE__ */ createElementVNode("option", { value: void 0 }, "All", -1);
+const _hoisted_32$1 = /* @__PURE__ */ createElementVNode("option", { value: true }, "True", -1);
+const _hoisted_33$1 = /* @__PURE__ */ createElementVNode("option", { value: false }, "False", -1);
+const _hoisted_34$1 = [
+  _hoisted_31$1,
+  _hoisted_32$1,
+  _hoisted_33$1
 ];
-const _hoisted_23$1 = ["onClick"];
-const _hoisted_24$1 = ["onClick"];
+const _hoisted_35$1 = ["onClick"];
+const _hoisted_36$1 = ["onClick"];
 const __default__$1 = {
   name: "columnHeader"
 };
@@ -2979,7 +3072,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     "isFooter",
     "checkAll",
     "columnFilterLang",
-    "hasFilterDatetimeSlot"
+    "hasFilterDatetimeSlot",
+    "showClearAllButton",
+    "hasAnyActiveFilter"
   ],
   emits: [
     "selectAll",
@@ -2987,12 +3082,19 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     "filterChange",
     "toggleFilterMenu",
     "clearColumnFilter",
-    "filterDatetimeUpdate"
+    "filterDatetimeUpdate",
+    "clearAllFilters"
   ],
   setup(__props, { emit: __emit }) {
     const selectedAll = ref(null);
     const props = __props;
     const emit = __emit;
+    const clearButtonLocation = computed(() => {
+      if (props.all.hasCheckbox) return "checkbox";
+      if (props.all.hasRightPanel) return "rightpanel";
+      if (props.all.hasSubtable) return "subtable";
+      return "none";
+    });
     const filterInputs = ref({});
     const columnConditions = ref({});
     const watchedFields = ref(/* @__PURE__ */ new Set());
@@ -3042,6 +3144,15 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
       });
     };
+    const handleClearAllFilters = () => {
+      Object.keys(filterInputs.value).forEach((key) => {
+        filterInputs.value[key] = "";
+      });
+      Object.keys(columnConditions.value).forEach((key) => {
+        columnConditions.value[key] = "";
+      });
+      emit("clearAllFilters");
+    };
     watch(
       () => {
         var _a;
@@ -3138,7 +3249,19 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               createVNode(iconCheck, { class: "check" }),
               createVNode(iconDash, { class: "intermediate" })
             ])
-          ])
+          ]),
+          props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "checkbox" ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+            props.showClearAllButton ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: normalizeClass(["bh-clear-all-button", {
+                "bh-clear-all-button--active": props.hasAnyActiveFilter
+              }]),
+              disabled: !props.hasAnyActiveFilter,
+              onClick: withModifiers(handleClearAllFilters, ["stop"]),
+              title: "Clear all filters"
+            }, _hoisted_6$1, 10, _hoisted_4$1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
         ], 6)) : createCommentVNode("", true),
         props.all.hasRightPanel ? (openBlock(), createElementBlock("th", {
           key: 1,
@@ -3151,7 +3274,20 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             "bh-top-0": props.all.stickyHeader,
             "bh-left-0": props.all.stickyFirstColumn
           })
-        }, null, 6)) : createCommentVNode("", true),
+        }, [
+          props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "rightpanel" ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
+            props.showClearAllButton ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: normalizeClass(["bh-clear-all-button", {
+                "bh-clear-all-button--active": props.hasAnyActiveFilter
+              }]),
+              disabled: !props.hasAnyActiveFilter,
+              onClick: withModifiers(handleClearAllFilters, ["stop"]),
+              title: "Clear all filters"
+            }, _hoisted_10$1, 10, _hoisted_8$1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
+        ], 6)) : createCommentVNode("", true),
         props.all.hasSubtable ? (openBlock(), createElementBlock("th", {
           key: 2,
           style: normalizeStyle({
@@ -3163,7 +3299,19 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             key: 0,
             expandedrows: props.expandedrows,
             expandall: props.all.expandall
-          }, null, 8, ["expandedrows", "expandall"])) : createCommentVNode("", true)
+          }, null, 8, ["expandedrows", "expandall"])) : createCommentVNode("", true),
+          props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "subtable" ? (openBlock(), createElementBlock("div", _hoisted_11$1, [
+            props.showClearAllButton ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              type: "button",
+              class: normalizeClass(["bh-clear-all-button", {
+                "bh-clear-all-button--active": props.hasAnyActiveFilter
+              }]),
+              disabled: !props.hasAnyActiveFilter,
+              onClick: withModifiers(handleClearAllFilters, ["stop"]),
+              title: "Clear all filters"
+            }, _hoisted_14$1, 10, _hoisted_12$1)) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
         ], 4)) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(props.all.columns, (col, j) => {
           return openBlock(), createElementBlock(Fragment, null, [
@@ -3189,7 +3337,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   key: 0,
                   class: normalizeClass(["bh-ml-3 bh-sort bh-flex bh-items-center", [props.currentSortColumn, props.currentSortDirection]])
                 }, [
-                  (openBlock(), createElementBlock("svg", _hoisted_4$1, [
+                  (openBlock(), createElementBlock("svg", _hoisted_16$1, [
                     createElementVNode("polygon", {
                       points: "3.11,6.25 10.89,6.25 7,1.75 ",
                       fill: "currentColor",
@@ -3206,16 +3354,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                     }, null, 2)
                   ]))
                 ], 2)) : createCommentVNode("", true)
-              ], 10, _hoisted_3$1),
+              ], 10, _hoisted_15$1),
               props.all.columnFilter && !props.isFooter ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                col.filter ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
+                col.filter ? (openBlock(), createElementBlock("div", _hoisted_17$1, [
                   !props.all.showFloatingFilterLabel ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                     col.type === "string" || col.type === "String" ? withDirectives((openBlock(), createElementBlock("input", {
                       key: 0,
                       "onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
                       type: "text",
                       class: "bh-form-control"
-                    }, null, 8, _hoisted_6$1)), [
+                    }, null, 8, _hoisted_18$1)), [
                       [vModelText, filterInputs.value[col.field]]
                     ]) : createCommentVNode("", true),
                     col.type === "number" || col.type === "integer" || col.type === "Integer" ? withDirectives((openBlock(), createElementBlock("input", {
@@ -3223,7 +3371,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                       "onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
                       type: "number",
                       class: "bh-form-control"
-                    }, null, 8, _hoisted_7$1)), [
+                    }, null, 8, _hoisted_19$1)), [
                       [
                         vModelText,
                         filterInputs.value[col.field],
@@ -3244,7 +3392,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         "onUpdate:modelValue": ($event) => filterInputs.value[col.field] = $event,
                         type: "date",
                         class: "bh-form-control"
-                      }, null, 8, _hoisted_8$1)), [
+                      }, null, 8, _hoisted_20$1)), [
                         [vModelText, filterInputs.value[col.field]]
                       ])
                     ], 64)) : col.type === "bool" ? withDirectives((openBlock(), createElementBlock("select", {
@@ -3253,11 +3401,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                       class: "bh-form-control",
                       onClick: _cache[1] || (_cache[1] = //@ts-ignore
                       (...args) => props.isOpenFilter && props.isOpenFilter(...args))
-                    }, _hoisted_13$1, 8, _hoisted_9$1)), [
+                    }, _hoisted_25$1, 8, _hoisted_21$1)), [
                       [vModelSelect, filterInputs.value[col.field]]
                     ]) : createCommentVNode("", true)
                   ], 64)) : createCommentVNode("", true),
-                  props.all.showFloatingFilterLabel ? (openBlock(), createElementBlock("div", _hoisted_14$1, [
+                  props.all.showFloatingFilterLabel ? (openBlock(), createElementBlock("div", _hoisted_26$1, [
                     hasConditionSet(col) && props.all.useNewColumnFilter ? (openBlock(), createElementBlock("label", {
                       key: 0,
                       class: normalizeClass(["bh-floating-label", {
@@ -3271,7 +3419,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                       class: normalizeClass(["bh-form-control", {
                         "bh-form-control--with-label": hasConditionSet(col) && props.all.useNewColumnFilter
                       }])
-                    }, null, 10, _hoisted_15$1)), [
+                    }, null, 10, _hoisted_27$1)), [
                       [vModelText, filterInputs.value[col.field]]
                     ]) : createCommentVNode("", true),
                     col.type === "number" || col.type === "integer" || col.type === "Integer" ? withDirectives((openBlock(), createElementBlock("input", {
@@ -3281,7 +3429,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                       class: normalizeClass(["bh-form-control", {
                         "bh-form-control--with-label": hasConditionSet(col) && props.all.useNewColumnFilter
                       }])
-                    }, null, 10, _hoisted_16$1)), [
+                    }, null, 10, _hoisted_28$1)), [
                       [
                         vModelText,
                         filterInputs.value[col.field],
@@ -3305,7 +3453,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         class: normalizeClass(["bh-form-control", {
                           "bh-form-control--with-label": hasConditionSet(col) && props.all.useNewColumnFilter
                         }])
-                      }, null, 10, _hoisted_17$1)), [
+                      }, null, 10, _hoisted_29$1)), [
                         [vModelText, filterInputs.value[col.field]]
                       ])
                     ], 64)) : col.type === "bool" ? withDirectives((openBlock(), createElementBlock("select", {
@@ -3314,7 +3462,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                       class: "bh-form-control",
                       onClick: _cache[2] || (_cache[2] = //@ts-ignore
                       (...args) => props.isOpenFilter && props.isOpenFilter(...args))
-                    }, _hoisted_22$1, 8, _hoisted_18$1)), [
+                    }, _hoisted_34$1, 8, _hoisted_30$1)), [
                       [vModelSelect, filterInputs.value[col.field]]
                     ]) : createCommentVNode("", true)
                   ])) : createCommentVNode("", true),
@@ -3334,7 +3482,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                         "bh-text-black/70 dark:bh-text-gray-300": !hasConditionSet(col)
                       }])
                     }, null, 8, ["class"])
-                  ], 10, _hoisted_23$1)) : createCommentVNode("", true),
+                  ], 10, _hoisted_35$1)) : createCommentVNode("", true),
                   !props.all.useNewColumnFilter ? withDirectives((openBlock(), createBlock(_sfc_main$6, {
                     key: 3,
                     column: col,
@@ -3384,7 +3532,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                             "bh-text-black/70 dark:bh-text-gray-300": !hasConditionSet(col)
                           }])
                         }, null, 8, ["class"])
-                      ], 10, _hoisted_24$1)) : createCommentVNode("", true)
+                      ], 10, _hoisted_36$1)) : createCommentVNode("", true)
                     ]),
                     _: 2
                   }, 1032, ["shown"])) : createCommentVNode("", true)
@@ -3574,6 +3722,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     stickyFirstColumn: { type: Boolean, default: false },
     cloneHeaderInFooter: { type: Boolean, default: false },
     selectRowOnClick: { type: Boolean, default: false },
+    showClearAllButton: { type: Boolean, default: false },
     enableleftmenu: { type: Boolean },
     enabletopmenu: { type: Boolean },
     enableHeaderArea: { type: Boolean, default: false },
@@ -3605,7 +3754,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     "rowDBClick",
     "currentTopMenuSize",
     "currentLeftMenuSize",
-    "rowRightPanelClick"
+    "rowRightPanelClick",
+    "clearAllFilters"
   ],
   setup(__props, { expose: __expose, emit: __emit }) {
     var _a, _b;
@@ -3669,6 +3819,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const col = props.columns.find((d) => d.isUnique);
       return (col == null ? void 0 : col.field) || null;
     });
+    const hasAnyActiveFilter = computed(() => {
+      if (!props.columns) return false;
+      return props.columns.some((col) => {
+        return col.value !== void 0 && col.value !== null && col.value !== "";
+      });
+    });
     const rowKeys = computed(() => {
       if (!uniqueKey.value) return null;
       return new Map(
@@ -3933,6 +4089,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         isLeftMenuMinimized.value = minimized;
         currentLeftMenuWidth.value = minimized ? props.leftmenuMinWidth : props.leftmenuDefaultWidth;
         updateLeftMenuStyle();
+      },
+      clearAllFilters() {
+        clearAllFilters();
       }
     });
     watch(
@@ -4259,6 +4418,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         expandedrows.value.set(key, false);
       });
     };
+    const clearAllFilters = () => {
+      var _a2;
+      for (const col of props.columns) {
+        if (col.filter) {
+          col.value = "";
+          col.condition = ((_a2 = col.type) == null ? void 0 : _a2.toLowerCase()) === "string" ? "Contains" : "Equal";
+        }
+      }
+      filterChange();
+      emit("clearAllFilters");
+    };
     let extracolumnlength = 0;
     if (props.hasCheckbox) {
       extracolumnlength++;
@@ -4420,11 +4590,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     checkAll: selectedAll.value,
                                     columnFilterLang: props.columnFilterLang,
                                     hasFilterDatetimeSlot: hasFilterDatetimeSlot.value,
+                                    showClearAllButton: props.showClearAllButton,
+                                    hasAnyActiveFilter: hasAnyActiveFilter.value,
                                     onSelectAll: selectAll,
                                     onSortChange: sortChange,
                                     onFilterChange: filterChange,
                                     onToggleFilterMenu: toggleFilterMenu,
-                                    onClearColumnFilter: clearColumnFilter
+                                    onClearColumnFilter: clearColumnFilter,
+                                    onClearAllFilters: clearAllFilters
                                   }, createSlots({ _: 2 }, [
                                     hasFilterDatetimeSlot.value ? {
                                       name: "filter-datetime",
@@ -4433,7 +4606,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                       ]),
                                       key: "0"
                                     } : void 0
-                                  ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot"])
+                                  ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter"])
                                 ], 2),
                                 createElementVNode("tbody", null, [
                                   (openBlock(true), createElementBlock(Fragment, null, renderList(filterItems.value, (item, i) => {
@@ -4602,10 +4775,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     isFooter: true,
                                     checkAll: selectedAll.value,
                                     hasFilterDatetimeSlot: hasFilterDatetimeSlot.value,
+                                    showClearAllButton: props.showClearAllButton,
+                                    hasAnyActiveFilter: hasAnyActiveFilter.value,
                                     onSelectAll: selectAll,
                                     onSortChange: sortChange,
                                     onFilterChange: filterChange,
-                                    onToggleFilterMenu: toggleFilterMenu
+                                    onToggleFilterMenu: toggleFilterMenu,
+                                    onClearAllFilters: clearAllFilters
                                   }, createSlots({ _: 2 }, [
                                     hasFilterDatetimeSlot.value ? {
                                       name: "filter-datetime",
@@ -4614,7 +4790,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                       ]),
                                       key: "0"
                                     } : void 0
-                                  ]), 1032, ["currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "hasFilterDatetimeSlot"])
+                                  ]), 1032, ["currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter"])
                                 ], 2)) : createCommentVNode("", true)
                               ], 2),
                               currentLoader.value && _ctx.enableloadinganimation ? (openBlock(), createElementBlock("div", {
@@ -4686,11 +4862,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               checkAll: selectedAll.value,
                               columnFilterLang: props.columnFilterLang,
                               hasFilterDatetimeSlot: hasFilterDatetimeSlot.value,
+                              showClearAllButton: props.showClearAllButton,
+                              hasAnyActiveFilter: hasAnyActiveFilter.value,
                               onSelectAll: selectAll,
                               onSortChange: sortChange,
                               onFilterChange: filterChange,
                               onToggleFilterMenu: toggleFilterMenu,
-                              onClearColumnFilter: clearColumnFilter
+                              onClearColumnFilter: clearColumnFilter,
+                              onClearAllFilters: clearAllFilters
                             }, createSlots({ _: 2 }, [
                               hasFilterDatetimeSlot.value ? {
                                 name: "filter-datetime",
@@ -4699,7 +4878,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 ]),
                                 key: "0"
                               } : void 0
-                            ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot"])
+                            ]), 1032, ["expandedrows", "currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "columnFilterLang", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter"])
                           ], 2),
                           createElementVNode("tbody", null, [
                             (openBlock(true), createElementBlock(Fragment, null, renderList(filterItems.value, (item, i) => {
@@ -4877,10 +5056,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               isFooter: true,
                               checkAll: selectedAll.value,
                               hasFilterDatetimeSlot: hasFilterDatetimeSlot.value,
+                              showClearAllButton: props.showClearAllButton,
+                              hasAnyActiveFilter: hasAnyActiveFilter.value,
                               onSelectAll: selectAll,
                               onSortChange: sortChange,
                               onFilterChange: filterChange,
-                              onToggleFilterMenu: toggleFilterMenu
+                              onToggleFilterMenu: toggleFilterMenu,
+                              onClearAllFilters: clearAllFilters
                             }, createSlots({ _: 2 }, [
                               hasFilterDatetimeSlot.value ? {
                                 name: "filter-datetime",
@@ -4889,7 +5071,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 ]),
                                 key: "0"
                               } : void 0
-                            ]), 1032, ["currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "hasFilterDatetimeSlot"])
+                            ]), 1032, ["currentSortColumn", "currentSortDirection", "isOpenFilter", "checkAll", "hasFilterDatetimeSlot", "showClearAllButton", "hasAnyActiveFilter"])
                           ], 2)) : createCommentVNode("", true)
                         ], 2),
                         currentLoader.value && _ctx.enableloadinganimation ? (openBlock(), createElementBlock("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dolusoft/vue3-datatable",
-  "version": "1.8.11",
+  "version": "1.8.12",
   "description": "Vue3 Datatable - fully customizable & easy to use datatable library",
   "private": false,
   "type": "module",