@dolusoft/vue3-datatable 1.8.25 → 1.8.28

package/dist/vue3-datatable.cjs

@@ -3572,101 +3572,103 @@ const _hoisted_10 = /* @__PURE__ */ vue.createElementVNode("span", null, "##Tabl
 const _hoisted_11 = ["onClick"];
 const _hoisted_12 = { class: "bh-checkbox" };
 const _hoisted_13 = ["value"];
-const _hoisted_14 = ["innerHTML"];
-const _hoisted_15 = ["onClick"];
-const _hoisted_16 = ["colspan"];
+const _hoisted_14 = ["onContextmenu"];
+const _hoisted_15 = ["innerHTML"];
+const _hoisted_16 = ["onClick"];
 const _hoisted_17 = ["colspan"];
-const _hoisted_18 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bh-skeleton-box bh-h-8" }, null, -1);
-const _hoisted_19 = [
-  _hoisted_18
+const _hoisted_18 = ["colspan"];
+const _hoisted_19 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bh-skeleton-box bh-h-8" }, null, -1);
+const _hoisted_20 = [
+  _hoisted_19
 ];
-const _hoisted_20 = ["colspan"];
-const _hoisted_21 = /* @__PURE__ */ vue.createElementVNode("span", null, "##Table Header Area Slot##", -1);
-const _hoisted_22 = ["onClick"];
-const _hoisted_23 = { class: "bh-checkbox" };
-const _hoisted_24 = ["value"];
-const _hoisted_25 = ["innerHTML"];
-const _hoisted_26 = ["onClick"];
-const _hoisted_27 = ["colspan"];
-const _hoisted_28 = ["colspan"];
-const _hoisted_29 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bh-skeleton-box bh-h-8" }, null, -1);
-const _hoisted_30 = [
-  _hoisted_29
+const _hoisted_21 = ["colspan"];
+const _hoisted_22 = /* @__PURE__ */ vue.createElementVNode("span", null, "##Table Header Area Slot##", -1);
+const _hoisted_23 = ["onClick"];
+const _hoisted_24 = { class: "bh-checkbox" };
+const _hoisted_25 = ["value"];
+const _hoisted_26 = ["onContextmenu"];
+const _hoisted_27 = ["innerHTML"];
+const _hoisted_28 = ["onClick"];
+const _hoisted_29 = ["colspan"];
+const _hoisted_30 = ["colspan"];
+const _hoisted_31 = /* @__PURE__ */ vue.createElementVNode("div", { class: "bh-skeleton-box bh-h-8" }, null, -1);
+const _hoisted_32 = [
+  _hoisted_31
 ];
-const _hoisted_31 = ["colspan"];
-const _hoisted_32 = { class: "bh-flex bh-items-center bh-flex-wrap bh-flex-col sm:bh-flex-row bh-gap-4" };
-const _hoisted_33 = { class: "bh-pagination-info bh-flex bh-items-center" };
-const _hoisted_34 = { class: "bh-mr-2" };
-const _hoisted_35 = ["value"];
-const _hoisted_36 = { class: "bh-pagination-number sm:bh-ml-auto bh-inline-flex bh-items-center bh-space-x-1" };
-const _hoisted_37 = ["innerHTML"];
-const _hoisted_38 = {
+const _hoisted_33 = ["colspan"];
+const _hoisted_34 = { class: "bh-flex bh-items-center bh-flex-wrap bh-flex-col sm:bh-flex-row bh-gap-4" };
+const _hoisted_35 = { class: "bh-pagination-info bh-flex bh-items-center" };
+const _hoisted_36 = { class: "bh-mr-2" };
+const _hoisted_37 = ["value"];
+const _hoisted_38 = { class: "bh-pagination-number sm:bh-ml-auto bh-inline-flex bh-items-center bh-space-x-1" };
+const _hoisted_39 = ["innerHTML"];
+const _hoisted_40 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_39 = /* @__PURE__ */ vue.createElementVNode("g", {
+const _hoisted_41 = /* @__PURE__ */ vue.createElementVNode("g", {
   fill: "currentColor",
   "fill-rule": "evenodd"
 }, [
   /* @__PURE__ */ vue.createElementVNode("path", { d: "M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" }),
   /* @__PURE__ */ vue.createElementVNode("path", { d: "M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" })
 ], -1);
-const _hoisted_40 = [
-  _hoisted_39
+const _hoisted_42 = [
+  _hoisted_41
 ];
-const _hoisted_41 = ["innerHTML"];
-const _hoisted_42 = {
+const _hoisted_43 = ["innerHTML"];
+const _hoisted_44 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_43 = /* @__PURE__ */ vue.createElementVNode("path", {
+const _hoisted_45 = /* @__PURE__ */ vue.createElementVNode("path", {
   fill: "currentColor",
   "fill-rule": "evenodd",
   d: "M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
 }, null, -1);
-const _hoisted_44 = [
-  _hoisted_43
+const _hoisted_46 = [
+  _hoisted_45
 ];
-const _hoisted_45 = ["onClick"];
-const _hoisted_46 = ["innerHTML"];
-const _hoisted_47 = {
+const _hoisted_47 = ["onClick"];
+const _hoisted_48 = ["innerHTML"];
+const _hoisted_49 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_48 = /* @__PURE__ */ vue.createElementVNode("path", {
+const _hoisted_50 = /* @__PURE__ */ vue.createElementVNode("path", {
   fill: "currentColor",
   "fill-rule": "evenodd",
   d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8L4.646 2.354a.5.5 0 0 1 0-.708z"
 }, null, -1);
-const _hoisted_49 = [
-  _hoisted_48
+const _hoisted_51 = [
+  _hoisted_50
 ];
-const _hoisted_50 = ["innerHTML"];
-const _hoisted_51 = {
+const _hoisted_52 = ["innerHTML"];
+const _hoisted_53 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_52 = /* @__PURE__ */ vue.createElementVNode("g", {
+const _hoisted_54 = /* @__PURE__ */ vue.createElementVNode("g", {
   fill: "currentColor",
   "fill-rule": "evenodd"
 }, [
   /* @__PURE__ */ vue.createElementVNode("path", { d: "M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8L3.646 2.354a.5.5 0 0 1 0-.708z" }),
   /* @__PURE__ */ vue.createElementVNode("path", { d: "M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8L7.646 2.354a.5.5 0 0 1 0-.708z" })
 ], -1);
-const _hoisted_53 = [
-  _hoisted_52
+const _hoisted_55 = [
+  _hoisted_54
 ];
 const __default__ = {
   name: "Vue3Datatable"
@@ -3755,7 +3757,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     "currentTopMenuSize",
     "currentLeftMenuSize",
     "rowRightPanelClick",
-    "clearAllFilters"
+    "clearAllFilters",
+    "cellContextMenu"
   ],
   setup(__props, { expose: __expose, emit: __emit }) {
     var _a, _b;
@@ -4057,6 +4060,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       });
     });
     const emit = __emit;
+    const handleCellContextMenu = (event, row, column, value, rowIndex, columnIndex) => {
+      event.preventDefault();
+      emit("cellContextMenu", {
+        event,
+        row,
+        column,
+        value,
+        rowIndex,
+        columnIndex
+      });
+    };
     __expose({
       reset() {
         reset();
@@ -4092,6 +4106,27 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       },
       clearAllFilters() {
         clearAllFilters();
+      },
+      /**
+       * Set column filter value and optionally trigger filter
+       * @param field - Column field name
+       * @param value - Filter value
+       * @param condition - Filter condition (default: column's default condition)
+       * @param triggerFilter - Whether to trigger filterChange event (default: false)
+       */
+      setColumnFilter(field, value, condition, triggerFilter = false) {
+        const column = props.columns.find((col) => col.field === field);
+        if (column) {
+          column.value = value;
+          if (condition) {
+            column.condition = condition;
+          }
+          updateHasAnyActiveFilter();
+          if (triggerFilter) {
+            filterChange();
+          }
+        }
+        return !!column;
       }
     });
     vue.watch(
@@ -4689,7 +4724,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                                 j === 0 && props.stickyFirstColumn ? "bh-sticky bh-left-0 bh-bg-blue-light" : "",
                                                 props.hasCheckbox && j === 0 && props.stickyFirstColumn ? "bh-left-[52px]" : "",
                                                 col.cellClass ? col.cellClass : ""
-                                              ])
+                                              ]),
+                                              onContextmenu: ($event) => handleCellContextMenu($event, item, col, cellValue(item, col.field), i, j)
                                             }, [
                                               vue.unref(slots)[col.field] ? vue.renderSlot(_ctx.$slots, col.field, {
                                                 key: 0,
@@ -4697,10 +4733,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                               }) : col.cellRenderer ? (vue.openBlock(), vue.createElementBlock("div", {
                                                 key: 1,
                                                 innerHTML: col.cellRenderer(item)
-                                              }, null, 8, _hoisted_14)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+                                              }, null, 8, _hoisted_15)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
                                                 vue.createTextVNode(vue.toDisplayString(cellValue(item, col.field)), 1)
                                               ], 64))
-                                            ], 2)) : vue.createCommentVNode("", true)
+                                            ], 42, _hoisted_14)) : vue.createCommentVNode("", true)
                                           ], 64);
                                         }), 256))
                                       ], 10, _hoisted_11)) : vue.createCommentVNode("", true),
