@dolusoft/vue3-datatable 1.8.42 → 1.8.44

package/dist/vue3-datatable.js

@@ -1,4 +1,4 @@
-import { isRef, onMounted, nextTick, getCurrentScope, onScopeDispose, unref, getCurrentInstance, computed, ref, watch, useSlots, onBeforeUnmount, provide, openBlock, createBlock, resolveDynamicComponent, inject, createElementBlock, normalizeStyle, renderSlot, h as h$2, defineComponent, toRef, Fragment, withModifiers, createVNode, pushScopeId, popScopeId, normalizeClass, normalizeProps, guardReactiveProps, withScopeId, resolveComponent, withKeys, createElementVNode, createCommentVNode, mergeProps, withCtx, toDisplayString, withDirectives, renderList, vModelSelect, createTextVNode, vModelText, vShow, onUnmounted, createSlots, vModelCheckbox } from "vue";
+import { isRef, onMounted, nextTick, getCurrentScope, onScopeDispose, unref, getCurrentInstance, computed, ref, watch, useSlots, onBeforeUnmount, provide, openBlock, createBlock, resolveDynamicComponent, inject, createElementBlock, normalizeStyle, renderSlot, h as h$2, defineComponent, toRef, Fragment, withModifiers, createVNode, pushScopeId, popScopeId, normalizeClass, normalizeProps, guardReactiveProps, withScopeId, resolveComponent, withKeys, createElementVNode, createCommentVNode, mergeProps, withCtx, toDisplayString, withDirectives, renderList, vModelSelect, createTextVNode, vModelText, vShow, onUpdated, onUnmounted, createSlots, vModelCheckbox } from "vue";
 function tryOnScopeDispose(fn) {
   if (getCurrentScope()) {
     onScopeDispose(fn);
@@ -2378,7 +2378,7 @@ const Icon = defineComponent({
 const __default__$5 = {
   name: "buttonExpand"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...__default__$5,
   props: {
     item: { default: [] },
@@ -2468,11 +2468,11 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-4d01a2fa"]]);
+const ButtonExpand = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-4d01a2fa"]]);
 const __default__$4 = {
   name: "ButtonRightPanel"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...__default__$4,
   props: {
     item: { default: [] }
@@ -2494,7 +2494,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-d739c6bf"]]);
+const ButtonRightPanel = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-d739c6bf"]]);
 const sides = ["top", "right", "bottom", "left"];
 const alignments = ["start", "end"];
 const placements = /* @__PURE__ */ sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -4863,11 +4863,11 @@ defineComponent({
   }
 });
 const Vt = Ce;
-const _hoisted_1$6 = { class: "bh-text-[13px] bh-font-normal bh-rounded bh-overflow-hidden" };
+const _hoisted_1$7 = { class: "bh-text-[13px] bh-font-normal bh-rounded bh-overflow-hidden" };
 const __default__$3 = {
   name: "columnFilter"
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   ...__default__$3,
   props: ["column", "columnFilterLang"],
   emits: ["close", "filterChange"],
@@ -4892,7 +4892,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         ref: menuRef,
         class: "bh-filter-menu bh-absolute bh-z-[1] bh-bg-white dark:bh-bg-gray-800 bh-shadow-md bh-rounded-md bh-top-full bh-right-0 bh-w-32 bh-mt-1 bh-border bh-border-solid bh-border-gray-200 dark:bh-border-gray-600"
       }, [
-        createElementVNode("div", _hoisted_1$6, [
+        createElementVNode("div", _hoisted_1$7, [
           createElementVNode("button", {
             type: "button",
             class: normalizeClass({ active: props.column.condition === "" }),
@@ -5055,10 +5055,10 @@ const FILTER_CONDITIONS = {
     { value: "NotEqual", label: "Not Equal", icon: "≠" }
   ]
 };
-const _hoisted_1$5 = { class: "bh-p-2" };
-const _hoisted_2$5 = { class: "bh-mb-2" };
-const _hoisted_3$5 = /* @__PURE__ */ createElementVNode("label", { class: "bh-text-xs bh-font-medium bh-text-gray-600 dark:bh-text-gray-400 bh-block bh-mb-1" }, " Filter Condition ", -1);
-const _hoisted_4$2 = ["value"];
+const _hoisted_1$6 = { class: "bh-p-2" };
+const _hoisted_2$6 = { class: "bh-mb-2" };
+const _hoisted_3$6 = /* @__PURE__ */ createElementVNode("label", { class: "bh-text-xs bh-font-medium bh-text-gray-600 dark:bh-text-gray-400 bh-block bh-mb-1" }, " Filter Condition ", -1);
+const _hoisted_4$3 = ["value"];
 const _hoisted_5$2 = {
   key: 0,
   class: "bh-border-t bh-border-gray-200 dark:bh-border-gray-600 bh-pt-2 bh-mt-2"
@@ -5068,7 +5068,7 @@ const _hoisted_7$2 = { class: "bh-flex bh-flex-col bh-gap-1" };
 const __default__$2 = {
   name: "columnFilterNew"
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...__default__$2,
   props: [
     "column",
@@ -5133,9 +5133,9 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         ref: dropdownRef,
         class: "bh-filter-dropdown-content bh-min-w-[220px]"
       }, [
-        createElementVNode("div", _hoisted_1$5, [
-          createElementVNode("div", _hoisted_2$5, [
-            _hoisted_3$5,
+        createElementVNode("div", _hoisted_1$6, [
+          createElementVNode("div", _hoisted_2$6, [
+            _hoisted_3$6,
             withDirectives(createElementVNode("select", {
               ref_key: "selectRef",
               ref: selectRef,
@@ -5149,7 +5149,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 return openBlock(), createElementBlock("option", {
                   key: cond.value,
                   value: cond.value
-                }, toDisplayString(cond.icon ? cond.icon + " " : "") + toDisplayString(getTranslatedLabel(cond)), 9, _hoisted_4$2);
+                }, toDisplayString(cond.icon ? cond.icon + " " : "") + toDisplayString(getTranslatedLabel(cond)), 9, _hoisted_4$3);
               }), 128))
             ], 544), [
               [vModelSelect, selectedCondition.value]
@@ -5188,13 +5188,13 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$4 = {};
-const _hoisted_1$4 = {
+const _sfc_main$5 = {};
+const _hoisted_1$5 = {
   version: "1.1",
   viewBox: "0 0 17 12",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("g", {
+const _hoisted_2$5 = /* @__PURE__ */ createElementVNode("g", {
   fill: "none",
   "fill-rule": "evenodd"
 }, [
@@ -5206,15 +5206,15 @@ const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("g", {
     /* @__PURE__ */ createElementVNode("path", { d: "m25.576 11.414c0.56558 0.55188 0.56558 1.4439 0 1.9961l-9.404 9.176c-0.28213 0.27529-0.65247 0.41385-1.0228 0.41385-0.37034 0-0.74068-0.13855-1.0228-0.41385l-4.7019-4.588c-0.56584-0.55188-0.56584-1.4442 0-1.9961 0.56558-0.55214 1.4798-0.55214 2.0456 0l3.679 3.5899 8.3812-8.1779c0.56558-0.55214 1.4798-0.55214 2.0456 0z" })
   ])
 ], -1);
-const _hoisted_3$4 = [
-  _hoisted_2$4
+const _hoisted_3$5 = [
+  _hoisted_2$5
 ];
 function _sfc_render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$4, _hoisted_3$4);
+  return openBlock(), createElementBlock("svg", _hoisted_1$5, _hoisted_3$5);
 }
-const iconCheck = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$2]]);
-const _sfc_main$3 = {};
-const _hoisted_1$3 = {
+const iconCheck = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$2]]);
+const _sfc_main$4 = {};
+const _hoisted_1$4 = {
   viewBox: "0 0 24 24",
   width: "24",
   height: "24",
@@ -5225,21 +5225,21 @@ const _hoisted_1$3 = {
   "stroke-linejoin": "round",
   class: "css-i6dzq1"
 };
-const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("line", {
+const _hoisted_2$4 = /* @__PURE__ */ createElementVNode("line", {
   x1: "5",
   y1: "12",
   x2: "19",
   y2: "12"
 }, null, -1);
-const _hoisted_3$3 = [
-  _hoisted_2$3
+const _hoisted_3$4 = [
+  _hoisted_2$4
 ];
 function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, _hoisted_3$4);
 }
-const iconDash = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$1]]);
-const _sfc_main$2 = {};
-const _hoisted_1$2 = {
+const iconDash = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$1]]);
+const _sfc_main$3 = {};
+const _hoisted_1$3 = {
   viewBox: "0 0 24 24",
   width: "24",
   height: "24",
@@ -5250,21 +5250,21 @@ const _hoisted_1$2 = {
   "stroke-linejoin": "round",
   class: "css-i6dzq1"
 };
-const _hoisted_2$2 = /* @__PURE__ */ createElementVNode("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }, null, -1);
-const _hoisted_3$2 = [
-  _hoisted_2$2
+const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }, null, -1);
+const _hoisted_3$3 = [
+  _hoisted_2$3
 ];
 function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$2, _hoisted_3$2);
+  return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$3);
 }
-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 = {
+const iconFilter = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render]]);
+const _hoisted_1$2 = { key: "hdrrow" };
+const _hoisted_2$2 = { class: "bh-checkbox" };
+const _hoisted_3$2 = {
   key: 0,
   class: "bh-filter bh-flex bh-justify-center"
 };
-const _hoisted_4$1 = ["disabled"];
+const _hoisted_4$2 = ["disabled"];
 const _hoisted_5$1 = /* @__PURE__ */ createElementVNode("svg", {
   width: "14",
   height: "14",
@@ -5397,7 +5397,7 @@ const _hoisted_36$1 = ["onClick"];
 const __default__$1 = {
   name: "columnHeader"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: [
     "all",
@@ -5672,7 +5672,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_VDropdown = resolveComponent("VDropdown");
-      return openBlock(), createElementBlock("tr", _hoisted_1$1, [
+      return openBlock(), createElementBlock("tr", _hoisted_1$2, [
         props.all.hasCheckbox ? (openBlock(), createElementBlock("th", {
           key: "chkall",
           style: normalizeStyle({
@@ -5685,7 +5685,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             "bh-left-0": props.all.stickyFirstColumn
           })
         }, [
-          createElementVNode("div", _hoisted_2$1, [
+          createElementVNode("div", _hoisted_2$2, [
             createElementVNode("input", {
               ref_key: "selectedAll",
               ref: selectedAll,
@@ -5700,7 +5700,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               createVNode(iconDash, { class: "intermediate" })
             ])
           ]),
-          props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "checkbox" ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+          props.all.columnFilter && !props.isFooter && clearButtonLocation.value === "checkbox" ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
             createVNode(unref(Vt), {
               placement: "top",
               distance: 6
@@ -5717,7 +5717,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                   }]),
                   disabled: !hasAnyActiveFilterLocal.value,
                   onClick: withModifiers(handleClearAllFilters, ["stop"])
-                }, _hoisted_6$1, 10, _hoisted_4$1)) : createCommentVNode("", true)
+                }, _hoisted_6$1, 10, _hoisted_4$2)) : createCommentVNode("", true)
               ]),
               _: 1
             })
@@ -5973,7 +5973,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                       }])
                     }, null, 8, ["class"])
                   ], 10, _hoisted_35$1)) : createCommentVNode("", true),
-                  !props.all.useNewColumnFilter ? withDirectives((openBlock(), createBlock(_sfc_main$6, {
+                  !props.all.useNewColumnFilter ? withDirectives((openBlock(), createBlock(_sfc_main$7, {
                     key: 3,
                     column: col,
                     type: col.type,
@@ -5993,7 +5993,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                     onApplyHide: _cache[8] || (_cache[8] = ($event) => emit("toggleFilterMenu", null))
                   }, {
                     popper: withCtx(() => [
-                      createVNode(_sfc_main$5, {
+                      createVNode(_sfc_main$6, {
                         column: col,
                         columnFilterLang: props.columnFilterLang,
                         currentSortColumn: props.currentSortColumn,
@@ -6035,6 +6035,111 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$1 = ["innerHTML"];
+const _hoisted_2$1 = { class: "bh-tooltip-content" };
+const _hoisted_3$1 = ["innerHTML"];
+const _hoisted_4$1 = ["innerHTML"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "truncated-cell",
+  props: {
+    value: {},
+    truncate: { type: Boolean },
+    maxWidth: {},
+    truncateLines: {},
+    showTooltip: { type: Boolean },
+    html: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const cellRef = ref(null);
+    const isOverflowing = ref(false);
+    const checkOverflow = () => {
+      if (cellRef.value && props.truncate) {
+        const el = cellRef.value;
+        if (props.truncateLines === 1) {
+          isOverflowing.value = el.scrollWidth > el.clientWidth;
+        } else {
+          isOverflowing.value = el.scrollHeight > el.clientHeight;
+        }
+      } else {
+        isOverflowing.value = false;
+      }
+    };
+    onMounted(checkOverflow);
+    onUpdated(checkOverflow);
+    const tooltipContent = computed(() => {
+      return String(props.value ?? "");
+    });
+    const shouldShowTooltip = computed(() => {
+      return props.truncate && props.showTooltip && isOverflowing.value;
+    });
+    const cellStyle = computed(() => {
+      if (!props.truncate) return {};
+      const style = {};
+      if (props.maxWidth) {
+        style.maxWidth = props.maxWidth;
+      }
+      if (props.truncateLines > 1) {
+        style["-webkit-line-clamp"] = props.truncateLines;
+      }
+      return style;
+    });
+    return (_ctx, _cache) => {
+      return shouldShowTooltip.value ? (openBlock(), createBlock(unref(Vt), {
+        key: 0,
+        placement: "top",
+        distance: 6,
+        delay: { show: 300, hide: 100 }
+      }, {
+        popper: withCtx(() => [
+          createElementVNode("div", _hoisted_2$1, [
+            _ctx.html ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              innerHTML: tooltipContent.value
+            }, null, 8, _hoisted_3$1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createTextVNode(toDisplayString(tooltipContent.value), 1)
+            ], 64))
+          ])
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", {
+            ref_key: "cellRef",
+            ref: cellRef,
+            class: normalizeClass(["bh-truncate-cell", {
+              "bh-truncate-single": _ctx.truncateLines === 1,
+              "bh-truncate-multi": _ctx.truncateLines > 1
+            }]),
+            style: normalizeStyle(cellStyle.value)
+          }, [
+            _ctx.html ? (openBlock(), createElementBlock("span", {
+              key: 0,
+              innerHTML: _ctx.value
+            }, null, 8, _hoisted_1$1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              createTextVNode(toDisplayString(_ctx.value), 1)
+            ], 64))
+          ], 6)
+        ]),
+        _: 1
+      })) : (openBlock(), createElementBlock("div", {
+        key: 1,
+        ref_key: "cellRef",
+        ref: cellRef,
+        class: normalizeClass(["bh-truncate-cell", {
+          "bh-truncate-single": _ctx.truncate && _ctx.truncateLines === 1,
+          "bh-truncate-multi": _ctx.truncate && _ctx.truncateLines > 1
+        }]),
+        style: normalizeStyle(cellStyle.value)
+      }, [
+        _ctx.html ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          innerHTML: _ctx.value
+        }, null, 8, _hoisted_4$1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createTextVNode(toDisplayString(_ctx.value), 1)
+        ], 64))
+      ], 6));
+    };
+  }
+});
 const _hoisted_1 = { class: "bh-datatable bh-antialiased bh-relative bh-text-black bh-text-sm bh-font-normal" };
 const _hoisted_2 = { class: "bh-flex bh-h-full" };
 const _hoisted_3 = /* @__PURE__ */ createElementVNode("span", null, "##Left Menu Slot##", -1);
@@ -6063,102 +6168,100 @@ const _hoisted_11 = ["onClick"];
 const _hoisted_12 = { class: "bh-checkbox" };
 const _hoisted_13 = ["value"];
 const _hoisted_14 = ["onContextmenu"];
-const _hoisted_15 = ["innerHTML"];
-const _hoisted_16 = ["onClick"];
+const _hoisted_15 = ["onClick"];
+const _hoisted_16 = ["colspan"];
 const _hoisted_17 = ["colspan"];
-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_18 = /* @__PURE__ */ createElementVNode("div", { class: "bh-skeleton-box bh-h-8" }, null, -1);
+const _hoisted_19 = [
+  _hoisted_18
 ];
-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_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 = ["onContextmenu"];
+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_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 = {
+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 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_41 = /* @__PURE__ */ createElementVNode("g", {
+const _hoisted_39 = /* @__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_42 = [
-  _hoisted_41
+const _hoisted_40 = [
+  _hoisted_39
 ];
-const _hoisted_43 = ["innerHTML"];
-const _hoisted_44 = {
+const _hoisted_41 = ["innerHTML"];
+const _hoisted_42 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_45 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_43 = /* @__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_46 = [
-  _hoisted_45
+const _hoisted_44 = [
+  _hoisted_43
 ];
-const _hoisted_47 = ["onClick"];
-const _hoisted_48 = ["innerHTML"];
-const _hoisted_49 = {
+const _hoisted_45 = ["onClick"];
+const _hoisted_46 = ["innerHTML"];
+const _hoisted_47 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_50 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_48 = /* @__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_51 = [
-  _hoisted_50
+const _hoisted_49 = [
+  _hoisted_48
 ];
-const _hoisted_52 = ["innerHTML"];
-const _hoisted_53 = {
+const _hoisted_50 = ["innerHTML"];
+const _hoisted_51 = {
   key: 1,
   "aria-hidden": "true",
   width: "14",
   height: "14",
   viewBox: "0 0 16 16"
 };
-const _hoisted_54 = /* @__PURE__ */ createElementVNode("g", {
+const _hoisted_52 = /* @__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_55 = [
-  _hoisted_54
+const _hoisted_53 = [
+  _hoisted_52
 ];
 const __default__ = {
   name: "Vue3Datatable"
@@ -6233,7 +6336,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     footerOffset: { default: 0 },
     tableRightOffset: { default: 0 },
     tableLeftOffset: { default: 5 },
-    initialLeftMenuState: { type: Boolean, default: void 0 }
+    initialLeftMenuState: { type: Boolean, default: void 0 },
+    truncate: { type: Boolean, default: true },
+    defaultMaxWidth: { default: "400px" },
+    truncateLines: { default: 1 }
   },
   emits: [
     "change",
@@ -6266,6 +6372,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       item.search = item.search !== void 0 ? item.search : true;
       item.sort = item.sort !== void 0 ? item.sort : true;
       item.html = item.html !== void 0 ? item.html : false;
+      item.truncate = item.truncate !== void 0 ? item.truncate : props.truncate;
+      item.maxWidth = item.maxWidth || props.defaultMaxWidth;
+      item.truncateLines = item.truncateLines || props.truncateLines;
+      item.showTooltip = item.showTooltip !== void 0 ? item.showTooltip : true;
       if (item.value !== void 0 && item.value !== null && item.value !== "") {
         item.condition = item.condition || "Equal";
       } else {
@@ -7124,7 +7234,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     "bh-sticky bh-top-0 bh-z-10": props.stickyHeader
                                   })
                                 }, [
-                                  createVNode(_sfc_main$1, {
+                                  createVNode(_sfc_main$2, {
                                     ref_key: "columnHeaderRef",
                                     ref: columnHeaderRef,
                                     all: props,
@@ -7233,18 +7343,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                                 props.hasCheckbox && j === 0 && props.stickyFirstColumn ? "bh-left-[52px]" : "",
                                                 col.cellClass ? col.cellClass : ""
                                               ]),
+                                              style: normalizeStyle({ maxWidth: col.truncate !== false ? col.maxWidth : void 0 }),
                                               onContextmenu: ($event) => handleCellContextMenu($event, item, col, cellValue(item, col.field), i2, j)
                                             }, [
                                               unref(slots)[col.field] ? renderSlot(_ctx.$slots, col.field, {
                                                 key: 0,
                                                 value: item
-                                              }) : col.cellRenderer ? (openBlock(), createElementBlock("div", {
+                                              }) : col.cellRenderer ? (openBlock(), createBlock(_sfc_main$1, {
                                                 key: 1,
-                                                innerHTML: col.cellRenderer(item)
-                                              }, null, 8, _hoisted_15)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                                                createTextVNode(toDisplayString(cellValue(item, col.field)), 1)
-                                              ], 64))
-                                            ], 42, _hoisted_14)) : createCommentVNode("", true)
+                                                value: col.cellRenderer(item),
+                                                truncate: col.truncate !== false,
+                                                "max-width": col.maxWidth,
+                                                "truncate-lines": col.truncateLines || 1,
+                                                "show-tooltip": col.showTooltip !== false,
+                                                html: true
+                                              }, null, 8, ["value", "truncate", "max-width", "truncate-lines", "show-tooltip"])) : (openBlock(), createBlock(_sfc_main$1, {
+                                                key: 2,
+                                                value: cellValue(item, col.field),
+                                                truncate: col.truncate !== false,
+                                                "max-width": col.maxWidth,
+                                                "truncate-lines": col.truncateLines || 1,
+                                                "show-tooltip": col.showTooltip !== false,
+                                                html: col.html
+                                              }, null, 8, ["value", "truncate", "max-width", "truncate-lines", "show-tooltip", "html"]))
+                                            ], 46, _hoisted_14)) : createCommentVNode("", true)
                                           ], 64);
                                         }), 256))
                                       ], 10, _hoisted_11)) : createCommentVNode("", true),
@@ -7264,8 +7386,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                             rowIndex: i2,
                                             filterItems: filterItems.value
                                           })
-                                        ], 8, _hoisted_17)
-                                      ], 10, _hoisted_16)) : createCommentVNode("", true)
+                                        ], 8, _hoisted_16)
+                                      ], 10, _hoisted_15)) : createCommentVNode("", true)
                                     ], 64);
                                   }), 128)),
                                   !filterRowCount.value && currentLoader.value && _ctx.skeletonloader ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.pageSize, (i2) => {
@@ -7276,7 +7398,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                       createElementVNode("td", {
                                         colspan: props.columns.length + unref(extracolumnlength),
                                         class: "!bh-p-0 !bh-border-transparent"
-                                      }, _hoisted_20, 8, _hoisted_18)
+                                      }, _hoisted_19, 8, _hoisted_17)
                                     ]);
                                   }), 128)) : createCommentVNode("", true),
                                   filterRowCount.value ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(props.footerRows, (item, i2) => {
@@ -7287,7 +7409,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                       unref(extracolumnlength) > 0 ? (openBlock(), createElementBlock("td", {
                                         key: 0,
                                         colspan: unref(extracolumnlength)
-                                      }, null, 8, _hoisted_21)) : createCommentVNode("", true),
+                                      }, null, 8, _hoisted_20)) : createCommentVNode("", true),
                                       (openBlock(true), createElementBlock(Fragment, null, renderList(props.columns, (col, j) => {
                                         return openBlock(), createElementBlock(Fragment, null, [
                                           !col.hide && !col.dataOnly ? (openBlock(), createElementBlock("td", {
@@ -7297,12 +7419,19 @@ 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 : ""
-                                            ])
+                                            ]),
+                                            style: normalizeStyle({ maxWidth: col.truncate !== false ? col.maxWidth : void 0 })
                                           }, [
-                                            item.cells.find((x2) => x2.field == col.field) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                                              createTextVNode(toDisplayString(item.cells.find((x2) => x2.field == col.field).text), 1)
-                                            ], 64)) : createCommentVNode("", true)
-                                          ], 2)) : createCommentVNode("", true)
+                                            item.cells.find((x2) => x2.field == col.field) ? (openBlock(), createBlock(_sfc_main$1, {
+                                              key: 0,
+                                              value: item.cells.find((x2) => x2.field == col.field).text,
+                                              truncate: col.truncate !== false,
+                                              "max-width": col.maxWidth,
+                                              "truncate-lines": col.truncateLines || 1,
+                                              "show-tooltip": col.showTooltip !== false,
+                                              html: false
+                                            }, null, 8, ["value", "truncate", "max-width", "truncate-lines", "show-tooltip"])) : createCommentVNode("", true)
+                                          ], 6)) : createCommentVNode("", true)
                                         ], 64);
                                       }), 256))
                                     ]);
@@ -7314,7 +7443,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                     "bh-sticky bh-bottom-0": props.stickyHeader
                                   })
                                 }, [
-                                  createVNode(_sfc_main$1, {
+                                  createVNode(_sfc_main$2, {
                                     all: props,
                                     currentSortColumn: currentSortColumn.value,
                                     currentSortDirection: currentSortDirection.value,
@@ -7381,7 +7510,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         style: normalizeStyle({ height: _ctx.headerAreaHeight, "margin-bottom": "10px" })
                       }, [
                         renderSlot(_ctx.$slots, "tableHeaderArea", {}, () => [
-                          _hoisted_22
+                          _hoisted_21
                         ])
                       ], 4)) : createCommentVNode("", true),
                       renderSlot(_ctx.$slots, "tableactionheader"),
@@ -7400,7 +7529,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               "bh-sticky bh-top-0 bh-z-10": props.stickyHeader
                             })
                           }, [
-                            createVNode(_sfc_main$1, {
+                            createVNode(_sfc_main$2, {
                               all: props,
                               expandedrows: expandedrows.value,
                               currentSortColumn: currentSortColumn.value,
@@ -7451,14 +7580,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                       "bh-sticky bh-left-0 bh-bg-blue-light": props.stickyFirstColumn
                                     })
                                   }, [
-                                    createElementVNode("div", _hoisted_24, [
+                                    createElementVNode("div", _hoisted_23, [
                                       withDirectives(createElementVNode("input", {
                                         "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => selected.value = $event),
                                         type: "checkbox",
                                         value: getRowKey(i2),
                                         onClick: _cache[4] || (_cache[4] = withModifiers(() => {
                                         }, ["stop"]))
-                                      }, null, 8, _hoisted_25), [
+                                      }, null, 8, _hoisted_24), [
                                         [vModelCheckbox, selected.value]
                                       ]),
                                       createElementVNode("div", null, [
@@ -7507,21 +7636,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                           props.hasCheckbox && j === 0 && props.stickyFirstColumn ? "bh-left-[52px]" : "",
                                           col.cellClass ? col.cellClass : ""
                                         ]),
+                                        style: normalizeStyle({ maxWidth: col.truncate !== false ? col.maxWidth : void 0 }),
                                         onContextmenu: ($event) => handleCellContextMenu($event, item, col, cellValue(item, col.field), i2, j)
                                       }, [
                                         unref(slots)[col.field] ? renderSlot(_ctx.$slots, col.field, {
                                           key: 0,
                                           value: item
-                                        }) : col.cellRenderer ? (openBlock(), createElementBlock("div", {
+                                        }) : col.cellRenderer ? (openBlock(), createBlock(_sfc_main$1, {
                                           key: 1,
-                                          innerHTML: col.cellRenderer(item)
-                                        }, null, 8, _hoisted_27)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-                                          createTextVNode(toDisplayString(cellValue(item, col.field)), 1)
-                                        ], 64))
-                                      ], 42, _hoisted_26)) : createCommentVNode("", true)
+                                          value: col.cellRenderer(item),
+                                          truncate: col.truncate !== false,
+                                          "max-width": col.maxWidth,
+                                          "truncate-lines": col.truncateLines || 1,
+                                          "show-tooltip": col.showTooltip !== false,
+                                          html: true
+                                        }, null, 8, ["value", "truncate", "max-width", "truncate-lines", "show-tooltip"])) : (openBlock(), createBlock(_sfc_main$1, {
+                                          key: 2,
+                                          value: cellValue(item, col.field),
+                                          truncate: col.truncate !== false,
+                                          "max-width": col.maxWidth,
+                                          "truncate-lines": col.truncateLines || 1,
+                                          "show-tooltip": col.showTooltip !== false,
+                                          html: col.html
+                                        }, null, 8, ["value", "truncate", "max-width", "truncate-lines", "show-tooltip", "html"]))
+                                      ], 46, _hoisted_25)) : createCommentVNode("", true)
                                     ], 64);
                                   }), 256))
-                                ], 10, _hoisted_23)) : createCommentVNode("", true),
+                                ], 10, _hoisted_22)) : createCommentVNode("", true),
                                 isRowExpanded(item, i2) && props.hasSubtable ? (openBlock(), createElementBlock("tr", {
                                   key: 1,
                                   class: normalizeClass([
@@ -7549,8 +7690,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                         filterItems: filterItems.value
                                       })
                                     ], 4)
-                                  ], 8, _hoisted_29)
-                                ], 10, _hoisted_28)) : createCommentVNode("", true)
+                                  ], 8, _hoisted_27)
+                                ], 10, _hoisted_26)) : createCommentVNode("", true)
                               ], 64);
                             }), 128)),
                             !filterRowCount.value && currentLoader.value && _ctx.skeletonloader ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.pageSize, (i2) => {
@@ -7561,7 +7702,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 createElementVNode("td", {
                                   colspan: props.columns.length + unref(extracolumnlength),
                                   class: "!bh-p-0 !bh-border-transparent"
-                                }, _hoisted_32, 8, _hoisted_30)
+                                }, _hoisted_30, 8, _hoisted_28)
                               ]);
                             }), 128)) : createCommentVNode("", true),
                             filterRowCount.value ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(props.footerRows, (item, i2) => {
@@ -7572,7 +7713,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                                 unref(extracolumnlength) > 0 ? (openBlock(), createElementBlock("td", {
                                   key: 0,
                                   colspan: unref(extracolumnlength)
-                                }, null, 8, _hoisted_33)) : createCommentVNode("", true),
+                                }, null, 8, _hoisted_31)) : createCommentVNode("", true),
                                 (openBlock(true), createElementBlock(Fragment, null, renderList(props.columns, (col, j) => {
                                   return openBlock(), createElementBlock(Fragment, null, [
                                     !col.hide && !col.dataOnly ? (openBlock(), createElementBlock("td", {
@@ -7582,12 +7723,19 @@ 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 : ""
-                                      ])
+                                      ]),
+                                      style: normalizeStyle({ maxWidth: col.truncate !== false ? col.maxWidth : void 0 })
                                     }, [
-                                      item.cells.find((x2) => x2.field == col.field) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                                        createTextVNode(toDisplayString(item.cells.find((x2) => x2.field == col.field).text), 1)
-                                      ], 64)) : createCommentVNode("", true)
-                                    ], 2)) : createCommentVNode("", true)
+                                      item.cells.find((x2) => x2.field == col.field) ? (openBlock(), createBlock(_sfc_main$1, {
+                                        key: 0,
+                                        value: item.cells.find((x2) => x2.field == col.field).text,
+                                        truncate: col.truncate !== false,
+                                        "max-width": col.maxWidth,
+                                        "truncate-lines": col.truncateLines || 1,
+                                        "show-tooltip": col.showTooltip !== false,
+                                        html: false
+                                      }, null, 8, ["value", "truncate", "max-width", "truncate-lines", "show-tooltip"])) : createCommentVNode("", true)
+                                    ], 6)) : createCommentVNode("", true)
                                   ], 64);
                                 }), 256))
                               ]);
@@ -7597,7 +7745,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             key: 0,
                             class: normalizeClass({ "bh-sticky bh-bottom-0": props.stickyHeader })
                           }, [
-                            createVNode(_sfc_main$1, {
+                            createVNode(_sfc_main$2, {
                               all: props,
                               currentSortColumn: currentSortColumn.value,
                               currentSortDirection: currentSortDirection.value,
@@ -7660,7 +7808,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "sticky-footer": props.stickyFooter
           }])
         }, [
-          createElementVNode("div", _hoisted_34, [
+          createElementVNode("div", _hoisted_32, [
             _ctx.enablefooterpagination ? renderSlot(_ctx.$slots, "footerpageinfo", {
               key: 0,
               paginationInfo: _ctx.paginationInfo,
@@ -7673,8 +7821,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               stringFormat,
               setPageSize
             }, () => [
-              createElementVNode("div", _hoisted_35, [
-                createElementVNode("span", _hoisted_36, toDisplayString(stringFormat(
+              createElementVNode("div", _hoisted_33, [
+                createElementVNode("span", _hoisted_34, toDisplayString(stringFormat(
                   props.paginationInfo,
                   filterRowCount.value ? offset2.value : 0,
                   limit.value,
@@ -7689,7 +7837,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     return openBlock(), createElementBlock("option", {
                       value: option,
                       key: option
-                    }, toDisplayString(option), 9, _hoisted_37);
+                    }, toDisplayString(option), 9, _hoisted_35);
                   }), 128))
                 ], 512)), [
                   [vModelSelect, currentPageSize.value]
@@ -7705,7 +7853,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               nextPage,
               previousPage
             }, () => [
-              createElementVNode("div", _hoisted_38, [
+              createElementVNode("div", _hoisted_36, [
                 props.showFirstPage ? (openBlock(), createElementBlock("button", {
                   key: 0,
                   type: "button",
@@ -7715,7 +7863,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   props.firstArrow ? (openBlock(), createElementBlock("span", {
                     key: 0,
                     innerHTML: props.firstArrow
-                  }, null, 8, _hoisted_39)) : (openBlock(), createElementBlock("svg", _hoisted_40, _hoisted_42))
+                  }, null, 8, _hoisted_37)) : (openBlock(), createElementBlock("svg", _hoisted_38, _hoisted_40))
                 ], 2)) : createCommentVNode("", true),
                 createElementVNode("button", {
                   type: "button",
@@ -7725,7 +7873,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   props.previousArrow ? (openBlock(), createElementBlock("span", {
                     key: 0,
                     innerHTML: props.previousArrow
-                  }, null, 8, _hoisted_43)) : (openBlock(), createElementBlock("svg", _hoisted_44, _hoisted_46))
+                  }, null, 8, _hoisted_41)) : (openBlock(), createElementBlock("svg", _hoisted_42, _hoisted_44))
                 ], 2),
                 props.showNumbers ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(paging.value, (page) => {
                   return openBlock(), createElementBlock("button", {
@@ -7736,7 +7884,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       "bh-active": page === currentPage.value
                     }]),
                     onClick: ($event) => movePage(page)
-                  }, toDisplayString(page), 11, _hoisted_47);
+                  }, toDisplayString(page), 11, _hoisted_45);
                 }), 128)) : createCommentVNode("", true),
                 createElementVNode("button", {
                   type: "button",
@@ -7746,7 +7894,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   props.nextArrow ? (openBlock(), createElementBlock("span", {
                     key: 0,
                     innerHTML: props.nextArrow
-                  }, null, 8, _hoisted_48)) : (openBlock(), createElementBlock("svg", _hoisted_49, _hoisted_51))
+                  }, null, 8, _hoisted_46)) : (openBlock(), createElementBlock("svg", _hoisted_47, _hoisted_49))
                 ], 2),
                 props.showLastPage ? (openBlock(), createElementBlock("button", {
                   key: 2,
@@ -7757,7 +7905,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   props.lastArrow ? (openBlock(), createElementBlock("span", {
                     key: 0,
                     innerHTML: props.lastArrow
-                  }, null, 8, _hoisted_52)) : (openBlock(), createElementBlock("svg", _hoisted_53, _hoisted_55))
+                  }, null, 8, _hoisted_50)) : (openBlock(), createElementBlock("svg", _hoisted_51, _hoisted_53))
                 ], 2)) : createCommentVNode("", true)
               ])
             ]) : createCommentVNode("", true)