@toolbox-web/grid 1.9.0 → 1.9.2

package/lib/plugins/column-virtualization/ColumnVirtualizationPlugin.d.ts

@@ -58,6 +58,7 @@ import { ColumnVirtualizationConfig } from './types';
  * @internal Extends BaseGridPlugin
  */
 export declare class ColumnVirtualizationPlugin extends BaseGridPlugin<ColumnVirtualizationConfig> {
+    #private;
     /** @internal */
     readonly name = "columnVirtualization";
     /** @internal */
@@ -69,6 +70,8 @@ export declare class ColumnVirtualizationPlugin extends BaseGridPlugin<ColumnVir
     private totalWidth;
     private columnWidths;
     private columnOffsets;
+    /** Store the original full column set for virtualization calculations */
+    private originalColumns;
     /** @internal */
     attach(grid: import('../../core/plugin/base-plugin').GridElement): void;
     /** @internal */

package/lib/plugins/column-virtualization/ColumnVirtualizationPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnVirtualizationPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/column-virtualization/ColumnVirtualizationPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAQrD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,qBAAa,0BAA2B,SAAQ,cAAc,CAAC,0BAA0B,CAAC;IACxF,gBAAgB;IAChB,QAAQ,CAAC,IAAI,0BAA0B;IAEvC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,0BAA0B,CAAC,CAM1E;IAGD,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,aAAa,CAAgB;IAKrC,gBAAgB;IACP,MAAM,CAAC,IAAI,EAAE,OAAO,+BAA+B,EAAE,WAAW,GAAG,IAAI;IAWhF,gBAAgB;IACP,MAAM,IAAI,IAAI;IAavB,gBAAgB;IACP,cAAc,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,GAAG,YAAY,EAAE;IAgCzE,gBAAgB;IACP,WAAW,IAAI,IAAI;IA2B5B,gBAAgB;IACP,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAiB3C;;OAEG;IACH,gBAAgB,IAAI,OAAO;IAI3B;;OAEG;IACH,qBAAqB,IAAI;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE;IAIvD;;;OAGG;IACH,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IAOzC;;;OAGG;IACH,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM;IAI5C;;OAEG;IACH,aAAa,IAAI,MAAM;CAIxB"}
+{"version":3,"file":"ColumnVirtualizationPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/column-virtualization/ColumnVirtualizationPlugin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAQrD,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,qBAAa,0BAA2B,SAAQ,cAAc,CAAC,0BAA0B,CAAC;;IACxF,gBAAgB;IAChB,QAAQ,CAAC,IAAI,0BAA0B;IAEvC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,0BAA0B,CAAC,CAM1E;IAGD,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,QAAQ,CAAK;IACrB,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,UAAU,CAAK;IACvB,OAAO,CAAC,YAAY,CAAgB;IACpC,OAAO,CAAC,aAAa,CAAgB;IACrC,yEAAyE;IACzE,OAAO,CAAC,eAAe,CAA+B;IAKtD,gBAAgB;IACP,MAAM,CAAC,IAAI,EAAE,OAAO,+BAA+B,EAAE,WAAW,GAAG,IAAI;IAWhF,gBAAgB;IACP,MAAM,IAAI,IAAI;IA8CvB,gBAAgB;IACP,cAAc,CAAC,OAAO,EAAE,SAAS,YAAY,EAAE,GAAG,YAAY,EAAE;IAkDzE,gBAAgB;IACP,WAAW,IAAI,IAAI;IAmC5B,gBAAgB;IACP,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAmB3C;;OAEG;IACH,gBAAgB,IAAI,OAAO;IAI3B;;OAEG;IACH,qBAAqB,IAAI;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE;IAIvD;;;OAGG;IACH,cAAc,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI;IAOzC;;;OAGG;IACH,eAAe,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM;IAI5C;;OAEG;IACH,aAAa,IAAI,MAAM;CAIxB"}

package/lib/plugins/column-virtualization/index.js

@@ -1,4 +1,4 @@
-const d = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', b = {
+const c = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentColor" d="M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/></svg>', p = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -7,11 +7,11 @@ const d = '<svg viewBox="0 0 16 16" width="12" height="12"><path fill="currentCo
   submenuArrow: "▶",
   dragHandle: "⋮⋮",
   toolPanel: "☰",
-  filter: d,
-  filterActive: d,
+  filter: c,
+  filterActive: c,
   print: "🖨️"
 };