@@ -4720,8 +4756,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                             rowIndex: i,
                                             filterItems: filterItems.value
                                           })
-                                        ], 8, _hoisted_16)
-                                      ], 10, _hoisted_15)) : vue.createCommentVNode("", true)
+                                        ], 8, _hoisted_17)
+                                      ], 10, _hoisted_16)) : vue.createCommentVNode("", true)
                                     ], 64);
                                   }), 128)),
                                   !filterRowCount.value && currentLoader.value && _ctx.skeletonloader ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(props.pageSize, (i) => {
@@ -4732,7 +4768,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                       vue.createElementVNode("td", {
                                         colspan: props.columns.length + vue.unref(extracolumnlength),
                                         class: "!bh-p-0 !bh-border-transparent"
-                                      }, _hoisted_19, 8, _hoisted_17)
+                                      }, _hoisted_20, 8, _hoisted_18)
                                     ]);
                                   }), 128)) : vue.createCommentVNode("", true),
                                   filterRowCount.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(props.footerRows, (item, i) => {
@@ -4743,7 +4779,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                       vue.unref(extracolumnlength) > 0 ? (vue.openBlock(), vue.createElementBlock("td", {
                                         key: 0,
                                         colspan: vue.unref(extracolumnlength)
-                                      }, null, 8, _hoisted_20)) : vue.createCommentVNode("", true),
+                                      }, null, 8, _hoisted_21)) : vue.createCommentVNode("", true),
                                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.columns, (col, j) => {
                                         return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                                           !col.hide && !col.dataOnly ? (vue.openBlock(), vue.createElementBlock("td", {
@@ -4837,7 +4873,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                         style: vue.normalizeStyle({ height: _ctx.headerAreaHeight, "margin-bottom": "10px" })
                       }, [
                         vue.renderSlot(_ctx.$slots, "tableHeaderArea", {}, () => [
-                          _hoisted_21
+                          _hoisted_22
                         ])
                       ], 4)) : vue.createCommentVNode("", true),
                       vue.renderSlot(_ctx.$slots, "tableactionheader"),
@@ -4906,14 +4942,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                       "bh-sticky bh-left-0 bh-bg-blue-light": props.stickyFirstColumn
                                     })
                                   }, [
-                                    vue.createElementVNode("div", _hoisted_23, [
+                                    vue.createElementVNode("div", _hoisted_24, [
                                       vue.withDirectives(vue.createElementVNode("input", {
                                         "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => selected.value = $event),
                                         type: "checkbox",
                                         value: getRowKey(i),
                                         onClick: _cache[4] || (_cache[4] = vue.withModifiers(() => {
                                         }, ["stop"]))
-                                      }, null, 8, _hoisted_24), [
+                                      }, null, 8, _hoisted_25), [
                                         [vue.vModelCheckbox, selected.value]
                                       ]),
                                       vue.createElementVNode("div", null, [
@@ -4961,7 +4997,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                           j === 0 && props.stickyFirstColumn ? "bh-sticky bh-left-0 bh-bg-blue-light" : "",
                                           props.hasCheckbox && j === 0 && props.stickyFirstColumn ? "bh-left-[52px]" : "",
                                           col.cellClass ? col.cellClass : ""
-                                        ])
+                                        ]),
+                                        onContextmenu: ($event) => handleCellContextMenu($event, item, col, cellValue(item, col.field), i, j)
                                       }, [
                                         vue.unref(slots)[col.field] ? vue.renderSlot(_ctx.$slots, col.field, {
                                           key: 0,
@@ -4969,13 +5006,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                         }) : col.cellRenderer ? (vue.openBlock(), vue.createElementBlock("div", {
                                           key: 1,
                                           innerHTML: col.cellRenderer(item)
-                                        }, null, 8, _hoisted_25)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+                                        }, null, 8, _hoisted_27)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
                                           vue.createTextVNode(vue.toDisplayString(cellValue(item, col.field)), 1)
                                         ], 64))
