@toolbox-web/grid 1.20.0 → 1.21.0

package/index.js

@@ -24,7 +24,7 @@ function gt(t, e, i, o) {
   const s = i?.gridAriaDescribedBy;
   return s !== t.ariaDescribedBy && (t.ariaDescribedBy = s, s ? e.setAttribute("aria-describedby", s) : e.removeAttribute("aria-describedby"), n = !0), n;
 }
-const G = {
+const X = {
   STRETCH: "stretch",
   FIXED: "fixed"
 }, pt = {
@@ -114,8 +114,8 @@ function Ye(t, e) {
   i ? i.split(/\s+/).includes(e) || t.setAttribute("part", i + " " + e) : t.setAttribute("part", e);
 }
 function Te(t) {
-  const e = t.effectiveConfig?.fitMode || t.fitMode || G.STRETCH;
-  if (e !== G.STRETCH && e !== G.FIXED || t.__didInitialAutoSize || !t.isConnected) return;
+  const e = t.effectiveConfig?.fitMode || t.fitMode || X.STRETCH;
+  if (e !== X.STRETCH && e !== X.FIXED || t.__didInitialAutoSize || !t.isConnected) return;
   const i = Array.from(t._headerRowEl?.children || []);
   if (!i.length) return;
   let o = !1;
@@ -131,14 +131,14 @@ function Te(t) {
       }
     }
     l > 0 && (n.width = l + 2, n.__autoSized = !0, o = !0);
-  }), o && V(t), t.__didInitialAutoSize = !0;
+  }), o && B(t), t.__didInitialAutoSize = !0;
 }
 const bt = /^(?:\d+(?:\.\d+)?(?:px|%|fr|em|rem|ch|vw|vh|vmin|vmax)|calc\(.+\)|min-content|max-content|minmax\(.+\)|fit-content\(.+\)|auto)$/i;
 function xe(t, e) {
   return typeof t == "number" ? `${t}px` : (bt.test(t) || console.warn(`[tbw-grid] Column '${e ?? "?"}' has an invalid CSS width value: '${t}'. Expected a number (px) or a valid CSS unit string (e.g. '30%', '2fr', 'calc(...)').`), t);
 }
