@guiexpert/react-table 1.0.5 → 1.0.6

package/index.js

@@ -1,6 +1,6 @@
-import { jsx as Y } from "react/jsx-runtime";
-import { useRef as q, useEffect as U } from "react";
-import J from "react-dom";
+import { jsx as q } from "react/jsx-runtime";
+import { useRef as U, useEffect as J } from "react";
+import Q from "react-dom";
 function O(p) {
   return p && p.type === "TreeRow";
 }
@@ -8,8 +8,8 @@ function $(p) {
   return p && p.type === "AreaModelTree";
 }
 class W {
-  constructor(e = -1, t = -1, s = -1, i = -1, o, r, n, l = 0, a = 0, d = 0, u = "") {
-    this.rowIndex = e, this.rowTop = t, this.columnIndex = s, this.columnLeft = i, this.areaIdent = o, this.sideIdent = r, this.originalEvent = n, this.clickCount = l, this.draggingX = a, this.draggingY = d, this.action = u;
+  constructor(e = -1, t = -1, s = -1, i = -1, o, r, n, l = 0, a = 0, d = 0, S = "") {
+    this.rowIndex = e, this.rowTop = t, this.columnIndex = s, this.columnLeft = i, this.areaIdent = o, this.sideIdent = r, this.originalEvent = n, this.clickCount = l, this.draggingX = a, this.draggingY = d, this.action = S;
   }
   clone() {
     return new W(
@@ -32,7 +32,7 @@ class D {
     this.content = e, this.style = t, this.classes = s;
   }
 }
-class j {
+class X {
   constructor(e = new D(
     ">",
     "transform: rotate(90deg) translate(66%, -66%); transform-origin: 0 0;",
@@ -53,12 +53,12 @@ class j {
     this.arrowExpanded = e, this.arrowCollapsed = t, this.arrowPlaceholder = s, this.arrowExpandCollapseAll = i;
   }
 }
-class X {
+class z {
   constructor(e = new D("↑", "", ["ge-header-sorted-asc"]), t = new D("↓", "", ["ge-header-sorted-desc"]), s = new D("↑", "color:transparent;", [])) {
     this.iconAsc = e, this.iconDesc = t, this.iconPlaceholder = s;
   }
 }
-class Q {
+class Z {
   constructor(e) {
     this.domService = e;
   }
@@ -143,15 +143,15 @@ class Q {
     }
     return this.domService.appendChild(e.child, l), l;
   }
-  addColumnDiv(e, t, s = -1, i = -1, o, r, n = "", l, a, d = void 0, u) {
-    const g = a == null ? void 0 : a.treeOptions, m = a == null ? void 0 : a.showCheckboxWihoutExtraColumn, c = this.domService.createElement("div");
-    this.domService.addClass(c, "ge-table-col-div"), this.domService.addClass(c, `ge-table-col-div-${t.index}`), this.domService.setAttribute(c, "data-col-index", `${t.index}`), this.domService.setAttribute(c, "data-row-index", `${s}`), this.domService.setAttribute(c, "data-area", `${o}`);
-    const b = ((t == null ? void 0 : t.index) ?? 0) % 2 === 0 ? "even" : "odd";
-    if (o === "body" && r === "center" && this.domService.addClass(c, `ge-table-column-${b}`), this.domService.setStyle(c, "display", "clip"), this.domService.setStyle(c, "position", "absolute"), this.domService.setStyle(c, "left", `${t.left}px`), this.domService.setStyle(c, "top", `${t.top}px`), this.domService.setStyle(c, "width", `${t.width}px`), this.domService.setStyle(c, "height", `${t.height}px`), l && l !== "none" && (this.domService.addClass(c, "ge-table-col-tree"), this.addArrowDiv(c, l, g, s, i, o)), m && i === 0 && d && this.addCheckboxToDiv(c, d, o, s), n) {
-      const h = l !== "none" && i === 0;
-      this.addLabelDiv(c, n, h, s, i, o);
+  addColumnDiv(e, t, s = -1, i = -1, o, r, n = "", l, a, d = void 0, S) {
+    const g = a == null ? void 0 : a.treeOptions, m = a == null ? void 0 : a.showCheckboxWihoutExtraColumn, h = this.domService.createElement("div");
+    this.domService.addClass(h, "ge-table-col-div"), this.domService.addClass(h, `ge-table-col-div-${t.index}`), this.domService.setAttribute(h, "data-col-index", `${t.index}`), this.domService.setAttribute(h, "data-row-index", `${s}`), this.domService.setAttribute(h, "data-area", `${o}`);
+    const f = ((t == null ? void 0 : t.index) ?? 0) % 2 === 0 ? "even" : "odd";
+    if (o === "body" && r === "center" && this.domService.addClass(h, `ge-table-column-${f}`), this.domService.setStyle(h, "display", "clip"), this.domService.setStyle(h, "position", "absolute"), this.domService.setStyle(h, "left", `${t.left}px`), this.domService.setStyle(h, "top", `${t.top}px`), this.domService.setStyle(h, "width", `${t.width}px`), this.domService.setStyle(h, "height", `${t.height}px`), l && l !== "none" && (this.domService.addClass(h, "ge-table-col-tree"), this.addArrowDiv(h, l, g, s, i, o)), m && i === 0 && d && this.addCheckboxToDiv(h, d, o, s), n) {
+      const c = l !== "none" && i === 0;
+      this.addLabelDiv(h, n, c, s, i, o);
     }
-    return u && this.addSortedIcon(c, u, a == null ? void 0 : a.sortedOptions, i), this.domService.appendChild(e, c), c;
+    return S && this.addSortedIcon(h, S, a == null ? void 0 : a.sortedOptions, i), this.domService.appendChild(e, h), h;
   }
   addCheckboxToDiv(e, t, s, i) {
     const o = this.domService.createElement("div"), r = t === "full" ? "checked" : "";
@@ -178,7 +178,7 @@ class Q {
       }
     return this.domService.appendChild(e, n), n;
   }
-  addSortedIcon(e, t = "", s = new X(), i = -1) {
+  addSortedIcon(e, t = "", s = new z(), i = -1) {
     const o = this.domService.createElement("div");
     this.domService.addClass(o, "ge-table-sorted-icon-div"), this.domService.setStyle(o, "position", "absolute"), this.domService.setStyle(o, "top", "0"), this.domService.setStyle(o, "right", "0"), this.domService.setStyle(o, "width", "20px"), this.domService.setStyle(o, "background", "transparent"), this.domService.setStyle(o, "cursor", "pointer"), this.domService.setAttribute(o, "data-col-index", `${i}`), this.domService.setAttribute(o, "data-area", "header");
     let r;
@@ -189,15 +189,15 @@ class Q {
       this.domService.addClass(o, a);
     return this.domService.appendChild(e, o), o;
   }
-  addArrowDiv(e, t = "none", s = new j(), i = -1, o = -1, r = "body") {
+  addArrowDiv(e, t = "none", s = new X(), i = -1, o = -1, r = "body") {
     const n = this.domService.createElement("div");
     this.domService.addClass(n, "ge-table-tree-arrow-div"), this.domService.setStyle(n, "display", "inline-block"), this.domService.setStyle(n, "position", ""), this.domService.setStyle(n, "width", "20px"), this.domService.setStyle(n, "background", "transparent"), this.domService.setStyle(n, "cursor", "pointer"), this.domService.setAttribute(n, "data-row-index", `${i}`), this.domService.setAttribute(n, "data-col-index", `${o}`), this.domService.setAttribute(n, "data-area", `${r}`);
     let l;
     t === "expanded" ? l = s.arrowExpanded : t === "collapsed" ? l = s.arrowCollapsed : l = s.arrowPlaceholder;
     const a = l.content, d = this.domService.createText(a);
     this.domService.appendChild(n, d), l.style && this.applyStyleString(n, l.style);
-    for (const u of l.classes)
-      this.domService.addClass(n, u);
+    for (const S of l.classes)
+      this.domService.addClass(n, S);
     return this.domService.appendChild(e, n), n;
   }
   addColumnBorderDivs(e, t, s, i, o) {
@@ -240,7 +240,7 @@ class Q {
   }
 }
 const H = (p) => p === "header" ? "header" : p === "footer" ? "footer" : "body";
-class Z {
+class ee {
   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"));
@@ -252,19 +252,33 @@ class Z {
     }
   }
 }
-class ee {
+class te {
   constructor(e) {
     this.tableScope = e, this.expandedAll = !0, this.mouseDown = !1, this.dragging = !1, this.tableScope.hostElement.addEventListener("click", this.onHostElementClicked.bind(this)), this.tableScope.hostElement.addEventListener("dblclick", this.onHostElementDblClicked.bind(this)), this.tableScope.hostElement.addEventListener("mousedown", this.onMouseDown.bind(this)), this.tableScope.hostElement.addEventListener("mousemove", this.onMouseMove.bind(this)), this.tableScope.hostElement.addEventListener("mouseup", this.onMouseUp.bind(this)), this.tableScope.hostElement.addEventListener("contextmenu", this.onContextmenu.bind(this)), this.tableScope.hostElement._MouseHandler = "true", this.tableScope.scrollViewport.addEventListener("scroll", this.tableScope.adjustAfterScrolling.bind(this.tableScope)), [window, this.tableScope.hostElement].forEach(
       (t) => t.addEventListener("resize", this.tableScope.adjustContainersAndRows.bind(this.tableScope))
     );
   }
+  /**
+   * Handles the "contextmenu" event.
+   *
+   * @private
+   * @param {MouseEvent} evt - The mouse event object.
+   * @return {void}
+   */
   onContextmenu(e) {
     this.mouseEvent = e;
     const t = this.tableScope.createGeMouseEvent(this.mouseEvent);
     this.tableScope.contextmenu(t);
   }
+  /**
+   * Handles the click event on the host element.
+   *
+   * @param {MouseEvent} event - The click event.
+   *
+   * @return {void}
+   */
   onHostElementClicked(e) {
-    const t = new Z(e.target, this.tableScope);
+    const t = new ee(e.target, this.tableScope);
     if (t.action === "toggleExpandCollapseAll")
       this.expandedAll = !this.expandedAll, this.tableScope.toggleExpandCollapseAll(this.expandedAll), e.preventDefault(), e.stopPropagation();
     else if (t.inputType === "checkbox" && t.areaIdent)
@@ -283,6 +297,12 @@ class ee {
     }
     this.publishGeMouseEvent(e, 1);
   }
+  /**
+   * Handles the double click event on the host element.
+   * This method is private.
+   *
+   * @param {MouseEvent} event - The double click event.
+   */
   onHostElementDblClicked(e) {
     if (e.target instanceof HTMLElement) {
       const t = e.target, s = t.getAttribute("data-area"), i = H(s), o = Number(t.getAttribute("data-row-index")), r = Number(t.getAttribute("data-col-index")), n = this.tableScope.tableModel.getAreaModel(i);
@@ -299,16 +319,30 @@ class ee {
     }
     this.publishGeMouseEvent(e, 2);
   }
+  /**
+   * Publishes a GeMouseEvent.
+   *
+   * @param {MouseEvent} event - The MouseEvent to publish.
+   * @param {number} clickCount - The number of clicks for the GeMouseEvent.
+   *
+   * @return {void}
+   */
   publishGeMouseEvent(e, t) {
     var s;
     this.mouseEvent = e, this.geMouseEventOld = (s = this.geMouseEvent) == null ? void 0 : s.clone(), this.geMouseEvent = this.tableScope.createGeMouseEvent(e), this.geMouseEvent && (this.geMouseEvent.clickCount = t), this.tableScope.onMouseClicked(this.geMouseEvent, this.geMouseEventOld);
   }
+  /**
+   * Update the collapsed/expanded state of a tree row.
+   *
+   * @param {TreeRowIf<any>} tr - The tree row object.
+   * @returns {void}
+   */
   updateCollapsedExpandedState(e) {
     var s, i, o, r, n;
     const t = (i = (s = this.tableScope.tableOptions) == null ? void 0 : s.autoRestoreOptions) == null ? void 0 : i.getRowId;
     if (t) {
-      const l = (o = this.tableScope.storeStateCollapsedExpandService) == null ? void 0 : o.collapsedExpandedStateGet().mode, a = l === "collapsed" && !e.expanded || l === "expanded" && e.expanded, d = l === "collapsed" && e.expanded || l === "expanded" && !e.expanded, u = t(e.data);
-      a ? (r = this.tableScope.storeStateCollapsedExpandService) == null || r.collapsedStateIdsPush(u) : d && ((n = this.tableScope.storeStateCollapsedExpandService) == null || n.collapsedStateIdsRemove(u));
+      const l = (o = this.tableScope.storeStateCollapsedExpandService) == null ? void 0 : o.collapsedExpandedStateGet().mode, a = l === "collapsed" && !e.expanded || l === "expanded" && e.expanded, d = l === "collapsed" && e.expanded || l === "expanded" && !e.expanded, S = t(e.data);
+      a ? (r = this.tableScope.storeStateCollapsedExpandService) == null || r.collapsedStateIdsPush(S) : d && ((n = this.tableScope.storeStateCollapsedExpandService) == null || n.collapsedStateIdsRemove(S));
     }
   }
   getArrowColumnIndex() {
@@ -344,35 +378,107 @@ class ee {
     }
   }
 }
-class te {
+class se {
   constructor(e) {
     this.tableScope = e;
   }
+  /**
+   * Updates the cells in the table based on the provided events.
+   *
+   * @param {TableCellUpdateEventIf[]} events - The array of events representing the updates to perform on the cells.
+   * @param {boolean} [repaintAll=false] - Optional parameter indicating whether to repaint all cells or not. Default value is false. If true, the full table will be rendered. If false, the table cell will be rendered immediately.
+   *
+   * @return {void} - This method doesn't return anything.
+   */
   updateCells(e, t = !1) {
     this.tableScope.updateCells(e, t);
   }
+  /**
+   * Notifies that the external filter has changed.
+   *
+   * @return {void}
+   */
   externalFilterChanged() {
     this.tableScope.externalFilterChanged();
   }
+  /**
+   * Scrolls the table body to the specified pixel coordinates.
+   *
+   * @param {number} _px - The horizontal pixel coordinate to scroll to. Defaults to 0.
+   * @param {number} _py - The vertical pixel coordinate to scroll to. Defaults to 0.
+   * @return {void}
+   */
   scrollToPixel(e = 0, t = 0) {
   }
+  /**
+   * Scrolls to the specified index in both horizontal and vertical directions.
+   *
+   * @param {number} _indexX - The index of the column to scroll to in the horizontal direction. Default is 0.
+   * @param {number} _indexY - The index of the row to scroll to in the vertical direction. Default is 0.
+   *
+   * @return undefined
+   */
   scrollToIndex(e = 0, t = 0) {
   }
+  /**
+   * Sets whether the header is visible or not.
+   *
+   * @param _visible - A boolean value indicating whether the header should be visible. Default value is true.
+   *
+   * @return undefined
+   */
   setHeaderVisible(e = !0) {
   }
+  /**
+   * Sets the visibility of a column in the table.
+   *
+   * @param {_column} - The column index or column definition to set visibility for.
+   * @param {_visible=true} - The flag to set visibility to. true for visible, false for hidden.
+   *
+   * @return {void} - There is no return value.
+   */
   setColumnVisible(e, t = !0) {
   }
+  /**
+   * Returns whether a column is visible or not.
+   *
+   * @param {number | ColumnDefIf} _column - The column index or the column definition.
+   * @return {boolean} - True if the column is visible, false otherwise.
+   */
   isColumnVisible(e) {
     return !0;
   }
+  /**
+   * Checks if the header is visible.
+   *
+   * @return {boolean} - Returns true if the header is visible, otherwise returns false.
+   */
   isHeaderVisible() {
     return !0;
   }
+  /**
+   * Sets the visibility of the footer.
+   *
+   * @param {boolean} _visible - Indicates whether the footer should be visible or not. Default value is true.
+   *
+   * @return {void} - This method does not return any value.
+   */
   setFooterVisible(e = !0) {
   }
+  /**
+   * Determines if the footer is visible.
+   *
+   * @returns {boolean} True if the footer is visible, false otherwise.
+   */
   isFooterVisible() {
     return !0;
   }
+  /**
+   * Repaints the table.
+   *
+   * This method calls the repaint method of the tableScope object
+   * to update and redraw the table based on the latest data.
+   */
   repaint() {
     this.tableScope.repaint();
   }
@@ -452,7 +558,7 @@ class P {
   //   }
   // }
 }
-class se extends P {
+class ie extends P {
   constructor(e) {
     super(e), this.SCROLL_STATE = "scrollState", this.scrollOffset = [0, 0], this.load();
   }
@@ -474,14 +580,14 @@ class se extends P {
     }
   }
 }
-class ie {
+class oe {
   constructor(e = "collapsed", t = [], s = !1, i = !1) {
     this.mode = e, this.rowIds = t, this.allCollapsed = s, this.allExpanded = i;
   }
 }
-class oe extends P {
+class le extends P {
   constructor(e) {
-    super(e), this.COLLAPSED_EXPANDED_STATE = "collapsedExpandedState", this.collapsedExpandedState = new ie(), this.load();
+    super(e), this.COLLAPSED_EXPANDED_STATE = "collapsedExpandedState", this.collapsedExpandedState = new oe(), this.load();
   }
   collapsedExpandedStateGet() {
     return this.collapsedExpandedState;
@@ -513,7 +619,7 @@ class oe extends P {
     this.checkAndPersistItem(this.COLLAPSED_EXPANDED_STATE, this.collapsedExpandedState);
   }
 }
-class le extends P {
+class re extends P {
   constructor(e) {
     super(e), this.SORTING_STATE = "sortingState", this.sortItems = [], this.load();
   }
@@ -540,7 +646,7 @@ class T {
     this.left = e, this.width = t, this.height = s, this.top = i, this.index = o;
   }
 }
-class re {
+class ne {
   constructor(e, t, s, i) {
     this.hostElement = e, this.tableModel = t, this.dom = s, this.tableOptions = i, this.scrollTop = 0, this.areaBodyWestGeo = new T(), this.areaBodyCenterGeo = new T(), this.areaBodyEastGeo = new T();
     const o = this.hostElement;
@@ -691,12 +797,21 @@ class re {
     this.dom.setStyle(this.contentWrapperDiv, "width", e), this.dom.setStyle(this.contentWrapperDiv, "height", t);
   }
 }
-class A {
+class R {
+  /**
+   * Represents a constructor for a class.
+   * @constructor
+   * @param {number} r1 - The value for r1.
+   * @param {number} c1 - The value for c1.
+   * @param {number} r2 - The value for r2.
+   * @param {number} c2 - The value for c2.
+   * @param {boolean} [gammaRange=false] - The value for gammaRange. Defaults to false. gammaRange will be used for AreaModelCellGroups, but it's not implemented yet!
+   */
   constructor(e, t, s, i, o = !1) {
     this.r1 = e, this.c1 = t, this.r2 = s, this.c2 = i, this.gammaRange = o;
   }
   static create(e) {
-    return e.gammaRange === void 0 && (e.gammaRange = !1), new A(
+    return e.gammaRange === void 0 && (e.gammaRange = !1), new R(
       e.rowIndex1,
       e.columnIndex1,
       e.rowIndex2,
@@ -705,19 +820,19 @@ class A {
     );
   }
   static singleCell(e, t) {
-    return new A(e, t, e, t);
+    return new R(e, t, e, t);
   }
   static singleRow(e) {
-    return new A(e, 0, e, Number.MAX_SAFE_INTEGER);
+    return new R(e, 0, e, Number.MAX_SAFE_INTEGER);
   }
   static singleColumn(e) {
-    return new A(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 ne {
+class ae {
   constructor(e, t) {
     this.tableModel = e, this.areaModel = t, this.colAndRowspanRanges = void 0;
   }
@@ -733,7 +848,7 @@ class ne {
           o === 0 && (o = 1), r === 0 && (r = 1);
           const n = this.areaModel.hasOwnProperty("gammaCells");
           this.colAndRowspanRanges.push(
-            new A(s, i, s + r - 1, i + o - 1, n)
+            new R(s, i, s + r - 1, i + o - 1, n)
           );
         }
       }
@@ -750,22 +865,22 @@ class ne {
     return !1;
   }
 }
-class ae {
+class de {
   constructor(e, t, s) {
     this.header = e, this.body = t, this.footer = s;
   }
 }
-class de extends re {
+class he extends ne {
   constructor(e, t, s, i) {
     var r, n;
     super(e, t, s, i), this.scrollLeft = 0, this.scrollViewportLeft = 0, this.scrollFactorY = 0, this.scrollFactorX = 0, this.cleanupFunctions = {
       header: [],
       body: [],
       footer: []
-    }, this.tree = !1, this.colAndRowspanModels = new ae(), 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), $(t.getAreaModel("body")) && (this.tree = !0), ["header", "body", "footer"].forEach(
+    }, this.tree = !1, this.colAndRowspanModels = new de(), 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), $(t.getAreaModel("body")) && (this.tree = !0), ["header", "body", "footer"].forEach(
       (l) => {
         var a;
-        this.colAndRowspanModels[l] = new ne(t, t.getAreaModel(l)), (a = this.colAndRowspanModels[l]) == null || a.init();
+        this.colAndRowspanModels[l] = new ae(t, t.getAreaModel(l)), (a = this.colAndRowspanModels[l]) == null || a.init();
       }
     );
   }
@@ -884,87 +999,87 @@ class de extends re {
     return "";
   }
   adjustArea(e, t = 0) {
-    var h;
+    var c;
     const s = this.getArea(e, "west"), i = this.getArea(e, "center"), o = this.getArea(e, "east"), r = i.child.clientHeight;
     s.child.innerText = "", i.child.innerText = "", o.child.innerText = "";
-    const n = 0, l = this.areaBodyCenterGeo.width, a = this.tableModel.getPadding(), d = this.tableModel.getAreaModel(e), u = d.getRowCount();
+    const n = 0, l = this.areaBodyCenterGeo.width, a = this.tableModel.getPadding(), d = this.tableModel.getAreaModel(e), S = d.getRowCount();
     for (; this.cleanupFunctions[e].length; ) {
-      const S = this.cleanupFunctions[e].shift();
-      S && S();
+      const u = this.cleanupFunctions[e].shift();
+      u && u();
     }
     let g = t;
-    const m = this.tableModel.getColumnCount(), c = this.tableModel.getFixedRightColumnCount(), b = this.tableModel.getFixedLeftColumnCount();
-    for (let S = 0; S < u; S++) {
-      const C = g, x = S === u - 1, w = this.tableModel.getRowHeight(e, S);
-      if (C + w > 0) {
-        this.firstVisibleRowIndex = S;
-        let v = { left: n, width: l, height: w, top: C, index: S }, f = this.dom.addRowDiv(i, v, S, e, "center");
-        const M = b;
+    const m = this.tableModel.getColumnCount(), h = this.tableModel.getFixedRightColumnCount(), f = this.tableModel.getFixedLeftColumnCount();
+    for (let u = 0; u < S; u++) {
+      const w = g, C = u === S - 1, x = this.tableModel.getRowHeight(e, u);
+      if (w + x > 0) {
+        this.firstVisibleRowIndex = u;
+        let y = { left: n, width: l, height: x, top: w, index: u }, v = this.dom.addRowDiv(i, y, u, e, "center");
+        const E = f;
         if (this.adjustColumnsToRowParent({
           areaIdent: e,
           sideIdent: "center",
           areaModel: d,
-          geo: v,
-          parent: f,
-          rowIndex: S,
-          columnIndexStart: M,
-          columnIndexEnd: m - c - 1,
+          geo: y,
+          parent: v,
+          rowIndex: u,
+          columnIndexStart: E,
+          columnIndexEnd: m - h - 1,
           verticalFixed: !1,
-          lastRowOfModel: x
-        }), a.left > 0 && (v = { left: n, width: this.areaBodyWestGeo.width, height: w, top: C, index: S }, f = this.dom.addRowDiv(s, v, S, e, "west"), this.adjustColumnsToRowParent({
+          lastRowOfModel: C
+        }), a.left > 0 && (y = { left: n, width: this.areaBodyWestGeo.width, height: x, top: w, index: u }, v = this.dom.addRowDiv(s, y, u, e, "west"), this.adjustColumnsToRowParent({
           areaIdent: e,
           sideIdent: "west",
           areaModel: d,
-          geo: v,
-          parent: f,
-          rowIndex: S,
+          geo: y,
+          parent: v,
+          rowIndex: u,
           columnIndexStart: 0,
-          columnIndexEnd: M - 1,
+          columnIndexEnd: E - 1,
           verticalFixed: !0,
-          lastRowOfModel: x
-        })), a.right > 0 && (v = { left: n, width: this.areaBodyEastGeo.width, height: w, top: C, index: S }, f = this.dom.addRowDiv(o, v, S, e, "east"), this.adjustColumnsToRowParent({
+          lastRowOfModel: C
+        })), a.right > 0 && (y = { left: n, width: this.areaBodyEastGeo.width, height: x, top: w, index: u }, v = this.dom.addRowDiv(o, y, u, e, "east"), this.adjustColumnsToRowParent({
           areaIdent: e,
           sideIdent: "east",
           areaModel: d,
-          geo: v,
-          parent: f,
-          rowIndex: S,
-          columnIndexStart: m - c,
+          geo: y,
+          parent: v,
+          rowIndex: u,
+          columnIndexStart: m - h,
           columnIndexEnd: m - 1,
           verticalFixed: !0,
-          lastRowOfModel: x
-        })), e === "header" && this.tree && S === u - 1) {
-          const E = this.dom.applyStyle(
+          lastRowOfModel: C
+        })), e === "header" && this.tree && u === S - 1) {
+          const A = this.dom.applyStyle(
             this.dom.setAttribute(
-              this.dom.addDiv(f, new T(16, 20, 20, 8)),
+              this.dom.addDiv(v, new T(16, 20, 20, 8)),
               "data-ge-action",
               "toggleExpandCollapseAll"
             ),
             { cursor: "pointer" }
-          ), R = this.tableOptions.treeOptions.arrowExpandCollapseAll;
-          if (R) {
-            const I = this.dom.domService.createText(R.content);
-            this.dom.domService.appendChild(E, I), R.style && this.dom.applyStyleString(E, R.style);
+          ), M = this.tableOptions.treeOptions.arrowExpandCollapseAll;
+          if (M) {
+            const I = this.dom.domService.createText(M.content);
+            this.dom.domService.appendChild(A, I), M.style && this.dom.applyStyleString(A, M.style);
           }
         }
       }
-      if (g = g + w, g > r)
+      if (g = g + x, g > r)
         break;
     }
     if (this.colAndRowspanModels && this.colAndRowspanModels[e]) {
-      const S = ((h = this.colAndRowspanModels[e]) == null ? void 0 : h.getRanges()) ?? [];
-      if (S.length)
-        for (const C of S) {
-          let x = 0, w = i.child, v = "center";
-          if (C.c1 < b)
-            w = s.child, v = "west";
-          else if (c > 0 && C.c1 >= m - c)
-            w = o.child, v = "east";
+      const u = ((c = this.colAndRowspanModels[e]) == null ? void 0 : c.getRanges()) ?? [];
+      if (u.length)
+        for (const w of u) {
+          let C = 0, x = i.child, y = "center";
+          if (w.c1 < f)
+            x = s.child, y = "west";
+          else if (h > 0 && w.c1 >= m - h)
+            x = o.child, y = "east";
           else {
-            const f = this.areaBodyCenterGeo.width - this.tableModel.getContentWidthInPixel();
-            x = this.scrollFactorX * f - this.areaBodyWestGeo.width, v = "center";
+            const v = this.areaBodyCenterGeo.width - this.tableModel.getContentWidthInPixel();
+            C = this.scrollFactorX * v - this.areaBodyWestGeo.width, y = "center";
           }
-          this.drawBigCell(C, x, t, d, w, v);
+          this.drawBigCell(w, C, t, d, x, y);
         }
     }
   }
@@ -979,24 +1094,24 @@ class de extends re {
    * @protected
    */
   drawBigCell(e, t, s, i, o, r) {
-    const n = s + this.getRowHeights(0, e.r1 - 1, i).reduce((h, S) => h + S, 0), l = this.tableModel.getColumnCount(), a = this.tableModel.getFixedRightColumnCount();
+    const n = s + this.getRowHeights(0, e.r1 - 1, i).reduce((c, u) => c + u, 0), l = this.tableModel.getColumnCount(), a = this.tableModel.getFixedRightColumnCount();
     let d = 0;
     a > 0 && e.c1 >= l - a && (d = l - a);
-    const u = t + this.getColumnWidths(d, e.c1 - 1).reduce((h, S) => h + S, 0), g = this.getRowHeights(e.r1, e.r2, i).reduce((h, S) => h + S, 0), m = this.getColumnWidths(e.c1, e.c2).reduce((h, S) => h + S, 0);
-    let c = !1;
-    const b = this.getSelectionModel ? this.getSelectionModel() : void 0;
-    b && (c = b.getSelectionCount(e.r1, e.c1) > 0), e.gammaRange ? (console.info("TODO here", e), this.renderCell({
+    const S = t + this.getColumnWidths(d, e.c1 - 1).reduce((c, u) => c + u, 0), g = this.getRowHeights(e.r1, e.r2, i).reduce((c, u) => c + u, 0), m = this.getColumnWidths(e.c1, e.c2).reduce((c, u) => c + u, 0);
+    let h = !1;
+    const f = this.getSelectionModel ? this.getSelectionModel() : void 0;
+    f && (h = f.getSelectionCount(e.r1, e.c1) > 0), e.gammaRange ? (console.info("TODO here", e), this.renderCell({
       areaModel: i,
       areaIdent: i.areaIdent,
       sideIdent: r,
       rowIndex: e.r1,
       columnIndex: e.c1,
-      left: u,
+      left: S,
       top: n,
       width: m,
       height: g,
       parent: o,
-      cellSelected: c,
+      cellSelected: h,
       lastRowOfModel: !0,
       gammaRange: e.gammaRange
     })) : this.renderCell({
@@ -1005,18 +1120,18 @@ class de extends re {
       sideIdent: r,
       rowIndex: e.r1,
       columnIndex: e.c1,
-      left: u,
+      left: S,
       top: n,
       width: m,
       height: g,
       parent: o,
-      cellSelected: c,
+      cellSelected: h,
       lastRowOfModel: !0,
       gammaRange: e.gammaRange
     }), i.areaIdent === "header" && this.tableOptions.columnsResizable && this.renderHeaderCellResizeHandle({
       rowIndex: e.r1,
       columnIndex: e.c1,
-      cellLeft: u,
+      cellLeft: S,
       cellTop: n,
       cellWidth: m,
       cellHeight: g,
@@ -1046,59 +1161,59 @@ class de extends re {
     verticalFixed: a = !1,
     lastRowOfModel: d = !1
   }) {
-    var b;
+    var f;
     this.scrollViewportLeft = this.scrollViewport.scrollLeft;
-    let u = 0;
+    let S = 0;
     if (!a) {
-      const h = this.areaBodyCenterGeo.width - this.tableModel.getContentWidthInPixel();
-      u = this.scrollFactorX * h;
+      const c = this.areaBodyCenterGeo.width - this.tableModel.getContentWidthInPixel();
+      S = this.scrollFactorX * c;
     }
     const g = 0, m = !!(e === "body" && t);
-    let c = u;
-    for (let h = n; h <= l; h++) {
-      const S = c, C = this.tableModel.getColumnWidth(h);
-      if (C > 0 && S + C > 0) {
-        let x = i.height;
-        const w = s.getRowspanAt(r, h), v = s.getColspanAt(r, h);
-        w > 1 && (x = this.getRowHeights(r, r + w - 1, s).reduce((E, R) => E + R, 0));
-        let f = C;
-        v > 1 && (f = this.getColumnWidths(h, h + v - 1).reduce((E, R) => E + R, 0));
-        let M = !1;
-        if (this.colAndRowspanModels && this.colAndRowspanModels[e] && (b = this.colAndRowspanModels[e]) != null && b.isInRange(r, h) && (M = !0), this.draggingTargetColumnIndex === h && e !== "header") {
-          this.renderDragTargetDiv(o, S, g, f, x);
-          const E = { left: S, top: g, width: f, height: x };
-          this.dom.addColumnBorderDivs(this.tableOptions, o, E, e, t);
+    let h = S;
+    for (let c = n; c <= l; c++) {
+      const u = h, w = this.tableModel.getColumnWidth(c);
+      if (w > 0 && u + w > 0) {
+        let C = i.height;
+        const x = s.getRowspanAt(r, c), y = s.getColspanAt(r, c);
+        x > 1 && (C = this.getRowHeights(r, r + x - 1, s).reduce((A, M) => A + M, 0));
+        let v = w;
+        y > 1 && (v = this.getColumnWidths(c, c + y - 1).reduce((A, M) => A + M, 0));
+        let E = !1;
+        if (this.colAndRowspanModels && this.colAndRowspanModels[e] && (f = this.colAndRowspanModels[e]) != null && f.isInRange(r, c) && (E = !0), this.draggingTargetColumnIndex === c && e !== "header") {
+          this.renderDragTargetDiv(o, u, g, v, C);
+          const A = { left: u, top: g, width: v, height: C };
+          this.dom.addColumnBorderDivs(this.tableOptions, o, A, e, t);
         } else {
-          const E = this.renderSelectedBackgroundDiv(M, m, t, s, r, h, o, S, g, f, x);
-          M || this.renderCell({
+          const A = this.renderSelectedBackgroundDiv(E, m, t, s, r, c, o, u, g, v, C);
+          E || this.renderCell({
             areaModel: s,
             areaIdent: e,
             sideIdent: t,
             rowIndex: r,
-            columnIndex: h,
-            left: S,
+            columnIndex: c,
+            left: u,
             top: g,
-            width: f,
-            height: x,
+            width: v,
+            height: C,
             parent: o,
-            cellSelected: E,
+            cellSelected: A,
             lastRowOfModel: d,
             gammaRange: !0
           }), e === "header" && this.tableOptions.columnsResizable && this.renderHeaderCellResizeHandle({
             rowIndex: r,
-            columnIndex: h,
-            cellLeft: S,
+            columnIndex: c,
+            cellLeft: u,
             cellTop: g,
-            cellWidth: f,
-            cellHeight: x,
+            cellWidth: v,
+            cellHeight: C,
             parent: o
           });
         }
       }
-      if (c = c + C, c > this.areaBodyCenterGeo.width)
+      if (h = h + w, h > this.areaBodyCenterGeo.width)
         break;
     }
-    this.tableOptions.verticalBorderVisible && this.dom.addVerticalBorder(new T(c - 1, 1, i.height, 0), o);
+    this.tableOptions.verticalBorderVisible && this.dom.addVerticalBorder(new T(h - 1, 1, i.height, 0), o);
   }
   getTreeArrowColumnIndex() {
     return this.tableOptions.showCheckboxWihoutExtraColumn ? 0 : this.tableModel.isRowCheckboxVisible() ? 1 : 0;
@@ -1114,49 +1229,50 @@ class de extends re {
     height: l,
     top: a,
     parent: d,
-    lastRowOfModel: u
+    lastRowOfModel: S,
+    gammaRange: g
   }) {
-    var G;
-    const m = this.editorRenderer && this.editorRendererRow === i && this.editorRendererColumn === o ? this.editorRenderer : e.getCellRenderer(i, o), c = { left: r, width: n, height: l, top: a, index: o }, b = e.getRowByIndex(i);
-    let h = "none";
-    if (o === this.getTreeArrowColumnIndex() && O(b)) {
-      const y = b;
-      (G = y.children) != null && G.length ? y.expanded ? h = "expanded" : h = "collapsed" : h = "hidden";
+    var k;
+    const h = this.editorRenderer && this.editorRendererRow === i && this.editorRendererColumn === o ? this.editorRenderer : e.getCellRenderer(i, o), f = { left: r, width: n, height: l, top: a, index: o }, c = e.getRowByIndex(i);
+    let u = "none";
+    if (o === this.getTreeArrowColumnIndex() && O(c)) {
+      const b = c;
+      (k = b.children) != null && k.length ? b.expanded ? u = "expanded" : u = "collapsed" : u = "hidden";
     }
     let C;
     if (t === "header") {
-      const y = this.tableModel.getColumnDef(o);
-      (!(y != null && y.sortIconVisible) || y != null && y.sortIconVisible()) && (C = y == null ? void 0 : y.sortState);
+      const b = this.tableModel.getColumnDef(o);
+      (!(b != null && b.sortIconVisible) || b != null && b.sortIconVisible()) && (C = b == null ? void 0 : b.sortState);
     }
-    const x = e.getValueAt(i, o), w = m ? "" : `${x}`, v = e.isRowChecked(i), f = this.dom.addColumnDiv(
+    const x = e.getValueAt(i, o), y = h ? "" : `${x}`, v = e.isRowChecked(i), E = this.dom.addColumnDiv(
       d,
-      c,
+      f,
       i,
       o,
       t,
       s,
-      w,
-      h,
+      y,
+      u,
       this.tableOptions,
       v,
       C
-    ), M = e.getTooltipAt(i, o);
-    M && this.dom.setAttribute(f, "title", M);
-    const E = this.tableModel.getColumnDef(o);
-    E && E.classes[t] && this.dom.addClasses(E.classes[t], f);
-    let R;
-    m && (R = m.render(f, i, o, t, e, x, this.dom.domService));
-    const I = e.getCustomClassesAt(i, o);
-    if (I.length && this.dom.addClasses(I, f), this.dom.addColumnBorderDivs(this.tableOptions, d, c, t, s), u && this.dom.addHorizontalBorder({ left: r, width: n, height: l, top: a + l }, d), this.getFocusModel && t === "body") {
-      const y = this.getFocusModel();
-      y != null && y.hasFocus(i, o) && this.dom.addFocusBorderDivs(d, c, {});
+    ), A = e.getTooltipAt(i, o);
+    A && this.dom.setAttribute(E, "title", A);
+    const M = this.tableModel.getColumnDef(o);
+    M && M.classes[t] && this.dom.addClasses(M.classes[t], E);
+    let I;
+    h && (I = h.render(E, i, o, t, e, x, this.dom.domService));
+    const G = e.getCustomClassesAt(i, o);
+    if (G.length && this.dom.addClasses(G, E), this.dom.addColumnBorderDivs(this.tableOptions, d, f, t, s), S && this.dom.addHorizontalBorder({ left: r, width: n, height: l, top: a + l }, d), this.getFocusModel && t === "body") {
+      const b = this.getFocusModel();
+      b != null && b.hasFocus(i, o) && this.dom.addFocusBorderDivs(d, f, {});
     }
-    t === "header" && this.dom.setAttribute(f, "data-ge-action", "drag-column");
+    t === "header" && this.dom.setAttribute(E, "data-ge-action", "drag-column");
     const L = e.getCustomStyleAt(i, o);
     if (L)
-      for (const y in L)
-        this.dom.setStyle(f, y, L[y]);
-    return [f, R];
+      for (const b in L)
+        this.dom.setStyle(E, b, L[b]);
+    return [E, I];
   }
   applyCssClasses(e, t = {}) {
     e && Object.entries(t).forEach(([s, i]) => {
@@ -1167,19 +1283,19 @@ class de extends re {
     const r = this.tableModel.getAreaModel(e), n = 'div[data-col-index="' + s + '"][data-row-index="' + t + '"][data-area="' + e + '"]', l = document.querySelector(n);
     if (l) {
       let a;
-      const u = this.editorRenderer && this.editorRendererRow === t && this.editorRendererColumn === s ? this.editorRenderer : r.getCellRenderer(t, s);
-      if (l.innerText = "", this.applyCssClasses(l, o), u)
-        a = u.render(l, t, s, e, r, i, this.dom.domService), a && this.cleanupFunctions[e].push(a);
+      const S = this.editorRenderer && this.editorRendererRow === t && this.editorRendererColumn === s ? this.editorRenderer : r.getCellRenderer(t, s);
+      if (l.innerText = "", this.applyCssClasses(l, o), S)
+        a = S.render(l, t, s, e, r, i, this.dom.domService), a && this.cleanupFunctions[e].push(a);
       else {
-        const c = `${i}`;
-        this.dom.addLabelDiv(l, c, !1, t, s, e);
+        const h = `${i}`;
+        this.dom.addLabelDiv(l, h, !1, t, s, e);
       }
       const g = r.getCustomClassesAt(t, s);
       g.length && this.dom.addClasses(g, l);
       const m = r.getCustomStyleAt(t, s);
       if (m)
-        for (const c in m)
-          this.dom.setStyle(l, c, m[c]);
+        for (const h in m)
+          this.dom.setStyle(l, h, m[h]);
     }
   }
   getColumnWidths(e, t) {
@@ -1239,19 +1355,19 @@ class de extends re {
     );
     return this.dom.setStyle(r, "left", `${t}px`), this.dom.setStyle(r, "top", `${s}px`), this.dom.setStyle(r, "width", `${i}px`), this.dom.setStyle(r, "height", `${o}px`), r;
   }
-  renderSelectedBackgroundDiv(e, t, s, i, o, r, n, l, a, d, u) {
+  renderSelectedBackgroundDiv(e, t, s, i, o, r, n, l, a, d, S) {
     let g = !1;
     if (!e && t && i.isSelectable(o, r) && this.getSelectionModel) {
       const m = this.getSelectionModel();
       if (m) {
-        const c = m.getSelectionCount(o, r);
-        g = c > 0;
-        for (let b = 0; b < c; b++) {
-          const h = this.dom.applyStylePosistionAbsolute(
+        const h = m.getSelectionCount(o, r);
+        g = h > 0;
+        for (let f = 0; f < h; f++) {
+          const c = this.dom.applyStylePosistionAbsolute(
             // ge-table-body-west-selected-range
             this.dom.createDivWithClass(`ge-table-${i.areaIdent}-${s}-selected-range`, n)
           );
-          this.dom.setStyle(h, "left", `${l}px`), this.dom.setStyle(h, "top", `${a}px`), this.dom.setStyle(h, "width", `${d}px`), this.dom.setStyle(h, "height", `${u}px`);
+          this.dom.setStyle(c, "left", `${l}px`), this.dom.setStyle(c, "top", `${a}px`), this.dom.setStyle(c, "width", `${d}px`), this.dom.setStyle(c, "height", `${S}px`);
         }
       }
     }
@@ -1268,11 +1384,11 @@ class de extends re {
     width: l,
     height: a,
     parent: d,
-    cellSelected: u,
+    cellSelected: S,
     lastRowOfModel: g,
     gammaRange: m
   }) {
-    const [c, b] = this.addAndRenderCellDiv({
+    const [h, f] = this.addAndRenderCellDiv({
       areaModel: e,
       areaIdent: t,
       sideIdent: s,
@@ -1286,22 +1402,30 @@ class de extends re {
       lastRowOfModel: g,
       gammaRange: m
     });
-    u && this.dom.addClass(`ge-table-${t}-${s}-selected-range`, c), b && this.cleanupFunctions[t].push(b);
+    S && this.dom.addClass(`ge-table-${t}-${s}-selected-range`, h), f && this.cleanupFunctions[t].push(f);
   }
   renderHeaderCellResizeHandle({ rowIndex: e, columnIndex: t, cellLeft: s, cellTop: i, cellWidth: o, cellHeight: r, parent: n }) {
     const l = this.dom.domService, a = this.tableOptions.columnResizeHandleWidthInPx ?? 2, d = l.createElement("div");
     l.setAttribute(d, "data-col-index", `${t}`), l.setAttribute(d, "data-row-index", `${e}`), l.setAttribute(d, "data-area", "header"), l.setAttribute(d, "data-ge-action", "resize-column"), l.addClass(d, "ge-table-column-resize-handle"), l.setStyle(d, "display", "clip"), l.setStyle(d, "position", "absolute"), l.setStyle(d, "cursor", "col-resize"), l.setStyle(d, "left", `${s + o - a}px`), l.setStyle(d, "top", `${i}px`), l.setStyle(d, "width", `${a}px`), l.setStyle(d, "height", `${r}px`), l.appendChild(n, d);
   }
 }
-class he {
+class ce {
   constructor(e, t) {
     this.columnIndex = e, this.sortState = t;
   }
 }
-class ce {
+class pe {
   constructor(e) {
     this.tableScope = e, this.tableScope.hostElement.addEventListener("change", this.onHostElementChanged.bind(this));
   }
+  /**
+   * Handles the onHostElementChanged event.
+   * In case that the element is an input field, the tableScope.updateModelValueAfterEdit() method is triggered.
+   *
+   * @param {Event} event - The event object.
+   *
+   * @return {void}
+   */
   onHostElementChanged(e) {
     if (e.target instanceof HTMLInputElement || e.target instanceof HTMLSelectElement || e.target instanceof HTMLTextAreaElement) {
       const t = e.target, s = t.getAttribute("data-area"), i = t.getAttribute("data-row-index"), o = t.getAttribute("data-col-index");
@@ -1312,7 +1436,7 @@ class ce {
     }
   }
 }
-class pe {
+class ue {
   constructor(e = -1, t = -1) {
     this.rowIndex = e, this.columnIndex = t;
   }
@@ -1322,20 +1446,20 @@ class V {
     this.cells = e;
   }
   static createSingle(e, t) {
-    return new V([new pe(e, t)]);
+    return new V([new ue(e, t)]);
   }
 }
-class ue {
+class Se {
   constructor(e) {
     var t, s;
     this.tableScope = e, (t = this.tableScope.tableOptions) != null && t.getSelectionModel && (this.getSelectionModel = this.tableScope.tableOptions.getSelectionModel), (s = this.tableScope.tableOptions) != null && s.getFocusModel && (this.getFocusModel = this.tableScope.tableOptions.getFocusModel);
   }
   onMouseClicked(e, t) {
-    var o, r, n, l, a, d, u;
+    var o, r, n, l, a, d, S;
     let s = !1, i = !1;
     if (this.getSelectionModel && this.getFocusModel) {
       const g = this.getSelectionModel(), m = this.getFocusModel();
-      g && m && (m.hasFocus(e.rowIndex, e.columnIndex) || (m.setFocus(e.rowIndex, e.columnIndex), s = !0), (o = e.originalEvent) != null && o.shiftKey || g.hasSelection() && (g.clear(), s = !0), (r = e.originalEvent) != null && r.shiftKey && this.previousEvt ? (g.addSelection(this.createRangeByEvents(e, this.previousEvt)), i = !0, s = !0) : (n = e.originalEvent) != null && n.ctrlKey || (l = e.originalEvent) != null && l.metaKey ? (g.addSelection(A.singleCell(e.rowIndex, e.columnIndex)), i = !0, s = !0) : (a = e.originalEvent) != null && a.altKey && ((d = e.originalEvent) != null && d.ctrlKey || (u = e.originalEvent) != null && u.metaKey) && (g.removeSelection(A.singleCell(e.rowIndex, e.columnIndex)), i = !0, s = !0));
+      g && m && (m.hasFocus(e.rowIndex, e.columnIndex) || (m.setFocus(e.rowIndex, e.columnIndex), s = !0), (o = e.originalEvent) != null && o.shiftKey || g.hasSelection() && (g.clear(), s = !0), (r = e.originalEvent) != null && r.shiftKey && this.previousEvt ? (g.addSelection(this.createRangeByEvents(e, this.previousEvt)), i = !0, s = !0) : (n = e.originalEvent) != null && n.ctrlKey || (l = e.originalEvent) != null && l.metaKey ? (g.addSelection(R.singleCell(e.rowIndex, e.columnIndex)), i = !0, s = !0) : (a = e.originalEvent) != null && a.altKey && ((d = e.originalEvent) != null && d.ctrlKey || (S = e.originalEvent) != null && S.metaKey) && (g.removeSelection(R.singleCell(e.rowIndex, e.columnIndex)), i = !0, s = !0));
     }
     return i ? this.previousEvt = void 0 : this.previousEvt = e == null ? void 0 : e.clone(), s;
   }
@@ -1358,7 +1482,7 @@ class ue {
   createRangeByEvents(e, t) {
     t || (t = e);
     const s = Math.min(e.rowIndex, t == null ? void 0 : t.rowIndex), i = Math.max(e.rowIndex, t == null ? void 0 : t.rowIndex), o = Math.min(e.columnIndex, t == null ? void 0 : t.columnIndex), r = Math.max(e.columnIndex, t == null ? void 0 : t.columnIndex);
-    return A.create({
+    return R.create({
       rowIndex1: s,
       columnIndex1: o,
       rowIndex2: i,
@@ -1366,7 +1490,7 @@ class ue {
     });
   }
 }
-class Se {
+class ge {
   get() {
     return {
       f2: "START_EDITING",
@@ -1384,7 +1508,7 @@ class Se {
     };
   }
 }
-class ge {
+class me {
   get() {
     return {
       f2: "START_EDITING",
@@ -1404,7 +1528,7 @@ class ge {
     };
   }
 }
-class me {
+class fe {
   constructor(e) {
     this.tableScope = e, this.shortcutActionIdMapping = {}, this.listener = [], this.listener.push(e), this.init();
   }
@@ -1412,7 +1536,7 @@ class me {
     this.listener.includes(e) || this.listener.push(e);
   }
   init() {
-    this.isMacintosh() ? Object.assign(this.shortcutActionIdMapping, new ge().get()) : Object.assign(this.shortcutActionIdMapping, new Se().get()), Object.assign(this.shortcutActionIdMapping, this.tableScope.tableOptions.shortcutActionIdMapping), this.isDebug() && console.debug("ShortcutService", this.shortcutActionIdMapping), this.tableScope.hostElement.addEventListener("keydown", this.onKeyDown.bind(this));
+    this.isMacintosh() ? Object.assign(this.shortcutActionIdMapping, new me().get()) : Object.assign(this.shortcutActionIdMapping, new ge().get()), Object.assign(this.shortcutActionIdMapping, this.tableScope.tableOptions.shortcutActionIdMapping), this.isDebug() && console.debug("ShortcutService", this.shortcutActionIdMapping), this.tableScope.hostElement.addEventListener("keydown", this.onKeyDown.bind(this));
   }
   isMacintosh() {
     return navigator.platform.indexOf("Mac") > -1;
@@ -1456,7 +1580,7 @@ class me {
     return e.altKey && t.push("alt"), e.shiftKey && t.push("shift"), e.ctrlKey && t.push("ctrl"), e.metaKey && t.push("meta"), e.code && t.push(e.code.toLowerCase().replace(/key/g, "")), t.sort();
   }
 }
-class k {
+class N {
   onCheckboxChanged(e) {
   }
   onContextmenu(e) {
@@ -1472,7 +1596,7 @@ class k {
   onMouseMoved(e) {
   }
 }
-class z {
+class K {
   setStyle(e, t, s) {
     return e.style[t] = s, e;
   }
@@ -1499,7 +1623,7 @@ class z {
     e.setAttribute(t, s);
   }
 }
-class fe {
+class be {
   render(e, t, s, i, o, r, n) {
     if (o.isEditable(t, s)) {
       n.addClass(e, "ge-table-row-input-div");
@@ -1520,7 +1644,7 @@ class fe {
     }
   }
 }
-class be {
+class ye {
   constructor(e = "none", t = "single") {
     this.selectionType = e, this.selectionMode = t, this.ranges = [], this.negativeRanges = [], this.allSelected = !1;
   }
@@ -1555,16 +1679,16 @@ class be {
     if (this.selectionType === "none")
       return;
     let t = e;
-    this.selectionType === "row" ? t = A.singleRow(e.r1) : this.selectionType === "column" && (t = A.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(A.singleCell(e, t)) : this.addSelection(A.singleCell(e, t));
+    this.getSelectionCount(e, t) > 0 ? this.removeSelection(R.singleCell(e, t)) : this.addSelection(R.singleCell(e, t));
   }
   addRange(e) {
     this.selectionType !== "none" && (this.allSelected = !1, this.selectionMode === "single" && (this.ranges = []), this.selectionType === "row" ? (e.c1 = 0, e.c2 = Number.MAX_SAFE_INTEGER) : this.selectionType === "column" ? (e.r1 = 0, e.r2 = Number.MAX_SAFE_INTEGER) : this.selectionType === "cell" ? (e.r2 = e.r1, e.c2 = e.c1) : this.selectionType, this.ranges.push(e));
   }
 }
-class ye {
+class ve {
   constructor(e = "none") {
     this.selectionType = e, this.rowIndex = -1, this.columnIndex = -1, this.changed = !1;
   }
@@ -1587,31 +1711,42 @@ class ye {
     return [this.rowIndex, this.columnIndex];
   }
 }
-const ve = new be(), Ce = new ye("cell");
-class K {
+const Ce = new ye(), xe = new ve("cell");
+class Y {
   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 j(), this.showCheckboxWihoutExtraColumn = !1, this.externalFilterFunction = void 0, this.sortedOptions = new X(), this.sortOrder = ["asc", "desc"], this.getEditRenderer = (e, t) => new fe(), this.getSelectionModel = () => ve, this.getFocusModel = () => Ce;
+    }, this.footerVerticalSeparator = !1, this.headerToggleExpandCollapseIcons = !1, this.headerVerticalSeparator = !1, this.treeOptions = new X(), this.showCheckboxWihoutExtraColumn = !1, this.externalFilterFunction = void 0, this.sortedOptions = new z(), this.sortOrder = ["asc", "desc"], this.getEditRenderer = (e, t) => new be(), this.getSelectionModel = () => Ce, this.getFocusModel = () => xe;
   }
 }
-class _ extends de {
+class _ extends he {
   constructor(e, t, s, i, o) {
     var r;
     if (super(
       e,
       t,
-      new Q(s),
+      new Z(s),
       i
-    ), this.eventListener = o, this.selectionService = new ue(this), this.api = new te(this), this.mouseStartAction = "", this.mouseStartWidth = -1, this.mouseStartColumnIndex = -1, this.dragFrom = -1, this.dragTo = -1, o || (this.eventListener = new k()), (r = this.tableOptions) != null && r.autoRestoreOptions) {
+    ), this.eventListener = o, this.selectionService = new Se(this), this.api = new se(this), this.mouseStartAction = "", this.mouseStartWidth = -1, this.mouseStartColumnIndex = -1, this.dragFrom = -1, this.dragTo = -1, o || (this.eventListener = new N()), (r = this.tableOptions) != null && r.autoRestoreOptions) {
       const n = this.tableOptions.autoRestoreOptions, l = n.getStorageKeyFn;
-      l && (n.autoRestoreScrollPosition && (this.storeScrollPosStateService = new se(l)), n.autoRestoreCollapsedExpandedState && (this.storeStateCollapsedExpandService = new oe(l)), n.autoRestoreSortingState && (this.storeSortingService = new le(l)));
+      l && (n.autoRestoreScrollPosition && (this.storeScrollPosStateService = new ie(l)), n.autoRestoreCollapsedExpandedState && (this.storeStateCollapsedExpandService = new le(l)), n.autoRestoreSortingState && (this.storeSortingService = new re(l)));
     }
-    this.mouseHandler = new ee(this), this.inputHandler = new ce(this), this.shortcutService = new me(this), this.shortcutService.addListener(this.selectionService);
+    this.mouseHandler = new te(this), this.inputHandler = new pe(this), this.shortcutService = new fe(this), this.shortcutService.addListener(this.selectionService);
   }
-  static create(e, t, s = new K(), i = new k(), o = new z()) {
+  /**
+   * Creates a TableScope instance.
+   *
+   * @param {HTMLDivElement} hostElement - The HTML div element that will contain the table.
+   * @param {TableModelIf} tableModel - The table model object.
+   * @param {TableOptionsIf} [tableOptions=new TableOptions()] - The optional table options object.
+   * @param {EventListenerIf} [eventListener=new EventAdapter()] - The optional event listener object.
+   * @param {DomServiceIf} [domService=new SimpleDomService()] - The optional DOM service object.
+   *
+   * @return {TableScope} - The newly created TableScope instance.
+   */
+  static create(e, t, s = new Y(), i = new N(), o = new K()) {
     return new _(
       e,
       t,
@@ -1636,16 +1771,32 @@ class _ extends de {
   updateModelValueAfterEdit(e, t, s, i) {
     e === "body" && this.tableModel.getAreaModel(e).setValue(t, s, i) && (this.resetEditorRenderer(), this.repaint(), this.eventListener.onModelChanged(V.createSingle(t, s)), this.hostElement.focus());
   }
+  /**
+   * Retrieves the TableApi object.
+   *
+   * @return {TableApi} The TableApi object.
+   */
   getApi() {
     return this.api;
   }
-  /*
-   * Called by the table component
+  /**
+   * Initializes the table. Called by the table component.
+   *
+   * @function firstInit
+   * @memberof TableScope
+   *
+   * @returns {TableScope} This instance of the table scope.
    */
   firstInit() {
     var e;
     return this.tableModel.init(), (e = this.tableOptions) != null && e.externalFilterFunction && this.externalFilterChanged(!1), this.autoRestoreCollapsedExpandedState(), this.autoRestoreSortingState(), this.resetSizeOfWrapperDiv(), this.adjustContainersAndRows(), this.autoRestoreScrollPosition(), this;
   }
+  /**
+   * Creates a GeMouseEvent object based on a MouseEvent.
+   *
+   * @param {MouseEvent} mouseEvent - The MouseEvent object to create the GeMouseEvent from.
+   * @return {GeMouseEvent} - The created GeMouseEvent object.
+   */
   createGeMouseEvent(e) {
     const t = new W();
     if (t.originalEvent = e, e) {
@@ -1661,26 +1812,72 @@ class _ extends de {
     }
     return t;
   }
+  /**
+   * Handles the mouse down event.
+   *
+   * @param {GeMouseEvent} mouseEvent - The mouse event object.
+   * @return {void}
+   */
   onMouseDown(e) {
     e.columnIndex > -1 && e.action && ["resize-column", "drag-column"].includes(e.action) && (this.mouseStartWidth = this.tableModel.getColumnWidth(e.columnIndex), this.mouseStartAction = e.action, this.mouseStartColumnIndex = e.columnIndex, this.mouseStartAction === "drag-column" && (this.dragFrom = this.mouseStartColumnIndex));
   }
+  /**
+   * Handles mouse dragging on the frame.
+   *
+   * @param {GeMouseEvent} mouseEvent - The mouse event object.
+   */
   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());
   }
+  /**
+   * Handles the end of mouse dragging event on a frame.
+   *
+   * @param {GeMouseEvent} mouseEvent - The mouse event object.
+   *
+   * @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 = "";
   }
+  /**
+   * Handles the mouse move event.
+   *
+   * @param {GeMouseEvent} mouseMoveEvent - The mouse move event object.
+   * @return {void}
+   */
   mouseMove(e) {
     this.eventListener.onMouseMoved(e), this.adjustHoverRows(e), this.adjustHoverColumns(e);
   }
+  /**
+   * Triggers the context menu event based on the mouse move event.
+   *
+   * @param {GeMouseEvent} mouseMoveEvent - The mouse move event object.
+   * @return {void}
+   */
   contextmenu(e) {
     this.eventListener.onContextmenu(e);
   }
+  /**
+   * Toggles the expand or collapse state of all items in the body area model.
+   *
+   * @param {boolean} [expand=true] - Whether to expand or collapse all items. Default is true.
+   *
+   * @return {void}
+   */
   toggleExpandCollapseAll(e = !0) {
     var s;
     const t = this.tableModel.getBodyModel();
     $(t) && (t.toggleExpandCollapseAll(e), this.repaint(), (s = this.storeStateCollapsedExpandService) == null || s.collapsedStateAll(e));
   }
+  /**
+   * Toggles the checkbox state of a specific row in a table.
+   *
+   * @param {number} rowIdx - The index of the row to toggle the checkbox state.
+   * @param {number} _colIdx - The index of the column. This parameter is unused.
+   * @param {AreaIdent} areaIdent - The identifier of the table area.
+   *
+   * @return {void} - This method does not return anything.
+   */
   toggleRowCheckbox(e, t, s) {
     var l;
     const i = this.tableModel.getAreaModel(s), o = i.isRowChecked(e), r = o === void 0 || o === "semi" || o === "none";
@@ -1688,6 +1885,13 @@ class _ extends de {
     const n = (l = i.rowSelectionModel) == null ? void 0 : l.getCheckedRows();
     this.eventListener.onCheckboxChanged(n || []);
   }
+  /**
+   * Handle mouse click events.
+   *
+   * @param {GeMouseEvent} evt - The mouse click event.
+   * @param {GeMouseEvent | undefined} previousEvt - The previous mouse click event, if any.
+   * @returns {void}
+   */
   onMouseClicked(e, t) {
     let s = this.selectionService.onMouseClicked(e, t);
     if (!s && this.getFocusModel) {
@@ -1696,19 +1900,41 @@ class _ extends de {
     }
     this.eventListener.onMouseClicked(e), s && this.debounce(this.repaint.bind(this), 10);
   }
+  /**
+   * Updates the table (repaint) when an external filter is changed.
+   *
+   * @param {boolean} clearSelection - Indicates whether to clear the selection model or not. Default value is true.
+   * @return {void}
+   */
   externalFilterChanged(e = !0) {
     const t = this.tableOptions.externalFilterFunction;
     t && (e && this.clearSelectionModel(), this.tableModel.externalFilterChanged(t), this.scrollViewport.scrollTo(0, 0), this.tableModel.recalcHeightAndPadding(), this.resetSizeOfWrapperDiv(), this.repaint());
   }
+  /**
+   * Handle the double click event on the table header.
+   *
+   * @param {MouseEvent} event - The mouse event that triggered the double click.
+   * @param {number} _rowIdx - The row index of the header.
+   * @param {number} colIdx - The column index of the header.
+   *
+   * @return {void}
+   */
   onHeaderDblClicked(e, t, s) {
     var o, r;
     const i = this.tableModel.getColumnDef(s);
     if (i != null && i.sortable && i.sortable()) {
       e.preventDefault(), e.stopPropagation();
-      const n = i.sortStatesOrder ? i.sortStatesOrder : this.tableOptions.sortOrder, l = i.sortState ?? "", a = n[(n.indexOf(l) + 1) % n.length], d = new he(s, a);
+      const n = i.sortStatesOrder ? i.sortStatesOrder : this.tableOptions.sortOrder, l = i.sortState ?? "", a = n[(n.indexOf(l) + 1) % n.length], d = new ce(s, a);
       this.tableModel.doSort([d]) && ((o = this.tableModel.getColumnDefs()) == null || o.forEach((g) => g.sortState = ""), i.sortState = a), this.repaint(), (r = this.storeSortingService) == null || r.setSortItems([d]);
     }
   }
+  /**
+   * Changes the focus cell using the specified deltas.
+   *
+   * @param {number} dx - The delta for the column index.
+   * @param {number} dy - The delta for the row index.
+   * @return {boolean} - True if the focus cell was changed, false otherwise.
+   */
   changeFocusCell(e, t) {
     if (!this.isEditing() && this.getFocusModel) {
       const s = this.getFocusModel();
@@ -1719,9 +1945,19 @@ class _ extends de {
     }
     return !1;
   }
+  /**
+   * Resizes the column based on the mouse event.
+   *
+   * @param {GeMouseEvent} mouseEvent - The mouse event that triggered the resize.
+   */
   resizeColumn(e) {
     this.tableModel.setColumnWidth(this.mouseStartColumnIndex, this.mouseStartWidth + e.draggingX), this.tableModel.recalcPadding(), this.resetSizeOfWrapperDiv(), this.adjustContainersAndRows();
   }
+  /**
+   * Clears the selection model, if available.
+   *
+   * @return {void}
+   */
   clearSelectionModel() {
     var e;
     this.getSelectionModel && ((e = this.getSelectionModel()) == null || e.clear());
@@ -1730,6 +1966,14 @@ class _ extends de {
     var s;
     console.clear(), console.info("this.hostElement.offsetTop", this.hostElement.offsetTop), console.info("this.hostElement.scrollHeight", this.hostElement.scrollHeight), console.info("this.scrollViewportTop", this.scrollTop), console.info("this.areaHeaderCenter.parent.clientHeight", this.areaHeaderCenter.parent.clientHeight), console.info("bodyY", t), console.info("bodyX", e), console.info("rows", this.firstVisibleRowIndex), console.info(""), console.info("this.tableModel", this.tableModel), console.info(""), console.info("this.mouseMoveEvent.clientX", (s = this.mouseHandler.mouseEvent) == null ? void 0 : s.clientX), console.info("this.hostElement.offsetLeft", this.hostElement.offsetLeft), console.info("this.areaBodyWestGeo.width", this.areaBodyWestGeo.width);
   }
+  /**
+   * Restores the scroll position of the table if auto restore options are enabled.
+   *
+   * @private
+   * @memberof ClassName
+   *
+   * @returns {void}
+   */
   autoRestoreScrollPosition() {
     var e;
     if ((e = this.tableOptions) != null && e.autoRestoreOptions && this.storeScrollPosStateService && this.tableOptions.autoRestoreOptions.autoRestoreScrollPosition) {
@@ -1737,6 +1981,20 @@ class _ extends de {
       s && this.scrollViewport.scrollTo(...s);
     }
   }
+  /**
+   * Automatically restores the sorting state of the table.
+   *
+   * @private
+   * @function autoRestoreSortingState
+   * @memberof ClassName
+   *
+   * @description
+   * This method checks if the autoRestoreSortingState option is enabled in the tableOptions.
+   * If enabled, it uses the storeSortingService to retrieve the sort items array.
+   * If there are sort items present, it applies them to the table's body model using the doSort method.
+   *
+   * @returns {void}
+   */
   autoRestoreSortingState() {
     var e, t;
     if ((t = (e = this.tableOptions) == null ? void 0 : e.autoRestoreOptions) != null && t.autoRestoreSortingState && this.storeSortingService) {
@@ -1744,6 +2002,12 @@ class _ extends de {
       s != null && s.length && this.tableModel.getBodyModel().doSort(s);
     }
   }
+  /**
+   * Restores the collapsed/expanded state of the rows in the table based on the autoRestoreOptions
+   * specified in the tableOptions. This method is private and should not be called directly.
+   *
+   * @private
+   */
   autoRestoreCollapsedExpandedState() {
     var e, t;
     if ((t = (e = this.tableOptions) == null ? void 0 : e.autoRestoreOptions) != null && t.getRowId && this.storeStateCollapsedExpandService) {
@@ -1760,8 +2024,8 @@ class _ extends de {
               else if (o.allCollapsed)
                 d.expanded = !1;
               else {
-                const u = i(d.data);
-                o.mode === "expanded" ? d.expanded = this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(u) : o.mode === "collapsed" && (d.expanded = !this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(u));
+                const S = i(d.data);
+                o.mode === "expanded" ? d.expanded = this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(S) : o.mode === "collapsed" && (d.expanded = !this.storeStateCollapsedExpandService.collapsedExpandedStateIncludes(S));
               }
           }
           n.recalcVisibleTreeRows();
@@ -1770,9 +2034,9 @@ class _ extends de {
     }
   }
 }
-function Ae({
+function Re({
   tableModel: p,
-  tableOptions: e = new K(),
+  tableOptions: e = new Y(),
   mouseMoved: t,
   checkboxChanged: s,
   contextmenu: i,
@@ -1782,44 +2046,44 @@ function Ae({
   mouseDraggingEnd: l,
   tableReady: a
 }) {
-  const d = q(null);
-  let u = !1;
-  U(() => {
-    d.current && !u && (g(d.current), u = !0);
+  const d = U(null);
+  let S = !1;
+  J(() => {
+    d.current && !S && (g(d.current), S = !0);
   });
   const g = (m) => {
-    const c = {
-      onCheckboxChanged: (h) => {
-        s && s(h);
+    const h = {
+      onCheckboxChanged: (c) => {
+        s && s(c);
       },
-      onContextmenu: (h) => {
-        i && i(h);
+      onContextmenu: (c) => {
+        i && i(c);
       },
-      onModelChanged: (h) => {
-        o && o(h);
+      onModelChanged: (c) => {
+        o && o(c);
       },
-      onMouseClicked: (h) => {
-        r && r(h);
+      onMouseClicked: (c) => {
+        r && r(c);
       },
-      onMouseDragging: (h) => {
-        n && n(h);
+      onMouseDragging: (c) => {
+        n && n(c);
       },
-      onMouseDraggingEnd: (h) => {
-        l && l(h);
+      onMouseDraggingEnd: (c) => {
+        l && l(c);
       },
-      onMouseMoved: (h) => {
-        t && t(h);
+      onMouseMoved: (c) => {
+        t && t(c);
       }
-    }, b = new _(
+    }, f = new _(
       m,
       p,
-      new z(),
+      new K(),
       e,
-      c
+      h
     );
-    b.firstInit(), a && a(b.getApi());
+    f.firstInit(), a && a(f.getApi());
   };
-  return /* @__PURE__ */ Y(
+  return /* @__PURE__ */ q(
     "div",
     {
       ref: d,
@@ -1834,21 +2098,21 @@ function Ae({
     }
   );
 }
-var B, F = J;
+var B, F = Q;
 if (process.env.NODE_ENV === "production")
   B = F.createRoot, F.hydrateRoot;
 else {
-  var N = F.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  var j = F.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
   B = function(p, e) {
-    N.usingClientEntryPoint = !0;
+    j.usingClientEntryPoint = !0;
     try {
       return F.createRoot(p, e);
     } finally {
-      N.usingClientEntryPoint = !1;
+      j.usingClientEntryPoint = !1;
     }
   };
 }
-class Re {
+class Me {
   constructor(e) {
     this.Component = e, console.info(e);
   }
@@ -1867,6 +2131,6 @@ class Re {
   }
 }
 export {
-  Re as ComponentRendererWrapper,
-  Ae as GuiexpertTable
+  Me as ComponentRendererWrapper,
+  Re as GuiexpertTable
 };