-                                      ], 2)) : vue.createCommentVNode("", true)
+                                      ], 42, _hoisted_26)) : vue.createCommentVNode("", true)
                                     ], 64);
                                   }), 256))
-                                ], 10, _hoisted_22)) : vue.createCommentVNode("", true),
+                                ], 10, _hoisted_23)) : vue.createCommentVNode("", true),
                                 isRowExpanded(item, i) && props.hasSubtable ? (vue.openBlock(), vue.createElementBlock("tr", {
                                   key: 1,
                                   class: vue.normalizeClass([
@@ -5003,8 +5040,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                         filterItems: filterItems.value
                                       })
                                     ], 4)
-                                  ], 8, _hoisted_27)
-                                ], 10, _hoisted_26)) : vue.createCommentVNode("", true)
+                                  ], 8, _hoisted_29)
+                                ], 10, _hoisted_28)) : vue.createCommentVNode("", true)
                               ], 64);
                             }), 128)),
                             !filterRowCount.value && currentLoader.value && _ctx.skeletonloader ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList(props.pageSize, (i) => {
@@ -5015,7 +5052,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                 vue.createElementVNode("td", {
                                   colspan: props.columns.length + vue.unref(extracolumnlength),
                                   class: "!bh-p-0 !bh-border-transparent"
-                                }, _hoisted_30, 8, _hoisted_28)
+                                }, _hoisted_32, 8, _hoisted_30)
                               ]);
                             }), 128)) : vue.createCommentVNode("", true),
                             filterRowCount.value ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(props.footerRows, (item, i) => {
@@ -5026,7 +5063,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                                 vue.unref(extracolumnlength) > 0 ? (vue.openBlock(), vue.createElementBlock("td", {
                                   key: 0,
                                   colspan: vue.unref(extracolumnlength)
-                                }, null, 8, _hoisted_31)) : vue.createCommentVNode("", true),
+                                }, null, 8, _hoisted_33)) : vue.createCommentVNode("", true),
                                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(props.columns, (col, j) => {
                                   return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                                     !col.hide && !col.dataOnly ? (vue.openBlock(), vue.createElementBlock("td", {
@@ -5114,7 +5151,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             "sticky-footer": props.stickyFooter
           }])
         }, [
-          vue.createElementVNode("div", _hoisted_32, [
+          vue.createElementVNode("div", _hoisted_34, [
             _ctx.enablefooterpagination ? vue.renderSlot(_ctx.$slots, "footerpageinfo", {
               key: 0,
               paginationInfo: _ctx.paginationInfo,
@@ -5127,8 +5164,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               stringFormat,
               setPageSize
             }, () => [
-              vue.createElementVNode("div", _hoisted_33, [
-                vue.createElementVNode("span", _hoisted_34, vue.toDisplayString(stringFormat(
+              vue.createElementVNode("div", _hoisted_35, [
+                vue.createElementVNode("span", _hoisted_36, vue.toDisplayString(stringFormat(
                   props.paginationInfo,
                   filterRowCount.value ? offset.value : 0,
                   limit.value,
@@ -5143,7 +5180,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     return vue.openBlock(), vue.createElementBlock("option", {
                       value: option,
                       key: option
-                    }, vue.toDisplayString(option), 9, _hoisted_35);
+                    }, vue.toDisplayString(option), 9, _hoisted_37);
                   }), 128))
                 ], 512)), [
                   [vue.vModelSelect, currentPageSize.value]
@@ -5159,7 +5196,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               nextPage,
               previousPage
             }, () => [
-              vue.createElementVNode("div", _hoisted_36, [
+              vue.createElementVNode("div", _hoisted_38, [
                 props.showFirstPage ? (vue.openBlock(), vue.createElementBlock("button", {
                   key: 0,
                   type: "button",
@@ -5169,7 +5206,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   props.firstArrow ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     innerHTML: props.firstArrow
-                  }, null, 8, _hoisted_37)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_38, _hoisted_40))
+                  }, null, 8, _hoisted_39)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_40, _hoisted_42))
                 ], 2)) : vue.createCommentVNode("", true),
                 vue.createElementVNode("button", {
                   type: "button",
@@ -5179,7 +5216,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   props.previousArrow ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     innerHTML: props.previousArrow
-                  }, null, 8, _hoisted_41)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_42, _hoisted_44))
+                  }, null, 8, _hoisted_43)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_44, _hoisted_46))
                 ], 2),
                 props.showNumbers ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(paging.value, (page) => {
                   return vue.openBlock(), vue.createElementBlock("button", {
@@ -5190,7 +5227,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       "bh-active": page === currentPage.value
                     }]),
                     onClick: ($event) => movePage(page)
-                  }, vue.toDisplayString(page), 11, _hoisted_45);
+                  }, vue.toDisplayString(page), 11, _hoisted_47);
                 }), 128)) : vue.createCommentVNode("", true),
                 vue.createElementVNode("button", {
                   type: "button",
@@ -5200,7 +5237,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   props.nextArrow ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     innerHTML: props.nextArrow
-                  }, null, 8, _hoisted_46)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_47, _hoisted_49))
+                  }, null, 8, _hoisted_48)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_49, _hoisted_51))
                 ], 2),
                 props.showLastPage ? (vue.openBlock(), vue.createElementBlock("button", {
                   key: 2,
@@ -5211,7 +5248,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   props.lastArrow ? (vue.openBlock(), vue.createElementBlock("span", {
                     key: 0,
                     innerHTML: props.lastArrow
-                  }, null, 8, _hoisted_50)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_51, _hoisted_53))
+                  }, null, 8, _hoisted_52)) : (vue.openBlock(), vue.createElementBlock("svg", _hoisted_53, _hoisted_55))
                 ], 2)) : vue.createCommentVNode("", true)
               ])
             ]) : vue.createCommentVNode("", true)

