@cronocode/react-box 3.0.15 → 3.0.16

package/components/dataGrid.mjs

@@ -1,50 +1,58 @@
-var ot = Object.defineProperty;
-var st = (u, t, e) => t in u ? ot(u, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[t] = e;
-var l = (u, t, e) => st(u, typeof t != "symbol" ? t + "" : t, e);
-import { jsx as s, jsxs as g, Fragment as rt } from "react/jsx-runtime";
-import p from "../box.mjs";
-import X from "./grid.mjs";
-import { useMemo as N, useState as H, forwardRef as lt, useRef as ut, useCallback as at, useImperativeHandle as ht } from "react";
-import { F as j, m as I, A as B, b as ct, D as dt, P as K, G as pt, d as gt } from "../core.mjs";
-import _ from "./button.mjs";
-import b from "./flex.mjs";
-import mt from "./tooltip.mjs";
-import V from "./checkbox.mjs";
-const ft = "NO_PIN";
-class T {
-  constructor(t, e, i) {
-    l(this, "columns", []);
-    l(this, "_pin");
-    l(this, "_inlineWidth");
-    l(this, "resizeColumn", (t) => {
+var le = Object.defineProperty;
+var ae = (u, e, t) => e in u ? le(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
+var a = (u, e, t) => ae(u, typeof e != "symbol" ? e + "" : e, t);
+import { jsx as r, jsxs as d, Fragment as ue } from "react/jsx-runtime";
+import m from "../box.mjs";
+import j from "./grid.mjs";
+import he, { useMemo as E, useState as z, forwardRef as ce, useRef as de, useCallback as ge, useImperativeHandle as me } from "react";
+import { F as q, m as V, A as $, b as Y, D as pe, P as K, G as H, C as fe, S as Ce, d as we } from "../core.mjs";
+import p from "./button.mjs";
+import S from "./checkbox.mjs";
+import C from "./flex.mjs";
+import J from "./tooltip.mjs";
+import ye from "./baseSvg.mjs";
+import ve from "./textbox.mjs";
+const Re = "NO_PIN";
+class G {
+  constructor(e, t, i) {
+    a(this, "columns", []);
+    a(this, "_pin");
+    a(this, "_inlineWidth");
+    a(this, "resizeColumn", (e) => {
       this.grid.isResizeMode = !0;
-      const e = t.pageX, { MIN_COLUMN_WIDTH_PX: i, update: n } = this.grid, o = this.leafs.sumBy((h) => h.inlineWidth) - this.leafs.length * i, r = this.leafs.toRecord((h) => [h.key, h.inlineWidth]), d = j.throttle((h) => {
-        const m = (h.pageX - e) * (this.pin === "RIGHT" ? -1 : 1);
-        this.leafs.forEach((f) => {
-          const y = r[f.key], v = o > 0 ? (y - i) / o * m : m / this.leafs.length, R = Math.round(y + v);
-          f.setWidth(R < i ? i : R);
-        }), this.grid.headerRows.clear(), this.grid.sizes.clear(), n();
-      }, 20), a = new AbortController(), c = (h) => {
-        a.abort(), this.grid.isResizeMode = !1, n();
+      const t = e.pageX, { MIN_COLUMN_WIDTH_PX: i, update: o } = this.grid, s = this.leafs.sumBy((c) => c.inlineWidth) - this.leafs.length * i, n = this.leafs.toRecord((c) => [c.key, c.inlineWidth]), h = q.throttle((c) => {
+        const w = (c.pageX - t) * (this.pin === "RIGHT" ? -1 : 1);
+        this.leafs.forEach((y) => {
+          const k = n[y.key], L = s > 0 ? (k - i) / s * w : w / this.leafs.length, v = Math.round(k + L);
+          y.setWidth(v < i ? i : v);
+        }), this.grid.headerRows.clear(), this.grid.sizes.clear(), o();
+      }, 20), l = new AbortController(), g = (c) => {
+        l.abort(), this.grid.isResizeMode = !1, o();
       };
-      window.addEventListener("mousemove", d, a), window.addEventListener("mouseup", c, a);
+      window.addEventListener("mousemove", h, l), window.addEventListener("mouseup", g, l);
     });
-    l(this, "pinColumn", (t) => {
-      this.isLeaf ? this._pin = t : this.columns.forEach((e) => e.pinColumn(t)), this.grid.pinColumn(this.uniqueKey, t);
+    a(this, "pinColumn", (e) => {
+      this.isLeaf ? this._pin = e : this.columns.forEach((t) => t.pinColumn(e)), this.grid.pinColumn(this.uniqueKey, e);
     });
-    l(this, "toggleGrouping", () => {
+    a(this, "toggleGrouping", () => {
       this.grid.toggleGrouping(this.key);
     });
-    l(this, "sortColumn", (...t) => {
-      this.grid.setSortColumn(this.key, ...t);
+    a(this, "sortColumn", (...e) => {
+      this.grid.setSortColumn(this.key, ...e);
     });
-    l(this, "setWidth", (t) => {
+    a(this, "setWidth", (e) => {
       if (!this.isLeaf)
         throw new Error("Cannot set width for a parent column.");
-      this._inlineWidth !== t && (this._inlineWidth = t, this.grid.setWidth(this.key, t));
+      this._inlineWidth !== e && (this._inlineWidth = e, this.grid.setWidth(this.key, e));
     });
-    var n;
-    this.def = t, this.grid = e, this.parent = i, this.columns = ((n = t.columns) == null ? void 0 : n.map((o) => new T(t.pin ? { ...o, pin: t.pin } : o, e, this))) ?? [], this.isLeaf && (this._inlineWidth = this.key == E ? void 0 : this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = t.pin);
+    a(this, "toggleVisibility", () => {
+      this.grid.toggleColumnVisibility(this.key);
+    });
+    var o;
+    this.def = e, this.grid = t, this.parent = i, this.columns = ((o = e.columns) == null ? void 0 : o.map((s) => new G(e.pin ? { ...s, pin: e.pin } : s, t, this))) ?? [], this.isLeaf && (this._inlineWidth = this.key == P ? void 0 : this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = e.pin);
+  }
+  get visibleColumns() {
+    return this.columns.filter((e) => e.isVisible);
   }
   get key() {
     return this.def.key;
@@ -60,66 +68,74 @@ class T {
   }
   get pin() {
     if (this.isLeaf) return this._pin;
-    const t = [...new Set(this.columns.flatMap((e) => e.pin))];
-    if (t.length === 1) return t[0];
+    const e = [...new Set(this.columns.flatMap((t) => t.pin))];
+    if (e.length === 1) return e[0];
   }
   get uniqueKey() {
     return `${this.key}${this.pin ?? ""}`;
   }
-  getPinnedColumn(t) {
-    if (this.hasPin(t)) {
+  getPinnedColumn(e) {
+    if (this.hasPin(e)) {
       if (this.isLeaf) return this;
-      const e = new T({ ...this.def, pin: t }, this.grid, this.parent);
-      return e.columns = this.columns.filter((i) => i.hasPin(t)).map((i) => {
-        const n = i.getPinnedColumn(t);
-        return n.parent = e, n;
-      }).filter((i) => !!i), e;
+      const t = new G({ ...this.def, pin: e }, this.grid, this.parent);
+      return t.columns = this.columns.filter((i) => i.hasPin(e)).map((i) => {
+        const o = i.getPinnedColumn(e);
+        return o.parent = t, o;
+      }).filter((i) => !!i), t;
     }
   }
-  hasPin(t) {
-    return this.isLeaf ? this._pin === t : this.columns.some((e) => e.hasPin(t));
+  hasPin(e) {
+    return this.isLeaf ? this._pin === e : this.columns.some((t) => t.hasPin(e));
   }
   get death() {
     return this.parent ? this.parent.death + 1 : 0;
   }
   get flatColumns() {
-    const t = [this];
-    return t.push(...this.columns.flatMap((e) => e.flatColumns)), t;
+    const e = [this];
+    return e.push(...this.columns.flatMap((t) => t.flatColumns)), e;
   }
   get inlineWidth() {
     if (this.isLeaf) return this._inlineWidth;
-    const t = this.columns.map((e) => e.inlineWidth).filter((e) => typeof e == "number");
-    if (t.length !== 0)
-      return t.sumBy((e) => e);
+    const e = this.visibleColumns.map((t) => t.inlineWidth).filter((t) => typeof t == "number");
+    if (e.length !== 0)
+      return e.sumBy((t) => t);
   }
   get left() {
-    let t = 0;
+    let e = 0;
     if (this.parent) {
-      const e = this.parent.columns.findIndex((i) => i === this);
-      t += this.parent.columns.sumBy((i, n) => n < e ? i.inlineWidth ?? 0 : 0), t += this.parent.left;
+      const { visibleColumns: t, left: i } = this.parent, o = t.findIndex((s) => s === this);
+      e += t.sumBy((s, n) => n < o ? s.inlineWidth ?? 0 : 0), e += i;
     } else {
-      const e = this.grid.columns.value.left.findIndex((i) => i === this);
-      t += this.grid.columns.value.left.sumBy((i, n) => n < e ? i.inlineWidth ?? 0 : 0);
+      const t = this.grid.columns.value.left.filter((o) => o.isVisible), i = t.findIndex((o) => o === this);
+      e += t.sumBy((o, s) => s < i ? o.inlineWidth ?? 0 : 0);
     }
-    return t;
+    return e;
   }
   get right() {
-    let t = 0;
+    let e = 0;
     if (this.parent) {
-      const e = [...this.parent.columns].reverse(), i = e.findIndex((n) => n === this);
-      t += e.sumBy((n, o) => o < i ? n.inlineWidth ?? 0 : 0), t += this.parent.right;
+      const { visibleColumns: t } = this.parent, i = t.reverse(), o = i.findIndex((s) => s === this);
+      e += i.sumBy((s, n) => n < o ? s.inlineWidth ?? 0 : 0), e += this.parent.right;
     } else {
-      const e = [...this.grid.columns.value.right].reverse(), i = e.findIndex((n) => n === this);
-      t += e.sumBy((n, o) => o < i ? n.inlineWidth ?? 0 : 0);
+      const i = this.grid.columns.value.right.filter((s) => s.isVisible).reverse(), o = i.findIndex((s) => s === this);
+      e += i.sumBy((s, n) => n < o ? s.inlineWidth ?? 0 : 0);
     }
-    return t;
+    return e;
   }
   get isEdge() {
-    return this.pin ? this.parent ? (this.pin === "LEFT" ? this.parent.columns.at(-1) : this.parent.columns.at(0)) === this && this.parent.isEdge : (this.pin === "LEFT" ? this.grid.columns.value.left.at(-1) : this.grid.columns.value.right.at(0)) === this : !1;
+    if (!this.pin) return !1;
+    if (this.parent) {
+      const { visibleColumns: t } = this.parent;
+      return (this.pin === "LEFT" ? t.at(-1) : t.at(0)) === this && this.parent.isEdge;
+    }
+    return (this.pin === "LEFT" ? this.grid.columns.value.left.filter((t) => t.isVisible).at(-1) : this.grid.columns.value.right.filter((t) => t.isVisible).at(0)) === this;
+  }
+  get isVisible() {
+    return this.isLeaf ? !this.grid.hiddenColumns.includes(this.key) : this.leafs.some((e) => e.isVisible);
   }
   // Approved
   get leafs() {
-    return this.isLeaf ? [this] : this.columns.flatMap((t) => t.leafs);
+    return this.isLeaf ? [this] : this.visibleColumns.flatMap((e) => e.leafs);
   }
   get groupColumnWidthVarName() {
     return `--${this.uniqueKey}-group-width`;
@@ -134,28 +150,28 @@ class T {
     return `--${this.uniqueKey}-right`;
   }
   get gridRows() {
-    return this.isLeaf ? this.grid.headerRows.value.length - this.death : 1;
+    return this.isLeaf ? this.grid.columns.value.maxDeath - this.death : 1;
   }
 }
-class wt {
-  constructor(t, e, i) {
-    this.grid = t, this.row = e, this.column = i;
+class be {
+  constructor(e, t, i) {
+    this.grid = e, this.row = t, this.column = i;
   }
   get value() {
-    return this.column.key === L ? this.row.rowIndex + 1 : this.column.key === C ? `> ${this.row.groupValue} (${this.row.count})` : null;
+    return this.column.key === b ? this.row.rowIndex + 1 : this.column.key === f ? `> ${this.row.groupValue} (${this.row.count})` : null;
   }
 }
-class q {
-  constructor(t, e, i, n, o) {
-    l(this, "parentRow");
-    this.grid = t, this.groupColumn = e, this.rows = i, this.rowIndex = n, this.groupValue = o, i.forEach((r) => r.parentRow = this);
+class Q {
+  constructor(e, t, i, o, s) {
+    a(this, "parentRow");
+    this.grid = e, this.groupColumn = t, this.rows = i, this.rowIndex = o, this.groupValue = s, i.forEach((n) => n.parentRow = this);
   }
   get rowKey() {
-    var t;
-    return `${((t = this.parentRow) == null ? void 0 : t.rowKey) ?? ""}${this.groupColumn.key}${this.groupValue}`;
+    var e;
+    return `${((e = this.parentRow) == null ? void 0 : e.rowKey) ?? ""}${this.groupColumn.key}${this.groupValue}`;
   }
   get cells() {
-    return this.grid.columns.value.leafs.map((t) => new wt(this.grid, this, t));
+    return this.grid.columns.value.visibleLeafs.map((e) => new be(this.grid, this, e));
   }
   get expanded() {
     return this.grid.expandedGroupRow[this.rowKey];
@@ -164,42 +180,42 @@ class q {
     return this.parentRow ? this.parentRow.depth + 1 : 0;
   }
   get count() {
-    return this.rows.sumBy((t) => t.count, 0);
+    return this.rows.sumBy((e) => e.count, 0);
   }
   get flatRows() {
-    return this.expanded ? [this, ...this.rows.flatMap((t) => t.flatRows)] : [this];
+    return this.expanded ? [this, ...this.rows.flatMap((e) => e.flatRows)] : [this];
   }
   get groupingColumn() {
-    return this.grid.columns.value.leafs.findOrThrow((t) => t.key === C);
+    return this.grid.columns.value.leafs.findOrThrow((e) => e.key === f);
   }
   get groupingColumnGridColumn() {
-    const { leafs: t } = this.grid.columns.value, { groupingColumn: e } = this;
-    return t.sumBy(
-      (n) => n.pin === e.pin && n.key !== E && n.key !== x && n.key !== L ? 1 : 0
+    const { visibleLeafs: e } = this.grid.columns.value, { groupingColumn: t } = this;
+    return e.sumBy(
+      (o) => o.pin === t.pin && o.key !== P && o.key !== T && o.key !== b ? 1 : 0
     );
   }
   toggleRow() {
     this.grid.toggleGroupRow(this.rowKey);
   }
 }
-class Ct {
-  constructor(t, e, i) {
-    this.grid = t, this.row = e, this.column = i;
+class ke {
+  constructor(e, t, i) {
+    this.grid = e, this.row = t, this.column = i;
   }
   get value() {
-    return this.column.key === E ? null : this.column.key === L ? this.row.rowIndex + 1 : this.row.row[this.column.key];
+    return this.column.key === P ? null : this.column.key === b ? this.row.rowIndex + 1 : this.row.row[this.column.key];
   }
 }
-class U {
-  constructor(t, e, i) {
-    l(this, "parentRow");
-    this.grid = t, this.row = e, this.rowIndex = i, this.grid = t, this.row = e;
+class X {
+  constructor(e, t, i) {
+    a(this, "parentRow");
+    this.grid = e, this.row = t, this.rowIndex = i, this.grid = e, this.row = t;
   }
   get rowKey() {
     return this.getRowKey();
   }
   get cells() {
-    return this.grid.columns.value.leafs.map((t) => new Ct(this.grid, this, t));
+    return this.grid.columns.value.visibleLeafs.map((e) => new ke(this.grid, this, e));
   }
   get count() {
     return 1;
@@ -209,111 +225,129 @@ class U {
   }
   getRowKey() {
     var i;
-    const { rowKey: t } = this.grid.props.def, e = t ? typeof t == "function" ? t(this.row) : this.row[t] : this.rowIndex;
-    return `${((i = this.parentRow) == null ? void 0 : i.rowKey) ?? ""}${e}`;
+    const { rowKey: e } = this.grid.props.def, t = e ? typeof e == "function" ? e(this.row) : this.row[e] : this.rowIndex;
+    return `${((i = this.parentRow) == null ? void 0 : i.rowKey) ?? ""}${t}`;
   }
 }
-const E = "empty-cell", L = "row-number-cell", x = "row-selection-cell", C = "grouping-cell";
-class yt {
-  constructor(t, e) {
-    l(this, "_sourceColumns", []);
-    l(this, "columns", I(() => {
-      const t = this._sourceColumns.map((r) => r.getPinnedColumn("LEFT")).filter((r) => !!r), e = this._sourceColumns.map((r) => r.getPinnedColumn()).filter((r) => !!r), i = this._sourceColumns.map((r) => r.getPinnedColumn("RIGHT")).filter((r) => !!r), n = [...t, ...e, ...i].flatMap((r) => r.flatColumns), o = n.filter((r) => r.isLeaf);
+const P = "empty-cell", b = "row-number-cell", T = "row-selection-cell", f = "grouping-cell";
+class Le {
+  constructor(e, t) {
+    a(this, "_sourceColumns", []);
+    a(this, "columns", V(() => {
+      const e = this._sourceColumns.map((l) => l.getPinnedColumn("LEFT")).filter((l) => !!l), t = this._sourceColumns.map((l) => l.getPinnedColumn()).filter((l) => !!l), i = this._sourceColumns.map((l) => l.getPinnedColumn("RIGHT")).filter((l) => !!l), o = [...e, ...t, ...i].flatMap((l) => l.flatColumns), s = o.filter((l) => l.isLeaf), n = o.filter((l) => l.isLeaf && l.isVisible), h = o.maxBy((l) => l.death) + 1;
       return {
-        left: t,
-        middle: e,
+        left: e,
+        middle: t,
         right: i,
-        flat: n,
-        leafs: o
+        flat: o,
+        leafs: s,
+        visibleLeafs: n,
+        maxDeath: h
       };
     }));
-    l(this, "headerRows", I(() => this.columns.value.flat.groupBy((e) => e.death).sortBy((e) => e.key).map((e) => {
-      const i = e.values.groupBy((n) => n.pin ?? ft).toRecord((n) => [n.key, n.values]);
-      return [...i.LEFT ?? [], ...i.NO_PIN ?? [], ...i.RIGHT ?? []];
+    a(this, "headerRows", V(() => this.columns.value.flat.groupBy((t) => t.death).sortBy((t) => t.key).map((t) => {
+      var o, s, n;
+      const i = t.values.groupBy((h) => h.pin ?? Re).toRecord((h) => [h.key, h.values]);
+      return [
+        ...((o = i.LEFT) == null ? void 0 : o.filter((h) => h.isVisible)) ?? [],
+        ...((s = i.NO_PIN) == null ? void 0 : s.filter((h) => h.isVisible)) ?? [],
+        ...((n = i.RIGHT) == null ? void 0 : n.filter((h) => h.isVisible)) ?? []
+      ];
     })));
-    l(this, "gridTemplateColumns", I(() => {
-      const t = this.columns.value.leafs.sumBy((o) => o.pin === "RIGHT" ? 1 : 0), e = this.columns.value.leafs.length - t - 1, i = e > 0 ? `repeat(${e}, max-content)` : "", n = t > 0 ? `repeat(${t}, max-content)` : "";
-      return `${i} auto ${n}`;
+    a(this, "gridTemplateColumns", V(() => {
+      const { visibleLeafs: e } = this.columns.value, t = e.sumBy((n) => n.pin === "RIGHT" ? 1 : 0), i = e.length - t - 1, o = i > 0 ? `repeat(${i}, max-content)` : "", s = t > 0 ? `repeat(${t}, max-content)` : "";
+      return `${o} auto ${s}`;
     }));
-    l(this, "rows", I(() => {
-      let t = this.props.data;
-      if (this._sortColumn && (t = t.sortBy((e) => e[this._sortColumn], this._sortDirection)), this.groupColumns.length > 0) {
-        const e = (i, n, o) => {
-          const r = n[0];
-          n = n.removeBy((a) => a === r);
-          const d = this.columns.value.leafs.findOrThrow((a) => a.key === r);
-          return this._sortColumn === C && (i = i.sortBy((a) => a[r], this._sortDirection)), i.groupBy((a) => a[r]).map((a) => {
-            let c;
-            n.length > 0 ? c = e(a.values, n, o + 1) : c = a.values.map((m, f) => new U(this, m, o + 1 + f));
-            const h = new q(this, d, c, o, a.key);
-            return o += 1, h.expanded && (o += c.length), h;
+    a(this, "rows", V(() => {
+      let e = this.props.data;
+      if (this._sortColumn && (e = e.sortBy((t) => t[this._sortColumn], this._sortDirection)), this.groupColumns.length > 0) {
+        const t = (i, o, s) => {
+          const n = o[0];
+          o = o.removeBy((l) => l === n);
+          const h = this.columns.value.leafs.findOrThrow((l) => l.key === n);
+          return this._sortColumn === f && (i = i.sortBy((l) => l[n], this._sortDirection)), i.groupBy((l) => l[n]).map((l) => {
+            let g;
+            o.length > 0 ? g = t(l.values, o, s + 1) : g = l.values.map((w, y) => new X(this, w, s + 1 + y));
+            const c = new Q(this, h, g, s, l.key);
+            return s += 1, c.expanded && (s += g.length), c;
           });
         };
-        return e(t, this.groupColumns, 0);
+        return t(e, this.groupColumns, 0);
       }
-      return t.map((e, i) => new U(this, e, i));
+      return e.map((t, i) => new X(this, t, i));
     }));
-    l(this, "flatRows", I(() => this.rows.value.flatMap((t) => t.flatRows)));
-    l(this, "sizes", I(() => {
+    a(this, "flatRows", V(() => this.rows.value.flatMap((e) => e.flatRows)));
+    a(this, "sizes", V(() => {
       console.log("sizes");
-      const t = this.columns.value.flat.reduce((i, n) => {
-        const { inlineWidth: o } = n;
-        return typeof o == "number" && (i[n.widthVarName] = `${n.inlineWidth}px`), n.pin === "LEFT" && (i[n.leftVarName] = `${n.left}px`), n.pin === "RIGHT" && (i[n.rightVarName] = `${n.right}px`), i;
+      const e = this.columns.value.flat.reduce((o, s) => {
+        const { inlineWidth: n } = s;
+        return typeof n == "number" && (o[s.widthVarName] = `${s.inlineWidth}px`), s.pin === "LEFT" && (o[s.leftVarName] = `${s.left}px`), s.pin === "RIGHT" && (o[s.rightVarName] = `${s.right}px`), o;
       }, {});
-      t[this.leftEdgeVarName] = `${this.leftEdge}px`;
-      const e = this.columns.value.leafs.find((i) => i.key === C);
-      return e && (t[e.groupColumnWidthVarName] = `${this.columns.value.leafs.sumBy((i) => i.pin === e.pin && i.key !== L && i.key !== x ? i.inlineWidth ?? 0 : 0)}px`), this.groupColumns.forEach((i) => {
-        const n = this.columns.value.leafs.findOrThrow((o) => o.key === i);
-        t[n.groupColumnWidthVarName] = `${this.columns.value.leafs.sumBy((o) => o.pin === n.pin ? o.inlineWidth ?? 0 : 0)}px`;
-      }), t;
+      e[this.leftEdgeVarName] = `${this.leftEdge}px`;
+      const { visibleLeafs: t } = this.columns.value, i = t.find((o) => o.key === f);
+      if (i) {
+        const o = t.sumBy((s) => s.pin === i.pin && s.key !== b && s.key !== T ? s.inlineWidth ?? 0 : 0);
+        e[i.groupColumnWidthVarName] = `${o}px`;
+      }
+      return this.groupColumns.forEach((o) => {
+        const s = this.columns.value.leafs.findOrThrow((n) => n.key === o);
+        e[s.groupColumnWidthVarName] = `${t.sumBy((n) => n.pin === s.pin ? n.inlineWidth ?? 0 : 0)}px`;
+      }), e;
     }));
-    l(this, "ROW_HEIGHT", 12);
-    l(this, "MIN_COLUMN_WIDTH_PX", 48);
-    l(this, "DEFAULT_COLUMN_WIDTH_PX", 200);
-    l(this, "isResizeMode", !1);
-    l(this, "expandedGroupRow", {});
-    l(this, "leftEdgeVarName", "--left-edge");
-    l(this, "setSortColumn", (t, ...e) => {
-      if (e.length > 0)
-        [this._sortDirection] = e, this._sortColumn = this._sortDirection ? t : void 0;
+    a(this, "ROW_HEIGHT", 12);
+    a(this, "MIN_COLUMN_WIDTH_PX", 48);
+    a(this, "DEFAULT_COLUMN_WIDTH_PX", 200);
+    a(this, "isResizeMode", !1);
+    a(this, "expandedGroupRow", {});
+    a(this, "leftEdgeVarName", "--left-edge");
+    a(this, "setSortColumn", (e, ...t) => {
+      if (t.length > 0)
+        [this._sortDirection] = t, this._sortColumn = this._sortDirection ? e : void 0;
       else {
-        const { _sortColumn: i, _sortDirection: n } = this;
-        this._sortColumn = i === t && n === "DESC" ? void 0 : t, this._sortDirection = i === t && n === "ASC" ? "DESC" : "ASC";
+        const { _sortColumn: i, _sortDirection: o } = this;
+        this._sortColumn = i === e && o === "DESC" ? void 0 : e, this._sortDirection = i === e && o === "ASC" ? "DESC" : "ASC";
       }
       this.headerRows.clear(), this.rows.clear(), this.flatRows.clear(), this.update();
     });
-    l(this, "pinColumn", (t, e) => {
-      const i = this.columns.value.flat.findOrThrow((n) => n.uniqueKey === t);
-      i.pin !== e && i.pinColumn(e), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
+    a(this, "pinColumn", (e, t) => {
+      const i = this.columns.value.flat.findOrThrow((o) => o.uniqueKey === e);
+      i.pin !== t && i.pinColumn(t), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
     });
-    l(this, "toggleGrouping", (t) => {
-      this.groupColumns.includes(t) ? this.groupColumns = this.groupColumns.removeBy((i) => i === t) : this.groupColumns = this.groupColumns.add(t);
-      const e = this._sourceColumns.find((i) => i.key === C);
-      if (this.groupColumns.length > 0 && !e) {
-        const i = this._sourceColumns.sumBy((n) => n.key === L || n.key === x ? 1 : 0);
-        this._sourceColumns.splice(i, 0, new T({ key: C }, this));
-      } else this.groupColumns.length === 0 && e && (this._sourceColumns = this._sourceColumns.removeBy((i) => i.key === C));
+    a(this, "toggleGrouping", (e) => {
+      this.groupColumns.includes(e) ? (this.groupColumns = this.groupColumns.removeBy((i) => i === e), this.hiddenColumns = this.hiddenColumns.removeBy((i) => i === e)) : (this.groupColumns = this.groupColumns.add(e), this.hiddenColumns = this.hiddenColumns.add(e));
+      const t = this._sourceColumns.find((i) => i.key === f);
+      if (this.groupColumns.length > 0 && !t) {
+        const i = this._sourceColumns.sumBy((o) => o.key === b || o.key === T ? 1 : 0);
+        this._sourceColumns.splice(i, 0, new G({ key: f }, this));
+      } else this.groupColumns.length === 0 && t && (this._sourceColumns = this._sourceColumns.removeBy((i) => i.key === f));
       this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
     });
-    l(this, "toggleGroupRow", (t) => {
-      t in this.expandedGroupRow ? delete this.expandedGroupRow[t] : this.expandedGroupRow[t] = !0, this.rows.clear(), this.flatRows.clear(), this.update();
+    a(this, "unGroupAll", () => {
+      this.groupColumns = [], this._sourceColumns = this._sourceColumns.removeBy((e) => e.key === f), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
+    });
+    a(this, "toggleGroupRow", (e) => {
+      e in this.expandedGroupRow ? delete this.expandedGroupRow[e] : this.expandedGroupRow[e] = !0, this.rows.clear(), this.flatRows.clear(), this.update();
     });
-    l(this, "setWidth", (t, e) => {
-      const i = this.columns.value.leafs.find((o) => o.key === t);
+    a(this, "toggleColumnVisibility", (e) => {
+      this.hiddenColumns.includes(e) ? this.hiddenColumns = this.hiddenColumns.removeBy((t) => t === e) : this.hiddenColumns = this.hiddenColumns.add(e), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
+    });
+    a(this, "setWidth", (e, t) => {
+      const i = this.columns.value.leafs.find((s) => s.key === e);
       if (!i)
         throw new Error("Leaf column not found.");
-      i.setWidth(e), this._sourceColumns.flatMap((o) => o.flatColumns).findOrThrow((o) => o.key === t).setWidth(e);
+      i.setWidth(t), this._sourceColumns.flatMap((s) => s.flatColumns).findOrThrow((s) => s.key === e).setWidth(t);
     });
-    l(this, "groupColumns", []);
-    l(this, "_sortColumn");
-    l(this, "_sortDirection", "ASC");
-    this.props = t, this.update = e, this._sourceColumns = t.def.columns.map((i) => new T(i, this)), this._sourceColumns.push(new T({ key: E }, this)), this._sourceColumns.unshift(new T({ key: x, width: 50, align: "center" }, this)), this._sourceColumns.unshift(new T({ key: L, pin: "LEFT", width: 70, align: "right" }, this));
+    a(this, "groupColumns", []);
+    a(this, "hiddenColumns", []);
+    a(this, "_sortColumn");
+    a(this, "_sortDirection", "ASC");
+    this.props = e, this.update = t, this._sourceColumns = e.def.columns.map((i) => new G(i, this)), this._sourceColumns.push(new G({ key: P }, this)), this._sourceColumns.unshift(new G({ key: T, width: 50, align: "center" }, this)), this._sourceColumns.unshift(new G({ key: b, pin: "LEFT", width: 70, align: "right" }, this));
   }
   get leftEdge() {
-    return this.columns.value.left.sumBy((t) => t.inlineWidth ?? 0);
+    return this.columns.value.left.sumBy((e) => e.inlineWidth ?? 0);
   }
   get rightEdge() {
-    return this.columns.value.right.sumBy((t) => t.inlineWidth ?? 0);
+    return this.columns.value.right.sumBy((e) => e.inlineWidth ?? 0);
   }
   get sortColumn() {
     return this._sortColumn;
@@ -322,92 +356,92 @@ class yt {
     return this._sortDirection;
   }
 }
-function vt(u) {
-  const t = N(() => new yt(u, () => i((o) => o + 1)), [u]), [e, i] = H(0);
-  return N(() => Object.create(Object.getPrototypeOf(t), Object.getOwnPropertyDescriptors(t)), [t, e]);
+function _e(u) {
+  const e = E(() => new Le(u, () => i((s) => s + 1)), [u]), [t, i] = z(0);
+  return E(() => Object.create(Object.getPrototypeOf(e), Object.getOwnPropertyDescriptors(e)), [e, t]);
 }
-function Rt(u) {
-  const { column: t } = u, { key: e, pin: i, left: n, right: o, isEdge: r, isLeaf: d, leafs: a, grid: c, header: h, gridRows: m, widthVarName: f, leftVarName: y, rightVarName: v, inlineWidth: R } = t, k = e === E, G = e === C, w = e === L, P = e === x, W = i === "LEFT", D = i === "RIGHT", M = W || i === "RIGHT", S = W && n === 0, O = W && r, Q = D && r, Z = D && o === 0, z = d && !k && !w && !P, tt = d ? 1 : a.length, et = !w && !P, A = !w && !P, it = N(() => {
-    if (w) return null;
-    if (P) return /* @__PURE__ */ s(V, { m: 1 });
-    if (G) {
-      if (c.groupColumns.length === 1) {
-        const F = c.columns.value.leafs.findOrThrow((nt) => nt.key === c.groupColumns[0]);
-        return F.header ?? F.key;
+function xe(u) {
+  const { column: e } = u, { key: t, pin: i, left: o, right: s, isEdge: n, isLeaf: h, leafs: l, grid: g, header: c, gridRows: w, widthVarName: y, leftVarName: k, rightVarName: L, inlineWidth: v } = e, _ = t === P, x = t === f, R = t === b, W = t === T, I = i === "LEFT", D = i === "RIGHT", B = I || i === "RIGHT", M = I && o === 0, O = I && n, te = D && n, ie = D && s === 0, A = h && !_ && !R && !W, se = h ? 1 : l.length, oe = !R && !W, F = !R && !W, re = E(() => {
+    if (R) return null;
+    if (W) return /* @__PURE__ */ r(S, { m: 1 });
+    if (x) {
+      if (g.groupColumns.length === 1) {
+        const U = g.columns.value.leafs.findOrThrow((ne) => ne.key === g.groupColumns[0]);
+        return U.header ?? U.key;
       }
       return "Group";
     }
-    return h ?? e;
-  }, [c.groupColumns]);
-  return /* @__PURE__ */ s(
-    b,
+    return c ?? t;
+  }, [g.groupColumns]);
+  return /* @__PURE__ */ r(
+    C,
     {
       component: "datagrid.header.cell",
-      variant: { isRowNumber: w, isPinned: M, isFirstLeftPinned: S, isLastLeftPinned: O, isFirstRightPinned: Q, isLastRightPinned: Z, isSortable: z },
-      gridRow: m,
-      gridColumn: tt,
+      variant: { isRowNumber: R, isPinned: B, isFirstLeftPinned: M, isLastLeftPinned: O, isFirstRightPinned: te, isLastRightPinned: ie, isSortable: A },
+      gridRow: w,
+      gridColumn: se,
       style: {
-        width: `var(${f})`,
-        left: W ? `var(${y})` : void 0,
-        right: D ? `var(${v})` : void 0
+        width: `var(${y})`,
+        left: I ? `var(${k})` : void 0,
+        right: D ? `var(${L})` : void 0
       },
-      children: !k && /* @__PURE__ */ g(rt, { children: [
-        /* @__PURE__ */ s(b, { width: "fit", height: "fit", jc: t.align, props: { onClick: z ? () => t.sortColumn() : void 0 }, children: /* @__PURE__ */ g(
-          b,
+      children: !_ && /* @__PURE__ */ d(ue, { children: [
+        /* @__PURE__ */ r(C, { width: "fit", height: "fit", jc: e.align, props: { onClick: A ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ d(
+          C,
           {
             overflow: "hidden",
-            position: d ? void 0 : "sticky",
+            position: h ? void 0 : "sticky",
             ai: "center",
             transition: "none",
-            pl: t.align ? void 0 : 4,
+            pl: e.align ? void 0 : 4,
             style: {
-              left: i ? void 0 : `var(${c.leftEdgeVarName})`
+              left: i ? void 0 : `var(${g.leftEdgeVarName})`
             },
             children: [
-              /* @__PURE__ */ s(p, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: it }),
-              e === c.sortColumn && /* @__PURE__ */ s(p, { pl: (R ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ s(B, { width: "16px", rotate: c.sortDirection === "ASC" ? 0 : 180, fill: "violet-950" }) }),
-              A && /* @__PURE__ */ s(p, { minWidth: 12 })
+              /* @__PURE__ */ r(m, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: re }),
+              t === g.sortColumn && /* @__PURE__ */ r(m, { pl: (v ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ r($, { width: "16px", rotate: g.sortDirection === "ASC" ? 0 : 180, fill: "violet-950" }) }),
+              F && /* @__PURE__ */ r(m, { minWidth: 10 })
             ]
           }
         ) }),
-        et && /* @__PURE__ */ s(kt, { column: t }),
-        A && /* @__PURE__ */ s(_t, { column: t })
+        oe && /* @__PURE__ */ r(Te, { column: e }),
+        F && /* @__PURE__ */ r(Ge, { column: e })
       ] })
     }
   );
 }
-function kt(u) {
-  const { column: t } = u;
-  return /* @__PURE__ */ s(
-    b,
+function Te(u) {
+  const { column: e } = u;
+  return /* @__PURE__ */ r(
+    C,
     {
       height: "fit",
       ai: "center",
       position: "absolute",
-      right: t.pin === "RIGHT" ? void 0 : 0,
-      left: t.pin !== "RIGHT" ? void 0 : 0,
+      right: e.pin === "RIGHT" ? void 0 : 0,
+      left: e.pin !== "RIGHT" ? void 0 : 0,
       py: 3,
-      children: /* @__PURE__ */ s(
-        p,
+      children: /* @__PURE__ */ r(
+        m,
         {
           cursor: "col-resize",
           px: 0.75,
           className: "resizer",
           height: "fit",
-          props: { onMouseDown: t.resizeColumn, onTouchStart: t.resizeColumn },
-          children: /* @__PURE__ */ s(p, { width: 0.5, height: "fit", bgColor: "gray-400", hoverGroup: { resizer: { bgColor: "gray-600" } } })
+          props: { onMouseDown: e.resizeColumn, onTouchStart: e.resizeColumn },
+          children: /* @__PURE__ */ r(m, { width: 0.5, height: "fit", bgColor: "gray-400", hoverGroup: { resizer: { bgColor: "gray-600" } } })
         }
       )
     }
   );
 }
-function _t(u) {
-  const { column: t } = u, [e, i, n] = ct({ hideOnScroll: !0, event: "mousedown" }), [o, r] = H({ top: 0, left: 0 }), d = N(() => o.left > window.innerWidth / 2, [o.left]), a = t.isLeaf && (t.grid.sortColumn !== t.key || t.grid.sortDirection === "DESC"), c = t.isLeaf && (t.grid.sortColumn !== t.key || t.grid.sortDirection === "ASC"), h = t.isLeaf && t.grid.sortColumn === t.key, m = t.pin !== "LEFT", f = t.pin !== "RIGHT", y = !!t.pin, v = t.isLeaf && t.key !== C, R = a || c || h, k = m || f || y;
-  return /* @__PURE__ */ s(b, { position: "absolute", right: t.pin === "RIGHT" ? 2.5 : 4, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ g(
-    _,
+function Ge(u) {
+  const { column: e } = u, [t, i, o] = Y({ hideOnScroll: !0, event: "mousedown" }), [s, n] = z({ top: 0, left: 0 }), h = E(() => s.left > window.innerWidth / 2, [s.left]), l = e.isLeaf && (e.grid.sortColumn !== e.key || e.grid.sortDirection === "DESC"), g = e.isLeaf && (e.grid.sortColumn !== e.key || e.grid.sortDirection === "ASC"), c = e.isLeaf && e.grid.sortColumn === e.key, w = e.pin !== "LEFT", y = e.pin !== "RIGHT", k = !!e.pin, L = e.isLeaf && e.key !== f, v = e.isLeaf && e.key === f, _ = l || g || c, x = w || y || k;
+  return /* @__PURE__ */ r(C, { position: "absolute", right: e.pin === "RIGHT" ? 2.5 : 4, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ d(
+    p,
     {
       clean: !0,
-      onClick: () => i(!e),
+      onClick: () => i(!t),
       width: 6,
       height: 6,
       cursor: "pointer",
@@ -421,9 +455,9 @@ function _t(u) {
       bgColor: "gray-200",
       hover: { bgColor: "gray-300" },
       children: [
-        /* @__PURE__ */ s(dt, { fill: "violet-950" }),
-        e && /* @__PURE__ */ g(
-          mt,
+        /* @__PURE__ */ r(pe, { fill: "violet-950" }),
+        t && /* @__PURE__ */ d(
+          J,
           {
             bgColor: "white",
             width: 56,
@@ -435,13 +469,13 @@ function _t(u) {
             mt: 4,
             py: 2,
             overflow: "hidden",
-            translateX: d ? -55 : -5,
-            onPositionChange: r,
-            ref: n,
+            translateX: h ? -55 : -5,
+            onPositionChange: n,
+            ref: o,
             shadow: "medium-shadow",
             children: [
-              a && /* @__PURE__ */ g(
-                _,
+              l && /* @__PURE__ */ d(
+                p,
                 {
                   clean: !0,
                   display: "flex",
@@ -449,15 +483,15 @@ function _t(u) {
                   p: 3,
                   cursor: "pointer",
                   hover: { bgColor: "gray-200" },
-                  onClick: () => t.sortColumn("ASC"),
+                  onClick: () => e.sortColumn("ASC"),
                   children: [
-                    /* @__PURE__ */ s(B, { width: "1rem", fill: "violet-950" }),
+                    /* @__PURE__ */ r($, { width: "1rem", fill: "violet-950" }),
                     "Sort Ascending"
                   ]
                 }
               ),
-              c && /* @__PURE__ */ g(
-                _,
+              g && /* @__PURE__ */ d(
+                p,
                 {
                   clean: !0,
                   display: "flex",
@@ -465,15 +499,15 @@ function _t(u) {
                   p: 3,
                   cursor: "pointer",
                   hover: { bgColor: "gray-200" },
-                  onClick: () => t.sortColumn("DESC"),
+                  onClick: () => e.sortColumn("DESC"),
                   children: [
-                    /* @__PURE__ */ s(B, { width: "1rem", fill: "violet-950", rotate: 180 }),
+                    /* @__PURE__ */ r($, { width: "1rem", fill: "violet-950", rotate: 180 }),
                     "Sort Descending"
                   ]
                 }
               ),
-              h && /* @__PURE__ */ g(
-                _,
+              c && /* @__PURE__ */ d(
+                p,
                 {
                   clean: !0,
                   display: "flex",
@@ -481,16 +515,16 @@ function _t(u) {
                   p: 3,
                   cursor: "pointer",
                   hover: { bgColor: "gray-200" },
-                  onClick: () => t.sortColumn(void 0),
+                  onClick: () => e.sortColumn(void 0),
                   children: [
-                    /* @__PURE__ */ s(p, { width: 4 }),
+                    /* @__PURE__ */ r(m, { width: 4 }),
                     "Clear Sort"
                   ]
                 }
               ),
-              R && (k || v) && /* @__PURE__ */ s(p, { bb: 1, my: 2, borderColor: "gray-300" }),
-              m && /* @__PURE__ */ g(
-                _,
+              _ && (x || L || v) && /* @__PURE__ */ r(m, { bb: 1, my: 2, borderColor: "gray-300" }),
+              w && /* @__PURE__ */ d(
+                p,
                 {
                   clean: !0,
                   display: "flex",
@@ -498,15 +532,15 @@ function _t(u) {
                   p: 3,
                   cursor: "pointer",
                   hover: { bgColor: "gray-200" },
-                  onClick: () => t.pinColumn("LEFT"),
+                  onClick: () => e.pinColumn("LEFT"),
                   children: [
-                    /* @__PURE__ */ s(K, { width: "1rem", fill: "violet-950" }),
+                    /* @__PURE__ */ r(K, { width: "1rem", fill: "violet-950" }),
                     "Pin Left"
                   ]
                 }
               ),
-              f && /* @__PURE__ */ g(
-                _,
+              y && /* @__PURE__ */ d(
+                p,
                 {
                   clean: !0,
                   display: "flex",
@@ -514,15 +548,15 @@ function _t(u) {
                   p: 3,
                   cursor: "pointer",
                   hover: { bgColor: "gray-200" },
-                  onClick: () => t.pinColumn("RIGHT"),
+                  onClick: () => e.pinColumn("RIGHT"),
                   children: [
-                    /* @__PURE__ */ s(K, { width: "1rem", fill: "violet-950", rotate: -90 }),
+                    /* @__PURE__ */ r(K, { width: "1rem", fill: "violet-950", rotate: -90 }),
                     "Pin Right"
                   ]
                 }
               ),
-              y && /* @__PURE__ */ g(
-                _,
+              k && /* @__PURE__ */ d(
+                p,
                 {
                   clean: !0,
                   display: "flex",
@@ -530,20 +564,37 @@ function _t(u) {
                   p: 3,
                   cursor: "pointer",
                   hover: { bgColor: "gray-200" },
-                  onClick: () => t.pinColumn(),
+                  onClick: () => e.pinColumn(),
                   children: [
-                    /* @__PURE__ */ s(p, { width: 4 }),
+                    /* @__PURE__ */ r(m, { width: 4 }),
                     "Unpin"
                   ]
                 }
               ),
-              R && k && v && /* @__PURE__ */ s(p, { bb: 1, my: 2, borderColor: "gray-300" }),
-              v && /* @__PURE__ */ g(_, { clean: !0, display: "flex", gap: 2, p: 3, cursor: "pointer", hover: { bgColor: "gray-200" }, onClick: t.toggleGrouping, children: [
-                /* @__PURE__ */ s(p, { children: /* @__PURE__ */ s(pt, { width: "1rem", fill: "violet-950" }) }),
-                /* @__PURE__ */ g(p, { textWrap: "nowrap", children: [
-                  " Group by ",
-                  t.header ?? t.key
-                ] })
+              _ && x && (L || v) && /* @__PURE__ */ r(m, { bb: 1, my: 2, borderColor: "gray-300" }),
+              L && /* @__PURE__ */ d(
+                p,
+                {
+                  clean: !0,
+                  display: "flex",
+                  ai: "center",
+                  gap: 2,
+                  p: 3,
+                  cursor: "pointer",
+                  hover: { bgColor: "gray-200" },
+                  onClick: e.toggleGrouping,
+                  children: [
+                    /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(H, { width: "1rem", fill: "violet-950" }) }),
+                    /* @__PURE__ */ d(m, { textWrap: "nowrap", children: [
+                      " Group by ",
+                      e.header ?? e.key
+                    ] })
+                  ]
+                }
+              ),
+              v && /* @__PURE__ */ d(p, { clean: !0, display: "flex", gap: 2, p: 3, cursor: "pointer", hover: { bgColor: "gray-200" }, onClick: e.grid.unGroupAll, children: [
+                /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(H, { width: "1rem", fill: "violet-950" }) }),
+                /* @__PURE__ */ r(m, { textWrap: "nowrap", children: " Un-Group All" })
               ] })
             ]
           }
@@ -552,108 +603,181 @@ function _t(u) {
     }
   ) });
 }
-function $(u) {
-  const { children: t, column: e, style: i, ...n } = u, { key: o, pin: r, left: d, right: a, isEdge: c, align: h, widthVarName: m, leftVarName: f, rightVarName: y } = e, v = o === E, R = o === L, k = o === x, G = r === "LEFT", w = r === "RIGHT", P = G || w, W = G && d === 0, D = G && c, M = w && c, S = w && a === 0, O = !k && !v;
-  return /* @__PURE__ */ g(
-    b,
+function N(u) {
+  const { children: e, column: t, style: i, ...o } = u, { key: s, pin: n, left: h, right: l, isEdge: g, align: c, widthVarName: w, leftVarName: y, rightVarName: k } = t, L = s === P, v = s === b, _ = s === T, x = n === "LEFT", R = n === "RIGHT", W = x || R, I = x && h === 0, D = x && g, B = R && g, M = R && l === 0, O = !_ && !L;
+  return /* @__PURE__ */ d(
+    C,
     {
       component: "datagrid.cell",
       props: { role: "cell" },
-      variant: { isRowNumber: R, isRowSelection: k, isPinned: P, isFirstLeftPinned: W, isLastLeftPinned: D, isFirstRightPinned: M, isLastRightPinned: S },
-      jc: h,
+      variant: { isPinned: W, isFirstLeftPinned: I, isLastLeftPinned: D, isFirstRightPinned: B, isLastRightPinned: M, isRowNumber: v, isRowSelection: _ },
+      jc: c,
       style: {
-        width: `var(${m})`,
-        left: G ? `var(${f})` : void 0,
-        right: w ? `var(${y})` : void 0,
+        width: `var(${w})`,
+        left: x ? `var(${y})` : void 0,
+        right: R ? `var(${k})` : void 0,
         ...i
       },
-      ...n,
+      ...o,
       children: [
-        O && /* @__PURE__ */ s(p, { px: 4, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: t }),
-        k && t
+        O && /* @__PURE__ */ r(m, { px: 4, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: e }),
+        _ && e
       ]
     }
   );
 }
-function Lt(u) {
-  const { row: t } = u;
-  return /* @__PURE__ */ s(b, { className: "grid-row", display: "contents", props: { role: "rowgroup" }, children: t.cells.map((e) => {
-    if (e.column.key === C)
-      return /* @__PURE__ */ s(
-        $,
+function Ee(u) {
+  const { row: e } = u;
+  return /* @__PURE__ */ r(C, { className: "grid-row", display: "contents", props: { role: "rowgroup" }, children: e.cells.map((t) => {
+    const { key: i, pin: o, groupColumnWidthVarName: s } = t.column, n = o === "RIGHT";
+    if (i === f)
+      return /* @__PURE__ */ r(
+        N,
         {
-          column: e.column,
+          column: t.column,
           style: {
-            width: `var(${e.column.groupColumnWidthVarName})`
+            width: `var(${s})`,
+            right: n ? "0" : void 0
           },
-          br: t.groupingColumn.pin === "LEFT" ? 1 : void 0,
-          gridColumn: t.groupingColumnGridColumn,
-          pl: 4 * t.depth,
-          children: /* @__PURE__ */ s(_, { display: "contents", clean: !0, onClick: () => t.toggleRow(), cursor: "pointer", children: e.value })
+          br: e.groupingColumn.pin === "LEFT" ? 1 : void 0,
+          gridColumn: e.groupingColumnGridColumn,
+          pl: 4 * e.depth,
+          children: /* @__PURE__ */ r(p, { display: "contents", clean: !0, onClick: () => e.toggleRow(), cursor: "pointer", children: t.value })
         },
-        e.column.key
+        i
       );
-    if (e.column.key === x)
-      return /* @__PURE__ */ s($, { column: e.column, children: /* @__PURE__ */ s(V, { m: 1 }) }, e.column.key);
-    if (e.column.pin !== t.groupingColumn.pin || e.column.key === E || e.column.key === L)
-      return /* @__PURE__ */ s($, { column: e.column, children: e.value }, e.column.key);
+    if (i === T)
+      return /* @__PURE__ */ r(N, { column: t.column, children: /* @__PURE__ */ r(S, { m: 1 }) }, i);
+    if (o !== e.groupingColumn.pin || i === P || i === b)
+      return /* @__PURE__ */ r(N, { column: t.column, children: t.value }, i);
   }) });
 }
-function Tt(u) {
-  const { row: t } = u;
-  return /* @__PURE__ */ s(b, { className: "grid-row", display: "contents", props: { role: "row" }, children: t.cells.map((e) => /* @__PURE__ */ s($, { column: e.column, children: e.column.key === x ? /* @__PURE__ */ s(V, {}) : e.value }, e.column.key)) });
+function Pe(u) {
+  const { row: e } = u;
+  return /* @__PURE__ */ r(C, { className: "grid-row", display: "contents", props: { role: "row" }, children: e.cells.map((t) => /* @__PURE__ */ r(N, { column: t.column, children: t.column.key === T ? /* @__PURE__ */ r(S, {}) : t.value }, t.column.key)) });
 }
-function Bt(u) {
-  const t = vt(u), { isResizeMode: e } = t, i = N(() => (console.log("render - headers"), t.headerRows.value.map((r) => r.map((d) => /* @__PURE__ */ s(Rt, { column: d }, d.uniqueKey)))), [t.headerRows.value]), n = ut(null), o = at(
-    j.throttle((r) => {
-      var d;
-      (d = n.current) == null || d.setScrollTop(r.target.scrollTop);
+function We(u) {
+  const { grid: e } = u, t = E(() => e.groupColumns.length === 0 ? null : e.groupColumns.map((i, o) => {
+    const s = e.columns.value.leafs.findOrThrow((n) => n.key === i);
+    return /* @__PURE__ */ d(he.Fragment, { children: [
+      ">",
+      /* @__PURE__ */ d(C, { component: "datagrid.columnGroups.item", children: [
+        s.header ?? s.key,
+        /* @__PURE__ */ r(p, { component: "datagrid.columnGroups.item.icon", onClick: () => e.toggleGrouping(s.key), children: /* @__PURE__ */ r(fe, { fill: "currentColor", width: "100%" }) })
+      ] })
+    ] }, i);
+  }), [e.groupColumns]);
+  return /* @__PURE__ */ d(C, { component: "datagrid.columnGroups", position: "relative", children: [
+    /* @__PURE__ */ r(Ie, { grid: e }),
+    t && /* @__PURE__ */ r(H, { width: "1rem", fill: "violet-950" }),
+    t,
+    /* @__PURE__ */ d(C, { position: "absolute", justifySelf: "flex-end", right: 2, top: 2, className: "parent", children: [
+      /* @__PURE__ */ r(C, { position: "absolute", width: 8, height: 8, right: 0, jc: "center", children: /* @__PURE__ */ r(Ce, { fill: "violet-950", width: "1rem" }) }),
+      /* @__PURE__ */ r(ve, { placeholder: "Search...", height: 8, width: 50, zIndex: 1, bgColor: "transparent" })
+    ] })
+  ] });
+}
+function Ie(u) {
+  const { grid: e } = u, [t, i, o] = Y({ event: "mousedown" }), s = E(
+    () => e.columns.value.leafs.filter(
+      (n) => ![P, b, T, f].includes(n.key)
+    ),
+    [e.columns.value.leafs]
+  );
+  return /* @__PURE__ */ d(p, { clean: !0, cursor: "pointer", p: 1, hover: { bgColor: "gray-200", borderRadius: 1 }, onClick: () => i(!t), children: [
+    /* @__PURE__ */ r(ye, { viewBox: "0 0 24 24", width: "20", fill: "currentColor", ...u, children: /* @__PURE__ */ r("path", { d: "M5 6h14M5 12h14M5 18h14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+    t && /* @__PURE__ */ r(
+      J,
+      {
+        bgColor: "white",
+        width: 56,
+        b: 1,
+        borderColor: "gray-300",
+        borderRadius: 1,
+        display: "flex",
+        d: "column",
+        mt: 4,
+        py: 2,
+        translateX: -1,
+        shadow: "medium-shadow",
+        ref: o,
+        overflow: "auto",
+        maxHeight: 100,
+        children: s.map((n) => /* @__PURE__ */ d(
+          p,
+          {
+            clean: !0,
+            display: "flex",
+            gap: 2,
+            p: 3,
+            cursor: "pointer",
+            hover: { bgColor: "gray-200" },
+            onClick: (h) => {
+              h.stopPropagation(), n.toggleVisibility();
+            },
+            children: [
+              /* @__PURE__ */ r(S, { checked: n.isVisible, onChange: () => {
+              }, focus: { outline: 0 } }),
+              n.header ?? n.key
+            ]
+          },
+          n.key
+        ))
+      }
+    )
+  ] });
+}
+function je(u) {
+  const e = _e(u), { isResizeMode: t } = e, i = E(() => (console.log("render - headers"), e.headerRows.value.map((n) => n.map((h) => /* @__PURE__ */ r(xe, { column: h }, h.uniqueKey)))), [e.headerRows.value]), o = de(null), s = ge(
+    q.throttle((n) => {
+      var h;
+      (h = o.current) == null || h.setScrollTop(n.target.scrollTop);
     }, 100),
-    [n.current]
+    [o.current]
   );
-  return console.log("render - data grid"), /* @__PURE__ */ g(p, { component: "datagrid", style: t.sizes.value, props: { role: "presentation" }, children: [
-    /* @__PURE__ */ s(p, { p: 3, bb: 1, borderColor: "gray-400", children: t.groupColumns.length > 0 ? t.groupColumns.join(" > ") : "No grouping" }),
-    /* @__PURE__ */ g(p, { overflowX: "scroll", props: { onScroll: o }, children: [
-      /* @__PURE__ */ s(X, { component: "datagrid.header", variant: { isResizeMode: e }, style: { gridTemplateColumns: t.gridTemplateColumns.value }, children: i }),
-      /* @__PURE__ */ s(Et, { ref: n, grid: t })
+  return console.log("render - data grid"), /* @__PURE__ */ d(m, { component: "datagrid", style: e.sizes.value, props: { role: "presentation" }, children: [
+    /* @__PURE__ */ r(We, { grid: e }),
+    /* @__PURE__ */ d(m, { overflowX: "scroll", props: { onScroll: s }, children: [
+      /* @__PURE__ */ r(j, { component: "datagrid.header", variant: { isResizeMode: t }, style: { gridTemplateColumns: e.gridTemplateColumns.value }, children: i }),
+      /* @__PURE__ */ r(Ne, { ref: o, grid: e })
     ] }),
-    /* @__PURE__ */ g(p, { p: 3, bgColor: "gray-200", children: [
+    /* @__PURE__ */ d(m, { p: 3, bgColor: "gray-200", bt: 1, borderColor: "gray-400", children: [
       "Rows: ",
-      t.rows.value.length
+      u.data.length
     ] })
   ] });
 }
-const Y = 10, J = 25, bt = Y + J * 2;
-function xt(u, t) {
-  const { grid: e } = u, i = gt * e.ROW_HEIGHT, [n, o] = H(0), r = Math.max(0, Math.floor(n / i) - J), d = N(() => (console.log("render - rows"), e.flatRows.value.take(bt, r).map((h) => h instanceof q ? /* @__PURE__ */ s(Lt, { row: h }, h.rowKey) : /* @__PURE__ */ s(Tt, { row: h }, h.rowKey))), [e.flatRows.value, r]);
-  ht(t, () => ({
-    setScrollTop: o
+const Z = 10, ee = 25, Ve = Z + ee * 2;
+function De(u, e) {
+  const { grid: t } = u, i = we * t.ROW_HEIGHT, [o, s] = z(0), n = Math.max(0, Math.floor(o / i) - ee), h = E(() => (console.log("render - rows"), t.flatRows.value.take(Ve, n).map((c) => c instanceof Q ? /* @__PURE__ */ r(Ee, { row: c }, c.rowKey) : /* @__PURE__ */ r(Pe, { row: c }, c.rowKey))), [t.flatRows.value, n]);
+  me(e, () => ({
+    setScrollTop: s
   }));
-  const a = e.flatRows.value.length;
-  return /* @__PURE__ */ s(p, { height: e.ROW_HEIGHT * Y, children: /* @__PURE__ */ s(
-    p,
+  const l = t.flatRows.value.length;
+  return /* @__PURE__ */ r(m, { height: t.ROW_HEIGHT * Z + 4, children: /* @__PURE__ */ r(
+    m,
     {
       style: {
-        height: `${a * i}px`
+        height: `${l * i}px`
       },
-      children: /* @__PURE__ */ s(
-        X,
+      children: /* @__PURE__ */ r(
+        j,
         {
           props: { role: "presentation" },
           width: "max-content",
           minWidth: "fit",
           transition: "none",
           style: {
-            transform: `translateY(${r * i}px)`,
-            gridTemplateColumns: e.gridTemplateColumns.value
+            transform: `translateY(${n * i}px)`,
+            gridTemplateColumns: t.gridTemplateColumns.value
           },
-          children: d
+          children: h
         }
       )
     }
   ) });
 }
-const Et = lt(xt);
+const Ne = ce(De);
 export {
-  Bt as default
+  je as default
 };