-function V(t) {
-  (t.effectiveConfig?.fitMode || t.fitMode || G.STRETCH) === G.STRETCH ? t._gridTemplate = t._visibleColumns.map((i) => {
+function B(t) {
+  (t.effectiveConfig?.fitMode || t.fitMode || X.STRETCH) === X.STRETCH ? t._gridTemplate = t._visibleColumns.map((i) => {
     if (i.width != null) return xe(i.width, i.field);
     const o = i.minWidth;
     return o != null ? `minmax(${o}px, 1fr)` : "1fr";
@@ -268,12 +268,12 @@ function Le(t) {
 }
 const Lt = 100;
 class Pt {
-  #l;
+  #a;
   #n;
   #u;
   #d;
   #h;
-  #a = {};
+  #l = {};
   #o = {};
   #f = !0;
   #w = [];
@@ -286,7 +286,7 @@ class Pt {
     this.#r = e;
   }
   get original() {
-    return this.#a;
+    return this.#l;
   }
   get effective() {
     return this.#o;
@@ -328,10 +328,10 @@ class Pt {
     this.#f = !0;
   }
   setGridConfig(e) {
-    this.#l = e, this.#f = !0, this.#d = void 0;
+    this.#a = e, this.#f = !0, this.#d = void 0;
   }
   getGridConfig() {
-    return this.#l;
+    return this.#a;
   }
   setColumns(e) {
     this.#n = e, this.#f = !0;
@@ -349,8 +349,8 @@ class Pt {
     const e = (this.#o.columns?.length ?? 0) > 0;
     if (!this.#f && e)
       return;
-    const i = this.#I();
-    this.#f = !1, this.#a = i, Object.freeze(this.#a), this.#a.columns && Object.freeze(this.#a.columns), this.#o = this.#x(this.#a), this.#m();
+    const i = this.#N();
+    this.#f = !1, this.#l = i, Object.freeze(this.#l), this.#l.columns && Object.freeze(this.#l.columns), this.#o = this.#x(this.#l), this.#m();
   }
   #x(e) {
     const i = { ...e };
@@ -364,11 +364,11 @@ class Pt {
   }
   #m() {
     const e = this.#o;
-    this.#z(), typeof e.rowHeight == "number" && e.rowHeight > 0 && this.#r.setRowHeight(e.rowHeight), e.fitMode === "fixed" && this.columns.forEach((o) => {
+    this.#O(), typeof e.rowHeight == "number" && e.rowHeight > 0 && this.#r.setRowHeight(e.rowHeight), e.fitMode === "fixed" && this.columns.forEach((o) => {
       o.width == null && (o.width = 80);
     }), this.#r.applyAnimationConfig(e);
   }
-  #z() {
+  #O() {
     const e = this.#o.typeDefaults;
     if (!e) return;
     const i = this.columns;
@@ -378,8 +378,8 @@ class Pt {
       n && (!o.renderer && !o.viewRenderer && n.renderer && (o.renderer = n.renderer), !o.format && n.format && (o.format = n.format), !o.editor && n.editor && (o.editor = n.editor), !o.editorParams && n.editorParams && (o.editorParams = n.editorParams));
     }
   }
-  #I() {
-    const e = this.#l ? { ...this.#l } : {}, i = Array.isArray(e.columns) ? [...e.columns] : [], o = (this.#d ?? []).map((s) => ({
+  #N() {
+    const e = this.#a ? { ...this.#a } : {}, i = Array.isArray(e.columns) ? [...e.columns] : [], o = (this.#d ?? []).map((s) => ({
       ...s
     }));
     let n = Ae(
@@ -413,7 +413,7 @@ class Pt {
       const f = Array.from(r.values());
       f.sort((p, g) => (p.order ?? 100) - (g.order ?? 100)), e.shell.headerContents = f;
     }
-    const s = this.#r.getShellToolbarContents(), l = Array.from(s.values()), a = this.#l?.shell?.header?.toolbarContents ?? [], c = new Set(a.map((f) => f.id)), h = [...a];
+    const s = this.#r.getShellToolbarContents(), l = Array.from(s.values()), a = this.#a?.shell?.header?.toolbarContents ?? [], c = new Set(a.map((f) => f.id)), h = [...a];
     for (const f of l)
       c.has(f.id) || h.push(f);
     h.sort((f, p) => (f.order ?? 0) - (p.order ?? 0)), e.shell.header.toolbarContents = h;
@@ -466,7 +466,7 @@ class Pt {
           l.applyColumnState(a.field, a);
   }
   resetState(e) {
-    this.#C = void 0, this.#r.setSortState(null), this.#o = this.#x(this.#a), this.#m();
+    this.#C = void 0, this.#r.setSortState(null), this.#o = this.#x(this.#l), this.#m();
     for (const i of e)
       if (i.applyColumnState)
         for (const o of this.columns)
@@ -687,7 +687,7 @@ function Dt() {
 function Mt() {
   return it.content.firstElementChild.cloneNode(!0);
 }
-function Y(t) {
+function W(t) {
   t.__cellDisplayCache = void 0, t.__cellCacheEpoch = void 0, t.__hasSpecialColumns = void 0;
 }
 function kt(t, e, i, o, n) {
@@ -725,13 +725,13 @@ function kt(t, e, i, o, n) {
     }
     if (!R || y) {
       const S = se(d), L = x || t._activeEditRows === g;
-      S && !L ? (d.__isCustomRow && (d.className = "data-grid-row", d.setAttribute("role", "row"), d.__isCustomRow = !1), le(d), B(t, d, u, g), d.__epoch = o, d.__rowDataRef = u) : S && L ? (ae(t, d, u, g), d.__rowDataRef = u) : (d.__isCustomRow && (d.className = "data-grid-row", d.setAttribute("role", "row"), d.__isCustomRow = !1), B(t, d, u, g), d.__epoch = o, d.__rowDataRef = u);
+      S && !L ? (d.__isCustomRow && (d.className = "data-grid-row", d.setAttribute("role", "row"), d.__isCustomRow = !1), le(d), G(t, d, u, g), d.__epoch = o, d.__rowDataRef = u) : S && L ? (ae(t, d, u, g), d.__rowDataRef = u) : (d.__isCustomRow && (d.className = "data-grid-row", d.setAttribute("role", "row"), d.__isCustomRow = !1), G(t, d, u, g), d.__epoch = o, d.__rowDataRef = u);
     } else if (E) {
       const S = se(d), L = x || t._activeEditRows === g;
-      S && !L ? (le(d), B(t, d, u, g), d.__epoch = o, d.__rowDataRef = u) : (ae(t, d, u, g), d.__rowDataRef = u);
+      S && !L ? (le(d), G(t, d, u, g), d.__epoch = o, d.__rowDataRef = u) : (ae(t, d, u, g), d.__rowDataRef = u);
     } else {
       const S = se(d), L = x || t._activeEditRows === g;
-      S && !L ? (le(d), B(t, d, u, g), d.__epoch = o, d.__rowDataRef = u) : ae(t, d, u, g);
+      S && !L ? (le(d), G(t, d, u, g), d.__epoch = o, d.__rowDataRef = u) : ae(t, d, u, g);
     }
     let v = !1;
     const b = t.changedRowIds;
@@ -750,8 +750,8 @@ function kt(t, e, i, o, n) {
       try {
         const L = N(u);
         if (L && L.length > 0) {
-          const re = L.filter((X) => X && typeof X == "string");
-          re.forEach((X) => d.classList.add(X)), d.setAttribute("data-dynamic-classes", re.join(" "));
+          const re = L.filter((Y) => Y && typeof Y == "string");
+          re.forEach((Y) => d.classList.add(Y)), d.setAttribute("data-dynamic-classes", re.join(" "));
         } else
           d.removeAttribute("data-dynamic-classes");
       } catch (L) {
@@ -803,7 +803,7 @@ function ae(t, e, i, o) {
   }
   for (let u = 0; u < a; u++)
     if (r[u].externalView && !n[u].querySelector("[data-external-view]")) {
-      B(t, e, i, o);
+      G(t, e, i, o);
       return;
     }
   for (let u = 0; u < a; u++) {
@@ -898,7 +898,7 @@ function ae(t, e, i, o) {
     });
   }
 }
-function B(t, e, i, o) {
+function G(t, e, i, o) {
   e.classList.remove("tbw-row-loading"), e.removeAttribute("aria-busy");
   const n = t.__frameworkAdapter;
   if (n?.releaseCell) {
@@ -1009,7 +1009,7 @@ function ze(t, e, i) {
         }
         return;
       }
-      W(t);
+      F(t);
     }
   }
 }
@@ -1024,7 +1024,7 @@ function It(t, e) {
   if (!(c(a) && (e.key === "Home" || e.key === "End")) && !(c(a) && (e.key === "ArrowUp" || e.key === "ArrowDown") && a.tagName === "INPUT" && a.type === "number") && !(c(a) && (e.key === "ArrowLeft" || e.key === "ArrowRight")) && !(c(a) && (e.key === "Enter" || e.key === "Escape")) && !(n && s === "select" && (e.key === "ArrowDown" || e.key === "ArrowUp"))) {
     switch (e.key) {
       case "Tab": {
-        e.preventDefault(), !e.shiftKey ? t._focusCol < o ? t._focusCol += 1 : (typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow < i && (t._focusRow += 1, t._focusCol = 0)) : t._focusCol > 0 ? t._focusCol -= 1 : t._focusRow > 0 && (typeof t.commitActiveRowEdit == "function" && t._activeEditRows === t._focusRow && t.commitActiveRowEdit(), t._focusRow -= 1, t._focusCol = o), W(t);
+        e.preventDefault(), !e.shiftKey ? t._focusCol < o ? t._focusCol += 1 : (typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow < i && (t._focusRow += 1, t._focusCol = 0)) : t._focusCol > 0 ? t._focusCol -= 1 : t._focusRow > 0 && (typeof t.commitActiveRowEdit == "function" && t._activeEditRows === t._focusRow && t.commitActiveRowEdit(), t._focusRow -= 1, t._focusCol = o), F(t);
         return;
       }
       case "ArrowDown":
@@ -1042,10 +1042,10 @@ function It(t, e) {
         break;
       }
       case "Home":
-        (e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = 0), t._focusCol = 0, e.preventDefault(), W(t, { forceScrollLeft: !0 });
+        (e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = 0), t._focusCol = 0, e.preventDefault(), F(t, { forceScrollLeft: !0 });
         return;
       case "End":
-        (e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = i), t._focusCol = o, e.preventDefault(), W(t, { forceScrollRight: !0 });
+        (e.ctrlKey || e.metaKey) && (n && typeof t.commitActiveRowEdit == "function" && t.commitActiveRowEdit(), t._focusRow = i), t._focusCol = o, e.preventDefault(), F(t, { forceScrollRight: !0 });
         return;
       case "PageDown":
         t._focusRow = Math.min(i, t._focusRow + 20), e.preventDefault();
@@ -1084,10 +1084,10 @@ function It(t, e) {
       default:
         return;
     }
-    W(t);
+    F(t);
   }
 }
-function W(t, e) {
+function F(t, e) {
   if (t._virtualization?.enabled) {
     const { rowHeight: s, container: l, viewportEl: a } = t._virtualization, c = l, h = a?.clientHeight ?? c?.clientHeight ?? 0;
     if (c && h > 0) {
@@ -1211,14 +1211,14 @@ function Ft(t, e, i) {
     { signal: i }
   );
 }
-function Ut(t, e, i, o) {
+function Vt(t, e, i, o) {
   e.addEventListener("keydown", (n) => It(t, n), { signal: o }), i.addEventListener("mousedown", (n) => qt(t, i, n), { signal: o }), document.addEventListener("mousemove", (n) => $t(t, i, n), { signal: o }), document.addEventListener("mouseup", (n) => Wt(t, i, n), { signal: o });
 }
-function Vt(t, e) {
+function Ut(t, e) {
   return t == null && e == null ? 0 : t == null ? -1 : e == null || t > e ? 1 : t < e ? -1 : 0;
 }
 function ot(t, e, i) {
-  const n = i.find((l) => l.field === e.field)?.sortComparator ?? Vt, { field: r, direction: s } = e;
+  const n = i.find((l) => l.field === e.field)?.sortComparator ?? Ut, { field: r, direction: s } = e;
   return [...t].sort((l, a) => n(l[r], a[r], l, a) * s);
 }
 function Oe(t, e, i, o) {
@@ -1246,7 +1246,7 @@ function Me(t, e, i) {
     Oe(t, l, e, i);
   }) : Oe(t, s, e, i);
 }
-function F(t, e) {
+function V(t, e) {
   return t.effectiveConfig?.sortable !== !1 && e.sortable === !0;
 }
 function j(t, e) {
@@ -1303,21 +1303,21 @@ function oe(t) {
         sortState: l,
         filterActive: !1,
         cellEl: n,
-        renderSortIcon: () => F(t, i) ? K(t, i) : null,
+        renderSortIcon: () => V(t, i) ? K(t, i) : null,
         renderFilterButton: () => null
       }, c = i.headerRenderer(a);
-      Xt(n, c), F(t, i) && Z(t, i, o, n), j(t, i) && (n.classList.add("resizable"), n.appendChild(Q(t, o, n)));
+      Xt(n, c), V(t, i) && Z(t, i, o, n), j(t, i) && (n.classList.add("resizable"), n.appendChild(Q(t, o, n)));
     } else if (i.headerLabelRenderer) {
       const a = {
         column: i,
         value: r
       }, c = i.headerLabelRenderer(a), h = document.createElement("span");
-      c == null ? h.textContent = r : typeof c == "string" ? h.innerHTML = k(c) : c instanceof Node && h.appendChild(c), n.appendChild(h), F(t, i) && (Z(t, i, o, n), n.appendChild(K(t, i))), j(t, i) && (n.classList.add("resizable"), n.appendChild(Q(t, o, n)));
+      c == null ? h.textContent = r : typeof c == "string" ? h.innerHTML = k(c) : c instanceof Node && h.appendChild(c), n.appendChild(h), V(t, i) && (Z(t, i, o, n), n.appendChild(K(t, i))), j(t, i) && (n.classList.add("resizable"), n.appendChild(Q(t, o, n)));
     } else if (i.__headerTemplate)
-      Array.from(i.__headerTemplate.childNodes).forEach((a) => n.appendChild(a.cloneNode(!0))), F(t, i) && (Z(t, i, o, n), n.appendChild(K(t, i))), j(t, i) && (n.classList.add("resizable"), n.appendChild(Q(t, o, n)));
+      Array.from(i.__headerTemplate.childNodes).forEach((a) => n.appendChild(a.cloneNode(!0))), V(t, i) && (Z(t, i, o, n), n.appendChild(K(t, i))), j(t, i) && (n.classList.add("resizable"), n.appendChild(Q(t, o, n)));
     else {
       const a = document.createElement("span");
-      a.textContent = r, n.appendChild(a), F(t, i) && (Z(t, i, o, n), n.appendChild(K(t, i))), j(t, i) && (n.classList.add("resizable"), n.appendChild(Q(t, o, n)));
+      a.textContent = r, n.appendChild(a), V(t, i) && (Z(t, i, o, n), n.appendChild(K(t, i))), j(t, i) && (n.classList.add("resizable"), n.appendChild(Q(t, o, n)));
     }
     e.appendChild(n);
   }), e.querySelectorAll(".cell.sortable").forEach((i) => {
@@ -1378,15 +1378,15 @@ function ti(t, e) {
 }
 var A = ((t) => (t[t.STYLE = 1] = "STYLE", t[t.VIRTUALIZATION = 2] = "VIRTUALIZATION", t[t.HEADER = 3] = "HEADER", t[t.ROWS = 4] = "ROWS", t[t.COLUMNS = 5] = "COLUMNS", t[t.FULL = 6] = "FULL", t))(A || {});
 class ii {
-  #l;
+  #a;
   #n = 0;
   #u = 0;
   #d = null;
   #h = null;
-  #a = null;
+  #l = null;
   #o = !1;
   constructor(e) {
-    this.#l = e;
+    this.#a = e;
   }
   requestPhase(e, i) {
     e > this.#n && (this.#n = e), this.#u === 0 && (this.#f(), this.#u = requestAnimationFrame(() => this.#w()));
@@ -1395,7 +1395,7 @@ class ii {
     return this.#d ? this.#d : Promise.resolve();
   }
   setInitialReadyResolver(e) {
-    this.#a = e;
+    this.#l = e;
   }
   cancel() {
     this.#u !== 0 && (cancelAnimationFrame(this.#u), this.#u = 0), this.#n = 0, this.#h && (this.#h(), this.#h = null, this.#d = null);
@@ -1412,12 +1412,12 @@ class ii {
     }));
   }
   #w() {
-    if (this.#u = 0, !this.#l.isConnected()) {
+    if (this.#u = 0, !this.#a.isConnected()) {
       this.#n = 0, this.#h && (this.#h(), this.#h = null, this.#d = null);
       return;
     }
     const e = this.#n;
-    this.#n = 0, e >= 5 && this.#l.mergeConfig(), e >= 4 && this.#l.processRows(), e >= 5 && (this.#l.processColumns(), this.#l.updateTemplate()), e >= 3 && this.#l.renderHeader(), e >= 2 && this.#l.renderVirtualWindow(), e >= 1 && this.#l.afterRender(), !this.#o && this.#a && (this.#o = !0, this.#a()), this.#h && (this.#h(), this.#h = null, this.#d = null);
+    this.#n = 0, e >= 5 && this.#a.mergeConfig(), e >= 4 && this.#a.processRows(), e >= 5 && (this.#a.processColumns(), this.#a.updateTemplate()), e >= 3 && this.#a.renderHeader(), e >= 2 && this.#a.renderVirtualWindow(), e >= 1 && this.#a.afterRender(), !this.#o && this.#l && (this.#o = !0, this.#l()), this.#h && (this.#h(), this.#h = null, this.#d = null);
   }
 }
 function Ie(t) {
@@ -1484,25 +1484,26 @@ function li(t, e, i) {
   t.removeAttribute(ce), t.offsetWidth, t.setAttribute(ce, e);
   const o = si(t, e);
   setTimeout(() => {
-    e !== "remove" && t.removeAttribute(ce);
+    e !== "remove" && t.removeAttribute(ce), i?.();
   }, o);
 }
 function Se(t, e, i) {
   if (e < 0)
-    return !1;
+    return Promise.resolve(!1);
   const o = t.findRenderedRowElement?.(e);
-  return o ? (li(o, i), !0) : !1;
+  return o ? new Promise((n) => {
+    li(o, i, () => n(!0));
+  }) : Promise.resolve(!1);
 }
 function ai(t, e, i) {
-  let o = 0;
-  for (const n of e)
-    Se(t, n, i) && o++;
-  return o;
+  return Promise.all(e.map((o) => Se(t, o, i))).then(
+    (o) => o.filter(Boolean).length
+  );
 }
 function ci(t, e, i) {
   const o = t._rows ?? [], n = t.getRowId;
   if (!n)
-    return !1;
+    return Promise.resolve(!1);
   const r = o.findIndex((s) => {
     if (s == null) return !1;
     try {
@@ -1511,7 +1512,7 @@ function ci(t, e, i) {
       return !1;
     }
   });
-  return r < 0 ? !1 : Se(t, r, i);
+  return r < 0 ? Promise.resolve(!1) : Se(t, r, i);
 }
 function J(t, e, i) {
   const o = document.createElement(t);
@@ -1875,7 +1876,7 @@ function Fe(t, e) {
   const i = t.querySelector("[data-panel-toggle]");
   i && (i.classList.toggle("active", e.isPanelOpen), i.setAttribute("aria-pressed", String(e.isPanelOpen)));
 }
-function Ue(t, e) {
+function Ve(t, e) {
   const i = t.querySelector(".tbw-tool-panel");
   i && (i.classList.toggle("open", e.isPanelOpen), e.isPanelOpen || (i.style.width = ""));
 }
@@ -1930,7 +1931,7 @@ function vi(t, e) {
         s && t.expandedSections.add(s.id);
       }
       const n = e.getShadow();
-      Fe(n, t), Ue(n, t), bi(n, t, e.getAccordionIcons()), e.emit("tool-panel-open", { sections: o.expandedSections });
+      Fe(n, t), Ve(n, t), bi(n, t, e.getAccordionIcons()), e.emit("tool-panel-open", { sections: o.expandedSections });
     },
     closeToolPanel() {
       if (!t.isPanelOpen) return;
@@ -1941,7 +1942,7 @@ function vi(t, e) {
         r.onClose?.();
       t.isPanelOpen = !1;
       const n = e.getShadow();
-      Fe(n, t), Ue(n, t), e.emit("tool-panel-close", {});
+      Fe(n, t), Ve(n, t), e.emit("tool-panel-close", {});
     },
     toggleToolPanel() {
       t.isPanelOpen ? o.closeToolPanel() : o.openToolPanel();
@@ -2081,12 +2082,12 @@ function yi(t, e, i, o) {
   }
   return n;
 }
-const Ve = "tbw-grid-styles";
+const Ue = "tbw-grid-styles";
 let te = "";
 const we = /* @__PURE__ */ new Map();
 function _i() {
-  let t = document.getElementById(Ve);
-  return t || (t = document.createElement("style"), t.id = Ve, t.setAttribute("data-tbw-grid", "true"), document.head.appendChild(t)), t;
+  let t = document.getElementById(Ue);
+  return t || (t = document.createElement("style"), t.id = Ue, t.setAttribute("data-tbw-grid", "true"), document.head.appendChild(t)), t;
 }
 function be() {
   const t = _i(), e = Array.from(we.values()).join(`
@@ -2412,7 +2413,7 @@ function ve(t, e, i) {
       t[r].offset += n;
   }
 }
-function Ui(t) {
+function Vi(t) {
   if (t.length === 0) return 0;
   const e = t[t.length - 1];
   return e.offset + e.height;
@@ -2432,7 +2433,7 @@ function Ge(t, e) {
   }
   return Math.max(0, Math.min(i, t.length - 1));
 }
-function Vi(t, e) {
+function Ui(t, e) {
   let i = 0, o = 0;
   for (const n of t)
     n.measured && (i += n.height, o++);
@@ -2464,7 +2465,7 @@ function Gi(t, e) {
       (!m.measured || Math.abs(m.height - C) > 1) && (ve(i, u, C), Wi(o, d, C, a), c = !0);
     }
   });
-  const h = c ? Bi(i) : 0, f = c ? Vi(i, t.defaultHeight) : 0;
+  const h = c ? Bi(i) : 0, f = c ? Ui(i, t.defaultHeight) : 0;
   return { hasChanges: c, measuredCount: h, averageHeight: f };
 }
 function Xi(t, e, i, o) {
@@ -2809,8 +2810,8 @@ ${Zi}
 `;
 class I extends HTMLElement {
   static tagName = "tbw-grid";
-  static version = "1.20.0";
-  static #l = 0;
+  static version = "1.21.0";
+  static #a = 0;
   static adapters = [];
   static registerAdapter(e) {
     this.adapters.push(e);
@@ -2830,7 +2831,7 @@ class I extends HTMLElement {
   #u = !1;
   #d;
   #h;
-  #a = [];
+  #l = [];
   get #o() {
     return this.#i?.effective ?? {};
   }
@@ -2848,13 +2849,13 @@ class I extends HTMLElement {
   #g = !1;
   #x = !1;
   #m = 0;
-  #z;
-  #I = Ai();
+  #O;
+  #N = Ai();
   #b;
   #y;
   #p;
   #R;
-  #te = {
+  #ee = {
     scrollTop: 0,
     scrollLeft: 0,
     scrollHeight: 0,
@@ -2864,19 +2865,19 @@ class I extends HTMLElement {
   };
   #t;
   #_;
-  #N = !1;
-  #O;
-  #G;
+  #q = !1;
   #D;
+  #G;
+  #M;
   #i;
   #e = ui();
   #c;
-  #q;
   #$;
-  #M = !1;
+  #W;
+  #k = !1;
   #E = /* @__PURE__ */ new Set();
   #H = /* @__PURE__ */ new Map();
-  #W;
+  #F;
   #S = /* @__PURE__ */ new Map();
   _rows = [];
   #X = [];
@@ -2919,7 +2920,6 @@ class I extends HTMLElement {
   _focusCol = 0;
   _restoreFocusAfterRender = !1;
   _sortState = null;
-  #Y = !1;
   _gridTemplate = "";
   __rowRenderEpoch = 0;
   __didInitialAutoSize = !1;
@@ -2942,48 +2942,48 @@ class I extends HTMLElement {
     return this._rows;
   }
   set rows(e) {
-    const i = this.#a;
-    this.#a = e, i !== e && this.#V("rows");
+    const i = this.#l;
+    this.#l = e, i !== e && this.#B("rows");
   }
   get sourceRows() {
-    return this.#a;
+    return this.#l;
   }
   get columns() {
     return [...this._columns];
   }
   set columns(e) {
     const i = this.#i?.getColumns();
-    this.#i?.setColumns(e), i !== e && this.#V("columns");
+    this.#i?.setColumns(e), i !== e && this.#B("columns");
   }
   get gridConfig() {
     return this.#o;
   }
   set gridConfig(e) {
     const i = this.#i?.getGridConfig();
-    this.#i?.setGridConfig(e), i !== e && (this.#i.clearLightDomCache(), this.#V("gridConfig"));
+    this.#i?.setGridConfig(e), i !== e && (this.#i.clearLightDomCache(), this.#B("gridConfig"));
   }
   get fitMode() {
     return this.#o.fitMode ?? "stretch";
   }
   set fitMode(e) {
     const i = this.#i?.getFitMode();
-    this.#i?.setFitMode(e), i !== e && this.#V("fitMode");
+    this.#i?.setFitMode(e), i !== e && this.#B("fitMode");
   }
   get loading() {
-    return this.#M;
+    return this.#k;
   }
   set loading(e) {
-    const i = this.#M;
-    this.#M = e, e ? this.setAttribute("loading", "") : this.removeAttribute("loading"), i !== e && this.#fe();
+    const i = this.#k;
+    this.#k = e, e ? this.setAttribute("loading", "") : this.removeAttribute("loading"), i !== e && this.#ue();
   }
   setRowLoading(e, i) {
     const o = this.#E.has(e);
-    i ? this.#E.add(e) : this.#E.delete(e), o !== i && this.#Q(e, i);
+    i ? this.#E.add(e) : this.#E.delete(e), o !== i && this.#K(e, i);
   }
   setCellLoading(e, i, o) {
     let n = this.#H.get(e);
     const r = n?.has(i) ?? !1;
-    o ? (n || (n = /* @__PURE__ */ new Set(), this.#H.set(e, n)), n.add(i)) : (n?.delete(i), n?.size === 0 && this.#H.delete(e)), r !== o && this.#ge(e, i, o);
+    o ? (n || (n = /* @__PURE__ */ new Set(), this.#H.set(e, n)), n.add(i)) : (n?.delete(i), n?.size === 0 && this.#H.delete(e)), r !== o && this.#fe(e, i, o);
   }
   isRowLoading(e) {
     return this.#E.has(e);
@@ -2994,11 +2994,11 @@ class I extends HTMLElement {
   clearAllLoading() {
     this.loading = !1;
     for (const e of this.#E)
-      this.#Q(e, !1);
+      this.#K(e, !1);
     this.#E.clear();
     for (const [e, i] of this.#H)
       for (const o of i)
-        this.#ge(e, o, !1);
+        this.#fe(e, o, !1);
     this.#H.clear();
   }
   get effectiveConfig() {
@@ -3008,25 +3008,25 @@ class I extends HTMLElement {
     return this.#b || (this.#b = new AbortController()), this.#b.signal;
   }
   constructor() {
-    super(), this.#ve(), this.#d = new Promise((e) => this.#h = e), this.#s = new ii({
+    super(), this.#me(), this.#d = new Promise((e) => this.#h = e), this.#s = new ii({
       mergeConfig: () => {
-        this.#i.parseLightDomColumns(this), this.#i.merge(), this.#oe(), ki(this.#o, this.#t?.getPlugins() ?? []), Ii(this.#t?.getPlugins() ?? []), qi(this.#t?.getPlugins() ?? []), this.#De(), this.#X = [...this._columns];
+        this.#i.parseLightDomColumns(this), this.#i.merge(), this.#ie(), ki(this.#o, this.#t?.getPlugins() ?? []), Ii(this.#t?.getPlugins() ?? []), qi(this.#t?.getPlugins() ?? []), this.#Oe(), this.#X = [...this._columns];
       },
-      processColumns: () => this.#Le(),
-      processRows: () => this.#ze(),
+      processColumns: () => this.#He(),
+      processRows: () => this.#Pe(),
       renderHeader: () => oe(this),
-      updateTemplate: () => V(this),
+      updateTemplate: () => B(this),
       renderVirtualWindow: () => this.refreshVirtualWindow(!0, !0),
       afterRender: () => {
         this.#t?.afterRender(), this._virtualization.enabled && this._virtualization.totalHeightEl && queueMicrotask(() => {
           if (!this._virtualization.totalHeightEl) return;
           const i = this.#T(this._rows.length);
           this._virtualization.totalHeightEl.style.height = `${i}px`;
-        }), this.#o.fitMode === "fixed" && !this.__didInitialAutoSize && (this.__didInitialAutoSize = !0, Te(this)), this._restoreFocusAfterRender && (this._restoreFocusAfterRender = !1, W(this)), this._virtualization.enabled && !this.#U && this.#_e(), this.#x && (this.#x = !1, requestAnimationFrame(() => {
+        }), this.#o.fitMode === "fixed" && !this.__didInitialAutoSize && (this.__didInitialAutoSize = !0, Te(this)), this._restoreFocusAfterRender && (this._restoreFocusAfterRender = !1, F(this)), this._virtualization.enabled && !this.#U && this.#ye(), this.#x && (this.#x = !1, requestAnimationFrame(() => {
           requestAnimationFrame(() => {
-            this.#ye();
+            this.#Ce();
           });
-        })), this.#M && this.#fe();
+        })), this.#k && this.#ue();
       },
       isConnected: () => this.isConnected && this.#f
     }), this.#s.setInitialReadyResolver(() => this.#h?.()), this.#c = vi(this.#e, {
@@ -3039,7 +3039,7 @@ class I extends HTMLElement {
       emit: (e, i) => this.#L(e, i),
       refreshShellHeader: () => this.refreshShellHeader()
     }), this.#i = new Pt({
-      getRows: () => this.#a,
+      getRows: () => this.#l,
       getSortState: () => this._sortState,
       setSortState: (e) => {
         this._sortState = e;
@@ -3051,15 +3051,15 @@ class I extends HTMLElement {
       clearRowPool: () => {
         this._rowPool.length = 0, this._bodyEl && (this._bodyEl.innerHTML = ""), this.__rowRenderEpoch++;
       },
-      setup: () => this.#P(),
+      setup: () => this.#z(),
       renderHeader: () => oe(this),
-      updateTemplate: () => V(this),
+      updateTemplate: () => B(this),
       refreshVirtualWindow: () => this.#s.requestPhase(A.VIRTUALIZATION, "configManager"),
       getVirtualization: () => this._virtualization,
       setRowHeight: (e) => {
         this._virtualization.rowHeight = e;
       },
-      applyAnimationConfig: (e) => this.#Oe(e),
+      applyAnimationConfig: (e) => this.#ze(e),
       getShellLightDomTitle: () => this.#e.lightDomTitle,
       getShellToolPanels: () => this.#e.toolPanels,
       getShellHeaderContents: () => this.#e.headerContents,
@@ -3068,7 +3068,7 @@ class I extends HTMLElement {
       getShellHasToolButtonsContainer: () => this.#e.hasToolButtonsContainer
     });
   }
-  async #ve() {
+  async #me() {
     await Ri(oo);
   }
   getPlugin(e) {
@@ -3087,21 +3087,21 @@ class I extends HTMLElement {
     this._restoreFocusAfterRender = !0, this.#s.requestPhase(A.ROWS, "plugin:requestRenderWithFocus");
   }
   updateTemplate() {
-    V(this);
+    B(this);
   }
   requestAfterRender() {
     this.#s.requestPhase(A.STYLE, "plugin:requestAfterRender");
   }
-  #ie() {
+  #te() {
     this.#t = new ne(this);
     const e = this.#o?.plugins, i = Array.isArray(e) ? e : [];
     this.#t.attachAll(i);
   }
-  #F() {
+  #V() {
     const e = this.#t?.getPluginStyles() ?? [];
     Ei(e);
   }
-  #oe() {
+  #ie() {
     const e = this.#o?.plugins, i = Array.isArray(e) ? e : [];
     if (this.#_ === i)
       return;
@@ -3121,17 +3121,17 @@ class I extends HTMLElement {
       const r = this.#e.headerContentCleanups.get(n);
       r && (r(), this.#e.headerContentCleanups.delete(n)), this.#e.headerContents.delete(n);
     }
-    this.#ie(), this.#F(), this.#_ = i, this.#le(), this.#ne();
+    this.#te(), this.#V(), this.#_ = i, this.#se(), this.#oe();
     const o = this.#g;
     if (this.#g = this.#t?.getAll().some((n) => n.onScroll) ?? !1, !o && this.#g) {
       const r = this.#n.querySelector(".tbw-grid-content") ?? this.#n.querySelector(".tbw-grid-root");
-      this.#j(r);
+      this.#Y(r);
     }
   }
-  #Ce() {
+  #ve() {
     this.#t?.detachAll();
   }
-  #ne() {
+  #oe() {
     if (!this.#t) return;
     const e = this.#t.getToolPanels();
     for (const { panel: o } of e)
@@ -3140,7 +3140,7 @@ class I extends HTMLElement {
     for (const { content: o } of i)
       this.#e.headerContents.has(o.id) || this.#e.headerContents.set(o.id, o);
   }
-  #re() {
+  #ne() {
     const e = I.getAdapters();
     if (e.length === 0 && !this.__frameworkAdapter) return;
     const i = this.__frameworkAdapter;
@@ -3157,17 +3157,17 @@ class I extends HTMLElement {
     };
   }
   connectedCallback() {
-    this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version", I.version), this.id || (this.id = `tbw-grid-${++I.#l}`), this._rows = Array.isArray(this.#a) ? [...this.#a] : [], this.#b && (this.#b.abort(), this.#N = !1), this.#b = new AbortController(), this.#R && (ke(this.#R), this.#R = void 0), this.#k(), this.#i.parseLightDomColumns(this), this.#i.merge(), this.#ie();
+    this.hasAttribute("tabindex") || (this.tabIndex = 0), this.hasAttribute("version") || this.setAttribute("version", I.version), this.id || (this.id = `tbw-grid-${++I.#a}`), this._rows = Array.isArray(this.#l) ? [...this.#l] : [], this.#b && (this.#b.abort(), this.#q = !1), this.#b = new AbortController(), this.#R && (ke(this.#R), this.#R = void 0), this.#I(), this.#i.parseLightDomColumns(this), this.#i.merge(), this.#te();
     const e = this.#o?.plugins;
-    this.#_ = Array.isArray(e) ? e : [], this.#ne(), this.#u || (this.#ee(), this.#F(), this.#u = !0), this.#se(), this.#R = Yt(
+    this.#_ = Array.isArray(e) ? e : [], this.#oe(), this.#u || (this.#J(), this.#V(), this.#u = !0), this.#re(), this.#R = Yt(
       () => {
-        this.#Ne();
+        this.#Ie();
       },
       { timeout: 100 }
     );
   }
   disconnectedCallback() {
-    this.#R && (ke(this.#R), this.#R = void 0), this.#m && (clearTimeout(this.#m), this.#m = 0), this.#Ce(), mi(this.#e), this.#c.setInitialized(!1), this.#q?.(), this.#q = void 0, this.#$?.(), this.#$ = void 0, ct(this.#I), this.#b && (this.#b.abort(), this.#b = void 0), this.#O?.abort(), this.#O = void 0, this.#N = !1, this._resizeController && this._resizeController.dispose(), this.#y && (this.#y.disconnect(), this.#y = void 0), this.#p && (this.#p.disconnect(), this.#p = void 0, this.#U = !1), Y(this), this.#A.clear(), this.#_ = void 0;
+    this.#R && (ke(this.#R), this.#R = void 0), this.#m && (clearTimeout(this.#m), this.#m = 0), this.#ve(), mi(this.#e), this.#c.setInitialized(!1), this.#$?.(), this.#$ = void 0, this.#W?.(), this.#W = void 0, ct(this.#N), this.#b && (this.#b.abort(), this.#b = void 0), this.#D?.abort(), this.#D = void 0, this.#q = !1, this._resizeController && this._resizeController.dispose(), this.#y && (this.#y.disconnect(), this.#y = void 0), this.#p && (this.#p.disconnect(), this.#p = void 0, this.#U = !1), W(this), this.#A.clear(), this.#_ = void 0;
     for (const e of this._rowPool)
       e.remove();
     this._rowPool.length = 0, this.__rowsBodyEl = null, this.#f = !1;
@@ -3188,24 +3188,24 @@ class I extends HTMLElement {
         }
       else e === "fit-mode" && (this.fitMode = o);
   }
-  #se() {
+  #re() {
     const i = this.#n.querySelector(".tbw-grid-content") ?? this.#n.querySelector(".tbw-grid-root");
     if (this._headerRowEl = i?.querySelector(".header-row"), this._virtualization.totalHeightEl = i?.querySelector(".faux-vscroll-spacer"), this._virtualization.viewportEl = i?.querySelector(".rows-viewport"), this._bodyEl = i?.querySelector(".rows"), this.__rowsBodyEl = i?.querySelector(".rows-body"), this.#c.isInitialized) {
       pe(this.#n, this.#e), de(this.#n, this.#o?.shell, this.#e);
       const n = this.#o?.shell?.toolPanel?.defaultOpen;
       n && this.#e.toolPanels.has(n) && (this.openToolPanel(), this.#e.expandedSections.add(n));
     }
-    if (this.setAttribute("data-upgraded", ""), this.#f = !0, this._resizeController = Ie(this), this.#P(), this.#j(i), this.#N)
+    if (this.setAttribute("data-upgraded", ""), this.#f = !0, this._resizeController = Ie(this), this.#z(), this.#Y(i), this.#q)
       return;
-    this.#N = !0;
+    this.#q = !0;
     const o = this.disconnectSignal;
-    Ut(this, this, this.#n, o), this.#le(), queueMicrotask(() => this.#Ee()), this.#s.requestPhase(A.FULL, "afterConnect");
+    Vt(this, this, this.#n, o), this.#se(), queueMicrotask(() => this.#_e()), this.#s.requestPhase(A.FULL, "afterConnect");
   }
-  #le() {
+  #se() {
     const e = this.#o.rowHeight, i = this.#t.hasRowHeightPlugin();
-    typeof e == "function" || i ? this._virtualization.variableHeights || (this._virtualization.variableHeights = !0, this._virtualization.rowHeight = typeof e == "number" && e > 0 ? e : this._virtualization.rowHeight || 28, this.#J(), typeof e != "function" && (this.#x = !0)) : !i && typeof e != "function" && this._virtualization.variableHeights ? (this._virtualization.variableHeights = !1, this._virtualization.positionCache = null) : typeof e == "number" && e > 0 ? (this._virtualization.rowHeight = e, this._virtualization.variableHeights = !1) : requestAnimationFrame(() => this.#ae());
+    typeof e == "function" || i ? this._virtualization.variableHeights || (this._virtualization.variableHeights = !0, this._virtualization.rowHeight = typeof e == "number" && e > 0 ? e : this._virtualization.rowHeight || 28, this.#Z(), typeof e != "function" && (this.#x = !0)) : !i && typeof e != "function" && this._virtualization.variableHeights ? (this._virtualization.variableHeights = !1, this._virtualization.positionCache = null) : typeof e == "number" && e > 0 ? (this._virtualization.rowHeight = e, this._virtualization.variableHeights = !1) : requestAnimationFrame(() => this.#le());
   }
-  #ae() {
+  #le() {
     if (this.#t.hasExtraHeight())
       return;
     const e = this._bodyEl?.querySelector(".data-grid-row");
@@ -3219,7 +3219,7 @@ class I extends HTMLElement {
     const n = e.getBoundingClientRect(), r = Math.max(n.height, o);
     r > 0 && Math.abs(r - this._virtualization.rowHeight) > 1 && (this._virtualization.rowHeight = r, this.#s.requestPhase(A.VIRTUALIZATION, "measureRowHeight"));
   }
-  #ye() {
+  #Ce() {
     const e = this._bodyEl?.querySelector(".data-grid-row");
     if (!e) return;
     const i = e.querySelectorAll(".cell");
@@ -3229,14 +3229,14 @@ class I extends HTMLElement {
       l > o && (o = l);
     });
     const n = e.getBoundingClientRect(), r = Math.max(n.height, o);
-    if (r > 0 && (Math.abs(r - this._virtualization.rowHeight) > 1 && (this._virtualization.rowHeight = r), this.#J(), this._virtualization.totalHeightEl)) {
+    if (r > 0 && (Math.abs(r - this._virtualization.rowHeight) > 1 && (this._virtualization.rowHeight = r), this.#Z(), this._virtualization.totalHeightEl)) {
       const l = this.#T(this._rows.length);
       this._virtualization.totalHeightEl.style.height = `${l}px`;
     }
   }
-  #j(e) {
-    this.#O?.abort(), this.#O = new AbortController();
-    const i = this.#O.signal, o = e?.querySelector(".faux-vscroll"), n = e?.querySelector(".rows");
+  #Y(e) {
+    this.#D?.abort(), this.#D = new AbortController();
+    const i = this.#D.signal, o = e?.querySelector(".faux-vscroll"), n = e?.querySelector(".rows");
     if (this._virtualization.container = o ?? this, this.#g = this.#t?.getAll().some((r) => r.onScroll) ?? !1, o && n) {
       o.addEventListener(
         "scroll",
@@ -3258,7 +3258,7 @@ class I extends HTMLElement {
             n.style.transform = `translateY(${g}px)`;
           }
           this.#r = a, this.#C || (this.#C = requestAnimationFrame(() => {
-            this.#C = 0, this.#r !== null && (this.#Me(this.#r), this.#r = null);
+            this.#C = 0, this.#r !== null && (this.#De(this.#r), this.#r = null);
           }));
         },
         { passive: !0, signal: i }
@@ -3267,7 +3267,7 @@ class I extends HTMLElement {
       this.#G = r, this._virtualization.scrollAreaEl = r, r && this.#g && r.addEventListener(
         "scroll",
         () => {
-          const a = this.#te;
+          const a = this.#ee;
           a.scrollTop = o.scrollTop, a.scrollLeft = r.scrollLeft, a.scrollHeight = o.scrollHeight, a.scrollWidth = r.scrollWidth, a.clientHeight = o.clientHeight, a.clientWidth = r.clientWidth, this.#t?.onScroll(a);
         },
         { passive: !0, signal: i }
@@ -3288,13 +3288,13 @@ class I extends HTMLElement {
         { passive: !1, signal: i }
       ), zi(
         s,
-        this.#I,
+        this.#N,
         { fauxScrollbar: o, scrollArea: l },
         i
       ));
     }
     this._bodyEl && Ft(this, this._bodyEl, i), this.#y?.disconnect(), this._virtualization.viewportEl && (this.#y = new ResizeObserver(() => {
-      this.#qe(), this.#s.requestPhase(A.VIRTUALIZATION, "resize-observer");
+      this.#Ne(), this.#s.requestPhase(A.VIRTUALIZATION, "resize-observer");
     }), this.#y.observe(this._virtualization.viewportEl)), this.#n.addEventListener(
       "focusin",
       () => {
@@ -3311,11 +3311,11 @@ class I extends HTMLElement {
     );
   }
   #U = !1;
-  #_e() {
+  #ye() {
     if (this.#U) return;
     const e = this._bodyEl?.querySelector(".data-grid-row");
     e && (this.#U = !0, this.#p?.disconnect(), this.#p = new ResizeObserver(() => {
-      this.#ae();
+      this.#le();
     }), this.#p.observe(e));
   }
   addEventListener(e, i, o) {
@@ -3327,7 +3327,7 @@ class I extends HTMLElement {
   #L(e, i) {
     this.dispatchEvent(new CustomEvent(e, { detail: i, bubbles: !0, composed: !0 }));
   }
-  #Ee() {
+  #_e() {
     this._bodyEl?.querySelectorAll(".data-grid-row")?.forEach((i, o) => {
       const n = o === this._focusRow;
       i.setAttribute("aria-selected", String(n)), i.querySelectorAll(".cell").forEach((r, s) => {
@@ -3335,10 +3335,10 @@ class I extends HTMLElement {
       });
     });
   }
-  #V(e) {
-    this.#v[e] = !0, !this.#w && (this.#w = !0, queueMicrotask(() => this.#Se()));
+  #B(e) {
+    this.#v[e] = !0, !this.#w && (this.#w = !0, queueMicrotask(() => this.#Ee()));
   }
-  #Se() {
+  #Ee() {
     if (!this.#w || !this.#f) {
       this.#w = !1;
       return;
@@ -3350,69 +3350,69 @@ class I extends HTMLElement {
       gridConfig: !1,
       fitMode: !1
     }, e.gridConfig) {
-      this.#xe(), e.rows && this.#ce();
+      this.#Te(), e.rows && this.#ae();
       return;
     }
-    e.columns && this.#Ae(), e.rows && this.#ce(), e.fitMode && this.#Te();
+    e.columns && this.#Re(), e.rows && this.#ae(), e.fitMode && this.#Ae();
   }
-  #ce() {
-    this._rows = Array.isArray(this.#a) ? [...this.#a] : [], this.#B(), this.#s.requestPhase(A.ROWS, "applyRowsUpdate");
+  #ae() {
+    this._rows = Array.isArray(this.#l) ? [...this.#l] : [], this.#P(), this.#s.requestPhase(A.ROWS, "applyRowsUpdate");
   }
-  #B() {
+  #P() {
     this.#S.clear();
     const e = this.#o.getRowId;
     this._rows.forEach((i, o) => {
-      const n = this.#de(i, e);
+      const n = this.#ce(i, e);
       n !== void 0 && this.#S.set(n, { row: i, index: o });
     });
   }
-  #de(e, i) {
+  #ce(e, i) {
     if (i)
       return i(e);
     const o = e;
     if ("id" in o && o.id != null) return String(o.id);
     if ("_id" in o && o._id != null) return String(o._id);
   }
-  #Re(e, i) {
-    const o = this.#de(e, i);
+  #Se(e, i) {
+    const o = this.#ce(e, i);
     if (o === void 0)
       throw new Error(
         '[tbw-grid] Cannot determine row ID. Configure getRowId in gridConfig or ensure rows have an "id" property.'
       );
     return o;
   }
-  #Ae() {
-    Y(this), this.#i.merge(), this.#P();
+  #Re() {
+    W(this), this.#i.merge(), this.#z();
   }
-  #Te() {
+  #Ae() {
     this.#i.merge(), this.#o.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, Te(this)) : (this._columns.forEach((i) => {
       !i.__userResized && i.__autoSized && delete i.width;
-    }), V(this));
+    }), B(this));
   }
-  #xe() {
+  #Te() {
     qe(this, this.#e), $e(this, this.#e);
     const e = !!this.#n.querySelector(".has-shell"), i = !!this.#n.querySelector(".tbw-tool-panel"), o = this.#n.querySelectorAll(".tbw-accordion-section").length;
-    this.#i.parseLightDomColumns(this), this.#i.merge(), this.#oe(), We(this, this.#e, this.#re()), this.#i.markSourcesChanged(), this.#i.merge();
+    this.#i.parseLightDomColumns(this), this.#i.merge(), this.#ie(), We(this, this.#e, this.#ne()), this.#i.markSourcesChanged(), this.#i.merge();
     const n = at(this.#o?.shell), r = (this.#o?.shell?.toolPanels?.length ?? 0) > 0, s = this.#o?.shell?.toolPanels?.length ?? 0;
     if (e !== n || !i && r || i && s !== o) {
-      he(this.#e), this.#ee(), this.#F(), this.#se(), this.#B();
+      he(this.#e), this.#J(), this.#V(), this.#re(), this.#P();
       return;
     }
-    e && this.#He(), this.#B(), this.#s.requestPhase(A.COLUMNS, "applyGridConfigUpdate");
+    e && this.#xe(), this.#P(), this.#s.requestPhase(A.COLUMNS, "applyGridConfigUpdate");
   }
-  #He() {
+  #xe() {
     const e = this.#n.querySelector(".tbw-shell-header");
     if (!e) return;
     const i = this.#o.shell?.header?.title ?? this.#e.lightDomTitle;
     let o = e.querySelector(".tbw-shell-title");
     i ? (o || (o = document.createElement("h2"), o.className = "tbw-shell-title", o.setAttribute("part", "shell-title"), e.insertBefore(o, e.firstChild)), o.textContent = i) : o && o.remove();
   }
-  #Le() {
+  #He() {
     if (this.__rowRenderEpoch++, this.#t) {
       const e = this.#X.length > 0 ? this.#X : this._columns, i = e.filter((r) => !r.hidden), o = e.filter((r) => r.hidden), n = this.#t.processColumns([...i]);
       if (n !== i) {
         const r = new Set(n.map((l) => l.field));
-        !i.some((l) => r.has(l.field)) && n.length > 0 ? this._columns = [...n, ...o] : this._columns = this.#Pe(
+        !i.some((l) => r.has(l.field)) && n.length > 0 ? this._columns = [...n, ...o] : this._columns = this.#Le(
           e,
           n,
           o
@@ -3421,7 +3421,7 @@ class I extends HTMLElement {
         this._columns = [...e];
     }
   }
-  #Pe(e, i, o) {
+  #Le(e, i, o) {
     if (o.length === 0) return i;
     const n = /* @__PURE__ */ new Map();
     for (const a of i)
@@ -3436,14 +3436,12 @@ class I extends HTMLElement {
     }
     return l.push(...s), l;
   }
-  #ze() {
-    Y(this);
-    const e = Array.isArray(this.#a) ? [...this.#a] : [], i = this.#Y;
-    i && (this.#Y = !1);
-    const o = i ? e : Bt(this, this.#t?.processRows(e) ?? e);
-    this._rows = o, this.#B(), this._virtualization.variableHeights && this.#J();
+  #Pe() {
+    W(this);
+    const e = Array.isArray(this.#l) ? [...this.#l] : [], i = Bt(this, e), o = this.#t?.processRows(i) ?? i;
+    this._rows = o, this.#P(), this._virtualization.variableHeights && this.#Z();
   }
-  #Oe(e) {
+  #ze(e) {
     const i = {
       ...pt,
       ...e.animation
@@ -3451,29 +3449,29 @@ class I extends HTMLElement {
     let n = 1;
     o === !1 || o === "off" ? n = 0 : (o === !0 || o === "on") && (n = 1), this.style.setProperty("--tbw-animation-duration", `${i.duration}ms`), this.style.setProperty("--tbw-animation-easing", i.easing ?? "ease-out"), this.style.setProperty("--tbw-animation-enabled", String(n)), this.dataset.animationMode = typeof o == "boolean" ? o ? "on" : "off" : o;
   }
-  #K(e, i, o = this.__rowRenderEpoch) {
-    if (this.#z || (this.#z = (n, r, s) => this.#t?.renderRow(n, r, s) ?? !1), kt(this, e, i, o, this.#z), this.#E.size > 0)
+  #j(e, i, o = this.__rowRenderEpoch) {
+    if (this.#O || (this.#O = (n, r, s) => this.#t?.renderRow(n, r, s) ?? !1), kt(this, e, i, o, this.#O), this.#E.size > 0)
       for (const n of this.#E)
-        this.#Q(n, !0);
+        this.#K(n, !0);
   }
-  #he = ht();
-  #ue(e, i) {
-    ut(this.#he, this.__rowsBodyEl, this._bodyEl, e, i);
+  #de = ht();
+  #he(e, i) {
+    ut(this.#de, this.__rowsBodyEl, this._bodyEl, e, i);
   }
-  #De() {
-    gt(this.#he, this.__rowsBodyEl, this.#o, this.#e);
+  #Oe() {
+    gt(this.#de, this.__rowsBodyEl, this.#o, this.#e);
   }
-  #fe() {
+  #ue() {
     const e = this.querySelector(".tbw-grid-root");
-    e && (this.#M ? (this.#W || (this.#W = Qt(this.#o?.loadingRenderer)), Zt(e, this.#W)) : Jt(this.#W));
+    e && (this.#k ? (this.#F || (this.#F = Qt(this.#o?.loadingRenderer)), Zt(e, this.#F)) : Jt(this.#F));
   }
-  #Q(e, i) {
+  #K(e, i) {
     const o = this.#S.get(e);
     if (!o) return;
     const n = this.findRenderedRowElement?.(o.index);
     n && ei(n, i);
   }
-  #ge(e, i, o) {
+  #fe(e, i, o) {
     const n = this.#S.get(e);
     if (!n) return;
     const r = this.findRenderedRowElement?.(n.index);
@@ -3483,27 +3481,27 @@ class I extends HTMLElement {
     const l = r.children[s];
     l && ti(l, o);
   }
-  #P() {
+  #z() {
     if (this.isConnected && !(!this._headerRowEl || !this._bodyEl)) {
-      if (this.#i.parseLightDomColumns(this), this.#D) {
-        const e = this.#D;
-        this.#D = void 0, this.#i.merge();
+      if (this.#i.parseLightDomColumns(this), this.#M) {
+        const e = this.#M;
+        this.#M = void 0, this.#i.merge();
         const i = this.#t?.getAll() ?? [];
         this.#i.applyState(e, i);
       }
       this._bodyEl && (this._bodyEl.style.display = "", this._bodyEl.style.gridTemplateColumns = ""), this.#s.requestPhase(A.FULL, "setup");
     }
   }
-  #Me(e) {
+  #De(e) {
     let i = 0, o = 0, n = 0, r = 0, s = 0;
     if (this.#g) {
       const a = this._virtualization.container, c = this.#G;
       i = c?.scrollLeft ?? 0, o = a?.scrollHeight ?? 0, n = c?.scrollWidth ?? 0, r = a?.clientHeight ?? 0, s = c?.clientWidth ?? 0;
     }
     if (this.refreshVirtualWindow(!1) && this.#t?.onScrollRender(), this._virtualization.variableHeights && (this.#m && clearTimeout(this.#m), this.#m = window.setTimeout(() => {
-      this.#m = 0, this.#be(this._virtualization.start, this._virtualization.end);
+      this.#m = 0, this.#we(this._virtualization.start, this._virtualization.end);
     }, 100)), this.#g) {
-      const a = this.#te;
+      const a = this.#ee;
       a.scrollTop = e, a.scrollLeft = i, a.scrollHeight = o, a.scrollWidth = n, a.clientHeight = r, a.clientWidth = s, this.#t?.onScroll(a);
     }
   }
@@ -3609,14 +3607,11 @@ class I extends HTMLElement {
   async forceLayout() {
     return this.#s.requestPhase(A.FULL, "forceLayout"), this.#s.whenReady();
   }
-  suspendProcessing() {
-    this.#Y = !0;
-  }
   async getConfig() {
     return Object.freeze({ ...this.#o || {} });
   }
   getRowId(e) {
-    return this.#Re(e, this.#o.getRowId);
+    return this.#Se(e, this.#o.getRowId);
   }
   getRow(e) {
     return this.#S.get(e)?.row;
@@ -3674,14 +3669,52 @@ class I extends HTMLElement {
     o && this.#s.requestPhase(A.ROWS, "updateRows");
   }
   animateRow(e, i) {
-    Se(this, e, i);
+    return Se(this, e, i);
   }
   animateRows(e, i) {
-    ai(this, e, i);
+    return ai(this, e, i);
   }
   animateRowById(e, i) {
     return ci(this, e, i);
   }
+  async insertRow(e, i, o = !0) {
+    const n = Math.max(0, Math.min(e, this._rows.length));
+    this.#l = [...this.#l, i];
+    const r = [...this._rows];
+    r.splice(n, 0, i), this._rows = r, this._sortState && (this.__originalOrder = [...this.__originalOrder, i]), W(this), this.#P(), this.__rowRenderEpoch++;
+    for (const s of this._rowPool) s.__epoch = -1;
+    this.refreshVirtualWindow(!0), o && (await new Promise((s) => requestAnimationFrame(() => s())), await this.animateRow(n, "insert"));
+  }
+  async removeRow(e, i = !0) {
+    const o = this._rows[e];
+    if (!o) return;
+    i && await this.animateRow(e, "remove");
+    const n = this._rows.indexOf(o);
+    if (n < 0) return o;
+    const r = [...this._rows];
+    r.splice(n, 1), this._rows = r;
+    const s = this.#l.indexOf(o);
+    if (s >= 0) {
+      const l = [...this.#l];
+      l.splice(s, 1), this.#l = l;
+    }
+    if (this._sortState) {
+      const l = this.__originalOrder.indexOf(o);
+      if (l >= 0) {
+        const a = [...this.__originalOrder];
+        a.splice(l, 1), this.__originalOrder = a;
+      }
+    }
+    W(this), this.#P(), this.__rowRenderEpoch++;
+    for (const l of this._rowPool) l.__epoch = -1;
+    return this.refreshVirtualWindow(!0), i && requestAnimationFrame(() => {
+      this.querySelectorAll('[data-animating="remove"]').forEach((l) => {
+        l.removeAttribute("data-animating");
+      });
+    }), o;
+  }
+  suspendProcessing() {
+  }
   setColumnVisible(e, i) {
     const o = this.#i.setColumnVisible(e, i);
     return o && this.requestStateChange(), o;
@@ -3710,23 +3743,23 @@ class I extends HTMLElement {
     return this.#i.collectState(e);
   }
   set columnState(e) {
-    e && (this.#D = e, this.#i.initialColumnState = e, this.#u && this.#ke(e));
+    e && (this.#M = e, this.#i.initialColumnState = e, this.#u && this.#Me(e));
   }
   get columnState() {
     return this.getColumnState();
   }
-  #ke(e) {
+  #Me(e) {
     const i = this.#t?.getAll() ?? [];
-    this.#i.applyState(e, i), this.#P();
+    this.#i.applyState(e, i), this.#z();
   }
   requestStateChange() {
     const e = this.#t?.getAll() ?? [];
     this.#i.requestStateChange(e);
   }
   resetColumnState() {
-    this.#D = void 0, this.__originalOrder = [];
+    this.#M = void 0, this.__originalOrder = [];
     const e = this.#t?.getAll() ?? [];
-    this.#i.resetState(e), this.#i.merge(), this.#P();
+    this.#i.resetState(e), this.#i.merge(), this.#z();
   }
   get isToolPanelOpen() {
     return this.#c.isPanelOpen;
@@ -3776,42 +3809,42 @@ class I extends HTMLElement {
   unregisterToolbarContent(e) {
     this.#c.unregisterToolbarContent(e);
   }
-  #Z = !1;
+  #Q = !1;
   refreshShellHeader() {
-    this.#Z || (this.#Z = !0, queueMicrotask(() => {
-      this.#Z = !1, this.isConnected && (this.#k(), this.#i.markSourcesChanged(), this.#i.merge(), he(this.#e), this.#ee(), this.#F(), this.#Ie());
+    this.#Q || (this.#Q = !0, queueMicrotask(() => {
+      this.#Q = !1, this.isConnected && (this.#I(), this.#i.markSourcesChanged(), this.#i.merge(), he(this.#e), this.#J(), this.#V(), this.#ke());
     }));
   }
-  #Ie() {
+  #ke() {
     const i = this.#n.querySelector(".tbw-grid-content") ?? this.#n.querySelector(".tbw-grid-root");
     if (this._headerRowEl = i?.querySelector(".header-row"), this._virtualization.totalHeightEl = i?.querySelector(".faux-vscroll-spacer"), this._virtualization.viewportEl = i?.querySelector(".rows-viewport"), this._bodyEl = i?.querySelector(".rows"), this.__rowsBodyEl = i?.querySelector(".rows-body"), this.#c.isInitialized) {
       pe(this.#n, this.#e), de(this.#n, this.#o?.shell, this.#e);
       const o = this.#o?.shell?.toolPanel?.defaultOpen;
       o && this.#e.toolPanels.has(o) && (this.openToolPanel(), this.#e.expandedSections.add(o));
     }
-    this._resizeController = Ie(this), this.#j(i), this.#s.requestPhase(A.COLUMNS, "shellRefresh");
+    this._resizeController = Ie(this), this.#Y(i), this.#s.requestPhase(A.COLUMNS, "shellRefresh");
   }
   #A = /* @__PURE__ */ new Map();
   registerStyles(e, i) {
     let o = this.#A.get(e);
-    o || (o = new CSSStyleSheet(), this.#A.set(e, o)), o.replaceSync(i), this.#pe();
+    o || (o = new CSSStyleSheet(), this.#A.set(e, o)), o.replaceSync(i), this.#ge();
   }
   unregisterStyles(e) {
-    this.#A.delete(e) && this.#pe();
+    this.#A.delete(e) && this.#ge();
   }
   getRegisteredStyles() {
     return Array.from(this.#A.keys());
   }
-  #pe() {
+  #ge() {
     const e = Array.from(this.#A.values()), i = document.adoptedStyleSheets.filter(
       (o) => !Array.from(this.#A.values()).includes(o)
     );
     document.adoptedStyleSheets = [...i, ...e];
   }
-  #k() {
-    qe(this, this.#e), $e(this, this.#e), We(this, this.#e, this.#re());
+  #I() {
+    qe(this, this.#e), $e(this, this.#e), We(this, this.#e, this.#ne());
   }
-  #we() {
+  #pe() {
     const e = this.#n.querySelector(".tbw-shell-header");
     if (!e) return;
     he(this.#e);
@@ -3822,27 +3855,27 @@ class I extends HTMLElement {
     ), o = document.createElement("div");
     o.innerHTML = i;
     const n = o.firstElementChild;
-    n && (e.replaceWith(n), this.#me(), de(this.#n, this.#o?.shell, this.#e));
+    n && (e.replaceWith(n), this.#be(), de(this.#n, this.#o?.shell, this.#e));
   }
-  #Ne() {
+  #Ie() {
     const e = () => {
       const o = this.#e.lightDomTitle, n = this.#e.hasToolButtonsContainer;
-      this.#k();
+      this.#I();
       const r = this.#e.lightDomTitle, s = this.#e.hasToolButtonsContainer;
-      (r && !o || s && !n) && (this.#i.markSourcesChanged(), this.#i.merge(), this.#we());
+      (r && !o || s && !n) && (this.#i.markSourcesChanged(), this.#i.merge(), this.#pe());
     }, i = () => {
-      this.__lightDomColumnsCache = void 0, this.#P();
+      this.__lightDomColumnsCache = void 0, this.#z();
     };
     this.#i.registerLightDomHandler("tbw-grid-header", e), this.#i.registerLightDomHandler("tbw-grid-tool-buttons", e), this.#i.registerLightDomHandler("tbw-grid-tool-panel", e), this.#i.registerLightDomHandler("tbw-grid-column", i), this.#i.registerLightDomHandler("tbw-grid-detail", i), this.#i.observeLightDOM(this);
   }
   refreshColumns() {
-    this.__lightDomColumnsCache = void 0, Y(this), this.#i.parseLightDomColumns(this);
+    this.__lightDomColumnsCache = void 0, W(this), this.#i.parseLightDomColumns(this);
     const e = this.#e.lightDomTitle, i = this.#e.hasToolButtonsContainer;
-    this.#k();
+    this.#I();
     const o = this.#e.lightDomTitle, n = this.#e.hasToolButtonsContainer;
-    (o && !e || n && !i) && (this.#i.markSourcesChanged(), this.#i.merge(), this.#we()), this.#s.requestPhase(A.COLUMNS, "refreshColumns");
+    (o && !e || n && !i) && (this.#i.markSourcesChanged(), this.#i.merge(), this.#pe()), this.#s.requestPhase(A.COLUMNS, "refreshColumns");
   }
-  #qe() {
+  #Ne() {
     const e = this._virtualization.container, i = this._virtualization.viewportEl ?? e;
     i && (this._virtualization.cachedViewportHeight = i.clientHeight), e && (this._virtualization.cachedFauxHeight = e.clientHeight);
     const o = this._virtualization.scrollAreaEl;
@@ -3858,9 +3891,9 @@ class I extends HTMLElement {
       n = o.cachedFauxHeight, r = o.cachedViewportHeight, s = o.cachedScrollAreaHeight || n;
     const l = s - r, a = Math.max(0, n - s);
     let c, h = 0;
-    return o.variableHeights && o.positionCache ? c = Ui(o.positionCache) : (c = e * o.rowHeight, h = this.#t?.getExtraHeight() ?? 0), c + l + h + a;
+    return o.variableHeights && o.positionCache ? c = Vi(o.positionCache) : (c = e * o.rowHeight, h = this.#t?.getExtraHeight() ?? 0), c + l + h + a;
   }
-  #J() {
+  #Z() {
     if (!this._virtualization.variableHeights) return;
     const e = this._rows, i = this._virtualization.rowHeight || 28, o = this.#o.rowHeight, n = this.#o.getRowId, r = n ? (l) => n(l) : void 0;
     this._virtualization.positionCache = Fi(
@@ -3896,7 +3929,7 @@ class I extends HTMLElement {
       this._virtualization.totalHeightEl.style.height = `${l}px`;
     }
   }
-  #be(e, i) {
+  #we(e, i) {
     if (!this._virtualization.variableHeights || !this._virtualization.positionCache || !this._bodyEl) return;
     const o = this._bodyEl.querySelectorAll(".data-grid-row"), n = this.#o.getRowId, r = Gi(
       {
@@ -3920,9 +3953,9 @@ class I extends HTMLElement {
     if (!this._bodyEl) return !1;
     const o = this._rows.length;
     if (!this._virtualization.enabled)
-      return this.#K(0, o), i || this.#t?.afterRender(), !0;
+      return this.#j(0, o), i || this.#t?.afterRender(), !0;
     if (this._rows.length <= this._virtualization.bypassThreshold)
-      return this._virtualization.start = 0, this._virtualization.end = o, e && (this._bodyEl.style.transform = "translateY(0px)"), this.#K(0, o, this.__rowRenderEpoch), e && this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${this.#T(o, !0)}px`), this.#ue(o, this._visibleColumns.length), i || this.#t?.afterRender(), !0;
+      return this._virtualization.start = 0, this._virtualization.end = o, e && (this._bodyEl.style.transform = "translateY(0px)"), this.#j(0, o, this.__rowRenderEpoch), e && this._virtualization.totalHeightEl && (this._virtualization.totalHeightEl.style.height = `${this.#T(o, !0)}px`), this.#he(o, this._visibleColumns.length), i || this.#t?.afterRender(), !0;
     const n = this._virtualization.container ?? this, r = this._virtualization.viewportEl ?? n, s = e ? this._virtualization.cachedViewportHeight = r.clientHeight : this._virtualization.cachedViewportHeight || (this._virtualization.cachedViewportHeight = r.clientHeight), l = this._virtualization.rowHeight, a = n.scrollTop;
     let c;
     const h = this._virtualization.positionCache;
@@ -3977,29 +4010,29 @@ class I extends HTMLElement {
       w = c * l + m;
     }
     const C = -(a - w);
-    return this._bodyEl.style.transform = `translateY(${C}px)`, this.#K(c, p, this.__rowRenderEpoch), e && this._virtualization.variableHeights && this.#be(c, p), this.#ue(o, this._visibleColumns.length), e && !i && (this.#t?.afterRender(), queueMicrotask(() => {
+    return this._bodyEl.style.transform = `translateY(${C}px)`, this.#j(c, p, this.__rowRenderEpoch), e && this._virtualization.variableHeights && this.#we(c, p), this.#he(o, this._visibleColumns.length), e && !i && (this.#t?.afterRender(), queueMicrotask(() => {
       if (!this._virtualization.totalHeightEl) return;
       const m = this.#T(o);
       this._virtualization.cachedFauxHeight === 0 && this._virtualization.cachedViewportHeight > 0 || (this._virtualization.totalHeightEl.style.height = `${m}px`);
     })), !0;
   }
-  #ee() {
-    this.#k(), this.#i.markSourcesChanged(), this.#i.merge();
+  #J() {
+    this.#I(), this.#i.markSourcesChanged(), this.#i.merge();
     const e = this.#o?.shell;
     yi(
       this.#n,
       e,
       { isPanelOpen: this.#e.isPanelOpen, expandedSections: this.#e.expandedSections },
       this.#o?.icons
-    ) && (this.#me(), this.#c.setInitialized(!0));
+    ) && (this.#be(), this.#c.setInitialized(!0));
   }
-  #me() {
+  #be() {
     gi(this.#n, this.#o?.shell, this.#e, {
       onPanelToggle: () => this.toggleToolPanel(),
       onSectionToggle: (e) => this.toggleToolPanelSection(e)
-    }), this.#q?.(), this.#q = wi(this.#n, this.#o?.shell, (e) => {
+    }), this.#$?.(), this.#$ = wi(this.#n, this.#o?.shell, (e) => {
       this.style.setProperty("--tbw-tool-panel-width", `${e}px`);
-    }), this.#$?.(), this.#$ = pi(
+    }), this.#W?.(), this.#W = pi(
       this,
       this.#o?.shell,
       this.#e,
@@ -4016,7 +4049,7 @@ const ao = {
 class co {
   static dependencies;
   static manifest;
-  version = "1.20.0";
+  version = "1.21.0";
   styles;
   cellRenderers;
   headerRenderers;
@@ -4024,7 +4057,7 @@ class co {
   grid;
   config;
   userConfig;
-  #l;
+  #a;
   get defaultConfig() {
     return {};
   }
@@ -4032,10 +4065,10 @@ class co {
     this.userConfig = e;
   }
   attach(e) {
-    this.#l?.abort(), this.#l = new AbortController(), this.grid = e, this.config = { ...this.defaultConfig, ...this.userConfig };
+    this.#a?.abort(), this.#a = new AbortController(), this.grid = e, this.config = { ...this.defaultConfig, ...this.userConfig };
   }
   detach() {
-    this.#l?.abort(), this.#l = void 0;
+    this.#a?.abort(), this.#a = void 0;
   }
   getPlugin(e) {
     return this.grid?.getPlugin(e);
@@ -4084,7 +4117,7 @@ class co {
     return this.grid;
   }
   get disconnectSignal() {
-    return this.#l?.signal ?? this.grid?.disconnectSignal;
+    return this.#a?.signal ?? this.grid?.disconnectSignal;
   }
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
@@ -4284,7 +4317,7 @@ export {
   po as DGEvents,
   I as DataGridElement,
   et as F,
-  G as FitModeEnum,
+  X as FitModeEnum,
   uo as GridCSSVars,
   H as GridClasses,
   ee as GridDataAttrs,
@@ -4301,8 +4334,8 @@ export {
   so as c,
   fo as createGrid,
   Qe as d,
-  Vt as defaultComparator,
-  W as e,
+  Ut as defaultComparator,
+  F as e,
   _e as f,
   Ot as g,
   Co as getAggregator,