package/dist/vue3-datatable.js

@@ -3571,101 +3571,103 @@ const _hoisted_10 = /* @__PURE__ */ createElementVNode("span", null, "##Table Ac
 const _hoisted_11 = ["onClick"];
 const _hoisted_12 = { class: "bh-checkbox" };
 const _hoisted_13 = ["value"];
-const _hoisted_14 = ["innerHTML"];
-const _hoisted_15 = ["onClick"];
-const _hoisted_16 = ["colspan"];
+const _hoisted_14 = ["onContextmenu"];
+const _hoisted_15 = ["innerHTML"];
+const _hoisted_16 = ["onClick"];
 const _hoisted_17 = ["colspan"];
-const _hoisted_18 = /* @__PURE__ */ createElementVNode("div", { class: "bh-skeleton-box bh-h-8" }, null, -1);
-const _hoisted_19 = [
-  _hoisted_18
+const _hoisted_18 = ["colspan"];
+const _hoisted_19 = /* @__PURE__ */ createElementVNode("div", { class: "bh-skeleton-box bh-h-8" }, null, -1);
+const _hoisted_20 = [
+  _hoisted_19
 ];
-const _hoisted_20 = ["colspan"];
-const _hoisted_21 = /* @__PURE__ */ createElementVNode("span", null, "##Table Header Area Slot##", -1);
-const _hoisted_22 = ["onClick"];
-const _hoisted_23 = { class: "bh-checkbox" };
-const _hoisted_24 = ["value"];
-const _hoisted_25 = ["innerHTML"];
-const _hoisted_26 = ["onClick"];
-const _hoisted_27 = ["colspan"];
-const _hoisted_28 = ["colspan"];
-const _hoisted_29 = /* @__PURE__ */ createElementVNode("div", { class: "bh-skeleton-box bh-h-8" }, null, -1);
-const _hoisted_30 = [
-  _hoisted_29
+const _hoisted_21 = ["colspan"];
+const _hoisted_22 = /* @__PURE__ */ createElementVNode("span", null, "##Table Header Area Slot##", -1);
+const _hoisted_23 = ["onClick"];
+const _hoisted_24 = { class: "bh-checkbox" };
+const _hoisted_25 = ["value"];
+const _hoisted_26 = ["onContextmenu"];
+const _hoisted_27 = ["innerHTML"];
+const _hoisted_28 = ["onClick"];
+const _hoisted_29 = ["colspan"];
+const _hoisted_30 = ["colspan"];
+const _hoisted_31 = /* @__PURE__ */ createElementVNode("div", { class: "bh-skeleton-box bh-h-8" }, null, -1);
+const _hoisted_32 = [
+  _hoisted_31
 ];
-const _hoisted_31 = ["colspan"];
-const _hoisted_32 = { class: "bh-flex bh-items-center bh-flex-wrap bh-flex-col sm:bh-flex-row bh-gap-4" };
-const _hoisted_33 = { class: "bh-pagination-info bh-flex bh-items-center" };
-const _hoisted_34 = { class: "bh-mr-2" };
-const _hoisted_35 = ["value"];
-const _hoisted_36 = { class: "bh-pagination-number sm:bh-ml-auto bh-inline-flex bh-items-center bh-space-x-1" };
-const _hoisted_37 = ["innerHTML"];
-const _hoisted_38 = {
+const _hoisted_33 = ["colspan"];
+const _hoisted_34 = { class: "bh-flex bh-items-center bh-flex-wrap bh-flex-col sm:bh-flex-row bh-gap-4" };
+const _hoisted_35 = { class: "bh-pagination-info bh-flex bh-items-center" };
+const _hoisted_36 = { class: "bh-mr-2" };
+const _hoisted_37 = ["value"];
+const _hoisted_38 = { class: "bh-pagination-number sm:bh-ml-auto bh-inline-flex bh-items-center bh-space-x-1" };
+const _hoisted_39 = ["innerHTML"];
+const _hoisted_40 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_39 = /* @__PURE__ */ createElementVNode("g", {
+const _hoisted_41 = /* @__PURE__ */ createElementVNode("g", {
   fill: "currentColor",
   "fill-rule": "evenodd"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M8.354 1.646a.5.5 0 0 1 0 .708L2.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" }),
   /* @__PURE__ */ createElementVNode("path", { d: "M12.354 1.646a.5.5 0 0 1 0 .708L6.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" })
 ], -1);
-const _hoisted_40 = [
-  _hoisted_39
+const _hoisted_42 = [
+  _hoisted_41
 ];
-const _hoisted_41 = ["innerHTML"];
-const _hoisted_42 = {
+const _hoisted_43 = ["innerHTML"];
+const _hoisted_44 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_43 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_45 = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
   "fill-rule": "evenodd",
   d: "M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"
 }, null, -1);
-const _hoisted_44 = [
-  _hoisted_43
+const _hoisted_46 = [
+  _hoisted_45
 ];
-const _hoisted_45 = ["onClick"];
-const _hoisted_46 = ["innerHTML"];
-const _hoisted_47 = {
+const _hoisted_47 = ["onClick"];
+const _hoisted_48 = ["innerHTML"];
+const _hoisted_49 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_48 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_50 = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
   "fill-rule": "evenodd",
   d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8L4.646 2.354a.5.5 0 0 1 0-.708z"
 }, null, -1);
-const _hoisted_49 = [
-  _hoisted_48
+const _hoisted_51 = [
+  _hoisted_50
 ];
-const _hoisted_50 = ["innerHTML"];
-const _hoisted_51 = {
+const _hoisted_52 = ["innerHTML"];
+const _hoisted_53 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_52 = /* @__PURE__ */ createElementVNode("g", {
+const _hoisted_54 = /* @__PURE__ */ createElementVNode("g", {
   fill: "currentColor",
   "fill-rule": "evenodd"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8L3.646 2.354a.5.5 0 0 1 0-.708z" }),
   /* @__PURE__ */ createElementVNode("path", { d: "M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8L7.646 2.354a.5.5 0 0 1 0-.708z" })
 ], -1);
-const _hoisted_53 = [
-  _hoisted_52
+const _hoisted_55 = [
+  _hoisted_54
 ];
 const __default__ = {
   name: "Vue3Datatable"
@@ -3754,7 +3756,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     "currentTopMenuSize",
     "currentLeftMenuSize",
     "rowRightPanelClick",
-    "clearAllFilters"
+    "clearAllFilters",
+    "cellContextMenu"
   ],
   setup(__props, { expose: __expose, emit: __emit }) {
     var _a, _b;
@@ -4056,6 +4059,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     });
     const emit = __emit;
+    const handleCellContextMenu = (event, row, column, value, rowIndex, columnIndex) => {
+      event.preventDefault();
+      emit("cellContextMenu", {
+        event,
+        row,
+        column,
+        value,
+        rowIndex,
+        columnIndex
+      });
+    };
     __expose({
       reset() {
         reset();
@@ -4091,6 +4105,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       },
       clearAllFilters() {
         clearAllFilters();
+      },
+      /**
+       * Set column filter value and optionally trigger filter
+       * @param field - Column field name
+       * @param value - Filter value
+       * @param condition - Filter condition (default: column's default condition)
+       * @param triggerFilter - Whether to trigger filterChange event (default: false)
+       */
+      setColumnFilter(field, value, condition, triggerFilter = false) {
+        const column = props.columns.find((col) => col.field === field);
+        if (column) {
+          column.value = value;
+          if (condition) {
+            column.condition = condition;
+          }
+          updateHasAnyActiveFilter();
+          if (triggerFilter) {
+            filterChange();
+          }
+        }
+        return !!column;
       }
     });
     watch(
@@ -4688,7 +4723,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                                 j === 0 && props.stickyFirstColumn ? "bh-sticky bh-left-0 bh-bg-blue-light" : "",
                                                 props.hasCheckbox && j === 0 && props.stickyFirstColumn ? "bh-left-[52px]" : "",
                                                 col.cellClass ? col.cellClass : ""
-                                              ])
+                                              ]),
+                                              onContextmenu: ($event) => handleCellContextMenu($event, item, col, cellValue(item, col.field), i, j)
                                             }, [
                                               unref(slots)[col.field] ? renderSlot(_ctx.$slots, col.field, {
                                                 key: 0,
@@ -4696,10 +4732,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                               }) : col.cellRenderer ? (openBlock(), createElementBlock("div", {
                                                 key: 1,
                                                 innerHTML: col.cellRenderer(item)
-                                              }, null, 8, _hoisted_14)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                                              }, null, 8, _hoisted_15)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                                                 createTextVNode(toDisplayString(cellValue(item, col.field)), 1)
                                               ], 64))
-                                            ], 2)) : createCommentVNode("", true)
+                                            ], 42, _hoisted_14)) : createCommentVNode("", true)
                                           ], 64);
                                         }), 256))
                                       ], 10, _hoisted_11)) : createCommentVNode("", true),