-class p {
+class b {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -208,10 +208,19 @@ class p {
   }
   /**
    * Request a re-render of the grid.
+   * Uses ROWS phase - does NOT trigger processColumns hooks.
    */
   requestRender() {
     this.grid?.requestRender?.();
   }
+  /**
+   * Request a columns re-render of the grid.
+   * Uses COLUMNS phase - triggers processColumns hooks.
+   * Use this when your plugin needs to reprocess column configuration.
+   */
+  requestColumnsRender() {
+    this.grid?.requestColumnsRender?.();
+  }
   /**
    * Request a re-render and restore focus styling afterward.
    * Use this when a plugin action (like expand/collapse) triggers a render
@@ -292,7 +301,7 @@ class p {
    */
   get gridIcons() {
     const t = this.grid?.gridConfig?.icons ?? {};
-    return { ...b, ...t };
+    return { ...p, ...t };
   }
   // #region Animation Helpers
   /**
@@ -368,61 +377,61 @@ class p {
   }
   // #endregion
 }
-const c = 100;
-function a(r) {
-  if (r == null)
-    return c;
-  if (typeof r == "number")
-    return r;
-  const t = parseFloat(r);
-  return isNaN(t) ? c : t;
+const g = 100;
+function h(s) {
+  if (s == null)
+    return g;
+  if (typeof s == "number")
+    return s;
+  const t = parseFloat(s);
+  return isNaN(t) ? g : t;
 }
-function f(r) {
-  return r.map((t) => a(t.width));
+function f(s) {
+  return s.map((t) => h(t.width));
 }
-function g(r) {
+function m(s) {
   const t = [];
   let e = 0;
-  for (const i of r)
-    t.push(e), e += a(i.width);
+  for (const i of s)
+    t.push(e), e += h(i.width);
   return t;
 }
-function m(r) {
-  return r.reduce((t, e) => t + a(e.width), 0);
+function C(s) {
+  return s.reduce((t, e) => t + h(e.width), 0);
 }
-function w(r, t, e, i, n) {
-  const s = e.length;
-  if (s === 0)
+function w(s, t, e, i, o) {
+  const r = e.length;
+  if (r === 0)
     return { startCol: 0, endCol: 0, visibleColumns: [] };
-  let o = v(r, e, i);
-  o = Math.max(0, o - n);
-  const C = r + t;
-  let u = o;
-  for (let l = o; l < s; l++) {
-    if (e[l] >= C) {
+  let n = y(s, e, i);
+  n = Math.max(0, n - o);
+  const a = s + t;
+  let u = n;
+  for (let l = n; l < r; l++) {
+    if (e[l] >= a) {
       u = l - 1;
       break;
     }
     u = l;
   }
-  u = Math.min(s - 1, u + n);
-  const h = [];
-  for (let l = o; l <= u; l++)
-    h.push(l);
-  return { startCol: o, endCol: u, visibleColumns: h };
+  u = Math.min(r - 1, u + o);
+  const d = [];
+  for (let l = n; l <= u; l++)
+    d.push(l);
+  return { startCol: n, endCol: u, visibleColumns: d };
 }
-function v(r, t, e) {
-  let i = 0, n = t.length - 1;
-  for (; i < n; ) {
-    const s = Math.floor((i + n) / 2);
-    t[s] + e[s] <= r ? i = s + 1 : n = s;
+function y(s, t, e) {
+  let i = 0, o = t.length - 1;
+  for (; i < o; ) {
+    const r = Math.floor((i + o) / 2);
+    t[r] + e[r] <= s ? i = r + 1 : o = r;
   }
   return i;
 }
-function E(r, t, e) {
-  return e ? r > t : !1;
+function R(s, t, e) {
+  return e ? s > t : !1;
 }
-class R extends p {
+class E extends b {
   /** @internal */
   name = "columnVirtualization";
   /** @internal */
@@ -441,49 +450,73 @@ class R extends p {
   totalWidth = 0;
   columnWidths = [];
   columnOffsets = [];
+  /** Store the original full column set for virtualization calculations */
+  originalColumns = [];
   // #endregion
   // #region Lifecycle
   /** @internal */
   attach(t) {
     super.attach(t);
     const e = this.columns;
-    this.columnWidths = f(e), this.columnOffsets = g(e), this.totalWidth = m(e), this.endCol = e.length - 1;
+    this.columnWidths = f(e), this.columnOffsets = m(e), this.totalWidth = C(e), this.endCol = e.length - 1;
   }
   /** @internal */
   detach() {
-    this.columnWidths = [], this.columnOffsets = [], this.isVirtualized = !1, this.startCol = 0, this.endCol = 0, this.scrollLeft = 0, this.totalWidth = 0;
+    this.#t(), this.columnWidths = [], this.columnOffsets = [], this.originalColumns = [], this.isVirtualized = !1, this.startCol = 0, this.endCol = 0, this.scrollLeft = 0, this.totalWidth = 0;
+  }
+  /**
+   * Remove inline styles set by this plugin for proper cleanup.
+   */
+  #t() {
+    const t = this.gridElement;
+    if (!t) return;
+    const e = t.querySelector(".header-row");
+    e && (e.style.paddingLeft = "", e.style.minWidth = ""), t.querySelectorAll(".data-grid-row").forEach((n) => {
+      n.style.paddingLeft = "";
+    });
+    const o = t.querySelector(".rows-viewport .rows");
+    o && (o.style.width = "");
+    const r = t.querySelector(".rows-body");
+    r && (r.style.minWidth = "");
   }
   // #endregion
   // #region Hooks
   /** @internal */
   processColumns(t) {
-    const e = E(t.length, this.config.threshold ?? 30, this.config.autoEnable ?? !0);
-    if (this.isVirtualized = e ?? !1, this.columnWidths = f(t), this.columnOffsets = g(t), this.totalWidth = m(t), !e)
-      return this.startCol = 0, this.endCol = t.length - 1, [...t];
-    const i = this.grid.clientWidth || 800, n = w(
+    (this.originalColumns.length === 0 || t.length > this.originalColumns.length) && (this.originalColumns = t, this.columnWidths = f(t), this.columnOffsets = m(t), this.totalWidth = C(t));
+    const i = this.originalColumns, o = R(
+      i.length,
+      this.config.threshold ?? 30,
+      this.config.autoEnable ?? !0
+    );
+    if (this.isVirtualized = o ?? !1, !o)
+      return this.startCol = 0, this.endCol = i.length - 1, [...i];
+    const r = this.grid.clientWidth || 800, n = w(
       this.scrollLeft,
-      i,
+      r,
       this.columnOffsets,
       this.columnWidths,
       this.config.overscan ?? 3
     );
-    return this.startCol = n.startCol, this.endCol = n.endCol, n.visibleColumns.map((s) => t[s]);
+    return this.startCol = n.startCol, this.endCol = n.endCol, n.visibleColumns.map((a) => i[a]);
   }
   /** @internal */
   afterRender() {
     if (!this.isVirtualized) return;
     const t = this.gridElement;
     if (!t) return;
-    const e = this.columnOffsets[this.startCol] ?? 0, i = t.querySelector(".header-row"), n = t.querySelectorAll(".data-grid-row");
-    i && (i.style.paddingLeft = `${e}px`), n.forEach((o) => {
-      o.style.paddingLeft = `${e}px`;
+    const e = this.columnOffsets[this.startCol] ?? 0, i = t.querySelector(".header-row"), o = t.querySelectorAll(".data-grid-row");
+    i && (i.style.paddingLeft = `${e}px`, i.style.minWidth = `${this.totalWidth}px`), o.forEach((a) => {
+      a.style.paddingLeft = `${e}px`;
     });
-    const s = t.querySelector(".rows-viewport .rows");
-    s && (s.style.width = `${this.totalWidth}px`);
+    const r = t.querySelector(".rows-viewport .rows");
+    r && (r.style.width = `${this.totalWidth}px`);
+    const n = t.querySelector(".rows-body");
+    n && (n.style.minWidth = `${this.totalWidth}px`);
   }
   /** @internal */
   onScroll(t) {
-    !this.isVirtualized || Math.abs(t.scrollLeft - this.scrollLeft) < 1 || (this.scrollLeft = t.scrollLeft, this.requestRender());
+    !this.isVirtualized || Math.abs(t.scrollLeft - this.scrollLeft) < 1 || (this.scrollLeft = t.scrollLeft, this.requestColumnsRender());
   }
   // #endregion
   // #region Public API
@@ -523,6 +556,6 @@ class R extends p {
   // #endregion
 }
 export {
-  R as ColumnVirtualizationPlugin
+  E as ColumnVirtualizationPlugin
 };
 //# sourceMappingURL=index.js.map