@fewangsit/wangsvue 1.5.219-alpha.0 → 1.5.219-alpha.2

package/datatable/index.es.js

@@ -1,42 +1,68 @@
-import { defineComponent as gt, mergeModels as Fa, useModel as yt, computed as F, inject as xa, ref as I, shallowRef as R, onMounted as ht, onUnmounted as mt, watch as we, createElementBlock as c, openBlock as d, normalizeProps as se, guardReactiveProps as ie, unref as r, createElementVNode as x, withDirectives as wt, createCommentVNode as y, createVNode as _, createBlock as E, mergeProps as p, withCtx as de, Fragment as P, renderList as Z, createTextVNode as ue, toDisplayString as H, withModifiers as S, normalizeClass as ke, resolveDynamicComponent as kt, toHandlers as Ct, vShow as Rt, nextTick as Ha } from "vue";
-import { s as Dt } from "../vendor/simplebar-vue/dist/simplebar-vue.esm.es.js";
-import { e as m } from "../event-bus/index.es.js";
-import { u as Tt } from "../plugins/WangsVue.es.js";
-import { u as _t } from "../utils/baseToast.util.es.js";
-import { a as Pt } from "../utils/date.util.es.js";
-import { n as Kt, e as Et } from "../utils/exportToExcel.util.es.js";
-import { m as St } from "../utils/mergePropsWithDefaults.util.es.js";
-import { s as ce, g as B } from "../utils/object.util.es.js";
-import { u as Nt, _ as At } from "../apiitem/index.es.js";
-import { s as Ft } from "../vendor/primevue/paginator/paginator.esm.es.js";
-import { O as Ba } from "../vendor/primevue/utils/utils.esm.es.js";
-import { _ as Be } from "../checkbox/index.es.js";
-import { _ as Ce } from "../animation/index.es.js";
-import { _ as $e } from "../button/index.es.js";
-import { _ as xt } from "../customcolumn/index.es.js";
-import { _ as Ht } from "../dialogconfirm/index.es.js";
-import { _ as Q } from "../icon/index.es.js";
-import { _ as Bt } from "../menu/index.es.js";
-import { _ as $t } from "../toast/index.es.js";
-import { _ as Mt } from "../toggleswitch/index.es.js";
-import { _ as Ot } from "../multirow/index.es.js";
+import { defineComponent, mergeModels, useModel, computed, inject, ref, shallowRef, onMounted, onUnmounted, watch, createElementBlock, openBlock, normalizeProps, guardReactiveProps, unref, createElementVNode, withDirectives, createCommentVNode, createVNode, createBlock, mergeProps, withCtx, Fragment, renderList, createTextVNode, toDisplayString, withModifiers, normalizeClass, resolveDynamicComponent, toHandlers, vShow, nextTick } from "vue";
+import { s as simplebar } from "../vendor/simplebar-vue/dist/simplebar-vue.esm.es.js";
+import { e as eventBus } from "../event-bus/index.es.js";
+import { u as useWangsVueConfig } from "../plugins/WangsVue.es.js";
+import { u as useToast } from "../utils/baseToast.util.es.js";
+import { f as formatDate } from "../utils/date.util.es.js";
+import { n as normalizeTableData, e as exportToExcel } from "../utils/exportToExcel.util.es.js";
+import { m as mergePropsWithDefaults } from "../utils/mergePropsWithDefaults.util.es.js";
+import { s as setNestedPropertyValue, g as getNestedPropertyValue } from "../utils/object.util.es.js";
+import { u as useLoadingStore } from "../buttondownload/index.es.js";
+import { s as script } from "../vendor/primevue/paginator/paginator.esm.es.js";
+import { O as ObjectUtils } from "../vendor/primevue/utils/utils.esm.es.js";
+import { _ as _sfc_main$1 } from "../checkbox/index.es.js";
+import { _ as _sfc_main$4 } from "../animation/index.es.js";
+import { _ as _sfc_main$2 } from "../button/index.es.js";
+import { _ as _sfc_main$9 } from "../customcolumn/index.es.js";
+import { _ as _sfc_main$6 } from "../dialogconfirm/index.es.js";
+import { _ as _sfc_main$3 } from "../icon/index.es.js";
+import { _ as _sfc_main$8 } from "../menu/index.es.js";
+import { _ as _sfc_main$a } from "../toast/index.es.js";
+import { _ as _sfc_main$5 } from "../toggleswitch/index.es.js";
+import { _ as _sfc_main$7 } from "../multirow/index.es.js";
 /* empty css                                            */