@@ -4719,8 +4755,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                             rowIndex: i,
                                             filterItems: filterItems.value
                                           })
-                                        ], 8, _hoisted_16)
-                                      ], 10, _hoisted_15)) : createCommentVNode("", true)
+                                        ], 8, _hoisted_17)
+                                      ], 10, _hoisted_16)) : createCommentVNode("", true)
                                     ], 64);
                                   }), 128)),
                                   !filterRowCount.value && currentLoader.value && _ctx.skeletonloader ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.pageSize, (i) => {
@@ -4731,7 +4767,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                       createElementVNode("td", {
                                         colspan: props.columns.length + unref(extracolumnlength),
                                         class: "!bh-p-0 !bh-border-transparent"
-                                      }, _hoisted_19, 8, _hoisted_17)
+                                      }, _hoisted_20, 8, _hoisted_18)
                                     ]);
                                   }), 128)) : createCommentVNode("", true),
                                   filterRowCount.value ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(props.footerRows, (item, i) => {
@@ -4742,7 +4778,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                       unref(extracolumnlength) > 0 ? (openBlock(), createElementBlock("td", {
                                         key: 0,
                                         colspan: unref(extracolumnlength)
-                                      }, null, 8, _hoisted_20)) : createCommentVNode("", true),
+                                      }, null, 8, _hoisted_21)) : createCommentVNode("", true),
                                       (openBlock(true), createElementBlock(Fragment, null, renderList(props.columns, (col, j) => {
                                         return openBlock(), createElementBlock(Fragment, null, [
                                           !col.hide && !col.dataOnly ? (openBlock(), createElementBlock("td", {
@@ -4836,7 +4872,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         style: normalizeStyle({ height: _ctx.headerAreaHeight, "margin-bottom": "10px" })
                       }, [
                         renderSlot(_ctx.$slots, "tableHeaderArea", {}, () => [
-                          _hoisted_21
+                          _hoisted_22
                         ])
                       ], 4)) : createCommentVNode("", true),
                       renderSlot(_ctx.$slots, "tableactionheader"),
@@ -4905,14 +4941,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                       "bh-sticky bh-left-0 bh-bg-blue-light": props.stickyFirstColumn
                                     })
                                   }, [
-                                    createElementVNode("div", _hoisted_23, [
+                                    createElementVNode("div", _hoisted_24, [
                                       withDirectives(createElementVNode("input", {
                                         "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => selected.value = $event),
                                         type: "checkbox",
                                         value: getRowKey(i),
                                         onClick: _cache[4] || (_cache[4] = withModifiers(() => {
                                         }, ["stop"]))
-                                      }, null, 8, _hoisted_24), [
+                                      }, null, 8, _hoisted_25), [
                                         [vModelCheckbox, selected.value]
                                       ]),
                                       createElementVNode("div", null, [
@@ -4960,7 +4996,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                           j === 0 && props.stickyFirstColumn ? "bh-sticky bh-left-0 bh-bg-blue-light" : "",
                                           props.hasCheckbox && j === 0 && props.stickyFirstColumn ? "bh-left-[52px]" : "",
                                           col.cellClass ? col.cellClass : ""
-                                        ])
+                                        ]),
+                                        onContextmenu: ($event) => handleCellContextMenu($event, item, col, cellValue(item, col.field), i, j)
                                       }, [
                                         unref(slots)[col.field] ? renderSlot(_ctx.$slots, col.field, {
                                           key: 0,
@@ -4968,13 +5005,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                         }) : col.cellRenderer ? (openBlock(), createElementBlock("div", {
                                           key: 1,
                                           innerHTML: col.cellRenderer(item)
-                                        }, null, 8, _hoisted_25)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                                        }, null, 8, _hoisted_27)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                                           createTextVNode(toDisplayString(cellValue(item, col.field)), 1)
                                         ], 64))
-                                      ], 2)) : createCommentVNode("", true)
+                                      ], 42, _hoisted_26)) : createCommentVNode("", true)
                                     ], 64);
                                   }), 256))
