@fewangsit/wangsvue-gsts 1.0.0-alpha.37 → 1.0.0-alpha.39

package/changelogpage/index.es.js

@@ -1,13 +1,13 @@
-import { defineComponent as S, inject as A, shallowRef as w, ref as E, computed as N, createElementBlock as z, openBlock as p, normalizeProps as V, guardReactiveProps as B, unref as l, createElementVNode as I, createVNode as v, createBlock as F, createCommentVNode as Q, mergeProps as h } from "vue";
-import { ChangelogServices as R } from "@tagsamurai/gsts-api-services";
+import { defineComponent as A, inject as E, shallowRef as T, ref as O, computed as N, createElementBlock as z, openBlock as f, normalizeProps as w, guardReactiveProps as B, unref as l, createElementVNode as Q, createVNode as p, createBlock as V, createCommentVNode as R, mergeProps as v } from "vue";
+import { ChangelogServices as S } from "@tagsamurai/gsts-api-services";
 import { u as H } from "../utils/toast.util.es.js";
-import { _ as K } from "../buttondownload/index.es.js";
-import { _ as L } from "../buttonfilter/index.es.js";
-import { _ as M } from "../buttonsearch/index.es.js";
-import { D as G } from "../datatable/index.es.js";
-import { _ as P } from "../tooltipspan/index.es.js";
-import { _ as J } from "../changelogfilter/index.es.js";
-const le = /* @__PURE__ */ S({
+import { _ as I } from "../buttondownload/index.es.js";
+import { _ as K } from "../buttonfilter/index.es.js";
+import { _ as L } from "../buttonsearch/index.es.js";
+import { D as M } from "../datatable/index.es.js";
+import { _ as P } from "../changelogcustomvalue/index.es.js";
+import { _ as G } from "../changelogfilter/index.es.js";
+const oe = /* @__PURE__ */ A({
   __name: "ChangelogPage",
   props: {
     useButtonDownload: { type: Boolean, default: !1 },
@@ -28,24 +28,24 @@ const le = /* @__PURE__ */ S({
   },
   emits: ["hide"],
   setup(D) {
-    const x = H(), r = A("preset", {}).changelog, e = D, k = w(0), g = w(!1), b = E({
+    const F = H(), r = E("preset", {}).changelog, e = D, k = T(0), h = T(!1), b = O({
       object: e.object,
       ...e.customParams
-    }), O = N(() => {
-      if (e.isDialog && g.value)
+    }), $ = N(() => {
+      if (e.isDialog && h.value)
         return "calc(57vh - 126px)";
       if (e.isDialog) return "57vh";
     }), n = N(() => {
-      var o;
-      return e.tableName ?? `changelog-page-${(o = b.value.object) == null ? void 0 : o.toLowerCase().split(" ").join("-")}`;
-    }), $ = (() => {
-      var a, i, s, m, u, d, f, C, y, j, T, _;
-      const o = [
+      var t;
+      return e.tableName ?? `changelog-page-${(t = b.value.object) == null ? void 0 : t.toLowerCase().split(" ").join("-")}`;
+    }), x = (() => {
+      var o, s, i, m, u, d, c, g, C, y, j, _;
+      const t = [
         {
           field: "createdAt",
           header: "Date",
           sortable: !0,
-          visible: !((a = e.removedColumns) != null && a.includes("createdAt")),
+          visible: !((o = e.removedColumns) != null && o.includes("createdAt")),
           dateFormatOptions: { showTime: !0 }
         },
         {
@@ -53,16 +53,16 @@ const le = /* @__PURE__ */ S({
           header: "Action",
           sortable: !0,
           fixed: !0,
-          visible: !((i = e.removedColumns) != null && i.includes("action")),
-          bodyTemplate: (t) => t.action ?? "-"
+          visible: !((s = e.removedColumns) != null && s.includes("action")),
+          bodyTemplate: (a) => a.action ?? "-"
         },
         {
           field: "object",
           header: "Object",
           sortable: !0,
           fixed: !0,
-          visible: !((s = e.additionalTemplateColumns) != null && s.length) && !((m = e.removedColumns) != null && m.includes("object")),
-          bodyTemplate: (t) => t.object ?? "-"
+          visible: !((i = e.additionalTemplateColumns) != null && i.length) && !((m = e.removedColumns) != null && m.includes("object")),
+          bodyTemplate: (a) => a.object ?? "-"
         },
         {
           field: "objectName",
@@ -70,89 +70,87 @@ const le = /* @__PURE__ */ S({
           sortable: !0,
           fixed: !0,
           visible: !((u = e.additionalTemplateColumns) != null && u.length) && !((d = e.removedColumns) != null && d.includes("objectName")),
-          bodyTemplate: (t) => t.objectName ?? "-"
+          bodyTemplate: (a) => a.objectName ?? "-"
         },
         {
           field: "field",
           header: "Field",
           sortable: !0,
           fixed: !0,
-          visible: !/Testing/.test(e.object) && !((f = e.removedColumns) != null && f.includes("field")),
-          bodyTemplate: (t) => t.field ?? "-"
+          visible: !/Testing/.test(e.object) && !((c = e.removedColumns) != null && c.includes("field")),
+          bodyTemplate: (a) => a.field ?? "-"
         },
         {
           field: "oldValue",
           header: "Old Value",
           sortable: !0,
-          visible: !((C = e.removedColumns) != null && C.includes("oldValue")),
-          bodyComponent: (t) => c(t.oldValue) ? void 0 : {
+          visible: !((g = e.removedColumns) != null && g.includes("oldValue")),
+          bodyComponent: (a) => ({
             component: P,
-            props: { fullText: t.oldValue }
-          },
-          dateFormatOptions: (t) => c(t.oldValue) ? { showTime: !0 } : void 0
+            props: { value: a.oldValue }
+          })
         },
         {
           field: "newValue",
           header: "New Value",
           sortable: !0,
-          visible: !((y = e.removedColumns) != null && y.includes("newValue")),
-          bodyComponent: (t) => c(t.newValue) ? void 0 : {
+          visible: !((C = e.removedColumns) != null && C.includes("newValue")),
+          bodyComponent: (a) => ({
             component: P,
-            props: { fullText: t.newValue }
-          },
-          dateFormatOptions: (t) => c(t.newValue) ? { showTime: !0 } : void 0
+            props: { value: a.newValue }
+          })
         },
         {
           field: "modifiedBy",
           header: "Modified By",
           sortable: !0,
-          visible: !((j = e.removedColumns) != null && j.includes("modifiedBy")),
-          bodyTemplate: (t) => t.modifiedBy ?? "-"
+          visible: !((y = e.removedColumns) != null && y.includes("modifiedBy")),
+          bodyTemplate: (a) => a.modifiedBy ?? "-"
         }
-      ].filter((t) => t.visible);
-      return (T = e.additionalTemplateColumns) != null && T.length && ((_ = e.additionalTemplateColumns) == null || _.forEach((t) => {
-        o.splice(t.index, 0, t.column);
-      })), o;
-    })(), c = (o) => typeof o == "string" && !isNaN(Date.parse(o)), q = async (o) => {
+      ].filter((a) => a.visible);
+      return (j = e.additionalTemplateColumns) != null && j.length && ((_ = e.additionalTemplateColumns) == null || _.forEach((a) => {
+        t.splice(a.index, 0, a.column);
+      })), t;
+    })(), q = async (t) => {
       try {
-        const { data: a } = await R.getChangelogs(o);
-        return a;
-      } catch (a) {
-        console.error(a), x.add({
-          error: a,
+        const { data: o } = await S.getChangelogs(t);
+        return o;
+      } catch (o) {
+        console.error(o), F.add({
+          error: o,
           message: ""
         });
       }
     };
-    return (o, a) => {
-      var i, s, m, u, d;
-      return p(), z("div", V(B((i = l(r)) == null ? void 0 : i.root)), [
-        I("div", V(B((s = l(r)) == null ? void 0 : s.header)), [
-          v(M, h((m = l(r)) == null ? void 0 : m.buttonsearch, { "table-name": n.value }), null, 16, ["table-name"]),
-          v(L, h((u = l(r)) == null ? void 0 : u.buttonfilter, {
+    return (t, o) => {
+      var s, i, m, u, d;
+      return f(), z("div", w(B((s = l(r)) == null ? void 0 : s.root)), [
+        Q("div", w(B((i = l(r)) == null ? void 0 : i.header)), [
+          p(L, v((m = l(r)) == null ? void 0 : m.buttonsearch, { "table-name": n.value }), null, 16, ["table-name"]),
+          p(K, v((u = l(r)) == null ? void 0 : u.buttonfilter, {
             "table-name": n.value,
-            onShowFilter: a[0] || (a[0] = (f) => g.value = f)
+            onShowFilter: o[0] || (o[0] = (c) => h.value = c)
           }), null, 16, ["table-name"]),
-          e.useButtonDownload ? (p(), F(K, h({ key: 0 }, (d = l(r)) == null ? void 0 : d.buttondownload, {
-            "file-name": o.fileName ?? "Changelog",
+          e.useButtonDownload ? (f(), V(I, v({ key: 0 }, (d = l(r)) == null ? void 0 : d.buttondownload, {
+            "file-name": t.fileName ?? "Changelog",
             "table-name": n.value
-          }), null, 16, ["file-name", "table-name"])) : Q("", !0)
+          }), null, 16, ["file-name", "table-name"])) : R("", !0)
         ], 16),
-        v(J, {
-          "additional-template-filters": o.additionalTemplateFilters,
+        p(G, {
+          "additional-template-filters": t.additionalTemplateFilters,
           "custom-params": e.customParams,
           "default-params-query": b.value,
           object: e.object,
           "object-name-column": e.objectNameColumn,
-          "removed-filters": o.removedFilters,
+          "removed-filters": t.removedFilters,
           "table-name": n.value
         }, null, 8, ["additional-template-filters", "custom-params", "default-params-query", "object", "object-name-column", "removed-filters", "table-name"]),
-        (p(), F(G, {
+        (f(), V(M, {
           key: k.value,
-          columns: l($),
+          columns: l(x),
           "default-query-params": b.value,
           "fetch-function": q,
-          "scroll-height": O.value,
+          "scroll-height": $.value,
           "table-name": n.value,
           "use-option": !1,
           "data-key": "_id",
@@ -165,5 +163,5 @@ const le = /* @__PURE__ */ S({
   }
 });
 export {
-  le as _
+  oe as _
 };

package/columnlist/index.es.js

@@ -1,52 +1,52 @@
-import { reactive as P, defineComponent as _, mergeModels as q, useModel as U, ref as F, shallowRef as J, computed as M, watch as K, createElementBlock as x, openBlock as y, Fragment as B, renderList as T, createCommentVNode as z, mergeProps as I, withModifiers as g, createVNode as E } from "vue";
-import { _ as G } from "../checkbox/index.es.js";
-import { _ as H } from "../icon/index.es.js";
-import { c as Q } from "../vendor/lodash-es/cloneDeep.es.js";
-const W = (o, u, l) => {
-  if (u && l > u) {
+import { reactive as $, defineComponent as _, mergeModels as q, useModel as U, ref as J, shallowRef as K, computed as B, watch as T, createElementBlock as w, openBlock as k, Fragment as E, renderList as z, createCommentVNode as G, mergeProps as I, withModifiers as C, createVNode as A } from "vue";
+import { _ as Q } from "../checkbox/index.es.js";
+import { _ as W } from "../icon/index.es.js";
+import { c as X } from "../vendor/lodash-es/cloneDeep.es.js";
+const Y = (o, d, l) => {
+  if (d && l > d) {
     let r = 0;
     return o.map((n) => {
-      const c = u !== void 0 && r < u, d = n.checkedByDefault !== !1 && u === void 0 || n.checkedByDefault !== !1 && c;
-      return d && r++, {
+      const m = d !== void 0 && r < d, c = n.checkedByDefault !== !1 && d === void 0 || n.checkedByDefault !== !1 && m;
+      return c && r++, {
         ...n,
-        visible: d
+        visible: c
       };
     });
   }
   return o;
-}, b = "tableConfigs", X = () => "user-" + (JSON.parse(localStorage.getItem("user") ?? "{}")._id ?? "unknown"), A = async () => {
+}, x = "tableConfigs", Z = () => "user-" + (JSON.parse(localStorage.getItem("user") ?? "{}")._id ?? "unknown"), N = async () => {
   let o = null;
-  return new Promise((u) => {
-    const l = indexedDB.open(X(), 1);
+  return new Promise((d) => {
+    const l = indexedDB.open(Z(), 1);
     l.onupgradeneeded = (r) => {
-      o = r.target.result, o.createObjectStore(b);
+      o = r.target.result, o.createObjectStore(x);
     }, l.onsuccess = (r) => {
-      o = r.target.result, u(o);
+      o = r.target.result, d(o);
     };
   });
-}, Y = async () => {
-  const l = (await A()).transaction(b, "readonly").objectStore(b);
+}, ee = async () => {
+  const l = (await N()).transaction(x, "readonly").objectStore(x);
   return new Promise((r) => {
-    let n, c;
-    l.getAllKeys().onsuccess = (d) => {
-      n = d.target.result;
-    }, l.getAll().onsuccess = (d) => {
-      c = d.target.result;
-      const v = {};
-      n.forEach((m, p) => {
-        v[m] = c[p];
-      }), r(v);
+    let n, m;
+    l.getAllKeys().onsuccess = (c) => {
+      n = c.target.result;
+    }, l.getAll().onsuccess = (c) => {
+      m = c.target.result;
+      const b = {};
+      n.forEach((g, y) => {
+        b[g] = m[y];
+      }), r(b);
     };
   });
-}, h = P({}), Z = async () => {
-  const o = async (u, l) => {
-    h[u] = l, (await A()).transaction(b, "readwrite").objectStore(b).put(l, u);
+}, S = $({}), te = async () => {
+  const o = async (d, l) => {
+    S[d] = l, (await N()).transaction(x, "readwrite").objectStore(x).put(l, d);
   };
-  return Object.assign(h, await Y()), {
-    config: h,
+  return Object.assign(S, await ee()), {
+    config: S,
     setConfig: o
   };
-}, ee = ["id", "data-item-dragable", "draggable", "onDragenter", "onDragstart"], se = /* @__PURE__ */ _({
+}, ae = ["id", "data-item-dragable", "draggable", "onDragenter", "onDragstart"], re = /* @__PURE__ */ _({
   __name: "ColumnList",
   props: /* @__PURE__ */ q({
     tableId: {},
@@ -60,88 +60,110 @@ const W = (o, u, l) => {
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(o, { expose: u }) {
-    const l = o, r = U(o, "modelValue"), n = F([]), c = J(), d = M(() => [...n.value].filter((a) => a.visible !== !1)), v = M(() => l.maxColumn ? d.value.length >= l.maxColumn : !1), m = (a) => a.dragable !== !1 && p(a), p = (a) => {
-      if (!v.value) return !0;
+  setup(o, { expose: d }) {
+    const l = o, r = U(o, "modelValue"), n = J([]), m = K(), c = B(() => [...n.value].filter((a) => a.visible !== !1)), b = B(() => l.maxColumn ? c.value.length >= l.maxColumn : !1), g = (a) => a.dragable !== !1 && y(a), y = (a) => {
+      if (!b.value) return !0;
       const t = r.value.findIndex((e) => e.field === a.field) > 0;
-      return v.value && t;
-    }, S = () => {
-      n.value = W(
+      return b.value && t;
+    }, H = (a) => {
+      const t = [];
+      for (const e of a)
+        if (e.parentHeader) {
+          const s = t.find(
+            (f) => f.parentHeaderField === e.parentHeader.field
+          );
+          s ? s.siblingHeaders.push(e) : t.push({
+            ...e,
+            parentHeaderField: e.parentHeader.field,
+            siblingHeaders: []
+          });
+        } else
+          t.push(e);
+      return t;
+    }, D = (a) => {
+      const t = [];
+      for (const e of a)
+        e.parentHeaderField ? t.push(e, ...e.siblingHeaders) : t.push(e);
+      return t;
+    }, V = () => {
+      n.value = Y(
         n.value,
         l.maxColumn,
-        d.value.length
-      ), r.value = [...d.value];
-    }, C = async () => {
-      const a = n.value.map(
-        (e) => ({
-          field: e.field,
-          width: e.width ?? "max-content",
-          visible: e.visible !== !1,
-          fixed: !!e.fixed
-        })
-      ), { setConfig: t } = await Z();
+        c.value.length
+      ), r.value = D([...c.value]);
+    }, h = async () => {
+      const a = D(
+        n.value
+      ).map((e) => ({
+        field: e.field,
+        width: e.width ?? "max-content",
+        visible: e.visible !== !1,
+        fixed: !!e.fixed
+      })), { setConfig: t } = await te();
       await t(l.tableId, a);
-    }, N = () => {
-      r.value = [...n.value];
-    }, R = (a, t, e) => {
-      const { dataTransfer: i } = a;
-      c.value = t, i && (i.dropEffect = "move", i.effectAllowed = "move", i.setData("field", t.field), i.setData("index", e.toString()));
-    }, L = async () => {
-      c.value = void 0, N(), await C();
-    }, j = (a, t) => {
-      var e, i;
-      if (a.preventDefault(), m(t)) {
-        const f = a.target, s = f.tagName === "LI" ? f : f.closest("li");
-        if (s == null || s.classList.add("bg-primary-50"), (e = s == null ? void 0 : s.nextElementSibling) == null || e.classList.remove("bg-primary-50"), (i = s == null ? void 0 : s.previousElementSibling) == null || i.classList.remove("bg-primary-50"), !s || !c.value) return;
-        const D = n.value.findIndex(
-          (k) => {
-            var V;
-            return k.field === ((V = c.value) == null ? void 0 : V.field);
+    }, R = () => {
+      r.value = D([...n.value]);
+    }, L = (a, t, e) => {
+      const { dataTransfer: s } = a;
+      m.value = t, s && (s.dropEffect = "move", s.effectAllowed = "move", s.setData("field", t.field), s.setData("index", e.toString()));
+    }, j = async () => {
+      m.value = void 0, R(), await h();
+    }, F = (a, t) => {
+      var e, s;
+      if (a.preventDefault(), g(t)) {
+        const f = a.target, u = f.tagName === "LI" ? f : f.closest("li");
+        if (u == null || u.classList.add("bg-primary-50"), (e = u == null ? void 0 : u.nextElementSibling) == null || e.classList.remove("bg-primary-50"), (s = u == null ? void 0 : u.previousElementSibling) == null || s.classList.remove("bg-primary-50"), !u || !m.value) return;
+        const i = n.value.findIndex(
+          (p) => {
+            var M;
+            return p.field === ((M = m.value) == null ? void 0 : M.field);
           }
-        ), w = n.value.findIndex(
-          (k) => k.field === s.id
+        ), v = n.value.findIndex(
+          (p) => p.field === u.id
         );
-        D !== -1 && w !== -1 && ([
-          n.value[D],
-          n.value[w]
+        i !== -1 && v !== -1 && ([
+          n.value[i],
+          n.value[v]
         ] = [
-          n.value[w],
-          n.value[D]
+          n.value[v],
+          n.value[i]
         ]);
       }
     }, O = (a) => {
       const t = a.target.querySelector("label");
       t && t.click();
-    }, $ = () => {
-      const a = Q(l.defaultColumns);
+    }, P = () => {
+      const a = X(l.defaultColumns);
       if (l.maxColumn && a.length > l.maxColumn) {
         let t = 0;
-        n.value = a.map((e) => {
-          const i = l.maxColumn !== void 0 && t < l.maxColumn, f = e.checkedByDefault !== !1 && l.maxColumn === void 0 || e.checkedByDefault !== !1 && i;
-          return f && t++, {
-            ...e,
-            visible: f
-          };
-        });
+        n.value = H(
+          a.map((e) => {
+            const s = l.maxColumn !== void 0 && t < l.maxColumn, f = e.checkedByDefault !== !1 && l.maxColumn === void 0 || e.checkedByDefault !== !1 && s;
+            return f && t++, {
+              ...e,
+              visible: f
+            };
+          })
+        );
       } else
-        n.value = a;
-      r.value = [...d.value], C();
+        n.value = H(a);
+      r.value = D([...c.value]), h();
     };
-    return K(
+    return T(
       () => l.savedColumns,
       (a) => {
-        n.value = a ?? [];
+        n.value = H(a) ?? [];
       },
       { immediate: !0 }
-    ), u({
-      setColumnVisibilityConfig: C,
-      resetToDefault: $,
-      updateVisibleColumnsModel: S
-    }), (a, t) => (y(), x("ul", null, [
-      (y(!0), x(B, null, T(n.value, (e, i) => {
-        var f;
-        return y(), x(B, null, [
-          e.reorderable !== !1 ? (y(), x("li", I(
+    ), d({
+      setColumnVisibilityConfig: h,
+      resetToDefault: P,
+      updateVisibleColumnsModel: V
+    }), (a, t) => (k(), w("ul", null, [
+      (k(!0), w(E, null, z(n.value, (e, s) => {
+        var f, u;
+        return k(), w(E, null, [
+          e.reorderable !== !1 ? (k(), w("li", I(
             {
               id: e.field,
               key: e.field,
@@ -149,56 +171,59 @@ const W = (o, u, l) => {
             },
             a.$preset.customcolumn.menuitem({
               props: l,
-              context: { dragable: m(e) }
+              context: { dragable: g(e) }
             }),
             {
-              "data-item-dragable": m(e),
-              draggable: m(e),
+              "data-item-dragable": g(e),
+              draggable: g(e),
               onClick: O,
-              onDragend: L,
-              onDragenter: g((s) => j(s, e), ["prevent"]),
-              onDragleave: t[2] || (t[2] = g(() => {
+              onDragend: j,
+              onDragenter: C((i) => F(i, e), ["prevent"]),
+              onDragleave: t[2] || (t[2] = C(() => {
               }, ["prevent"])),
-              onDragover: t[3] || (t[3] = g(() => {
+              onDragover: t[3] || (t[3] = C(() => {
               }, ["prevent"])),
-              onDragstart: (s) => R(s, e, i),
-              onMouseenter: t[4] || (t[4] = (s) => s.target.classList.add("bg-primary-50")),
-              onMouseleave: t[5] || (t[5] = (s) => s.target.classList.remove("bg-primary-50")),
+              onDragstart: (i) => L(i, e, s),
+              onMouseenter: t[4] || (t[4] = (i) => i.target.classList.add("bg-primary-50")),
+              onMouseleave: t[5] || (t[5] = (i) => i.target.classList.remove("bg-primary-50")),
               "data-wv-section": "custom-column-menu-item"
             }
           ), [
-            E(H, I(
+            A(W, I(
               {
-                onClick: t[0] || (t[0] = g(() => {
+                onClick: t[0] || (t[0] = C(() => {
                 }, ["stop"])),
                 ref_for: !0
               },
               (f = a.$preset.customcolumn) == null ? void 0 : f.dragicon({
-                context: { dragable: m(e) }
+                context: { dragable: g(e) }
               }),
               { icon: "dragable-menu" }
             ), null, 16),
-            E(G, {
+            A(Q, {
               "aria-label": e.header,
               disabled: e.fixed,
-              label: e.header,
+              label: ((u = e.parentHeader) == null ? void 0 : u.header) ?? e.header,
               "model-value": e.visible !== !1,
-              selectable: p(e),
-              onClick: t[1] || (t[1] = g(() => {
+              selectable: y(e),
+              onClick: t[1] || (t[1] = C(() => {
               }, ["stop"])),
-              "onUpdate:modelValue": (s) => {
-                e.visible = !!s, S(), C();
+              "onUpdate:modelValue": (i) => {
+                var v;
+                e.visible = !!i, (v = e.siblingHeaders) == null || v.forEach((p) => {
+                  p.visible = !!i;
+                }), V(), h();
               },
               class: "!w-full"
             }, null, 8, ["aria-label", "disabled", "label", "model-value", "selectable", "onUpdate:modelValue"])
-          ], 16, ee)) : z("", !0)
+          ], 16, ae)) : G("", !0)
         ], 64);
       }), 256))
     ]));
   }
 });
 export {
-  se as _,
-  W as s,
-  Z as u
+  re as _,
+  Y as s,
+  te as u
 };

package/customcolumn/index.d.ts

@@ -5,7 +5,11 @@ export interface CustomColumnLocaleConfig {
   resetDefaultText: string;
 }
 
-export type DragableColumn = TableColumn & { order?: number };
+export type DragableColumn = TableColumn & {
+  order?: number;
+  parentHeaderField?: string;
+  siblingHeaders?: TableColumn[];
+};
 
 export interface CustomColumnProps {
   tableId: string;

package/datatable/index.d.ts

@@ -245,8 +245,42 @@ export type ColumnPreset =
   | ColumnMultiRowPreset
   | ColumnCheckboxPreset;
 
+export interface CombinedHeaders {
+  parent: TableParentHeader[];
+  child: TreeTableColumns[];
+}
+
+export interface TableParentHeader
+  extends Pick<
+    TableColumn,
+    'header' | 'info' | 'infoSeverity' | 'headerClass'
+  > {
+  /**
+   * Field is used as the header's key, parent headers with
+   * the same field will be grouped into one cell
+   */
+  field: string;
+  /**
+   * Note: colspan is calculated automatically
+   * @ignore
+   */
+  colspan?: number;
+  /**
+   * Note: rowspan is calculated automatically
+   * @ignore
+   */
+  rowspan?: number;
+}
+
 export interface TableColumn {
   header?: string;
+  /**
+   * The headers placed above certain child headers. If there are
+   * multiple child headers with the same parent header, the parent
+   * will have its colspan extended. The parent header will be shown
+   * when at least one of its child headers is visible.
+   */
+  parentHeader?: TableParentHeader;
   field: string;
   fieldType?: 'string' | 'number' | 'boolean' | 'array';
   info?: string;
@@ -666,6 +700,10 @@ export type BaseDataTableEmits = {
    * Emits when option menu button clicked.
    */
   'toggleOption': [data: Data];
+  /**
+   * Emits when an item is double clicked.
+   */
+  'doubleClick': [data: Data];
   /**
    * @deprecated use 'v-model:selected-data' instead.
    */