-import { c as Ut } from "../vendor/lodash-es/cloneDeep.es.js";
-function Lt(W) {
-  let $ = W.target;
-  $.tagName === "UL" && ($ = $.parentElement);
-  const { offsetHeight: t = 0 } = $, z = window.innerHeight * 90 / 100;
-  t >= z && ($.style.transform = "translateY(5vh)");
+import { c as cloneDeep } from "../vendor/lodash-es/cloneDeep.es.js";
+import { _ as _export_sfc } from "../backgroundimagecropper/index.es.js";
+function adjustMenuPositionHelper(event) {
+  let el = event.target;
+  if (el.tagName === "UL") {
+    el = el.parentElement;
+  }
+  const { offsetHeight = 0 } = el;
+  const maxHeight = window.innerHeight * 90 / 100;
+  if (offsetHeight >= maxHeight) {
+    el.style.transform = "translateY(5vh)";
+  }
 }
-const It = (W, $) => W.every((t) => $.includes(t)), zt = ["id"], jt = ["onClick"], Vt = { class: "flex" }, Qt = ["id"], Wt = { key: 0 }, qt = ["colspan"], Gt = ["id", "draggable", "onClick", "onDblclick", "onDragenter", "onDragstart"], Jt = ["onClick"], Yt = ["colspan"], Zt = ["colspan"], Xt = ["colspan"], el = ["colspan"], al = ["colspan"], tl = ["contenteditable", "onBlur", "onKeypress"], ll = { key: 1 }, ol = { key: 2 }, nl = ["colspan"], rl = /* @__PURE__ */ gt({
+const isArrayIncluded = (smallArray, largeArray) => {
+  return smallArray.every((element) => largeArray.includes(element));
+};
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = { class: "flex" };
+const _hoisted_4 = ["id"];
+const _hoisted_5 = { key: 0 };
+const _hoisted_6 = ["colspan"];
+const _hoisted_7 = ["id", "draggable", "onClick", "onDblclick", "onDragenter", "onDragstart"];
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = ["colspan"];
+const _hoisted_10 = ["colspan"];
+const _hoisted_11 = ["colspan"];
+const _hoisted_12 = ["colspan"];
+const _hoisted_13 = ["colspan"];
+const _hoisted_14 = ["contenteditable", "onBlur", "onKeypress"];
+const _hoisted_15 = { key: 1 };
+const _hoisted_16 = { key: 2 };
+const _hoisted_17 = ["colspan"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DataTable",
-  props: /* @__PURE__ */ Fa({
+  props: /* @__PURE__ */ mergeModels({
     treeTable: { type: Boolean },
     childTableProps: {},
     tableName: { default: "datatable" },
     tableTitle: { default: void 0 },
     columns: {},
-    useOption: { type: Boolean, default: !0 },
+    useOption: { type: Boolean, default: true },
     data: {},
     dataKey: { default: "_id" },
     disableKey: { default: "isDefault" },
@@ -50,7 +76,7 @@ const It = (W, $) => W.every((t) => $.includes(t)), zt = ["id"], jt = ["onClick"
     rows: {},
     isSelectedAll: { type: Boolean },
     filters: {},
-    lazy: { type: Boolean, default: !0 },
+    lazy: { type: Boolean, default: true },
     loading: { type: Boolean },
     selectionType: { default: "checkbox" },
     useSelection: { type: Boolean },
@@ -59,7 +85,7 @@ const It = (W, $) => W.every((t) => $.includes(t)), zt = ["id"], jt = ["onClick"
     usePaginator: { type: Boolean },
     options: { default: () => [] },
     singleSelect: { type: Boolean },
-    customColumn: { type: Boolean, default: !0 },
+    customColumn: { type: Boolean, default: true },
     scrollHeight: {},
     rowHeight: { default: "fixed" },
     reorderable: { type: Boolean },
@@ -69,921 +95,1234 @@ const It = (W, $) => W.every((t) => $.includes(t)), zt = ["id"], jt = ["onClick"
     emptyTableMessage: {},
     singleSelection: {}
   }, {
-    singleSelection: {},
-    singleSelectionModifiers: {}
+    "singleSelection": {},
+    "singleSelectionModifiers": {}
   }),
-  emits: /* @__PURE__ */ Fa(["toggleOption", "selectData", "rowSelect", "page", "sort", "update:selectedData", "update:singleSelection", "cellEdited", "input", "rowReorder"], ["update:singleSelection"]),
-  setup(W, { emit: $ }) {
-    const t = W, z = $, Me = yt(W, "singleSelection"), { defaultProps: $a, locale: Oe } = Tt("DataTable"), X = F(() => St(t, $a)), u = xa("preset", {}).datatable, Ma = [10, 25, 50, 100], Oa = xa("useToastConfig"), Ue = _t(Oa), { setLoading: Le } = Nt(), Re = `${window.location.pathname.replace("/", "").split("/").join("-")}-${t.tableName}`, g = I(t.data ?? []), pe = R(t.data ?? []), M = I({}), O = I(t.columns), Ua = I(), La = I(), T = R([]), q = R(), Ie = R(0), ee = R(!1), fe = R(!1), Ia = R(0), ze = R(0), ve = R(0), De = R(!1), be = R(), Te = I(), je = I(), U = I([]), _e = R({}), ae = R(), Ve = R(), N = R(), D = R(), G = R(1), j = R(10), L = R(0), ge = I({}), Qe = F(() => {
-      var e, a;
-      return (e = t.childTableProps) != null && e.columns ? (a = t.childTableProps) == null ? void 0 : a.columns.filter((n) => {
-        var s;
-        return !n.parentColumnsFields || ((s = n.parentColumnsFields) == null ? void 0 : s.some(
-          (v) => O.value.some((i) => i.field === v)
-        ));
-      }) : O.value;
-    }), We = F(() => O.value.length + (t.selectionType === "checkbox" ? 1 : 0) + (t.useOption ? 1 : 0) + (t.reorderable ? 1 : 0) + (t.treeTable ? 1 : 0)), qe = F(() => ({
-      ...t.defaultQueryParams,
-      search: t.lazy ? ae.value : t.search,
-      tag: t.lazy ? Ve.value : void 0,
-      page: t.usePaginator ? G.value : void 0,
-      limit: t.usePaginator ? j.value : void 0,
-      sortOrder: D.value,
-      sortBy: N.value,
-      ...t.lazy ? _e.value : t.filters
+  emits: /* @__PURE__ */ mergeModels(["toggleOption", "selectData", "rowSelect", "page", "sort", "update:selectedData", "update:singleSelection", "cellEdited", "input", "rowReorder"], ["update:singleSelection"]),
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const singleSelection = useModel(__props, "singleSelection");
+    const { defaultProps, locale } = useWangsVueConfig("DataTable");
+    const config = computed(() => mergePropsWithDefaults(props, defaultProps));
+    const Preset = inject("preset", {}).datatable;
+    const rowsPerPageOptions = [10, 25, 50, 100];
+    const useToastConfig = inject("useToastConfig");
+    const toast = useToast(useToastConfig);
+    const { setLoading } = useLoadingStore();
+    const dataTableID = (() => {
+      const path = window.location.pathname.replace("/", "").split("/").join("-");
+      return `${path}-${props.tableName}`;
+    })();
+    const currentPageTableData = ref(props.data ?? []);
+    const originalTableData = shallowRef(props.data ?? []);
+    const expandedRows = ref({});
+    const visibleColumns = ref(props.columns);
+    const tableElement = ref();
+    const rowSingleActionCell = ref();
+    const checkboxSelection = shallowRef([]);
+    const rowReorderEventPayload = shallowRef();
+    const customColumnKey = shallowRef(0);
+    const loadingTable = shallowRef(false);
+    const loadingRows = shallowRef(false);
+    const columnKey = shallowRef(0);
+    const tableKey = shallowRef(0);
+    const paginatorKey = shallowRef(0);
+    const dragging = shallowRef(false);
+    const draggedRow = shallowRef();
+    const customColumn = ref();
+    const optionMenu = ref();
+    const rowReorderData = ref([]);
+    const filterQueryParams = shallowRef({});
+    const searchQueryParam = shallowRef();
+    const tagQueryParam = shallowRef();
+    const sortBy = shallowRef();
+    const sortOrder = shallowRef();
+    const tablePage = shallowRef(1);
+    const tableRows = shallowRef(10);
+    const totalRecords = shallowRef(0);
+    const showConfirmToggle = ref({});
+    const visibleChildTableColumns = computed(() => {
+      var _a, _b;
+      if ((_a = props.childTableProps) == null ? void 0 : _a.columns)
+        return (_b = props.childTableProps) == null ? void 0 : _b.columns.filter((col) => {
+          var _a2;
+          return !col.parentColumnsFields || ((_a2 = col.parentColumnsFields) == null ? void 0 : _a2.some(
+            (field) => visibleColumns.value.some((c) => c.field === field)
+          ));
+        });
+      return visibleColumns.value;
+    });
+    const columnsCount = computed(() => {
+      return visibleColumns.value.length + (props.selectionType === "checkbox" ? 1 : 0) + (props.useOption ? 1 : 0) + (props.reorderable ? 1 : 0) + (props.treeTable ? 1 : 0);
+    });
+    const queryParams = computed(() => ({
+      ...props.defaultQueryParams,
+      search: props.lazy ? searchQueryParam.value : props.search,
+      tag: props.lazy ? tagQueryParam.value : void 0,
+      page: props.usePaginator ? tablePage.value : void 0,
+      limit: props.usePaginator ? tableRows.value : void 0,
+      sortOrder: sortOrder.value,
+      sortBy: sortBy.value,
+      ...props.lazy ? filterQueryParams.value : props.filters
       // This will reset the previous filters.
-    })), Ge = F(() => {
-      var a;
-      const e = (a = g.value) == null ? void 0 : a.filter(
-        (n) => {
-          var s;
-          return ((s = n.children) == null ? void 0 : s.length) || n.hasChildren;
+    }));
+    const isExpandedAll = computed(() => {
+      var _a;
+      const rowsHasChildren = (_a = currentPageTableData.value) == null ? void 0 : _a.filter(
+        (d) => {
+          var _a2;
+          return ((_a2 = d.children) == null ? void 0 : _a2.length) || d.hasChildren;
         }
       );
-      return (e == null ? void 0 : e.length) && e.every((n) => M.value[n[t.dataKey]] > 0);
-    }), Je = F(() => {
-      var i, b, f, w, k;
-      if (t.disableAllRows || !((i = Y()) != null && i.length) || t.selectionType !== "checkbox" || ((b = te.value) == null ? void 0 : b.length) === g.value.length)
-        return !1;
-      const e = (f = T.value) == null ? void 0 : f.length, a = ((w = xe(Y())) == null ? void 0 : w.map((l) => l[t.dataKey])) ?? [], n = ((k = T.value) == null ? void 0 : k.map((l) => l[t.dataKey])) ?? [], s = n.length ? It(a, n) : !1, v = e > 0 && e === (L.value ?? 0) - (te.value.length ?? 0);
-      return s || v;
-    }), te = F(
-      () => ea(t.data ?? Y() ?? [])
-    ), Pe = F(
-      () => ee.value || t.loading
-    ), Ke = F(
+      return (rowsHasChildren == null ? void 0 : rowsHasChildren.length) && rowsHasChildren.every((data) => expandedRows.value[data[props.dataKey]] > 0);
+    });
+    const isSelectedAll = computed(() => {
+      var _a, _b, _c, _d, _e;
+      if (props.disableAllRows || !((_a = filterParentRowData()) == null ? void 0 : _a.length) || props.selectionType !== "checkbox" || ((_b = currentPageDisabledRows.value) == null ? void 0 : _b.length) === currentPageTableData.value.length)
+        return false;
+      const length = (_c = checkboxSelection.value) == null ? void 0 : _c.length;
+      const currentPageDataKey = ((_d = filterDisabledRows(filterParentRowData())) == null ? void 0 : _d.map((dt) => dt[props.dataKey])) ?? [];
+      const selectedDataKey = ((_e = checkboxSelection.value) == null ? void 0 : _e.map((dt) => dt[props.dataKey])) ?? [];
+      const isCurrentPageAllSelected = selectedDataKey.length ? isArrayIncluded(currentPageDataKey, selectedDataKey) : false;
+      const isAllRecordSelected = length > 0 && length === (totalRecords.value ?? 0) - (currentPageDisabledRows.value.length ?? 0);
+      return isCurrentPageAllSelected || isAllRecordSelected;
+    });
+    const currentPageDisabledRows = computed(
+      () => getDisabledRows(props.data ?? filterParentRowData() ?? [])
+    );
+    const tableIsLoading = computed(
+      () => loadingTable.value || props.loading
+    );
+    const showCustomColumn = computed(
       () => {
-        var e;
-        return t.useOption || ((e = t.childTableProps) == null ? void 0 : e.useOption) || t.customColumn;
+        var _a;
+        return props.useOption || ((_a = props.childTableProps) == null ? void 0 : _a.useOption) || props.customColumn;
       }
-    ), za = F(
+    );
+    const currentPageHasNoData = computed(
       () => {
-        var e;
-        return !Pe.value && !((e = g.value) != null && e.length);
+        var _a;
+        return !tableIsLoading.value && !((_a = currentPageTableData.value) == null ? void 0 : _a.length);
       }
-    ), ja = F(
-      () => t.lazy && t.fetchFunction || !t.usePaginator ? g.value : g.value.slice(
-        (G.value - 1) * j.value,
-        G.value * j.value
+    );
+    const renderedTableData = computed(
+      () => props.lazy && props.fetchFunction || !props.usePaginator ? currentPageTableData.value : currentPageTableData.value.slice(
+        (tablePage.value - 1) * tableRows.value,
+        tablePage.value * tableRows.value
       )
-    ), Ee = (e) => Object.keys(M.value).includes(e), J = (e) => te.value.includes(e), Se = (e) => t.selectionType === "checkbox" ? !!T.value.find((a) => a[t.dataKey] === e) : Va(e), Va = (e) => {
-      var a;
-      return e !== void 0 && ((a = Me.value) == null ? void 0 : a[t.dataKey]) === e;
-    }, Y = (e) => (g.value ?? []).filter(
-      (a) => !a.childRowHeader && !a.childRow
-    ), ye = async (e, a, n) => {
-      var v, i;
-      if (Ee(e[t.dataKey]) === n) return;
-      const s = n ?? !Ee(e[t.dataKey]);
-      if (!fe.value)
-        if (!s)
-          g.value.splice(
-            a + 1,
-            M.value[e[t.dataKey]]
-          ), delete M.value[e[t.dataKey]];
-        else {
-          M.value[e[t.dataKey]] = 1;
-          let { children: b } = e;
-          if ((v = t.childTableProps) != null && v.fetchFunction && e.hasChildren)
+    );
+    const isRowExpanded = (key) => {
+      const keys = Object.keys(expandedRows.value);
+      return keys.includes(key);
+    };
+    const isRowDisabled = (key) => {
+      const keys = currentPageDisabledRows.value;
+      return keys.includes(key);
+    };
+    const isRowSelected = (key) => {
+      return props.selectionType === "checkbox" ? !!checkboxSelection.value.find((data) => data[props.dataKey] === key) : isSingleSelected(key);
+    };
+    const isSingleSelected = (key) => {
+      var _a;
+      return key !== void 0 && ((_a = singleSelection.value) == null ? void 0 : _a[props.dataKey]) === key;
+    };
+    const filterParentRowData = (rowData) => {
+      return (currentPageTableData.value ?? []).filter(
+        (d) => !d.childRowHeader && !d.childRow
+      );
+    };
+    const toggleRowExpand = async (data, indexOfData, isExpanding) => {
+      var _a, _b;
+      if (isRowExpanded(data[props.dataKey]) === isExpanding) return;
+      const isExpandingRow = isExpanding ?? !isRowExpanded(data[props.dataKey]);
+      if (!loadingRows.value) {
+        if (!isExpandingRow) {
+          currentPageTableData.value.splice(
+            indexOfData + 1,
+            expandedRows.value[data[props.dataKey]]
+          );
+          delete expandedRows.value[data[props.dataKey]];
+        } else {
+          expandedRows.value[data[props.dataKey]] = 1;
+          let { children } = data;
+          if (((_a = props.childTableProps) == null ? void 0 : _a.fetchFunction) && data.hasChildren) {
             try {
-              g.value.splice(a + 1, 0, {
-                childRow: !0,
-                loadingRow: !0
-              }), fe.value = !0;
-              const f = await ((i = t.childTableProps) == null ? void 0 : i.fetchFunction(e));
-              b = f == null ? void 0 : f.data;
-            } catch (f) {
-              console.error("🚀 ~ toggleRowExpand ~ error:", f);
+              currentPageTableData.value.splice(indexOfData + 1, 0, {
+                childRow: true,
+                loadingRow: true
+              });
+              loadingRows.value = true;
+              const fetchChildren = await ((_b = props.childTableProps) == null ? void 0 : _b.fetchFunction(data));
+              children = fetchChildren == null ? void 0 : fetchChildren.data;
+            } catch (error) {
+              console.error("🚀 ~ toggleRowExpand ~ error:", error);
             } finally {
-              g.value.splice(a + 1, 1), fe.value = !1;
+              currentPageTableData.value.splice(indexOfData + 1, 1);
+              loadingRows.value = false;
             }
-          if (a >= 0 && (b != null && b.length)) {
-            const f = b.flatMap((w) => [
-              {
-                childRowHeader: !0,
-                header: w.groupHeader
-              },
-              ...(w.groupItems ?? []).map((l) => ({ childRow: !0, ...l }))
-            ]);
-            M.value[e[t.dataKey]] = f.length, g.value.splice(a + 1, 0, ...f);
-          } else
-            g.value.splice(a + 1, 0, {
-              childRow: !0,
-              noDataRow: !0
+          }
+          if (indexOfData >= 0 && (children == null ? void 0 : children.length)) {
+            const childrenRows = children.flatMap((child) => {
+              const rowHeader = {
+                childRowHeader: true,
+                header: child.groupHeader
+              };
+              return [
+                rowHeader,
+                ...(child.groupItems ?? []).map((d) => ({ childRow: true, ...d }))
+              ];
+            });
+            expandedRows.value[data[props.dataKey]] = childrenRows.length;
+            currentPageTableData.value.splice(indexOfData + 1, 0, ...childrenRows);
+          } else {
+            currentPageTableData.value.splice(indexOfData + 1, 0, {
+              childRow: true,
+              noDataRow: true
             });
+          }
         }
-    }, Qa = (e) => {
-      t.includeCheckDisabledRows ? T.value = e ? Y() : Y().filter((a) => J(a[t.dataKey])) : T.value = e ? xe(Y()) : [];
-    }, Wa = (e, a, n) => {
-      if (!a.childRow && !a.childRowHeader && !J(a[t.dataKey]) && t.selectionType !== "none") {
-        const s = Se(a[t.dataKey]);
-        z("rowSelect", { originalEvent: e, data: a, index: n }), t.selectionType === "checkbox" ? s ? T.value = T.value.filter(
-          (v) => v[t.dataKey] != a[t.dataKey]
-        ) : T.value = [...T.value, a] : Me.value = s ? void 0 : a;
       }
-    }, qa = async () => {
-      var a;
-      const e = !Ge.value;
-      if (!fe.value) {
-        let n = 0;
-        for (const s of g.value)
-          ((a = s.children) != null && a.length || s.hasChildren) && await ye(s, n, e), n++;
+    };
+    const toggleAllDataSelection = (e) => {
+      if (props.includeCheckDisabledRows) {
+        checkboxSelection.value = e ? filterParentRowData() : filterParentRowData().filter((d) => isRowDisabled(d[props.dataKey]));
+      } else {
+        checkboxSelection.value = e ? filterDisabledRows(filterParentRowData()) : [];
       }
-    }, Ga = async (e, a) => {
-      const n = e.target, s = n.tagName.toLowerCase() === "button" ? n : n.parentElement;
-      z("toggleOption", a);
-      const v = {
-        ...e,
-        currentTarget: e.currentTarget ?? e.target
+    };
+    const toggleRowSelection = (event, data, index) => {
+      if (!data.childRow && !data.childRowHeader && !isRowDisabled(data[props.dataKey]) && props.selectionType !== "none") {
+        const selected = isRowSelected(data[props.dataKey]);
+        emit("rowSelect", { originalEvent: event, data, index });
+        if (props.selectionType === "checkbox") {
+          if (selected)
+            checkboxSelection.value = checkboxSelection.value.filter(
+              (d) => d[props.dataKey] != data[props.dataKey]
+            );
+          else checkboxSelection.value = [...checkboxSelection.value, data];
+        } else {
+          singleSelection.value = selected ? void 0 : data;
+        }
+      }
+    };
+    const toggleExpandAll = async () => {
+      var _a;
+      const isExpanding = !isExpandedAll.value;
+      if (!loadingRows.value) {
+        let index = 0;
+        for (const data of currentPageTableData.value) {
+          if (((_a = data.children) == null ? void 0 : _a.length) || data.hasChildren) {
+            await toggleRowExpand(data, index, isExpanding);
+          }
+          index++;
+        }
+      }
+    };
+    const toggleOptions = async (event, data) => {
+      const eventTarget = event.target;
+      const button = eventTarget.tagName.toLowerCase() === "button" ? eventTarget : eventTarget.parentElement;
+      emit("toggleOption", data);
+      const toggleEvent = {
+        ...event,
+        currentTarget: event.currentTarget ?? event.target
       };
-      Ae(), await Ha(() => {
-        var i;
-        s != null && s.classList.contains("option-button-active") ? Ae() : ((i = je.value) == null || i.toggle(v), Ae(), s == null || s.classList.add("option-button-active"));
+      removeClassActive();
+      await nextTick(() => {
+        var _a;
+        if (button == null ? void 0 : button.classList.contains("option-button-active")) {
+          removeClassActive();
+        } else {
+          (_a = optionMenu.value) == null ? void 0 : _a.toggle(toggleEvent);
+          removeClassActive();
+          button == null ? void 0 : button.classList.add("option-button-active");
+        }
       });
-    }, Ye = async (e, a, n) => {
-      var v, i, b, f;
-      if (!n.preset) return;
-      const s = () => ce(
-        a,
-        n.field,
-        !B(a, n.field)
+    };
+    const onColumnTogglePresetChange = async (e, item, col) => {
+      var _a, _b, _c, _d;
+      if (!col.preset) return;
+      const revertFunction = () => setNestedPropertyValue(
+        item,
+        col.field,
+        !getNestedPropertyValue(item, col.field)
       );
-      if (n.preset.type === "checkbox" ? (i = (v = n.preset).onCheck) == null || i.call(v, e, a, s) : n.preset.type === "toggle" && ((f = (b = n.preset).onToggle) == null || f.call(b, e, a, s)), "confirmDialogProps" in n.preset) {
-        const { showWhen: w } = He(
-          n.preset,
-          a[n.field],
-          a
+      if (col.preset.type === "checkbox")
+        (_b = (_a = col.preset).onCheck) == null ? void 0 : _b.call(_a, e, item, revertFunction);
+      else if (col.preset.type === "toggle")
+        (_d = (_c = col.preset).onToggle) == null ? void 0 : _d.call(_c, e, item, revertFunction);
+      if ("confirmDialogProps" in col.preset) {
+        const { showWhen } = getConfirmDialogProps(
+          col.preset,
+          item[col.field],
+          item
         ) ?? {};
-        typeof w == "function" ? ge.value[a[t.dataKey] + n.field] = await w(
-          a,
-          e
-        ) : ge.value[a[t.dataKey] + n.field] = !w || w === "active" && e || w === "inactive" && !e;
+        if (typeof showWhen === "function") {
+          showConfirmToggle.value[item[props.dataKey] + col.field] = await showWhen(
+            item,
+            e
+          );
+        } else {
+          showConfirmToggle.value[item[props.dataKey] + col.field] = !showWhen || showWhen === "active" && e || showWhen === "inactive" && !e;
+        }
+      }
+    };
+    const draggable = (item) => {
+      return item.draggable !== false && !item.childRow && !item.childRowHeader && props.reorderable && !sortOrder.value;
+    };
+    const startReorderRow = (event, item, index) => {
+      if (item.childRow || item.childRowHeader) return;
+      expandedRows.value = {};
+      const { dataTransfer } = event;
+      draggedRow.value = item;
+      rowReorderEventPayload.value = { item, fromIndex: index };
+      if (dataTransfer) {
+        dataTransfer.dropEffect = "move";
+        dataTransfer.effectAllowed = "move";
+        dataTransfer.setData("id", item._id);
+        dataTransfer.setData("index", index.toString());
       }
-    }, Ne = (e) => e.draggable !== !1 && !e.childRow && !e.childRowHeader && t.reorderable && !D.value, Ja = (e, a, n) => {
-      if (a.childRow || a.childRowHeader) return;
-      M.value = {};
-      const { dataTransfer: s } = e;
-      be.value = a, q.value = { item: a, fromIndex: n }, s && (s.dropEffect = "move", s.effectAllowed = "move", s.setData("id", a._id), s.setData("index", n.toString()));
-    }, Ya = (e, a) => {
-      var n, s;
-      if (e.preventDefault(), Ne(a)) {
-        const v = e.target, i = v.tagName === "TR" ? v : v.closest("tr");
-        if (i == null || i.classList.add("bg-primary-50"), (n = i == null ? void 0 : i.nextElementSibling) == null || n.classList.remove("bg-primary-50"), (s = i == null ? void 0 : i.previousElementSibling) == null || s.classList.remove("bg-primary-50"), !i || !be.value) return;
-        const b = U.value.findIndex(
-          (w) => {
-            var k;
-            return w._id === ((k = be.value) == null ? void 0 : k._id);
+    };
+    const onDragEnter = (e, row) => {
+      var _a, _b;
+      e.preventDefault();
+      if (draggable(row)) {
+        const target = e.target;
+        const dropTargetTr = target.tagName === "TR" ? target : target.closest("tr");
+        dropTargetTr == null ? void 0 : dropTargetTr.classList.add("bg-primary-50");
+        (_a = dropTargetTr == null ? void 0 : dropTargetTr.nextElementSibling) == null ? void 0 : _a.classList.remove("bg-primary-50");
+        (_b = dropTargetTr == null ? void 0 : dropTargetTr.previousElementSibling) == null ? void 0 : _b.classList.remove("bg-primary-50");
+        if (!dropTargetTr || !draggedRow.value) return;
+        const draggedIndex = rowReorderData.value.findIndex(
+          (item) => {
+            var _a2;
+            return item._id === ((_a2 = draggedRow.value) == null ? void 0 : _a2._id);
           }
-        ), f = U.value.findIndex(
-          (w) => w._id === i.id
         );
-        b !== -1 && f !== -1 && (q.value && (q.value.toIndex = f), [
-          U.value[b],
-          U.value[f]
-        ] = [
-          U.value[f],
-          U.value[b]
-        ], Xa());
+        const dropTargetIndex = rowReorderData.value.findIndex(
+          (item) => item._id === dropTargetTr.id
+        );
+        if (draggedIndex !== -1 && dropTargetIndex !== -1) {
+          if (rowReorderEventPayload.value)
+            rowReorderEventPayload.value.toIndex = dropTargetIndex;
+          [
+            rowReorderData.value[draggedIndex],
+            rowReorderData.value[dropTargetIndex]
+          ] = [
+            rowReorderData.value[dropTargetIndex],
+            rowReorderData.value[draggedIndex]
+          ];
+          reorderVisibleColumn();
+        }
       }
-    }, Za = () => {
-      q.value && z("rowReorder", q.value), be.value = void 0, De.value = !1, q.value = void 0;
-    }, Xa = () => {
-      g.value = [...U.value];
-    }, Ae = () => {
-      const e = document.querySelectorAll(".option-button-active");
-      e == null || e.forEach((a) => {
-        a.classList.remove("option-button-active");
+    };
+    const onRowReorder = () => {
+      if (rowReorderEventPayload.value) {
+        emit("rowReorder", rowReorderEventPayload.value);
+      }
+      draggedRow.value = void 0;
+      dragging.value = false;
+      rowReorderEventPayload.value = void 0;
+    };
+    const reorderVisibleColumn = () => {
+      currentPageTableData.value = [...rowReorderData.value];
+    };
+    const removeClassActive = () => {
+      const previouslyClicked = document.querySelectorAll(".option-button-active");
+      previouslyClicked == null ? void 0 : previouslyClicked.forEach((el) => {
+        el.classList.remove("option-button-active");
       });
-    }, et = () => {
-      N.value = void 0, D.value = void 0;
-    }, at = () => {
-      G.value = 1, ve.value++;
-    }, tt = () => {
-      j.value = t.rows ?? 10, G.value = 1, ve.value++;
-    }, lt = () => {
-      tt(), et();
-    }, Fe = async () => {
-      ze.value++, ve.value++, lt(), t.lazy ? await le() : ot();
-    }, ot = () => {
-      let e = [...pe.value ?? []];
-      const a = _e.value, n = Object.entries(a);
+    };
+    const resetSortQuery = () => {
+      sortBy.value = void 0;
+      sortOrder.value = void 0;
+    };
+    const resetPage = () => {
+      tablePage.value = 1;
+      paginatorKey.value++;
+    };
+    const resetPageLimit = () => {
+      tableRows.value = props.rows ?? 10;
+      tablePage.value = 1;
+      paginatorKey.value++;
+    };
+    const resetDataTableQuery = () => {
+      resetPageLimit();
+      resetSortQuery();
+    };
+    const handleFilter = async () => {
+      tableKey.value++;
+      paginatorKey.value++;
+      resetDataTableQuery();
+      if (!props.lazy) applyStaticFilter();
+      else await reFetch();
+    };
+    const applyStaticFilter = () => {
+      let filtered = [...originalTableData.value ?? []];
+      const staticFilterMeta = filterQueryParams.value;
+      const filterMetaEntries = Object.entries(staticFilterMeta);
       try {
-        e = n.length ? e.filter((s) => n.every(
-          ([v, { value: i, matchMode: b }]) => {
-            const f = B(s, v);
-            switch (b) {
-              case "IN":
-                return Array.isArray(i) ? i.includes(f) : !1;
-              case "CONTAINS":
-                return f && i ? f.toString().toLowerCase().includes(i) : !1;
-              case "EQUALS":
-                return f ? f.toString() === i.toString() : !1;
-              case "BETWEEN":
-                return Array.isArray(i) && i.length === 2 ? !isNaN(f) && (i[0] == null || f >= i[0]) && (i[1] == null || f <= i[1]) : !1;
-              case "DATE_BETWEEN":
-                return Array.isArray(i) ? +new Date(f) >= i[0] && +new Date(f) <= i[1] : !1;
-              default:
-                return !1;
+        filtered = filterMetaEntries.length ? filtered.filter((d) => {
+          return filterMetaEntries.every(
+            ([key, { value: filterValue, matchMode }]) => {
+              const fieldValue = getNestedPropertyValue(d, key);
+              switch (matchMode) {
+                case "IN":
+                  return Array.isArray(filterValue) ? filterValue.includes(fieldValue) : false;
+                case "CONTAINS":
+                  return fieldValue && filterValue ? fieldValue.toString().toLowerCase().includes(filterValue) : false;
+                case "EQUALS":
+                  return fieldValue ? fieldValue.toString() === filterValue.toString() : false;
+                case "BETWEEN":
+                  return Array.isArray(filterValue) && filterValue.length === 2 ? !isNaN(fieldValue) && (filterValue[0] == null || fieldValue >= filterValue[0]) && (filterValue[1] == null || fieldValue <= filterValue[1]) : false;
+                case "DATE_BETWEEN":
+                  return Array.isArray(filterValue) ? +new Date(fieldValue) >= filterValue[0] && +new Date(fieldValue) <= filterValue[1] : false;
+                default:
+                  return false;
+              }
             }
-          }
-        )) : pe.value;
-      } catch (s) {
-        console.error("🚀 ~ applyStaticFilter ~ error:", s);
+          );
+        }) : originalTableData.value;
+      } catch (error) {
+        console.error("🚀 ~ applyStaticFilter ~ error:", error);
       }
-      nt(e);
-    }, nt = (e) => {
-      var a;
+      applyStaticSearch(filtered);
+    };
+    const applyStaticSearch = (data) => {
+      var _a;
       try {
-        g.value = (a = ae.value) != null && a.length ? e.filter((n) => {
-          const s = JSON.stringify(n);
-          return new RegExp(ae.value, "i").test(s) || ae.value.split(/\s+/).filter(Boolean).every((v) => new RegExp(v, "i").test(s));
-        }) : e;
-      } catch (n) {
-        console.error("🚀 ~ applyStaticSearch ~ error:", n);
+        currentPageTableData.value = ((_a = searchQueryParam.value) == null ? void 0 : _a.length) ? data.filter((d) => {
+          const stringData = JSON.stringify(d);
+          return new RegExp(searchQueryParam.value, "i").test(stringData) || searchQueryParam.value.split(/\s+/).filter(Boolean).every((word) => {
+            const regex = new RegExp(word, "i");
+            return regex.test(stringData);
+          });
+        }) : data;
+      } catch (error) {
+        console.error("🚀 ~ applyStaticSearch ~ error:", error);
       }
-    }, rt = async (e) => {
-      j.value = e.rows, G.value = e.page + 1, t.lazy && t.fetchFunction && await le(), Object.keys(M.value).forEach((a) => {
-        const n = g.value.findIndex(
-          (s) => s[t.dataKey] == a
+    };
+    const handlePageChange = async (event) => {
+      tableRows.value = event.rows;
+      tablePage.value = event.page + 1;
+      if (props.lazy && props.fetchFunction) await reFetch();
+      Object.keys(expandedRows.value).forEach((key) => {
+        const index = currentPageTableData.value.findIndex(
+          (d) => d[props.dataKey] == key
         );
-        n >= 0 && ye(g.value[n], n, !0);
+        if (index >= 0)
+          toggleRowExpand(currentPageTableData.value[index], index, true);
       });
-    }, st = (e, a) => {
-      e !== N.value && (D.value = void 0), N.value = e, D.value ? D.value == -1 ? (D.value = void 0, N.value = void 0) : D.value = -1 : D.value = 1, z("sort", {
-        sortOrder: D.value,
-        sortField: N.value,
-        originalEvent: a,
-        rows: j.value
-      }), at(), t.lazy && t.fetchFunction ? le() : it();
-    }, it = () => {
-      const e = [...g.value ?? []], a = /* @__PURE__ */ new Map();
-      if (!D.value) {
-        g.value = pe.value ?? [];
+    };
+    const sortColumn = (field, e) => {
+      if (field !== sortBy.value) sortOrder.value = void 0;
+      sortBy.value = field;
+      if (!sortOrder.value) {
+        sortOrder.value = 1;
+      } else if (sortOrder.value == -1) {
+        sortOrder.value = void 0;
+        sortBy.value = void 0;
+      } else {
+        sortOrder.value = -1;
+      }
+      emit("sort", {
+        sortOrder: sortOrder.value,
+        sortField: sortBy.value,
+        originalEvent: e,
+        rows: tableRows.value
+      });
+      resetPage();
+      if (props.lazy && props.fetchFunction) reFetch();
+      else staticSort();
+    };
+    const staticSort = () => {
+      const data = [...currentPageTableData.value ?? []];
+      const resolvedFieldData = /* @__PURE__ */ new Map();
+      if (!sortOrder.value) {
+        currentPageTableData.value = originalTableData.value ?? [];
         return;
       }
-      for (const s of e)
-        a.set(
-          s,
-          Ba.resolveFieldData(s, N.value)
+      for (const item of data) {
+        resolvedFieldData.set(
+          item,
+          ObjectUtils.resolveFieldData(item, sortBy.value)
         );
-      const n = new Intl.Collator(void 0, { numeric: !0 }).compare;
-      e.sort((s, v) => {
-        const i = a.get(s), b = a.get(v);
-        return Ba.sort(i, b, D.value, n, -1);
-      }), g.value = e;
-    }, le = async () => {
-      var e;
+      }
+      const comparer = new Intl.Collator(void 0, { numeric: true }).compare;
+      data.sort((data1, data2) => {
+        const value1 = resolvedFieldData.get(data1);
+        const value2 = resolvedFieldData.get(data2);
+        return ObjectUtils.sort(value1, value2, sortOrder.value, comparer, -1);
+      });
+      currentPageTableData.value = data;
+    };
+    const reFetch = async () => {
+      var _a;
       try {
-        ee.value = !0;
-        const a = await ((e = t.fetchFunction) == null ? void 0 : e.call(t, qe.value)), { data: n = [], totalRecords: s = 0 } = (a == null ? void 0 : a.data) ?? {};
-        g.value = n, U.value = [...g.value], L.value = s;
-      } catch (a) {
-        console.error("🚀 ~ reFetch ~ error:", a);
+        loadingTable.value = true;
+        const response = await ((_a = props.fetchFunction) == null ? void 0 : _a.call(props, queryParams.value));
+        const { data = [], totalRecords: total = 0 } = (response == null ? void 0 : response.data) ?? {};
+        currentPageTableData.value = data;
+        rowReorderData.value = [...currentPageTableData.value];
+        totalRecords.value = total;
+      } catch (error) {
+        console.error("🚀 ~ reFetch ~ error:", error);
       } finally {
-        ee.value = !1, M.value = {};
+        loadingTable.value = false;
+        expandedRows.value = {};
       }
-    }, Ze = async () => {
-      var n;
-      const e = Ut(qe.value);
-      delete e.page, delete e.limit;
-      const a = await ((n = t.fetchFunction) == null ? void 0 : n.call(t, e));
-      if (a instanceof Error) throw a;
-      return (a == null ? void 0 : a.data) ?? { data: [], totalRecords: 0 };
-    }, dt = async (e) => {
-      if (t.tableName === e.tableName)
-        try {
-          ee.value = !0;
-          const { data: a, totalRecords: n = 0 } = t.lazy ? await Ze() : { totalRecords: (t.data ?? []).length, data: t.data }, s = ea(a);
-          T.value = t.includeCheckDisabledRows ? a ?? [] : xe(a, s), L.value = n;
-        } finally {
-          ee.value = !1;
-        }
-    }, oe = (e, a) => u == null ? void 0 : u.headercell({
-      props: t,
-      context: {
-        sortOrder: D.value,
-        customColumn: a,
-        sorted: N.value && N.value === (e == null ? void 0 : e.field),
-        sortable: e == null ? void 0 : e.sortable
+    };
+    const fetchAllData = async () => {
+      var _a;
+      const params = cloneDeep(queryParams.value);
+      delete params.page;
+      delete params.limit;
+      const res = await ((_a = props.fetchFunction) == null ? void 0 : _a.call(props, params));
+      if (res instanceof Error) throw res;
+      return (res == null ? void 0 : res.data) ?? { data: [], totalRecords: 0 };
+    };
+    const selectAllData = async (event) => {
+      if (props.tableName !== event.tableName) return;
+      try {
+        loadingTable.value = true;
+        const { data, totalRecords: total = 0 } = props.lazy ? await fetchAllData() : { totalRecords: (props.data ?? []).length, data: props.data };
+        const disabledRows = getDisabledRows(data);
+        checkboxSelection.value = props.includeCheckDisabledRows ? data ?? [] : filterDisabledRows(data, disabledRows);
+        totalRecords.value = total;
+      } finally {
+        loadingTable.value = false;
       }
-    }), Xe = (e) => {
-      (!e.tableName || e.tableName === t.tableName) && Ha(() => {
-        Ia.value++, le();
+    };
+    const headerCellPreset = (col, useCustomColumn) => {
+      return Preset == null ? void 0 : Preset.headercell({
+        props,
+        context: {
+          sortOrder: sortOrder.value,
+          customColumn: useCustomColumn,
+          sorted: sortBy.value && sortBy.value === (col == null ? void 0 : col.field),
+          sortable: col == null ? void 0 : col.sortable
+        }
       });
-    }, xe = (e, a) => (e ?? []).filter(
-      (n) => !(a ?? te.value).includes(n[t.dataKey])
-    ), ea = (e = []) => t.disableAllRows ? e.map((a) => a[t.dataKey]) : e.filter((a) => a[t.disableKey]).map((a) => a[t.dataKey]), ut = async ({
-      tableName: e,
-      multiTableNames: a,
-      fileName: n,
-      additionalTexts: s
+    };
+    const handleUpdateTableEvent = (event) => {
+      if (!event.tableName || event.tableName === props.tableName) {
+        nextTick(() => {
+          columnKey.value++;
+          reFetch();
+        });
+      }
+    };
+    const filterDisabledRows = (tableData, rowsIDs) => {
+      return (tableData ?? []).filter(
+        (data) => !(rowsIDs ?? currentPageDisabledRows.value).includes(data[props.dataKey])
+      );
+    };
+    const getDisabledRows = (tableData = []) => {
+      if (props.disableAllRows) return tableData.map((data) => data[props.dataKey]);
+      return tableData.filter((data) => data[props.disableKey]).map((data) => data[props.dataKey]);
+    };
+    const downloadExcel = async ({
+      tableName,
+      multiTableNames,
+      fileName,
+      additionalTexts
     }) => {
-      var w;
-      if (e !== t.tableName && !(a != null && a.includes(t.tableName)))
+      var _a;
+      if (tableName !== props.tableName && !(multiTableNames == null ? void 0 : multiTableNames.includes(props.tableName)))
         return;
-      const i = O.value.filter(
-        (k) => k.visible !== !1
-      ).filter((k) => !k.excluded), b = i.map(
-        (k) => k.header ?? k.exportHeader ?? "-"
-      ), f = () => n.trim().replace(/[^a-zA-Z0-9\s]/g, "-").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/-+$/, "");
+      const excelColumns = visibleColumns.value.filter(
+        (col) => col.visible !== false
+      );
+      const includedColumns = excelColumns.filter((col) => !col.excluded);
+      const headers = includedColumns.map(
+        (col) => col.header ?? col.exportHeader ?? "-"
+      );
+      const formatFileName = () => {
+        return fileName.trim().replace(/[^a-zA-Z0-9\s]/g, "-").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/-+$/, "");
+      };
       try {
-        if (m.off("data-table:download", he), e === t.tableName) {
-          Le(!0, Oe.downloadingMessage);
-          const { data: k } = t.fetchFunction ? await Ze() : { data: t.data }, l = Kt(k, i, Oe);
-          if (a != null && a.length) {
-            m.emit("button-download:multi-tables", {
+        eventBus.off("data-table:download", downloadHandler);
+        if (tableName === props.tableName) {
+          setLoading(true, locale.downloadingMessage);
+          const { data } = props.fetchFunction ? await fetchAllData() : { data: props.data };
+          const excelBody = normalizeTableData(data, includedColumns, locale);
+          if (multiTableNames == null ? void 0 : multiTableNames.length) {
+            eventBus.emit("button-download:multi-tables", {
               table: {
-                headers: b,
-                data: l,
-                tableName: e,
-                tableTitle: t.tableTitle
+                headers,
+                data: excelBody,
+                tableName,
+                tableTitle: props.tableTitle
               }
             });
             return;
           }
-          await Et({
+          await exportToExcel({
             tables: [
-              { headers: b, data: l, tableName: e, tableTitle: t.tableTitle }
+              { headers, data: excelBody, tableName, tableTitle: props.tableTitle }
             ],
-            fileName: f(),
-            additionalTexts: s
+            fileName: formatFileName(),
+            additionalTexts
           });
         }
-      } catch (k) {
-        console.error("🚀 ~ downloadExcel error:", k), Ue.removeAllGroups(), Ue.add({
-          message: ((w = X.value.excelToastErrorMessage) == null ? void 0 : w.replace("{fileName}", n)) ?? "Data gagal diunduh.",
-          error: k,
+      } catch (error) {
+        console.error("🚀 ~ downloadExcel error:", error);
+        toast.removeAllGroups();
+        toast.add({
+          message: ((_a = config.value.excelToastErrorMessage) == null ? void 0 : _a.replace("{fileName}", fileName)) ?? "Data gagal diunduh.",
+          error,
           group: "download"
         });
       } finally {
-        Le(!1), m.on("data-table:download", he);
+        setLoading(false);
+        eventBus.on("data-table:download", downloadHandler);
       }
     };
-    ht(async () => {
-      var e;
-      t.fetchFunction && (await le(), bt()), (e = t.selectedData) != null && e.length && (T.value = t.selectedData), ct();
-    }), mt(() => {
-      pt();
-    }), we(
-      () => t.columns,
+    onMounted(async () => {
+      var _a;
+      if (props.fetchFunction) {
+        await reFetch();
+        listenUpdateTableEvent();
+      }
+      if ((_a = props.selectedData) == null ? void 0 : _a.length) {
+        checkboxSelection.value = props.selectedData;
+      }
+      attachEventListener();
+    });
+    onUnmounted(() => {
+      removeEventListener();
+    });
+    watch(
+      () => props.columns,
       () => {
-        t.customColumn || (O.value = t.columns), Ie.value++;
+        if (!props.customColumn) visibleColumns.value = props.columns;
+        customColumnKey.value++;
       }
-    ), we(
-      () => t.data,
-      (e) => {
-        g.value = e ?? [], pe.value = e ?? [], m.emit("data-table:updated", { tableName: t.tableName, data: e }), L.value = e == null ? void 0 : e.length;
+    );
+    watch(
+      () => props.data,
+      (data) => {
+        currentPageTableData.value = data ?? [];
+        originalTableData.value = data ?? [];
+        eventBus.emit("data-table:updated", { tableName: props.tableName, data });
+        totalRecords.value = data == null ? void 0 : data.length;
       },
       {
-        immediate: !0
+        immediate: true
       }
-    ), we(L, (e) => {
-      vt(e);
-    }), we(
-      T,
-      (e) => {
-        z("selectData", e), z("update:selectedData", e), m.emit("data-table:update-selected-data", {
-          tableName: t.tableName,
-          data: e
+    );
+    watch(totalRecords, (total) => {
+      updateTotalRecordBulkAction(total);
+    });
+    watch(
+      checkboxSelection,
+      (newSelectedData) => {
+        emit("selectData", newSelectedData);
+        emit("update:selectedData", newSelectedData);
+        eventBus.emit("data-table:update-selected-data", {
+          tableName: props.tableName,
+          data: newSelectedData
         });
       },
-      { deep: !0 }
+      { deep: true }
     );
-    const ct = () => {
-      m.on("data-table:apply-filter", aa), m.on("search-table", ta), m.on("search-by-scan-table", la), m.on("data-table:clear-selected-data", na), m.on("data-table:select-all-record", oa), m.on("data-table:download", he), m.on("data-table:import-excel-to-json", ra);
-    }, pt = () => {
-      m.off("data-table:update", Xe), m.off("data-table:apply-filter", aa), m.off("search-table", ta), m.off("search-by-scan-table", la), m.off("data-table:clear-selected-data", na), m.off("data-table:select-all-record", oa), m.off("data-table:download", he), m.off("data-table:import-excel-to-json", ra);
-    }, aa = (e) => {
-      e.tableName === t.tableName && (_e.value = e.filter, Fe());
-    }, ta = (e) => {
-      e.tableName === t.tableName && (ae.value = e.search, Fe());
-    }, la = (e) => {
-      e.tableName === t.tableName && (Ve.value = e.tag, Fe());
-    }, oa = (e) => {
-      e.tableName === t.tableName && dt(e);
-    }, na = (e) => {
-      e.tableName === t.tableName && (T.value = []);
-    }, he = (e) => {
-      var a;
-      (e.tableName === t.tableName || (a = e.multiTableNames) != null && a.includes(t.tableName)) && ut(e);
-    }, ft = (e) => {
-      e.code.includes("Digit") || e.code.includes("Numpad") || ["ArrowLeft", "ArrowRight", "Backspace", "Delete"].includes(e.code) || e.preventDefault();
-    }, vt = (e) => {
-      const a = t.includeCheckDisabledRows ? 0 : (te.value.length || t.totalDisabledRows) ?? 0, n = {
-        total: (e ?? L.value ?? 0) - a,
-        tableName: t.tableName
+    const attachEventListener = () => {
+      eventBus.on("data-table:apply-filter", applyFilterHandler);
+      eventBus.on("search-table", searchTableHandler);
+      eventBus.on("search-by-scan-table", searchByScanHandler);
+      eventBus.on("data-table:clear-selected-data", clearSelectedDataHandler);
+      eventBus.on("data-table:select-all-record", selectAllRecordHandler);
+      eventBus.on("data-table:download", downloadHandler);
+      eventBus.on("data-table:import-excel-to-json", populateDataTableFromExcel);
+    };
+    const removeEventListener = () => {
+      eventBus.off("data-table:update", handleUpdateTableEvent);
+      eventBus.off("data-table:apply-filter", applyFilterHandler);
+      eventBus.off("search-table", searchTableHandler);
+      eventBus.off("search-by-scan-table", searchByScanHandler);
+      eventBus.off("data-table:clear-selected-data", clearSelectedDataHandler);
+      eventBus.off("data-table:select-all-record", selectAllRecordHandler);
+      eventBus.off("data-table:download", downloadHandler);
+      eventBus.off("data-table:import-excel-to-json", populateDataTableFromExcel);
+    };
+    const applyFilterHandler = (e) => {
+      if (e.tableName === props.tableName) {
+        filterQueryParams.value = e.filter;
+        handleFilter();
+      }
+    };
+    const searchTableHandler = (e) => {
+      if (e.tableName === props.tableName) {
+        searchQueryParam.value = e.search;
+        handleFilter();
+      }
+    };
+    const searchByScanHandler = (e) => {
+      if (e.tableName === props.tableName) {
+        tagQueryParam.value = e.tag;
+        handleFilter();
+      }
+    };
+    const selectAllRecordHandler = (e) => {
+      if (e.tableName === props.tableName) {
+        selectAllData(e);
+      }
+    };
+    const clearSelectedDataHandler = (e) => {
+      if (e.tableName === props.tableName) {
+        checkboxSelection.value = [];
+      }
+    };
+    const downloadHandler = (e) => {
+      var _a;
+      if (e.tableName === props.tableName || ((_a = e.multiTableNames) == null ? void 0 : _a.includes(props.tableName))) {
+        downloadExcel(e);
+      }
+    };
+    const preventCharInput = (e) => {
+      if (!(e.code.includes("Digit") || e.code.includes("Numpad") || ["ArrowLeft", "ArrowRight", "Backspace", "Delete"].includes(e.code))) {
+        e.preventDefault();
+      }
+    };
+    const updateTotalRecordBulkAction = (total) => {
+      const disabledCount = props.includeCheckDisabledRows ? 0 : (currentPageDisabledRows.value.length || props.totalDisabledRows) ?? 0;
+      const data = {
+        total: (total ?? totalRecords.value ?? 0) - disabledCount,
+        tableName: props.tableName
       };
-      m.emit("data-table:update-total-record", n);
-    }, bt = () => {
-      m.on("data-table:update", Xe);
-    }, ra = (e) => {
-      e.tableName === t.tableName && (g.value = e.data, U.value = [...g.value], L.value = e.data.length);
-    }, He = (e, a, n) => typeof (e == null ? void 0 : e.confirmDialogProps) == "function" ? e == null ? void 0 : e.confirmDialogProps(a, n) : e == null ? void 0 : e.confirmDialogProps;
-    return (e, a) => {
-      var n, s, v;
-      return d(), c("div", se(ie((n = r(u)) == null ? void 0 : n.root)), [
-        x("div", se(ie((s = r(u)) == null ? void 0 : s.tablewrapper)), [
-          _(r(Dt), p({ "auto-hide": !1 }, (v = r(u)) == null ? void 0 : v.scrollheightwrapper({ props: t }), { class: "custom-scrollbar" }), {
-            default: de(() => {
-              var i, b, f, w, k;
+      eventBus.emit("data-table:update-total-record", data);
+    };
+    const listenUpdateTableEvent = () => {
+      eventBus.on("data-table:update", handleUpdateTableEvent);
+    };
+    const populateDataTableFromExcel = (e) => {
+      if (e.tableName === props.tableName) {
+        currentPageTableData.value = e.data;
+        rowReorderData.value = [...currentPageTableData.value];
+        totalRecords.value = e.data.length;
+      }
+    };
+    const getConfirmDialogProps = (preset, state, rowData) => {
+      return typeof (preset == null ? void 0 : preset.confirmDialogProps) == "function" ? preset == null ? void 0 : preset.confirmDialogProps(state, rowData) : preset == null ? void 0 : preset.confirmDialogProps;
+    };
+    return (_ctx, _cache) => {
+      var _a, _b, _c;
+      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps((_a = unref(Preset)) == null ? void 0 : _a.root)), [
+        createElementVNode("div", normalizeProps(guardReactiveProps((_b = unref(Preset)) == null ? void 0 : _b.tablewrapper)), [
+          createVNode(unref(simplebar), mergeProps({ "auto-hide": false }, (_c = unref(Preset)) == null ? void 0 : _c.scrollheightwrapper({ props }), { class: "custom-scrollbar" }), {
+            default: withCtx(() => {
+              var _a2, _b2, _c2, _d, _e;
               return [
-                (d(), c("table", p({ id: r(Re) }, (i = r(u)) == null ? void 0 : i.table, {
-                  key: ze.value,
-                  ref: Ua.value
+                (openBlock(), createElementBlock("table", mergeProps({ id: unref(dataTableID) }, (_a2 = unref(Preset)) == null ? void 0 : _a2.table, {
+                  key: tableKey.value,
+                  ref: tableElement.value
                 }), [
-                  x("thead", se(ie(r(u).thead)), [
-                    x("tr", se(ie(r(u).headerrow)), [
-                      e.reorderable && !D.value ? (d(), c("th", p({ key: 0 }, r(u).headercellreorderable, {
-                        class: oe().class
-                      }), null, 16)) : y("", !0),
-                      e.selectionType === "checkbox" ? (d(), c("th", p({ key: 1 }, r(u).headercellcheckbox, {
-                        class: oe().class
+                  createElementVNode("thead", normalizeProps(guardReactiveProps(unref(Preset).thead)), [
+                    createElementVNode("tr", normalizeProps(guardReactiveProps(unref(Preset).headerrow)), [
+                      _ctx.reorderable && !sortOrder.value ? (openBlock(), createElementBlock("th", mergeProps({ key: 0 }, unref(Preset).headercellreorderable, {
+                        class: headerCellPreset().class
+                      }), null, 16)) : createCommentVNode("", true),
+                      _ctx.selectionType === "checkbox" ? (openBlock(), createElementBlock("th", mergeProps({ key: 1 }, unref(Preset).headercellcheckbox, {
+                        class: headerCellPreset().class
                       }), [
-                        _(Be, p(
-                          (b = r(u)) == null ? void 0 : b.headercheckbox({ context: { isSelectedAll: Je.value } }),
+                        createVNode(_sfc_main$1, mergeProps(
+                          (_b2 = unref(Preset)) == null ? void 0 : _b2.headercheckbox({ context: { isSelectedAll: isSelectedAll.value } }),
                           {
-                            "model-value": Je.value,
-                            "onUpdate:modelValue": a[0] || (a[0] = (l) => Qa(!!l)),
+                            "model-value": isSelectedAll.value,
+                            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => toggleAllDataSelection(!!$event)),
                             binary: ""
                           }
                         ), null, 16, ["model-value"])
-                      ], 16)) : y("", !0),
-                      e.treeTable ? (d(), c("th", p({ key: 2 }, r(u).headertoggler, {
-                        class: oe().class
+                      ], 16)) : createCommentVNode("", true),
+                      _ctx.treeTable ? (openBlock(), createElementBlock("th", mergeProps({ key: 2 }, unref(Preset).headertoggler, {
+                        class: headerCellPreset().class
                       }), [
-                        _($e, p(
-                          { onClick: qa },
-                          r(u).headertogglerbutton({ context: { isExpandedAll: Ge.value } }),
+                        createVNode(_sfc_main$2, mergeProps(
+                          { onClick: toggleExpandAll },
+                          unref(Preset).headertogglerbutton({ context: { isExpandedAll: isExpandedAll.value } }),
                           {
                             icon: "arrow-down",
                             text: ""
                           }
                         ), null, 16)
-                      ], 16)) : y("", !0),
-                      (d(!0), c(P, null, Z(O.value, (l) => (d(), c("th", p({
-                        key: l.field,
-                        class: [l.headerClass, l.class],
-                        ref_for: !0
-                      }, oe(l), {
-                        onClick: (h) => l.sortable ? st(l.field, h) : null
-                      }), [
-                        x("span", p({ ref_for: !0 }, r(u).headercellcontent), [
-                          x("span", Vt, [
-                            ue(H(l.header) + " ", 1),
-                            l.info ? (d(), E(Q, {
+                      ], 16)) : createCommentVNode("", true),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col) => {
+                        return openBlock(), createElementBlock("th", mergeProps({
+                          key: col.field,
+                          class: [col.headerClass, col.class],
+                          ref_for: true
+                        }, headerCellPreset(col), {
+                          onClick: ($event) => col.sortable ? sortColumn(col.field, $event) : null
+                        }), [
+                          createElementVNode("span", mergeProps({ ref_for: true }, unref(Preset).headercellcontent), [
+                            createElementVNode("span", _hoisted_3, [
+                              createTextVNode(toDisplayString(col.header) + " ", 1),
+                              col.info ? (openBlock(), createBlock(_sfc_main$3, {
+                                key: 0,
+                                info: col.info,
+                                severity: col.infoSeverity,
+                                class: "w-[10px] h-[10px]",
+                                icon: "info"
+                              }, null, 8, ["info", "severity"])) : createCommentVNode("", true)
+                            ]),
+                            col.sortable ? (openBlock(), createBlock(_sfc_main$3, {
                               key: 0,
-                              info: l.info,
-                              severity: l.infoSeverity,
-                              class: "w-[10px] h-[10px]",
-                              icon: "info"
-                            }, null, 8, ["info", "severity"])) : y("", !0)
-                          ]),
-                          l.sortable ? (d(), E(Q, {
-                            key: 0,
-                            icon: !N.value || N.value != l.field ? "arrow-up-down" : D.value == 1 ? "sort-asc" : "sort-desc",
-                            class: "text-base"
-                          }, null, 8, ["icon"])) : y("", !0)
-                        ], 16)
-                      ], 16, jt))), 128)),
-                      Ke.value ? (d(), c("th", p({ key: 3 }, oe(void 0, t.customColumn), {
-                        id: `column-visibility-toggle-${r(Re)}`,
-                        onClick: a[1] || (a[1] = //@ts-ignore
-                        (...l) => {
-                          var h, ne;
-                          return ((h = Te.value) == null ? void 0 : h.toggleMenu) && ((ne = Te.value) == null ? void 0 : ne.toggleMenu(...l));
+                              icon: !sortBy.value || sortBy.value != col.field ? "arrow-up-down" : sortOrder.value == 1 ? "sort-asc" : "sort-desc",
+                              class: "text-base"
+                            }, null, 8, ["icon"])) : createCommentVNode("", true)
+                          ], 16)
+                        ], 16, _hoisted_2);
+                      }), 128)),
+                      showCustomColumn.value ? (openBlock(), createElementBlock("th", mergeProps({ key: 3 }, headerCellPreset(void 0, props.customColumn), {
+                        id: `column-visibility-toggle-${unref(dataTableID)}`,
+                        onClick: _cache[1] || (_cache[1] = //@ts-ignore
+                        (...args) => {
+                          var _a3, _b3;
+                          return ((_a3 = customColumn.value) == null ? void 0 : _a3.toggleMenu) && ((_b3 = customColumn.value) == null ? void 0 : _b3.toggleMenu(...args));
                         })
                       }), [
-                        t.customColumn ? (d(), E(Q, p({ key: 0 }, r(u).columnvisibilityicon, {
+                        props.customColumn ? (openBlock(), createBlock(_sfc_main$3, mergeProps({ key: 0 }, unref(Preset).columnvisibilityicon, {
                           icon: "ellipsis-h",
                           "tooltip-pos": "left"
-                        }), null, 16)) : y("", !0)
-                      ], 16, Qt)) : y("", !0)
+                        }), null, 16)) : createCommentVNode("", true)
+                      ], 16, _hoisted_4)) : createCommentVNode("", true)
                     ], 16)
                   ], 16),
-                  x("tbody", se(ie((f = r(u)) == null ? void 0 : f.tbody)), [
-                    Pe.value ? (d(), c("tr", Wt, [
-                      x("td", p({ colspan: We.value }, (w = r(u)) == null ? void 0 : w.bodycell), [
-                        (d(!0), c(P, null, Z(r(u).invisiblelottiewrapper ? 2 : 1, (l) => (d(), c("div", p(
-                          {
-                            key: l,
-                            ref_for: !0
-                          },
-                          l === 1 ? r(u).loadingtablewrapper : r(u).invisiblelottiewrapper
-                        ), [
-                          _(Ce, p({
-                            animation: "loading-table",
-                            ref_for: !0
-                          }, r(u).loadingtablelottie), null, 16)
-                        ], 16))), 128))
-                      ], 16, qt)
-                    ])) : za.value ? (d(), c("tr", ol, [
-                      x("td", p({ colspan: We.value }, (k = r(u)) == null ? void 0 : k.bodycell), [
-                        (d(!0), c(P, null, Z(r(u).invisiblelottiewrapper ? 2 : 1, (l) => (d(), c("div", p(
-                          {
-                            key: l,
-                            ref_for: !0
-                          },
-                          l === 1 ? r(u).nodatalottiewrapper : r(u).invisiblelottiewrapper
-                        ), [
-                          _(Ce, p({
-                            animation: "no-data",
-                            ref_for: !0
-                          }, r(u).nodatalottie), null, 16),
-                          X.value.emptyTableMessage ? (d(), c("span", p({
-                            key: 0,
-                            ref_for: !0
-                          }, r(u).nodatamessage), H(X.value.emptyTableMessage), 17)) : y("", !0)
-                        ], 16))), 128))
-                      ], 16, nl)
-                    ])) : (d(!0), c(P, { key: 1 }, Z(ja.value, (l, h) => {
-                      var ne, sa, ia, da, ua, ca, pa, fa, va, ba, ga;
-                      return d(), c("tr", p(
+                  createElementVNode("tbody", normalizeProps(guardReactiveProps((_c2 = unref(Preset)) == null ? void 0 : _c2.tbody)), [
+                    tableIsLoading.value ? (openBlock(), createElementBlock("tr", _hoisted_5, [
+                      createElementVNode("td", mergeProps({ colspan: columnsCount.value }, (_d = unref(Preset)) == null ? void 0 : _d.bodycell), [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(Preset).invisiblelottiewrapper ? 2 : 1, (i) => {
+                          return openBlock(), createElementBlock("div", mergeProps(
+                            {
+                              key: i,
+                              ref_for: true
+                            },
+                            i === 1 ? unref(Preset).loadingtablewrapper : unref(Preset).invisiblelottiewrapper
+                          ), [
+                            createVNode(_sfc_main$4, mergeProps({
+                              animation: "loading-table",
+                              ref_for: true
+                            }, unref(Preset).loadingtablelottie), null, 16)
+                          ], 16);
+                        }), 128))
+                      ], 16, _hoisted_6)
+                    ])) : !currentPageHasNoData.value ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(renderedTableData.value, (item, index) => {
+                      var _a3, _b3, _c3, _d2, _e2, _f, _g, _h, _i, _j, _k;
+                      return openBlock(), createElementBlock("tr", mergeProps(
                         {
-                          id: l._id,
-                          key: `${h}-${l[e.dataKey]}`,
-                          draggable: Ne(l),
-                          ref_for: !0
+                          id: item._id,
+                          key: `${index}-${item[_ctx.dataKey]}`,
+                          draggable: draggable(item),
+                          ref_for: true
                         },
-                        (ne = r(u)) == null ? void 0 : ne.bodyrow({
+                        (_a3 = unref(Preset)) == null ? void 0 : _a3.bodyrow({
                           context: {
-                            highlighted: l[e.highlightKey ?? ""],
-                            selected: Se(l[e.dataKey]),
-                            disabled: J(l[e.dataKey]),
-                            draggable: Ne(l),
-                            dragging: De.value
+                            highlighted: item[_ctx.highlightKey ?? ""],
+                            selected: isRowSelected(item[_ctx.dataKey]),
+                            disabled: isRowDisabled(item[_ctx.dataKey]),
+                            draggable: draggable(item),
+                            dragging: dragging.value
                           },
-                          props: t
+                          props
                         }),
                         {
-                          onClick: (o) => Wa(o, l, h),
-                          onDblclick: (o) => {
-                            var V;
-                            return e.treeTable && ((V = l.children) != null && V.length || l.hasChildren) ? ye(l, h) : null;
+                          onClick: ($event) => toggleRowSelection($event, item, index),
+                          onDblclick: ($event) => {
+                            var _a4;
+                            return _ctx.treeTable && (((_a4 = item.children) == null ? void 0 : _a4.length) || item.hasChildren) ? toggleRowExpand(item, index) : null;
                           },
-                          onDrag: a[11] || (a[11] = (o) => De.value = !0),
-                          onDragenter: S((o) => Ya(o, l), ["prevent"]),
-                          onDragleave: a[12] || (a[12] = S(() => {
+                          onDrag: _cache[11] || (_cache[11] = ($event) => dragging.value = true),
+                          onDragenter: withModifiers(($event) => onDragEnter($event, item), ["prevent"]),
+                          onDragleave: _cache[12] || (_cache[12] = withModifiers(() => {
                           }, ["prevent"])),
-                          onDragover: a[13] || (a[13] = S(() => {
+                          onDragover: _cache[13] || (_cache[13] = withModifiers(() => {
                           }, ["prevent"])),
-                          onDragstart: (o) => Ja(o, l, h),
-                          onDrop: Za
+                          onDragstart: ($event) => startReorderRow($event, item, index),
+                          onDrop: onRowReorder
                         }
                       ), [
-                        e.reorderable && !D.value ? (d(), c("td", p({
+                        _ctx.reorderable && !sortOrder.value ? (openBlock(), createElementBlock("td", mergeProps({
                           key: 0,
-                          ref_for: !0
-                        }, (sa = r(u)) == null ? void 0 : sa.bodycell), [
-                          !l.childRow && !l.childRowHeader ? (d(), E(Q, {
+                          ref_for: true
+                        }, (_b3 = unref(Preset)) == null ? void 0 : _b3.bodycell), [
+                          !item.childRow && !item.childRowHeader ? (openBlock(), createBlock(_sfc_main$3, {
                             key: 0,
                             class: "draggableicon",
                             icon: "dragable-menu"
-                          })) : y("", !0)
-                        ], 16)) : y("", !0),
-                        e.selectionType === "checkbox" ? (d(), c("td", p({
+                          })) : createCommentVNode("", true)
+                        ], 16)) : createCommentVNode("", true),
+                        _ctx.selectionType === "checkbox" ? (openBlock(), createElementBlock("td", mergeProps({
                           key: 1,
-                          ref_for: !0
-                        }, (ia = r(u)) == null ? void 0 : ia.bodycell, {
-                          onClick: a[3] || (a[3] = S(() => {
+                          ref_for: true
+                        }, (_c3 = unref(Preset)) == null ? void 0 : _c3.bodycell, {
+                          onClick: _cache[3] || (_cache[3] = withModifiers(() => {
                           }, ["stop"]))
                         }), [
-                          !l.childRow && !l.childRowHeader ? (d(), E(Be, p({
+                          !item.childRow && !item.childRowHeader ? (openBlock(), createBlock(_sfc_main$1, mergeProps({
                             key: 0,
-                            ref_for: !0
-                          }, (da = r(u)) == null ? void 0 : da.rowcheckbox, {
-                            modelValue: T.value,
-                            "onUpdate:modelValue": a[2] || (a[2] = (o) => T.value = o),
-                            binary: !1,
-                            disabled: J(l[e.dataKey]),
-                            value: l
-                          }), null, 16, ["modelValue", "disabled", "value"])) : y("", !0)
-                        ], 16)) : y("", !0),
-                        e.treeTable ? (d(), c("td", p({
+                            ref_for: true
+                          }, (_d2 = unref(Preset)) == null ? void 0 : _d2.rowcheckbox, {
+                            modelValue: checkboxSelection.value,
+                            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => checkboxSelection.value = $event),
+                            binary: false,
+                            disabled: isRowDisabled(item[_ctx.dataKey]),
+                            value: item
+                          }), null, 16, ["modelValue", "disabled", "value"])) : createCommentVNode("", true)
+                        ], 16)) : createCommentVNode("", true),
+                        _ctx.treeTable ? (openBlock(), createElementBlock("td", mergeProps({
                           key: 2,
-                          ref_for: !0
-                        }, (ua = r(u)) == null ? void 0 : ua.bodycell, {
-                          onClick: (o) => {
-                            (l.childRow || l.childRowHeader) && o.stopPropagation();
+                          ref_for: true
+                        }, (_e2 = unref(Preset)) == null ? void 0 : _e2.bodycell, {
+                          onClick: (e) => {
+                            (item.childRow || item.childRowHeader) && e.stopPropagation();
                           }
                         }), [
-                          (ca = l.children) != null && ca.length || l.hasChildren ? (d(), E($e, p(
+                          ((_f = item.children) == null ? void 0 : _f.length) || item.hasChildren ? (openBlock(), createBlock(_sfc_main$2, mergeProps(
                             {
                               key: 0,
-                              onClick: S((o) => ye(l, h), ["stop"]),
-                              ref_for: !0
+                              onClick: withModifiers(($event) => toggleRowExpand(item, index), ["stop"]),
+                              ref_for: true
                             },
-                            r(u).rowtogglerbutton({
+                            unref(Preset).rowtogglerbutton({
                               context: {
-                                isRowExpanded: Ee(l[e.dataKey])
+                                isRowExpanded: isRowExpanded(item[_ctx.dataKey])
                               }
                             }),
                             {
                               icon: "arrow-down",
                               text: ""
                             }
-                          ), null, 16, ["onClick"])) : y("", !0)
-                        ], 16, Jt)) : y("", !0),
+                          ), null, 16, ["onClick"])) : createCommentVNode("", true)
+                        ], 16, _hoisted_8)) : createCommentVNode("", true),
                         (() => {
-                          var o;
-                          return l.childRowHeader && ((o = t.childTableProps) == null ? void 0 : o.useColumnsHeader);
-                        })() ? (d(), c(P, { key: 3 }, [
-                          (d(!0), c(P, null, Z(Qe.value, (o) => {
-                            var V, re;
-                            return d(), c("td", {
-                              key: o.header,
-                              class: ke([(V = r(u)) == null ? void 0 : V.bodycell.class, "font-semibold text-xs"]),
-                              colspan: o.colspan ?? ((re = o.parentColumnsFields) == null ? void 0 : re.length),
-                              onClick: a[4] || (a[4] = S(() => {
+                          var _a4;
+                          return item.childRowHeader && ((_a4 = props.childTableProps) == null ? void 0 : _a4.useColumnsHeader);
+                        })() ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleChildTableColumns.value, (col) => {
+                            var _a4, _b4;
+                            return openBlock(), createElementBlock("td", {
+                              key: col.header,
+                              class: normalizeClass([(_a4 = unref(Preset)) == null ? void 0 : _a4.bodycell.class, "font-semibold text-xs"]),
+                              colspan: col.colspan ?? ((_b4 = col.parentColumnsFields) == null ? void 0 : _b4.length),
+                              onClick: _cache[4] || (_cache[4] = withModifiers(() => {
                               }, ["stop"]))
-                            }, H(o.header), 11, Yt);
+                            }, toDisplayString(col.header), 11, _hoisted_9);
                           }), 128)),
-                          Ke.value ? (d(), c("td", {
+                          showCustomColumn.value ? (openBlock(), createElementBlock("td", {
                             key: 0,
-                            class: ke(r(u).bodycell.class),
-                            onClick: a[5] || (a[5] = S(() => {
+                            class: normalizeClass(unref(Preset).bodycell.class),
+                            onClick: _cache[5] || (_cache[5] = withModifiers(() => {
                             }, ["stop"]))
-                          }, null, 2)) : y("", !0)
-                        ], 64)) : l.childRowHeader ? (d(), c("td", p({
+                          }, null, 2)) : createCommentVNode("", true)
+                        ], 64)) : item.childRowHeader ? (openBlock(), createElementBlock("td", mergeProps({
                           key: 4,
-                          ref_for: !0
-                        }, r(u).childrowheader, {
-                          class: (pa = r(u)) == null ? void 0 : pa.bodycell.class,
-                          colspan: t.columns.length + 1,
-                          onClick: a[6] || (a[6] = S(() => {
+                          ref_for: true
+                        }, unref(Preset).childrowheader, {
+                          class: (_g = unref(Preset)) == null ? void 0 : _g.bodycell.class,
+                          colspan: props.columns.length + 1,
+                          onClick: _cache[6] || (_cache[6] = withModifiers(() => {
                           }, ["stop"]))
-                        }), H(l.header), 17, Zt)) : l.loadingRow ? (d(), c("td", {
+                        }), toDisplayString(item.header), 17, _hoisted_10)) : item.loadingRow ? (openBlock(), createElementBlock("td", {
                           key: 5,
-                          class: ke((fa = r(u)) == null ? void 0 : fa.bodycell.class),
-                          colspan: t.columns.length + 1,
-                          onClick: a[7] || (a[7] = S(() => {
+                          class: normalizeClass((_h = unref(Preset)) == null ? void 0 : _h.bodycell.class),
+                          colspan: props.columns.length + 1,
+                          onClick: _cache[7] || (_cache[7] = withModifiers(() => {
                           }, ["stop"]))
                         }, [
-                          x("div", p({ ref_for: !0 }, r(u).loadingtablewrapper), [
-                            _(Ce, p({
+                          createElementVNode("div", mergeProps({ ref_for: true }, unref(Preset).loadingtablewrapper), [
+                            createVNode(_sfc_main$4, mergeProps({
                               animation: "loading-table",
-                              ref_for: !0
-                            }, r(u).loadingtablelottie), null, 16)
+                              ref_for: true
+                            }, unref(Preset).loadingtablelottie), null, 16)
                           ], 16)
-                        ], 10, Xt)) : l.noDataRow ? (d(), c("td", {
+                        ], 10, _hoisted_11)) : item.noDataRow ? (openBlock(), createElementBlock("td", {
                           key: 6,
-                          class: ke((va = r(u)) == null ? void 0 : va.bodycell.class),
-                          colspan: t.columns.length + 1,
-                          onClick: a[8] || (a[8] = S(() => {
+                          class: normalizeClass((_i = unref(Preset)) == null ? void 0 : _i.bodycell.class),
+                          colspan: props.columns.length + 1,
+                          onClick: _cache[8] || (_cache[8] = withModifiers(() => {
                           }, ["stop"]))
                         }, [
-                          x("div", p({ ref_for: !0 }, r(u).nodatalottiewrapper), [
-                            _(Ce, p({
+                          createElementVNode("div", mergeProps({ ref_for: true }, unref(Preset).nodatalottiewrapper), [
+                            createVNode(_sfc_main$4, mergeProps({
                               animation: "no-data",
-                              ref_for: !0
-                            }, r(u).nodatalottie), null, 16),
-                            X.value.emptyTableMessage ? (d(), c("span", p({
+                              ref_for: true
+                            }, unref(Preset).nodatalottie), null, 16),
+                            config.value.emptyTableMessage ? (openBlock(), createElementBlock("span", mergeProps({
                               key: 0,
-                              ref_for: !0
-                            }, r(u).nodatamessage), H(X.value.emptyTableMessage), 17)) : y("", !0)
+                              ref_for: true
+                            }, unref(Preset).nodatamessage), toDisplayString(config.value.emptyTableMessage), 17)) : createCommentVNode("", true)
                           ], 16)
-                        ], 10, el)) : (d(), c(P, { key: 7 }, [
-                          (d(!0), c(P, null, Z(l.childRow ? Qe.value : O.value, (o) => {
-                            var V, re, ya, ha, ma, wa, ka, Ca, Ra, Da, Ta, _a, Pa, Ka, Ea, me, Sa, Na;
-                            return d(), c("td", p({
-                              key: o.field,
+                        ], 10, _hoisted_12)) : (openBlock(), createElementBlock(Fragment, { key: 7 }, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(item.childRow ? visibleChildTableColumns.value : visibleColumns.value, (col) => {
+                            var _a4, _b4, _c4, _d3, _e3, _f2, _g2, _h2, _i2, _j2, _k2, _l, _m, _n, _o, _p, _q, _r;
+                            return openBlock(), createElementBlock("td", mergeProps({
+                              key: col.field,
                               class: [
                                 {
-                                  "!py-0": o.editable,
-                                  "!px-0": ((V = o.preset) == null ? void 0 : V.type) === "multirow"
+                                  "!py-0": col.editable,
+                                  "!px-0": ((_a4 = col.preset) == null ? void 0 : _a4.type) === "multirow"
                                 },
-                                typeof o.bodyClass == "function" ? o.bodyClass(l) : o.bodyClass,
-                                o.class
+                                typeof col.bodyClass === "function" ? col.bodyClass(item) : col.bodyClass,
+                                col.class
                               ],
-                              colspan: o.colspan ?? ((re = o.parentColumnsFields) == null ? void 0 : re.length),
-                              ref_for: !0
-                            }, (ya = r(u)) == null ? void 0 : ya.bodycell), [
-                              ((ha = o.preset) == null ? void 0 : ha.type) === "toggle" || ((ma = o.preset) == null ? void 0 : ma.type) === "checkbox" ? (d(), c(P, { key: 0 }, [
-                                ((wa = o.preset) == null ? void 0 : wa.type) === "toggle" ? (d(), E(Mt, {
+                              colspan: col.colspan ?? ((_b4 = col.parentColumnsFields) == null ? void 0 : _b4.length),
+                              ref_for: true
+                            }, (_c4 = unref(Preset)) == null ? void 0 : _c4.bodycell), [
+                              ((_d3 = col.preset) == null ? void 0 : _d3.type) === "toggle" || ((_e3 = col.preset) == null ? void 0 : _e3.type) === "checkbox" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                                ((_f2 = col.preset) == null ? void 0 : _f2.type) === "toggle" ? (openBlock(), createBlock(_sfc_main$5, {
                                   key: 0,
-                                  disabled: J(l[e.dataKey]) || (typeof ((ka = o.preset) == null ? void 0 : ka.disabled) == "function" ? (Ca = o.preset) == null ? void 0 : Ca.disabled(l) : (Ra = o.preset) == null ? void 0 : Ra.disabled),
-                                  "input-id": l[e.dataKey],
-                                  "model-value": r(B)(l, o.field),
-                                  onClick: a[9] || (a[9] = S(() => {
+                                  disabled: isRowDisabled(item[_ctx.dataKey]) || (typeof ((_g2 = col.preset) == null ? void 0 : _g2.disabled) === "function" ? (_h2 = col.preset) == null ? void 0 : _h2.disabled(item) : (_i2 = col.preset) == null ? void 0 : _i2.disabled),
+                                  "input-id": item[_ctx.dataKey],
+                                  "model-value": unref(getNestedPropertyValue)(item, col.field),
+                                  onClick: _cache[9] || (_cache[9] = withModifiers(() => {
                                   }, ["stop"])),
-                                  "onUpdate:modelValue": (C) => {
-                                    r(ce)(l, o.field, C), Ye(C, l, o);
+                                  "onUpdate:modelValue": (e) => {
+                                    unref(setNestedPropertyValue)(item, col.field, e);
+                                    onColumnTogglePresetChange(e, item, col);
                                   }
-                                }, null, 8, ["disabled", "input-id", "model-value", "onUpdate:modelValue"])) : y("", !0),
-                                ((Da = o.preset) == null ? void 0 : Da.type) === "checkbox" ? (d(), E(Be, {
+                                }, null, 8, ["disabled", "input-id", "model-value", "onUpdate:modelValue"])) : createCommentVNode("", true),
+                                ((_j2 = col.preset) == null ? void 0 : _j2.type) === "checkbox" ? (openBlock(), createBlock(_sfc_main$1, {
                                   key: 1,
-                                  disabled: J(l[e.dataKey]) || (typeof ((Ta = o.preset) == null ? void 0 : Ta.disabled) == "function" ? (_a = o.preset) == null ? void 0 : _a.disabled(l) : (Pa = o.preset) == null ? void 0 : Pa.disabled),
-                                  "input-id": l[e.dataKey],
-                                  "model-value": r(B)(l, o.field),
-                                  onClick: a[10] || (a[10] = S(() => {
+                                  disabled: isRowDisabled(item[_ctx.dataKey]) || (typeof ((_k2 = col.preset) == null ? void 0 : _k2.disabled) === "function" ? (_l = col.preset) == null ? void 0 : _l.disabled(item) : (_m = col.preset) == null ? void 0 : _m.disabled),
+                                  "input-id": item[_ctx.dataKey],
+                                  "model-value": unref(getNestedPropertyValue)(item, col.field),
+                                  onClick: _cache[10] || (_cache[10] = withModifiers(() => {
                                   }, ["stop"])),
-                                  "onUpdate:modelValue": (C) => {
-                                    r(ce)(l, o.field, !!C), Ye(!!C, l, o);
+                                  "onUpdate:modelValue": (e) => {
+                                    unref(setNestedPropertyValue)(item, col.field, !!e);
+                                    onColumnTogglePresetChange(!!e, item, col);
                                   },
                                   binary: ""
-                                }, null, 8, ["disabled", "input-id", "model-value", "onUpdate:modelValue"])) : y("", !0),
-                                (Ka = o.preset) != null && Ka.confirmDialogProps ? (d(), E(Ht, p(
+                                }, null, 8, ["disabled", "input-id", "model-value", "onUpdate:modelValue"])) : createCommentVNode("", true),
+                                ((_n = col.preset) == null ? void 0 : _n.confirmDialogProps) ? (openBlock(), createBlock(_sfc_main$6, mergeProps(
                                   {
                                     key: 2,
-                                    list: [l],
-                                    visible: !!ge.value[l[e.dataKey] + o.field],
+                                    list: [item],
+                                    visible: !!showConfirmToggle.value[item[_ctx.dataKey] + col.field],
                                     onClose: () => {
-                                      var K, A, Aa;
-                                      const C = () => r(ce)(
-                                        l,
-                                        o.field,
-                                        !r(B)(l, o.field)
+                                      var _a5, _b5, _c5;
+                                      const revert = () => unref(setNestedPropertyValue)(
+                                        item,
+                                        col.field,
+                                        !unref(getNestedPropertyValue)(item, col.field)
                                       );
-                                      ((K = He(
-                                        o.preset,
-                                        l[o.field],
-                                        l
-                                      )) == null ? void 0 : K.actionable) == !1 && "onConfirm" in o.preset ? (Aa = (A = o.preset).onConfirm) == null || Aa.call(
-                                        A,
-                                        l[o.field],
-                                        l,
-                                        C
-                                      ) : C();
+                                      if (((_a5 = getConfirmDialogProps(
+                                        col.preset,
+                                        item[col.field],
+                                        item
+                                      )) == null ? void 0 : _a5.actionable) == false && "onConfirm" in col.preset) {
+                                        (_c5 = (_b5 = col.preset).onConfirm) == null ? void 0 : _c5.call(
+                                          _b5,
+                                          item[col.field],
+                                          item,
+                                          revert
+                                        );
+                                      } else revert();
                                     },
-                                    onConfirm: (C) => {
-                                      var K, A;
-                                      return (A = (K = o.preset) == null ? void 0 : K.onConfirm) == null ? void 0 : A.call(
-                                        K,
-                                        l[o.field],
-                                        l,
-                                        () => r(ce)(
-                                          l,
-                                          o.field,
-                                          !r(B)(l, o.field)
+                                    onConfirm: ($event) => {
+                                      var _a5, _b5;
+                                      return (_b5 = (_a5 = col.preset) == null ? void 0 : _a5.onConfirm) == null ? void 0 : _b5.call(
+                                        _a5,
+                                        item[col.field],
+                                        item,
+                                        () => unref(setNestedPropertyValue)(
+                                          item,
+                                          col.field,
+                                          !unref(getNestedPropertyValue)(item, col.field)
                                         )
                                       );
                                     },
-                                    "onUpdate:visible": (C) => ge.value[l[e.dataKey] + o.field] = C,
+                                    "onUpdate:visible": ($event) => showConfirmToggle.value[item[_ctx.dataKey] + col.field] = $event,
                                     actionable: "",
-                                    ref_for: !0
+                                    ref_for: true
                                   },
-                                  He(
-                                    o.preset,
-                                    l[o.field],
-                                    l
+                                  getConfirmDialogProps(
+                                    col.preset,
+                                    item[col.field],
+                                    item
                                   )
-                                ), null, 16, ["list", "visible", "onClose", "onConfirm", "onUpdate:visible"])) : y("", !0)
-                              ], 64)) : ((Ea = o.preset) == null ? void 0 : Ea.type) === "multirow" ? (d(), E(Ot, {
+                                ), null, 16, ["list", "visible", "onClose", "onConfirm", "onUpdate:visible"])) : createCommentVNode("", true)
+                              ], 64)) : ((_o = col.preset) == null ? void 0 : _o.type) === "multirow" ? (openBlock(), createBlock(_sfc_main$7, {
                                 key: 1,
-                                attributes: ((Sa = (me = o.preset) == null ? void 0 : me.fieldAttributes) == null ? void 0 : Sa.call(me, l)) ?? []
-                              }, null, 8, ["attributes"])) : o.editable ? (d(), c("span", p({
+                                attributes: ((_q = (_p = col.preset) == null ? void 0 : _p.fieldAttributes) == null ? void 0 : _q.call(_p, item)) ?? []
+                              }, null, 8, ["attributes"])) : col.editable ? (openBlock(), createElementBlock("span", mergeProps({
                                 key: 2,
-                                ref_for: !0
-                              }, r(u).celleditableelement, {
-                                contenteditable: o.editable,
-                                onBlur: (C) => {
-                                  e.$emit("cellEdited", {
-                                    item: l,
-                                    field: o.field,
-                                    index: h,
-                                    value: C.target.innerText
+                                ref_for: true
+                              }, unref(Preset).celleditableelement, {
+                                contenteditable: col.editable,
+                                onBlur: (e) => {
+                                  _ctx.$emit("cellEdited", {
+                                    item,
+                                    field: col.field,
+                                    index,
+                                    value: e.target.innerText
                                   });
                                 },
-                                onKeypress: (C) => {
-                                  o.numberInputOnly && ft(C);
+                                onKeypress: ($event) => {
+                                  if (col.numberInputOnly) preventCharInput($event);
                                 }
-                              }), H(r(B)(l, o.field) || "-"), 17, tl)) : o.bodyComponent || o.bodyClass || o.bodyTemplate || o.dateFormatOptions ? (d(), c(P, { key: 3 }, [
-                                o.bodyComponent ? (d(), E(kt(o.bodyComponent(l, h).component), p({
+                              }), toDisplayString(unref(getNestedPropertyValue)(item, col.field) || "-"), 17, _hoisted_14)) : col.bodyComponent || col.bodyClass || col.bodyTemplate || col.dateFormatOptions ? (openBlock(), createElementBlock(Fragment, { key: 3 }, [
+                                col.bodyComponent ? (openBlock(), createBlock(resolveDynamicComponent(col.bodyComponent(item, index).component), mergeProps({
                                   key: 0,
-                                  modelValue: o.bodyComponent(l, h).model,
-                                  "onUpdate:modelValue": (C) => o.bodyComponent(l, h).model = C,
-                                  disabled: o.bodyComponent(l, h).disabled,
-                                  ref_for: !0
-                                }, o.bodyComponent(l, h).props, Ct(
-                                  o.bodyComponent(l, h).events ? o.bodyComponent(l, h).events : {}
+                                  modelValue: col.bodyComponent(item, index).model,
+                                  "onUpdate:modelValue": ($event) => col.bodyComponent(item, index).model = $event,
+                                  disabled: col.bodyComponent(item, index).disabled,
+                                  ref_for: true
+                                }, col.bodyComponent(item, index).props, toHandlers(
+                                  col.bodyComponent(item, index).events ? col.bodyComponent(item, index).events : {}
                                 ), {
-                                  onChange: (C) => {
-                                    var K, A;
-                                    return (A = (K = o.bodyComponent(l, h)).onChange) == null ? void 0 : A.call(K, l);
+                                  onChange: ($event) => {
+                                    var _a5, _b5;
+                                    return (_b5 = (_a5 = col.bodyComponent(item, index)).onChange) == null ? void 0 : _b5.call(_a5, item);
                                   },
-                                  onClick: (C) => {
-                                    o.bodyComponent(l, h).stop !== !1 && C.stopPropagation();
+                                  onClick: (e) => {
+                                    if (col.bodyComponent(item, index).stop !== false) {
+                                      e.stopPropagation();
+                                    }
                                   },
-                                  "onUpdate:modelValue": (C) => {
-                                    var K, A;
-                                    return (A = (K = o.bodyComponent(l, h)).onChange) == null ? void 0 : A.call(K, l);
+                                  "onUpdate:modelValue": ($event) => {
+                                    var _a5, _b5;
+                                    return (_b5 = (_a5 = col.bodyComponent(item, index)).onChange) == null ? void 0 : _b5.call(_a5, item);
                                   }
-                                }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "onChange", "onClick"])) : (d(), c("span", ll, [
-                                  o.bodyTemplate ? (d(), c(P, { key: 0 }, [
-                                    ue(H(((Na = o.bodyTemplate) == null ? void 0 : Na.call(o, l, h)) || "-"), 1)
-                                  ], 64)) : o.dateFormatOptions ? (d(), c(P, { key: 1 }, [
-                                    ue(H(r(Pt)(
+                                }), null, 16, ["modelValue", "onUpdate:modelValue", "disabled", "onChange", "onClick"])) : (openBlock(), createElementBlock("span", _hoisted_15, [
+                                  col.bodyTemplate ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                                    createTextVNode(toDisplayString(((_r = col.bodyTemplate) == null ? void 0 : _r.call(col, item, index)) || "-"), 1)
+                                  ], 64)) : col.dateFormatOptions ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                                    createTextVNode(toDisplayString(unref(formatDate)(
                                       new Date(
-                                        r(B)(
-                                          l,
-                                          o.field
+                                        unref(getNestedPropertyValue)(
+                                          item,
+                                          col.field
                                         )
                                       ),
-                                      o.dateFormatOptions
+                                      col.dateFormatOptions
                                     )), 1)
-                                  ], 64)) : (d(), c(P, { key: 2 }, [
-                                    ue(H(r(B)(l, o.field) || "-"), 1)
+                                  ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                                    createTextVNode(toDisplayString(unref(getNestedPropertyValue)(item, col.field) || "-"), 1)
                                   ], 64))
                                 ]))
-                              ], 64)) : (d(), c(P, { key: 4 }, [
-                                ue(H(r(B)(l, o.field) ?? "-"), 1)
+                              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 4 }, [
+                                createTextVNode(toDisplayString(unref(getNestedPropertyValue)(item, col.field) ?? "-"), 1)
                               ], 64))
-                            ], 16, al);
+                            ], 16, _hoisted_13);
                           }), 128)),
-                          Ke.value ? (d(), c("td", p(
+                          showCustomColumn.value ? (openBlock(), createElementBlock("td", mergeProps(
                             {
                               key: 0,
-                              ref_for: !0,
+                              ref_for: true,
                               ref_key: "rowSingleActionCell",
-                              ref: La
+                              ref: rowSingleActionCell
                             },
-                            (ba = r(u)) == null ? void 0 : ba.rowsingleactioncell({
-                              props: t,
+                            (_j = unref(Preset)) == null ? void 0 : _j.rowsingleactioncell({
+                              props,
                               context: {
-                                selected: Se(l[e.dataKey]),
-                                highlighted: l[e.highlightKey ?? ""]
+                                selected: isRowSelected(item[_ctx.dataKey]),
+                                highlighted: item[_ctx.highlightKey ?? ""]
                               }
                             }),
                             {
-                              class: r(u).bodycell.class
+                              class: unref(Preset).bodycell.class
                             }
                           ), [
-                            !l.childRow && e.useOption || l.childRow && ((ga = t.childTableProps) != null && ga.useOption) ? (d(), c("div", p({
+                            !item.childRow && _ctx.useOption || item.childRow && ((_k = props.childTableProps) == null ? void 0 : _k.useOption) ? (openBlock(), createElementBlock("div", mergeProps({
                               key: 0,
-                              ref_for: !0
-                            }, r(u).singleactionwrapper), [
-                              _($e, p({
-                                id: "button-action-" + l[t.dataKey],
-                                ref_for: !0
-                              }, r(u).singleactionbutton({ props: t }), {
-                                disabled: e.disableAllRows,
-                                onClick: S((o) => Ga(o, l), ["stop"]),
+                              ref_for: true
+                            }, unref(Preset).singleactionwrapper), [
+                              createVNode(_sfc_main$2, mergeProps({
+                                id: "button-action-" + item[props.dataKey],
+                                ref_for: true
+                              }, unref(Preset).singleactionbutton({ props }), {
+                                disabled: _ctx.disableAllRows,
+                                onClick: withModifiers(($event) => toggleOptions($event, item), ["stop"]),
                                 icon: "ellipsis-h",
                                 outlined: "",
                                 size: "small",
                                 "tooltip-pos": "left",
                                 type: "button"
                               }), null, 16, ["id", "disabled", "onClick"])
-                            ], 16)) : y("", !0)
-                          ], 16)) : y("", !0)
+                            ], 16)) : createCommentVNode("", true)
+                          ], 16)) : createCommentVNode("", true)
                         ], 64))
-                      ], 16, Gt);
-                    }), 128))
+                      ], 16, _hoisted_7);
+                    }), 128)) : (openBlock(), createElementBlock("tr", _hoisted_16, [
+                      createElementVNode("td", mergeProps({ colspan: columnsCount.value }, (_e = unref(Preset)) == null ? void 0 : _e.bodycell), [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(Preset).invisiblelottiewrapper ? 2 : 1, (i) => {
+                          return openBlock(), createElementBlock("div", mergeProps(
+                            {
+                              key: i,
+                              ref_for: true
+                            },
+                            i === 1 ? unref(Preset).nodatalottiewrapper : unref(Preset).invisiblelottiewrapper
+                          ), [
+                            createVNode(_sfc_main$4, mergeProps({
+                              animation: "no-data",
+                              ref_for: true
+                            }, unref(Preset).nodatalottie), null, 16),
+                            config.value.emptyTableMessage ? (openBlock(), createElementBlock("span", mergeProps({
+                              key: 0,
+                              ref_for: true
+                            }, unref(Preset).nodatamessage), toDisplayString(config.value.emptyTableMessage), 17)) : createCommentVNode("", true)
+                          ], 16);
+                        }), 128))
+                      ], 16, _hoisted_17)
+                    ]))
                   ], 16)
-                ], 16, zt))
+                ], 16, _hoisted_1))
               ];
             }),
             _: 1
           }, 16)
         ], 16),
-        e.usePaginator ? wt((d(), E(r(Ft), p({
-          key: ve.value,
-          rows: j.value,
-          "onUpdate:rows": a[14] || (a[14] = (i) => j.value = i)
-        }, r(u).paginator({ context: { totalRecords: L.value } }), {
-          "rows-per-page-options": Ma,
-          "total-records": L.value,
-          onPage: rt
+        _ctx.usePaginator ? withDirectives((openBlock(), createBlock(unref(script), mergeProps({
+          key: paginatorKey.value,
+          rows: tableRows.value,
+          "onUpdate:rows": _cache[14] || (_cache[14] = ($event) => tableRows.value = $event)
+        }, unref(Preset).paginator({ context: { totalRecords: totalRecords.value } }), {
+          "rows-per-page-options": rowsPerPageOptions,
+          "total-records": totalRecords.value,
+          onPage: handlePageChange
         }), {
-          firstpagelinkicon: de(() => [
-            _(Q, { icon: "round-keyboard-double-arrow-left" })
+          firstpagelinkicon: withCtx(() => [
+            createVNode(_sfc_main$3, { icon: "round-keyboard-double-arrow-left" })
           ]),
-          lastpagelinkicon: de(() => [
-            _(Q, { icon: "round-keyboard-double-arrow-right" })
+          lastpagelinkicon: withCtx(() => [
+            createVNode(_sfc_main$3, { icon: "round-keyboard-double-arrow-right" })
           ]),
-          prevpagelinkicon: de(() => [
-            _(Q, { icon: "round-keyboard-arrow-left" })
+          prevpagelinkicon: withCtx(() => [
+            createVNode(_sfc_main$3, { icon: "round-keyboard-arrow-left" })
           ]),
-          nextpagelinkicon: de(() => [
-            _(Q, { icon: "round-keyboard-arrow-right" })
+          nextpagelinkicon: withCtx(() => [
+            createVNode(_sfc_main$3, { icon: "round-keyboard-arrow-right" })
           ]),
           _: 1
         }, 16, ["rows", "total-records"])), [
-          [Rt, !Pe.value]
-        ]) : y("", !0),
-        _(Bt, {
+          [vShow, !tableIsLoading.value]
+        ]) : createCommentVNode("", true),
+        createVNode(_sfc_main$8, {
           id: "single-action-menu",
           ref_key: "optionMenu",
-          ref: je,
-          model: e.options,
-          onFocus: r(Lt),
+          ref: optionMenu,
+          model: _ctx.options,
+          onFocus: unref(adjustMenuPositionHelper),
           "append-to": "body",
           "auto-z-index": "",
           popup: ""
         }, null, 8, ["model", "onFocus"]),
-        t.customColumn ? (d(), E(xt, {
-          key: Ie.value,
+        props.customColumn ? (openBlock(), createBlock(_sfc_main$9, {
+          key: customColumnKey.value,
           ref_key: "customColumn",
-          ref: Te,
-          "visible-columns": O.value,
-          "onUpdate:visibleColumns": a[15] || (a[15] = (i) => O.value = i),
-          "default-columns": e.columns.filter((i) => i.visible !== !1),
-          "table-id": r(Re)
-        }, null, 8, ["visible-columns", "default-columns", "table-id"])) : y("", !0),
-        _($t, { group: "download" })
+          ref: customColumn,
+          "visible-columns": visibleColumns.value,
+          "onUpdate:visibleColumns": _cache[15] || (_cache[15] = ($event) => visibleColumns.value = $event),
+          "default-columns": _ctx.columns.filter((col) => col.visible !== false),
+          "table-id": unref(dataTableID)
+        }, null, 8, ["visible-columns", "default-columns", "table-id"])) : createCommentVNode("", true),
+        createVNode(_sfc_main$a, { group: "download" })
       ], 16);
     };
   }
-}), Nl = /* @__PURE__ */ At(rl, [["__scopeId", "data-v-0c986612"]]);
+});
+const DataTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5797150a"]]);
 export {
-  Nl as D
+  DataTable as D
 };