-                                ], 10, _hoisted_22)) : createCommentVNode("", true),
+                                ], 10, _hoisted_23)) : createCommentVNode("", true),
                                 isRowExpanded(item, i) && props.hasSubtable ? (openBlock(), createElementBlock("tr", {
                                   key: 1,
                                   class: normalizeClass([
@@ -5002,8 +5039,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                         filterItems: filterItems.value
                                       })
                                     ], 4)
-                                  ], 8, _hoisted_27)
-                                ], 10, _hoisted_26)) : createCommentVNode("", true)
+                                  ], 8, _hoisted_29)
+                                ], 10, _hoisted_28)) : createCommentVNode("", true)
                               ], 64);
                             }), 128)),
                             !filterRowCount.value && currentLoader.value && _ctx.skeletonloader ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.pageSize, (i) => {
@@ -5014,7 +5051,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 createElementVNode("td", {
                                   colspan: props.columns.length + unref(extracolumnlength),
                                   class: "!bh-p-0 !bh-border-transparent"
-                                }, _hoisted_30, 8, _hoisted_28)
+                                }, _hoisted_32, 8, _hoisted_30)
                               ]);
                             }), 128)) : createCommentVNode("", true),
                             filterRowCount.value ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(props.footerRows, (item, i) => {
@@ -5025,7 +5062,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 unref(extracolumnlength) > 0 ? (openBlock(), createElementBlock("td", {
                                   key: 0,
                                   colspan: unref(extracolumnlength)
-                                }, null, 8, _hoisted_31)) : createCommentVNode("", true),
+                                }, null, 8, _hoisted_33)) : createCommentVNode("", true),
                                 (openBlock(true), createElementBlock(Fragment, null, renderList(props.columns, (col, j) => {
                                   return openBlock(), createElementBlock(Fragment, null, [
                                     !col.hide && !col.dataOnly ? (openBlock(), createElementBlock("td", {
@@ -5113,7 +5150,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "sticky-footer": props.stickyFooter
           }])
         }, [
-          createElementVNode("div", _hoisted_32, [
+          createElementVNode("div", _hoisted_34, [
             _ctx.enablefooterpagination ? renderSlot(_ctx.$slots, "footerpageinfo", {
               key: 0,
               paginationInfo: _ctx.paginationInfo,
@@ -5126,8 +5163,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               stringFormat,
               setPageSize
             }, () => [
-              createElementVNode("div", _hoisted_33, [
-                createElementVNode("span", _hoisted_34, toDisplayString(stringFormat(
+              createElementVNode("div", _hoisted_35, [
+                createElementVNode("span", _hoisted_36, toDisplayString(stringFormat(
                   props.paginationInfo,
                   filterRowCount.value ? offset.value : 0,
                   limit.value,
@@ -5142,7 +5179,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     return openBlock(), createElementBlock("option", {
                       value: option,
                       key: option
-                    }, toDisplayString(option), 9, _hoisted_35);
+                    }, toDisplayString(option), 9, _hoisted_37);
                   }), 128))
                 ], 512)), [
                   [vModelSelect, currentPageSize.value]
@@ -5158,7 +5195,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               nextPage,
               previousPage
             }, () => [
-              createElementVNode("div", _hoisted_36, [
+              createElementVNode("div", _hoisted_38, [
                 props.showFirstPage ? (openBlock(), createElementBlock("button", {
                   key: 0,
                   type: "button",
@@ -5168,7 +5205,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   props.firstArrow ? (openBlock(), createElementBlock("span", {
                     key: 0,
                     innerHTML: props.firstArrow
-                  }, null, 8, _hoisted_37)) : (openBlock(), createElementBlock("svg", _hoisted_38, _hoisted_40))
+                  }, null, 8, _hoisted_39)) : (openBlock(), createElementBlock("svg", _hoisted_40, _hoisted_42))
                 ], 2)) : createCommentVNode("", true),
                 createElementVNode("button", {
                   type: "button",
@@ -5178,7 +5215,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   props.previousArrow ? (openBlock(), createElementBlock("span", {
                     key: 0,
                     innerHTML: props.previousArrow
-                  }, null, 8, _hoisted_41)) : (openBlock(), createElementBlock("svg", _hoisted_42, _hoisted_44))
+                  }, null, 8, _hoisted_43)) : (openBlock(), createElementBlock("svg", _hoisted_44, _hoisted_46))
                 ], 2),
                 props.showNumbers ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(paging.value, (page) => {
                   return openBlock(), createElementBlock("button", {
@@ -5189,7 +5226,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       "bh-active": page === currentPage.value
                     }]),
                     onClick: ($event) => movePage(page)
-                  }, toDisplayString(page), 11, _hoisted_45);
+                  }, toDisplayString(page), 11, _hoisted_47);
                 }), 128)) : createCommentVNode("", true),
                 createElementVNode("button", {
                   type: "button",
@@ -5199,7 +5236,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   props.nextArrow ? (openBlock(), createElementBlock("span", {
                     key: 0,
                     innerHTML: props.nextArrow
-                  }, null, 8, _hoisted_46)) : (openBlock(), createElementBlock("svg", _hoisted_47, _hoisted_49))
+                  }, null, 8, _hoisted_48)) : (openBlock(), createElementBlock("svg", _hoisted_49, _hoisted_51))
                 ], 2),
                 props.showLastPage ? (openBlock(), createElementBlock("button", {
                   key: 2,
@@ -5210,7 +5247,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   props.lastArrow ? (openBlock(), createElementBlock("span", {
                     key: 0,
                     innerHTML: props.lastArrow
-                  }, null, 8, _hoisted_50)) : (openBlock(), createElementBlock("svg", _hoisted_51, _hoisted_53))
+                  }, null, 8, _hoisted_52)) : (openBlock(), createElementBlock("svg", _hoisted_53, _hoisted_55))
                 ], 2)) : createCommentVNode("", true)
               ])
             ]) : createCommentVNode("", true)

package/package.json

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