@guiexpert/solid-table 1.0.13 → 1.0.14

package/index.js

@@ -1,109 +1,109 @@
-const xe = (l, e) => l === e, J = Symbol("solid-proxy"), he = {
-  equals: xe
+const De = (r, e) => r === e, te = Symbol("solid-proxy"), ue = {
+  equals: De
 };
-let pe = Se;
-const L = 1, N = 2, fe = {
+let me = ve;
+const L = 1, N = 2, ye = {
   owned: null,
   cleanups: null,
   context: null,
   owner: null
 };
-var A = null;
-let U = null, b = null, x = null, F = null, K = 0;
-function Ee(l, e) {
-  const t = b, s = A, i = l.length === 0, o = e === void 0 ? s : e, r = i ? fe : {
+var R = null;
+let Z = null, w = null, M = null, F = null, q = 0;
+function ke(r, e) {
+  const t = w, s = R, o = r.length === 0, i = e === void 0 ? s : e, l = o ? ye : {
     owned: null,
     cleanups: null,
-    context: o ? o.context : null,
-    owner: o
-  }, n = i ? l : () => l(() => W(() => z(r)));
-  A = r, b = null;
+    context: i ? i.context : null,
+    owner: i
+  }, n = o ? r : () => r(() => H(() => J(l)));
+  R = l, w = null;
   try {
-    return V(n, !0);
+    return G(n, !0);
   } finally {
-    b = t, A = s;
+    w = t, R = s;
   }
 }
-function Q(l, e, t) {
-  const s = se(l, e, !1, L);
-  H(s);
+function se(r, e, t) {
+  const s = re(r, e, !1, L);
+  W(s);
 }
-function Ae(l, e, t) {
-  pe = Fe;
-  const s = se(l, e, !1, L);
-  (!t || !t.render) && (s.user = !0), F ? F.push(s) : H(s);
+function Oe(r, e, t) {
+  me = He;
+  const s = re(r, e, !1, L);
+  (!t || !t.render) && (s.user = !0), F ? F.push(s) : W(s);
 }
-function Me(l, e, t) {
-  t = t ? Object.assign({}, he, t) : he;
-  const s = se(l, e, !0, 0);
-  return s.observers = null, s.observerSlots = null, s.comparator = t.equals || void 0, H(s), Te.bind(s);
+function Ie(r, e, t) {
+  t = t ? Object.assign({}, ue, t) : ue;
+  const s = re(r, e, !0, 0);
+  return s.observers = null, s.observerSlots = null, s.comparator = t.equals || void 0, W(s), Le.bind(s);
 }
-function W(l) {
-  if (b === null)
-    return l();
-  const e = b;
-  b = null;
+function H(r) {
+  if (w === null)
+    return r();
+  const e = w;
+  w = null;
   try {
-    return l();
+    return r();
   } finally {
-    b = e;
+    w = e;
   }
 }
-function Re(l) {
-  Ae(() => W(l));
+function Fe(r) {
+  Oe(() => H(r));
 }
-function Te() {
+function Le() {
   if (this.sources && this.state)
     if (this.state === L)
-      H(this);
+      W(this);
     else {
-      const l = x;
-      x = null, V(() => j(this), !1), x = l;
+      const r = M;
+      M = null, G(() => j(this), !1), M = r;
     }
-  if (b) {
-    const l = this.observers ? this.observers.length : 0;
-    b.sources ? (b.sources.push(this), b.sourceSlots.push(l)) : (b.sources = [this], b.sourceSlots = [l]), this.observers ? (this.observers.push(b), this.observerSlots.push(b.sources.length - 1)) : (this.observers = [b], this.observerSlots = [b.sources.length - 1]);
+  if (w) {
+    const r = this.observers ? this.observers.length : 0;
+    w.sources ? (w.sources.push(this), w.sourceSlots.push(r)) : (w.sources = [this], w.sourceSlots = [r]), this.observers ? (this.observers.push(w), this.observerSlots.push(w.sources.length - 1)) : (this.observers = [w], this.observerSlots = [w.sources.length - 1]);
   }
   return this.value;
 }
-function De(l, e, t) {
-  let s = l.value;
-  return (!l.comparator || !l.comparator(s, e)) && (l.value = e, l.observers && l.observers.length && V(() => {
-    for (let i = 0; i < l.observers.length; i += 1) {
-      const o = l.observers[i], r = U && U.running;
-      r && U.disposed.has(o), (r ? !o.tState : !o.state) && (o.pure ? x.push(o) : F.push(o), o.observers && ge(o)), r || (o.state = L);
+function $e(r, e, t) {
+  let s = r.value;
+  return (!r.comparator || !r.comparator(s, e)) && (r.value = e, r.observers && r.observers.length && G(() => {
+    for (let o = 0; o < r.observers.length; o += 1) {
+      const i = r.observers[o], l = Z && Z.running;
+      l && Z.disposed.has(i), (l ? !i.tState : !i.state) && (i.pure ? M.push(i) : F.push(i), i.observers && we(i)), l || (i.state = L);
     }
-    if (x.length > 1e6)
-      throw x = [], new Error();
+    if (M.length > 1e6)
+      throw M = [], new Error();
   }, !1)), e;
 }
-function H(l) {
-  if (!l.fn)
+function W(r) {
+  if (!r.fn)
     return;
-  z(l);
-  const e = K;
-  Ie(
-    l,
-    l.value,
+  J(r);
+  const e = q;
+  Be(
+    r,
+    r.value,
     e
   );
 }
-function Ie(l, e, t) {
+function Be(r, e, t) {
   let s;
-  const i = A, o = b;
-  b = A = l;
+  const o = R, i = w;
+  w = R = r;
   try {
-    s = l.fn(e);
-  } catch (r) {
-    return l.pure && (l.state = L, l.owned && l.owned.forEach(z), l.owned = null), l.updatedAt = t + 1, me(r);
+    s = r.fn(e);
+  } catch (l) {
+    return r.pure && (r.state = L, r.owned && r.owned.forEach(J), r.owned = null), r.updatedAt = t + 1, Ce(l);
   } finally {
-    b = o, A = i;
+    w = i, R = o;
   }
-  (!l.updatedAt || l.updatedAt <= t) && (l.updatedAt != null && "observers" in l ? De(l, s) : l.value = s, l.updatedAt = t);
+  (!r.updatedAt || r.updatedAt <= t) && (r.updatedAt != null && "observers" in r ? $e(r, s) : r.value = s, r.updatedAt = t);
 }
-function se(l, e, t, s = L, i) {
-  const o = {
-    fn: l,
+function re(r, e, t, s = L, o) {
+  const i = {
+    fn: r,
     state: s,
     updatedAt: null,
     owned: null,
@@ -111,381 +111,381 @@ function se(l, e, t, s = L, i) {
     sourceSlots: null,
     cleanups: null,
     value: e,
-    owner: A,
-    context: A ? A.context : null,
+    owner: R,
+    context: R ? R.context : null,
     pure: t
   };
-  return A === null || A !== fe && (A.owned ? A.owned.push(o) : A.owned = [o]), o;
+  return R === null || R !== ye && (R.owned ? R.owned.push(i) : R.owned = [i]), i;
 }
-function _(l) {
-  if (l.state === 0)
+function z(r) {
+  if (r.state === 0)
     return;
-  if (l.state === N)
-    return j(l);
-  if (l.suspense && W(l.suspense.inFallback))
-    return l.suspense.effects.push(l);
-  const e = [l];
-  for (; (l = l.owner) && (!l.updatedAt || l.updatedAt < K); )
-    l.state && e.push(l);
+  if (r.state === N)
+    return j(r);
+  if (r.suspense && H(r.suspense.inFallback))
+    return r.suspense.effects.push(r);
+  const e = [r];
+  for (; (r = r.owner) && (!r.updatedAt || r.updatedAt < q); )
+    r.state && e.push(r);
   for (let t = e.length - 1; t >= 0; t--)
-    if (l = e[t], l.state === L)
-      H(l);
-    else if (l.state === N) {
-      const s = x;
-      x = null, V(() => j(l, e[0]), !1), x = s;
+    if (r = e[t], r.state === L)
+      W(r);
+    else if (r.state === N) {
+      const s = M;
+      M = null, G(() => j(r, e[0]), !1), M = s;
     }
 }
-function V(l, e) {
-  if (x)
-    return l();
+function G(r, e) {
+  if (M)
+    return r();
   let t = !1;
-  e || (x = []), F ? t = !0 : F = [], K++;
+  e || (M = []), F ? t = !0 : F = [], q++;
   try {
-    const s = l();
-    return Oe(t), s;
+    const s = r();
+    return Pe(t), s;
   } catch (s) {
-    t || (F = null), x = null, me(s);
+    t || (F = null), M = null, Ce(s);
   }
 }
-function Oe(l) {
-  if (x && (Se(x), x = null), l)
+function Pe(r) {
+  if (M && (ve(M), M = null), r)
     return;
   const e = F;
-  F = null, e.length && V(() => pe(e), !1);
+  F = null, e.length && G(() => me(e), !1);
 }
-function Se(l) {
-  for (let e = 0; e < l.length; e++)
-    _(l[e]);
+function ve(r) {
+  for (let e = 0; e < r.length; e++)
+    z(r[e]);
 }
-function Fe(l) {
+function He(r) {
   let e, t = 0;
-  for (e = 0; e < l.length; e++) {
-    const s = l[e];
-    s.user ? l[t++] = s : _(s);
+  for (e = 0; e < r.length; e++) {
+    const s = r[e];
+    s.user ? r[t++] = s : z(s);
   }
   for (e = 0; e < t; e++)
-    _(l[e]);
+    z(r[e]);
 }
-function j(l, e) {
-  l.state = 0;
-  for (let t = 0; t < l.sources.length; t += 1) {
-    const s = l.sources[t];
+function j(r, e) {
+  r.state = 0;
+  for (let t = 0; t < r.sources.length; t += 1) {
+    const s = r.sources[t];
     if (s.sources) {
-      const i = s.state;
-      i === L ? s !== e && (!s.updatedAt || s.updatedAt < K) && _(s) : i === N && j(s, e);
+      const o = s.state;
+      o === L ? s !== e && (!s.updatedAt || s.updatedAt < q) && z(s) : o === N && j(s, e);
     }
   }
 }
-function ge(l) {
-  for (let e = 0; e < l.observers.length; e += 1) {
-    const t = l.observers[e];
-    t.state || (t.state = N, t.pure ? x.push(t) : F.push(t), t.observers && ge(t));
+function we(r) {
+  for (let e = 0; e < r.observers.length; e += 1) {
+    const t = r.observers[e];
+    t.state || (t.state = N, t.pure ? M.push(t) : F.push(t), t.observers && we(t));
   }
 }
-function z(l) {
+function J(r) {
   let e;
-  if (l.sources)
-    for (; l.sources.length; ) {
-      const t = l.sources.pop(), s = l.sourceSlots.pop(), i = t.observers;
-      if (i && i.length) {
-        const o = i.pop(), r = t.observerSlots.pop();
-        s < i.length && (o.sourceSlots[r] = s, i[s] = o, t.observerSlots[s] = r);
+  if (r.sources)
+    for (; r.sources.length; ) {
+      const t = r.sources.pop(), s = r.sourceSlots.pop(), o = t.observers;
+      if (o && o.length) {
+        const i = o.pop(), l = t.observerSlots.pop();
+        s < o.length && (i.sourceSlots[l] = s, o[s] = i, t.observerSlots[s] = l);
       }
     }
-  if (l.owned) {
-    for (e = l.owned.length - 1; e >= 0; e--)
-      z(l.owned[e]);
-    l.owned = null;
+  if (r.owned) {
+    for (e = r.owned.length - 1; e >= 0; e--)
+      J(r.owned[e]);
+    r.owned = null;
   }
-  if (l.cleanups) {
-    for (e = l.cleanups.length - 1; e >= 0; e--)
-      l.cleanups[e]();
-    l.cleanups = null;
+  if (r.cleanups) {
+    for (e = r.cleanups.length - 1; e >= 0; e--)
+      r.cleanups[e]();
+    r.cleanups = null;
   }
-  l.state = 0;
+  r.state = 0;
 }
-function Le(l) {
-  return l instanceof Error ? l : new Error(typeof l == "string" ? l : "Unknown error", {
-    cause: l
+function We(r) {
+  return r instanceof Error ? r : new Error(typeof r == "string" ? r : "Unknown error", {
+    cause: r
   });
 }
-function me(l, e = A) {
-  throw Le(l);
+function Ce(r, e = R) {
+  throw We(r);
 }
-function k() {
+function V() {
   return !0;
 }
-const $e = {
-  get(l, e, t) {
-    return e === J ? t : l.get(e);
+const Ge = {
+  get(r, e, t) {
+    return e === te ? t : r.get(e);
   },
-  has(l, e) {
-    return e === J ? !0 : l.has(e);
+  has(r, e) {
+    return e === te ? !0 : r.has(e);
   },
-  set: k,
-  deleteProperty: k,
-  getOwnPropertyDescriptor(l, e) {
+  set: V,
+  deleteProperty: V,
+  getOwnPropertyDescriptor(r, e) {
     return {
       configurable: !0,
       enumerable: !0,
       get() {
-        return l.get(e);
+        return r.get(e);
       },
-      set: k,
-      deleteProperty: k
+      set: V,
+      deleteProperty: V
     };
   },
-  ownKeys(l) {
-    return l.keys();
+  ownKeys(r) {
+    return r.keys();
   }
 };
-function q(l) {
-  return (l = typeof l == "function" ? l() : l) ? l : {};
+function ee(r) {
+  return (r = typeof r == "function" ? r() : r) ? r : {};
 }
-function Be() {
-  for (let l = 0, e = this.length; l < e; ++l) {
-    const t = this[l]();
+function _e() {
+  for (let r = 0, e = this.length; r < e; ++r) {
+    const t = this[r]();
     if (t !== void 0)
       return t;
   }
 }
-function be(...l) {
+function xe(...r) {
   let e = !1;
-  for (let o = 0; o < l.length; o++) {
-    const r = l[o];
-    e = e || !!r && J in r, l[o] = typeof r == "function" ? (e = !0, Me(r)) : r;
+  for (let i = 0; i < r.length; i++) {
+    const l = r[i];
+    e = e || !!l && te in l, r[i] = typeof l == "function" ? (e = !0, Ie(l)) : l;
   }
   if (e)
     return new Proxy(
       {
-        get(o) {
-          for (let r = l.length - 1; r >= 0; r--) {
-            const n = q(l[r])[o];
+        get(i) {
+          for (let l = r.length - 1; l >= 0; l--) {
+            const n = ee(r[l])[i];
             if (n !== void 0)
               return n;
           }
         },
-        has(o) {
-          for (let r = l.length - 1; r >= 0; r--)
-            if (o in q(l[r]))
+        has(i) {
+          for (let l = r.length - 1; l >= 0; l--)
+            if (i in ee(r[l]))
               return !0;
           return !1;
         },
         keys() {
-          const o = [];
-          for (let r = 0; r < l.length; r++)
-            o.push(...Object.keys(q(l[r])));
-          return [...new Set(o)];
+          const i = [];
+          for (let l = 0; l < r.length; l++)
+            i.push(...Object.keys(ee(r[l])));
+          return [...new Set(i)];
         }
       },
-      $e
+      Ge
     );
-  const t = {}, s = {}, i = /* @__PURE__ */ new Set();
-  for (let o = l.length - 1; o >= 0; o--) {
-    const r = l[o];
-    if (!r)
+  const t = {}, s = {}, o = /* @__PURE__ */ new Set();
+  for (let i = r.length - 1; i >= 0; i--) {
+    const l = r[i];
+    if (!l)
       continue;
-    const n = Object.getOwnPropertyNames(r);
-    for (let a = 0, h = n.length; a < h; a++) {
+    const n = Object.getOwnPropertyNames(l);
+    for (let a = 0, c = n.length; a < c; a++) {
       const d = n[a];
       if (d === "__proto__" || d === "constructor")
         continue;
-      const c = Object.getOwnPropertyDescriptor(r, d);
-      if (!i.has(d))
-        c.get ? (i.add(d), Object.defineProperty(t, d, {
+      const h = Object.getOwnPropertyDescriptor(l, d);
+      if (!o.has(d))
+        h.get ? (o.add(d), Object.defineProperty(t, d, {
           enumerable: !0,
           configurable: !0,
-          get: Be.bind(s[d] = [c.get.bind(r)])
-        })) : (c.value !== void 0 && i.add(d), t[d] = c.value);
+          get: _e.bind(s[d] = [h.get.bind(l)])
+        })) : (h.value !== void 0 && o.add(d), t[d] = h.value);
       else {
-        const p = s[d];
-        p ? c.get ? p.push(c.get.bind(r)) : c.value !== void 0 && p.push(() => c.value) : t[d] === void 0 && (t[d] = c.value);
+        const g = s[d];
+        g ? h.get ? g.push(h.get.bind(l)) : h.value !== void 0 && g.push(() => h.value) : t[d] === void 0 && (t[d] = h.value);
       }
     }
   }
   return t;
 }
-function Pe(l, e, t) {
-  let s = t.length, i = e.length, o = s, r = 0, n = 0, a = e[i - 1].nextSibling, h = null;
-  for (; r < i || n < o; ) {
-    if (e[r] === t[n]) {
-      r++, n++;
+function Ve(r, e, t) {
+  let s = t.length, o = e.length, i = s, l = 0, n = 0, a = e[o - 1].nextSibling, c = null;
+  for (; l < o || n < i; ) {
+    if (e[l] === t[n]) {
+      l++, n++;
       continue;
     }
-    for (; e[i - 1] === t[o - 1]; )
-      i--, o--;
-    if (i === r) {
-      const d = o < s ? n ? t[n - 1].nextSibling : t[o - n] : a;
-      for (; n < o; )
-        l.insertBefore(t[n++], d);
-    } else if (o === n)
-      for (; r < i; )
-        (!h || !h.has(e[r])) && e[r].remove(), r++;
-    else if (e[r] === t[o - 1] && t[n] === e[i - 1]) {
-      const d = e[--i].nextSibling;
-      l.insertBefore(t[n++], e[r++].nextSibling), l.insertBefore(t[--o], d), e[i] = t[o];
+    for (; e[o - 1] === t[i - 1]; )
+      o--, i--;
+    if (o === l) {
+      const d = i < s ? n ? t[n - 1].nextSibling : t[i - n] : a;
+      for (; n < i; )
+        r.insertBefore(t[n++], d);
+    } else if (i === n)
+      for (; l < o; )
+        (!c || !c.has(e[l])) && e[l].remove(), l++;
+    else if (e[l] === t[i - 1] && t[n] === e[o - 1]) {
+      const d = e[--o].nextSibling;
+      r.insertBefore(t[n++], e[l++].nextSibling), r.insertBefore(t[--i], d), e[o] = t[i];
     } else {
-      if (!h) {
-        h = /* @__PURE__ */ new Map();
-        let c = n;
-        for (; c < o; )
-          h.set(t[c], c++);
+      if (!c) {
+        c = /* @__PURE__ */ new Map();
+        let h = n;
+        for (; h < i; )
+          c.set(t[h], h++);
       }
-      const d = h.get(e[r]);
+      const d = c.get(e[l]);
       if (d != null)
-        if (n < d && d < o) {
-          let c = r, p = 1, g;
-          for (; ++c < i && c < o && !((g = h.get(e[c])) == null || g !== d + p); )
-            p++;
-          if (p > d - n) {
-            const u = e[r];
+        if (n < d && d < i) {
+          let h = l, g = 1, f;
+          for (; ++h < o && h < i && !((f = c.get(e[h])) == null || f !== d + g); )
+            g++;
+          if (g > d - n) {
+            const b = e[l];
             for (; n < d; )
-              l.insertBefore(t[n++], u);
+              r.insertBefore(t[n++], b);
           } else
-            l.replaceChild(t[n++], e[r++]);
+            r.replaceChild(t[n++], e[l++]);
         } else
-          r++;
+          l++;
       else
-        e[r++].remove();
+        e[l++].remove();
     }
   }
 }
-function We(l, e, t, s = {}) {
-  let i;
-  return Ee((o) => {
-    i = o, e === document ? l() : Ge(e, l(), e.firstChild ? null : void 0, t);
+function Ne(r, e, t, s = {}) {
+  let o;
+  return ke((i) => {
+    o = i, e === document ? r() : Xe(e, r(), e.firstChild ? null : void 0, t);
   }, s.owner), () => {
-    i(), e.textContent = "";
+    o(), e.textContent = "";
   };
 }
-function He(l, e, t) {
+function ze(r, e, t) {
   let s;
-  const i = () => {
-    const r = document.createElement("template");
-    return r.innerHTML = l, t ? r.content.firstChild.firstChild : r.content.firstChild;
-  }, o = e ? () => W(() => document.importNode(s || (s = i()), !0)) : () => (s || (s = i())).cloneNode(!0);
-  return o.cloneNode = o, o;
+  const o = () => {
+    const l = document.createElement("template");
+    return l.innerHTML = r, t ? l.content.firstChild.firstChild : l.content.firstChild;
+  }, i = e ? () => H(() => document.importNode(s || (s = o()), !0)) : () => (s || (s = o())).cloneNode(!0);
+  return i.cloneNode = i, i;
 }
-function Ve(l, e, t) {
-  return W(() => l(e, t));
+function je(r, e, t) {
+  return H(() => r(e, t));
 }
-function Ge(l, e, t, s) {
+function Xe(r, e, t, s) {
   if (t !== void 0 && !s && (s = []), typeof e != "function")
-    return X(l, e, s, t);
-  Q((i) => X(l, e(), i, t), s);
+    return X(r, e, s, t);
+  se((o) => X(r, e(), o, t), s);
 }
-function X(l, e, t, s, i) {
+function X(r, e, t, s, o) {
   for (; typeof t == "function"; )
     t = t();
   if (e === t)
     return t;
-  const o = typeof e, r = s !== void 0;
-  if (l = r && t[0] && t[0].parentNode || l, o === "string" || o === "number")
-    if (o === "number" && (e = e.toString()), r) {
+  const i = typeof e, l = s !== void 0;
+  if (r = l && t[0] && t[0].parentNode || r, i === "string" || i === "number")
+    if (i === "number" && (e = e.toString()), l) {
       let n = t[0];
-      n && n.nodeType === 3 ? n.data = e : n = document.createTextNode(e), t = P(l, t, s, n);
+      n && n.nodeType === 3 ? n.data = e : n = document.createTextNode(e), t = B(r, t, s, n);
     } else
-      t !== "" && typeof t == "string" ? t = l.firstChild.data = e : t = l.textContent = e;
-  else if (e == null || o === "boolean")
-    t = P(l, t, s);
+      t !== "" && typeof t == "string" ? t = r.firstChild.data = e : t = r.textContent = e;
+  else if (e == null || i === "boolean")
+    t = B(r, t, s);
   else {
-    if (o === "function")
-      return Q(() => {
+    if (i === "function")
+      return se(() => {
         let n = e();
         for (; typeof n == "function"; )
           n = n();
-        t = X(l, n, t, s);
+        t = X(r, n, t, s);
       }), () => t;
     if (Array.isArray(e)) {
       const n = [], a = t && Array.isArray(t);
-      if (Z(n, e, t, i))
-        return Q(() => t = X(l, n, t, s, !0)), () => t;
+      if (oe(n, e, t, o))
+        return se(() => t = X(r, n, t, s, !0)), () => t;
       if (n.length === 0) {
-        if (t = P(l, t, s), r)
+        if (t = B(r, t, s), l)
           return t;
       } else
-        a ? t.length === 0 ? ce(l, n, s) : Pe(l, t, n) : (t && P(l), ce(l, n));
+        a ? t.length === 0 ? pe(r, n, s) : Ve(r, t, n) : (t && B(r), pe(r, n));
       t = n;
     } else if (e.nodeType) {
       if (Array.isArray(t)) {
-        if (r)
-          return t = P(l, t, s, e);
-        P(l, t, null, e);
+        if (l)
+          return t = B(r, t, s, e);
+        B(r, t, null, e);
       } else
-        t == null || t === "" || !l.firstChild ? l.appendChild(e) : l.replaceChild(e, l.firstChild);
+        t == null || t === "" || !r.firstChild ? r.appendChild(e) : r.replaceChild(e, r.firstChild);
       t = e;
     }
   }
   return t;
 }
-function Z(l, e, t, s) {
-  let i = !1;
-  for (let o = 0, r = e.length; o < r; o++) {
-    let n = e[o], a = t && t[o], h;
+function oe(r, e, t, s) {
+  let o = !1;
+  for (let i = 0, l = e.length; i < l; i++) {
+    let n = e[i], a = t && t[i], c;
     if (!(n == null || n === !0 || n === !1))
-      if ((h = typeof n) == "object" && n.nodeType)
-        l.push(n);
+      if ((c = typeof n) == "object" && n.nodeType)
+        r.push(n);
       else if (Array.isArray(n))
-        i = Z(l, n, a) || i;
-      else if (h === "function")
+        o = oe(r, n, a) || o;
+      else if (c === "function")
         if (s) {
           for (; typeof n == "function"; )
             n = n();
-          i = Z(
-            l,
+          o = oe(
+            r,
             Array.isArray(n) ? n : [n],
             Array.isArray(a) ? a : [a]
-          ) || i;
+          ) || o;
         } else
-          l.push(n), i = !0;
+          r.push(n), o = !0;
       else {
         const d = String(n);
-        a && a.nodeType === 3 && a.data === d ? l.push(a) : l.push(document.createTextNode(d));
+        a && a.nodeType === 3 && a.data === d ? r.push(a) : r.push(document.createTextNode(d));
       }
   }
-  return i;
+  return o;
 }
-function ce(l, e, t = null) {
-  for (let s = 0, i = e.length; s < i; s++)
-    l.insertBefore(e[s], t);
+function pe(r, e, t = null) {
+  for (let s = 0, o = e.length; s < o; s++)
+    r.insertBefore(e[s], t);
 }
-function P(l, e, t, s) {
+function B(r, e, t, s) {
   if (t === void 0)
-    return l.textContent = "";
-  const i = s || document.createTextNode("");
+    return r.textContent = "";
+  const o = s || document.createTextNode("");
   if (e.length) {
-    let o = !1;
-    for (let r = e.length - 1; r >= 0; r--) {
-      const n = e[r];
-      if (i !== n) {
-        const a = n.parentNode === l;
-        !o && !r ? a ? l.replaceChild(i, n) : l.insertBefore(i, t) : a && n.remove();
+    let i = !1;
+    for (let l = e.length - 1; l >= 0; l--) {
+      const n = e[l];
+      if (o !== n) {
+        const a = n.parentNode === r;
+        !i && !l ? a ? r.replaceChild(o, n) : r.insertBefore(o, t) : a && n.remove();
       } else
-        o = !0;
+        i = !0;
     }
   } else
-    l.insertBefore(i, t);
-  return [i];
+    r.insertBefore(o, t);
+  return [o];
 }
-class ut {
+class mt {
   constructor(e) {
     this.code = e;
   }
-  render(e, t, s, i, o, r, n) {
-    const a = be({
+  render(e, t, s, o, i, l, n) {
+    const a = xe({
       rowIndex: t,
       columnIndex: s,
-      areaIdent: i,
-      areaModel: o,
-      cellValue: r
+      areaIdent: o,
+      areaModel: i,
+      cellValue: l
     });
-    We(
+    Ne(
       () => this.code(a),
       e
     );
   }
 }
-const pt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const yt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
 }, Symbol.toStringTag, { value: "Module" }));
 class $ {
@@ -513,18 +513,18 @@ class $ {
     }
   }
 }
-function ee(l) {
-  return l && l.type === "TreeRow";
+function ie(r) {
+  return r && r.type === "TreeRow";
 }
-function te(l) {
-  return l && l.type === "AreaModelTree";
+function le(r) {
+  return r && r.type === "AreaModelTree";
 }
-class ie {
-  constructor(e = -1, t = -1, s = -1, i = -1, o, r, n, a = 0, h = 0, d = 0, c = "") {
-    this.rowIndex = e, this.rowTop = t, this.columnIndex = s, this.columnLeft = i, this.areaIdent = o, this.sideIdent = r, this.originalEvent = n, this.clickCount = a, this.draggingX = h, this.draggingY = d, this.action = c;
+class ne {
+  constructor(e = -1, t = -1, s = -1, o = -1, i, l, n, a = 0, c = 0, d = 0, h = "") {
+    this.rowIndex = e, this.rowTop = t, this.columnIndex = s, this.columnLeft = o, this.areaIdent = i, this.sideIdent = l, this.originalEvent = n, this.clickCount = a, this.draggingX = c, this.draggingY = d, this.action = h;
   }
   clone() {
-    return new ie(
+    return new ne(
       this.rowIndex,
       this.rowTop,
       this.columnIndex,
@@ -539,38 +539,38 @@ class ie {
     );
   }
 }
-class B {
+class I {
   constructor(e = ">", t = "", s = []) {
     this.content = e, this.style = t, this.classes = s;
   }
 }
-class ye {
-  constructor(e = new B(
+class Ee {
+  constructor(e = new I(
     ">",
     "transform: rotate(90deg) translate(66%, -66%); transform-origin: 0 0;",
     ["gt-table-tree-arrow-expanded"]
-  ), t = new B(
+  ), t = new I(
     ">",
     "",
     ["ge-table-tree-arrow-collapsed"]
-  ), s = new B(
+  ), s = new I(
     ">",
     "color:transparent;",
     ["gt-table-tree-arrow-hidden"]
-  ), i = new B(
+  ), o = new I(
     "↕",
     "",
     ["gt-table-tree-arrow-expanded-all"]
   )) {
-    this.arrowExpanded = e, this.arrowCollapsed = t, this.arrowPlaceholder = s, this.arrowExpandCollapseAll = i;
+    this.arrowExpanded = e, this.arrowCollapsed = t, this.arrowPlaceholder = s, this.arrowExpandCollapseAll = o;
   }
 }
-class ve {
-  constructor(e = new B("↑", "", ["ge-header-sorted-asc"]), t = new B("↓", "", ["ge-header-sorted-desc"]), s = new B("↑", "color:transparent;", [])) {
+class Ae {
+  constructor(e = new I("↑", "", ["ge-header-sorted-asc"]), t = new I("↓", "", ["ge-header-sorted-desc"]), s = new I("↑", "color:transparent;", [])) {
     this.iconAsc = e, this.iconDesc = t, this.iconPlaceholder = s;
   }
 }
-class ke {
+class Ke {
   constructor(e) {
     this.domService = e;
   }
@@ -589,7 +589,7 @@ class ke {
     return this.domService.setStyle(e, "display", "block"), e;
   }
   applyStyleInPx(e, t) {
-    return Object.entries(t).forEach(([s, i]) => this.domService.setStyle(e, s, i + "px")), e;
+    return Object.entries(t).forEach(([s, o]) => this.domService.setStyle(e, s, o + "px")), e;
   }
   applyStylePosistionRelative(e) {
     return this.domService.setStyle(e, "position", "relative"), this.domService.setStyle(e, "overflow", "clip"), e;
@@ -635,115 +635,116 @@ class ke {
   setAttribute(e, t, s) {
     return t && s && this.domService.setAttribute(e, t, s), e;
   }
-  createAreaDivWithClass(e, t, s, i) {
-    const o = this.domService.createElement("div");
-    return this.addClass(e, o), this.domService.setAttribute(o, "data-area", s), this.domService.setAttribute(o, "data-side", i), this.domService.appendChild(t, o), o;
+  createAreaDivWithClass(e, t, s, o) {
+    const i = this.domService.createElement("div");
+    return this.addClass(e, i), this.domService.setAttribute(i, "data-area", s), this.domService.setAttribute(i, "data-side", o), this.domService.appendChild(t, i), i;
   }
   createDivWithClass(e, t) {
     const s = this.domService.createElement("div");
     return this.addClass(e, s), this.domService.appendChild(t, s), s;
   }
-  addRowDiv(e, t, s = -1, i, o, r = "") {
+  addRowDiv(e, t, s = -1, o, i, l = "") {
     const n = t.index ?? -1, a = this.getDivOrCreateDiv(n, e);
-    if (this.domService.addClass(a, "ge-table-row-div"), this.domService.addClass(a, `ge-table-row-div-${t.index}`), i === "body" && o === "center") {
-      const h = ((t == null ? void 0 : t.index) ?? 0) % 2 === 0 ? "even" : "odd";
-      this.domService.addClass(a, `ge-table-row-${h}`);
+    if (this.domService.addClass(a, "ge-table-row-div"), this.domService.addClass(a, `ge-table-row-div-${t.index}`), o === "body" && i === "center") {
+      const c = ((t == null ? void 0 : t.index) ?? 0) % 2 === 0 ? "even" : "odd";
+      this.domService.addClass(a, `ge-table-row-${c}`);
     }
-    if (this.domService.setStyle(a, "display", "clip"), this.domService.setStyle(a, "position", "absolute"), this.domService.setStyle(a, "left", `${t.left}px`), this.domService.setStyle(a, "top", `${t.top}px`), this.domService.setStyle(a, "width", `${t.width}px`), this.domService.setStyle(a, "height", `${t.height}px`), this.domService.setAttribute(a, "data-row-index", `${s}`), this.domService.setAttribute(a, "data-area", `${i}`), r) {
-      const h = this.domService.createText(r);
-      this.domService.appendChild(a, h);
+    if (this.domService.setStyle(a, "display", "clip"), this.domService.setStyle(a, "position", "absolute"), this.domService.setStyle(a, "left", `${t.left}px`), this.domService.setStyle(a, "top", `${t.top}px`), this.domService.setStyle(a, "width", `${t.width}px`), this.domService.setStyle(a, "height", `${t.height}px`), this.domService.setAttribute(a, "data-row-index", `${s}`), this.domService.setAttribute(a, "data-area", `${o}`), l) {
+      const c = this.domService.createText(l);
+      this.domService.appendChild(a, c);
     }
     return this.domService.appendChild(e.child, a), a;
   }
-  addColumnDiv(e, t, s = -1, i = -1, o, r, n = "", a, h, d = void 0, c) {
-    const p = h == null ? void 0 : h.treeOptions, g = h == null ? void 0 : h.showCheckboxWihoutExtraColumn, u = this.domService.createElement("div");
-    this.domService.addClass(u, "ge-table-col-div"), this.domService.addClass(u, `ge-table-col-div-${t.index}`), this.domService.setAttribute(u, "data-col-index", `${t.index}`), this.domService.setAttribute(u, "data-row-index", `${s}`), this.domService.setAttribute(u, "data-area", `${o}`);
-    const m = ((t == null ? void 0 : t.index) ?? 0) % 2 === 0 ? "even" : "odd";
-    if (o === "body" && r === "center" && this.domService.addClass(u, `ge-table-column-${m}`), this.domService.setStyle(u, "display", "clip"), this.domService.setStyle(u, "position", "absolute"), this.domService.setStyle(u, "left", `${t.left}px`), this.domService.setStyle(u, "top", `${t.top}px`), this.domService.setStyle(u, "width", `${t.width}px`), this.domService.setStyle(u, "height", `${t.height}px`), a && a !== "none" && (this.domService.addClass(u, "ge-table-col-tree"), this.addArrowDiv(u, a, p, s, i, o)), g && i === 0 && d && this.addCheckboxToDiv(u, d, o, s), n) {
-      const S = a !== "none" && i === 0;
-      this.addLabelDiv(u, n, S, s, i, o);
+  addColumnDiv(e) {
+    const { parent: t, geo: s, rowIndex: o = -1, columnIndex: i = -1, areaIdent: l, sideIdent: n, text: a = "", treeArrow: c, tableOptions: d, checkedType: h = void 0, sortState: g } = e, f = d == null ? void 0 : d.treeOptions, b = d == null ? void 0 : d.showCheckboxWihoutExtraColumn, S = this.domService.createElement("div");
+    this.domService.addClass(S, "ge-table-col-div"), this.domService.addClass(S, `ge-table-col-div-${s.index}`), this.domService.setAttribute(S, "data-col-index", `${s.index}`), this.domService.setAttribute(S, "data-row-index", `${o}`), this.domService.setAttribute(S, "data-area", `${l}`);
+    const p = ((s == null ? void 0 : s.index) ?? 0) % 2 === 0 ? "even" : "odd";
+    if (l === "body" && n === "center" && this.domService.addClass(S, `ge-table-column-${p}`), this.domService.setStyle(S, "display", "clip"), this.domService.setStyle(S, "position", "absolute"), this.domService.setStyle(S, "left", `${s.left}px`), this.domService.setStyle(S, "top", `${s.top}px`), this.domService.setStyle(S, "width", `${s.width}px`), this.domService.setStyle(S, "height", `${s.height}px`), c && c !== "none" && (this.domService.addClass(S, "ge-table-col-tree"), this.addArrowDiv(S, c, f, o, i, l)), b && i === 0 && h && this.addCheckboxToDiv(S, h, l, o), a) {
+      const u = c !== "none" && i === 0;
+      this.addLabelDiv(S, a, u, o, i, l);
     }
-    return c && this.addSortedIcon(u, c, h == null ? void 0 : h.sortedOptions, i), this.domService.appendChild(e, u), u;
+    return g && this.addSortedIcon(S, g, d == null ? void 0 : d.sortedOptions, i), this.domService.appendChild(t, S), S;
   }
-  addCheckboxToDiv(e, t, s, i) {
-    const o = this.domService.createElement("div"), r = t === "full" ? "checked" : "";
-    return o.innerHTML = `
+  addCheckboxToDiv(e, t, s, o) {
+    const i = this.domService.createElement("div"), l = t === "full" ? "checked" : "";
+    return i.innerHTML = `
             <input
                 type="checkbox"
                 data-area="${s}"
-                data-row-index="${i}"
+                data-row-index="${o}"
                 data-input-type="checkbox"
-                ${r}
-                class="ge-table-row-checkbox"> `, this.domService.setStyle(o, "display", "inline"), this.domService.setStyle(o, "width", "inherit"), this.domService.setAttribute(o, "data-row-index", `${i}`), this.domService.appendChild(e, o), o;
+                ${l}
+                class="ge-table-row-checkbox"> `, this.domService.setStyle(i, "display", "inline"), this.domService.setStyle(i, "width", "inherit"), this.domService.setAttribute(i, "data-row-index", `${o}`), this.domService.appendChild(e, i), i;
   }
-  addLabelDiv(e, t = "", s = !1, i = -1, o = -1, r = "body") {
+  addLabelDiv(e, t = "", s = !1, o = -1, i = -1, l = "body") {
     const n = this.domService.createElement("div");
-    if (this.domService.addClass(n, "ge-table-label-div"), this.domService.setStyle(n, "position", "relative"), this.domService.setStyle(n, "background", "transparent"), this.domService.setStyle(n, "width", "100%"), this.domService.setStyle(n, "height", "100%"), this.domService.setAttribute(n, "data-row-index", `${i}`), this.domService.setAttribute(n, "data-col-index", `${o}`), this.domService.setAttribute(n, "data-area", `${r}`), t)
+    if (this.domService.addClass(n, "ge-table-label-div"), this.domService.setStyle(n, "position", "relative"), this.domService.setStyle(n, "background", "transparent"), this.domService.setStyle(n, "width", "100%"), this.domService.setStyle(n, "height", "100%"), this.domService.setAttribute(n, "data-row-index", `${o}`), this.domService.setAttribute(n, "data-col-index", `${i}`), this.domService.setAttribute(n, "data-area", `${l}`), t)
       if (s) {
         const a = this.domService.createText(t);
         this.domService.appendChild(n, a);
       } else {
         const a = this.domService.createElement("div");
         this.domService.appendChild(n, a);
-        const h = this.domService.createText(t);
-        this.domService.addClass(a, "ge-table-label"), this.domService.appendChild(a, h), this.domService.setAttribute(a, "data-row-index", `${i}`), this.domService.setAttribute(a, "data-col-index", `${o}`), this.domService.setAttribute(a, "data-area", `${r}`);
+        const c = this.domService.createText(t);
+        this.domService.addClass(a, "ge-table-label"), this.domService.appendChild(a, c), this.domService.setAttribute(a, "data-row-index", `${o}`), this.domService.setAttribute(a, "data-col-index", `${i}`), this.domService.setAttribute(a, "data-area", `${l}`);
       }
     return this.domService.appendChild(e, n), n;
   }
-  addSortedIcon(e, t = "", s = new ve(), i = -1) {
-    const o = this.domService.createElement("div");
-    this.domService.addClass(o, "ge-table-sorted-icon-div"), this.domService.setStyle(o, "position", "absolute"), this.domService.setStyle(o, "top", "0"), this.domService.setStyle(o, "right", "0"), this.domService.setStyle(o, "width", "20px"), this.domService.setStyle(o, "background", "transparent"), this.domService.setStyle(o, "cursor", "pointer"), this.domService.setAttribute(o, "data-col-index", `${i}`), this.domService.setAttribute(o, "data-area", "header");
-    let r;
-    t === "asc" ? r = s.iconAsc : t === "desc" ? r = s.iconDesc : r = s.iconPlaceholder;
-    const n = r.content, a = this.domService.createText(n);
-    this.domService.appendChild(o, a), r.style && this.applyStyleString(o, r.style);
-    for (const h of r.classes)
-      this.domService.addClass(o, h);
-    return this.domService.appendChild(e, o), o;
-  }
-  addArrowDiv(e, t = "none", s = new ye(), i = -1, o = -1, r = "body") {
+  addSortedIcon(e, t = "", s = new Ae(), o = -1) {
+    const i = this.domService.createElement("div");
+    this.domService.addClass(i, "ge-table-sorted-icon-div"), this.domService.setStyle(i, "position", "absolute"), this.domService.setStyle(i, "top", "0"), this.domService.setStyle(i, "right", "0"), this.domService.setStyle(i, "width", "20px"), this.domService.setStyle(i, "background", "transparent"), this.domService.setStyle(i, "cursor", "pointer"), this.domService.setAttribute(i, "data-col-index", `${o}`), this.domService.setAttribute(i, "data-area", "header");
+    let l;
+    t === "asc" ? l = s.iconAsc : t === "desc" ? l = s.iconDesc : l = s.iconPlaceholder;
+    const n = l.content, a = this.domService.createText(n);
+    this.domService.appendChild(i, a), l.style && this.applyStyleString(i, l.style);
+    for (const c of l.classes)
+      this.domService.addClass(i, c);
+    return this.domService.appendChild(e, i), i;
+  }
+  addArrowDiv(e, t = "none", s = new Ee(), o = -1, i = -1, l = "body") {
     const n = this.domService.createElement("div");
-    this.domService.addClass(n, "ge-table-tree-arrow-div"), this.domService.setStyle(n, "display", "inline-block"), this.domService.setStyle(n, "position", ""), this.domService.setStyle(n, "width", "20px"), this.domService.setStyle(n, "background", "transparent"), this.domService.setStyle(n, "cursor", "pointer"), this.domService.setAttribute(n, "data-row-index", `${i}`), this.domService.setAttribute(n, "data-col-index", `${o}`), this.domService.setAttribute(n, "data-area", `${r}`);
+    this.domService.addClass(n, "ge-table-tree-arrow-div"), this.domService.setStyle(n, "display", "inline-block"), this.domService.setStyle(n, "position", ""), this.domService.setStyle(n, "width", "20px"), this.domService.setStyle(n, "background", "transparent"), this.domService.setStyle(n, "cursor", "pointer"), this.domService.setAttribute(n, "data-row-index", `${o}`), this.domService.setAttribute(n, "data-col-index", `${i}`), this.domService.setAttribute(n, "data-area", `${l}`);
     let a;
     t === "expanded" ? a = s.arrowExpanded : t === "collapsed" ? a = s.arrowCollapsed : a = s.arrowPlaceholder;
-    const h = a.content, d = this.domService.createText(h);
+    const c = a.content, d = this.domService.createText(c);
     this.domService.appendChild(n, d), a.style && this.applyStyleString(n, a.style);
-    for (const c of a.classes)
-      this.domService.addClass(n, c);
+    for (const h of a.classes)
+      this.domService.addClass(n, h);
     return this.domService.appendChild(e, n), n;
   }
-  addColumnBorderDivs(e, t, s, i, o) {
+  addColumnBorderDivs(e, t, s, o, i) {
     if (e.verticalBorderVisible) {
-      const r = `ge-table-${i}-${o}-vertical-border`;
-      this.addVerticalBorder(s, t, r);
+      const l = `ge-table-${o}-${i}-vertical-border`;
+      this.addVerticalBorder(s, t, l);
     }
     if (e.horizontalBorderVisible) {
-      const r = `ge-table-${i}-${o}-horizontal-border`;
-      this.addHorizontalBorder(s, t, r);
+      const l = `ge-table-${o}-${i}-horizontal-border`;
+      this.addHorizontalBorder(s, t, l);
     }
     return t;
   }
   addHorizontalBorder(e, t, s = "ge-table-body-center-horizontal-border") {
-    const i = this.domService.createElement("div");
-    return this.domService.addClass(i, s), this.domService.setStyle(i, "display", "clip"), this.domService.setStyle(i, "position", "absolute"), this.domService.setStyle(i, "left", `${e.left}px`), this.domService.setStyle(i, "top", `${e.top}px`), this.domService.setStyle(i, "width", `${e.width}px`), this.domService.setStyle(i, "height", "1px"), this.domService.appendChild(t, i), i;
+    const o = this.domService.createElement("div");
+    return this.domService.addClass(o, s), this.domService.setStyle(o, "display", "clip"), this.domService.setStyle(o, "position", "absolute"), this.domService.setStyle(o, "left", `${e.left}px`), this.domService.setStyle(o, "top", `${e.top}px`), this.domService.setStyle(o, "width", `${e.width}px`), this.domService.setStyle(o, "height", "1px"), this.domService.appendChild(t, o), o;
   }
   addFocusBorderDivs(e, t, s) {
-    let i = this.domService.createElement("div");
-    return this.domService.addClass(i, "ge-table-focus-border"), this.domService.setStyle(i, "display", "clip"), this.domService.setStyle(i, "position", "absolute"), this.domService.setStyle(i, "left", `${t.left}px`), this.domService.setStyle(i, "top", `${t.top}px`), this.domService.setStyle(i, "width", "1px"), this.domService.setStyle(i, "height", `${t.height}px`), this.applyStyle(i, s), this.domService.appendChild(e, i), i = this.domService.createElement("div"), this.domService.addClass(i, "ge-table-focus-border"), this.domService.setStyle(i, "display", "clip"), this.domService.setStyle(i, "position", "absolute"), this.domService.setStyle(i, "left", `${t.left + t.width - 1}px`), this.domService.setStyle(i, "top", `${t.top}px`), this.domService.setStyle(i, "width", "1px"), this.domService.setStyle(i, "height", `${t.height}px`), this.applyStyle(i, s), this.domService.appendChild(e, i), i = this.domService.createElement("div"), this.domService.addClass(i, "ge-table-focus-border"), this.domService.setStyle(i, "display", "clip"), this.domService.setStyle(i, "position", "absolute"), this.domService.setStyle(i, "left", `${t.left}px`), this.domService.setStyle(i, "top", `${t.top}px`), this.domService.setStyle(i, "width", `${t.width}px`), this.domService.setStyle(i, "height", "1px"), this.applyStyle(i, s), this.domService.appendChild(e, i), i = this.domService.createElement("div"), this.domService.addClass(i, "ge-table-focus-border"), this.domService.setStyle(i, "display", "clip"), this.domService.setStyle(i, "position", "absolute"), this.domService.setStyle(i, "left", `${t.left}px`), this.domService.setStyle(i, "top", `${t.top + t.height - 1}px`), this.domService.setStyle(i, "width", `${t.width}px`), this.domService.setStyle(i, "height", "1px"), this.applyStyle(i, s), this.domService.appendChild(e, i), e;
+    t = { ...t, width: t.width + 1, height: t.height + 1 };
+    let o = this.domService.createElement("div");
+    return this.domService.addClass(o, "ge-table-focus-border"), this.domService.setStyle(o, "display", "clip"), this.domService.setStyle(o, "position", "absolute"), this.domService.setStyle(o, "left", `${t.left}px`), this.domService.setStyle(o, "top", `${t.top}px`), this.domService.setStyle(o, "width", "1px"), this.domService.setStyle(o, "height", `${t.height}px`), this.domService.setStyle(o, "z-index", "9999"), this.applyStyle(o, s), this.domService.appendChild(e, o), o = this.domService.createElement("div"), this.domService.addClass(o, "ge-table-focus-border"), this.domService.setStyle(o, "display", "clip"), this.domService.setStyle(o, "position", "absolute"), this.domService.setStyle(o, "left", `${t.left + t.width - 1}px`), this.domService.setStyle(o, "top", `${t.top}px`), this.domService.setStyle(o, "width", "1px"), this.domService.setStyle(o, "height", `${t.height}px`), this.domService.setStyle(o, "z-index", "9999"), this.applyStyle(o, s), this.domService.appendChild(e, o), o = this.domService.createElement("div"), this.domService.addClass(o, "ge-table-focus-border"), this.domService.setStyle(o, "display", "clip"), this.domService.setStyle(o, "position", "absolute"), this.domService.setStyle(o, "left", `${t.left}px`), this.domService.setStyle(o, "top", `${t.top}px`), this.domService.setStyle(o, "width", `${t.width}px`), this.domService.setStyle(o, "height", "1px"), this.domService.setStyle(o, "z-index", "9999"), this.applyStyle(o, s), this.domService.appendChild(e, o), o = this.domService.createElement("div"), this.domService.addClass(o, "ge-table-focus-border"), this.domService.setStyle(o, "display", "clip"), this.domService.setStyle(o, "position", "absolute"), this.domService.setStyle(o, "left", `${t.left}px`), this.domService.setStyle(o, "top", `${t.top + t.height - 1}px`), this.domService.setStyle(o, "width", `${t.width}px`), this.domService.setStyle(o, "height", "1px"), this.domService.setStyle(o, "z-index", "9999"), this.applyStyle(o, s), this.domService.appendChild(e, o), e;
   }
   addVerticalBorder(e, t, s = "ge-table-body-center-vertical-border") {
-    const i = this.domService.createElement("div");
-    return this.domService.addClass(i, s), this.domService.setStyle(i, "display", "clip"), this.domService.setStyle(i, "position", "absolute"), this.domService.setStyle(i, "left", `${e.left}px`), this.domService.setStyle(i, "top", `${e.top}px`), this.domService.setStyle(i, "width", "1px"), this.domService.setStyle(i, "height", `${e.height}px`), this.domService.appendChild(t, i), i;
+    const o = this.domService.createElement("div");
+    return this.domService.addClass(o, s), this.domService.setStyle(o, "display", "clip"), this.domService.setStyle(o, "position", "absolute"), this.domService.setStyle(o, "left", `${e.left}px`), this.domService.setStyle(o, "top", `${e.top}px`), this.domService.setStyle(o, "width", "1px"), this.domService.setStyle(o, "height", `${e.height}px`), this.domService.appendChild(t, o), o;
   }
   addDiv(e, t, s = "") {
-    const i = this.domService.createElement("div");
-    return s && this.domService.addClass(i, s), this.domService.setStyle(i, "display", "clip"), this.domService.setStyle(i, "position", "absolute"), this.domService.setStyle(i, "left", `${t.left}px`), this.domService.setStyle(i, "top", `${t.top}px`), this.domService.setStyle(i, "width", `${t.width}px`), this.domService.setStyle(i, "height", `${t.height}px`), this.domService.appendChild(e, i), i;
+    const o = this.domService.createElement("div");
+    return s && this.domService.addClass(o, s), this.domService.setStyle(o, "display", "clip"), this.domService.setStyle(o, "position", "absolute"), this.domService.setStyle(o, "left", `${t.left}px`), this.domService.setStyle(o, "top", `${t.top}px`), this.domService.setStyle(o, "width", `${t.width}px`), this.domService.setStyle(o, "height", `${t.height}px`), this.domService.appendChild(e, o), o;
   }
   applyStyleString(e, t) {
-    const s = t.split(";").map((i) => i.trim()).filter((i) => i);
-    for (const i of s) {
-      const [o, r] = i.split(":");
-      this.domService.setStyle(e, o.trim(), r.trim());
+    const s = t.split(";").map((o) => o.trim()).filter((o) => o);
+    for (const o of s) {
+      const [i, l] = o.split(":");
+      this.domService.setStyle(e, i.trim(), l.trim());
     }
   }
   getDivOrCreateDiv(e, t) {
@@ -751,22 +752,22 @@ class ke {
     return s ? (s.innerText = "", s) : (s = this.domService.createElement("div"), t.cache[e] = s, s);
   }
 }
-const oe = (l) => l === "header" ? "header" : l === "footer" ? "footer" : "body";
-class Ne {
+const ae = (r) => r === "header" ? "header" : r === "footer" ? "footer" : "body";
+class Ye {
   constructor(e, t) {
     if (this.rowIdx = -1, this.colIdx = -1, this.action = null, this.inputType = null, this.className = "", e !== null && (e instanceof HTMLDivElement || e instanceof HTMLSpanElement || e instanceof HTMLInputElement)) {
       this.className = e.className, this.action = e.getAttribute("data-ge-action"), this.inputType = e.getAttribute("data-input-type"), this.rowIdx = Number(e.getAttribute("data-row-index")), this.colIdx = Number(e.getAttribute("data-col-index"));
       const s = e.getAttribute("data-area");
-      if (s && (this.areaIdent = oe(s), this.areaModel = t.tableModel.getAreaModel(this.areaIdent), this.row = this.areaModel.getRowByIndex(this.rowIdx)), e instanceof HTMLInputElement) {
-        const i = e;
-        this.value = i.value;
+      if (s && (this.areaIdent = ae(s), this.areaModel = t.tableModel.getAreaModel(this.areaIdent), this.row = this.areaModel.getRowByIndex(this.rowIdx)), e instanceof HTMLInputElement) {
+        const o = e;
+        this.value = o.value;
       }
     }
   }
 }
-class _e {
+class Ue {
   constructor(e) {
-    this.tableScope = e, this.expandedAll = !0, this.mouseDown = !1, this.dragging = !1, this.tableScope.hostElement.addEventListener("click", this.onHostElementClicked.bind(this)), this.tableScope.hostElement.addEventListener("dblclick", this.onHostElementDblClicked.bind(this)), this.tableScope.hostElement.addEventListener("mousedown", this.onMouseDown.bind(this)), this.tableScope.hostElement.addEventListener("mousemove", this.onMouseMove.bind(this)), this.tableScope.hostElement.addEventListener("mouseup", this.onMouseUp.bind(this)), this.tableScope.hostElement.addEventListener("contextmenu", this.onContextmenu.bind(this)), this.tableScope.hostElement._MouseHandler = "true", this.tableScope.scrollViewport.addEventListener("scroll", this.tableScope.adjustAfterScrolling.bind(this.tableScope)), [window, this.tableScope.hostElement].forEach(
+    this.tableScope = e, this.doubleClickDelay = 500, this.expandedAll = !0, this.mouseDown = !1, this.dragging = !1, this.lastClicked = 0, this.tableScope.hostElement.addEventListener("click", this.onHostElementClicked.bind(this)), this.tableScope.hostElement.addEventListener("dblclick", this.onHostElementDblClicked.bind(this)), this.tableScope.hostElement.addEventListener("mousedown", this.onMouseDown.bind(this)), this.tableScope.hostElement.addEventListener("mousemove", this.onMouseMove.bind(this)), this.tableScope.hostElement.addEventListener("mouseup", this.onMouseUp.bind(this)), this.tableScope.hostElement.addEventListener("contextmenu", this.onContextmenu.bind(this)), this.tableScope.hostElement._MouseHandler = "true", this.tableScope.scrollViewport.addEventListener("scroll", this.tableScope.adjustAfterScrolling.bind(this.tableScope)), [window, this.tableScope.hostElement].forEach(
       (t) => t.addEventListener("resize", this.tableScope.adjustContainersAndRows.bind(this.tableScope))
     );
   }
@@ -790,22 +791,28 @@ class _e {
    * @return {void}
    */
   onHostElementClicked(e) {
-    const t = new Ne(e.target, this.tableScope);
-    if (t.action === "toggleExpandCollapseAll")
+    const t = Date.now();
+    if (t - this.lastClicked < this.doubleClickDelay)
+      return;
+    this.lastClicked = t;
+    const s = new Ye(e.target, this.tableScope);
+    if (s.action === "toggleExpandCollapseAll")
       this.expandedAll = !this.expandedAll, this.tableScope.toggleExpandCollapseAll(this.expandedAll), e.preventDefault(), e.stopPropagation();
-    else if (t.inputType === "checkbox" && t.areaIdent)
-      this.tableScope.toggleRowCheckbox(t.rowIdx, t.colIdx, t.areaIdent), e.preventDefault(), e.stopPropagation();
-    else if (ee(t.row) && t.areaModel) {
-      const s = t.colIdx === this.getArrowColumnIndex() && e.altKey, i = t.className.includes("ge-table-tree-arrow-div");
-      if (console.info(i, s), s || i) {
+    else if (s.action === "toggleHeaderGroup")
+      this.tableScope.toggleHeaderGroup(s), e.preventDefault(), e.stopPropagation();
+    else if (s.inputType === "checkbox" && s.areaIdent)
+      this.tableScope.toggleRowCheckbox(s.rowIdx, s.colIdx, s.areaIdent), e.preventDefault(), e.stopPropagation();
+    else if (ie(s.row) && s.areaModel) {
+      const o = s.colIdx === this.getArrowColumnIndex() && e.altKey, i = s.className.includes("ge-table-tree-arrow-div");
+      if (console.info(i, o), o || i) {
         e.preventDefault(), e.stopPropagation();
-        const o = t.row;
-        o.expanded = !o.expanded, "recalcVisibleTreeRows" in t.areaModel && t.areaModel.recalcVisibleTreeRows(), this.tableScope.tableModel.recalcSize(this.tableScope.hostElement.clientWidth), this.tableScope.adjustContainersAndRows(), this.updateCollapsedExpandedState(o);
+        const l = s.row;
+        l.expanded = !l.expanded, "recalcVisibleTreeRows" in s.areaModel && s.areaModel.recalcVisibleTreeRows(), this.tableScope.tableModel.recalcSize(this.tableScope.hostElement.clientWidth), this.tableScope.adjustContainersAndRows(), this.updateCollapsedExpandedState(l);
       }
     }
-    if (t.areaIdent === "body" && this.tableScope.tableOptions.getFocusModel) {
-      const s = this.tableScope.tableOptions.getFocusModel();
-      s == null || s.clear(), s == null || s.setFocus(t.rowIdx, t.colIdx);
+    if (s.areaIdent === "body" && this.tableScope.tableOptions.getFocusModel) {
+      const o = this.tableScope.tableOptions.getFocusModel();
+      o == null || o.clear(), o == null || o.setFocus(s.rowIdx, s.colIdx);
     }
     this.publishGeMouseEvent(e, 1);
   }
@@ -816,16 +823,16 @@ class _e {
    * @param {MouseEvent} event - The double click event.
    */
   onHostElementDblClicked(e) {
-    if (e.target instanceof HTMLElement) {
-      const t = e.target, s = t.getAttribute("data-area"), i = oe(s), o = Number(t.getAttribute("data-row-index")), r = Number(t.getAttribute("data-col-index")), n = this.tableScope.tableModel.getAreaModel(i);
-      if (s && i === "header")
-        this.tableScope.tableModel.isSortable(r) && (this.tableScope.clearSelection(), this.tableScope.onHeaderDblClicked(e, o, r));
+    if (this.lastClicked = Date.now(), e.target instanceof HTMLElement) {
+      const t = e.target, s = t.getAttribute("data-area"), o = ae(s), i = Number(t.getAttribute("data-row-index")), l = Number(t.getAttribute("data-col-index")), n = this.tableScope.tableModel.getAreaModel(o);
+      if (s && o === "header")
+        this.tableScope.tableModel.isSortable(l) && (this.tableScope.clearSelection(), this.tableScope.onHeaderDblClicked(e, i, l));
       else if (t.getAttribute("data-row-index")) {
-        const a = n.getRowByIndex(o);
-        if (s && i === "body" && n.isEditable(o, r) && (this.tableScope.clearSelection(), this.tableScope.initRenderEditor(o, r)), ee(a) && r === this.getArrowColumnIndex()) {
+        const a = n.getRowByIndex(i);
+        if (s && o === "body" && n.isEditable(i, l) && (this.tableScope.clearSelection(), this.tableScope.initRenderEditor(i, l)), ie(a) && l === this.getArrowColumnIndex()) {
           e.preventDefault(), e.stopPropagation();
-          const h = a;
-          h.expanded = !h.expanded, "recalcVisibleTreeRows" in n && n.recalcVisibleTreeRows(), this.tableScope.tableModel.recalcSize(this.tableScope.hostElement.clientWidth), this.tableScope.adjustContainersAndRows(), this.updateCollapsedExpandedState(h);
+          const c = a;
+          c.expanded = !c.expanded, "recalcVisibleTreeRows" in n && n.recalcVisibleTreeRows(), this.tableScope.tableModel.recalcSize(this.tableScope.hostElement.clientWidth), this.tableScope.adjustContainersAndRows(), this.updateCollapsedExpandedState(c);
         }
       }
     }
@@ -841,7 +848,7 @@ class _e {
    */
   publishGeMouseEvent(e, t) {
     var s;
-    this.mouseEvent = e, this.geMouseEventOld = (s = this.geMouseEvent) == null ? void 0 : s.clone(), this.geMouseEvent = this.tableScope.createGeMouseEvent(e), this.geMouseEvent && (this.geMouseEvent.clickCount = t), this.tableScope.onMouseClicked(this.geMouseEvent, this.geMouseEventOld);
+    this.mouseEvent = e, this.geMouseEventOld = (s = this.geMouseEvent) == null ? void 0 : s.clone(), this.geMouseEvent = this.tableScope.createGeMouseEvent(e), this.geMouseEvent && (this.geMouseEvent.clickCount = t), this.tableScope.onMouseClicked(this.geMouseEvent, this.geMouseEventOld), this.tableScope.publishGeMouseEvent(this.geMouseEvent), t === 1 && this.tableScope.debounceRepaint();
   }
   /**
    * Update the collapsed/expanded state of a tree row.
@@ -850,30 +857,30 @@ class _e {
    * @returns {void}
    */
   updateCollapsedExpandedState(e) {
-    var s, i, o, r, n;
-    const t = (i = (s = this.tableScope.tableOptions) == null ? void 0 : s.autoRestoreOptions) == null ? void 0 : i.getRowId;
+    var s, o, i, l, n;
+    const t = (o = (s = this.tableScope.tableOptions) == null ? void 0 : s.autoRestoreOptions) == null ? void 0 : o.getRowId;
     if (t) {
-      const a = (o = this.tableScope.storeStateCollapsedExpandService) == null ? void 0 : o.collapsedExpandedStateGet().mode, h = a === "collapsed" && !e.expanded || a === "expanded" && e.expanded, d = a === "collapsed" && e.expanded || a === "expanded" && !e.expanded, c = t(e.data);
-      h ? (r = this.tableScope.storeStateCollapsedExpandService) == null || r.collapsedStateIdsPush(c) : d && ((n = this.tableScope.storeStateCollapsedExpandService) == null || n.collapsedStateIdsRemove(c));
+      const a = (i = this.tableScope.storeStateCollapsedExpandService) == null ? void 0 : i.collapsedExpandedStateGet().mode, c = a === "collapsed" && !e.expanded || a === "expanded" && e.expanded, d = a === "collapsed" && e.expanded || a === "expanded" && !e.expanded, h = t(e.data);
+      c ? (l = this.tableScope.storeStateCollapsedExpandService) == null || l.collapsedStateIdsPush(h) : d && ((n = this.tableScope.storeStateCollapsedExpandService) == null || n.collapsedStateIdsRemove(h));
     }
   }
   getArrowColumnIndex() {
     return this.tableScope.tableModel.isRowCheckboxVisible() ? 1 : 0;
   }
   onMouseDown(e) {
-    this.mouseEvent = e, this.startMouseEvent = this.tableScope.createGeMouseEvent(this.mouseEvent), this.tableScope.onMouseDown(this.startMouseEvent), this.mouseDown = !0;
+    this.dragging || (this.mouseEvent = e, this.startMouseEvent = this.tableScope.createGeMouseEvent(this.mouseEvent), this.tableScope.onMouseDown(this.startMouseEvent), this.mouseDown = !0);
   }
   onMouseMove(e) {
-    this.mouseEvent = e, this.mouseDown ? (this.dragging = !0, requestAnimationFrame(this.mouseDraggingOnFrame.bind(this))) : requestAnimationFrame(this.mouseMoveOnFrame.bind(this));
+    this.mouseEvent = e, this.mouseDown ? (this.dragging || (this.dragging = !0, this.tableScope.setDragging(!0)), requestAnimationFrame(this.mouseDraggingOnFrame.bind(this))) : requestAnimationFrame(this.mouseMoveOnFrame.bind(this));
   }
   onMouseUp(e) {
-    this.mouseEvent = e, this.dragging && requestAnimationFrame(this.mouseDraggingEndOnFrame.bind(this)), this.mouseDown = !1, this.dragging = !1;
+    this.mouseEvent = e, this.dragging && requestAnimationFrame(this.mouseDraggingEndOnFrame.bind(this)), this.mouseDown = !1, this.dragging = !1, this.tableScope.setDragging(!1);
   }
   mouseDraggingOnFrame() {
     var e;
     if (this.mouseEvent) {
       const t = this.tableScope.createGeMouseEvent(this.mouseEvent);
-      (e = this.startMouseEvent) != null && e.originalEvent && (t.draggingX = this.mouseEvent.clientX - this.startMouseEvent.originalEvent.clientX, t.draggingY = this.mouseEvent.clientY - this.startMouseEvent.originalEvent.clientY), this.tableScope.mouseDraggingOnFrame(t);
+      (e = this.startMouseEvent) != null && e.originalEvent && (t.draggingX = this.mouseEvent.clientX - this.startMouseEvent.originalEvent.clientX, t.draggingY = this.mouseEvent.clientY - this.startMouseEvent.originalEvent.clientY), this.tableScope.mouseDraggingOnFrame(t, this.startMouseEvent);
     }
   }
   mouseDraggingEndOnFrame() {
@@ -890,7 +897,7 @@ class _e {
     }
   }
 }
-class je {
+class qe {
   constructor(e) {
     this.tableScope = e;
   }
@@ -996,8 +1003,86 @@ class je {
   repaint() {
     this.tableScope.repaint();
   }
+  /**
+   * Repaints the table scope with hard repaint.
+   * Repaints the UI by resetting the size of the wrapper div,
+   * adjusting the containers and rows, and performing additional adjustments
+   * after scrolling.
+   *
+   * @return {void}
+   */
+  repaintHard() {
+    this.tableScope.repaintHard();
+  }
+  /**
+   * Clears the current selection of the table.
+   * The table will be rendered automatically.
+   *
+   * @returns {void}
+   */
+  clearSelection() {
+    this.tableScope.clearSelection(!0);
+  }
+  /**
+   * Sets the selection model for the table scope.
+   *
+   * @param {SelectionModel} sm - The selection model to be set.
+   * @param {boolean} [repaint=true] - Indicates whether the table should be repainted after setting the selection model. Default value is true.
+   *
+   * @return {void}
+   */
+  setSelectionModel(e, t = !0) {
+    this.tableScope.setSelectionModel(e, t);
+  }
+  /**
+   * Triggers the action with the given action ID.
+   * This function can be invoked programmatically.
+   *
+   * @param {ActionId} actionId - The ID of the action to trigger.
+   * @return {void}
+   */
+  triggerAction(e) {
+    this.tableScope.onActionTriggered(e);
+  }
+  /**
+   * Retrieves the mapping of shortcuts to corresponding action in the current table scope.
+   *
+   * @return {ShortcutActionIdMapping} The mapping of shortcuts to corresponding action.
+   */
+  getShortcutActionMapping() {
+    return this.tableScope.shortcutService.getShortcutActionMapping();
+  }
+  /**
+   * Copies the selected data from the table to the clipboard.
+   *
+   * @return {Promise<string>} - A promise that resolves with the copied data as a string.
+   */
+  copyToClipboard() {
+    return this.tableScope.copyService.copyToClipboard(
+      this.tableScope.tableModel,
+      this.tableScope.selectionModel(),
+      this.tableScope.focusModel()
+    );
+  }
+  /**
+   * Retrieves the current scope of the table.
+   *
+   * @returns {TableScope} The current scope of the table.
+   */
+  getTableScope() {
+    return this.tableScope;
+  }
+  /**
+   * Retrieves the selection model of the table.
+   *
+   * @return {SelectionModelIf | undefined} The selection model of the table,
+   * or undefined if no selection model is available.
+   */
+  getSelectionModel() {
+    return this.tableScope.selectionModel();
+  }
 }
-class le {
+class de {
   constructor(e) {
     this.getStorageKeyFn = e;
   }
@@ -1005,12 +1090,12 @@ class le {
     const t = {};
     if (e instanceof Map) {
       const s = e;
-      for (const i of [...s]) {
+      for (const o of [...s]) {
         const [
-          o,
-          r
-        ] = i;
-        t[o] = r;
+          i,
+          l
+        ] = o;
+        t[i] = l;
       }
     }
     return t;
@@ -1018,14 +1103,14 @@ class le {
   checkAndPersistItem(e, t) {
     const s = this.getStorageKeyFn;
     if (s) {
-      const i = s();
-      if (i) {
-        const o = i + e;
+      const o = s();
+      if (o) {
+        const i = o + e;
         if ((t + "").includes("Map")) {
-          const r = this.autoConvertMapToObject(t);
-          this.persistItem(o, r);
+          const l = this.autoConvertMapToObject(t);
+          this.persistItem(i, l);
         } else
-          this.persistItem(o, t);
+          this.persistItem(i, t);
       }
     }
   }
@@ -1072,7 +1157,7 @@ class le {
   //   }
   // }
 }
-class Xe extends le {
+class Je extends de {
   constructor(e) {
     super(e), this.SCROLL_STATE = "scrollState", this.scrollOffset = [0, 0], this.load();
   }
@@ -1088,20 +1173,20 @@ class Xe extends le {
       const t = e();
       if (t) {
         const s = t + this.SCROLL_STATE;
-        let i = this.loadFromLocalStorage(s);
-        this.scrollOffset = i || [0, 0];
+        let o = this.loadFromLocalStorage(s);
+        this.scrollOffset = o || [0, 0];
       }
     }
   }
 }
-class Ke {
-  constructor(e = "collapsed", t = [], s = !1, i = !1) {
-    this.mode = e, this.rowIds = t, this.allCollapsed = s, this.allExpanded = i;
+class Qe {
+  constructor(e = "collapsed", t = [], s = !1, o = !1) {
+    this.mode = e, this.rowIds = t, this.allCollapsed = s, this.allExpanded = o;
   }
 }
-class ze extends le {
+class Ze extends de {
   constructor(e) {
-    super(e), this.COLLAPSED_EXPANDED_STATE = "collapsedExpandedState", this.collapsedExpandedState = new Ke(), this.load();
+    super(e), this.COLLAPSED_EXPANDED_STATE = "collapsedExpandedState", this.collapsedExpandedState = new Qe(), this.load();
   }
   collapsedExpandedStateGet() {
     return this.collapsedExpandedState;
@@ -1124,8 +1209,8 @@ class ze extends le {
     if (e) {
       const t = e();
       if (t) {
-        const s = t + this.COLLAPSED_EXPANDED_STATE, i = this.loadFromLocalStorage(s);
-        i && (this.collapsedExpandedState = i);
+        const s = t + this.COLLAPSED_EXPANDED_STATE, o = this.loadFromLocalStorage(s);
+        o && (this.collapsedExpandedState = o);
       }
     }
   }
@@ -1133,7 +1218,7 @@ class ze extends le {
     this.checkAndPersistItem(this.COLLAPSED_EXPANDED_STATE, this.collapsedExpandedState);
   }
 }
-class Ye extends le {
+class et extends de {
   constructor(e) {
     super(e), this.SORTING_STATE = "sortingState", this.sortItems = [], this.load();
   }
@@ -1148,68 +1233,69 @@ class Ye extends le {
     if (e) {
       const t = e();
       if (t) {
-        const s = t + this.SORTING_STATE;
-        let i = this.loadFromLocalStorage(s);
-        this.sortItems = i || [];
+        const s = t + this.SORTING_STATE, o = this.loadFromLocalStorage(s);
+        this.sortItems = o || [];
       }
     }
   }
 }
 class O {
-  constructor(e = 0, t = 0, s = 0, i = 0, o) {
-    this.left = e, this.width = t, this.height = s, this.top = i, this.index = o;
+  constructor(e = 0, t = 0, s = 0, o = 0, i) {
+    this.left = e, this.width = t, this.height = s, this.top = o, this.index = i;
   }
 }
-class Ue {
-  constructor(e, t, s, i) {
-    this.hostElement = e, this.tableModel = t, this.dom = s, this.tableOptions = i, this.scrollTop = 0, this.areaBodyWestGeo = new O(), this.areaBodyCenterGeo = new O(), this.areaBodyEastGeo = new O();
-    const o = this.hostElement;
-    o.innerText = "", this.dom.setAttribute(o, "tabindex", "0"), this.dom.setStyle(
-      this.dom.addClass("ge-table", o),
+class tt {
+  constructor(e, t, s, o) {
+    this.hostElement = e, this.tableModel = t, this.dom = s, this.tableOptions = o, this.scrollTop = 0, this.areaBodyWestGeo = new O(), this.areaBodyCenterGeo = new O(), this.areaBodyEastGeo = new O();
+    const i = this.hostElement;
+    i.innerText = "", this.dom.setAttribute(i, "tabindex", "0"), this.dom.setStyle(
+      this.dom.addClass("ge-table", i),
       "position",
       "relative"
     ), this.hoverRow = s.applyStylePosistionAbsolute(
-      s.createDivWithClass("ge-table-hover-row", o)
+      s.createDivWithClass("ge-table-hover-row", i)
     ), this.hoverColumn = s.applyStylePosistionAbsolute(
-      s.createDivWithClass("ge-table-hover-column", o)
+      s.createDivWithClass("ge-table-hover-column", i)
+    ), this.draggingColumn = s.applyStylePosistionAbsolute(
+      s.createDivWithClass("ge-table-dragging-column", i)
     ), this.areaHeaderWest = s.appendRelativeChildDiv(
       s.applyStylePosistionAbsolute(
-        s.createAreaDivWithClass("ge-table-header ge-table-header-west", o, "header", "west")
+        s.createAreaDivWithClass("ge-table-header ge-table-header-west", i, "header", "west")
       )
     ), this.areaHeaderCenter = s.appendRelativeChildDiv(
       s.applyStylePosistionAbsolute(
-        s.createAreaDivWithClass("ge-table-header ge-table-header-center", o, "header", "center")
+        s.createAreaDivWithClass("ge-table-header ge-table-header-center", i, "header", "center")
       )
     ), this.areaHeaderEast = s.appendRelativeChildDiv(
       s.applyStylePosistionAbsolute(
-        s.createAreaDivWithClass("ge-table-header ge-table-header-east", o, "body", "east")
+        s.createAreaDivWithClass("ge-table-header ge-table-header-east", i, "body", "east")
       )
     ), this.areaBodyWest = s.appendRelativeChildDiv(
       s.applyStylePosistionAbsolute(
-        s.createAreaDivWithClass("ge-table-body ge-table-body-west", o, "body", "west")
+        s.createAreaDivWithClass("ge-table-body ge-table-body-west", i, "body", "west")
       )
     ), this.areaBodyEast = s.appendRelativeChildDiv(
       s.applyStylePosistionAbsolute(
-        s.createAreaDivWithClass("ge-table-body ge-table-body-east", o, "body", "east")
+        s.createAreaDivWithClass("ge-table-body ge-table-body-east", i, "body", "east")
       )
     ), this.areaFooterWest = s.appendRelativeChildDiv(
       s.applyStylePosistionAbsolute(
-        s.createAreaDivWithClass("ge-table-footer ge-table-footer-west", o, "footer", "west")
+        s.createAreaDivWithClass("ge-table-footer ge-table-footer-west", i, "footer", "west")
       )
     ), this.areaFooterCenter = s.appendRelativeChildDiv(
       s.applyStylePosistionAbsolute(
-        s.createAreaDivWithClass("ge-table-footer ge-table-footer-center", o, "footer", "center")
+        s.createAreaDivWithClass("ge-table-footer ge-table-footer-center", i, "footer", "center")
       )
     ), this.areaFooterEast = s.appendRelativeChildDiv(
       s.applyStylePosistionAbsolute(
-        s.createAreaDivWithClass("ge-table-footer ge-table-footer-east", o, "footer", "east")
+        s.createAreaDivWithClass("ge-table-footer ge-table-footer-east", i, "footer", "east")
       )
     ), this.scrollViewport = s.applyStyleOverflowAuto(
       this.tableOptions.overflowX ?? "auto",
       this.tableOptions.overflowY ?? "auto",
       s.applyStyleNoPadding(
         s.applyStylePosistionAbsolute(
-          s.createAreaDivWithClass("ge-table-scroll-viewport", o, "body", "center")
+          s.createAreaDivWithClass("ge-table-scroll-viewport", i, "body", "center")
         )
       )
     ), this.contentWrapperDiv = s.applyStyleNoPadding(
@@ -1223,15 +1309,20 @@ class Ue {
     ), this.areaBodyCenter = s.appendRelativeChildDiv(
       s.createDivWithClass("ge-table-body-center", this.contentDiv)
     ), this.borderHeaderBottom = s.applyStylePosistionAbsolute(
-      s.createDivWithClass("ge-table-header-border", o)
+      s.createDivWithClass("ge-table-header-border", i)
     ), this.borderFixedWest = s.applyStylePosistionAbsolute(
-      s.createDivWithClass("ge-table-west-fixed-column-border", o)
+      s.createDivWithClass("ge-table-west-fixed-column-border", i)
     ), this.borderFixedEast = s.applyStylePosistionAbsolute(
-      s.createDivWithClass("ge-table-east-fixed-column-border", o)
+      s.createDivWithClass("ge-table-east-fixed-column-border", i)
     ), this.borderFooterTop = s.applyStylePosistionAbsolute(
-      s.createDivWithClass("ge-table-footer-border", o)
+      s.createDivWithClass("ge-table-footer-border", i)
     );
   }
+  /**
+   * Adjusts the containers and rows of the table based on the current state.
+   *
+   * @return {void}
+   */
   adjustContainersAndRows() {
     const e = this.tableModel.getPadding(), t = this.hostElement.clientWidth, s = this.hostElement.clientHeight;
     this.dom.applyStyle(this.scrollViewport, {
@@ -1304,14 +1395,27 @@ class Ue {
       })
     ) : this.dom.applyDisplayNoneStyle(this.borderFooterTop), this.adjustAfterScrolling();
   }
+  /**
+   * Adjusts the position or appearance of elements after scrolling.
+   * This method must be overwritten in child classes.
+   *
+   * @return {void}
+   */
   adjustAfterScrolling() {
   }
+  /**
+   * Resets the size of the wrapper div based on the content dimensions.
+   *
+   * @protected
+   *
+   * @returns {void} Returns nothing.
+   */
   resetSizeOfWrapperDiv() {
     const e = `${this.tableModel.getContentWidthInPixel()}px`, t = `${this.tableModel.getContentHeightInPixel() + 1}px`;
     this.dom.setStyle(this.contentWrapperDiv, "width", e), this.dom.setStyle(this.contentWrapperDiv, "height", t);
   }
 }
-class D {
+class A {
   /**
    * Represents a constructor for a class.
    * @constructor
@@ -1321,11 +1425,11 @@ class D {
    * @param {number} c2 - The value for c2.
    * @param {boolean} [gammaRange=false] - The value for gammaRange. Defaults to false. gammaRange will be used for AreaModelCellGroups, but it's not implemented yet!
    */
-  constructor(e, t, s, i, o = !1) {
-    this.r1 = e, this.c1 = t, this.r2 = s, this.c2 = i, this.gammaRange = o;
+  constructor(e, t, s, o, i = !1) {
+    this.r1 = e, this.c1 = t, this.r2 = s, this.c2 = o, this.gammaRange = i;
   }
   static create(e) {
-    return e.gammaRange === void 0 && (e.gammaRange = !1), new D(
+    return e.gammaRange === void 0 && (e.gammaRange = !1), new A(
       e.rowIndex1,
       e.columnIndex1,
       e.rowIndex2,
@@ -1334,19 +1438,19 @@ class D {
     );
   }
   static singleCell(e, t) {
-    return new D(e, t, e, t);
+    return new A(e, t, e, t);
   }
   static singleRow(e) {
-    return new D(e, 0, e, Number.MAX_SAFE_INTEGER);
+    return new A(e, 0, e, Number.MAX_SAFE_INTEGER);
   }
   static singleColumn(e) {
-    return new D(0, e, Number.MAX_SAFE_INTEGER, e);
+    return new A(0, e, Number.MAX_SAFE_INTEGER, e);
   }
   isInRange(e, t) {
     return e >= this.r1 && e <= this.r2 && t >= this.c1 && t <= this.c2;
   }
 }
-class qe {
+class st {
   constructor(e, t) {
     this.tableModel = e, this.areaModel = t, this.colAndRowspanRanges = void 0;
   }
@@ -1356,13 +1460,13 @@ class qe {
     this.colAndRowspanRanges = [];
     const e = this.areaModel.getRowCount(), t = this.tableModel.getColumnCount();
     for (let s = 0; s < e; s++)
-      for (let i = 0; i < t; i++) {
-        let o = this.areaModel.getColspanAt(s, i), r = this.areaModel.getRowspanAt(s, i);
-        if (o > 1 || r > 1) {
-          o === 0 && (o = 1), r === 0 && (r = 1);
-          const n = this.areaModel.hasOwnProperty("gammaCells");
+      for (let o = 0; o < t; o++) {
+        let i = this.areaModel.getColspanAt(s, o), l = this.areaModel.getRowspanAt(s, o);
+        if (i > 1 || l > 1) {
+          i === 0 && (i = 1), l === 0 && (l = 1);
+          const n = "gammaCells" in this.areaModel;
           this.colAndRowspanRanges.push(
-            new D(s, i, s + r - 1, i + o - 1, n)
+            new A(s, o, s + l - 1, o + i - 1, n)
           );
         }
       }
@@ -1379,51 +1483,91 @@ class qe {
     return !1;
   }
 }
-class Je {
+class ot {
   constructor(e, t, s) {
     this.header = e, this.body = t, this.footer = s;
   }
 }
-class Qe extends Ue {
-  constructor(e, t, s, i) {
-    var r, n;
-    super(e, t, s, i), this.scrollLeft = 0, this.scrollViewportLeft = 0, this.scrollFactorY = 0, this.scrollFactorX = 0, this.cleanupFunctions = {
+class it extends tt {
+  constructor(e, t, s, o) {
+    var l, n;
+    super(e, t, s, o), this.dragging = !1, this.editing = !1, this.storedColumnWidths = [], this.scrollLeft = 0, this.scrollViewportLeft = 0, this.scrollFactorY = 0, this.scrollFactorX = 0, this.cleanupFunctions = {
       header: [],
       body: [],
       footer: []
-    }, this.tree = !1, this.colAndRowspanModels = new Je(), this.firstVisibleRowIndex = -1, this.draggingTargetColumnIndex = -1, this.removables = [], this.editing = !1, this.tableModel.getSelectionModel ? this.getSelectionModel = this.tableModel.getSelectionModel : (r = this.tableOptions) != null && r.getSelectionModel && (this.getSelectionModel = this.tableOptions.getSelectionModel), (n = this.tableOptions) != null && n.getFocusModel && (this.getFocusModel = this.tableOptions.getFocusModel), te(t.getAreaModel("body")) && (this.tree = !0), ["header", "body", "footer"].forEach(
+    }, this.tree = !1, this.colAndRowspanModels = new ot(), this.firstVisibleRowIndex = -1, this.draggingTargetColumnIndex = -1, this.removables = [], this.tableModel.getSelectionModel ? this.getSelectionModel = this.tableModel.getSelectionModel : (l = this.tableOptions) != null && l.getSelectionModel && (this.getSelectionModel = this.tableOptions.getSelectionModel), (n = this.tableOptions) != null && n.getFocusModel && (this.getFocusModel = this.tableOptions.getFocusModel), le(t.getAreaModel("body")) && (this.tree = !0), ["header", "body", "footer"].forEach(
       (a) => {
-        var h;
-        this.colAndRowspanModels[a] = new qe(t, t.getAreaModel(a)), (h = this.colAndRowspanModels[a]) == null || h.init();
+        var c;
+        this.colAndRowspanModels[a] = new st(t, t.getAreaModel(a)), (c = this.colAndRowspanModels[a]) == null || c.init();
       }
     );
   }
   isEditing() {
     return this.editing;
   }
+  /**
+   * Resets the editor renderer by clearing its values and state.
+   *
+   * @function resetEditorRenderer
+   * @memberof ClassName
+   *
+   * @returns {void}
+   */
   resetEditorRenderer() {
     this.editorRenderer = void 0, this.editorRendererRow = -1, this.editorRendererColumn = -1, this.editing = !1;
   }
-  clearSelection() {
+  /**
+   * Clears the selection in the component.
+   *
+   * @param {boolean} rerender - Indicates whether to rerender the component after clearing the selection. Default value is false.
+   *
+   * @return {void}
+   */
+  clearSelection(e = !1) {
     if (this.getSelectionModel) {
-      const e = this.getSelectionModel();
-      e == null || e.clear();
+      const t = this.getSelectionModel();
+      t == null || t.clear(), e && this.repaint();
     }
   }
+  /**
+   * Initializes and renders the editor for a specified row and column index.
+   *
+   * @param {number} rowIdx - The index of the row.
+   * @param {number} colIdx - The index of the column.
+   */
   initRenderEditor(e, t) {
-    var i;
-    let s = (i = this.tableModel.getColumnDef(t)) == null ? void 0 : i.getEditRenderer;
+    var o;
+    let s = (o = this.tableModel.getColumnDef(t)) == null ? void 0 : o.getEditRenderer;
     if (s || (s = this.tableOptions.getEditRenderer), s)
       if (this.editorRenderer = s(e, t), this.editorRenderer) {
         this.editorRendererRow = e, this.editorRendererColumn = t, this.editing = !0, this.repaint();
-        const o = document.querySelector("input.ge-table-cell-editor-input");
-        o && o.focus();
+        const i = document.querySelector("input.ge-table-cell-editor-input");
+        i && i.focus();
       } else
         this.resetEditorRenderer();
   }
+  /**
+   * Adjusts the content after scrolling and initiates a repaint of the component.
+   *
+   * @return {void}
+   */
   repaint() {
     this.adjustAfterScrolling();
   }
+  /**
+   * Repaints the UI by resetting the size of the wrapper div,
+   * adjusting the containers and rows, and performing additional adjustments
+   * after scrolling.
+   *
+   * @return {void} This method does not return any value.
+   */
+  repaintHard() {
+    this.resetSizeOfWrapperDiv(), this.adjustContainersAndRows(), this.adjustAfterScrolling();
+  }
+  /**
+   * Adjusts the table after scrolling. This method performs various adjustments
+   * to the table's appearance and behavior after a scroll event occurs.
+   */
   adjustAfterScrolling() {
     var e;
     for (const t of this.removables)
@@ -1446,10 +1590,23 @@ class Qe extends Ue {
       "ge-table-body-west-vertical-border"
     ));
   }
+  /**
+   * Checks if the scroll position should be saved and saves it.
+   *
+   * @return {void}
+   */
   checkForScrollPosSaving() {
     var e, t;
     this.storeScrollPosStateService && ((t = (e = this.tableOptions) == null ? void 0 : e.autoRestoreOptions) != null && t.autoRestoreScrollPosition) && this.storeScrollPosStateService.updateScrollOffset([this.scrollLeft, this.scrollTop]);
   }
+  /**
+   * Updates the cells in the table with the provided values and optionally repaints all cells.
+   *
+   * @param {TableCellUpdateEventIf[]} events - The array of events containing information about the cells to update.
+   * @param {boolean} repaintAll - Optional. If true, repaints all cells after updating. Defaults to false.
+   *
+   * @returns {void}
+   */
   updateCells(e, t = !1) {
     e.forEach(
       (s) => {
@@ -1457,6 +1614,45 @@ class Qe extends Ue {
       }
     ), t && this.repaint();
   }
+  /**
+   * Rerenders the content of a table cell based on the given parameters.
+   *
+   * @param {TableCellUpdateEventIf} area - The area of the table.
+   * @param {number} rowIndex - The index of the row.
+   * @param {number} columnIndex - The index of the column.
+   * @param {any} value - The new value to be displayed in the cell.
+   * @param {string[]} cssClasses - An array of CSS classes to be applied to the cell.
+   */
+  rerenderCellContent({ area: e, rowIndex: t, columnIndex: s, value: o, cssClasses: i }) {
+    const l = this.tableModel.getAreaModel(e), n = 'div[data-col-index="' + s + '"][data-row-index="' + t + '"][data-area="' + e + '"]', a = document.querySelector(n);
+    if (a) {
+      let c;
+      const h = this.editorRenderer && this.editorRendererRow === t && this.editorRendererColumn === s ? this.editorRenderer : l.getCellRenderer(t, s);
+      if (a.innerText = "", this.applyCssClasses(a, i), h)
+        c = h.render(a, t, s, e, l, o, this.dom.domService), c && this.cleanupFunctions[e].push(c);
+      else {
+        const b = `${o}`;
+        this.dom.addLabelDiv(a, b, !1, t, s, e);
+      }
+      const g = l.getCustomClassesAt(t, s);
+      g.length && this.dom.addClasses(g, a);
+      const f = l.getCustomStyleAt(t, s);
+      if (f)
+        for (const b in f)
+          this.dom.setStyle(a, b, f[b]);
+    }
+  }
+  /**
+   * Stores the widths of all columns in the table.
+   *
+   * @protected
+   * @function storeColumnWidths
+   * @returns {void}
+   */
+  storeColumnWidths() {
+    const e = this.tableModel.getColumnDefs();
+    e != null && e.length && (this.storedColumnWidths = e.map((t, s) => this.tableModel.getColumnWidth(s)));
+  }
   getAreaAndSideIdentByAttr(e) {
     if (e) {
       const t = this.getStringByAttr(e, "data-area"), s = this.getStringByAttr(e, "data-side");
@@ -1465,6 +1661,15 @@ class Qe extends Ue {
     }
     return [void 0, void 0];
   }
+  /**
+   * Retrieves the specified area from the grid layout.
+   *
+   * @param {string} areaIdent - The identifier for the area ('header', 'body', or 'footer').
+   * @param {string} sideIdent - The identifier for the side of the area ('west', 'center', or 'east').
+   * @protected
+   * @returns {HTMLElement} - The requested area element.
+   * @throws {Error} - If the area identifier or side identifier is incorrect.
+   */
   getArea(e, t) {
     if (e === "header") {
       if (t === "west")
@@ -1490,110 +1695,140 @@ class Qe extends Ue {
     }
     throw Error(`Wrong area identifier: row:${e}, col:${t}`);
   }
+  /**
+   * Adjusts the body of the table.
+   *
+   * @protected
+   * @return {void}
+   */
   adjustBody() {
     const e = this.areaBodyCenterGeo.height - this.tableModel.getContentHeightInPixel(), t = this.scrollFactorY * e;
     this.dom.setStyle(this.contentDiv, "top", `${this.scrollTop}px`), this.dom.setStyle(this.contentDiv, "left", `${this.scrollViewport.scrollLeft}px`), this.adjustArea("body", t);
   }
+  /**
+   * Returns a number value extracted from the specified attribute of the source element.
+   *
+   * @param {HTMLElement} srcElement - The source element from which to extract the attribute value.
+   * @param {string} key - The attribute key to extract the value from.
+   * @returns {number} - The extracted number value, or -1 if the attribute was not found or not a valid number.
+   * @protected
+   */
   getNumberByAttr(e, t) {
     var s;
     if (e) {
-      const i = (s = e.closest("[" + t + "]")) == null ? void 0 : s.getAttribute(t);
-      if (i)
-        return Number(i);
+      const o = (s = e.closest("[" + t + "]")) == null ? void 0 : s.getAttribute(t);
+      if (o)
+        return Number(o);
     }
     return -1;
   }
+  /**
+   * Retrieves the value of the specified attribute from the nearest ancestor element that has the attribute.
+   *
+   * @param {HTMLElement} srcElement - The source element from which to start searching for the nearest ancestor element.
+   * @param {string} key - The name of the attribute to retrieve.
+   * @returns {string} The value of the specified attribute, or an empty string if the attribute is not found.
+   * @protected
+   */
   getStringByAttr(e, t) {
     var s;
     if (e) {
-      const i = (s = e.closest("[" + t + "]")) == null ? void 0 : s.getAttribute(t);
-      if (i)
-        return i;
+      const o = (s = e.closest("[" + t + "]")) == null ? void 0 : s.getAttribute(t);
+      if (o)
+        return o;
     }
     return "";
   }
+  /**
+   * Adjusts the layout and positioning of the specified area in the table.
+   * This method is used internally and should not be called directly.
+   *
+   * @param {AreaIdent} areaIdent - The identifier of the area to adjust (e.g. header, body, footer).
+   * @param {number} [yStart=0] - The starting y-position for the layout adjustments.
+   * @protected
+   */
   adjustArea(e, t = 0) {
-    var S;
-    const s = this.getArea(e, "west"), i = this.getArea(e, "center"), o = this.getArea(e, "east"), r = i.child.clientHeight;
-    s.child.innerText = "", i.child.innerText = "", o.child.innerText = "";
-    const n = 0, a = this.areaBodyCenterGeo.width, h = this.tableModel.getPadding(), d = this.tableModel.getAreaModel(e), c = d.getRowCount();
+    var p;
+    const s = this.getArea(e, "west"), o = this.getArea(e, "center"), i = this.getArea(e, "east"), l = o.child.clientHeight;
+    s.child.innerText = "", o.child.innerText = "", i.child.innerText = "";
+    const n = 0, a = this.areaBodyCenterGeo.width, c = this.tableModel.getPadding(), d = this.tableModel.getAreaModel(e), h = d.getRowCount();
     for (; this.cleanupFunctions[e].length; ) {
-      const f = this.cleanupFunctions[e].shift();
-      f && f();
-    }
-    let p = t;
-    const g = this.tableModel.getColumnCount(), u = this.tableModel.getFixedRightColumnCount(), m = this.tableModel.getFixedLeftColumnCount();
-    for (let f = 0; f < c; f++) {
-      const M = p, C = f === c - 1, E = this.tableModel.getRowHeight(e, f);
-      if (M + E > 0) {
-        this.firstVisibleRowIndex = f;
-        let v = { left: n, width: a, height: E, top: M, index: f }, w = this.dom.addRowDiv(i, v, f, e, "center");
-        const R = m;
+      const u = this.cleanupFunctions[e].shift();
+      u && u();
+    }
+    let g = t;
+    const f = this.tableModel.getColumnCount(), b = this.tableModel.getFixedRightColumnCount(), S = this.tableModel.getFixedLeftColumnCount();
+    for (let u = 0; u < h; u++) {
+      const v = g, C = u === h - 1, E = this.tableModel.getRowHeight(e, u);
+      if (v + E > 0) {
+        this.firstVisibleRowIndex = u;
+        let y = { left: n, width: a, height: E, top: v, index: u }, m = this.dom.addRowDiv(o, y, u, e, "center");
+        const k = S;
         if (this.adjustColumnsToRowParent({
           areaIdent: e,
           sideIdent: "center",
           areaModel: d,
-          geo: v,
-          parent: w,
-          rowIndex: f,
-          columnIndexStart: R,
-          columnIndexEnd: g - u - 1,
+          geo: y,
+          parent: m,
+          rowIndex: u,
+          columnIndexStart: k,
+          columnIndexEnd: f - b - 1,
           verticalFixed: !1,
           lastRowOfModel: C
-        }), h.left > 0 && (v = { left: n, width: this.areaBodyWestGeo.width, height: E, top: M, index: f }, w = this.dom.addRowDiv(s, v, f, e, "west"), this.adjustColumnsToRowParent({
+        }), c.left > 0 && (y = { left: n, width: this.areaBodyWestGeo.width, height: E, top: v, index: u }, m = this.dom.addRowDiv(s, y, u, e, "west"), this.adjustColumnsToRowParent({
           areaIdent: e,
           sideIdent: "west",
           areaModel: d,
-          geo: v,
-          parent: w,
-          rowIndex: f,
+          geo: y,
+          parent: m,
+          rowIndex: u,
           columnIndexStart: 0,
-          columnIndexEnd: R - 1,
+          columnIndexEnd: k - 1,
           verticalFixed: !0,
           lastRowOfModel: C
-        })), h.right > 0 && (v = { left: n, width: this.areaBodyEastGeo.width, height: E, top: M, index: f }, w = this.dom.addRowDiv(o, v, f, e, "east"), this.adjustColumnsToRowParent({
+        })), c.right > 0 && (y = { left: n, width: this.areaBodyEastGeo.width, height: E, top: v, index: u }, m = this.dom.addRowDiv(i, y, u, e, "east"), this.adjustColumnsToRowParent({
           areaIdent: e,
           sideIdent: "east",
           areaModel: d,
-          geo: v,
-          parent: w,
-          rowIndex: f,
-          columnIndexStart: g - u,
-          columnIndexEnd: g - 1,
+          geo: y,
+          parent: m,
+          rowIndex: u,
+          columnIndexStart: f - b,
+          columnIndexEnd: f - 1,
           verticalFixed: !0,
           lastRowOfModel: C
-        })), e === "header" && this.tree && f === c - 1) {
+        })), e === "header" && this.tree && u === h - 1) {
           const T = this.dom.applyStyle(
             this.dom.setAttribute(
-              this.dom.addDiv(w, new O(16, 20, 20, 8)),
+              this.dom.addDiv(m, new O(16, 20, 20, 8)),
               "data-ge-action",
               "toggleExpandCollapseAll"
             ),
             { cursor: "pointer" }
-          ), I = this.tableOptions.treeOptions.arrowExpandCollapseAll;
-          if (I) {
-            const G = this.dom.domService.createText(I.content);
-            this.dom.domService.appendChild(T, G), I.style && this.dom.applyStyleString(T, I.style);
+          ), D = this.tableOptions.treeOptions.arrowExpandCollapseAll;
+          if (D) {
+            const _ = this.dom.domService.createText(D.content);
+            this.dom.domService.appendChild(T, _), D.style && this.dom.applyStyleString(T, D.style);
           }
         }
       }
-      if (p = p + E, p > r)
+      if (g = g + E, g > l)
         break;
     }
     if (this.colAndRowspanModels && this.colAndRowspanModels[e]) {
-      const f = ((S = this.colAndRowspanModels[e]) == null ? void 0 : S.getRanges()) ?? [];
-      if (f.length)
-        for (const M of f) {
-          let C = 0, E = i.child, v = "center";
-          if (M.c1 < m)
-            E = s.child, v = "west";
-          else if (u > 0 && M.c1 >= g - u)
-            E = o.child, v = "east";
+      const u = ((p = this.colAndRowspanModels[e]) == null ? void 0 : p.getRanges()) ?? [];
+      if (u.length)
+        for (const v of u) {
+          let C = 0, E = o.child, y = "center";
+          if (v.c1 < S)
+            E = s.child, y = "west";
+          else if (b > 0 && v.c1 >= f - b)
+            E = i.child, y = "east";
           else {
-            const w = this.areaBodyCenterGeo.width - this.tableModel.getContentWidthInPixel();
-            C = this.scrollFactorX * w - this.areaBodyWestGeo.width, v = "center";
+            const m = this.areaBodyCenterGeo.width - this.tableModel.getContentWidthInPixel();
+            C = this.scrollFactorX * m - this.areaBodyWestGeo.width, y = "center";
           }
-          this.drawBigCell(M, C, t, d, E, v);
+          this.drawBigCell(v, C, t, d, E, y);
         }
     }
   }
@@ -1607,128 +1842,153 @@ class Qe extends Ue {
    * @param sideIdent SideIdent (west,center,east)
    * @protected
    */
-  drawBigCell(e, t, s, i, o, r) {
-    const n = s + this.getRowHeights(0, e.r1 - 1, i).reduce((S, f) => S + f, 0), a = this.tableModel.getColumnCount(), h = this.tableModel.getFixedRightColumnCount();
+  drawBigCell(e, t, s, o, i, l) {
+    const n = s + this.getRowHeights(0, e.r1 - 1, o).reduce((p, u) => p + u, 0), a = this.tableModel.getColumnCount(), c = this.tableModel.getFixedRightColumnCount();
     let d = 0;
-    h > 0 && e.c1 >= a - h && (d = a - h);
-    const c = t + this.getColumnWidths(d, e.c1 - 1).reduce((S, f) => S + f, 0), p = this.getRowHeights(e.r1, e.r2, i).reduce((S, f) => S + f, 0), g = this.getColumnWidths(e.c1, e.c2).reduce((S, f) => S + f, 0);
-    let u = !1;
-    const m = this.getSelectionModel ? this.getSelectionModel() : void 0;
-    m && (u = m.getSelectionCount(e.r1, e.c1) > 0), e.gammaRange ? (console.info("TODO here", e), this.renderCell({
-      areaModel: i,
-      areaIdent: i.areaIdent,
-      sideIdent: r,
+    c > 0 && e.c1 >= a - c && (d = a - c);
+    const h = t + this.getColumnWidths(d, e.c1 - 1).reduce((p, u) => p + u, 0), g = this.getRowHeights(e.r1, e.r2, o).reduce((p, u) => p + u, 0), f = this.getColumnWidths(e.c1, e.c2).reduce((p, u) => p + u, 0);
+    let b = !1;
+    const S = this.getSelectionModel ? this.getSelectionModel() : void 0;
+    S && (b = S.getSelectionCount(e.r1, e.c1) > 0), e.gammaRange ? this.renderCell({
+      areaModel: o,
+      areaIdent: o.areaIdent,
+      sideIdent: l,
       rowIndex: e.r1,
       columnIndex: e.c1,
-      left: c,
+      left: h,
       top: n,
-      width: g,
-      height: p,
-      parent: o,
-      cellSelected: u,
+      width: f,
+      height: g,
+      parent: i,
+      cellSelected: b,
       lastRowOfModel: !0,
       gammaRange: e.gammaRange
-    })) : this.renderCell({
-      areaModel: i,
-      areaIdent: i.areaIdent,
-      sideIdent: r,
+    }) : this.renderCell({
+      areaModel: o,
+      areaIdent: o.areaIdent,
+      sideIdent: l,
       rowIndex: e.r1,
       columnIndex: e.c1,
-      left: c,
+      left: h,
       top: n,
-      width: g,
-      height: p,
-      parent: o,
-      cellSelected: u,
+      width: f,
+      height: g,
+      parent: i,
+      cellSelected: b,
       lastRowOfModel: !0,
       gammaRange: e.gammaRange
-    }), i.areaIdent === "header" && this.tableOptions.columnsResizable && this.renderHeaderCellResizeHandle({
+    }), o.areaIdent === "header" && this.tableOptions.columnsResizable && this.renderHeaderCellResizeHandle({
       rowIndex: e.r1,
       columnIndex: e.c1,
-      cellLeft: c,
+      cellLeft: h,
       cellTop: n,
-      cellWidth: g,
-      cellHeight: p,
-      parent: o
+      cellWidth: f,
+      cellHeight: g,
+      parent: i
     });
   }
+  /**
+   * Finds the row index of an important rowspan cell in a given area model.
+   *
+   * @param {AreaModelIf} areaModel - The area model to search in.
+   * @param {number} rowIndex - The current row index.
+   * @param {number} colIndex - The current column index.
+   * @returns {number} - The row index of the important rowspan cell, or -1 if not found.
+   * @protected
+   */
   findRowOfImportantRowspanCell(e, t, s) {
-    const i = e.getMaxRowspan();
-    for (let o = t - 1; o > -1; o--) {
-      const r = e.getRowspanAt(o, s);
-      if (r > 1 && o + r + 1 >= t)
-        return o;
-      if (t - o > i)
+    const o = e.getMaxRowspan();
+    for (let i = t - 1; i > -1; i--) {
+      const l = e.getRowspanAt(i, s);
+      if (l > 1 && i + l + 1 >= t)
+        return i;
+      if (t - i > o)
         return -1;
     }
     return -1;
   }
+  /**
+   * Adjusts the columns to fit the width of the row's parent element.
+   *
+   * @param {ArgsAdjustColumnsToRowParentParams} params - The parameters for adjusting the columns.
+   * @protected
+   * @return {void}
+   */
   adjustColumnsToRowParent({
     areaIdent: e,
     sideIdent: t,
     areaModel: s,
-    geo: i,
-    parent: o,
-    rowIndex: r,
+    geo: o,
+    parent: i,
+    rowIndex: l,
     columnIndexStart: n,
     columnIndexEnd: a,
-    verticalFixed: h = !1,
+    verticalFixed: c = !1,
     lastRowOfModel: d = !1
   }) {
-    var m;
+    var S;
     this.scrollViewportLeft = this.scrollViewport.scrollLeft;
-    let c = 0;
-    if (!h) {
-      const S = this.areaBodyCenterGeo.width - this.tableModel.getContentWidthInPixel();
-      c = this.scrollFactorX * S;
-    }
-    const p = 0, g = !!(e === "body" && t);
-    let u = c;
-    for (let S = n; S <= a; S++) {
-      const f = u, M = this.tableModel.getColumnWidth(S);
-      if (M > 0 && f + M > 0) {
-        let C = i.height;
-        const E = s.getRowspanAt(r, S), v = s.getColspanAt(r, S);
-        E > 1 && (C = this.getRowHeights(r, r + E - 1, s).reduce((T, I) => T + I, 0));
-        let w = M;
-        v > 1 && (w = this.getColumnWidths(S, S + v - 1).reduce((T, I) => T + I, 0));
-        let R = !1;
-        if (this.colAndRowspanModels && this.colAndRowspanModels[e] && (m = this.colAndRowspanModels[e]) != null && m.isInRange(r, S) && (R = !0), this.draggingTargetColumnIndex === S && e !== "header") {
-          this.renderDragTargetDiv(o, f, p, w, C);
-          const T = { left: f, top: p, width: w, height: C };
-          this.dom.addColumnBorderDivs(this.tableOptions, o, T, e, t);
+    let h = 0;
+    if (!c) {
+      const p = this.areaBodyCenterGeo.width - this.tableModel.getContentWidthInPixel();
+      h = this.scrollFactorX * p;
+    }
+    const g = 0, f = !!(e === "body" && t);
+    let b = h;
+    for (let p = n; p <= a; p++) {
+      const u = b, v = this.tableModel.getColumnWidth(p);
+      if (v > 0 && u + v > 0) {
+        let C = o.height;
+        const E = s.getRowspanAt(l, p), y = s.getColspanAt(l, p);
+        E > 1 && (C = this.getRowHeights(l, l + E - 1, s).reduce((T, D) => T + D, 0));
+        let m = v;
+        y > 1 && (m = this.getColumnWidths(p, p + y - 1).reduce((T, D) => T + D, 0));
+        let k = !1;
+        if (this.colAndRowspanModels && this.colAndRowspanModels[e] && (S = this.colAndRowspanModels[e]) != null && S.isInRange(l, p) && (k = !0), this.draggingTargetColumnIndex === p && e !== "header") {
+          this.renderDragTargetDiv(i, u, g, m, C);
+          const T = { left: u, top: g, width: m, height: C };
+          this.dom.addColumnBorderDivs(this.tableOptions, i, T, e, t);
         } else {
-          const T = this.renderSelectedBackgroundDiv(R, g, t, s, r, S, o, f, p, w, C);
-          R || this.renderCell({
+          const T = this.renderSelectedBackgroundDiv(k, f, t, s, l, p, i, u, g, m, C);
+          "gammaCells" in s && s.getValueAt(l, p) && (k = !1), k || this.renderCell({
             areaModel: s,
             areaIdent: e,
             sideIdent: t,
-            rowIndex: r,
-            columnIndex: S,
-            left: f,
-            top: p,
-            width: w,
+            rowIndex: l,
+            columnIndex: p,
+            left: u,
+            top: g,
+            width: m,
             height: C,
-            parent: o,
+            parent: i,
             cellSelected: T,
             lastRowOfModel: d,
             gammaRange: !0
           }), e === "header" && this.tableOptions.columnsResizable && this.renderHeaderCellResizeHandle({
-            rowIndex: r,
-            columnIndex: S,
-            cellLeft: f,
-            cellTop: p,
-            cellWidth: w,
+            rowIndex: l,
+            columnIndex: p,
+            cellLeft: u,
+            cellTop: g,
+            cellWidth: m,
             cellHeight: C,
-            parent: o
+            parent: i
           });
         }
       }
-      if (u = u + M, u > this.areaBodyCenterGeo.width)
+      if (b = b + v, b > this.areaBodyCenterGeo.width)
         break;
     }
-    this.tableOptions.verticalBorderVisible && this.dom.addVerticalBorder(new O(u - 1, 1, i.height, 0), o);
+    this.tableOptions.verticalBorderVisible && this.dom.addVerticalBorder(new O(b - 1, 1, o.height, 0), i);
   }
+  /**
+   * Retrieves the column index of the tree arrow column in the table.
+   *
+   * @protected
+   *
+   * @returns {0 | 1} The column index of the tree arrow column.
+   *                Returns 0 if the checkbox is not visible,
+   *                otherwise returns 1.
+   */
   getTreeArrowColumnIndex() {
     return this.tableOptions.showCheckboxWihoutExtraColumn ? 0 : this.tableModel.isRowCheckboxVisible() ? 1 : 0;
   }
@@ -1736,100 +1996,112 @@ class Qe extends Ue {
     areaModel: e,
     areaIdent: t,
     sideIdent: s,
-    rowIndex: i,
-    index: o,
-    left: r,
+    rowIndex: o,
+    index: i,
+    left: l,
     width: n,
     height: a,
-    top: h,
+    top: c,
     parent: d,
-    lastRowOfModel: c,
-    gammaRange: p
+    lastRowOfModel: h
   }) {
-    var de;
-    const u = this.editorRenderer && this.editorRendererRow === i && this.editorRendererColumn === o ? this.editorRenderer : e.getCellRenderer(i, o), m = { left: r, width: n, height: a, top: h, index: o }, S = e.getRowByIndex(i);
-    let f = "none";
-    if (o === this.getTreeArrowColumnIndex() && ee(S)) {
-      const y = S;
-      (de = y.children) != null && de.length ? y.expanded ? f = "expanded" : f = "collapsed" : f = "hidden";
-    }
-    let C;
+    var ge;
+    const f = this.editorRenderer && this.editorRendererRow === o && this.editorRendererColumn === i ? this.editorRenderer : e.getCellRenderer(o, i), b = { left: l, width: n, height: a, top: c, index: i }, S = e.getRowByIndex(o);
+    let p = "none";
+    if (i === this.getTreeArrowColumnIndex() && ie(S)) {
+      const x = S;
+      (ge = x.children) != null && ge.length ? x.expanded ? p = "expanded" : p = "collapsed" : p = "hidden";
+    }
+    let v;
     if (t === "header") {
-      const y = this.tableModel.getColumnDef(o);
-      (!(y != null && y.sortIconVisible) || y != null && y.sortIconVisible()) && (C = y == null ? void 0 : y.sortState);
+      const x = this.tableModel.getColumnDef(i);
+      (!(x != null && x.sortIconVisible) || x != null && x.sortIconVisible()) && (v = x == null ? void 0 : x.sortState);
     }
-    const E = e.getValueAt(i, o), v = u ? "" : `${E}`, w = e.isRowChecked(i), R = this.dom.addColumnDiv(
-      d,
-      m,
-      i,
-      o,
-      t,
-      s,
-      v,
-      f,
-      this.tableOptions,
-      w,
-      C
-    ), T = e.getTooltipAt(i, o);
-    T && this.dom.setAttribute(R, "title", T);
-    const I = this.tableModel.getColumnDef(o);
-    I && I.classes[t] && this.dom.addClasses(I.classes[t], R);
-    let G;
-    u && (G = u.render(R, i, o, t, e, E, this.dom.domService));
-    const ae = e.getCustomClassesAt(i, o);
-    if (ae.length && this.dom.addClasses(ae, R), this.dom.addColumnBorderDivs(this.tableOptions, d, m, t, s), c && this.dom.addHorizontalBorder({ left: r, width: n, height: a, top: h + a }, d), this.getFocusModel && t === "body") {
-      const y = this.getFocusModel();
-      y != null && y.hasFocus(i, o) && this.dom.addFocusBorderDivs(d, m, {});
-    }
-    t === "header" && this.dom.setAttribute(R, "data-ge-action", "drag-column");
-    const Y = e.getCustomStyleAt(i, o);
-    if (Y)
-      for (const y in Y)
-        this.dom.setStyle(R, y, Y[y]);
-    return [R, G];
+    const C = e.getValueAt(o, i), E = f ? "" : `${C}`, y = e.isRowChecked(o), m = this.dom.addColumnDiv(
+      {
+        parent: d,
+        geo: b,
+        rowIndex: o,
+        columnIndex: i,
+        areaIdent: t,
+        sideIdent: s,
+        text: E,
+        treeArrow: p,
+        tableOptions: this.tableOptions,
+        checkedType: y,
+        sortState: v
+      }
+    ), k = e.getTooltipAt(o, i);
+    k && this.dom.setAttribute(m, "title", k);
+    const T = this.tableModel.getColumnDef(i);
+    T && T.classes[t] && this.dom.addClasses(T.classes[t], m);
+    let D;
+    f && (D = f.render(m, o, i, t, e, C, this.dom.domService));
+    const _ = e.getCustomClassesAt(o, i);
+    if (_.length && this.dom.addClasses(_, m), this.dom.addColumnBorderDivs(this.tableOptions, d, b, t, s), h && this.dom.addHorizontalBorder({ left: l, width: n, height: a, top: c + a }, d), this.getFocusModel && t === "body") {
+      const x = this.getFocusModel();
+      x != null && x.hasFocus(o, i) && this.dom.addFocusBorderDivs(d, b, {});
+    }
+    t === "header" && this.dom.setAttribute(m, "data-ge-action", "drag-column");
+    const Q = e.getCustomStyleAt(o, i);
+    if (Q)
+      for (const x in Q)
+        this.dom.setStyle(m, x, Q[x]);
+    return [m, D];
   }
+  /**
+   * Applies CSS classes to an HTML element.
+   *
+   * @param {HTMLDivElement} ele - The HTML element to which CSS classes will be applied.
+   * @param {Object.<string, boolean>} cssClasses - An object containing CSS class names as keys and boolean values indicating whether to apply or remove the class.
+   * @protected
+   */
   applyCssClasses(e, t = {}) {
-    e && Object.entries(t).forEach(([s, i]) => {
-      i ? this.dom.addClass(s, e) : this.dom.removeClass(s, e);
+    e && Object.entries(t).forEach(([s, o]) => {
+      o ? this.dom.addClass(s, e) : this.dom.removeClass(s, e);
     });
   }
-  rerenderCellContent({ area: e, rowIndex: t, columnIndex: s, value: i, cssClasses: o }) {
-    const r = this.tableModel.getAreaModel(e), n = 'div[data-col-index="' + s + '"][data-row-index="' + t + '"][data-area="' + e + '"]', a = document.querySelector(n);
-    if (a) {
-      let h;
-      const c = this.editorRenderer && this.editorRendererRow === t && this.editorRendererColumn === s ? this.editorRenderer : r.getCellRenderer(t, s);
-      if (a.innerText = "", this.applyCssClasses(a, o), c)
-        h = c.render(a, t, s, e, r, i, this.dom.domService), h && this.cleanupFunctions[e].push(h);
-      else {
-        const u = `${i}`;
-        this.dom.addLabelDiv(a, u, !1, t, s, e);
-      }
-      const p = r.getCustomClassesAt(t, s);
-      p.length && this.dom.addClasses(p, a);
-      const g = r.getCustomStyleAt(t, s);
-      if (g)
-        for (const u in g)
-          this.dom.setStyle(a, u, g[u]);
-    }
-  }
+  /**
+   * Retrieves the column widths of a table within a specified range.
+   *
+   * @param {number} startIndex - The index of the first column to retrieve the width of.
+   * @param {number} endIndex - The index of the last column to retrieve the width of.
+   *
+   * @return {number[]} An array containing the widths of the columns within the specified range.
+   */
   getColumnWidths(e, t) {
     const s = [];
-    for (let i = e; i <= t; i++)
-      s.push(this.tableModel.getColumnWidth(i));
+    for (let o = e; o <= t; o++)
+      s.push(this.tableModel.getColumnWidth(o));
     return s;
   }
+  /**
+   * Retrieves the heights of rows within a specified range.
+   *
+   * @param {number} startIndex - The index of the first row in the range.
+   * @param {number} endIndex - The index of the last row in the range.
+   * @param {AreaModelIf} areaModel - The area model.
+   * @return {number[]} - An array containing the heights of the rows within the specified range.
+   */
   getRowHeights(e, t, s) {
-    const i = [];
-    for (let o = e; o <= t; o++)
-      i.push(s.getRowHeight(o));
-    return i;
+    const o = [];
+    for (let i = e; i <= t; i++)
+      o.push(s.getRowHeight(i));
+    return o;
   }
+  /**
+   * Adjusts the position and size of the hover row based on the mouse move event.
+   *
+   * @param {GeMouseEvent} mouseMoveEvent - The mouse move event.
+   *
+   * @return {void}
+   */
   adjustHoverRows(e) {
     if (this.tableOptions.hoverRowVisible && e.rowIndex > -1) {
-      const t = this.hostElement.clientWidth, s = this.tableModel.getAreaModel("body").getRowHeight(e.rowIndex), i = e.rowTop + this.areaHeaderCenter.parent.clientHeight - this.scrollTop;
+      const t = this.hostElement.clientWidth, s = this.tableModel.getAreaModel("body").getRowHeight(e.rowIndex), o = e.rowTop + this.areaHeaderCenter.parent.clientHeight - this.scrollTop;
       this.dom.applyStyle(this.hoverRow, {
         left: "0",
-        top: i + "px",
+        top: o + "px",
         width: t + "px",
         height: s + "px",
         display: "block"
@@ -1837,16 +2109,31 @@ class Qe extends Ue {
     } else
       this.hideHoverRow();
   }
+  /**
+   * Hides the hover row by applying 'display: none' style to it.
+   *
+   * @protected
+   * @function
+   * @name hideHoverRow
+   * @memberof ClassName
+   *
+   * @returns {void}
+   */
   hideHoverRow() {
     this.dom.applyStyle(this.hoverRow, {
       display: "none"
     });
   }
+  /**
+   * Adjusts the position and size of the hover column based on the mouse move event.
+   *
+   * @param {GeMouseEvent} mouseMoveEvent - The mouse move event object.
+   */
   adjustHoverColumns(e) {
     if (this.tableOptions.hoverColumnVisible && e.rowIndex > -1) {
-      const t = this.hostElement.clientHeight, s = this.tableModel.getColumnWidth(e.columnIndex), i = this.areaBodyWestGeo.width, o = e.columnLeft + this.tableModel.getPadding().left - this.scrollLeft - i;
+      const t = this.hostElement.clientHeight, s = this.tableModel.getColumnWidth(e.columnIndex), o = this.areaBodyWestGeo.width, i = e.columnLeft + this.tableModel.getPadding().left - this.scrollLeft - o;
       this.dom.applyStyle(this.hoverColumn, {
-        left: o + "px",
+        left: i + "px",
         top: "0px",
         width: s + "px",
         height: t + "px",
@@ -1855,80 +2142,236 @@ class Qe extends Ue {
     } else
       this.hideHoverColumn();
   }
+  /**
+   * Hide hover column.
+   *
+   * This method hides the hover column by applying a style of 'display: none'
+   * to the element representing the hover column.
+   *
+   * @protected
+   * @memberof ClassName
+   */
   hideHoverColumn() {
     this.dom.applyStyle(this.hoverColumn, {
       display: "none"
     });
   }
+  /**
+   * Executes a function after a specified delay, ensuring that the function is called only once within that delay period.
+   *
+   * @param {() => void} fn - The function to be executed.
+   * @param {number} [delay=1000] - The delay in milliseconds before executing the function.
+   *
+   * @return {undefined}
+   */
   debounce(e, t = 1e3) {
     this.debounceTimeout && clearTimeout(this.debounceTimeout), this.debounceTimeout = setTimeout(e.bind(this), t);
   }
-  renderDragTargetDiv(e, t, s, i, o) {
-    const r = this.dom.applyStylePosistionAbsolute(
+  /**
+   * Adjusts the dragging column during a mouse move event.
+   *
+   * @param {GeMouseEvent} mouseMoveEvent - The mouse move event.
+   * @param {number} sourceColumnIndex - The index of the source column.
+   * @param {boolean} firstDraggingRendering - Indicates if it's the first rendering of the dragging column.
+   */
+  adjustDraggingColumn(e, t, s) {
+    var o, i;
+    if (this.dragging) {
+      const l = this.hostElement.clientHeight, n = this.storedColumnWidths[t];
+      if ((o = e.originalEvent) != null && o.clientX) {
+        const d = { left: ((i = e.originalEvent) == null ? void 0 : i.clientX) - n / 2, width: n, height: l, top: 0, index: t };
+        this.dom.applyStyle(this.draggingColumn, {
+          background: "rgba(128,128,128,0.2)",
+          display: "block",
+          overfllow: "clip"
+        }), this.dom.applyStyleInPx(this.draggingColumn, d), s && this.renderContentOfDraggingColumn(d);
+      }
+    } else
+      this.hideDraggingColumn();
+  }
+  /**
+   * Renders the content of a dragging column.
+   *
+   * @param {GeoData} columnGeo - The geographic data of the column.
+   *
+   * @returns {number} The y-coordinate of the rendered content.
+   */
+  renderContentOfDraggingColumn(e) {
+    const t = this.renderContentOfDraggingColumnForArea(e, "header", 0);
+    this.renderContentOfDraggingColumnForArea(e, "body", t);
+  }
+  /**
+   * Renders the content of the dragging column for a specific area.
+   *
+   * @param {GeoData} columnGeo - The geometry data of the dragging column.
+   * @param {AreaIdent} areaIdent - The identifier of the area.
+   * @param {number} [y=0] - The starting y-position.
+   * @return {number} The final y-position after rendering all the content.
+   */
+  renderContentOfDraggingColumnForArea(e, t, s = 0) {
+    const o = "center", i = this.tableModel.getAreaModel(t), l = i == null ? void 0 : i.getRowCount();
+    if (l) {
+      const n = e.index ?? 0, a = this.draggingColumn;
+      for (let c = 0; c < l; c++) {
+        const d = s, h = i.getRowHeight(c), g = { left: 0, width: e.width, height: h, top: d, index: c }, f = i.getValueAt(c, n), b = i.getCellRenderer(c, n), S = b ? "" : `${f}`, p = {
+          parent: a,
+          geo: g,
+          rowIndex: c,
+          columnIndex: n,
+          areaIdent: t,
+          sideIdent: o,
+          text: S
+        }, u = this.dom.addColumnDiv(p);
+        let v;
+        b && (v = b.render(u, c, n, t, i, f, this.dom.domService), v && this.cleanupFunctions[t].push(v));
+        const C = i.getCustomClassesAt(c, n);
+        C.length && this.dom.addClasses(C, u);
+        const E = this.tableModel.getColumnDef(n);
+        E && E.classes[t] && this.dom.addClasses(E.classes[t], u), this.dom.addColumnBorderDivs(this.tableOptions, a, g, t, o);
+        const y = i.getCustomStyleAt(c, n);
+        if (y)
+          for (const m in y)
+            this.dom.setStyle(u, m, y[m]);
+        s = s + h;
+      }
+    }
+    return s;
+  }
+  /**
+   * Hides the dragging column by applying a 'display: none' style to it.
+   * This method is protected and can only be accessed within the class.
+   *
+   * @return {void}
+   */
+  hideDraggingColumn() {
+    this.dom.applyStyle(this.draggingColumn, {
+      display: "none"
+    });
+  }
+  /**
+   * Renders a draggable target div element.
+   *
+   * @param {HTMLDivElement} parent - The parent element where the target div will be appended to.
+   * @param {number} left - The left position of the target div in pixels.
+   * @param {number} top - The top position of the target div in pixels.
+   * @param {number} width - The width of the target div in pixels.
+   * @param {number} height - The height of the target div in pixels.
+   * @return {HTMLDivElement} - The rendered draggable target div element.
+   */
+  renderDragTargetDiv(e, t, s, o, i) {
+    const l = this.dom.applyStylePosistionAbsolute(
       this.dom.createDivWithClass("ge-table-drop-zone", e)
     );
-    return this.dom.setStyle(r, "left", `${t}px`), this.dom.setStyle(r, "top", `${s}px`), this.dom.setStyle(r, "width", `${i}px`), this.dom.setStyle(r, "height", `${o}px`), r;
-  }
-  renderSelectedBackgroundDiv(e, t, s, i, o, r, n, a, h, d, c) {
-    let p = !1;
-    if (!e && t && i.isSelectable(o, r) && this.getSelectionModel) {
-      const g = this.getSelectionModel();
-      if (g) {
-        const u = g.getSelectionCount(o, r);
-        p = u > 0;
-        for (let m = 0; m < u; m++) {
-          const S = this.dom.applyStylePosistionAbsolute(
+    return this.dom.setStyle(l, "left", `${t}px`), this.dom.setStyle(l, "top", `${s}px`), this.dom.setStyle(l, "width", `${o}px`), this.dom.setStyle(l, "height", `${i}px`), l;
+  }
+  /**
+   * Render selected background div.
+   *
+   * @private
+   * @param {boolean} skip - Whether to skip rendering.
+   * @param {boolean} renderSelection - Whether to render the selection.
+   * @param {SideIdent} sideIdent - The side identifier.
+   * @param {AreaModelIf} areaModel - The area model.
+   * @param {number} rowIndex - The row index.
+   * @param {number} index - The index.
+   * @param {HTMLDivElement} parent - The parent div element.
+   * @param {number} left - The left position.
+   * @param {number} top - The top position.
+   * @param {number} width - The width of the div.
+   * @param {number} height - The height of the div.
+   * @returns {boolean} - Whether the cell is selected.
+   */
+  renderSelectedBackgroundDiv(e, t, s, o, i, l, n, a, c, d, h) {
+    let g = !1;
+    if (!e && t && o.isSelectable(i, l) && this.getSelectionModel) {
+      const f = this.getSelectionModel();
+      if (f) {
+        const b = f.getSelectionCount(i, l);
+        g = b > 0;
+        for (let S = 0; S < b; S++) {
+          const p = this.dom.applyStylePosistionAbsolute(
             // ge-table-body-west-selected-range
-            this.dom.createDivWithClass(`ge-table-${i.areaIdent}-${s}-selected-range`, n)
+            this.dom.createDivWithClass(`ge-table-${o.areaIdent}-${s}-selected-range`, n)
           );
-          this.dom.setStyle(S, "left", `${a}px`), this.dom.setStyle(S, "top", `${h}px`), this.dom.setStyle(S, "width", `${d}px`), this.dom.setStyle(S, "height", `${c}px`);
+          this.dom.setStyle(p, "left", `${a}px`), this.dom.setStyle(p, "top", `${c}px`), this.dom.setStyle(p, "width", `${d}px`), this.dom.setStyle(p, "height", `${h}px`);
         }
       }
     }
-    return p;
+    return g;
   }
+  /**
+   * Renders a cell in the grid.
+   *
+   * @param {ArgsRenderCell} args - The arguments for rendering the cell.
+   * @param {AreaModel} args.areaModel - The area model of the grid.
+   * @param {string} args.areaIdent - The identifier of the area.
+   * @param {string} args.sideIdent - The identifier of the side.
+   * @param {number} args.rowIndex - The index of the row.
+   * @param {number} args.columnIndex - The index of the column.
+   * @param {number} args.left - The left position of the cell.
+   * @param {number} args.top - The top position of the cell.
+   * @param {number} args.width - The width of the cell.
+   * @param {number} args.height - The height of the cell.
+   * @param {HTMLElement} args.parent - The parent element of the cell.
+   * @param {boolean} args.cellSelected - Indicates if the cell is selected.
+   * @param {boolean} args.lastRowOfModel - Indicates if the cell is in the last row of the model.
+   *
+   * @returns {void}
+   */
   renderCell({
     areaModel: e,
     areaIdent: t,
     sideIdent: s,
-    rowIndex: i,
-    columnIndex: o,
-    left: r,
+    rowIndex: o,
+    columnIndex: i,
+    left: l,
     top: n,
     width: a,
-    height: h,
+    height: c,
     parent: d,
-    cellSelected: c,
-    lastRowOfModel: p,
-    gammaRange: g
+    cellSelected: h,
+    lastRowOfModel: g
   }) {
-    const [u, m] = this.addAndRenderCellDiv({
+    const [f, b] = this.addAndRenderCellDiv({
       areaModel: e,
       areaIdent: t,
       sideIdent: s,
-      rowIndex: i,
-      index: o,
-      left: r,
+      rowIndex: o,
+      index: i,
+      left: l,
       width: a,
-      height: h,
+      height: c,
       top: n,
       parent: d,
-      lastRowOfModel: p,
-      gammaRange: g
+      lastRowOfModel: g
     });
-    c && this.dom.addClass(`ge-table-${t}-${s}-selected-range`, u), m && this.cleanupFunctions[t].push(m);
+    h && this.dom.addClass(`ge-table-${t}-${s}-selected-range`, f), b && this.cleanupFunctions[t].push(b);
   }
-  renderHeaderCellResizeHandle({ rowIndex: e, columnIndex: t, cellLeft: s, cellTop: i, cellWidth: o, cellHeight: r, parent: n }) {
-    const a = this.dom.domService, h = this.tableOptions.columnResizeHandleWidthInPx ?? 2, d = a.createElement("div");
-    a.setAttribute(d, "data-col-index", `${t}`), a.setAttribute(d, "data-row-index", `${e}`), a.setAttribute(d, "data-area", "header"), a.setAttribute(d, "data-ge-action", "resize-column"), a.addClass(d, "ge-table-column-resize-handle"), a.setStyle(d, "display", "clip"), a.setStyle(d, "position", "absolute"), a.setStyle(d, "cursor", "col-resize"), a.setStyle(d, "left", `${s + o - h}px`), a.setStyle(d, "top", `${i}px`), a.setStyle(d, "width", `${h}px`), a.setStyle(d, "height", `${r}px`), a.appendChild(n, d);
+  /**
+   * Render the header cell resize handle.
+   *
+   * @param {ArgsRenderHeaderCellResizeHandle} args - The arguments for rendering the handle.
+   * @param {number} args.rowIndex - The index of the row.
+   * @param {number} args.columnIndex - The index of the column.
+   * @param {number} args.cellLeft - The left position of the cell.
+   * @param {number} args.cellTop - The top position of the cell.
+   * @param {number} args.cellWidth - The width of the cell.
+   * @param {number} args.cellHeight - The height of the cell.
+   * @param {HTMLElement} args.parent - The parent element to append the handle to.
+   *
+   * @return {void}
+   */
+  renderHeaderCellResizeHandle({ rowIndex: e, columnIndex: t, cellLeft: s, cellTop: o, cellWidth: i, cellHeight: l, parent: n }) {
+    const a = this.dom.domService, c = this.tableOptions.columnResizeHandleWidthInPx ?? 2, d = a.createElement("div");
+    a.setAttribute(d, "data-col-index", `${t}`), a.setAttribute(d, "data-row-index", `${e}`), a.setAttribute(d, "data-area", "header"), a.setAttribute(d, "data-ge-action", "resize-column"), a.addClass(d, "ge-table-column-resize-handle"), a.setStyle(d, "display", "clip"), a.setStyle(d, "position", "absolute"), a.setStyle(d, "cursor", "col-resize"), a.setStyle(d, "left", `${s + i - c}px`), a.setStyle(d, "top", `${o}px`), a.setStyle(d, "width", `${c}px`), a.setStyle(d, "height", `${l}px`), a.appendChild(n, d);
   }
 }
-class Ze {
+class lt {
   constructor(e, t) {
     this.columnIndex = e, this.sortState = t;
   }
 }
-class et {
+class rt {
   constructor(e) {
     this.tableScope = e, this.tableScope.hostElement.addEventListener("change", this.onHostElementChanged.bind(this));
   }
@@ -1942,40 +2385,40 @@ class et {
    */
   onHostElementChanged(e) {
     if (e.target instanceof HTMLInputElement || e.target instanceof HTMLSelectElement || e.target instanceof HTMLTextAreaElement) {
-      const t = e.target, s = t.getAttribute("data-area"), i = t.getAttribute("data-row-index"), o = t.getAttribute("data-col-index");
-      if (s && i && o) {
-        const r = oe(s), n = Number(i), a = Number(o);
-        this.tableScope.updateModelValueAfterEdit(r, n, a, t.value);
+      const t = e.target, s = t.getAttribute("data-area"), o = t.getAttribute("data-row-index"), i = t.getAttribute("data-col-index");
+      if (s && o && i) {
+        const l = ae(s), n = Number(o), a = Number(i);
+        this.tableScope.updateModelValueAfterEdit(l, n, a, t.value);
       }
     }
   }
 }
-class tt {
+class nt {
   constructor(e = -1, t = -1) {
     this.rowIndex = e, this.columnIndex = t;
   }
 }
-class re {
+class ce {
   constructor(e) {
     this.cells = e;
   }
   static createSingle(e, t) {
-    return new re([new tt(e, t)]);
+    return new ce([new nt(e, t)]);
   }
 }
-class st {
+class at {
   constructor(e) {
     var t, s;
     this.tableScope = e, (t = this.tableScope.tableOptions) != null && t.getSelectionModel && (this.getSelectionModel = this.tableScope.tableOptions.getSelectionModel), (s = this.tableScope.tableOptions) != null && s.getFocusModel && (this.getFocusModel = this.tableScope.tableOptions.getFocusModel);
   }
   onMouseClicked(e, t) {
-    var o, r, n, a, h, d, c;
-    let s = !1, i = !1;
+    var i, l, n, a, c, d, h;
+    let s = !1, o = !1;
     if (this.getSelectionModel && this.getFocusModel) {
-      const p = this.getSelectionModel(), g = this.getFocusModel();
-      p && g && (g.hasFocus(e.rowIndex, e.columnIndex) || (g.setFocus(e.rowIndex, e.columnIndex), s = !0), (o = e.originalEvent) != null && o.shiftKey || p.hasSelection() && (p.clear(), s = !0), (r = e.originalEvent) != null && r.shiftKey && this.previousEvt ? (p.addSelection(this.createRangeByEvents(e, this.previousEvt)), i = !0, s = !0) : (n = e.originalEvent) != null && n.ctrlKey || (a = e.originalEvent) != null && a.metaKey ? (p.addSelection(D.singleCell(e.rowIndex, e.columnIndex)), i = !0, s = !0) : (h = e.originalEvent) != null && h.altKey && ((d = e.originalEvent) != null && d.ctrlKey || (c = e.originalEvent) != null && c.metaKey) && (p.removeSelection(D.singleCell(e.rowIndex, e.columnIndex)), i = !0, s = !0));
+      const g = this.getSelectionModel(), f = this.getFocusModel();
+      g && f && (f.hasFocus(e.rowIndex, e.columnIndex) || (f.setFocus(e.rowIndex, e.columnIndex), this.tableScope.onFocusChanged(f), s = !0), (i = e.originalEvent) != null && i.shiftKey || g.hasSelection() && (g.clear(), s = !0), (l = e.originalEvent) != null && l.shiftKey && this.previousEvt ? (g.addSelection(this.createRangeByEvents(e, this.previousEvt)), o = !0, s = !0) : (n = e.originalEvent) != null && n.altKey && ((a = e.originalEvent) != null && a.ctrlKey || (c = e.originalEvent) != null && c.metaKey) ? (g.removeSelection(A.singleCell(e.rowIndex, e.columnIndex)), o = !0, s = !0) : (d = e.originalEvent) != null && d.ctrlKey || (h = e.originalEvent) != null && h.metaKey ? (g.addSelection(A.singleCell(e.rowIndex, e.columnIndex)), o = !0, s = !0) : (g.firstClick(e.rowIndex, e.columnIndex), s = !0), this.tableScope.onSelectionChanged(g));
     }
-    return i ? this.previousEvt = void 0 : this.previousEvt = e == null ? void 0 : e.clone(), s;
+    return o ? this.previousEvt = void 0 : this.previousEvt = e == null ? void 0 : e.clone(), s;
   }
   onActionTriggered(e) {
     if (this.getSelectionModel && this.getFocusModel) {
@@ -1986,8 +2429,8 @@ class st {
         if (e === "DESELECT_ALL")
           return t.clear(), this.tableScope.repaint(), !0;
         if (e === "TOGGLE_SELECTION") {
-          const [i, o] = s.getFocus();
-          return t.togglePoint(i, o), this.tableScope.repaint(), !0;
+          const [o, i] = s.getFocus();
+          return t.togglePoint(o, i), this.tableScope.repaint(), !0;
         }
       }
     }
@@ -1995,16 +2438,16 @@ class st {
   }
   createRangeByEvents(e, t) {
     t || (t = e);
-    const s = Math.min(e.rowIndex, t == null ? void 0 : t.rowIndex), i = Math.max(e.rowIndex, t == null ? void 0 : t.rowIndex), o = Math.min(e.columnIndex, t == null ? void 0 : t.columnIndex), r = Math.max(e.columnIndex, t == null ? void 0 : t.columnIndex);
-    return D.create({
+    const s = Math.min(e.rowIndex, t == null ? void 0 : t.rowIndex), o = Math.max(e.rowIndex, t == null ? void 0 : t.rowIndex), i = Math.min(e.columnIndex, t == null ? void 0 : t.columnIndex), l = Math.max(e.columnIndex, t == null ? void 0 : t.columnIndex);
+    return A.create({
       rowIndex1: s,
-      columnIndex1: o,
-      rowIndex2: i,
-      columnIndex2: r
+      columnIndex1: i,
+      rowIndex2: o,
+      columnIndex2: l
     });
   }
 }
-class it {
+class dt {
   get() {
     return {
       f2: "START_EDITING",
@@ -2014,43 +2457,60 @@ class it {
       "ctrl+shift+a": "DESELECT_ALL",
       "ctrl+x": "DESELECT_ALL",
       "ctrl+num_subtract": "DESELECT_ALL",
-      "cmd -": "DESELECT_ALL",
+      "meta -": "DESELECT_ALL",
       arrowup: "NAVIGATE_UP",
       arrowdown: "NAVIGATE_DOWN",
       arrowleft: "NAVIGATE_LEFT",
-      arrowright: "NAVIGATE_RIGHT"
+      arrowright: "NAVIGATE_RIGHT",
+      "meta+c": "COPY_2_CLIPBOARD",
+      "ctrl+c": "COPY_2_CLIPBOARD"
     };
   }
 }
-class ot {
+class ct {
   get() {
     return {
       f2: "START_EDITING",
       space: "TOGGLE_SELECTION",
       "ctrl+num_add": "SELECT_ALL",
-      "cmd+a": "SELECT_ALL",
+      "meta+a": "SELECT_ALL",
       "ctrl+a": "SELECT_ALL",
-      "cmd+x": "DESELECT_ALL",
-      "cmd+shift+a": "DESELECT_ALL",
+      "meta+x": "DESELECT_ALL",
+      "meta+shift+a": "DESELECT_ALL",
       "ctrl+shift+a": "DESELECT_ALL",
       "ctrl+num_subtract": "DESELECT_ALL",
       "ctrl -": "DESELECT_ALL",
       arrowup: "NAVIGATE_UP",
       arrowdown: "NAVIGATE_DOWN",
       arrowleft: "NAVIGATE_LEFT",
-      arrowright: "NAVIGATE_RIGHT"
+      arrowright: "NAVIGATE_RIGHT",
+      "meta+c": "COPY_2_CLIPBOARD",
+      "ctrl+c": "COPY_2_CLIPBOARD"
     };
   }
 }
-class lt {
+class ht {
   constructor(e) {
     this.tableScope = e, this.shortcutActionIdMapping = {}, this.listener = [], this.listener.push(e), this.init();
   }
+  /**
+   * Adds a listener to the list of listeners.
+   *
+   * @param {OnActionTriggeredIf} listener - The listener to be added.
+   * @returns {void}
+   */
   addListener(e) {
     this.listener.includes(e) || this.listener.push(e);
   }
+  /**
+   * Initializes the ShortcutService by assigning shortcut action id mappings based on the current operating system.
+   * Also adds key down event listener to the table host element.
+   */
   init() {
-    this.isMacintosh() ? Object.assign(this.shortcutActionIdMapping, new ot().get()) : Object.assign(this.shortcutActionIdMapping, new it().get()), Object.assign(this.shortcutActionIdMapping, this.tableScope.tableOptions.shortcutActionIdMapping), this.isDebug() && console.debug("ShortcutService", this.shortcutActionIdMapping), this.tableScope.hostElement.addEventListener("keydown", this.onKeyDown.bind(this));
+    this.assignPredefinedSystemShortcutMappings(), Object.assign(this.shortcutActionIdMapping, this.tableScope.tableOptions.shortcutActionIdMapping), this.isDebug() && console.debug("ShortcutService", this.shortcutActionIdMapping), this.tableScope.hostElement.addEventListener("keydown", this.onKeyDown.bind(this));
+  }
+  assignPredefinedSystemShortcutMappings() {
+    this.isMacintosh() ? Object.assign(this.shortcutActionIdMapping, new ct().get()) : Object.assign(this.shortcutActionIdMapping, new dt().get());
   }
   isMacintosh() {
     return navigator.platform.indexOf("Mac") > -1;
@@ -2062,22 +2522,22 @@ class lt {
     return location.hostname === "localhost" || location.hostname === "127.0.0.1";
   }
   onKeyDown(e) {
-    const t = this.findEnty(e);
+    const t = this.findEntity(e);
     t && this.emit(t) && (e.preventDefault(), e.stopPropagation());
   }
   emit(e) {
-    this.isDebug() && console.debug("ShortcutService emit:", e);
+    this.isDebug() && console.debug("ShortcutService emit      :", e);
     let t = !1;
     for (const s of this.listener)
       s.onActionTriggered(e) && (t = !0);
     return t;
   }
-  findEnty(e) {
+  findEntity(e) {
     const t = this.getTokenByEvent(e);
-    this.isDebug() && console.debug("ShortcutService tokens:", t);
+    this.isDebug() && console.debug("ShortcutService tokens    :", t);
     for (const s in this.shortcutActionIdMapping) {
-      const i = s.replace(/opt/g, "alt").replace(/cmd/g, "meta").split(/[\+ ]/g).sort();
-      if (this.areTokensEquals(t, i))
+      const o = s.replace(/opt/g, "alt").replace(/cmd/g, "meta").split(/[+ ]/g).sort();
+      if (this.areTokensEquals(t, o))
         return this.shortcutActionIdMapping[s];
     }
   }
@@ -2093,8 +2553,16 @@ class lt {
     const t = [];
     return e.altKey && t.push("alt"), e.shiftKey && t.push("shift"), e.ctrlKey && t.push("ctrl"), e.metaKey && t.push("meta"), e.code && t.push(e.code.toLowerCase().replace(/key/g, "")), t.sort();
   }
+  /**
+   * Retrieves the shortcut action mapping object.
+   *
+   * @returns {ShortcutActionIdMapping} - The shortcut action mapping object.
+   */
+  getShortcutActionMapping() {
+    return this.shortcutActionIdMapping;
+  }
 }
-class ue {
+class be {
   onCheckboxChanged(e) {
   }
   onContextmenu(e) {
@@ -2109,8 +2577,12 @@ class ue {
   }
   onMouseMoved(e) {
   }
+  onSelectionChanged(e) {
+  }
+  onFocusChanged(e) {
+  }
 }
-class we {
+class Me {
   setStyle(e, t, s) {
     return e.style[t] = s, e;
   }
@@ -2137,11 +2609,11 @@ class we {
     e.setAttribute(t, s);
   }
 }
-class rt {
-  render(e, t, s, i, o, r, n) {
-    if (o.isEditable(t, s)) {
+class gt {
+  render(e, t, s, o, i, l, n) {
+    if (i.isEditable(t, s)) {
       n.addClass(e, "ge-table-row-input-div");
-      const a = o.getValueAt(t, s);
+      const a = i.getValueAt(t, s);
       e.innerHTML = `
             <input
                 type="text"
@@ -2149,7 +2621,7 @@ class rt {
                 autofocus
                 onfocus="this.setSelectionRange(0, this.value.length)"
                 data-listen="change"
-                data-area="${i}"
+                data-area="${o}"
                 data-row-index="${t}"
                 data-col-index="${s}"
                 data-input-type="text"
@@ -2158,14 +2630,17 @@ class rt {
     }
   }
 }
-class nt {
+class ut {
   constructor(e = "none", t = "single") {
     this.selectionType = e, this.selectionMode = t, this.ranges = [], this.negativeRanges = [], this.allSelected = !1;
   }
+  firstClick(e, t) {
+    this.selectionType === "row" ? this.addRange(A.singleRow(e)) : this.selectionType === "column" && this.addRange(A.singleColumn(t));
+  }
   getSelectionCount(e, t) {
     let s = 0;
-    for (const i of this.ranges)
-      i.isInRange(e, t) && s++;
+    for (const o of this.ranges)
+      o.isInRange(e, t) && s++;
     return this.allSelected && s++, this.isInNegativeRange(e, t) && (s = 0), s;
   }
   isInNegativeRange(e, t) {
@@ -2181,11 +2656,29 @@ class nt {
     this.ranges = [], this.negativeRanges = [], this.allSelected = !1;
   }
   hasSelection() {
-    return !!this.ranges.length;
+    return this.allSelected || !!this.ranges.length;
+  }
+  hasNoSelection() {
+    return !this.hasSelection();
+  }
+  /**
+   * Retrieves the merged row indices from the given range selection.
+   *
+   * @returns {number[]} Array of merged row indices
+   */
+  getMergedRowIndices() {
+    const e = /* @__PURE__ */ new Set();
+    for (const t of this.ranges)
+      for (let s = t.r1; s <= t.r2; s++)
+        !e.has(s) && !this.isInNegativeRange(s, 0) && e.add(s);
+    return Array.from(e);
   }
   selectAll() {
     this.allSelected = !0;
   }
+  isAllSelected() {
+    return this.allSelected;
+  }
   addSelection(e) {
     this.addRange(e);
   }
@@ -2193,16 +2686,19 @@ class nt {
     if (this.selectionType === "none")
       return;
     let t = e;
-    this.selectionType === "row" ? t = D.singleRow(e.r1) : this.selectionType === "column" && (t = D.singleColumn(e.c1)), this.negativeRanges.push(t);
+    this.selectionType === "row" ? t = A.singleRow(e.r1) : this.selectionType === "column" && (t = A.singleColumn(e.c1)), this.negativeRanges.push(t);
   }
   togglePoint(e, t) {
-    this.getSelectionCount(e, t) > 0 ? this.removeSelection(D.singleCell(e, t)) : this.addSelection(D.singleCell(e, t));
+    this.getSelectionCount(e, t) > 0 ? this.removeSelection(A.singleCell(e, t)) : this.addSelection(A.singleCell(e, t));
+  }
+  isSelected(e, t) {
+    return this.getSelectionCount(e, t) > 0;
   }
   addRange(e) {
     this.selectionType !== "none" && (this.allSelected = !1, this.selectionMode === "single" && (this.ranges = []), this.selectionType === "row" ? (e.c1 = 0, e.c2 = Number.MAX_SAFE_INTEGER) : this.selectionType === "column" ? (e.r1 = 0, e.r2 = Number.MAX_SAFE_INTEGER) : this.selectionType === "cell" ? (e.r2 = e.r1, e.c2 = e.c1) : this.selectionType, this.ranges.push(e));
   }
 }
-class at {
+class pt {
   constructor(e = "none") {
     this.selectionType = e, this.rowIndex = -1, this.columnIndex = -1, this.changed = !1;
   }
@@ -2225,29 +2721,128 @@ class at {
     return [this.rowIndex, this.columnIndex];
   }
 }
-const dt = new nt(), ht = new at("cell");
-class Ce {
+class Re {
+  constructor(e = new I(
+    "❯",
+    "",
+    ["gt-table-icon-expanded"]
+  ), t = new I(
+    "❯",
+    "transform: rotate(180deg) translate(-100%, -100%); transform-origin: 0 0;",
+    ["ge-table-icon-collapsed"]
+  )) {
+    this.iconExpanded = e, this.iconCollapsed = t;
+  }
+  // `⊖ `,  `⊕ `;
+}
+const bt = new ut(), ft = new pt("cell");
+class Te {
   constructor() {
     this.overflowX = "auto", this.overflowY = "auto", this.horizontalBorderVisible = !0, this.verticalBorderVisible = !0, this.footerSeparatorBorderVisible = !0, this.headerSeparatorBorderVisible = !0, this.fixedEastSeparatorBorderVisible = !0, this.fixedWestSeparatorBorderVisible = !0, this.tableTopBorderVisible = !0, this.tableBottomBorderVisible = !0, this.hoverRowVisible = !0, this.hoverColumnVisible = !0, this.columnsResizable = !0, this.columnsDraggable = !0, this.columnResizeHandleWidthInPx = 4, this.defaultRowHeights = {
       header: 34,
       body: 34,
       footer: 34
-    }, this.footerVerticalSeparator = !1, this.headerToggleExpandCollapseIcons = !1, this.headerVerticalSeparator = !1, this.treeOptions = new ye(), this.showCheckboxWihoutExtraColumn = !1, this.externalFilterFunction = void 0, this.sortedOptions = new ve(), this.sortOrder = ["asc", "desc"], this.getEditRenderer = (e, t) => new rt(), this.getSelectionModel = () => dt, this.getFocusModel = () => ht;
+    }, this.footerVerticalSeparator = !1, this.headerToggleExpandCollapseIcons = !1, this.headerVerticalSeparator = !1, this.treeOptions = new Ee(), this.headerGroupOptions = new Re(), this.showCheckboxWihoutExtraColumn = !1, this.externalFilterFunction = void 0, this.sortedOptions = new Ae(), this.sortOrder = ["asc", "desc"], this.getEditRenderer = (e, t) => new gt(), this.getSelectionModel = () => bt, this.getFocusModel = () => ft;
   }
 }
-class ne extends Qe {
-  constructor(e, t, s, i, o) {
-    var r;
+const P = class P {
+  /**
+   * Returns the content to be copied based on the provided table model, selection model, and focus model.
+   *
+   * @param {TableModelIf} tableModel - The table model for data retrieval.
+   * @param {SelectionModelIf} selectionModel - The selection model to determine the selected range.
+   * @param {FocusModelIf} focusModel - The focus model to determine the focused cell.
+   * @return {Promise<string>} A promise that resolves to the copied content as a string.
+   * @throws {string} Throws an error if neither selection nor focus is defined.
+   */
+  createContent(e, t, s) {
+    return new Promise((o, i) => {
+      if (t != null && t.hasSelection()) {
+        const l = this.mergeRanges(t.getRanges());
+        if (l) {
+          l.c2 = Math.min(l.c2, e.getColumnCount() - 1), l.r2 = Math.min(l.r2, e.getBodyModel().getRowCount() - 1);
+          const n = [];
+          for (let a = l.r1; a <= l.r2; a++) {
+            const c = [];
+            for (let d = l.c1; d <= l.c2; d++) {
+              const h = t.isSelected(a, d) ? e.getBodyModel().getTextValueAt(a, d) : "";
+              c.push(h);
+            }
+            n.push(c.join(P.columnSeparatorChar));
+          }
+          return o(n.join(P.rowSeparatorChar));
+        }
+      }
+      if (s) {
+        const [l, n] = s.getFocus(), a = e.getBodyModel().getTextValueAt(l, n);
+        return o(a);
+      }
+      i("Cannot copy, neither selection nor focus defined.");
+    });
+  }
+  /**
+   * Copy the provided content to the clipboard.
+   *
+   * @param {string} content - The content to be copied.
+   * @return {Promise<void>} A promise that resolves when the content has been successfully copied to the clipboard.
+   */
+  copyContent(e) {
+    return navigator.clipboard.writeText(e);
+  }
+  /**
+   * Asynchronously copies the content of a table to the clipboard.
+   *
+   * @param {TableModelIf} tableModel - The table model to copy from.
+   * @param {SelectionModelIf} selectionModel - The selection model of the table.
+   * @param {FocusModelIf} focusModel - The focus model of the table.
+   * @returns {Promise<string>} A promise that resolves with the copied text if successful, or rejects if an error occurs.
+   */
+  copyToClipboard(e, t, s) {
+    return new Promise((o, i) => {
+      this.createContent(
+        e,
+        t,
+        s
+      ).then((l) => {
+        l && this.copyContent(l).then((n) => {
+          o(l);
+        }).catch((n) => {
+          i();
+        });
+      }).catch((l) => {
+        i();
+      });
+    });
+  }
+  /**
+   * Merges an array of CellRanges into a single merged CellRange.
+   *
+   * @param {CellRange[]} ranges - The array of CellRanges to be merged.
+   * @return {CellRange | undefined} - The merged CellRange, or undefined if the ranges array is empty.
+   */
+  mergeRanges(e) {
+    let t;
+    for (const s of e)
+      t ? (t.r1 = Math.min(t.r1, s.r1), t.c1 = Math.min(t.c1, s.c1), t.r2 = Math.max(t.r2, s.r2), t.c2 = Math.max(t.c2, s.c2)) : t = new A(s.r1, s.c1, s.r2, s.c2);
+    return t;
+  }
+};
+P.columnSeparatorChar = "	", P.rowSeparatorChar = `
+`;
+let K = P;
+class he extends it {
+  constructor(e, t, s, o, i, l = new K()) {
+    var n;
     if (super(
       e,
       t,
-      new ke(s),
-      i
-    ), this.eventListener = o, this.licenseManager = $.getInstance(), this.selectionService = new st(this), this.api = new je(this), this.mouseStartAction = "", this.mouseStartWidth = -1, this.mouseStartColumnIndex = -1, this.dragFrom = -1, this.dragTo = -1, o || (this.eventListener = new ue()), (r = this.tableOptions) != null && r.autoRestoreOptions) {
-      const n = this.tableOptions.autoRestoreOptions, a = n.getStorageKeyFn;
-      a && (n.autoRestoreScrollPosition && (this.storeScrollPosStateService = new Xe(a)), n.autoRestoreCollapsedExpandedState && (this.storeStateCollapsedExpandService = new ze(a)), n.autoRestoreSortingState && (this.storeSortingService = new Ye(a)));
+      new Ke(s),
+      o
+    ), this.eventListener = i, this.copyService = l, this.licenseManager = $.getInstance(), this.selectionService = new at(this), this.api = new qe(this), this.mouseStartAction = "", this.mouseStartWidth = -1, this.mouseStartColumnIndex = -1, this.dragFrom = -1, this.dragTo = -1, this.lastDragFrom = -1, this.lastDragTo = -1, this.firstDraggingRendering = !0, i || (this.eventListener = new be()), (n = this.tableOptions) != null && n.autoRestoreOptions) {
+      const a = this.tableOptions.autoRestoreOptions, c = a.getStorageKeyFn;
+      c && (a.autoRestoreScrollPosition && (this.storeScrollPosStateService = new Je(c)), a.autoRestoreCollapsedExpandedState && (this.storeStateCollapsedExpandService = new Ze(c)), a.autoRestoreSortingState && (this.storeSortingService = new et(c)));
     }
-    this.mouseHandler = new _e(this), this.inputHandler = new et(this), this.shortcutService = new lt(this), this.shortcutService.addListener(this.selectionService);
+    this.mouseHandler = new Ue(this), this.inputHandler = new rt(this), this.shortcutService = new ht(this), this.shortcutService.addListener(this.selectionService);
   }
   /**
    * Creates a TableScope instance.
@@ -2257,33 +2852,47 @@ class ne extends Qe {
    * @param {TableOptionsIf} [tableOptions=new TableOptions()] - The optional table options object.
    * @param {EventListenerIf} [eventListener=new EventAdapter()] - The optional event listener object.
    * @param {DomServiceIf} [domService=new SimpleDomService()] - The optional DOM service object.
+   * @param {CopyServiceIf} [copyService=new CopyService()] - The optional copy service object.
    *
    * @return {TableScope} - The newly created TableScope instance.
    */
-  static create(e, t, s = new Ce(), i = new ue(), o = new we()) {
-    return new ne(
+  static create(e, t, s = new Te(), o = new be(), i = new Me(), l = new K()) {
+    return new he(
       e,
       t,
-      o,
+      i,
       s,
-      i
+      o,
+      l
     );
   }
+  /**
+   * Triggers an action based on the provided actionId.
+   *
+   * This function can be invoked manually via the table API or by keyboard shortcuts.
+   *
+   * @param {ActionId} actionId - The identifier of the action to be triggered.
+   * @return {boolean} - Returns true if the action was triggered successfully, false otherwise.
+   */
   onActionTriggered(e) {
     if (e === "NAVIGATE_DOWN" && this.changeFocusCell(0, 1) || e === "NAVIGATE_UP" && this.changeFocusCell(0, -1) || e === "NAVIGATE_LEFT" && this.changeFocusCell(-1, 0) || e === "NAVIGATE_RIGHT" && this.changeFocusCell(1, 0))
       return !0;
     if (e === "START_EDITING" && this.getFocusModel) {
       const t = this.getFocusModel();
       if (t) {
-        const [s, i] = t.getFocus();
-        this.tableModel.getBodyModel().isEditable(s, i) && (this.clearSelection(), this.initRenderEditor(s, i));
+        const [s, o] = t.getFocus();
+        this.tableModel.getBodyModel().isEditable(s, o) && (this.clearSelection(), this.initRenderEditor(s, o));
       }
       return !0;
     }
+    if (e === "COPY_2_CLIPBOARD") {
+      const t = this.getSelectionModel ? this.getSelectionModel() : void 0, s = this.getFocusModel ? this.getFocusModel() : void 0;
+      this.copyService.createContent(this.tableModel, t, s).then((o) => this.copyService.copyContent(o));
+    }
     return !1;
   }
-  updateModelValueAfterEdit(e, t, s, i) {
-    e === "body" && this.tableModel.getAreaModel(e).setValue(t, s, i) && (this.resetEditorRenderer(), this.repaint(), this.eventListener.onModelChanged(re.createSingle(t, s)), this.hostElement.focus());
+  updateModelValueAfterEdit(e, t, s, o) {
+    e === "body" && this.tableModel.getAreaModel(e).setValue(t, s, o) && (this.resetEditorRenderer(), this.repaint(), this.eventListener.onModelChanged(ce.createSingle(t, s)), this.hostElement.focus());
   }
   /**
    * Retrieves the TableApi object.
@@ -2312,16 +2921,16 @@ class ne extends Qe {
    * @return {GeMouseEvent} - The created GeMouseEvent object.
    */
   createGeMouseEvent(e) {
-    const t = new ie();
+    const t = new ne();
     if (t.originalEvent = e, e) {
       const s = e.target;
       if ([t.areaIdent, t.sideIdent] = this.getAreaAndSideIdentByAttr(s), t.rowIndex = this.getNumberByAttr(s, "data-row-index"), t.columnIndex = this.getNumberByAttr(s, "data-col-index"), t.action = this.getStringByAttr(s, "data-ge-action"), t.areaIdent) {
-        const i = this.tableModel.getAreaModel(t.areaIdent);
-        t.rowTop = i.getYPosByRowIndex(t.rowIndex);
+        const o = this.tableModel.getAreaModel(t.areaIdent);
+        t.rowTop = o.getYPosByRowIndex(t.rowIndex);
       }
       if (t.columnLeft = this.tableModel.getXPosByColumnIndex(t.columnIndex), e.ctrlKey && e.altKey) {
-        const i = e.clientY - this.hostElement.offsetTop - this.areaHeaderCenter.parent.clientHeight, o = e.clientX - this.hostElement.offsetLeft - this.areaBodyWestGeo.width;
-        this.debugOnce(o, i);
+        const o = e.clientY - this.hostElement.offsetTop - this.areaHeaderCenter.parent.clientHeight, i = e.clientX - this.hostElement.offsetLeft - this.areaBodyWestGeo.width;
+        this.debugOnce(i, o);
       }
     }
     return t;
@@ -2333,15 +2942,16 @@ class ne extends Qe {
    * @return {void}
    */
   onMouseDown(e) {
-    e.columnIndex > -1 && e.action && ["resize-column", "drag-column"].includes(e.action) && (this.mouseStartWidth = this.tableModel.getColumnWidth(e.columnIndex), this.mouseStartAction = e.action, this.mouseStartColumnIndex = e.columnIndex, this.mouseStartAction === "drag-column" && (this.dragFrom = this.mouseStartColumnIndex));
+    e.columnIndex > -1 && e.action && ["resize-column", "drag-column"].includes(e.action) && (this.mouseStartWidth = this.tableModel.getColumnWidth(e.columnIndex), this.mouseStartAction = e.action, this.mouseStartColumnIndex = e.columnIndex, this.mouseStartAction === "drag-column" && (this.firstDraggingRendering = !0, this.dragFrom = this.mouseStartColumnIndex));
   }
   /**
    * Handles mouse dragging on the frame.
    *
    * @param {GeMouseEvent} mouseEvent - The mouse event object.
+   * @param startMouseEvent
    */
-  mouseDraggingOnFrame(e) {
-    this.eventListener.onMouseDragging(e), this.mouseEvent = e, this.mouseStartColumnIndex > -1 && this.mouseStartAction === "resize-column" && this.tableOptions.columnsResizable ? this.resizeColumn(e) : this.mouseStartAction === "drag-column" && e.columnIndex > -1 && this.tableOptions.columnsDraggable && (this.draggingTargetColumnIndex = e.columnIndex, this.dragTo = this.draggingTargetColumnIndex, this.dragFrom > -1 && this.dragTo > -1 && this.dragFrom !== this.dragTo && (this.tableModel.changeColumnOrder(this.dragFrom, this.dragTo), this.dragFrom = this.dragTo, this.resetSizeOfWrapperDiv(), this.adjustContainersAndRows()), this.repaint());
+  mouseDraggingOnFrame(e, t) {
+    this.eventListener.onMouseDragging(e), this.mouseEvent = e, this.mouseStartColumnIndex > -1 && this.mouseStartAction === "resize-column" && this.tableOptions.columnsResizable ? this.resizeColumn(e) : this.mouseStartAction === "drag-column" && e.columnIndex > -1 && this.tableOptions.columnsDraggable && (this.draggingTargetColumnIndex = e.columnIndex, this.dragTo = this.draggingTargetColumnIndex, this.dragFrom > -1 && this.dragTo > -1 && this.dragFrom !== this.dragTo && (this.lastDragFrom === this.dragTo && this.lastDragTo === this.dragFrom || (this.tableModel.changeColumnOrder(this.dragFrom, this.dragTo), this.lastDragFrom = this.dragFrom, this.lastDragTo = this.dragTo, this.dragFrom = this.dragTo, this.resetSizeOfWrapperDiv(), this.adjustContainersAndRows())), t && (this.adjustDraggingColumn(e, t.columnIndex, this.firstDraggingRendering), this.firstDraggingRendering = !1), this.repaint());
   }
   /**
    * Handles the end of mouse dragging event on a frame.
@@ -2351,7 +2961,7 @@ class ne extends Qe {
    * @returns {void}
    */
   mouseDraggingEndOnFrame(e) {
-    this.eventListener.onMouseDraggingEnd(e), this.draggingTargetColumnIndex = -1, this.mouseStartAction === "resize-column" ? this.resizeColumn(e) : this.mouseStartAction === "drag-column" && this.repaint(), this.mouseStartWidth = -1, this.mouseStartColumnIndex = -1, this.dragFrom = -1, this.dragTo = -1, this.mouseStartAction = "";
+    this.eventListener.onMouseDraggingEnd(e), this.draggingTargetColumnIndex = -1, this.mouseStartAction === "resize-column" ? this.resizeColumn(e) : this.mouseStartAction === "drag-column" && (this.hideDraggingColumn(), this.repaint()), this.mouseStartWidth = -1, this.mouseStartColumnIndex = -1, this.dragFrom = -1, this.dragTo = -1, this.firstDraggingRendering = !0, this.mouseStartAction = "";
   }
   /**
    * Handles the mouse move event.
@@ -2381,7 +2991,7 @@ class ne extends Qe {
   toggleExpandCollapseAll(e = !0) {
     var s;
     const t = this.tableModel.getBodyModel();
-    te(t) && (t.toggleExpandCollapseAll(e), this.repaint(), (s = this.storeStateCollapsedExpandService) == null || s.collapsedStateAll(e));
+    le(t) && (t.toggleExpandCollapseAll(e), this.repaint(), (s = this.storeStateCollapsedExpandService) == null || s.collapsedStateAll(e));
   }
   /**
    * Toggles the checkbox state of a specific row in a table.
@@ -2394,9 +3004,9 @@ class ne extends Qe {
    */
   toggleRowCheckbox(e, t, s) {
     var a;
-    const i = this.tableModel.getAreaModel(s), o = i.isRowChecked(e), r = o === void 0 || o === "semi" || o === "none";
-    i.setRowChecked(e, r), this.repaint();
-    const n = (a = i.rowSelectionModel) == null ? void 0 : a.getCheckedRows();
+    const o = this.tableModel.getAreaModel(s), i = o.isRowChecked(e), l = i === void 0 || i === "semi" || i === "none";
+    o.setRowChecked(e, l), this.repaint();
+    const n = (a = o.rowSelectionModel) == null ? void 0 : a.getCheckedRows();
     this.eventListener.onCheckboxChanged(n || []);
   }
   /**
@@ -2409,10 +3019,23 @@ class ne extends Qe {
   onMouseClicked(e, t) {
     let s = this.selectionService.onMouseClicked(e, t);
     if (!s && this.getFocusModel) {
-      const i = this.getFocusModel();
-      i && (s = i.hasChanged(), i.clearChanged(), s && this.resetEditorRenderer());
+      this.resetEditorRenderer();
+      const o = this.getFocusModel();
+      o && (s = o.hasChanged(), o.clearChanged());
     }
-    this.eventListener.onMouseClicked(e), s && this.debounce(this.repaint.bind(this), 10);
+    return s;
+  }
+  debounceRepaint() {
+    this.debounce(this.repaint.bind(this), 1);
+  }
+  publishGeMouseEvent(e) {
+    this.eventListener.onMouseClicked(e);
+  }
+  onFocusChanged(e) {
+    this.eventListener.onFocusChanged(e);
+  }
+  onSelectionChanged(e) {
+    this.eventListener.onSelectionChanged(e);
   }
   /**
    * Updates the table (repaint) when an external filter is changed.
@@ -2434,14 +3057,72 @@ class ne extends Qe {
    * @return {void}
    */
   onHeaderDblClicked(e, t, s) {
-    var o, r;
-    const i = this.tableModel.getColumnDef(s);
-    if (i != null && i.sortable && i.sortable()) {
+    var i, l;
+    const o = this.tableModel.getColumnDef(s);
+    if (o != null && o.sortable && o.sortable()) {
       e.preventDefault(), e.stopPropagation();
-      const n = i.sortStatesOrder ? i.sortStatesOrder : this.tableOptions.sortOrder, a = i.sortState ?? "", h = n[(n.indexOf(a) + 1) % n.length], d = new Ze(s, h);
-      this.tableModel.doSort([d]) && ((o = this.tableModel.getColumnDefs()) == null || o.forEach((p) => p.sortState = ""), i.sortState = h), this.repaint(), (r = this.storeSortingService) == null || r.setSortItems([d]);
+      const n = o.sortStatesOrder ? o.sortStatesOrder : this.tableOptions.sortOrder, a = o.sortState ?? "", c = n[(n.indexOf(a) + 1) % n.length], d = new lt(s, c);
+      this.tableModel.doSort([d]) && ((i = this.tableModel.getColumnDefs()) == null || i.forEach((g) => g.sortState = ""), o.sortState = c), this.repaint(), (l = this.storeSortingService) == null || l.setSortItems([d]);
     }
   }
+  /**
+   * Scrolls the viewport to the specified pixel coordinates.
+   *
+   * @param {number} px - The horizontal pixel coordinate to scroll to.
+   * @param {number} py - The vertical pixel coordinate to scroll to.
+   *
+   * @return {void}
+   */
+  scrollToPixel(e, t) {
+    this.scrollViewport.scrollTo(e, t);
+  }
+  /**
+   * Scrolls to the specified index in the table.
+   *
+   * @param {number} _indexX - The horizontal index of the table where scrolling is needed.
+   * @param {number} indexY - The vertical index of the table where scrolling is needed.
+   * @return {void}
+   */
+  scrollToIndex(e, t) {
+    const o = this.tableModel.getAreaModel("body").getYPosByRowIndex(t);
+    this.scrollToPixel(0, o);
+  }
+  /**
+   * Sets the selection model for the table.
+   *
+   * @param {SelectionModel} sm - The selection model to be set.
+   * @param {boolean} rerender - Optional parameter indicating whether to rerender the table after setting the selection model. Default value is false.
+   *
+   * @return {void} - This method does not return any value.
+   */
+  setSelectionModel(e, t = !1) {
+    const s = () => e;
+    this.tableOptions.getSelectionModel = s, this.getSelectionModel = s, this.selectionService.getSelectionModel = s, t && this.repaint();
+  }
+  toggleHeaderGroup(e) {
+    const t = this.tableModel.getAreaModel("header");
+    "columnDefs" in this.tableModel && (this.tableModel.columnDefs = t.toggleHeaderGroup(e), console.info("####### !!!!!! *******, this.tableModel.columnDefs")), this.firstInit();
+  }
+  /**
+   * Retrieves the selection model.
+   * @returns {SelectionModelIf | undefined} The selection model if available, otherwise undefined.
+   */
+  selectionModel() {
+    if (this != null && this.getSelectionModel)
+      return this.getSelectionModel();
+  }
+  /**
+   * Retrieves the focus model.
+   *
+   * @returns {FocusModelIf | undefined} The focus model if it exists, or undefined otherwise.
+   */
+  focusModel() {
+    if (this != null && this.getFocusModel)
+      return this.getFocusModel();
+  }
+  setDragging(e) {
+    this.dragging = e, this.dragging ? (this.storeColumnWidths(), this.lastDragFrom = -1, this.lastDragTo = -1) : this.storedColumnWidths = [];
+  }
   /**
    * Changes the focus cell using the specified deltas.
    *
@@ -2453,8 +3134,8 @@ class ne extends Qe {
     if (!this.isEditing() && this.getFocusModel) {
       const s = this.getFocusModel();
       if (s) {
-        const [i, o] = s.getFocus();
-        return s.setFocus(i + t, o + e), this.repaint(), !0;
+        const [o, i] = s.getFocus();
+        return s.setFocus(o + t, i + e), this.repaint(), !0;
       }
     }
     return !1;
@@ -2483,8 +3164,6 @@ class ne extends Qe {
   /**
    * Restores the scroll position of the table if auto restore options are enabled.
    *
-   * @private
-   * @memberof ClassName
    *
    * @returns {void}
    */
@@ -2525,21 +3204,21 @@ class ne extends Qe {
   autoRestoreCollapsedExpandedState() {
     var e, t;
     if ((t = (e = this.tableOptions) == null ? void 0 : e.autoRestoreOptions) != null && t.getRowId && this.storeStateCollapsedExpandService) {
-      const s = this.tableOptions.autoRestoreOptions, i = s.getRowId;
-      if (s.autoRestoreCollapsedExpandedState && i) {
-        const o = this.storeStateCollapsedExpandService.collapsedExpandedStateGet(), r = this.tableModel.getAreaModel("body");
-        if (te(r)) {
-          const n = r, a = r.getRowCount();
-          for (let h = 0; h < a; h++) {
-            const d = r.getRowByIndex(h);
+      const s = this.tableOptions.autoRestoreOptions, o = s.getRowId;
+      if (s.autoRestoreCollapsedExpandedState && o) {
+        const i = this.storeStateCollapsedExpandService.collapsedExpandedStateGet(), l = this.tableModel.getAreaModel("body");
+        if (le(l)) {
+          const n = l, a = l.getRowCount();
+          for (let c = 0; c < a; c++) {
+            const d = l.getRowByIndex(c);
             if (d)
-              if (o.allExpanded)
+              if (i.allExpanded)
                 d.expanded = !0;
-              else if (o.allCollapsed)
+              else if (i.allCollapsed)
                 d.expanded = !1;
               else {
-                const c = i(d.data);
-                o.mode === "expanded" ? d.expanded = this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(c) : o.mode === "collapsed" && (d.expanded = !this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(c));
+                const h = o(d.data);
+                i.mode === "expanded" ? d.expanded = this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(h) : i.mode === "collapsed" && (d.expanded = !this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(h));
               }
           }
           n.recalcVisibleTreeRows();
@@ -2547,100 +3226,370 @@ class ne extends Qe {
       }
     }
   }
-  /**
-   * Scrolls the viewport to the specified pixel coordinates.
-   *
-   * @param {number} px - The horizontal pixel coordinate to scroll to.
-   * @param {number} py - The vertical pixel coordinate to scroll to.
-   *
-   * @return {void}
-   */
-  scrollToPixel(e, t) {
-    this.scrollViewport.scrollTo(e, t);
-  }
-  /**
-   * Scrolls to the specified index in the table.
-   *
-   * @param {number} _indexX - The horizontal index of the table where scrolling is needed.
-   * @param {number} indexY - The vertical index of the table where scrolling is needed.
-   * @return {void}
-   */
-  scrollToIndex(e, t) {
-    const i = this.tableModel.getAreaModel("body").getYPosByRowIndex(t);
-    this.scrollToPixel(0, i);
-  }
 }
-const ct = /* @__PURE__ */ He("<div>"), ft = (l) => {
+const Y = class Y {
+};
+Y.themes = ["light", "combat", "paper", "blackboard"], Y.vars = {
+  light: `html[data-theme="light"] {
+  --ge-table-bg: rgba(255,255,255, 0.5);
+  --ge-table-header-west-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-header-center-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-header-east-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-header-west-text: #000;
+  --ge-table-header-center-text: #000;
+  --ge-table-header-east-text: #000;
+  --ge-table-header-west-horizontal-border: #ddd;
+  --ge-table-header-west-vertical-border: #ccc;
+  --ge-table-header-center-horizontal-border: #ddd;
+  --ge-table-header-center-vertical-border: #ccc;
+  --ge-table-header-east-horizontal-border: #ddd;
+  --ge-table-header-east-vertical-border: #ccc;
+  --ge-table-body-west-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-body-center-bg: rgba(255,255,255, 0.5);
+  --ge-table-body-east-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-body-west-text: #000;
+  --ge-table-body-center-text: #000;
+  --ge-table-body-east-text: #000;
+  --ge-table-body-west-horizontal-border: #ddd;
+  --ge-table-body-west-vertical-border: #ccc;
+  --ge-table-body-center-horizontal-border: #bbb;
+  --ge-table-body-center-vertical-border: #ddd;
+  --ge-table-body-east-horizontal-border: #ddd;
+  --ge-table-body-east-vertical-border: #ccc;
+  --ge-table-body-west-selected-range-bg: rgba(0, 152, 219, 0.4);
+  --ge-table-body-center-selected-range-bg: rgba(0, 152, 219, 0.4);
+  --ge-table-body-east-selected-range-bg: rgba(0, 152, 219, 0.4);
+  --ge-table-body-west-selected-range-text: #000;
+  --ge-table-body-center-selected-range-text: #000;
+  --ge-table-body-east-selected-range-text: #000;
+  --ge-table-footer-west-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-footer-center-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-footer-east-bg: rgba(233, 233, 233, 0.5);
+  --ge-table-footer-west-text: #000;
+  --ge-table-footer-center-text: #000;
+  --ge-table-footer-east-text: #000;
+  --ge-table-footer-west-horizontal-border: #ddd;
+  --ge-table-footer-west-vertical-border: #ccc;
+  --ge-table-footer-center-horizontal-border: #ddd;
+  --ge-table-footer-center-vertical-border: #ccc;
+  --ge-table-footer-east-horizontal-border: #ddd;
+  --ge-table-footer-east-vertical-border: #ccc;
+  --ge-table-border: #ccc;
+  --ge-table-row-odd-bg: transparent;
+  --ge-table-row-even-bg: transparent;
+  --ge-table-column-odd-bg: transparent;
+  --ge-table-column-even-bg: transparent;
+  --ge-table-hover-column-bg: rgba(0, 224, 255, 0.27);
+  --ge-table-hover-row-bg: rgba(0, 224, 255, 0.27);
+  --ge-table-focus-border: rgb(0, 255, 255);
+  --ge-table-color-error-text: #e00034;
+  --ge-table-tree-arrow-collapsed-color: #e00034;
+  --ge-table-column-resize-handle-border: rgb(0, 255, 255);
+  --ge-table-dragged-col-div-bg: lightcyan;
+  --ge-table-drop-zone-bg: rgba(244, 255, 242, 0.6);
+}`,
+  combat: `html[data-theme="combat"] {
+  --ge-table-bg: #101010;
+  --ge-table-header-west-bg: #101010;
+  --ge-table-header-center-bg: #101010;
+  --ge-table-header-east-bg: #101010;
+  --ge-table-header-west-text: oklch(100% 0 0);
+  --ge-table-header-center-text: oklch(100% 0 0);
+  --ge-table-header-east-text: oklch(100% 0 0);
+  --ge-table-header-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-bg: #101010;
+  --ge-table-body-center-bg: #101010;
+  --ge-table-body-east-bg: #101010;
+  --ge-table-body-west-text: #b6b4b4;
+  --ge-table-body-center-text: #b6b4b4;
+  --ge-table-body-east-text: #b6b4b4;
+  --ge-table-body-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-selected-range-bg: oklch(20% 0.2 39.6 / 37%);
+  --ge-table-body-center-selected-range-bg: oklch(20% 0.2 39.6 / 37%);
+  --ge-table-body-east-selected-range-bg: oklch(20% 0.2 39.6 / 37%);
+  --ge-table-body-west-selected-range-text: #f00032;
+  --ge-table-body-center-selected-range-text: #f00032;
+  --ge-table-body-east-selected-range-text: #f00032;
+  --ge-table-footer-west-bg: #101010;
+  --ge-table-footer-center-bg: #101010;
+  --ge-table-footer-east-bg: #101010;
+  --ge-table-footer-west-text: oklch(100% 0 0);
+  --ge-table-footer-center-text: oklch(100% 0 0);
+  --ge-table-footer-east-text: oklch(100% 0 0);
+  --ge-table-footer-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-border: oklch(100% 0 0 / 0%);
+  --ge-table-row-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-row-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-hover-column-bg: oklch(34% 0.25 3.6 / 27%);
+  --ge-table-hover-row-bg: oklch(34% 0.25 3.6 / 27%);
+  --ge-table-focus-border: oklch(40% 0.25 3.6);
+  --ge-table-color-error-text: oklch(65% 0.31 43.2);
+  --ge-table-tree-arrow-collapsed-color: #e00034;
+  --ge-table-column-resize-handle-border: oklch(63% 0.31 43.2);
+  --ge-table-dragged-col-div-bg: #2c2e33;
+  --ge-table-drop-zone-bg: #101010;
+}`,
+  paper: `html[data-theme="paper"] {
+  --ge-table-bg: #e7e5df;
+  --ge-table-header-west-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-header-center-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-header-east-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-header-west-text: #111;
+  --ge-table-header-center-text: #111;
+  --ge-table-header-east-text: #111;
+  --ge-table-header-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-header-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-body-center-bg: #e7e5df;
+  --ge-table-body-east-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-body-west-text: #000;
+  --ge-table-body-center-text: #000;
+  --ge-table-body-east-text: #000;
+  --ge-table-body-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-body-west-selected-range-bg: #cfcdc2;
+  --ge-table-body-center-selected-range-bg: #cfcdc2;
+  --ge-table-body-east-selected-range-bg: #cfcdc2;
+  --ge-table-body-west-selected-range-text: #000;
+  --ge-table-body-center-selected-range-text: #000;
+  --ge-table-body-east-selected-range-text: #000;
+  --ge-table-footer-west-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-footer-center-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-footer-east-bg: oklch(80% 0.02 99 / 48%);
+  --ge-table-footer-west-text: #111;
+  --ge-table-footer-center-text: #111;
+  --ge-table-footer-east-text: #111;
+  --ge-table-footer-west-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-west-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-center-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-center-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-east-horizontal-border: oklch(100% 0 0 / 0%);
+  --ge-table-footer-east-vertical-border: oklch(100% 0 0 / 0%);
+  --ge-table-border: oklch(100% 0 0 / 0%);
+  --ge-table-row-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-row-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-hover-column-bg: oklch(5% 0.2 266.40000000000003 / 9%);
+  --ge-table-hover-row-bg: oklch(5% 0.2 266.40000000000003 / 9%);
+  --ge-table-focus-border: oklch(100% 0.19 205.20000000000002);
+  --ge-table-color-error-text: oklch(45% 0.25 43.2);
+  --ge-table-tree-arrow-collapsed-color: #e00034;
+  --ge-table-column-resize-handle-border: oklch(100% 0.19 205.20000000000002 / 71%);
+  --ge-table-dragged-col-div-bg: #2c2e33;
+  --ge-table-drop-zone-bg: #e7e5df;
+}`,
+  blackboard: `html[data-theme="dark"] {
+  --ge-table-bg: #0c1021;
+  --ge-table-header-west-bg: #0c1021;
+  --ge-table-header-center-bg: #0c1021;
+  --ge-table-header-east-bg: #0c1021;
+  --ge-table-header-west-text: #e0df85;
+  --ge-table-header-center-text: #e0df85;
+  --ge-table-header-east-text: #e0df85;
+  --ge-table-header-west-horizontal-border: transparent;
+  --ge-table-header-west-vertical-border: transparent;
+  --ge-table-header-center-horizontal-border: transparent;
+  --ge-table-header-center-vertical-border: transparent;
+  --ge-table-header-east-horizontal-border: transparent;
+  --ge-table-header-east-vertical-border: transparent;
+  --ge-table-body-west-bg: #0c1021;
+  --ge-table-body-center-bg: #0c1021;
+  --ge-table-body-east-bg: #0c1021;
+  --ge-table-body-west-text: #a7a7a7;
+  --ge-table-body-center-text: #a7a7a7;
+  --ge-table-body-east-text: #a7a7a7;
+  --ge-table-body-west-horizontal-border: transparent;
+  --ge-table-body-west-vertical-border: transparent;
+  --ge-table-body-center-horizontal-border: transparent;
+  --ge-table-body-center-vertical-border: transparent;
+  --ge-table-body-east-horizontal-border: transparent;
+  --ge-table-body-east-vertical-border: transparent;
+  --ge-table-body-west-selected-range-bg: #758129;
+  --ge-table-body-center-selected-range-bg: #758129;
+  --ge-table-body-east-selected-range-bg: #758129;
+  --ge-table-body-west-selected-range-text: oklch(100% 0 0);
+  --ge-table-body-center-selected-range-text: oklch(100% 0 0);
+  --ge-table-body-east-selected-range-text: oklch(100% 0 0);
+  --ge-table-footer-west-bg: #0c1021;
+  --ge-table-footer-center-bg: #0c1021;
+  --ge-table-footer-east-bg: #0c1021;
+  --ge-table-footer-west-text: #e0df85;
+  --ge-table-footer-center-text: #e0df85;
+  --ge-table-footer-east-text: #e0df85;
+  --ge-table-footer-west-horizontal-border: transparent;
+  --ge-table-footer-west-vertical-border: transparent;
+  --ge-table-footer-center-horizontal-border: transparent;
+  --ge-table-footer-center-vertical-border: otransparent;
+  --ge-table-footer-east-horizontal-border: transparent;
+  --ge-table-footer-east-vertical-border: transparent;
+  --ge-table-border: oklch(0% 0 0);
+  --ge-table-row-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-row-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-odd-bg: oklch(100% 0 0 / 0%);
+  --ge-table-column-even-bg: oklch(100% 0 0 / 0%);
+  --ge-table-hover-column-bg: #a9a9a9;
+  --ge-table-hover-row-bg: #a9a9a9;
+  --ge-table-focus-border: #e1ff00;
+  --ge-table-color-error-text: #ff0040;
+  --ge-table-tree-arrow-collapsed-color: #e00034;
+  --ge-table-column-resize-handle-border: oklch(0% 0 0);
+  --ge-table-dragged-col-div-bg: #2c2e33;
+  --ge-table-drop-zone-bg: #758129;
+}`
+};
+let fe = Y;
+const U = class U {
+  constructor(e = new Re()) {
+    this.headerGroupOptions = e;
+  }
+  render(e, t, s, o, i, l, n) {
+    const a = l != null && l.data ? l.data : "";
+    if (l) {
+      const { toggle: c, visibility: d, closed: h } = l, g = c ? U.toggleHeaderGroup : "";
+      this.addText(e, o, t, s, a, g), c && d !== "always" && this.addArrowDiv(n, e, !h, t, s, o, g);
+    } else
+      this.addText(e, o, t, s, a, "");
+  }
+  addText(e, t, s, o, i, l) {
+    e.innerHTML = `<span 
+                data-ge-action="${l}"
+                data-area="${t}"
+                data-row-index="${s}"
+                data-col-index="${o}"
+                >${i}</span>`;
+  }
+  addArrowDiv(e, t, s = !0, o = -1, i = -1, l = "header", n) {
+    const a = e.createElement("div");
+    e.addClass(a, "ge-table-toggle-icon-div"), e.setStyle(a, "display", "inline-block"), e.setStyle(a, "position", ""), e.setStyle(a, "width", "20px"), e.setStyle(a, "background", "transparent"), e.setStyle(a, "cursor", "pointer"), e.setAttribute(a, "data-row-index", `${o}`), e.setAttribute(a, "data-col-index", `${i}`), e.setAttribute(a, "data-area", `${l}`), e.setAttribute(a, "data-ge-action", `${n}`);
+    let c;
+    s ? c = this.headerGroupOptions.iconExpanded : c = this.headerGroupOptions.iconCollapsed;
+    const d = c.content, h = e.createText(d);
+    e.appendChild(a, h), c.style && this.applyStyleString(e, a, c.style);
+    for (const g of c.classes)
+      e.addClass(a, g);
+    return e.appendChild(t, a), a;
+  }
+  applyStyleString(e, t, s) {
+    const o = s.split(";").map((i) => i.trim()).filter((i) => i);
+    for (const i of o) {
+      const [l, n] = i.split(":");
+      e.setStyle(t, l.trim(), n.trim());
+    }
+  }
+};
+U.toggleHeaderGroup = "toggleHeaderGroup";
+let Se = U;
+const St = /* @__PURE__ */ ze("<div>"), vt = (r) => {
   let e;
-  const t = be({
+  const t = xe({
     tableModel: null,
-    tableOptions: new Ce()
-  }, l);
-  return Re(() => {
+    tableOptions: new Te()
+  }, r);
+  return Fe(() => {
     const s = {
-      onCheckboxChanged: (r) => {
+      onSelectionChanged(l) {
+        const n = new CustomEvent("selectionChanged", {
+          detail: l,
+          bubbles: !0
+        });
+        e && e.dispatchEvent(n);
+      },
+      onFocusChanged(l) {
+        const n = new CustomEvent("focusChanged", {
+          detail: l,
+          bubbles: !0
+        });
+        e && e.dispatchEvent(n);
+      },
+      onCheckboxChanged: (l) => {
         const n = new CustomEvent("checkboxChanged", {
-          detail: r,
+          detail: l,
           bubbles: !0
         });
         e && e.dispatchEvent(n);
       },
-      onContextmenu: (r) => {
+      onContextmenu: (l) => {
         const n = new CustomEvent("contextmenu", {
-          detail: r,
+          detail: l,
           bubbles: !0
         });
         e && e.dispatchEvent(n);
       },
-      onModelChanged: (r) => {
+      onModelChanged: (l) => {
         const n = new CustomEvent("modelChanged", {
-          detail: r,
+          detail: l,
           bubbles: !0
         });
         e && e.dispatchEvent(n);
       },
-      onMouseClicked: (r) => {
+      onMouseClicked: (l) => {
         const n = new CustomEvent("mouseClicked", {
-          detail: r,
+          detail: l,
           bubbles: !0
         });
         e && e.dispatchEvent(n);
       },
-      onMouseDragging: (r) => {
+      onMouseDragging: (l) => {
         const n = new CustomEvent("mouseDragging", {
-          detail: r,
+          detail: l,
           bubbles: !0
         });
         e && e.dispatchEvent(n);
       },
-      onMouseDraggingEnd: (r) => {
+      onMouseDraggingEnd: (l) => {
         const n = new CustomEvent("mouseDraggingEnd", {
-          detail: r,
+          detail: l,
           bubbles: !0
         });
         e && e.dispatchEvent(n);
       },
-      onMouseMoved: (r) => {
+      onMouseMoved: (l) => {
         const n = new CustomEvent("mouseMoved", {
-          detail: r,
+          detail: l,
           bubbles: !0
         });
         e && e.dispatchEvent(n);
       }
-    }, i = new ne(e, t.tableModel, new we(), t.tableOptions, s);
-    i.firstInit();
-    const o = new CustomEvent("tableReady", {
-      detail: i.getApi(),
+    }, o = new he(e, t.tableModel, new Me(), t.tableOptions, s);
+    o.firstInit();
+    const i = new CustomEvent("tableReady", {
+      detail: o.getApi(),
       bubbles: !0
     });
-    e && e.dispatchEvent(o), t.licenseKey && $.getInstance().setLicenseKey(t.licenseKey);
+    e && e.dispatchEvent(i), t.licenseKey && $.getInstance().setLicenseKey(t.licenseKey);
   }), (() => {
-    const s = ct(), i = e;
-    return typeof i == "function" ? Ve(i, s) : e = s, s;
+    const s = St(), o = e;
+    return typeof o == "function" ? je(o, s) : e = s, s;
   })();
 };
 export {
-  ut as ComponentRendererWrapper,
-  ft as GuiexpertTable,
-  pt as GuiexpertTableProps
+  mt as ComponentRendererWrapper,
+  vt as GuiexpertTable,
+  yt as GuiexpertTableProps
 };