@guiexpert/table 1.1.8 → 1.1.10

package/index.js

@@ -23,18 +23,18 @@ class F {
     }
   }
 }
-function O(h) {
-  return h && h.type === "TreeRow";
+function L(c) {
+  return c && c.type === "TreeRow";
 }
-function z(h) {
-  return h && h.type === "AreaModelTree";
+function z(c) {
+  return c && c.type === "AreaModelTree";
 }
-function we(h) {
-  return h && h.type === "CheckboxColumnDef";
+function ye(c) {
+  return c && c.type === "CheckboxColumnDef";
 }
 class K {
-  constructor(e = -1, t = -1, o = -1, s = -1, i, r, l, n = 0, d = 0, a = 0, c = "") {
-    this.rowIndex = e, this.rowTop = t, this.columnIndex = o, this.columnLeft = s, this.areaIdent = i, this.sideIdent = r, this.originalEvent = l, this.clickCount = n, this.draggingX = d, this.draggingY = a, this.action = c;
+  constructor(e = -1, t = -1, o = -1, s = -1, i, r, n, l = 0, d = 0, a = 0, h = "") {
+    this.rowIndex = e, this.rowTop = t, this.columnIndex = o, this.columnLeft = s, this.areaIdent = i, this.sideIdent = r, this.originalEvent = n, this.clickCount = l, this.draggingX = d, this.draggingY = a, this.action = h;
   }
   clone() {
     return new K(
@@ -52,25 +52,25 @@ class K {
     );
   }
 }
-class P {
+class O {
   constructor(e = ">", t = "", o = []) {
     this.content = e, this.style = t, this.classes = o;
   }
 }
 class ge {
-  constructor(e = new P(
+  constructor(e = new O(
     ">",
     "transform: rotate(90deg) translate(66%, -66%); transform-origin: 0 0;",
     ["gt-table-tree-arrow-expanded"]
-  ), t = new P(
+  ), t = new O(
     ">",
     "",
     ["ge-table-tree-arrow-collapsed"]
-  ), o = new P(
+  ), o = new O(
     ">",
     "color:transparent;",
     ["gt-table-tree-arrow-hidden"]
-  ), s = new P(
+  ), s = new O(
     "↕",
     "",
     ["gt-table-tree-arrow-expanded-all"]
@@ -78,12 +78,12 @@ class ge {
     this.arrowExpanded = e, this.arrowCollapsed = t, this.arrowPlaceholder = o, this.arrowExpandCollapseAll = s;
   }
 }
-class be {
-  constructor(e = new P("↑", "", ["ge-header-sorted-asc"]), t = new P("↓", "", ["ge-header-sorted-desc"]), o = new P("↑", "color:transparent;", [])) {
+class pe {
+  constructor(e = new O("↑", "", ["ge-header-sorted-asc"]), t = new O("↓", "", ["ge-header-sorted-desc"]), o = new O("↑", "color:transparent;", [])) {
     this.iconAsc = e, this.iconDesc = t, this.iconPlaceholder = o;
   }
 }
-class xe {
+class Ce {
   constructor(e) {
     this.domService = e;
   }
@@ -157,26 +157,26 @@ class xe {
     return this.addClass(e, o), this.domService.appendChild(t, o), o;
   }
   addRowDiv(e, t, o = -1, s, i, r = "") {
-    const l = t.index ?? -1, n = this.getDivOrCreateDiv(l, e);
-    if (this.domService.addClass(n, "ge-table-row-div"), this.domService.addClass(n, `ge-table-row-div-${t.index}`), s === "body" && i === "center") {
+    const n = t.index ?? -1, l = this.getDivOrCreateDiv(n, e);
+    if (this.domService.addClass(l, "ge-table-row-div"), this.domService.addClass(l, `ge-table-row-div-${t.index}`), s === "body" && i === "center") {
       const d = ((t == null ? void 0 : t.index) ?? 0) % 2 === 0 ? "even" : "odd";
-      this.domService.addClass(n, `ge-table-row-${d}`);
+      this.domService.addClass(l, `ge-table-row-${d}`);
     }
-    if (this.domService.setStyle(n, "display", "clip"), this.domService.setStyle(n, "position", "absolute"), this.domService.setStyle(n, "left", `${t.left}px`), this.domService.setStyle(n, "top", `${t.top}px`), this.domService.setStyle(n, "width", `${t.width}px`), this.domService.setStyle(n, "height", `${t.height}px`), this.domService.setAttribute(n, "data-row-index", `${o}`), this.domService.setAttribute(n, "data-area", `${s}`), r) {
+    if (this.domService.setStyle(l, "display", "clip"), this.domService.setStyle(l, "position", "absolute"), this.domService.setStyle(l, "left", `${t.left}px`), this.domService.setStyle(l, "top", `${t.top}px`), this.domService.setStyle(l, "width", `${t.width}px`), this.domService.setStyle(l, "height", `${t.height}px`), this.domService.setAttribute(l, "data-row-index", `${o}`), this.domService.setAttribute(l, "data-area", `${s}`), r) {
       const d = this.domService.createText(r);
-      this.domService.appendChild(n, d);
+      this.domService.appendChild(l, d);
     }
-    return this.domService.appendChild(e.child, n), n;
-  }
-  addColumnDiv(e, t, o = -1, s = -1, i, r, l = "", n, d, a = void 0, c) {
-    const u = d == null ? void 0 : d.treeOptions, m = d == null ? void 0 : d.showCheckboxWihoutExtraColumn, b = this.domService.createElement("div");
-    this.domService.addClass(b, "ge-table-col-div"), this.domService.addClass(b, `ge-table-col-div-${t.index}`), this.domService.setAttribute(b, "data-col-index", `${t.index}`), this.domService.setAttribute(b, "data-row-index", `${o}`), this.domService.setAttribute(b, "data-area", `${i}`);
-    const S = ((t == null ? void 0 : t.index) ?? 0) % 2 === 0 ? "even" : "odd";
-    if (i === "body" && r === "center" && this.domService.addClass(b, `ge-table-column-${S}`), this.domService.setStyle(b, "display", "clip"), this.domService.setStyle(b, "position", "absolute"), this.domService.setStyle(b, "left", `${t.left}px`), this.domService.setStyle(b, "top", `${t.top}px`), this.domService.setStyle(b, "width", `${t.width}px`), this.domService.setStyle(b, "height", `${t.height}px`), n && n !== "none" && (this.domService.addClass(b, "ge-table-col-tree"), this.addArrowDiv(b, n, u, o, s, i)), m && s === 0 && a && this.addCheckboxToDiv(b, a, i, o), l) {
-      const g = n !== "none" && s === 0;
-      this.addLabelDiv(b, l, g, o, s, i);
+    return this.domService.appendChild(e.child, l), l;
+  }
+  addColumnDiv(e) {
+    const { parent: t, geo: o, rowIndex: s = -1, columnIndex: i = -1, areaIdent: r, sideIdent: n, text: l = "", treeArrow: d, tableOptions: a, checkedType: h = void 0, sortState: u } = e, w = a == null ? void 0 : a.treeOptions, f = a == null ? void 0 : a.showCheckboxWihoutExtraColumn, b = this.domService.createElement("div");
+    this.domService.addClass(b, "ge-table-col-div"), this.domService.addClass(b, `ge-table-col-div-${o.index}`), this.domService.setAttribute(b, "data-col-index", `${o.index}`), this.domService.setAttribute(b, "data-row-index", `${s}`), this.domService.setAttribute(b, "data-area", `${r}`);
+    const g = ((o == null ? void 0 : o.index) ?? 0) % 2 === 0 ? "even" : "odd";
+    if (r === "body" && n === "center" && this.domService.addClass(b, `ge-table-column-${g}`), this.domService.setStyle(b, "display", "clip"), this.domService.setStyle(b, "position", "absolute"), this.domService.setStyle(b, "left", `${o.left}px`), this.domService.setStyle(b, "top", `${o.top}px`), this.domService.setStyle(b, "width", `${o.width}px`), this.domService.setStyle(b, "height", `${o.height}px`), d && d !== "none" && (this.domService.addClass(b, "ge-table-col-tree"), this.addArrowDiv(b, d, w, s, i, r)), f && i === 0 && h && this.addCheckboxToDiv(b, h, r, s), l) {
+      const p = d !== "none" && i === 0;
+      this.addLabelDiv(b, l, p, s, i, r);
     }
-    return c && this.addSortedIcon(b, c, d == null ? void 0 : d.sortedOptions, s), this.domService.appendChild(e, b), b;
+    return u && this.addSortedIcon(b, u, a == null ? void 0 : a.sortedOptions, i), this.domService.appendChild(t, b), b;
   }
   addCheckboxToDiv(e, t, o, s) {
     const i = this.domService.createElement("div"), r = t === "full" ? "checked" : "";
@@ -190,40 +190,40 @@ class xe {
                 class="ge-table-row-checkbox"> `, this.domService.setStyle(i, "display", "inline"), this.domService.setStyle(i, "width", "inherit"), this.domService.setAttribute(i, "data-row-index", `${s}`), this.domService.appendChild(e, i), i;
   }
   addLabelDiv(e, t = "", o = !1, s = -1, i = -1, r = "body") {
-    const l = this.domService.createElement("div");
-    if (this.domService.addClass(l, "ge-table-label-div"), this.domService.setStyle(l, "position", "relative"), this.domService.setStyle(l, "background", "transparent"), this.domService.setStyle(l, "width", "100%"), this.domService.setStyle(l, "height", "100%"), this.domService.setAttribute(l, "data-row-index", `${s}`), this.domService.setAttribute(l, "data-col-index", `${i}`), this.domService.setAttribute(l, "data-area", `${r}`), t)
+    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", `${s}`), this.domService.setAttribute(n, "data-col-index", `${i}`), this.domService.setAttribute(n, "data-area", `${r}`), t)
       if (o) {
-        const n = this.domService.createText(t);
-        this.domService.appendChild(l, n);
+        const l = this.domService.createText(t);
+        this.domService.appendChild(n, l);
       } else {
-        const n = this.domService.createElement("div");
-        this.domService.appendChild(l, n);
+        const l = this.domService.createElement("div");
+        this.domService.appendChild(n, l);
         const d = this.domService.createText(t);
-        this.domService.addClass(n, "ge-table-label"), this.domService.appendChild(n, d), this.domService.setAttribute(n, "data-row-index", `${s}`), this.domService.setAttribute(n, "data-col-index", `${i}`), this.domService.setAttribute(n, "data-area", `${r}`);
+        this.domService.addClass(l, "ge-table-label"), this.domService.appendChild(l, d), this.domService.setAttribute(l, "data-row-index", `${s}`), this.domService.setAttribute(l, "data-col-index", `${i}`), this.domService.setAttribute(l, "data-area", `${r}`);
       }
-    return this.domService.appendChild(e, l), l;
+    return this.domService.appendChild(e, n), n;
   }
-  addSortedIcon(e, t = "", o = new be(), s = -1) {
+  addSortedIcon(e, t = "", o = new pe(), s = -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", `${s}`), this.domService.setAttribute(i, "data-area", "header");
     let r;
     t === "asc" ? r = o.iconAsc : t === "desc" ? r = o.iconDesc : r = o.iconPlaceholder;
-    const l = r.content, n = this.domService.createText(l);
-    this.domService.appendChild(i, n), r.style && this.applyStyleString(i, r.style);
+    const n = r.content, l = this.domService.createText(n);
+    this.domService.appendChild(i, l), r.style && this.applyStyleString(i, r.style);
     for (const d of r.classes)
       this.domService.addClass(i, d);
     return this.domService.appendChild(e, i), i;
   }
   addArrowDiv(e, t = "none", o = new ge(), s = -1, i = -1, r = "body") {
-    const l = this.domService.createElement("div");
-    this.domService.addClass(l, "ge-table-tree-arrow-div"), this.domService.setStyle(l, "display", "inline-block"), this.domService.setStyle(l, "position", ""), this.domService.setStyle(l, "width", "20px"), this.domService.setStyle(l, "background", "transparent"), this.domService.setStyle(l, "cursor", "pointer"), this.domService.setAttribute(l, "data-row-index", `${s}`), this.domService.setAttribute(l, "data-col-index", `${i}`), this.domService.setAttribute(l, "data-area", `${r}`);
-    let n;
-    t === "expanded" ? n = o.arrowExpanded : t === "collapsed" ? n = o.arrowCollapsed : n = o.arrowPlaceholder;
-    const d = n.content, a = this.domService.createText(d);
-    this.domService.appendChild(l, a), n.style && this.applyStyleString(l, n.style);
-    for (const c of n.classes)
-      this.domService.addClass(l, c);
-    return this.domService.appendChild(e, l), l;
+    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", `${s}`), this.domService.setAttribute(n, "data-col-index", `${i}`), this.domService.setAttribute(n, "data-area", `${r}`);
+    let l;
+    t === "expanded" ? l = o.arrowExpanded : t === "collapsed" ? l = o.arrowCollapsed : l = o.arrowPlaceholder;
+    const d = l.content, a = this.domService.createText(d);
+    this.domService.appendChild(n, a), l.style && this.applyStyleString(n, l.style);
+    for (const h of l.classes)
+      this.domService.addClass(n, h);
+    return this.domService.appendChild(e, n), n;
   }
   addColumnBorderDivs(e, t, o, s, i) {
     if (e.verticalBorderVisible) {
@@ -265,8 +265,8 @@ class xe {
     return o ? (o.innerText = "", o) : (o = this.domService.createElement("div"), t.cache[e] = o, o);
   }
 }
-const U = (h) => h === "header" ? "header" : h === "footer" ? "footer" : "body";
-class ye {
+const U = (c) => c === "header" ? "header" : c === "footer" ? "footer" : "body";
+class ve {
   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"));
@@ -278,7 +278,7 @@ class ye {
     }
   }
 }
-class Ce {
+class Re {
   constructor(e) {
     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))
@@ -308,12 +308,14 @@ class Ce {
     if (t - this.lastClicked < this.doubleClickDelay)
       return;
     this.lastClicked = t;
-    const o = new ye(e.target, this.tableScope);
+    const o = new ve(e.target, this.tableScope);
     if (o.action === "toggleExpandCollapseAll")
       this.expandedAll = !this.expandedAll, this.tableScope.toggleExpandCollapseAll(this.expandedAll), e.preventDefault(), e.stopPropagation();
+    else if (o.action === "toggleHeaderGroup")
+      this.tableScope.toggleHeaderGroup(o), e.preventDefault(), e.stopPropagation();
     else if (o.inputType === "checkbox" && o.areaIdent)
       this.tableScope.toggleRowCheckbox(o.rowIdx, o.colIdx, o.areaIdent), e.preventDefault(), e.stopPropagation();
-    else if (O(o.row) && o.areaModel) {
+    else if (L(o.row) && o.areaModel) {
       const s = o.colIdx === this.getArrowColumnIndex() && e.altKey, i = o.className.includes("ge-table-tree-arrow-div");
       if (console.info(i, s), s || i) {
         e.preventDefault(), e.stopPropagation();
@@ -335,15 +337,15 @@ class Ce {
    */
   onHostElementDblClicked(e) {
     if (this.lastClicked = Date.now(), e.target instanceof HTMLElement) {
-      const t = e.target, o = t.getAttribute("data-area"), s = U(o), i = Number(t.getAttribute("data-row-index")), r = Number(t.getAttribute("data-col-index")), l = this.tableScope.tableModel.getAreaModel(s);
+      const t = e.target, o = t.getAttribute("data-area"), s = U(o), i = Number(t.getAttribute("data-row-index")), r = Number(t.getAttribute("data-col-index")), n = this.tableScope.tableModel.getAreaModel(s);
       if (o && s === "header")
         this.tableScope.tableModel.isSortable(r) && (this.tableScope.clearSelection(), this.tableScope.onHeaderDblClicked(e, i, r));
       else if (t.getAttribute("data-row-index")) {
-        const n = l.getRowByIndex(i);
-        if (o && s === "body" && l.isEditable(i, r) && (this.tableScope.clearSelection(), this.tableScope.initRenderEditor(i, r)), O(n) && r === this.getArrowColumnIndex()) {
+        const l = n.getRowByIndex(i);
+        if (o && s === "body" && n.isEditable(i, r) && (this.tableScope.clearSelection(), this.tableScope.initRenderEditor(i, r)), L(l) && r === this.getArrowColumnIndex()) {
           e.preventDefault(), e.stopPropagation();
-          const d = n;
-          d.expanded = !d.expanded, "recalcVisibleTreeRows" in l && l.recalcVisibleTreeRows(), this.tableScope.tableModel.recalcSize(this.tableScope.hostElement.clientWidth), this.tableScope.adjustContainersAndRows(), this.updateCollapsedExpandedState(d);
+          const d = l;
+          d.expanded = !d.expanded, "recalcVisibleTreeRows" in n && n.recalcVisibleTreeRows(), this.tableScope.tableModel.recalcSize(this.tableScope.hostElement.clientWidth), this.tableScope.adjustContainersAndRows(), this.updateCollapsedExpandedState(d);
         }
       }
     }
@@ -368,30 +370,30 @@ class Ce {
    * @returns {void}
    */
   updateCollapsedExpandedState(e) {
-    var o, s, i, r, l;
+    var o, s, i, r, n;
     const t = (s = (o = this.tableScope.tableOptions) == null ? void 0 : o.autoRestoreOptions) == null ? void 0 : s.getRowId;
     if (t) {
-      const n = (i = this.tableScope.storeStateCollapsedExpandService) == null ? void 0 : i.collapsedExpandedStateGet().mode, d = n === "collapsed" && !e.expanded || n === "expanded" && e.expanded, a = n === "collapsed" && e.expanded || n === "expanded" && !e.expanded, c = t(e.data);
-      d ? (r = this.tableScope.storeStateCollapsedExpandService) == null || r.collapsedStateIdsPush(c) : a && ((l = this.tableScope.storeStateCollapsedExpandService) == null || l.collapsedStateIdsRemove(c));
+      const l = (i = this.tableScope.storeStateCollapsedExpandService) == null ? void 0 : i.collapsedExpandedStateGet().mode, d = l === "collapsed" && !e.expanded || l === "expanded" && e.expanded, a = l === "collapsed" && e.expanded || l === "expanded" && !e.expanded, h = t(e.data);
+      d ? (r = this.tableScope.storeStateCollapsedExpandService) == null || r.collapsedStateIdsPush(h) : a && ((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() {
@@ -408,7 +410,7 @@ class Ce {
     }
   }
 }
-class ve {
+class Ae {
   constructor(e) {
     this.tableScope = e;
   }
@@ -552,6 +554,18 @@ class ve {
   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()
+    );
+  }
 }
 class q {
   constructor(e) {
@@ -628,7 +642,7 @@ class q {
   //   }
   // }
 }
-class Re extends q {
+class Me extends q {
   constructor(e) {
     super(e), this.SCROLL_STATE = "scrollState", this.scrollOffset = [0, 0], this.load();
   }
@@ -650,14 +664,14 @@ class Re extends q {
     }
   }
 }
-class Ae {
+class Ee {
   constructor(e = "collapsed", t = [], o = !1, s = !1) {
     this.mode = e, this.rowIds = t, this.allCollapsed = o, this.allExpanded = s;
   }
 }
-class Ee extends q {
+class Ie extends q {
   constructor(e) {
-    super(e), this.COLLAPSED_EXPANDED_STATE = "collapsedExpandedState", this.collapsedExpandedState = new Ae(), this.load();
+    super(e), this.COLLAPSED_EXPANDED_STATE = "collapsedExpandedState", this.collapsedExpandedState = new Ee(), this.load();
   }
   collapsedExpandedStateGet() {
     return this.collapsedExpandedState;
@@ -689,7 +703,7 @@ class Ee extends q {
     this.checkAndPersistItem(this.COLLAPSED_EXPANDED_STATE, this.collapsedExpandedState);
   }
 }
-class Me extends q {
+class ke extends q {
   constructor(e) {
     super(e), this.SORTING_STATE = "sortingState", this.sortItems = [], this.load();
   }
@@ -716,7 +730,7 @@ class $ {
     this.left = e, this.width = t, this.height = o, this.top = s, this.index = i;
   }
 }
-class ke {
+class Te {
   constructor(e, t, o, s) {
     this.hostElement = e, this.tableModel = t, this.dom = o, this.tableOptions = s, this.scrollTop = 0, this.areaBodyWestGeo = new $(), this.areaBodyCenterGeo = new $(), this.areaBodyEastGeo = new $();
     const i = this.hostElement;
@@ -728,6 +742,8 @@ class ke {
       o.createDivWithClass("ge-table-hover-row", i)
     ), this.hoverColumn = o.applyStylePosistionAbsolute(
       o.createDivWithClass("ge-table-hover-column", i)
+    ), this.draggingColumn = o.applyStylePosistionAbsolute(
+      o.createDivWithClass("ge-table-dragging-column", i)
     ), this.areaHeaderWest = o.appendRelativeChildDiv(
       o.applyStylePosistionAbsolute(
         o.createAreaDivWithClass("ge-table-header ge-table-header-west", i, "header", "west")
@@ -867,7 +883,7 @@ class ke {
     this.dom.setStyle(this.contentWrapperDiv, "width", e), this.dom.setStyle(this.contentWrapperDiv, "height", t);
   }
 }
-class v {
+class R {
   /**
    * Represents a constructor for a class.
    * @constructor
@@ -881,7 +897,7 @@ class v {
     this.r1 = e, this.c1 = t, this.r2 = o, this.c2 = s, this.gammaRange = i;
   }
   static create(e) {
-    return e.gammaRange === void 0 && (e.gammaRange = !1), new v(
+    return e.gammaRange === void 0 && (e.gammaRange = !1), new R(
       e.rowIndex1,
       e.columnIndex1,
       e.rowIndex2,
@@ -890,19 +906,19 @@ class v {
     );
   }
   static singleCell(e, t) {
-    return new v(e, t, e, t);
+    return new R(e, t, e, t);
   }
   static singleRow(e) {
-    return new v(e, 0, e, Number.MAX_SAFE_INTEGER);
+    return new R(e, 0, e, Number.MAX_SAFE_INTEGER);
   }
   static singleColumn(e) {
-    return new v(0, e, Number.MAX_SAFE_INTEGER, e);
+    return new R(0, e, Number.MAX_SAFE_INTEGER, e);
   }
   isInRange(e, t) {
     return e >= this.r1 && e <= this.r2 && t >= this.c1 && t <= this.c2;
   }
 }
-class Ie {
+class De {
   constructor(e, t) {
     this.tableModel = e, this.areaModel = t, this.colAndRowspanRanges = void 0;
   }
@@ -916,9 +932,9 @@ class Ie {
         let i = this.areaModel.getColspanAt(o, s), r = this.areaModel.getRowspanAt(o, s);
         if (i > 1 || r > 1) {
           i === 0 && (i = 1), r === 0 && (r = 1);
-          const l = this.areaModel.hasOwnProperty("gammaCells");
+          const n = "gammaCells" in this.areaModel;
           this.colAndRowspanRanges.push(
-            new v(o, s, o + r - 1, s + i - 1, l)
+            new R(o, s, o + r - 1, s + i - 1, n)
           );
         }
       }
@@ -940,17 +956,17 @@ class T {
     this.header = e, this.body = t, this.footer = o;
   }
 }
-class Te extends ke {
+class _e extends Te {
   constructor(e, t, o, s) {
-    var r, l;
-    super(e, t, o, s), this.scrollLeft = 0, this.scrollViewportLeft = 0, this.scrollFactorY = 0, this.scrollFactorX = 0, this.cleanupFunctions = {
+    var r, n;
+    super(e, t, o, s), 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 T(), 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), (l = this.tableOptions) != null && l.getFocusModel && (this.getFocusModel = this.tableOptions.getFocusModel), z(t.getAreaModel("body")) && (this.tree = !0), ["header", "body", "footer"].forEach(
-      (n) => {
+    }, this.tree = !1, this.colAndRowspanModels = new T(), this.firstVisibleRowIndex = -1, this.draggingTargetColumnIndex = -1, this.removables = [], 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), z(t.getAreaModel("body")) && (this.tree = !0), ["header", "body", "footer"].forEach(
+      (l) => {
         var d;
-        this.colAndRowspanModels[n] = new Ie(t, t.getAreaModel(n)), (d = this.colAndRowspanModels[n]) == null || d.init();
+        this.colAndRowspanModels[l] = new De(t, t.getAreaModel(l)), (d = this.colAndRowspanModels[l]) == null || d.init();
       }
     );
   }
@@ -1020,6 +1036,10 @@ class Te extends ke {
       }
     ), t && this.repaint();
   }
+  storeColumnWidths() {
+    const e = this.tableModel.getColumnDefs();
+    e != null && e.length && (this.storedColumnWidths = e.map((t, o) => this.tableModel.getColumnWidth(o)));
+  }
   getAreaAndSideIdentByAttr(e) {
     if (e) {
       const t = this.getStringByAttr(e, "data-area"), o = this.getStringByAttr(e, "data-side");
@@ -1079,84 +1099,84 @@ class Te extends ke {
     var g;
     const o = this.getArea(e, "west"), s = this.getArea(e, "center"), i = this.getArea(e, "east"), r = s.child.clientHeight;
     o.child.innerText = "", s.child.innerText = "", i.child.innerText = "";
-    const l = 0, n = this.areaBodyCenterGeo.width, d = this.tableModel.getPadding(), a = this.tableModel.getAreaModel(e), c = a.getRowCount();
+    const n = 0, l = this.areaBodyCenterGeo.width, d = this.tableModel.getPadding(), a = this.tableModel.getAreaModel(e), h = a.getRowCount();
     for (; this.cleanupFunctions[e].length; ) {
       const p = this.cleanupFunctions[e].shift();
       p && p();
     }
     let u = t;
-    const m = this.tableModel.getColumnCount(), b = this.tableModel.getFixedRightColumnCount(), S = this.tableModel.getFixedLeftColumnCount();
-    for (let p = 0; p < c; p++) {
-      const A = u, C = p === c - 1, R = this.tableModel.getRowHeight(e, p);
-      if (A + R > 0) {
+    const w = this.tableModel.getColumnCount(), f = this.tableModel.getFixedRightColumnCount(), b = this.tableModel.getFixedLeftColumnCount();
+    for (let p = 0; p < h; p++) {
+      const C = u, v = p === h - 1, A = this.tableModel.getRowHeight(e, p);
+      if (C + A > 0) {
         this.firstVisibleRowIndex = p;
-        let x = { left: l, width: n, height: R, top: A, index: p }, y = this.dom.addRowDiv(s, x, p, e, "center");
-        const E = S;
+        let y = { left: n, width: l, height: A, top: C, index: p }, S = this.dom.addRowDiv(s, y, p, e, "center");
+        const k = b;
         if (this.adjustColumnsToRowParent({
           areaIdent: e,
           sideIdent: "center",
           areaModel: a,
-          geo: x,
-          parent: y,
+          geo: y,
+          parent: S,
           rowIndex: p,
-          columnIndexStart: E,
-          columnIndexEnd: m - b - 1,
+          columnIndexStart: k,
+          columnIndexEnd: w - f - 1,
           verticalFixed: !1,
-          lastRowOfModel: C
-        }), d.left > 0 && (x = { left: l, width: this.areaBodyWestGeo.width, height: R, top: A, index: p }, y = this.dom.addRowDiv(o, x, p, e, "west"), this.adjustColumnsToRowParent({
+          lastRowOfModel: v
+        }), d.left > 0 && (y = { left: n, width: this.areaBodyWestGeo.width, height: A, top: C, index: p }, S = this.dom.addRowDiv(o, y, p, e, "west"), this.adjustColumnsToRowParent({
           areaIdent: e,
           sideIdent: "west",
           areaModel: a,
-          geo: x,
-          parent: y,
+          geo: y,
+          parent: S,
           rowIndex: p,
           columnIndexStart: 0,
-          columnIndexEnd: E - 1,
+          columnIndexEnd: k - 1,
           verticalFixed: !0,
-          lastRowOfModel: C
-        })), d.right > 0 && (x = { left: l, width: this.areaBodyEastGeo.width, height: R, top: A, index: p }, y = this.dom.addRowDiv(i, x, p, e, "east"), this.adjustColumnsToRowParent({
+          lastRowOfModel: v
+        })), d.right > 0 && (y = { left: n, width: this.areaBodyEastGeo.width, height: A, top: C, index: p }, S = this.dom.addRowDiv(i, y, p, e, "east"), this.adjustColumnsToRowParent({
           areaIdent: e,
           sideIdent: "east",
           areaModel: a,
-          geo: x,
-          parent: y,
+          geo: y,
+          parent: S,
           rowIndex: p,
-          columnIndexStart: m - b,
-          columnIndexEnd: m - 1,
+          columnIndexStart: w - f,
+          columnIndexEnd: w - 1,
           verticalFixed: !0,
-          lastRowOfModel: C
-        })), e === "header" && this.tree && p === c - 1) {
+          lastRowOfModel: v
+        })), e === "header" && this.tree && p === h - 1) {
           const M = this.dom.applyStyle(
             this.dom.setAttribute(
-              this.dom.addDiv(y, new $(16, 20, 20, 8)),
+              this.dom.addDiv(S, new $(16, 20, 20, 8)),
               "data-ge-action",
               "toggleExpandCollapseAll"
             ),
             { cursor: "pointer" }
-          ), k = this.tableOptions.treeOptions.arrowExpandCollapseAll;
-          if (k) {
-            const H = this.dom.domService.createText(k.content);
-            this.dom.domService.appendChild(M, H), k.style && this.dom.applyStyleString(M, k.style);
+          ), E = this.tableOptions.treeOptions.arrowExpandCollapseAll;
+          if (E) {
+            const B = this.dom.domService.createText(E.content);
+            this.dom.domService.appendChild(M, B), E.style && this.dom.applyStyleString(M, E.style);
           }
         }
       }
-      if (u = u + R, u > r)
+      if (u = u + A, u > r)
         break;
     }
     if (this.colAndRowspanModels && this.colAndRowspanModels[e]) {
       const p = ((g = this.colAndRowspanModels[e]) == null ? void 0 : g.getRanges()) ?? [];
       if (p.length)
-        for (const A of p) {
-          let C = 0, R = s.child, x = "center";
-          if (A.c1 < S)
-            R = o.child, x = "west";
-          else if (b > 0 && A.c1 >= m - b)
-            R = i.child, x = "east";
+        for (const C of p) {
+          let v = 0, A = s.child, y = "center";
+          if (C.c1 < b)
+            A = o.child, y = "west";
+          else if (f > 0 && C.c1 >= w - f)
+            A = i.child, y = "east";
           else {
-            const y = this.areaBodyCenterGeo.width - this.tableModel.getContentWidthInPixel();
-            C = this.scrollFactorX * y - this.areaBodyWestGeo.width, x = "center";
+            const S = this.areaBodyCenterGeo.width - this.tableModel.getContentWidthInPixel();
+            v = this.scrollFactorX * S - this.areaBodyWestGeo.width, y = "center";
           }
-          this.drawBigCell(A, C, t, a, R, x);
+          this.drawBigCell(C, v, t, a, A, y);
         }
     }
   }
@@ -1171,46 +1191,46 @@ class Te extends ke {
    * @protected
    */
   drawBigCell(e, t, o, s, i, r) {
-    const l = o + this.getRowHeights(0, e.r1 - 1, s).reduce((g, p) => g + p, 0), n = this.tableModel.getColumnCount(), d = this.tableModel.getFixedRightColumnCount();
+    const n = o + this.getRowHeights(0, e.r1 - 1, s).reduce((g, p) => g + p, 0), l = this.tableModel.getColumnCount(), d = this.tableModel.getFixedRightColumnCount();
     let a = 0;
-    d > 0 && e.c1 >= n - d && (a = n - d);
-    const c = t + this.getColumnWidths(a, e.c1 - 1).reduce((g, p) => g + p, 0), u = this.getRowHeights(e.r1, e.r2, s).reduce((g, p) => g + p, 0), m = this.getColumnWidths(e.c1, e.c2).reduce((g, p) => g + p, 0);
-    let b = !1;
-    const S = this.getSelectionModel ? this.getSelectionModel() : void 0;
-    S && (b = S.getSelectionCount(e.r1, e.c1) > 0), e.gammaRange ? (console.info("TODO here", e), this.renderCell({
+    d > 0 && e.c1 >= l - d && (a = l - d);
+    const h = t + this.getColumnWidths(a, e.c1 - 1).reduce((g, p) => g + p, 0), u = this.getRowHeights(e.r1, e.r2, s).reduce((g, p) => g + p, 0), w = this.getColumnWidths(e.c1, e.c2).reduce((g, p) => g + p, 0);
+    let f = !1;
+    const b = this.getSelectionModel ? this.getSelectionModel() : void 0;
+    b && (f = b.getSelectionCount(e.r1, e.c1) > 0), e.gammaRange ? this.renderCell({
       areaModel: s,
       areaIdent: s.areaIdent,
       sideIdent: r,
       rowIndex: e.r1,
       columnIndex: e.c1,
-      left: c,
-      top: l,
-      width: m,
+      left: h,
+      top: n,
+      width: w,
       height: u,
       parent: i,
-      cellSelected: b,
+      cellSelected: f,
       lastRowOfModel: !0,
       gammaRange: e.gammaRange
-    })) : this.renderCell({
+    }) : this.renderCell({
       areaModel: s,
       areaIdent: s.areaIdent,
       sideIdent: r,
       rowIndex: e.r1,
       columnIndex: e.c1,
-      left: c,
-      top: l,
-      width: m,
+      left: h,
+      top: n,
+      width: w,
       height: u,
       parent: i,
-      cellSelected: b,
+      cellSelected: f,
       lastRowOfModel: !0,
       gammaRange: e.gammaRange
     }), s.areaIdent === "header" && this.tableOptions.columnsResizable && this.renderHeaderCellResizeHandle({
       rowIndex: e.r1,
       columnIndex: e.c1,
-      cellLeft: c,
-      cellTop: l,
-      cellWidth: m,
+      cellLeft: h,
+      cellTop: n,
+      cellWidth: w,
       cellHeight: u,
       parent: i
     });
@@ -1233,36 +1253,36 @@ class Te extends ke {
     geo: s,
     parent: i,
     rowIndex: r,
-    columnIndexStart: l,
-    columnIndexEnd: n,
+    columnIndexStart: n,
+    columnIndexEnd: l,
     verticalFixed: d = !1,
     lastRowOfModel: a = !1
   }) {
-    var S;
+    var b;
     this.scrollViewportLeft = this.scrollViewport.scrollLeft;
-    let c = 0;
+    let h = 0;
     if (!d) {
       const g = this.areaBodyCenterGeo.width - this.tableModel.getContentWidthInPixel();
-      c = this.scrollFactorX * g;
+      h = this.scrollFactorX * g;
     }
-    const u = 0, m = !!(e === "body" && t);
-    let b = c;
-    for (let g = l; g <= n; g++) {
-      const p = b, A = this.tableModel.getColumnWidth(g);
-      if (A > 0 && p + A > 0) {
-        let C = s.height;
-        const R = o.getRowspanAt(r, g), x = o.getColspanAt(r, g);
-        R > 1 && (C = this.getRowHeights(r, r + R - 1, o).reduce((M, k) => M + k, 0));
-        let y = A;
-        x > 1 && (y = this.getColumnWidths(g, g + x - 1).reduce((M, k) => M + k, 0));
-        let E = !1;
-        if (this.colAndRowspanModels && this.colAndRowspanModels[e] && (S = this.colAndRowspanModels[e]) != null && S.isInRange(r, g) && (E = !0), this.draggingTargetColumnIndex === g && e !== "header") {
-          this.renderDragTargetDiv(i, p, u, y, C);
-          const M = { left: p, top: u, width: y, height: C };
+    const u = 0, w = !!(e === "body" && t);
+    let f = h;
+    for (let g = n; g <= l; g++) {
+      const p = f, C = this.tableModel.getColumnWidth(g);
+      if (C > 0 && p + C > 0) {
+        let v = s.height;
+        const A = o.getRowspanAt(r, g), y = o.getColspanAt(r, g);
+        A > 1 && (v = this.getRowHeights(r, r + A - 1, o).reduce((M, E) => M + E, 0));
+        let S = C;
+        y > 1 && (S = this.getColumnWidths(g, g + y - 1).reduce((M, E) => M + E, 0));
+        let k = !1;
+        if (this.colAndRowspanModels && this.colAndRowspanModels[e] && (b = this.colAndRowspanModels[e]) != null && b.isInRange(r, g) && (k = !0), this.draggingTargetColumnIndex === g && e !== "header") {
+          this.renderDragTargetDiv(i, p, u, S, v);
+          const M = { left: p, top: u, width: S, height: v };
           this.dom.addColumnBorderDivs(this.tableOptions, i, M, e, t);
         } else {
-          const M = this.renderSelectedBackgroundDiv(E, m, t, o, r, g, i, p, u, y, C);
-          E || this.renderCell({
+          const M = this.renderSelectedBackgroundDiv(k, w, t, o, r, g, i, p, u, S, v);
+          "gammaCells" in o && o.getValueAt(r, g) && (k = !1), k || this.renderCell({
             areaModel: o,
             areaIdent: e,
             sideIdent: t,
@@ -1270,8 +1290,8 @@ class Te extends ke {
             columnIndex: g,
             left: p,
             top: u,
-            width: y,
-            height: C,
+            width: S,
+            height: v,
             parent: i,
             cellSelected: M,
             lastRowOfModel: a,
@@ -1281,16 +1301,16 @@ class Te extends ke {
             columnIndex: g,
             cellLeft: p,
             cellTop: u,
-            cellWidth: y,
-            cellHeight: C,
+            cellWidth: S,
+            cellHeight: v,
             parent: i
           });
         }
       }
-      if (b = b + A, b > this.areaBodyCenterGeo.width)
+      if (f = f + C, f > this.areaBodyCenterGeo.width)
         break;
     }
-    this.tableOptions.verticalBorderVisible && this.dom.addVerticalBorder(new $(b - 1, 1, s.height, 0), i);
+    this.tableOptions.verticalBorderVisible && this.dom.addVerticalBorder(new $(f - 1, 1, s.height, 0), i);
   }
   getTreeArrowColumnIndex() {
     return this.tableOptions.showCheckboxWihoutExtraColumn ? 0 : this.tableModel.isRowCheckboxVisible() ? 1 : 0;
@@ -1302,54 +1322,55 @@ class Te extends ke {
     rowIndex: s,
     index: i,
     left: r,
-    width: l,
-    height: n,
+    width: n,
+    height: l,
     top: d,
     parent: a,
-    lastRowOfModel: c,
-    gammaRange: u
+    lastRowOfModel: h
   }) {
     var te;
-    const b = this.editorRenderer && this.editorRendererRow === s && this.editorRendererColumn === i ? this.editorRenderer : e.getCellRenderer(s, i), S = { left: r, width: l, height: n, top: d, index: i }, g = e.getRowByIndex(s);
-    let p = "none";
-    if (i === this.getTreeArrowColumnIndex() && O(g)) {
-      const w = g;
-      (te = w.children) != null && te.length ? w.expanded ? p = "expanded" : p = "collapsed" : p = "hidden";
+    const w = this.editorRenderer && this.editorRendererRow === s && this.editorRendererColumn === i ? this.editorRenderer : e.getCellRenderer(s, i), f = { left: r, width: n, height: l, top: d, index: i }, b = e.getRowByIndex(s);
+    let g = "none";
+    if (i === this.getTreeArrowColumnIndex() && L(b)) {
+      const x = b;
+      (te = x.children) != null && te.length ? x.expanded ? g = "expanded" : g = "collapsed" : g = "hidden";
     }
     let C;
     if (t === "header") {
-      const w = this.tableModel.getColumnDef(i);
-      (!(w != null && w.sortIconVisible) || w != null && w.sortIconVisible()) && (C = w == null ? void 0 : w.sortState);
+      const x = this.tableModel.getColumnDef(i);
+      (!(x != null && x.sortIconVisible) || x != null && x.sortIconVisible()) && (C = x == null ? void 0 : x.sortState);
     }
-    const R = e.getValueAt(s, i), x = b ? "" : `${R}`, y = e.isRowChecked(s), E = this.dom.addColumnDiv(
-      a,
-      S,
-      s,
-      i,
-      t,
-      o,
-      x,
-      p,
-      this.tableOptions,
-      y,
-      C
-    ), M = e.getTooltipAt(s, i);
-    M && this.dom.setAttribute(E, "title", M);
-    const k = this.tableModel.getColumnDef(i);
-    k && k.classes[t] && this.dom.addClasses(k.classes[t], E);
-    let H;
-    b && (H = b.render(E, s, i, t, e, R, this.dom.domService));
-    const ee = e.getCustomClassesAt(s, i);
-    if (ee.length && this.dom.addClasses(ee, E), this.dom.addColumnBorderDivs(this.tableOptions, a, S, t, o), c && this.dom.addHorizontalBorder({ left: r, width: l, height: n, top: d + n }, a), this.getFocusModel && t === "body") {
-      const w = this.getFocusModel();
-      w != null && w.hasFocus(s, i) && this.dom.addFocusBorderDivs(a, S, {});
+    const v = e.getValueAt(s, i), A = w ? "" : `${v}`, y = e.isRowChecked(s), S = this.dom.addColumnDiv(
+      {
+        parent: a,
+        geo: f,
+        rowIndex: s,
+        columnIndex: i,
+        areaIdent: t,
+        sideIdent: o,
+        text: A,
+        treeArrow: g,
+        tableOptions: this.tableOptions,
+        checkedType: y,
+        sortState: C
+      }
+    ), k = e.getTooltipAt(s, i);
+    k && this.dom.setAttribute(S, "title", k);
+    const M = this.tableModel.getColumnDef(i);
+    M && M.classes[t] && this.dom.addClasses(M.classes[t], S);
+    let E;
+    w && (E = w.render(S, s, i, t, e, v, this.dom.domService));
+    const B = e.getCustomClassesAt(s, i);
+    if (B.length && this.dom.addClasses(B, S), this.dom.addColumnBorderDivs(this.tableOptions, a, f, t, o), h && this.dom.addHorizontalBorder({ left: r, width: n, height: l, top: d + l }, a), this.getFocusModel && t === "body") {
+      const x = this.getFocusModel();
+      x != null && x.hasFocus(s, i) && this.dom.addFocusBorderDivs(a, f, {});
     }
-    t === "header" && this.dom.setAttribute(E, "data-ge-action", "drag-column");
+    t === "header" && this.dom.setAttribute(S, "data-ge-action", "drag-column");
     const G = e.getCustomStyleAt(s, i);
     if (G)
-      for (const w in G)
-        this.dom.setStyle(E, w, G[w]);
-    return [E, H];
+      for (const x in G)
+        this.dom.setStyle(S, x, G[x]);
+    return [S, E];
   }
   applyCssClasses(e, t = {}) {
     e && Object.entries(t).forEach(([o, s]) => {
@@ -1357,22 +1378,22 @@ class Te extends ke {
     });
   }
   rerenderCellContent({ area: e, rowIndex: t, columnIndex: o, value: s, cssClasses: i }) {
-    const r = this.tableModel.getAreaModel(e), l = 'div[data-col-index="' + o + '"][data-row-index="' + t + '"][data-area="' + e + '"]', n = document.querySelector(l);
-    if (n) {
+    const r = this.tableModel.getAreaModel(e), n = 'div[data-col-index="' + o + '"][data-row-index="' + t + '"][data-area="' + e + '"]', l = document.querySelector(n);
+    if (l) {
       let d;
-      const c = this.editorRenderer && this.editorRendererRow === t && this.editorRendererColumn === o ? this.editorRenderer : r.getCellRenderer(t, o);
-      if (n.innerText = "", this.applyCssClasses(n, i), c)
-        d = c.render(n, t, o, e, r, s, this.dom.domService), d && this.cleanupFunctions[e].push(d);
+      const h = this.editorRenderer && this.editorRendererRow === t && this.editorRendererColumn === o ? this.editorRenderer : r.getCellRenderer(t, o);
+      if (l.innerText = "", this.applyCssClasses(l, i), h)
+        d = h.render(l, t, o, e, r, s, this.dom.domService), d && this.cleanupFunctions[e].push(d);
       else {
-        const b = `${s}`;
-        this.dom.addLabelDiv(n, b, !1, t, o, e);
+        const f = `${s}`;
+        this.dom.addLabelDiv(l, f, !1, t, o, e);
       }
       const u = r.getCustomClassesAt(t, o);
-      u.length && this.dom.addClasses(u, n);
-      const m = r.getCustomStyleAt(t, o);
-      if (m)
-        for (const b in m)
-          this.dom.setStyle(n, b, m[b]);
+      u.length && this.dom.addClasses(u, l);
+      const w = r.getCustomStyleAt(t, o);
+      if (w)
+        for (const f in w)
+          this.dom.setStyle(l, f, w[f]);
     }
   }
   getColumnWidths(e, t) {
@@ -1426,25 +1447,48 @@ class Te extends ke {
   debounce(e, t = 1e3) {
     this.debounceTimeout && clearTimeout(this.debounceTimeout), this.debounceTimeout = setTimeout(e.bind(this), t);
   }
+  adjustDraggingColumn(e, t) {
+    var o, s;
+    if (this.dragging) {
+      const i = this.hostElement.clientHeight, r = this.tableModel.getColumnWidth(t);
+      if ((o = e.originalEvent) != null && o.clientX) {
+        const n = ((s = e.originalEvent) == null ? void 0 : s.clientX) - r / 2;
+        this.dom.applyStyle(this.draggingColumn, {
+          background: "rgba(128,128,128,0.2)",
+          left: n + "px",
+          top: "0px",
+          width: r + "px",
+          height: i + "px",
+          display: "block"
+        });
+      }
+    } else
+      this.hideDraggingColumn();
+  }
+  hideDraggingColumn() {
+    this.dom.applyStyle(this.draggingColumn, {
+      display: "none"
+    });
+  }
   renderDragTargetDiv(e, t, o, s, i) {
     const r = this.dom.applyStylePosistionAbsolute(
       this.dom.createDivWithClass("ge-table-drop-zone", e)
     );
     return this.dom.setStyle(r, "left", `${t}px`), this.dom.setStyle(r, "top", `${o}px`), this.dom.setStyle(r, "width", `${s}px`), this.dom.setStyle(r, "height", `${i}px`), r;
   }
-  renderSelectedBackgroundDiv(e, t, o, s, i, r, l, n, d, a, c) {
+  renderSelectedBackgroundDiv(e, t, o, s, i, r, n, l, d, a, h) {
     let u = !1;
     if (!e && t && s.isSelectable(i, r) && this.getSelectionModel) {
-      const m = this.getSelectionModel();
-      if (m) {
-        const b = m.getSelectionCount(i, r);
-        u = b > 0;
-        for (let S = 0; S < b; S++) {
+      const w = this.getSelectionModel();
+      if (w) {
+        const f = w.getSelectionCount(i, r);
+        u = f > 0;
+        for (let b = 0; b < f; b++) {
           const g = this.dom.applyStylePosistionAbsolute(
             // ge-table-body-west-selected-range
-            this.dom.createDivWithClass(`ge-table-${s.areaIdent}-${o}-selected-range`, l)
+            this.dom.createDivWithClass(`ge-table-${s.areaIdent}-${o}-selected-range`, n)
           );
-          this.dom.setStyle(g, "left", `${n}px`), this.dom.setStyle(g, "top", `${d}px`), this.dom.setStyle(g, "width", `${a}px`), this.dom.setStyle(g, "height", `${c}px`);
+          this.dom.setStyle(g, "left", `${l}px`), this.dom.setStyle(g, "top", `${d}px`), this.dom.setStyle(g, "width", `${a}px`), this.dom.setStyle(g, "height", `${h}px`);
         }
       }
     }
@@ -1457,41 +1501,39 @@ class Te extends ke {
     rowIndex: s,
     columnIndex: i,
     left: r,
-    top: l,
-    width: n,
+    top: n,
+    width: l,
     height: d,
     parent: a,
-    cellSelected: c,
-    lastRowOfModel: u,
-    gammaRange: m
+    cellSelected: h,
+    lastRowOfModel: u
   }) {
-    const [b, S] = this.addAndRenderCellDiv({
+    const [w, f] = this.addAndRenderCellDiv({
       areaModel: e,
       areaIdent: t,
       sideIdent: o,
       rowIndex: s,
       index: i,
       left: r,
-      width: n,
+      width: l,
       height: d,
-      top: l,
+      top: n,
       parent: a,
-      lastRowOfModel: u,
-      gammaRange: m
+      lastRowOfModel: u
     });
-    c && this.dom.addClass(`ge-table-${t}-${o}-selected-range`, b), S && this.cleanupFunctions[t].push(S);
+    h && this.dom.addClass(`ge-table-${t}-${o}-selected-range`, w), f && this.cleanupFunctions[t].push(f);
   }
-  renderHeaderCellResizeHandle({ rowIndex: e, columnIndex: t, cellLeft: o, cellTop: s, cellWidth: i, cellHeight: r, parent: l }) {
-    const n = this.dom.domService, d = this.tableOptions.columnResizeHandleWidthInPx ?? 2, a = n.createElement("div");
-    n.setAttribute(a, "data-col-index", `${t}`), n.setAttribute(a, "data-row-index", `${e}`), n.setAttribute(a, "data-area", "header"), n.setAttribute(a, "data-ge-action", "resize-column"), n.addClass(a, "ge-table-column-resize-handle"), n.setStyle(a, "display", "clip"), n.setStyle(a, "position", "absolute"), n.setStyle(a, "cursor", "col-resize"), n.setStyle(a, "left", `${o + i - d}px`), n.setStyle(a, "top", `${s}px`), n.setStyle(a, "width", `${d}px`), n.setStyle(a, "height", `${r}px`), n.appendChild(l, a);
+  renderHeaderCellResizeHandle({ rowIndex: e, columnIndex: t, cellLeft: o, cellTop: s, cellWidth: i, cellHeight: r, parent: n }) {
+    const l = this.dom.domService, d = this.tableOptions.columnResizeHandleWidthInPx ?? 2, a = l.createElement("div");
+    l.setAttribute(a, "data-col-index", `${t}`), l.setAttribute(a, "data-row-index", `${e}`), l.setAttribute(a, "data-area", "header"), l.setAttribute(a, "data-ge-action", "resize-column"), l.addClass(a, "ge-table-column-resize-handle"), l.setStyle(a, "display", "clip"), l.setStyle(a, "position", "absolute"), l.setStyle(a, "cursor", "col-resize"), l.setStyle(a, "left", `${o + i - d}px`), l.setStyle(a, "top", `${s}px`), l.setStyle(a, "width", `${d}px`), l.setStyle(a, "height", `${r}px`), l.appendChild(n, a);
   }
 }
-class _e {
+class $e {
   constructor(e, t) {
     this.columnIndex = e, this.sortState = t;
   }
 }
-class De {
+class Oe {
   constructor(e) {
     this.tableScope = e, this.tableScope.hostElement.addEventListener("change", this.onHostElementChanged.bind(this));
   }
@@ -1507,13 +1549,13 @@ class De {
     if (e.target instanceof HTMLInputElement || e.target instanceof HTMLSelectElement || e.target instanceof HTMLTextAreaElement) {
       const t = e.target, o = t.getAttribute("data-area"), s = t.getAttribute("data-row-index"), i = t.getAttribute("data-col-index");
       if (o && s && i) {
-        const r = U(o), l = Number(s), n = Number(i);
-        this.tableScope.updateModelValueAfterEdit(r, l, n, t.value);
+        const r = U(o), n = Number(s), l = Number(i);
+        this.tableScope.updateModelValueAfterEdit(r, n, l, t.value);
       }
     }
   }
 }
-class $e {
+class Pe {
   constructor(e = -1, t = -1) {
     this.rowIndex = e, this.columnIndex = t;
   }
@@ -1523,20 +1565,20 @@ class J {
     this.cells = e;
   }
   static createSingle(e, t) {
-    return new J([new $e(e, t)]);
+    return new J([new Pe(e, t)]);
   }
 }
-class Pe {
+class Fe {
   constructor(e) {
     var t, o;
     this.tableScope = e, (t = this.tableScope.tableOptions) != null && t.getSelectionModel && (this.getSelectionModel = this.tableScope.tableOptions.getSelectionModel), (o = this.tableScope.tableOptions) != null && o.getFocusModel && (this.getFocusModel = this.tableScope.tableOptions.getFocusModel);
   }
   onMouseClicked(e, t) {
-    var i, r, l, n, d, a, c;
+    var i, r, n, l, d, a, h;
     let o = !1, s = !1;
     if (this.getSelectionModel && this.getFocusModel) {
-      const u = this.getSelectionModel(), m = this.getFocusModel();
-      u && m && (m.hasFocus(e.rowIndex, e.columnIndex) || (m.setFocus(e.rowIndex, e.columnIndex), o = !0), (i = e.originalEvent) != null && i.shiftKey || u.hasSelection() && (u.clear(), o = !0), (r = e.originalEvent) != null && r.shiftKey && this.previousEvt ? (u.addSelection(this.createRangeByEvents(e, this.previousEvt)), s = !0, o = !0) : (l = e.originalEvent) != null && l.altKey && ((n = e.originalEvent) != null && n.ctrlKey || (d = e.originalEvent) != null && d.metaKey) ? (u.removeSelection(v.singleCell(e.rowIndex, e.columnIndex)), s = !0, o = !0) : (a = e.originalEvent) != null && a.ctrlKey || (c = e.originalEvent) != null && c.metaKey ? (u.addSelection(v.singleCell(e.rowIndex, e.columnIndex)), s = !0, o = !0) : (u.firstClick(e.rowIndex, e.columnIndex), o = !0));
+      const u = this.getSelectionModel(), w = this.getFocusModel();
+      u && w && (w.hasFocus(e.rowIndex, e.columnIndex) || (w.setFocus(e.rowIndex, e.columnIndex), o = !0), (i = e.originalEvent) != null && i.shiftKey || u.hasSelection() && (u.clear(), o = !0), (r = e.originalEvent) != null && r.shiftKey && this.previousEvt ? (u.addSelection(this.createRangeByEvents(e, this.previousEvt)), s = !0, o = !0) : (n = e.originalEvent) != null && n.altKey && ((l = e.originalEvent) != null && l.ctrlKey || (d = e.originalEvent) != null && d.metaKey) ? (u.removeSelection(R.singleCell(e.rowIndex, e.columnIndex)), s = !0, o = !0) : (a = e.originalEvent) != null && a.ctrlKey || (h = e.originalEvent) != null && h.metaKey ? (u.addSelection(R.singleCell(e.rowIndex, e.columnIndex)), s = !0, o = !0) : (u.firstClick(e.rowIndex, e.columnIndex), o = !0));
     }
     return s ? this.previousEvt = void 0 : this.previousEvt = e == null ? void 0 : e.clone(), o;
   }
@@ -1559,7 +1601,7 @@ class Pe {
   createRangeByEvents(e, t) {
     t || (t = e);
     const o = Math.min(e.rowIndex, t == null ? void 0 : t.rowIndex), s = Math.max(e.rowIndex, t == null ? void 0 : t.rowIndex), i = Math.min(e.columnIndex, t == null ? void 0 : t.columnIndex), r = Math.max(e.columnIndex, t == null ? void 0 : t.columnIndex);
-    return v.create({
+    return R.create({
       rowIndex1: o,
       columnIndex1: i,
       rowIndex2: s,
@@ -1587,7 +1629,7 @@ class Le {
     };
   }
 }
-class Fe {
+class He {
   get() {
     return {
       f2: "START_EDITING",
@@ -1609,7 +1651,7 @@ class Fe {
     };
   }
 }
-class Oe {
+class Ve {
   constructor(e) {
     this.tableScope = e, this.shortcutActionIdMapping = {}, this.listener = [], this.listener.push(e), this.init();
   }
@@ -1630,7 +1672,7 @@ class Oe {
     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 Fe().get()) : Object.assign(this.shortcutActionIdMapping, new Le().get());
+    this.isMacintosh() ? Object.assign(this.shortcutActionIdMapping, new He().get()) : Object.assign(this.shortcutActionIdMapping, new Le().get());
   }
   isMacintosh() {
     return navigator.platform.indexOf("Mac") > -1;
@@ -1698,7 +1740,7 @@ class oe {
   onMouseMoved(e) {
   }
 }
-class Ve {
+class Be {
   setStyle(e, t, o) {
     return e.style[t] = o, e;
   }
@@ -1725,15 +1767,15 @@ class Ve {
     e.setAttribute(t, o);
   }
 }
-class Be {
-  render(e, t, o, s, i, r, l) {
+class We {
+  render(e, t, o, s, i, r, n) {
     if (i.isEditable(t, o)) {
-      l.addClass(e, "ge-table-row-input-div");
-      const n = i.getValueAt(t, o);
+      n.addClass(e, "ge-table-row-input-div");
+      const l = i.getValueAt(t, o);
       e.innerHTML = `
             <input
                 type="text"
-                value="${n}"
+                value="${l}"
                 autofocus
                 onfocus="this.setSelectionRange(0, this.value.length)"
                 data-listen="change"
@@ -1746,12 +1788,12 @@ class Be {
     }
   }
 }
-class He {
+class Ge {
   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(v.singleRow(e)) : this.selectionType === "column" && this.addRange(v.singleColumn(t));
+    this.selectionType === "row" ? this.addRange(R.singleRow(e)) : this.selectionType === "column" && this.addRange(R.singleColumn(t));
   }
   getSelectionCount(e, t) {
     let o = 0;
@@ -1784,10 +1826,10 @@ class He {
     if (this.selectionType === "none")
       return;
     let t = e;
-    this.selectionType === "row" ? t = v.singleRow(e.r1) : this.selectionType === "column" && (t = v.singleColumn(e.c1)), this.negativeRanges.push(t);
+    this.selectionType === "row" ? t = R.singleRow(e.r1) : this.selectionType === "column" && (t = R.singleColumn(e.c1)), this.negativeRanges.push(t);
   }
   togglePoint(e, t) {
-    this.getSelectionCount(e, t) > 0 ? this.removeSelection(v.singleCell(e, t)) : this.addSelection(v.singleCell(e, t));
+    this.getSelectionCount(e, t) > 0 ? this.removeSelection(R.singleCell(e, t)) : this.addSelection(R.singleCell(e, t));
   }
   isSelected(e, t) {
     return this.getSelectionCount(e, t) > 0;
@@ -1796,7 +1838,7 @@ class He {
     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 We {
+class Ne {
   constructor(e = "none") {
     this.selectionType = e, this.rowIndex = -1, this.columnIndex = -1, this.changed = !1;
   }
@@ -1819,69 +1861,129 @@ class We {
     return [this.rowIndex, this.columnIndex];
   }
 }
-const Ge = new He(), Ne = new We("cell");
+class Q {
+  constructor(e = new O(
+    "❯",
+    "",
+    ["gt-table-icon-expanded"]
+  ), t = new O(
+    "❯",
+    "transform: rotate(180deg) translate(-100%, -100%); transform-origin: 0 0;",
+    ["ge-table-icon-collapsed"]
+  )) {
+    this.iconExpanded = e, this.iconCollapsed = t;
+  }
+  // `⊖ `,  `⊕ `;
+}
+const ze = new Ge(), je = new Ne("cell");
 class j {
   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 ge(), this.showCheckboxWihoutExtraColumn = !1, this.externalFilterFunction = void 0, this.sortedOptions = new be(), this.sortOrder = ["asc", "desc"], this.getEditRenderer = (e, t) => new Be(), this.getSelectionModel = () => Ge, this.getFocusModel = () => Ne;
+    }, this.footerVerticalSeparator = !1, this.headerToggleExpandCollapseIcons = !1, this.headerVerticalSeparator = !1, this.treeOptions = new ge(), this.headerGroupOptions = new Q(), this.showCheckboxWihoutExtraColumn = !1, this.externalFilterFunction = void 0, this.sortedOptions = new pe(), this.sortOrder = ["asc", "desc"], this.getEditRenderer = (e, t) => new We(), this.getSelectionModel = () => ze, this.getFocusModel = () => je;
   }
 }
-const Q = class X {
+const Z = class X {
+  /**
+   * 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, o) {
     return new Promise((s, i) => {
       if (t != null && t.hasSelection()) {
         const r = this.mergeRanges(t.getRanges());
         if (r) {
           r.c2 = Math.min(r.c2, e.getColumnCount() - 1), r.r2 = Math.min(r.r2, e.getBodyModel().getRowCount() - 1);
-          const l = [];
-          for (let n = r.r1; n <= r.r2; n++) {
+          const n = [];
+          for (let l = r.r1; l <= r.r2; l++) {
             const d = [];
             for (let a = r.c1; a <= r.c2; a++) {
-              const c = t.isSelected(n, a) ? e.getBodyModel().getTextValueAt(n, a) : "";
-              d.push(c);
+              const h = t.isSelected(l, a) ? e.getBodyModel().getTextValueAt(l, a) : "";
+              d.push(h);
             }
-            l.push(d.join(X.columnSeparatorChar));
+            n.push(d.join(X.columnSeparatorChar));
           }
-          return s(l.join(X.rowSeparatorChar));
+          return s(n.join(X.rowSeparatorChar));
         }
       }
       if (o) {
-        const [r, l] = o.getFocus(), n = e.getBodyModel().getTextValueAt(r, l);
-        return s(n);
+        const [r, n] = o.getFocus(), l = e.getBodyModel().getTextValueAt(r, n);
+        return s(l);
       }
       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, o) {
+    return new Promise((s, i) => {
+      this.createContent(
+        e,
+        t,
+        o
+      ).then((r) => {
+        r && this.copyContent(r).then((n) => {
+          s(r);
+        }).catch((n) => {
+          i();
+        });
+      }).catch((r) => {
+        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 o of e)
-      t ? (t.r1 = Math.min(t.r1, o.r1), t.c1 = Math.min(t.c1, o.c1), t.r2 = Math.max(t.r2, o.r2), t.c2 = Math.max(t.c2, o.c2)) : t = new v(o.r1, o.c1, o.r2, o.c2);
+      t ? (t.r1 = Math.min(t.r1, o.r1), t.c1 = Math.min(t.c1, o.c1), t.r2 = Math.max(t.r2, o.r2), t.c2 = Math.max(t.c2, o.c2)) : t = new R(o.r1, o.c1, o.r2, o.c2);
     return t;
   }
 };
-Q.columnSeparatorChar = "	";
-Q.rowSeparatorChar = `
+Z.columnSeparatorChar = "	";
+Z.rowSeparatorChar = `
 `;
-let se = Q;
-class pe extends Te {
+let se = Z;
+class be extends _e {
   constructor(e, t, o, s, i, r = new se()) {
-    var l;
+    var n;
     if (super(
       e,
       t,
-      new xe(o),
+      new Ce(o),
       s
-    ), this.eventListener = i, this.copyService = r, this.licenseManager = F.getInstance(), this.selectionService = new Pe(this), this.api = new ve(this), this.mouseStartAction = "", this.mouseStartWidth = -1, this.mouseStartColumnIndex = -1, this.dragFrom = -1, this.dragTo = -1, i || (this.eventListener = new oe()), (l = this.tableOptions) != null && l.autoRestoreOptions) {
-      const n = this.tableOptions.autoRestoreOptions, d = n.getStorageKeyFn;
-      d && (n.autoRestoreScrollPosition && (this.storeScrollPosStateService = new Re(d)), n.autoRestoreCollapsedExpandedState && (this.storeStateCollapsedExpandService = new Ee(d)), n.autoRestoreSortingState && (this.storeSortingService = new Me(d)));
+    ), this.eventListener = i, this.copyService = r, this.licenseManager = F.getInstance(), this.selectionService = new Fe(this), this.api = new Ae(this), this.mouseStartAction = "", this.mouseStartWidth = -1, this.mouseStartColumnIndex = -1, this.dragFrom = -1, this.dragTo = -1, this.lastDragFrom = -1, this.lastDragTo = -1, i || (this.eventListener = new oe()), (n = this.tableOptions) != null && n.autoRestoreOptions) {
+      const l = this.tableOptions.autoRestoreOptions, d = l.getStorageKeyFn;
+      d && (l.autoRestoreScrollPosition && (this.storeScrollPosStateService = new Me(d)), l.autoRestoreCollapsedExpandedState && (this.storeStateCollapsedExpandService = new Ie(d)), l.autoRestoreSortingState && (this.storeSortingService = new ke(d)));
     }
-    this.mouseHandler = new Ce(this), this.inputHandler = new De(this), this.shortcutService = new Oe(this), this.shortcutService.addListener(this.selectionService);
+    this.mouseHandler = new Re(this), this.inputHandler = new Oe(this), this.shortcutService = new Ve(this), this.shortcutService.addListener(this.selectionService);
   }
   /**
    * Creates a TableScope instance.
@@ -1894,8 +1996,8 @@ class pe extends Te {
    *
    * @return {TableScope} - The newly created TableScope instance.
    */
-  static create(e, t, o = new j(), s = new oe(), i = new Ve(), r = new se()) {
-    return new pe(
+  static create(e, t, o = new j(), s = new oe(), i = new Be(), r = new se()) {
+    return new be(
       e,
       t,
       i,
@@ -1986,9 +2088,10 @@ class pe extends Te {
    * 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.repaint());
   }
   /**
    * Handles the end of mouse dragging event on a frame.
@@ -1998,7 +2101,7 @@ class pe extends Te {
    * @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.mouseStartAction = "";
   }
   /**
    * Handles the mouse move event.
@@ -2040,11 +2143,11 @@ class pe extends Te {
    * @return {void} - This method does not return anything.
    */
   toggleRowCheckbox(e, t, o) {
-    var n;
+    var l;
     const s = this.tableModel.getAreaModel(o), i = s.isRowChecked(e), r = i === void 0 || i === "semi" || i === "none";
     s.setRowChecked(e, r), this.repaint();
-    const l = (n = s.rowSelectionModel) == null ? void 0 : n.getCheckedRows();
-    this.eventListener.onCheckboxChanged(l || []);
+    const n = (l = s.rowSelectionModel) == null ? void 0 : l.getCheckedRows();
+    this.eventListener.onCheckboxChanged(n || []);
   }
   /**
    * Handle mouse click events.
@@ -2092,10 +2195,68 @@ class pe extends Te {
     const s = this.tableModel.getColumnDef(o);
     if (s != null && s.sortable && s.sortable()) {
       e.preventDefault(), e.stopPropagation();
-      const l = s.sortStatesOrder ? s.sortStatesOrder : this.tableOptions.sortOrder, n = s.sortState ?? "", d = l[(l.indexOf(n) + 1) % l.length], a = new _e(o, d);
+      const n = s.sortStatesOrder ? s.sortStatesOrder : this.tableOptions.sortOrder, l = s.sortState ?? "", d = n[(n.indexOf(l) + 1) % n.length], a = new $e(o, d);
       this.tableModel.doSort([a]) && ((i = this.tableModel.getColumnDefs()) == null || i.forEach((u) => u.sortState = ""), s.sortState = d), this.repaint(), (r = this.storeSortingService) == null || r.setSortItems([a]);
     }
   }
+  /**
+   * 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 s = this.tableModel.getAreaModel("body").getYPosByRowIndex(t);
+    this.scrollToPixel(0, s);
+  }
+  /**
+   * 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 o = () => e;
+    this.tableOptions.getSelectionModel = o, this.getSelectionModel = o, this.selectionService.getSelectionModel = o, 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.
    *
@@ -2181,8 +2342,8 @@ class pe extends Te {
       if (o.autoRestoreCollapsedExpandedState && s) {
         const i = this.storeStateCollapsedExpandService.collapsedExpandedStateGet(), r = this.tableModel.getAreaModel("body");
         if (z(r)) {
-          const l = r, n = r.getRowCount();
-          for (let d = 0; d < n; d++) {
+          const n = r, l = r.getRowCount();
+          for (let d = 0; d < l; d++) {
             const a = r.getRowByIndex(d);
             if (a)
               if (i.allExpanded)
@@ -2190,49 +2351,15 @@ class pe extends Te {
               else if (i.allCollapsed)
                 a.expanded = !1;
               else {
-                const c = s(a.data);
-                i.mode === "expanded" ? a.expanded = this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(c) : i.mode === "collapsed" && (a.expanded = !this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(c));
+                const h = s(a.data);
+                i.mode === "expanded" ? a.expanded = this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(h) : i.mode === "collapsed" && (a.expanded = !this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(h));
               }
           }
-          l.recalcVisibleTreeRows();
+          n.recalcVisibleTreeRows();
         }
       }
     }
   }
-  /**
-   * 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 s = this.tableModel.getAreaModel("body").getYPosByRowIndex(t);
-    this.scrollToPixel(0, s);
-  }
-  /**
-   * 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 o = () => e;
-    this.tableOptions.getSelectionModel = o, this.getSelectionModel = o, this.selectionService.getSelectionModel = o, t && this.repaint();
-  }
 }
 class fe {
 }
@@ -2472,8 +2599,8 @@ fe.vars = {
 }`
 };
 class ie {
-  constructor(e, t = !0, o, s, i = 0, r = !1, l = !1) {
-    this.data = e, this.expanded = t, this.children = o, this.parent = s, this.deep = i, this.checked = r, this.keep = l, this.type = "TreeRow";
+  constructor(e, t = !0, o, s, i = 0, r = !1, n = !1) {
+    this.data = e, this.expanded = t, this.children = o, this.parent = s, this.deep = i, this.checked = r, this.keep = n, this.type = "TreeRow";
   }
 }
 class Y {
@@ -2484,15 +2611,15 @@ class Y {
     return s;
   }
   static buildTreeRow(e, t = "children", o = new ie(e, !0, [], void 0, 0), s = 0, i = 12) {
-    var l;
+    var n;
     if (s > i)
       return console.warn("Max deep limit reached: ", s), o;
     const r = e[t];
     if (r)
-      for (const n of r) {
-        const d = new ie(n, !0, [], o, s + 1);
-        if ((l = o.children) == null || l.push(d), Y.buildTreeRow(
-          n,
+      for (const l of r) {
+        const d = new ie(l, !0, [], o, s + 1);
+        if ((n = o.children) == null || n.push(d), Y.buildTreeRow(
+          l,
           t,
           d,
           s + 1
@@ -2502,20 +2629,20 @@ class Y {
     return o;
   }
 }
-class V {
+class H {
   constructor(e = 34, t = 34, o = 34) {
     this.header = e, this.body = t, this.footer = o;
   }
 }
-class f {
+class m {
   constructor(e = 100, t = "px") {
     this.value = e, this.unit = t;
   }
 }
-const ze = () => !0, re = () => !1;
-class B {
-  constructor(e, t, o = new f(100, "px"), s = new T(), i = new T(), r = new f(100, "px"), l = new f(100, "px"), n, d, a, c, u, m, b, S, g = () => this.visible) {
-    this.property = e, this.headerLabel = t, this.width = o, this.classes = s, this.rendererMap = i, this.minWidth = r, this.maxWidth = l, this.sortable = n, this.sortComparator = d, this.sortState = a, this.sortStatesOrder = c, this.sortIconVisible = u, this.editable = m, this.getEditRenderer = b, this.editInputPipe = S, this.isVisible = g, this.visible = !0;
+const Xe = () => !0, re = () => !1;
+class V {
+  constructor(e, t, o = new m(100, "px"), s = new T(), i = new T(), r = new m(100, "px"), n = new m(100, "px"), l, d, a, h, u, w, f, b, g = () => this.visible) {
+    this.property = e, this.headerLabel = t, this.width = o, this.classes = s, this.rendererMap = i, this.minWidth = r, this.maxWidth = n, this.sortable = l, this.sortComparator = d, this.sortState = a, this.sortStatesOrder = h, this.sortIconVisible = u, this.editable = w, this.getEditRenderer = f, this.editInputPipe = b, this.isVisible = g, this.visible = !0;
   }
   static bodyRenderer(e) {
     return new T(
@@ -2533,15 +2660,15 @@ class B {
       e.headerClasses,
       e.bodyClasses,
       e.footerClasses
-    ), s = e.sortIconVisible ?? e.sortable ?? re, i = e.editable ?? e.editable ?? re, r = e.isVisible ?? e.isVisible ?? ze;
-    return new B(
+    ), s = e.sortIconVisible ?? e.sortable ?? re, i = e.editable ?? e.editable ?? re, r = e.isVisible ?? e.isVisible ?? Xe;
+    return new V(
       e.property ?? "",
       e.headerLabel ?? "",
-      e.width ?? new f(100, "px"),
+      e.width ?? new m(100, "px"),
       o,
       t,
-      e.minWidth ?? new f(100, "px"),
-      e.maxWidth ?? new f(100, "px"),
+      e.minWidth ?? new m(100, "px"),
+      e.maxWidth ?? new m(100, "px"),
       e.sortable,
       e.sortComparator,
       e.sortState,
@@ -2554,8 +2681,8 @@ class B {
     );
   }
 }
-const Ze = new f(300, "px"), et = new f(290, "px"), tt = new f(280, "px"), ot = new f(270, "px"), st = new f(260, "px"), it = new f(250, "px"), rt = new f(240, "px"), lt = new f(230, "px"), nt = new f(220, "px"), at = new f(210, "px"), le = new f(200, "px"), dt = new f(190, "px"), ht = new f(180, "px"), ct = new f(170, "px"), ut = new f(160, "px"), gt = new f(150, "px"), bt = new f(140, "px"), pt = new f(130, "px"), ft = new f(120, "px"), mt = new f(110, "px"), St = new f(100, "px"), wt = new f(90, "px"), xt = new f(80, "px"), yt = new f(70, "px"), Ct = new f(60, "px"), vt = new f(50, "px"), Rt = new f(40, "px"), At = new f(30, "px"), Et = new f(20, "px"), Mt = new f(10, "px"), kt = new f(0, "px");
-class Z {
+const tt = new m(300, "px"), ot = new m(290, "px"), st = new m(280, "px"), it = new m(270, "px"), rt = new m(260, "px"), lt = new m(250, "px"), nt = new m(240, "px"), at = new m(230, "px"), dt = new m(220, "px"), ht = new m(210, "px"), le = new m(200, "px"), ct = new m(190, "px"), ut = new m(180, "px"), gt = new m(170, "px"), pt = new m(160, "px"), bt = new m(150, "px"), ft = new m(140, "px"), mt = new m(130, "px"), wt = new m(120, "px"), St = new m(110, "px"), xt = new m(100, "px"), yt = new m(90, "px"), Ct = new m(80, "px"), vt = new m(70, "px"), Rt = new m(60, "px"), At = new m(50, "px"), Mt = new m(40, "px"), Et = new m(30, "px"), It = new m(20, "px"), kt = new m(10, "px"), Tt = new m(0, "px");
+class ee {
   constructor(e, t = [], o = -1) {
     this.areaIdent = e, this.columnDefs = t, this.defaultRowHeight = o, this.rowSelectionModel = void 0, this.yPositions = [], this.cellRenderers = t.map((s) => s.rendererMap[e]);
   }
@@ -2615,11 +2742,13 @@ class Z {
     return !1;
   }
   isEditable(e, t) {
-    return this.columnDefs && t < this.columnDefs.length && this.columnDefs[t].editable ? this.columnDefs[t].editable() : !1;
+    var s, i;
+    const o = (s = this.columnDefs) == null ? void 0 : s[t];
+    return ((i = o == null ? void 0 : o.editable) == null ? void 0 : i.call(o)) ?? !1;
   }
   setValue(e, t, o) {
-    var l;
-    const s = (l = this.columnDefs[t]) == null ? void 0 : l.editInputPipe;
+    var n;
+    const s = (n = this.columnDefs[t]) == null ? void 0 : n.editInputPipe;
     s && (o = s(o, e, t));
     const i = this.getRowByIndex(e), r = this.columnDefs[t].property;
     return r.includes(".") ? this.setPropertyValue(i, r.split("."), o) : (i[r] = o, !0);
@@ -2633,7 +2762,7 @@ class Z {
   setPropertyValue(e, t, o) {
     const s = t.shift();
     if (s) {
-      let i = e[s];
+      const i = e[s];
       return i && t.length ? this.setPropertyValue(i, t, o) : (e[s] = o, !0);
     }
     return !1;
@@ -2649,7 +2778,7 @@ class Z {
       this.yPositions[t + 1] = this.getRowHeight(t) + this.yPositions[t];
   }
 }
-class _ extends Z {
+class D extends ee {
   constructor(e, t, o, s = []) {
     super(e, s, o), this.areaIdent = e, this.arr = t, this.defaultRowHeight = o, this.columnDefs = s, this.filteredArr = [...t];
   }
@@ -2677,7 +2806,7 @@ class _ extends Z {
     this.filteredArr.forEach((o) => this.arrayMove(o, e, t)), super.changeColumnOrder(e, t);
   }
 }
-class D {
+class _ {
   constructor(e = "body") {
     this.areaIdent = e, this.rowSelectionModel = void 0;
   }
@@ -2749,7 +2878,7 @@ class D {
   changeColumnOrder(e, t) {
   }
 }
-class je {
+class Ye {
   flattenTree(e, t = []) {
     var o;
     for (const s of e)
@@ -2778,9 +2907,9 @@ class me {
     return o * ("" + e).localeCompare("" + t);
   }
 }
-class ne extends Z {
+class ne extends ee {
   constructor(e, t, o, s = []) {
-    super(e, s, o), this.areaIdent = e, this.rows = t, this.defaultRowHeight = o, this.columnDefs = s, this.type = "AreaModelTree", this.sorterService = new me(), this.service = new je(), this.properties = s.map((i) => i.property), this.flattenRows = this.service.flattenTree(t), this.filteredFlattenRows = [...this.flattenRows];
+    super(e, s, o), this.areaIdent = e, this.rows = t, this.defaultRowHeight = o, this.columnDefs = s, this.type = "AreaModelTree", this.sorterService = new me(), this.service = new Ye(), this.properties = s.map((i) => i.property), this.flattenRows = this.service.flattenTree(t), this.filteredFlattenRows = [...this.flattenRows];
   }
   changeColumnOrder(e, t) {
     this.arrayMove(this.properties, e, t), super.changeColumnOrder(e, t);
@@ -2837,8 +2966,8 @@ class ne extends Z {
     s && (o = s(o, e, t));
     const i = this.getRowByIndex(e);
     if (i) {
-      const l = i.data, n = this.columnDefs[t].property;
-      return n.includes(".") ? this.setPropertyValue(l, n.split("."), o) : (l[n] = o, !0);
+      const n = i.data, l = this.columnDefs[t].property;
+      return l.includes(".") ? this.setPropertyValue(n, l.split("."), o) : (n[l] = o, !0);
     }
     return !1;
   }
@@ -2947,7 +3076,7 @@ class de {
     this.top = e, this.right = t, this.bottom = o, this.left = s;
   }
 }
-class Xe {
+class Ke {
   constructor() {
     this.checkedRows = [];
   }
@@ -2979,10 +3108,10 @@ class Xe {
   }
 }
 class N {
-  constructor(e, t, o, s = 0, i = 0, r = !1, l = new V(), n = [], d = [], a = -1, c = 0, u = 400, m = () => {
+  constructor(e, t, o, s = 0, i = 0, r = !1, n = new H(), l = [], d = [], a = -1, h = 0, u = 400, w = () => {
   }) {
-    var b, S, g, p;
-    this.headerAreaModel = e, this.bodyAreaModel = t, this.footerAreaModel = o, this.fixedLeftColumnCount = s, this.fixedRightColumnCount = i, this.rowCheckboxVisible = r, this.defaultRowHeights = l, this.columnDefs = n, this.columnSizes = d, this.overridingColumnWidth = a, this.columnCount = c, this.parentSize = u, this.getSelectionModel = m, this.rowCount = 0, this.contentHeightInPx = 0, this.contentWidthInPx = 0, this.padding = new de(0, 0, 0, 0), this.xPositions = [], e.areaIdent = "header", t.areaIdent = "body", o.areaIdent = "footer", this.columnCount || ((b = this.columnDefs) != null && b.length ? this.columnCount = this.columnDefs.length : (S = this.columnSizes) != null && S.length && (this.columnCount = (g = this.columnSizes) == null ? void 0 : g.length)), (p = this.columnDefs) != null && p.length && we(this.columnDefs[0]) && !t.rowSelectionModel && (t.rowSelectionModel = new Xe());
+    var f, b, g, p;
+    this.headerAreaModel = e, this.bodyAreaModel = t, this.footerAreaModel = o, this.fixedLeftColumnCount = s, this.fixedRightColumnCount = i, this.rowCheckboxVisible = r, this.defaultRowHeights = n, this.columnDefs = l, this.columnSizes = d, this.overridingColumnWidth = a, this.columnCount = h, this.parentSize = u, this.getSelectionModel = w, this.rowCount = 0, this.contentHeightInPx = 0, this.contentWidthInPx = 0, this.padding = new de(0, 0, 0, 0), this.xPositions = [], e.areaIdent = "header", t.areaIdent = "body", o.areaIdent = "footer", this.columnCount || ((f = this.columnDefs) != null && f.length ? this.columnCount = this.columnDefs.length : (b = this.columnSizes) != null && b.length && (this.columnCount = (g = this.columnSizes) == null ? void 0 : g.length)), (p = this.columnDefs) != null && p.length && ye(this.columnDefs[0]) && !t.rowSelectionModel && (t.rowSelectionModel = new Ke());
   }
   init() {
     this.recalcSize(this.parentSize), this.overridingColumnWidth === -1 && this.calcXPositions(), this.headerAreaModel && this.headerAreaModel.init(), this.bodyAreaModel && this.bodyAreaModel.init(), this.footerAreaModel && this.footerAreaModel.init();
@@ -3281,7 +3410,13 @@ class N {
    * @returns {boolean} - `true` if the column is sortable, `false` otherwise.
    */
   isSortable(e) {
-    return this.columnDefs && e < this.columnDefs.length && this.columnDefs[e].sortable ? this.columnDefs[e].sortable() : !1;
+    var t;
+    if (this.columnDefs && e < this.columnDefs.length) {
+      const o = (t = this.columnDefs[e]) == null ? void 0 : t.sortable;
+      if (typeof o == "function")
+        return o();
+    }
+    return !1;
   }
   /**
    * Moves a column in the column order.
@@ -3301,12 +3436,12 @@ class N {
       if (i.width.unit === "%" && e) {
         let r = Math.floor(i.width.value * e / 100);
         if (i.minWidth) {
-          let l = i.minWidth.unit === "px" ? i.minWidth.value : Math.floor(i.minWidth.value * e / 100);
-          r = Math.max(l, r);
+          const n = i.minWidth.unit === "px" ? i.minWidth.value : Math.floor(i.minWidth.value * e / 100);
+          r = Math.max(n, r);
         }
         if (i.maxWidth) {
-          let l = i.maxWidth.unit === "px" ? i.maxWidth.value : Math.floor(i.maxWidth.value * e / 100);
-          r = Math.min(l, r);
+          const n = i.maxWidth.unit === "px" ? i.maxWidth.value : Math.floor(i.maxWidth.value * e / 100);
+          r = Math.min(n, r);
         }
         return r;
       }
@@ -3327,7 +3462,7 @@ class N {
       this.xPositions[t + 1] = this.getColumnWidth(t) + this.xPositions[t];
   }
 }
-class Ye extends Z {
+class Ue extends ee {
   constructor(e, t, o, s = []) {
     super(e, s, o), this.areaIdent = e, this.rows = t, this.defaultRowHeight = o, this.columnDefs = s, this.sorterService = new me(), this.filteredRows = [...t], this.properties = s.map((i) => i.property);
   }
@@ -3338,7 +3473,7 @@ class Ye extends Z {
   getValueAt(e, t) {
     const o = this.properties[t];
     let s = this.filteredRows[e];
-    return O(s) && (s = s.data), s ? this.getValueByT(s, o) : "";
+    return L(s) && (s = s.data), s ? this.getValueByT(s, o) : "";
   }
   getFilteredRows() {
     return this.filteredRows;
@@ -3380,7 +3515,7 @@ class Ye extends Z {
     return s && t.length ? this.getPropertyValue(s, t) : s;
   }
 }
-class he extends Ye {
+class he extends Ue {
   constructor(e, t, o, s) {
     super(
       e,
@@ -3390,14 +3525,14 @@ class he extends Ye {
     ), this.areaIdent = e, this.rows = t, this.columnDefs = o, this.defaultRowHeight = s;
   }
 }
-class L {
+class P {
   static createTableModel(e) {
-    var t, o, s, i, r, l, n, d, a, c, u, m, b, S;
+    var t, o, s, i, r, n, l, d, a, h, u, w, f, b;
     if (e.defaultRowHeights === void 0)
       if ((t = e.tableOptions) != null && t.defaultRowHeights)
         e.defaultRowHeights = e.tableOptions.defaultRowHeights;
       else {
-        if (e.defaultRowHeights = new V(), e.headerAreaModel && "defaultRowHeight" in e.headerAreaModel) {
+        if (e.defaultRowHeights = new H(), e.headerAreaModel && "defaultRowHeight" in e.headerAreaModel) {
           const g = e.headerAreaModel.defaultRowHeight;
           g > -1 && (e.defaultRowHeights.header = g);
         }
@@ -3410,31 +3545,31 @@ class L {
           g > -1 && (e.defaultRowHeights.footer = g);
         }
       }
-    if (e.columnDefs === void 0 && ((o = e.properties) != null && o.length ? e.columnDefs = e.properties.map((g) => new B(g, g.toUpperCase(), le)) : (s = e.rows) != null && s.length ? e.columnDefs = Object.keys(e.rows[0]).map((g) => new B(g, g.toUpperCase(), le)) : e.columnDefs = []), e.columnCount === void 0 && ((i = e.columnDefs) != null && i.length ? e.columnCount = e.columnDefs.length : (r = e.headerData) != null && r.length ? e.columnCount = e.headerData[0].length : (l = e.columnSizes) != null && l.length ? e.columnCount = (n = e.columnSizes) == null ? void 0 : n.length : console.warn('Property "columnCount" is missing and cannot be derived from other properties.')), e.headerAreaModel || ((d = e.headerData) != null && d.length ? e.headerAreaModel = new _(
+    if (e.columnDefs === void 0 && ((o = e.properties) != null && o.length ? e.columnDefs = e.properties.map((g) => new V(g, g.toUpperCase(), le)) : (s = e.rows) != null && s.length ? e.columnDefs = Object.keys(e.rows[0]).map((g) => new V(g, g.toUpperCase(), le)) : e.columnDefs = []), e.columnCount === void 0 && ((i = e.columnDefs) != null && i.length ? e.columnCount = e.columnDefs.length : (r = e.headerData) != null && r.length ? e.columnCount = e.headerData[0].length : (n = e.columnSizes) != null && n.length ? e.columnCount = (l = e.columnSizes) == null ? void 0 : l.length : console.warn('Property "columnCount" is missing and cannot be derived from other properties.')), e.headerAreaModel || ((d = e.headerData) != null && d.length ? e.headerAreaModel = new D(
       "header",
       e.headerData,
       e.defaultRowHeights.header,
       e.columnDefs
-    ) : (a = e.columnDefs) != null && a.length ? e.headerAreaModel = new _(
+    ) : (a = e.columnDefs) != null && a.length ? e.headerAreaModel = new D(
       "header",
       [e.columnDefs.map((g) => g.headerLabel)],
       e.defaultRowHeights.header,
       e.columnDefs
-    ) : e.headerAreaModel = new D("header")), e.footerAreaModel || ((c = e.footerData) != null && c.length ? e.footerAreaModel = new _(
+    ) : e.headerAreaModel = new _("header")), e.footerAreaModel || ((h = e.footerData) != null && h.length ? e.footerAreaModel = new D(
       "footer",
       e.footerData,
       e.defaultRowHeights.footer,
       e.columnDefs
-    ) : e.footerAreaModel = new D("footer")), !e.bodyAreaModel)
+    ) : e.footerAreaModel = new _("footer")), !e.bodyAreaModel)
       if (e.rows)
-        if ((u = e.rows) != null && u.length && O(e.rows[0])) {
+        if ((u = e.rows) != null && u.length && L(e.rows[0])) {
           const g = e.rows;
           e.bodyAreaModel = new ne(
             "body",
             g,
             e.defaultRowHeights.body,
             e.columnDefs
-          ), (e.columnDefs[0].property === "CheckboxColumn" || (m = e.tableOptions) != null && m.showCheckboxWihoutExtraColumn) && (e.bodyAreaModel.rowSelectionModel = new ae(g));
+          ), (e.columnDefs[0].property === "CheckboxColumn" || (w = e.tableOptions) != null && w.showCheckboxWihoutExtraColumn) && (e.bodyAreaModel.rowSelectionModel = new ae(g));
         } else
           e.bodyAreaModel = new he(
             "body",
@@ -3443,12 +3578,12 @@ class L {
             e.defaultRowHeights.body
           );
       else
-        e.bodyData ? e.bodyAreaModel = new _(
+        e.bodyData ? e.bodyAreaModel = new D(
           "body",
           e.bodyData,
           e.defaultRowHeights.body
-        ) : e.bodyAreaModel = new D("body");
-    return e.fixedLeftColumnCount === void 0 && (e.fixedLeftColumnCount = 0), e.fixedRightColumnCount === void 0 && (e.fixedRightColumnCount = 0), e.rowCheckboxVisible === void 0 && (e.rowCheckboxVisible = !1), e.overridingColumnWidth === void 0 && (e.overridingColumnWidth = -1), !e.getSelectionModel && ((b = e.tableOptions) != null && b.getSelectionModel) && (e.getSelectionModel = (S = e.tableOptions) == null ? void 0 : S.getSelectionModel), new N(
+        ) : e.bodyAreaModel = new _("body");
+    return e.fixedLeftColumnCount === void 0 && (e.fixedLeftColumnCount = 0), e.fixedRightColumnCount === void 0 && (e.fixedRightColumnCount = 0), e.rowCheckboxVisible === void 0 && (e.rowCheckboxVisible = !1), e.overridingColumnWidth === void 0 && (e.overridingColumnWidth = -1), !e.getSelectionModel && ((f = e.tableOptions) != null && f.getSelectionModel) && (e.getSelectionModel = (b = e.tableOptions) == null ? void 0 : b.getSelectionModel), new N(
       e.headerAreaModel,
       e.bodyAreaModel,
       e.footerAreaModel,
@@ -3465,7 +3600,7 @@ class L {
     );
   }
   static buildByTypedRowsParam(e) {
-    return L.buildByTypedRows(
+    return P.buildByTypedRows(
       e.rows ?? [],
       e.columnDefs,
       e.tableOptions ?? new j(),
@@ -3474,18 +3609,18 @@ class L {
     );
   }
   static buildByTypedRows(e, t, o = new j(), s = 0, i = 0) {
-    const r = o.defaultRowHeights, l = t[0].property === "CheckboxColumn";
-    if (e != null && e.length && O(e[0])) {
-      const n = e, d = new ne(
+    const r = o.defaultRowHeights, n = t[0].property === "CheckboxColumn";
+    if (e != null && e.length && L(e[0])) {
+      const l = e, d = new ne(
         "body",
-        n,
+        l,
         r.body,
         t
       );
-      return (l || o.showCheckboxWihoutExtraColumn) && (d.rowSelectionModel = new ae(n)), L.createByAreaModelsParam({
-        headerAreaModel: new _("header", [t.map((a) => a.headerLabel)], r.header),
+      return (n || o.showCheckboxWihoutExtraColumn) && (d.rowSelectionModel = new ae(l)), P.createByAreaModelsParam({
+        headerAreaModel: new D("header", [t.map((a) => a.headerLabel)], r.header),
         bodyAreaModel: d,
-        footerAreaModel: new _("footer", [], r.footer),
+        footerAreaModel: new D("footer", [], r.footer),
         columnDefs: t,
         fixedLeftColumnCount: s,
         fixedRightColumnCount: i,
@@ -3496,7 +3631,7 @@ class L {
         overridingColumnWidth: -1
       });
     }
-    return L.createByObjectArrayParam({
+    return P.createByObjectArrayParam({
       rows: e,
       columnDefs: t,
       fixedLeftColumnCount: s,
@@ -3506,19 +3641,19 @@ class L {
   }
   static createByObjectArrayParam(e) {
     const t = e.rowCheckboxVisible !== void 0 ? e.rowCheckboxVisible : !1;
-    return L.createByObjectArray(
+    return P.createByObjectArray(
       e.rows,
       e.header ?? [],
       e.footer ?? [],
       e.fixedLeftColumnCount ?? 0,
       e.fixedRightColumnCount ?? 0,
       t,
-      e.defaultRowHeights ?? new V(),
+      e.defaultRowHeights ?? new H(),
       e.columnDefs ?? [],
       e.columnSizes ?? []
     );
   }
-  static createByAreaModels(e = new D(), t, o = new D(), s = 0, i = 0, r = !1, l = new V(), n, d = [], a = -1, c) {
+  static createByAreaModels(e = new _(), t, o = new _(), s = 0, i = 0, r = !1, n = new H(), l, d = [], a = -1, h) {
     return new N(
       e,
       t,
@@ -3526,18 +3661,18 @@ class L {
       s,
       i,
       r,
-      l,
       n,
+      l,
       d,
       a,
-      c
+      h
     );
   }
   static createByAreaModelsParam(e) {
-    return L.createByAreaModels(
-      e.headerAreaModel ?? new D(),
+    return P.createByAreaModels(
+      e.headerAreaModel ?? new _(),
       e.bodyAreaModel,
-      e.footerAreaModel ?? new D(),
+      e.footerAreaModel ?? new _(),
       e.fixedLeftColumnCount ?? 0,
       e.fixedRightColumnCount ?? 0,
       e.rowCheckboxVisible === void 0 ? !1 : e.rowCheckboxVisible,
@@ -3548,24 +3683,24 @@ class L {
       e.columnCount ?? 0
     );
   }
-  static createByObjectArray(e, t = [], o = [], s = 0, i = 0, r = !1, l = new V(), n, d = []) {
+  static createByObjectArray(e, t = [], o = [], s = 0, i = 0, r = !1, n = new H(), l, d = []) {
     let a;
-    t != null && t.length ? a = new _("header", t, l.header, n) : n != null && n.length ? a = new _("header", [n.map((m) => m.headerLabel)], l.header, n) : a = new D();
-    const c = o ? new _("footer", o, l.footer, n) : new D(), u = new he("body", e, n, l.body);
+    t != null && t.length ? a = new D("header", t, n.header, l) : l != null && l.length ? a = new D("header", [l.map((w) => w.headerLabel)], n.header, l) : a = new _();
+    const h = o ? new D("footer", o, n.footer, l) : new _(), u = new he("body", e, l, n.body);
     return new N(
       a,
       u,
-      c,
+      h,
       s,
       i,
       r,
-      l,
       n,
+      l,
       d
     );
   }
 }
-const It = [
+const Dt = [
   "COPY_2_CLIPBOARD",
   "START_EDITING",
   "TOGGLE_SELECTION",
@@ -3583,18 +3718,18 @@ const It = [
   // "PAGEUP_PRESSED",
   // "PAGEDOWN_PRESSED"
 ];
-class Tt {
+class _t {
   constructor(e, t) {
     this.tableModel = e, this.tableOptions = t;
   }
 }
-class Ke {
-  constructor(e, t, o, s, i, r, l) {
-    this.emmitDataKey = e, this.emmitCancelKey = t, this.queryId = o, this.filter = s, this.sorting = i, this.startIndex = r, this.endIndex = l;
+class qe {
+  constructor(e, t, o, s, i, r, n) {
+    this.emmitDataKey = e, this.emmitCancelKey = t, this.queryId = o, this.filter = s, this.sorting = i, this.startIndex = r, this.endIndex = n;
   }
 }
-class _t extends Ke {
-  constructor(e, t, o, s, i, r, l, n) {
+class $t extends qe {
+  constructor(e, t, o, s, i, r, n, l) {
     super(
       e,
       t,
@@ -3602,38 +3737,38 @@ class _t extends Ke {
       s,
       i,
       r,
-      l
-    ), this.rows = n;
+      n
+    ), this.rows = l;
   }
 }
-class Ue {
+class Je {
   constructor(e, t) {
     this.value = e, this.label = t;
   }
 }
-class Dt {
+class Ot {
   constructor(e, t) {
     this.index = e, this.px = t;
   }
 }
-const $t = { body: ["ge-table-text-align-left"] }, Pt = { body: ["ge-table-text-align-center"] }, Lt = { body: ["ge-table-text-align-right"] }, Ft = {
+const Pt = { body: ["ge-table-text-align-left"] }, Ft = { body: ["ge-table-text-align-center"] }, Lt = { body: ["ge-table-text-align-right"] }, Ht = {
   header: ["ge-table-text-align-left"],
   body: ["ge-table-text-align-left"],
   footer: ["ge-table-text-align-left"]
-}, Ot = {
+}, Vt = {
   header: ["ge-table-text-align-center"],
   body: ["ge-table-text-align-center"],
   footer: ["ge-table-text-align-center"]
-}, Vt = {
+}, Bt = {
   header: ["ge-table-text-align-right"],
   body: ["ge-table-text-align-right"],
   footer: ["ge-table-text-align-right"]
 };
 class ce {
-  render(e, t, o, s, i, r, l) {
+  render(e, t, o, s, i, r, n) {
     if (i.isRowCheckable(t)) {
-      l.addClass(e, "ge-table-row-checkbox-div");
-      const n = i.isRowChecked(t), d = n === "full" ? "checked" : "", a = n === "semi" ? '<span style="opacity: 0.4;">✓<span>' : "";
+      n.addClass(e, "ge-table-row-checkbox-div");
+      const l = i.isRowChecked(t), d = l === "full" ? "checked" : "", a = l === "semi" ? '<span style="opacity: 0.4;">✓<span>' : "";
       e.innerHTML = `
         <input
             type="checkbox"
@@ -3647,16 +3782,16 @@ class ce {
     }
   }
 }
-class Bt {
+class Wt {
   constructor() {
-    this.type = "CheckboxColumnDef", this.property = "CheckboxColumn", this.headerLabel = "", this.width = new f(50, "px"), this.minWidth = new f(50, "px"), this.maxWidth = new f(100, "px"), this.rendererMap = new T(new ce(), new ce(), void 0), this.classes = new T(
+    this.type = "CheckboxColumnDef", this.property = "CheckboxColumn", this.headerLabel = "", this.width = new m(50, "px"), this.minWidth = new m(50, "px"), this.maxWidth = new m(100, "px"), this.rendererMap = new T(new ce(), new ce(), void 0), this.classes = new T(
       [],
       ["ge-table-text-align-left"],
       []
     );
   }
 }
-class Ht {
+class Gt {
   /**
    * A factory that creates a new AreaObjectMap with the given body renderer.
    *
@@ -3671,17 +3806,17 @@ class Ht {
     );
   }
 }
-class Wt {
+class Nt {
   constructor(e = "down", t) {
     this.status = e, this.originalEvent = t;
   }
 }
-class Gt {
+class zt {
   constructor(e, t, o, s, i = {}) {
     this.area = e, this.rowIndex = t, this.columnIndex = o, this.value = s, this.cssClasses = i;
   }
 }
-class Nt {
+class jt {
   constructor() {
     this.autoRestoreSortingState = !1, this.autoRestoreCollapsedExpandedState = !1, this.autoRestoreScrollPosition = !1, this.autoRestoreCheckedState = !1, this.autoRestoreSelectedState = !1, this.getStorageKeyFn = void 0, this.isSame = (e, t, o) => {
       if (e && t && o.getRowId) {
@@ -3706,12 +3841,12 @@ class Nt {
     };
   }
 }
-class qe {
+class Qe {
   constructor(e, t, o, s = !1, i = "normal", r = void 0) {
     this.data = e, this.property = t, this.toggle = o, this.closed = s, this.visibility = i, this.children = r, this.impl = "CellGroup";
   }
 }
-class Je extends qe {
+class Ze extends Qe {
   constructor(e, t = 0, o = 0, s) {
     super(
       e.data,
@@ -3783,29 +3918,31 @@ class Je extends qe {
   getParentCount(e = this, t = 0) {
     return e.parent && (t = t + 1 + this.getParentCount(e.parent, t)), t;
   }
-  log(e) {
-    const t = "													".substring(0, 2 * this.rowIndex), o = `${this.getColumnIndex()}`, s = `${this.getColumnCount(this)}`, i = `${this.getRowSpan(this, e)}`, r = `${this.getParentCount(this)}`;
-    if (console.info(`${t + this.data}
+  log(e = 10) {
+    const t = "													".substring(0, 2 * this.rowIndex), o = `${this.getColumnIndex()}`, s = `${this.getColumnCount(this)}`, i = `${this.getRowSpan(this, e)}`, r = `${this.getParentCount(this)}`, n = `${t + this.data}
       childIndex:${this.childIndex}
       row:${this.rowIndex}
       col:${o}
       vis:${this.visibility}
+      toggle:${this.toggle}
       closed:${this.closed}
       isVisible:${this.isVisible()}
       ownColumn:${this.ownColumn()}
       claimsSpace:${this.claimsSpace()}
       colCount:${s}
       rowSpan:${i}
-      pc:${r}`.replace(/[ \n]+/g, " ")), this.children)
+      pc:${r}`.replace(/[ \n]+/g, " ");
+    if (this.children)
       for (const l of this.children)
         l.log(e);
+    return n;
   }
 }
 class I {
   static buildColumnDefs(e, t = []) {
     for (const o of e)
       o.property && t.push(
-        B.create({
+        V.create({
           property: o.property,
           headerLabel: o.data ? o.data : o.property,
           isVisible: () => typeof o.isVisible == "function" ? o.isVisible() : !0
@@ -3834,8 +3971,8 @@ class I {
   static buildGroupExts(e, t = [], o = 0, s) {
     let i;
     for (let r = 0; r < e.length; r++) {
-      const l = e[r], n = new Je(l, o, r, s);
-      i && (n.leftNeighbour = i, i.rightNeighbour = n), t.push(n), l.children && (n.children = I.buildGroupExts(l.children, [], o + 1, n)), i = n;
+      const n = e[r], l = new Ze(n, o, r, s);
+      i && (l.leftNeighbour = i, i.rightNeighbour = l), t.push(l), n.children && (l.children = I.buildGroupExts(n.children, [], o + 1, l)), i = l;
     }
     return t;
   }
@@ -3857,15 +3994,15 @@ class I {
     for (const r of e) {
       if (r.rowIndex <= s) {
         o++;
-        for (let l = 0; l < t.length; l++)
-          t[l][o] = null;
+        for (let n = 0; n < t.length; n++)
+          t[n][o] = null;
       }
       if (t[r.rowIndex][o] = r, s = r.rowIndex, r.ownColumn() && ((i = r.children) != null && i.length)) {
-        for (let l = r.rowIndex + 1; l < t.length; l++)
-          t[l][o] = void 0;
+        for (let n = r.rowIndex + 1; n < t.length; n++)
+          t[n][o] = void 0;
         o++;
-        for (let l = 0; l < t.length; l++)
-          t[l][o] = null;
+        for (let n = 0; n < t.length; n++)
+          t[n][o] = null;
       }
     }
     return t;
@@ -3876,7 +4013,7 @@ class I {
       e.push(s.data + "    rowIndex:" + s.rowIndex), (o = s.children) != null && o.length && I.iterateThrowColumns(e, s.children);
   }
 }
-class zt {
+class Xt {
   constructor() {
     this.areaIdent = "body", this.rowSelectionModel = void 0;
   }
@@ -3946,19 +4083,56 @@ class zt {
     return !1;
   }
 }
-class Qe {
-  render(e, t, o, s, i, r, l) {
-    const n = r != null && r.data ? r.data : "";
-    e.innerHTML = `${n}`;
+const we = class Se {
+  constructor(e = new Q()) {
+    this.headerGroupOptions = e;
   }
-}
-class jt {
-  constructor(e = "header", t, o = [], s) {
-    var i;
-    this.areaIdent = e, this.groups = t, this.columnDefs = o, this.defaultRowHeight = s, this.gammaCells = !0, this.groupExts = [], this.cellGroupExtCellRenderer = new Qe(), this.groupExts = I.buildGroupExts(t), console.info(this.groupExts), console.info(this.getAllLeafs()), console.info(this.getMaxRowCount());
-    for (const r of this.groupExts)
-      r.log(this.getMaxRowCount());
-    this.arr = this.buildArray(), !((i = this.columnDefs) != null && i.length) && e === "header" && (this.columnDefs = I.buildColumnDefs(t)), console.info("this.columnDefs", this.columnDefs), console.info("this.arr", this.arr);
+  render(e, t, o, s, i, r, n) {
+    const l = r != null && r.data ? r.data : "";
+    if (r) {
+      const { toggle: d, visibility: a, closed: h } = r, u = d ? Se.toggleHeaderGroup : "";
+      this.addText(e, s, t, o, l, u), d && a !== "always" && this.addArrowDiv(n, e, !h, t, o, s, u);
+    } else
+      this.addText(e, s, t, o, l, "");
+  }
+  addText(e, t, o, s, i, r) {
+    e.innerHTML = `<span 
+                data-ge-action="${r}"
+                data-area="${t}"
+                data-row-index="${o}"
+                data-col-index="${s}"
+                >${i}</span>`;
+  }
+  addArrowDiv(e, t, o = !0, s = -1, i = -1, r = "header", n) {
+    const l = e.createElement("div");
+    e.addClass(l, "ge-table-toggle-icon-div"), e.setStyle(l, "display", "inline-block"), e.setStyle(l, "position", ""), e.setStyle(l, "width", "20px"), e.setStyle(l, "background", "transparent"), e.setStyle(l, "cursor", "pointer"), e.setAttribute(l, "data-row-index", `${s}`), e.setAttribute(l, "data-col-index", `${i}`), e.setAttribute(l, "data-area", `${r}`), e.setAttribute(l, "data-ge-action", `${n}`);
+    let d;
+    o ? d = this.headerGroupOptions.iconExpanded : d = this.headerGroupOptions.iconCollapsed;
+    const a = d.content, h = e.createText(a);
+    e.appendChild(l, h), d.style && this.applyStyleString(e, l, d.style);
+    for (const u of d.classes)
+      e.addClass(l, u);
+    return e.appendChild(t, l), l;
+  }
+  applyStyleString(e, t, o) {
+    const s = o.split(";").map((i) => i.trim()).filter((i) => i);
+    for (const i of s) {
+      const [r, n] = i.split(":");
+      e.setStyle(t, r.trim(), n.trim());
+    }
+  }
+};
+we.toggleHeaderGroup = "toggleHeaderGroup";
+let et = we;
+class Yt {
+  constructor(e = "header", t, o = [], s, i = new Q()) {
+    this.areaIdent = e, this.groups = t, this.columnDefs = o, this.defaultRowHeight = s, this.headerGroupOptions = i, this.gammaCells = !0, this.arr = [], this.groupExts = [], this.cellGroupExtCellRenderer = new et(this.headerGroupOptions), this.groupExts = I.buildGroupExts(t), this.init();
+  }
+  init() {
+    var e;
+    for (const t of this.groupExts)
+      t.log(this.getMaxRowCount());
+    this.arr = this.buildArray(), !((e = this.columnDefs) != null && e.length) && this.areaIdent === "header" && (this.columnDefs = I.buildColumnDefs(this.groups));
   }
   getAllLeafs() {
     return I.flattenGroupExts(this.groupExts).filter((t) => !t.children);
@@ -3968,15 +4142,10 @@ class jt {
     return e != null && e.length ? 1 + Math.max(...e.map((t) => t.getParentCount(t))) : 0;
   }
   buildArray() {
-    console.info("");
-    let e = I.flattenGroupExts(this.groupExts);
-    const t = e.length, o = 1 + Math.max(...e.map((l) => l.rowIndex));
-    console.info("max  row/col:", o + "/" + t);
-    const s = [];
-    I.iterateThrowColumns(s, this.groupExts), console.info(s);
-    const i = Array.from(Array(o).keys()).map((l) => []);
-    let r = I.buildArrayOfArrays(e, i);
-    return console.table(r), r;
+    const e = I.flattenGroupExts(this.groupExts), t = 1 + Math.max(...e.map((r) => r.rowIndex)), o = [];
+    I.iterateThrowColumns(o, this.groupExts);
+    const s = Array.from(Array(t).keys()).map((r) => []), i = I.buildArrayOfArrays(e, s);
+    return console.table(i), i;
   }
   changeColumnOrder(e, t) {
   }
@@ -4028,8 +4197,6 @@ class jt {
   getYPosByRowIndex(e) {
     return 0;
   }
-  init() {
-  }
   getRowHeight(e) {
     return this.defaultRowHeight;
   }
@@ -4052,25 +4219,29 @@ class jt {
   setValue(e, t, o) {
     return !1;
   }
+  toggleHeaderGroup(e) {
+    const t = this.arr[e.rowIdx][e.colIdx];
+    return t != null && t.toggle && t.visibility !== "always" && (t.closed = !t.closed, this.init()), I.buildColumnDefs(this.groupExts);
+  }
 }
-class Xt {
+class Kt {
   filterPredict(e, t, o = this.objectToString.bind(this)) {
     if (!e)
       return !1;
     if (!t)
       return !0;
     t = t.toLowerCase();
-    const s = "+", i = "-", r = t.toLowerCase().split(" ").filter((c) => c !== s && c !== i && c !== ""), l = r.filter((c) => !c.startsWith(s) && !c.startsWith(i)), n = r.filter((c) => c.startsWith(s)).map((c) => c.replace(/\+/g, "")), d = r.filter((c) => c.startsWith(i)).map((c) => c.replace(/-/g, ""));
-    let a = !l.length;
-    for (let c = 0; c < l.length; c++)
-      (a || o(e).includes(l[c])) && (a = !0);
+    const s = "+", i = "-", r = t.toLowerCase().split(" ").filter((h) => h !== s && h !== i && h !== ""), n = r.filter((h) => !h.startsWith(s) && !h.startsWith(i)), l = r.filter((h) => h.startsWith(s)).map((h) => h.replace(/\+/g, "")), d = r.filter((h) => h.startsWith(i)).map((h) => h.replace(/-/g, ""));
+    let a = !n.length;
+    for (let h = 0; h < n.length; h++)
+      (a || o(e).includes(n[h])) && (a = !0);
     if (!a)
       return !1;
-    for (let c = 0; c < n.length; c++)
-      if (!o(e).includes(n[c]))
+    for (let h = 0; h < l.length; h++)
+      if (!o(e).includes(l[h]))
         return !1;
-    for (let c = 0; c < d.length; c++)
-      if (o(e).includes(d[c]))
+    for (let h = 0; h < d.length; h++)
+      if (o(e).includes(d[h]))
         return !1;
     return !0;
   }
@@ -4080,15 +4251,15 @@ class Xt {
     if (!t)
       return [...e];
     t = t.toLowerCase();
-    const s = "+", i = "-", r = t.toLowerCase().split(" ").filter((a) => a !== s && a !== i && a !== ""), l = r.filter((a) => !a.startsWith(s) && !a.startsWith(i)), n = r.filter((a) => a.startsWith(s)).map((a) => a.replace(/\+/g, "")), d = r.filter((a) => a.startsWith(i)).map((a) => a.replace(/-/g, ""));
+    const s = "+", i = "-", r = t.toLowerCase().split(" ").filter((a) => a !== s && a !== i && a !== ""), n = r.filter((a) => !a.startsWith(s) && !a.startsWith(i)), l = r.filter((a) => a.startsWith(s)).map((a) => a.replace(/\+/g, "")), d = r.filter((a) => a.startsWith(i)).map((a) => a.replace(/-/g, ""));
     return e == null ? void 0 : e.filter((a) => {
-      let c = !l.length;
-      for (let u = 0; u < l.length; u++)
-        (c || o(a).includes(l[u])) && (c = !0);
-      if (!c)
-        return !1;
+      let h = !n.length;
       for (let u = 0; u < n.length; u++)
-        if (!o(a).includes(n[u]))
+        (h || o(a).includes(n[u])) && (h = !0);
+      if (!h)
+        return !1;
+      for (let u = 0; u < l.length; u++)
+        if (!o(a).includes(l[u]))
           return !1;
       for (let u = 0; u < d.length; u++)
         if (o(a).includes(d[u]))
@@ -4107,20 +4278,20 @@ class Xt {
     return t.join(" ").toLowerCase();
   }
 }
-class Yt {
+class Ut {
   static bodyRenderer(e) {
     return new T(void 0, e, void 0);
   }
 }
-class Kt {
+class qt {
   constructor(e, t = !0, o = !1) {
     this.property = e, this.skipCheckableCheck = t, this.readonly = o;
   }
-  render(e, t, o, s, i, r, l) {
+  render(e, t, o, s, i, r, n) {
     if (this.readonly || this.skipCheckableCheck || i.isRowCheckable(t)) {
-      l.addClass(e, "ge-table-row-checkbox-div");
-      const n = i.getRowByIndex(t), a = i.getValueByT(n, this.property) === !0 ? "checked" : "", c = this.readonly ? " readonly " : "";
-      if (l.addClass(e, "ge-padding-property-checkbox"), e.innerHTML = `
+      n.addClass(e, "ge-table-row-checkbox-div");
+      const l = i.getRowByIndex(t), a = i.getValueByT(l, this.property) === !0 ? "checked" : "", h = this.readonly ? " readonly " : "";
+      if (n.addClass(e, "ge-padding-property-checkbox"), e.innerHTML = `
         <input
           type="checkbox"
           data-area="${s}"
@@ -4129,20 +4300,20 @@ class Kt {
           data-property-index="${this.property}"
           data-input-type="checkbox"
           ${a}
-          ${c}
+          ${h}
           class="ge-input-checkbox">`, !this.readonly) {
         const u = e.querySelector(".ge-input-checkbox");
-        u && u.addEventListener("click", (m, b) => (n[this.property] = !n[this.property], !0));
+        u && u.addEventListener("click", (w, f) => (l[this.property] = !l[this.property], !0));
       }
     }
   }
 }
-class Ut {
-  render(e, t, o, s, i, r, l) {
+class Jt {
+  render(e, t, o, s, i, r, n) {
     r && (e.innerText = new Date(r).toISOString());
   }
 }
-class qt {
+class Qt {
   constructor() {
     this.formatter = new Intl.DateTimeFormat("de-DE", {
       year: "numeric",
@@ -4150,37 +4321,37 @@ class qt {
       day: "2-digit"
     });
   }
-  render(e, t, o, s, i, r, l) {
+  render(e, t, o, s, i, r, n) {
     if (r) {
-      let n = "";
+      let l = "";
       try {
-        n = this.formatter.format(new Date(r));
+        l = this.formatter.format(new Date(r));
       } catch {
-        n = r;
+        l = r;
       }
       e.innerHTML = `
           <div class="ge-table-label-div" data-row-index="${t}" data-col-index="${o}" data-area="${s}" style="position: relative; background: transparent; width: 100%; height: 100%;">
-            <div class="ge-table-label" data-row-index="${t}" data-col-index="${o}" data-area="${s}">${n}</div>
+            <div class="ge-table-label" data-row-index="${t}" data-col-index="${o}" data-area="${s}">${l}</div>
           </div>`;
     }
   }
 }
-class Jt {
-  render(e, t, o, s, i, r, l) {
+class Zt {
+  render(e, t, o, s, i, r, n) {
     r && (e.innerText = new Date(r).toLocaleDateString());
   }
 }
-class Qt {
-  render(e, t, o, s, i, r, l) {
+class eo {
+  render(e, t, o, s, i, r, n) {
     r === "male" || r === "m" ? e.innerText = "♂" : (r === "female" || r === "f") && (e.innerText = "♀");
   }
 }
-class Zt {
+class to {
   constructor(e = 100, t = !1) {
     this.maxValue = e, this.labelVisible = t;
   }
-  render(e, t, o, s, i, r, l) {
-    if (l.addClass(e, "ge-progressbar-div"), !isNaN(r)) {
+  render(e, t, o, s, i, r, n) {
+    if (n.addClass(e, "ge-progressbar-div"), !isNaN(r)) {
       const d = Number(r) * 100 / this.maxValue, a = this.labelVisible ? Math.round(d) + "%" : "";
       e.innerHTML = `
         <div class="ge-table-label-div"
@@ -4205,58 +4376,58 @@ class Zt {
     }
   }
 }
-class eo {
-  render(e, t, o, s, i, r, l) {
+class oo {
+  render(e, t, o, s, i, r, n) {
     r === "true" || r === !0 ? e.innerHTML = '<span class="ge-true-text-color">✅</span>' : r === "false" || r === !1 ? e.innerHTML = '<span class="ge-false-text-color">❌</span>' : e.innerText = "";
   }
 }
-class to {
-  render(e, t, o, s, i, r, l) {
+class so {
+  render(e, t, o, s, i, r, n) {
     r && (e.innerText = new Date(r).toISOString().replace(/T/g, " ").replace(/\..*/g, ""));
   }
 }
-class oo {
+class io {
   constructor(e = Number.MIN_SAFE_INTEGER, t = Number.MAX_SAFE_INTEGER) {
     this.min = e, this.max = t;
   }
-  render(e, t, o, s, i, r, l) {
-    r && (e.innerText = r, (typeof r == "string" || isNaN(r) || r < this.min || r > this.max) && l.addClass(e, "ge-cell-error"));
+  render(e, t, o, s, i, r, n) {
+    r && (e.innerText = r, (typeof r == "string" || isNaN(r) || r < this.min || r > this.max) && n.addClass(e, "ge-cell-error"));
   }
 }
-class so {
+class ro {
   constructor(e) {
     this.property = e;
   }
-  render(e, t, o, s, i, r, l) {
-    l.addClass(e, "ge-star-rating-div");
-    const n = i.getRowByIndex(t), d = +("" + i.getValueByT(n, this.property));
+  render(e, t, o, s, i, r, n) {
+    n.addClass(e, "ge-star-rating-div");
+    const l = i.getRowByIndex(t), d = +("" + i.getValueByT(l, this.property));
     if (!isNaN(d)) {
       const a = [];
       for (let u = 0; u < d; u++)
         a.push("★");
-      const c = a.join(" ");
+      const h = a.join(" ");
       e.innerHTML = `
           <div class="ge-table-label-div" data-row-index="${t}" data-col-index="${o}" data-area="${s}" style="position: relative; background: transparent; width: 100%; height: 100%;">
-            <div class="ge-table-label" data-row-index="${t}" data-col-index="${o}" data-area="${s}">${c}</div>
+            <div class="ge-table-label" data-row-index="${t}" data-col-index="${o}" data-area="${s}">${h}</div>
           </div>`;
     }
   }
 }
-class io {
+class lo {
   constructor(e, t = 100, o = !1) {
     this.property = e, this.maxValue = t, this.labelVisible = o;
   }
-  render(e, t, o, s, i, r, l) {
-    l.addClass(e, "ge-star-rating-div");
-    const n = i.getRowByIndex(t), d = +("" + i.getValueByT(n, this.property));
+  render(e, t, o, s, i, r, n) {
+    n.addClass(e, "ge-star-rating-div");
+    const l = i.getRowByIndex(t), d = +("" + i.getValueByT(l, this.property));
     if (!isNaN(d)) {
-      const a = d * 100 / this.maxValue, c = this.labelVisible ? Math.round(a) + "%" : "";
+      const a = d * 100 / this.maxValue, h = this.labelVisible ? Math.round(a) + "%" : "";
       e.innerHTML = `
           <div class="ge-table-label-div"
           data-row-index="${t}"
           data-col-index="${o}"
           data-area="${s}"
-          title="${c}"
+          title="${h}"
           style="position: relative; background: transparent; width: 100%; height: 100%;">
               <div class="ge-table-progress-container"
                   style="width:100%;height:50%;padding:0;margin-top:6px;"
@@ -4274,8 +4445,8 @@ class io {
     }
   }
 }
-class ro {
-  render(e, t, o, s, i, r, l) {
+class no {
+  render(e, t, o, s, i, r, n) {
     if (r) {
       e.innerHTML = `
           <div 
@@ -4289,37 +4460,37 @@ class ro {
               data-row-index="${t}" 
               data-col-index="${o}" 
               data-area="${s}">${r}</div></div>`;
-      const n = Number(r);
-      n > 0 ? l.addClass(e, "ge-positive-text-color") : n < 0 && l.addClass(e, "ge-negative-text-color");
+      const l = Number(r);
+      l > 0 ? n.addClass(e, "ge-positive-text-color") : l < 0 && n.addClass(e, "ge-negative-text-color");
     }
   }
 }
-const lo = function(h, e, t) {
-  return h ? Number(h) : "";
+const ao = function(c, e, t) {
+  return c ? Number(c) : "";
 };
-class Se {
+class xe {
   constructor(e) {
     this.options = e;
   }
   static create(e) {
-    return new Se(
-      e.map((t) => new Ue(t, t))
+    return new xe(
+      e.map((t) => new Je(t, t))
     );
   }
-  render(e, t, o, s, i, r, l) {
+  render(e, t, o, s, i, r, n) {
     if (i.isEditable(t, o)) {
-      l.addClass(e, "ge-table-row-select-div");
-      const n = i.getValueAt(t, o);
+      n.addClass(e, "ge-table-row-select-div");
+      const l = i.getValueAt(t, o);
       let d = [];
-      for (let c of this.options) {
-        const u = c.value === n ? " selected " : "";
-        d.push(`<option value="${c.value}" ${u}>${c.label}</option>`);
+      for (let h of this.options) {
+        const u = h.value === l ? " selected " : "";
+        d.push(`<option value="${h.value}" ${u}>${h.label}</option>`);
       }
       const a = d.join("");
       e.innerHTML = `
             <select
                 type="text"
-                value="${n}"
+                value="${l}"
                 autofocus
                 data-listen="change"
                 data-area="${s}"
@@ -4331,7 +4502,7 @@ class Se {
     }
   }
 }
-class no {
+class ho {
   constructor(e, t, o) {
     this.r = e, this.g = t, this.b = o;
   }
@@ -4346,151 +4517,151 @@ class W {
     return (e - t) / (o - t) * (i - s) + s;
   }
   static getTwoColorGradientRGB(e, t) {
-    const o = W.normalize(e, t.minValue, t.maxValue, 0, 1), s = t.maxColor.r - t.minColor.r, i = t.maxColor.g - t.minColor.g, r = t.maxColor.b - t.minColor.b, l = s * o + t.minColor.r, n = i * o + t.minColor.g, d = r * o + t.minColor.b;
-    return `rgb(${Math.round(l)}, ${Math.round(n)}, ${Math.round(d)})`;
+    const o = W.normalize(e, t.minValue, t.maxValue, 0, 1), s = t.maxColor.r - t.minColor.r, i = t.maxColor.g - t.minColor.g, r = t.maxColor.b - t.minColor.b, n = s * o + t.minColor.r, l = i * o + t.minColor.g, d = r * o + t.minColor.b;
+    return `rgb(${Math.round(n)}, ${Math.round(l)}, ${Math.round(d)})`;
   }
   static getThreeColorGradientRGB(e, t) {
     return e < t.middleValue ? W.getTwoColorGradientRGB(e, new ue(t.minValue, t.minColor, t.middleValue, t.middleColor)) : e > t.middleValue ? W.getTwoColorGradientRGB(e, new ue(t.middleValue, t.middleColor, t.maxValue, t.maxColor)) : `rgb(${t.middleColor.r}, ${t.middleColor.g}, ${t.middleColor.b})`;
   }
 }
-class ao {
+class co {
   constructor(e, t, o, s, i, r) {
     this.minValue = e, this.minColor = t, this.middleValue = o, this.middleColor = s, this.maxValue = i, this.maxColor = r;
   }
 }
 export {
-  Z as AbstractAreaModel,
-  Ht as AreaMapFactory,
-  zt as AreaModel,
-  _ as AreaModelArrayOfArrays,
-  jt as AreaModelCellGroups,
-  D as AreaModelHidden,
+  ee as AbstractAreaModel,
+  Gt as AreaMapFactory,
+  Xt as AreaModel,
+  D as AreaModelArrayOfArrays,
+  Yt as AreaModelCellGroups,
+  _ as AreaModelHidden,
   he as AreaModelObjectArrayWithColumndefs,
-  Ye as AreaModelObjectyArray,
+  Ue as AreaModelObjectyArray,
   ne as AreaModelTree,
   T as AreaObjectMap,
-  Nt as AutoRestoreOptions,
-  qe as CellGroup,
-  Je as CellGroupExt,
-  Qe as CellGroupExtCellRenderer,
-  v as CellRange,
+  jt as AutoRestoreOptions,
+  Qe as CellGroup,
+  Ze as CellGroupExt,
+  et as CellGroupExtCellRenderer,
+  R as CellRange,
   I as CellgroupFactory,
-  Kt as CheckboxBooleanPropertyCellRenderer,
+  qt as CheckboxBooleanPropertyCellRenderer,
   ce as CheckboxCellRenderer,
-  Bt as CheckboxColumnDef,
-  Xe as CheckboxModel,
-  _t as ChunkData,
-  Ie as ColAndRowspanModel,
-  Ae as CollapsedExpandedData,
-  no as ColorRgb,
-  B as ColumnDef,
-  xe as ConvenienceDomService,
+  Wt as CheckboxColumnDef,
+  Ke as CheckboxModel,
+  $t as ChunkData,
+  De as ColAndRowspanModel,
+  Ee as CollapsedExpandedData,
+  ho as ColorRgb,
+  V as ColumnDef,
+  Ce as ConvenienceDomService,
   se as CopyService,
   fe as CssVars,
-  qt as DateToIntlDDMMYYYYCellRenderer,
-  Ut as DateToIsoCellRenderer,
-  Jt as DateToLocaleDateCellRenderer,
-  to as DateToTecCellRenderer,
-  V as DefaultRowHeights,
-  ke as EleScope,
+  Qt as DateToIntlDDMMYYYYCellRenderer,
+  Jt as DateToIsoCellRenderer,
+  Zt as DateToLocaleDateCellRenderer,
+  so as DateToTecCellRenderer,
+  H as DefaultRowHeights,
+  Te as EleScope,
   oe as EventAdapter,
   re as FalseFn,
-  We as FocusModel,
-  $e as GeCellIndices,
+  Ne as FocusModel,
+  Pe as GeCellIndices,
   W as GeCssColorUtil,
-  Xt as GeFilterService,
-  Wt as GeKeyEvent,
+  Kt as GeFilterService,
+  Nt as GeKeyEvent,
   J as GeModelChangeEvent,
   K as GeMouseEvent,
   $ as GeoData,
-  P as Icon,
-  Dt as IndexAndPx,
-  Be as InputCellRenderer,
-  De as InputHandler,
+  O as Icon,
+  Ot as IndexAndPx,
+  We as InputCellRenderer,
+  Oe as InputHandler,
   F as LicenseManager,
-  Qt as MaleFemaleToIconCellRenderer,
-  Ce as MouseHandler,
-  ye as MouseTargetData,
-  Zt as NumberCellProgressBarCellRenderer,
-  oo as NumberCellRenderer,
-  Fe as OsxShortcutActionIdMapping,
+  eo as MaleFemaleToIconCellRenderer,
+  Re as MouseHandler,
+  ve as MouseTargetData,
+  to as NumberCellProgressBarCellRenderer,
+  io as NumberCellRenderer,
+  He as OsxShortcutActionIdMapping,
   de as Padding,
-  ro as PositiveAndNegativeNumberRenderer,
-  io as ProgressBarCellRenderer,
-  Te as RenderScope,
-  Yt as Renderer,
-  Ke as RequestChunk,
-  Se as SelectCellRenderer,
-  He as SelectionModel,
-  Pe as SelectionService,
-  Oe as ShortcutService,
-  Ve as SimpleDomService,
-  f as Size,
-  _e as SortItem,
-  be as SortedOptions,
-  so as StarRatingCellRenderer,
-  Ee as StoreStateCollapsedExpandService,
-  Re as StoreStateScrollPosService,
-  Me as StoreStateSortingService,
-  ve as TableApi,
-  Gt as TableCellUpdateEvent,
-  L as TableFactory,
+  no as PositiveAndNegativeNumberRenderer,
+  lo as ProgressBarCellRenderer,
+  _e as RenderScope,
+  Ut as Renderer,
+  qe as RequestChunk,
+  xe as SelectCellRenderer,
+  Ge as SelectionModel,
+  Fe as SelectionService,
+  Ve as ShortcutService,
+  Be as SimpleDomService,
+  m as Size,
+  $e as SortItem,
+  pe as SortedOptions,
+  ro as StarRatingCellRenderer,
+  Ie as StoreStateCollapsedExpandService,
+  Me as StoreStateScrollPosService,
+  ke as StoreStateSortingService,
+  Ae as TableApi,
+  zt as TableCellUpdateEvent,
+  P as TableFactory,
   N as TableModel,
-  Tt as TableModelAndOptions,
+  _t as TableModelAndOptions,
   j as TableOptions,
-  pe as TableScope,
-  ao as ThreeColorGradientArg,
+  be as TableScope,
+  co as ThreeColorGradientArg,
   ae as TreeCheckboxModel,
   Y as TreeFactory,
   ge as TreeOptions,
   ie as TreeRow,
-  je as TreeRowService,
-  eo as TrueFalseCellRenderer,
-  ze as TrueFn,
+  Ye as TreeRowService,
+  oo as TrueFalseCellRenderer,
+  Xe as TrueFn,
   ue as TwoColorGradientArg,
-  Ue as ValueLabel,
+  Je as ValueLabel,
   Le as WindowsShortcutActionIdMapping,
-  It as actionIds,
-  Ot as allCenter,
-  Ft as allLeft,
-  Vt as allRight,
-  Pt as bodyCenter,
-  $t as bodyLeft,
+  Dt as actionIds,
+  Vt as allCenter,
+  Ht as allLeft,
+  Bt as allRight,
+  Ft as bodyCenter,
+  Pt as bodyLeft,
   Lt as bodyRight,
-  lo as editInputPipeForNumber,
+  ao as editInputPipeForNumber,
   U as getAreaIdentByString,
   z as isAreaModelTree,
-  we as isCheckboxColumnDef,
-  O as isTreeRow,
-  kt as px0,
-  Mt as px10,
-  St as px100,
-  mt as px110,
-  ft as px120,
-  pt as px130,
-  bt as px140,
-  gt as px150,
-  ut as px160,
-  ct as px170,
-  ht as px180,
-  dt as px190,
-  Et as px20,
+  ye as isCheckboxColumnDef,
+  L as isTreeRow,
+  Tt as px0,
+  kt as px10,
+  xt as px100,
+  St as px110,
+  wt as px120,
+  mt as px130,
+  ft as px140,
+  bt as px150,
+  pt as px160,
+  gt as px170,
+  ut as px180,
+  ct as px190,
+  It as px20,
   le as px200,
-  at as px210,
-  nt as px220,
-  lt as px230,
-  rt as px240,
-  it as px250,
-  st as px260,
-  ot as px270,
-  tt as px280,
-  et as px290,
-  At as px30,
-  Ze as px300,
-  Rt as px40,
-  vt as px50,
-  Ct as px60,
-  yt as px70,
-  xt as px80,
-  wt as px90
+  ht as px210,
+  dt as px220,
+  at as px230,
+  nt as px240,
+  lt as px250,
+  rt as px260,
+  it as px270,
+  st as px280,
+  ot as px290,
+  Et as px30,
+  tt as px300,
+  Mt as px40,
+  At as px50,
+  Rt as px60,
+  vt as px70,
+  Ct as px80,
+  yt as px90
 };