@guiexpert/table 1.1.9 → 1.1.10

package/index.js

@@ -78,7 +78,7 @@ class ge {
     this.arrowExpanded = e, this.arrowCollapsed = t, this.arrowPlaceholder = o, this.arrowExpandCollapseAll = s;
   }
 }
-class be {
+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;
   }
@@ -169,14 +169,14 @@ class Ce {
     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, p = this.domService.createElement("div");
-    this.domService.addClass(p, "ge-table-col-div"), this.domService.addClass(p, `ge-table-col-div-${o.index}`), this.domService.setAttribute(p, "data-col-index", `${o.index}`), this.domService.setAttribute(p, "data-row-index", `${s}`), this.domService.setAttribute(p, "data-area", `${r}`);
+    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(p, `ge-table-column-${g}`), this.domService.setStyle(p, "display", "clip"), this.domService.setStyle(p, "position", "absolute"), this.domService.setStyle(p, "left", `${o.left}px`), this.domService.setStyle(p, "top", `${o.top}px`), this.domService.setStyle(p, "width", `${o.width}px`), this.domService.setStyle(p, "height", `${o.height}px`), d && d !== "none" && (this.domService.addClass(p, "ge-table-col-tree"), this.addArrowDiv(p, d, w, s, i, r)), f && i === 0 && h && this.addCheckboxToDiv(p, h, r, s), l) {
-      const b = d !== "none" && i === 0;
-      this.addLabelDiv(p, l, b, s, i, r);
+    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 u && this.addSortedIcon(p, u, a == null ? void 0 : a.sortedOptions, i), this.domService.appendChild(t, p), p;
+    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" : "";
@@ -203,7 +203,7 @@ class Ce {
       }
     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;
@@ -381,19 +381,19 @@ class Re {
     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() {
@@ -742,6 +742,8 @@ class Te {
       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")
@@ -916,7 +918,7 @@ class R {
     return e >= this.r1 && e <= this.r2 && t >= this.c1 && t <= this.c2;
   }
 }
-class _e {
+class De {
   constructor(e, t) {
     this.tableModel = e, this.areaModel = t, this.colAndRowspanRanges = void 0;
   }
@@ -954,17 +956,17 @@ class T {
     this.header = e, this.body = t, this.footer = o;
   }
 }
-class De extends Te {
+class _e extends Te {
   constructor(e, t, o, s) {
     var r, n;
-    super(e, t, o, s), this.scrollLeft = 0, this.scrollViewportLeft = 0, this.scrollFactorY = 0, this.scrollFactorX = 0, this.cleanupFunctions = {
+    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), (n = this.tableOptions) != null && n.getFocusModel && (this.getFocusModel = this.tableOptions.getFocusModel), z(t.getAreaModel("body")) && (this.tree = !0), ["header", "body", "footer"].forEach(
+    }, 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[l] = new _e(t, t.getAreaModel(l)), (d = this.colAndRowspanModels[l]) == null || d.init();
+        this.colAndRowspanModels[l] = new De(t, t.getAreaModel(l)), (d = this.colAndRowspanModels[l]) == null || d.init();
       }
     );
   }
@@ -1034,6 +1036,10 @@ class De extends Te {
       }
     ), 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");
@@ -1094,52 +1100,52 @@ class De extends Te {
     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 n = 0, l = this.areaBodyCenterGeo.width, d = this.tableModel.getPadding(), a = this.tableModel.getAreaModel(e), h = a.getRowCount();
-    for (e === "header" && console.info("rowCount", h); this.cleanupFunctions[e].length; ) {
-      const b = this.cleanupFunctions[e].shift();
-      b && b();
+    for (; this.cleanupFunctions[e].length; ) {
+      const p = this.cleanupFunctions[e].shift();
+      p && p();
     }
     let u = t;
-    const w = this.tableModel.getColumnCount(), f = this.tableModel.getFixedRightColumnCount(), p = this.tableModel.getFixedLeftColumnCount();
-    for (let b = 0; b < h; b++) {
-      const C = u, v = b === h - 1, A = this.tableModel.getRowHeight(e, b);
+    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 = b;
-        let y = { left: n, width: l, height: A, top: C, index: b }, S = this.dom.addRowDiv(s, y, b, e, "center");
-        const k = p;
+        this.firstVisibleRowIndex = p;
+        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: y,
           parent: S,
-          rowIndex: b,
+          rowIndex: p,
           columnIndexStart: k,
           columnIndexEnd: w - f - 1,
           verticalFixed: !1,
           lastRowOfModel: v
-        }), d.left > 0 && (y = { left: n, width: this.areaBodyWestGeo.width, height: A, top: C, index: b }, S = this.dom.addRowDiv(o, y, b, e, "west"), this.adjustColumnsToRowParent({
+        }), 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: y,
           parent: S,
-          rowIndex: b,
+          rowIndex: p,
           columnIndexStart: 0,
           columnIndexEnd: k - 1,
           verticalFixed: !0,
           lastRowOfModel: v
-        })), d.right > 0 && (y = { left: n, width: this.areaBodyEastGeo.width, height: A, top: C, index: b }, S = this.dom.addRowDiv(i, y, b, e, "east"), this.adjustColumnsToRowParent({
+        })), 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: y,
           parent: S,
-          rowIndex: b,
+          rowIndex: p,
           columnIndexStart: w - f,
           columnIndexEnd: w - 1,
           verticalFixed: !0,
           lastRowOfModel: v
-        })), e === "header" && this.tree && b === h - 1) {
+        })), e === "header" && this.tree && p === h - 1) {
           const M = this.dom.applyStyle(
             this.dom.setAttribute(
               this.dom.addDiv(S, new $(16, 20, 20, 8)),
@@ -1158,11 +1164,11 @@ class De extends Te {
         break;
     }
     if (this.colAndRowspanModels && this.colAndRowspanModels[e]) {
-      const b = ((g = this.colAndRowspanModels[e]) == null ? void 0 : g.getRanges()) ?? [];
-      if (b.length)
-        for (const C of b) {
+      const p = ((g = this.colAndRowspanModels[e]) == null ? void 0 : g.getRanges()) ?? [];
+      if (p.length)
+        for (const C of p) {
           let v = 0, A = s.child, y = "center";
-          if (C.c1 < p)
+          if (C.c1 < b)
             A = o.child, y = "west";
           else if (f > 0 && C.c1 >= w - f)
             A = i.child, y = "east";
@@ -1185,13 +1191,13 @@ class De extends Te {
    * @protected
    */
   drawBigCell(e, t, o, s, i, r) {
-    const n = o + this.getRowHeights(0, e.r1 - 1, s).reduce((g, b) => g + b, 0), l = 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 >= l - d && (a = l - d);
-    const h = t + this.getColumnWidths(a, e.c1 - 1).reduce((g, b) => g + b, 0), u = this.getRowHeights(e.r1, e.r2, s).reduce((g, b) => g + b, 0), w = this.getColumnWidths(e.c1, e.c2).reduce((g, b) => g + b, 0);
+    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 p = this.getSelectionModel ? this.getSelectionModel() : void 0;
-    p && (f = p.getSelectionCount(e.r1, e.c1) > 0), e.gammaRange ? this.renderCell({
+    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,
@@ -1252,7 +1258,7 @@ class De extends Te {
     verticalFixed: d = !1,
     lastRowOfModel: a = !1
   }) {
-    var p;
+    var b;
     this.scrollViewportLeft = this.scrollViewport.scrollLeft;
     let h = 0;
     if (!d) {
@@ -1262,27 +1268,27 @@ class De extends Te {
     const u = 0, w = !!(e === "body" && t);
     let f = h;
     for (let g = n; g <= l; g++) {
-      const b = f, C = this.tableModel.getColumnWidth(g);
-      if (C > 0 && b + C > 0) {
+      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] && (p = this.colAndRowspanModels[e]) != null && p.isInRange(r, g) && (k = !0), this.draggingTargetColumnIndex === g && e !== "header") {
-          this.renderDragTargetDiv(i, b, u, S, v);
-          const M = { left: b, top: u, width: S, height: v };
+        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(k, w, t, o, r, g, i, b, u, S, v);
+          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,
             rowIndex: r,
             columnIndex: g,
-            left: b,
+            left: p,
             top: u,
             width: S,
             height: v,
@@ -1293,7 +1299,7 @@ class De extends Te {
           }), e === "header" && this.tableOptions.columnsResizable && this.renderHeaderCellResizeHandle({
             rowIndex: r,
             columnIndex: g,
-            cellLeft: b,
+            cellLeft: p,
             cellTop: u,
             cellWidth: S,
             cellHeight: v,
@@ -1323,10 +1329,10 @@ class De extends Te {
     lastRowOfModel: h
   }) {
     var te;
-    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 }, p = e.getRowByIndex(s);
+    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(p)) {
-      const x = p;
+    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;
@@ -1441,6 +1447,29 @@ class De extends Te {
   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)
@@ -1454,7 +1483,7 @@ class De extends Te {
       if (w) {
         const f = w.getSelectionCount(i, r);
         u = f > 0;
-        for (let p = 0; p < f; p++) {
+        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`, n)
@@ -1853,7 +1882,7 @@ class j {
       header: 34,
       body: 34,
       footer: 34
-    }, 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 be(), this.sortOrder = ["asc", "desc"], this.getEditRenderer = (e, t) => new We(), this.getSelectionModel = () => ze, this.getFocusModel = () => je;
+    }, 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 Z = class X {
@@ -1942,7 +1971,7 @@ Z.columnSeparatorChar = "	";
 Z.rowSeparatorChar = `
 `;
 let se = Z;
-class pe extends De {
+class be extends _e {
   constructor(e, t, o, s, i, r = new se()) {
     var n;
     if (super(
@@ -1950,7 +1979,7 @@ class pe extends De {
       t,
       new Ce(o),
       s
-    ), 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, i || (this.eventListener = new oe()), (n = this.tableOptions) != null && n.autoRestoreOptions) {
+    ), 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)));
     }
@@ -1968,7 +1997,7 @@ class pe extends De {
    * @return {TableScope} - The newly created TableScope instance.
    */
   static create(e, t, o = new j(), s = new oe(), i = new Be(), r = new se()) {
-    return new pe(
+    return new be(
       e,
       t,
       i,
@@ -2059,9 +2088,10 @@ class pe extends De {
    * 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.
@@ -2071,7 +2101,7 @@ class pe extends De {
    * @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.
@@ -2224,6 +2254,9 @@ class pe extends De {
     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.
    *
@@ -2608,8 +2641,8 @@ class m {
 }
 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, p, 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 = p, this.isVisible = g, this.visible = !0;
+  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(
@@ -2648,7 +2681,7 @@ class V {
     );
   }
 }
-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"), bt = new m(160, "px"), pt = 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");
+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]);
@@ -2709,7 +2742,9 @@ class ee {
     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 n;
@@ -2727,7 +2762,7 @@ class ee {
   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;
@@ -2743,7 +2778,7 @@ class ee {
       this.yPositions[t + 1] = this.getRowHeight(t) + this.yPositions[t];
   }
 }
-class _ extends ee {
+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];
   }
@@ -2771,7 +2806,7 @@ class _ extends ee {
     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;
   }
@@ -3075,8 +3110,8 @@ class Ke {
 class N {
   constructor(e, t, o, s = 0, i = 0, r = !1, n = new H(), l = [], d = [], a = -1, h = 0, u = 400, w = () => {
   }) {
-    var f, p, g, b;
-    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 : (p = this.columnSizes) != null && p.length && (this.columnCount = (g = this.columnSizes) == null ? void 0 : g.length)), (b = this.columnDefs) != null && b.length && ye(this.columnDefs[0]) && !t.rowSelectionModel && (t.rowSelectionModel = new Ke());
+    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();
@@ -3375,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.
@@ -3395,11 +3436,11 @@ class N {
       if (i.width.unit === "%" && e) {
         let r = Math.floor(i.width.value * e / 100);
         if (i.minWidth) {
-          let n = i.minWidth.unit === "px" ? i.minWidth.value : Math.floor(i.minWidth.value * e / 100);
+          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 n = i.maxWidth.unit === "px" ? i.maxWidth.value : Math.floor(i.maxWidth.value * e / 100);
+          const n = i.maxWidth.unit === "px" ? i.maxWidth.value : Math.floor(i.maxWidth.value * e / 100);
           r = Math.min(n, r);
         }
         return r;
@@ -3486,7 +3527,7 @@ class he extends Ue {
 }
 class P {
   static createTableModel(e) {
-    var t, o, s, i, r, n, l, d, a, h, u, w, f, p;
+    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;
@@ -3504,22 +3545,22 @@ class P {
           g > -1 && (e.defaultRowHeights.footer = g);
         }
       }
-    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 _(
+    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 || ((h = e.footerData) != null && h.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 && L(e.rows[0])) {
           const g = e.rows;
@@ -3537,12 +3578,12 @@ class P {
             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 && ((f = e.tableOptions) != null && f.getSelectionModel) && (e.getSelectionModel = (p = e.tableOptions) == null ? void 0 : p.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,
@@ -3577,9 +3618,9 @@ class P {
         t
       );
       return (n || o.showCheckboxWihoutExtraColumn) && (d.rowSelectionModel = new ae(l)), P.createByAreaModelsParam({
-        headerAreaModel: new _("header", [t.map((a) => a.headerLabel)], r.header),
+        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,
@@ -3612,7 +3653,7 @@ class P {
       e.columnSizes ?? []
     );
   }
-  static createByAreaModels(e = new D(), t, o = new D(), s = 0, i = 0, r = !1, n = new H(), l, d = [], a = -1, h) {
+  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,
@@ -3629,9 +3670,9 @@ class P {
   }
   static createByAreaModelsParam(e) {
     return P.createByAreaModels(
-      e.headerAreaModel ?? new D(),
+      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,
@@ -3644,8 +3685,8 @@ class P {
   }
   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, n.header, l) : l != null && l.length ? a = new _("header", [l.map((w) => w.headerLabel)], n.header, l) : a = new D();
-    const h = o ? new _("footer", o, n.footer, l) : new D(), u = new he("body", e, l, n.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,
@@ -3659,7 +3700,7 @@ class P {
     );
   }
 }
-const _t = [
+const Dt = [
   "COPY_2_CLIPBOARD",
   "START_EDITING",
   "TOGGLE_SELECTION",
@@ -3677,7 +3718,7 @@ const _t = [
   // "PAGEUP_PRESSED",
   // "PAGEDOWN_PRESSED"
 ];
-class Dt {
+class _t {
   constructor(e, t) {
     this.tableModel = e, this.tableOptions = t;
   }
@@ -4091,7 +4132,7 @@ class Yt {
     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)), console.info("this.arr", this.arr);
+    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);
@@ -4492,9 +4533,9 @@ export {
   ee as AbstractAreaModel,
   Gt as AreaMapFactory,
   Xt as AreaModel,
-  _ as AreaModelArrayOfArrays,
+  D as AreaModelArrayOfArrays,
   Yt as AreaModelCellGroups,
-  D as AreaModelHidden,
+  _ as AreaModelHidden,
   he as AreaModelObjectArrayWithColumndefs,
   Ue as AreaModelObjectyArray,
   ne as AreaModelTree,
@@ -4510,7 +4551,7 @@ export {
   Wt as CheckboxColumnDef,
   Ke as CheckboxModel,
   $t as ChunkData,
-  _e as ColAndRowspanModel,
+  De as ColAndRowspanModel,
   Ee as CollapsedExpandedData,
   ho as ColorRgb,
   V as ColumnDef,
@@ -4547,7 +4588,7 @@ export {
   de as Padding,
   no as PositiveAndNegativeNumberRenderer,
   lo as ProgressBarCellRenderer,
-  De as RenderScope,
+  _e as RenderScope,
   Ut as Renderer,
   qe as RequestChunk,
   xe as SelectCellRenderer,
@@ -4557,7 +4598,7 @@ export {
   Be as SimpleDomService,
   m as Size,
   $e as SortItem,
-  be as SortedOptions,
+  pe as SortedOptions,
   ro as StarRatingCellRenderer,
   Ie as StoreStateCollapsedExpandService,
   Me as StoreStateScrollPosService,
@@ -4566,9 +4607,9 @@ export {
   zt as TableCellUpdateEvent,
   P as TableFactory,
   N as TableModel,
-  Dt as TableModelAndOptions,
+  _t as TableModelAndOptions,
   j as TableOptions,
-  pe as TableScope,
+  be as TableScope,
   co as ThreeColorGradientArg,
   ae as TreeCheckboxModel,
   Y as TreeFactory,
@@ -4580,7 +4621,7 @@ export {
   ue as TwoColorGradientArg,
   Je as ValueLabel,
   Le as WindowsShortcutActionIdMapping,
-  _t as actionIds,
+  Dt as actionIds,
   Vt as allCenter,
   Ht as allLeft,
   Bt as allRight,
@@ -4599,8 +4640,8 @@ export {
   wt as px120,
   mt as px130,
   ft as px140,
-  pt as px150,
-  bt as px160,
+  bt as px150,
+  pt as px160,
   gt as px170,
   ut as px180,
   ct as px190,