@cronocode/react-box 3.1.1 → 3.1.3

package/components/dataGrid.mjs

@@ -1,30 +1,38 @@
-import { jsxs as h, jsx as s, Fragment as Re } from "react/jsx-runtime";
-import m from "../box.mjs";
-import w from "./flex.mjs";
-import ve, { useCallback as P, useMemo as I, useState as U, useRef as xe } from "react";
-import { F as Q, m as M, E as Z, b as ee, D as ke, S as O, P as j, G as F, C as Ge } from "../core.mjs";
-import g from "./button.mjs";
-import V from "./checkbox.mjs";
-import te from "./grid.mjs";
-import { Span as L } from "./semantics.mjs";
-import ie from "./tooltip.mjs";
-import be from "./baseSvg.mjs";
-function _e(a) {
-  const { grid: e } = a;
-  return /* @__PURE__ */ h(w, { component: "datagrid.bottomBar", children: [
-    /* @__PURE__ */ h(m, { children: [
+import { jsxs as h, jsx as s, Fragment as ke } from "react/jsx-runtime";
+import p from "../box.mjs";
+import g from "./flex.mjs";
+import Te, { useCallback as X, useMemo as j, useState as te, useRef as De, useEffect as Q } from "react";
+import { F as le, m as P, E as ae, b as de, D as Se, S as Z, P as ne, G as ee, C as _e } from "../core.mjs";
+import ce from "./grid.mjs";
+import q from "./checkbox.mjs";
+import w from "./button.mjs";
+import { Span as D } from "./semantics.mjs";
+import he from "./tooltip.mjs";
+import Be from "./baseSvg.mjs";
+function Pe(l) {
+  const { grid: e } = l;
+  return /* @__PURE__ */ h(g, { component: "datagrid.bottomBar", children: [
+    /* @__PURE__ */ h(p, { children: [
       "Rows: ",
       e.props.data.length
     ] }),
-    e.props.def.rowSelection && /* @__PURE__ */ h(m, { children: [
+    e.props.def.rowSelection && /* @__PURE__ */ h(p, { children: [
       "Selected: ",
       e.selectedRows.size
     ] })
   ] });
 }
-class D {
+function ue(l) {
+  const { cell: e } = l, t = X(() => {
+    e.grid.toggleRowSelection(e.row.key);
+  }, [e.grid, e.row.key]);
+  return /* @__PURE__ */ s(q, { variant: "datagrid", checked: e.row.selected, onChange: t });
+}
+ue.displayName = "DataGridCellRowSelection";
+const Ee = "NO_PIN";
+class S {
   constructor(e, t, i) {
-    this.def = e, this.grid = t, this.parent = i, this.columns = e.columns?.map((o) => new D(e.pin ? { ...o, pin: e.pin } : o, t, this)) ?? [], this.isLeaf && (this._inlineWidth = this.key == T ? void 0 : this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = e.pin);
+    this.def = e, this.grid = t, this.parent = i, this.columns = e.columns?.map((n) => new S(e.pin ? { ...n, pin: e.pin } : n, t, this)) ?? [], this.isLeaf && (this._inlineWidth = this.key == E ? void 0 : this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = e.pin);
   }
   columns = [];
   get visibleColumns() {
@@ -42,6 +50,9 @@ class D {
   get isLeaf() {
     return this.columns.length === 0;
   }
+  get Cell() {
+    return this.def.Cell;
+  }
   _pin;
   get pin() {
     if (this.isLeaf) return this._pin;
@@ -54,10 +65,10 @@ class D {
   getPinnedColumn(e) {
     if (this.hasPin(e)) {
       if (this.isLeaf) return this;
-      const t = new D({ ...this.def, pin: e }, this.grid, this.parent);
+      const t = new S({ ...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;
+        const n = i.getPinnedColumn(e);
+        return n.parent = t, n;
       }).filter((i) => !!i), t;
     }
   }
@@ -81,22 +92,22 @@ class D {
   get left() {
     let e = 0;
     if (this.parent) {
-      const { visibleColumns: t, left: i } = this.parent, o = t.findIndex((n) => n === this);
-      e += t.sumBy((n, r) => r < o ? n.inlineWidth ?? 0 : 0), e += i;
+      const { visibleColumns: t, left: i } = this.parent, n = t.findIndex((o) => o === this);
+      e += t.sumBy((o, r) => r < n ? o.inlineWidth ?? 0 : 0), e += i;
     } else {
-      const t = this.grid.columns.value.left.filter((o) => o.isVisible), i = t.findIndex((o) => o === this);
-      e += t.sumBy((o, n) => n < i ? o.inlineWidth ?? 0 : 0);
+      const t = this.grid.columns.value.left.filter((n) => n.isVisible), i = t.findIndex((n) => n === this);
+      e += t.sumBy((n, o) => o < i ? n.inlineWidth ?? 0 : 0);
     }
     return e;
   }
   get right() {
     let e = 0;
     if (this.parent) {
-      const { visibleColumns: t } = this.parent, i = t.reverse(), o = i.findIndex((n) => n === this);
-      e += i.sumBy((n, r) => r < o ? n.inlineWidth ?? 0 : 0), e += this.parent.right;
+      const { visibleColumns: t } = this.parent, i = t.reverse(), n = i.findIndex((o) => o === this);
+      e += i.sumBy((o, r) => r < n ? o.inlineWidth ?? 0 : 0), e += this.parent.right;
     } else {
-      const i = this.grid.columns.value.right.filter((n) => n.isVisible).reverse(), o = i.findIndex((n) => n === this);
-      e += i.sumBy((n, r) => r < o ? n.inlineWidth ?? 0 : 0);
+      const i = this.grid.columns.value.right.filter((o) => o.isVisible).reverse(), n = i.findIndex((o) => o === this);
+      e += i.sumBy((o, r) => r < n ? o.inlineWidth ?? 0 : 0);
     }
     return e;
   }
@@ -132,16 +143,16 @@ class D {
   }
   resizeColumn = (e) => {
     this.grid.isResizeMode = !0;
-    const t = e.pageX, { MIN_COLUMN_WIDTH_PX: i, update: o } = this.grid, n = this.leafs.sumBy((u) => u.inlineWidth) - this.leafs.length * i, r = this.leafs.toRecord((u) => [u.key, u.inlineWidth]), c = Q.throttle((u) => {
-      const p = (u.pageX - t) * (this.pin === "RIGHT" ? -1 : 1);
-      this.leafs.forEach((C) => {
-        const x = r[C.key], k = n > 0 ? (x - i) / n * p : p / this.leafs.length, y = Math.round(x + k);
-        C.setWidth(y < i ? i : y);
-      }), this.grid.sizes.clear(), o();
-    }, 40), l = new AbortController(), d = (u) => {
-      l.abort(), this.grid.isResizeMode = !1, o();
+    const t = e.pageX, { MIN_COLUMN_WIDTH_PX: i, update: n } = this.grid, o = this.leafs.sumBy((d) => d.inlineWidth) - this.leafs.length * i, r = this.leafs.toRecord((d) => [d.key, d.inlineWidth]), u = le.throttle((d) => {
+      const m = (d.pageX - t) * (this.pin === "RIGHT" ? -1 : 1);
+      this.leafs.forEach((f) => {
+        const R = r[f.key], y = o > 0 ? (R - i) / o * m : m / this.leafs.length, k = Math.round(R + y);
+        f.setWidth(k < i ? i : k);
+      }), this.grid.sizes.clear(), n();
+    }, 40), a = new AbortController(), c = (d) => {
+      a.abort(), this.grid.isResizeMode = !1, n();
     };
-    window.addEventListener("mousemove", c, l), window.addEventListener("mouseup", d, l);
+    window.addEventListener("mousemove", u, a), window.addEventListener("mouseup", c, a);
   };
   pinColumn = (e) => {
     this.isLeaf ? this._pin = e : this.columns.forEach((t) => t.pinColumn(e)), this.grid.pinColumn(this.uniqueKey, e);
@@ -161,62 +172,15 @@ class D {
     this.grid.toggleColumnVisibility(this.key);
   };
 }
-class Le {
+class Me {
   constructor(e, t, i) {
     this.grid = e, this.row = t, this.column = i;
   }
   get value() {
-    return this.column.key === v ? this.row.rowIndex + 1 : this.column.key === f ? `${this.row.groupValue} (${this.row.count})` : null;
+    return this.column.key === C ? this.row.rowIndex + 1 : this.row.data[this.column.key];
   }
 }
 class oe {
-  constructor(e, t, i, o, n) {
-    this.grid = e, this.groupColumn = t, this.rows = i, this.rowIndex = o, this.groupValue = n, i.forEach((r) => r.parentRow = this);
-  }
-  get key() {
-    return `${this.parentRow?.key ?? ""}${this.groupColumn.key}${this.groupValue}`;
-  }
-  parentRow;
-  get cells() {
-    return this.grid.columns.value.visibleLeafs.map((e) => new Le(this.grid, this, e));
-  }
-  get expanded() {
-    return this.grid.expandedGroupRow.has(this.key);
-  }
-  get depth() {
-    return this.parentRow ? this.parentRow.depth + 1 : 0;
-  }
-  get count() {
-    return this.rows.sumBy((e) => e.count, 0);
-  }
-  get flatRows() {
-    return this.expanded ? [this, ...this.rows.flatMap((e) => e.flatRows)] : [this];
-  }
-  get allRows() {
-    return this.rows.flatMap((e) => e.allRows);
-  }
-  get groupingColumn() {
-    return this.grid.columns.value.leafs.findOrThrow((e) => e.key === f);
-  }
-  get groupingColumnGridColumn() {
-    const { visibleLeafs: e } = this.grid.columns.value, { groupingColumn: t } = this;
-    return e.sumBy(
-      (o) => o.pin === t.pin && o.key !== T && o.key !== _ && o.key !== v ? 1 : 0
-    );
-  }
-  toggleRow() {
-    this.grid.toggleGroupRow(this.key);
-  }
-}
-class De {
-  constructor(e, t, i) {
-    this.grid = e, this.row = t, this.column = i;
-  }
-  get value() {
-    return this.column.key === T ? null : this.column.key === v ? this.row.rowIndex + 1 : this.row.data[this.column.key];
-  }
-}
-class K {
   constructor(e, t, i) {
     this.grid = e, this.data = t, this.rowIndex = i, this.grid = e, this.data = t, this.key = this.grid.getRowKey(t);
   }
@@ -224,7 +188,7 @@ class K {
   parentRow;
   count = 1;
   get cells() {
-    return this.grid.columns.value.visibleLeafs.map((e) => new De(this.grid, this, e));
+    return this.grid.columns.value.visibleLeafs.map((e) => new Me(this.grid, this, e));
   }
   get selected() {
     return this.grid.selectedRows.has(this.key);
@@ -236,83 +200,89 @@ class K {
     return this;
   }
 }
-const Te = "NO_PIN", T = "empty-cell", v = "row-number-cell", _ = "row-selection-cell", f = "grouping-cell";
-class Be {
+const E = "empty-cell", C = "row-number-cell", se = 70, _ = "row-selection-cell", x = "grouping-cell";
+class Ne {
   constructor(e, t) {
-    if (this.props = e, this.update = t, console.debug("\x1B[32m%s\x1B[0m", "[react-box]: DataGrid GridModel ctor"), this._sourceColumns = e.def.columns.map((i) => new D(i, this)), this._sourceColumns.push(new D({ key: T }, this)), e.def.rowSelection) {
-      const i = typeof e.def.rowSelection == "object" && e.def.rowSelection.pinned ? "LEFT" : void 0;
-      this._sourceColumns.unshift(new D({ key: _, pin: i, width: 50, align: "center" }, this));
+    this.props = e, this.update = t, console.debug("\x1B[32m%s\x1B[0m", "[react-box]: DataGrid GridModel ctor");
+  }
+  sourceColumns = P(() => {
+    const { def: e } = this.props, t = [];
+    if (this.groupColumns.size > 0 && t.push(new S({ key: x }, this)), t.push(...e.columns.map((i) => new S(i, this))), t.push(new S({ key: E, Cell: () => null }, this)), e.rowSelection) {
+      const i = typeof e.rowSelection == "object" && e.rowSelection.pinned ? "LEFT" : void 0;
+      t.unshift(
+        new S({ key: _, pin: i, width: 50, align: "center", Cell: ue }, this)
+      );
     }
-    if (e.def.showRowNumber) {
-      const i = typeof e.def.showRowNumber == "object" && e.def.showRowNumber.pinned ? "LEFT" : void 0;
-      this._sourceColumns.unshift(new D({ key: v, pin: i, width: 70, align: "right" }, this));
+    if (e.showRowNumber) {
+      let i, n = se;
+      typeof e.showRowNumber == "object" && (e.showRowNumber.pinned && (i = "LEFT"), n = e.showRowNumber.width ?? se), t.unshift(new S({ key: C, pin: i, width: n, align: "right" }, this));
     }
-  }
-  _sourceColumns = [];
-  columns = M(() => {
+    return t;
+  });
+  columns = P(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid columns memo");
-    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), n = o.filter((l) => l.isLeaf), r = o.filter((l) => l.isLeaf && l.isVisible), c = o.maxBy((l) => l.death) + 1;
+    const e = this.sourceColumns.value.map((a) => a.getPinnedColumn("LEFT")).filter((a) => !!a), t = this.sourceColumns.value.map((a) => a.getPinnedColumn()).filter((a) => !!a), i = this.sourceColumns.value.map((a) => a.getPinnedColumn("RIGHT")).filter((a) => !!a), n = [...e, ...t, ...i].flatMap((a) => a.flatColumns), o = n.filter((a) => a.isLeaf), r = n.filter((a) => a.isLeaf && a.isVisible), u = n.maxBy((a) => a.death) + 1;
     return {
       left: e,
       middle: t,
       right: i,
-      flat: o,
-      leafs: n,
+      flat: n,
+      leafs: o,
       visibleLeafs: r,
-      maxDeath: c
+      maxDeath: u
     };
   });
-  headerRows = M(() => (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid headerRows memo"), this.columns.value.flat.groupBy((t) => t.death).sortBy((t) => t.key).map((t) => {
-    const i = t.values.groupBy((o) => o.pin ?? Te).toRecord((o) => [o.key, o.values]);
+  headerRows = P(() => (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid headerRows memo"), this.columns.value.flat.groupBy((t) => t.death).sortBy((t) => t.key).map((t) => {
+    const i = t.values.groupBy((n) => n.pin ?? Ee).toRecord((n) => [n.key, n.values]);
     return [
-      ...i.LEFT?.filter((o) => o.isVisible) ?? [],
-      ...i.NO_PIN?.filter((o) => o.isVisible) ?? [],
-      ...i.RIGHT?.filter((o) => o.isVisible) ?? []
+      ...i.LEFT?.filter((n) => n.isVisible) ?? [],
+      ...i.NO_PIN?.filter((n) => n.isVisible) ?? [],
+      ...i.RIGHT?.filter((n) => n.isVisible) ?? []
     ];
   })));
-  gridTemplateColumns = M(() => {
+  gridTemplateColumns = P(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid gridTemplateColumns memo");
-    const { visibleLeafs: e } = this.columns.value, t = e.sumBy((r) => r.pin === "RIGHT" ? 1 : 0), i = e.length - t - 1, o = i > 0 ? `repeat(${i}, max-content)` : "", n = t > 0 ? `repeat(${t}, max-content)` : "";
-    return `${o} auto ${n}`;
+    const { visibleLeafs: e } = this.columns.value, t = e.sumBy((r) => r.pin === "RIGHT" ? 1 : 0), i = e.length - t - 1, n = i > 0 ? `repeat(${i}, max-content)` : "", o = t > 0 ? `repeat(${t}, max-content)` : "";
+    return `${n} auto ${o}`;
   });
-  rows = M(() => {
+  rows = P(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid rows memo");
     let e = this.props.data;
     if (this._sortColumn && (e = e.sortBy((t) => t[this._sortColumn], this._sortDirection)), this.groupColumns.size > 0) {
-      const t = (i, o, n) => {
-        const r = o.values().next().value;
-        o.delete(r);
-        const c = this.columns.value.leafs.findOrThrow((l) => l.key === r);
-        return this._sortColumn === f && (i = i.sortBy((l) => l[r], this._sortDirection)), i.groupBy((l) => l[r]).map((l) => {
-          let d;
-          o.size > 0 ? d = t(l.values, new Set(o), n + 1) : d = l.values.map((p, C) => new K(this, p, n + 1 + C));
-          const u = new oe(this, c, d, n, l.key);
-          return n += 1, u.expanded && (n += d.length), u;
+      const t = (i, n, o) => {
+        const r = n.values().next().value;
+        n.delete(r);
+        const u = this.columns.value.leafs.findOrThrow((a) => a.key === r);
+        return this._sortColumn === x && (i = i.sortBy((a) => a[r], this._sortDirection)), i.groupBy((a) => a[r]).map((a) => {
+          let c;
+          n.size > 0 ? c = t(a.values, new Set(n), o + 1) : c = a.values.map((m, f) => new oe(this, m, o + 1 + f));
+          const d = new me(this, u, c, o, a.key);
+          return o += 1, d.expanded && (o += c.length), d;
         });
       };
       return t(e, new Set(this.groupColumns), 0);
     }
-    return e.map((t, i) => new K(this, t, i));
+    return e.map((t, i) => new oe(this, t, i));
   });
-  flatRows = M(() => (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid flatRows memo"), this.rows.value.flatMap((e) => e.flatRows)));
+  flatRows = P(() => (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid flatRows memo"), this.rows.value.flatMap((e) => e.flatRows)));
   get rowHeight() {
     return this.props.def.rowHeight ?? this.DEFAULT_ROW_HEIGHT_PX;
   }
-  sizes = M(() => {
+  sizes = P(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid sizes memo");
-    const e = this.columns.value.flat.reduce((o, n) => {
-      const { inlineWidth: r } = n;
-      return typeof r == "number" && (o[n.widthVarName] = `${n.inlineWidth}px`), n.pin === "LEFT" && (o[n.leftVarName] = `${n.left}px`), n.pin === "RIGHT" && (o[n.rightVarName] = `${n.right}px`), o;
+    const e = this.columns.value.flat.reduce((n, o) => {
+      const { inlineWidth: r } = o;
+      return typeof r == "number" && (n[o.widthVarName] = `${o.inlineWidth}px`), o.pin === "LEFT" && (n[o.leftVarName] = `${o.left}px`), o.pin === "RIGHT" && (n[o.rightVarName] = `${o.right}px`), n;
     }, {});
     e[this.rowHeightVarName] = `${this.rowHeight}px`, e[this.leftEdgeVarName] = `${this.leftEdge}px`;
-    const { visibleLeafs: t } = this.columns.value, i = t.find((o) => o.key === f);
+    const { visibleLeafs: t } = this.columns.value, i = t.find((n) => n.key === x);
     if (i) {
-      const o = t.sumBy((n) => n.pin === i.pin && n.key !== v && n.key !== _ ? n.inlineWidth ?? 0 : 0);
-      e[i.groupColumnWidthVarName] = `${o}px`;
+      const n = t.sumBy((o) => o.pin === i.pin && o.key !== C && o.key !== _ ? o.inlineWidth ?? 0 : 0);
+      e[i.groupColumnWidthVarName] = `${n}px`;
     }
-    return this.groupColumns.forEach((o) => {
-      const n = this.columns.value.leafs.findOrThrow((r) => r.key === o);
-      e[n.groupColumnWidthVarName] = `${t.sumBy((r) => r.pin === n.pin ? r.inlineWidth ?? 0 : 0)}px`;
+    return this.groupColumns.forEach((n) => {
+      const o = this.columns.value.leafs.findOrThrow((r) => r.key === n);
+      e[o.groupColumnWidthVarName] = `${t.sumBy((r) => r.pin === o.pin ? r.inlineWidth ?? 0 : 0)}px`;
     }), e;
   });
   DEFAULT_ROW_HEIGHT_PX = 48;
@@ -338,26 +308,20 @@ class Be {
     if (t.length > 0)
       [this._sortDirection] = t, this._sortColumn = this._sortDirection ? e : void 0;
     else {
-      const { _sortColumn: i, _sortDirection: o } = this;
-      this._sortColumn = i === e && o === "DESC" ? void 0 : e, this._sortDirection = i === e && o === "ASC" ? "DESC" : "ASC";
+      const { _sortColumn: i, _sortDirection: n } = this;
+      this._sortColumn = i === e && n === "DESC" ? void 0 : e, this._sortDirection = i === e && n === "ASC" ? "DESC" : "ASC";
     }
     this.headerRows.clear(), this.rows.clear(), this.flatRows.clear(), this.update();
   };
   pinColumn = (e, t) => {
-    const i = this.columns.value.flat.findOrThrow((o) => o.uniqueKey === e);
+    const i = this.columns.value.flat.findOrThrow((n) => n.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();
   };
   toggleGrouping = (e) => {
-    this.groupColumns = new Set(this.groupColumns), this.hiddenColumns = new Set(this.hiddenColumns), this.groupColumns.has(e) ? (this.groupColumns.delete(e), this.hiddenColumns.delete(e)) : (this.groupColumns.add(e), this.hiddenColumns.add(e));
-    const t = this._sourceColumns.find((i) => i.key === f);
-    if (this.groupColumns.size > 0 && !t) {
-      const i = this._sourceColumns.sumBy((o) => o.key === v || o.key === _ ? 1 : 0);
-      this._sourceColumns.splice(i, 0, new D({ key: f }, this));
-    } else this.groupColumns.size === 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();
+    this.groupColumns = new Set(this.groupColumns), this.hiddenColumns = new Set(this.hiddenColumns), this.groupColumns.has(e) ? (this.groupColumns.delete(e), this.hiddenColumns.delete(e)) : (this.groupColumns.add(e), this.hiddenColumns.add(e)), this.sourceColumns.clear(), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
   };
   unGroupAll = () => {
-    this.groupColumns = /* @__PURE__ */ new Set(), 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();
+    this.groupColumns = /* @__PURE__ */ new Set(), this.sourceColumns.clear(), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
   };
   toggleGroupRow = (e) => {
     this.expandedGroupRow = new Set(this.expandedGroupRow), this.expandedGroupRow.has(e) ? this.expandedGroupRow.delete(e) : this.expandedGroupRow.add(e), this.rows.clear(), this.flatRows.clear(), this.update();
@@ -382,10 +346,10 @@ class Be {
     this.hiddenColumns = new Set(this.hiddenColumns), this.hiddenColumns.has(e) ? this.hiddenColumns.delete(e) : this.hiddenColumns.add(e), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.sizes.clear(), this.update();
   };
   setWidth = (e, t) => {
-    const i = this.columns.value.leafs.find((n) => n.key === e);
+    const i = this.columns.value.leafs.find((o) => o.key === e);
     if (!i)
       throw new Error("Leaf column not found.");
-    i.setWidth(t), this._sourceColumns.flatMap((n) => n.flatColumns).findOrThrow((n) => n.key === e).setWidth(t);
+    i.setWidth(t), this.sourceColumns.value.flatMap((o) => o.flatColumns).findOrThrow((o) => o.key === e).setWidth(t);
   };
   groupColumns = /* @__PURE__ */ new Set();
   hiddenColumns = /* @__PURE__ */ new Set();
@@ -398,161 +362,232 @@ class Be {
     return this._sortDirection;
   }
 }
-function W(a) {
-  const { children: e, column: t, style: i, ...o } = a, { key: n, pin: r, left: c, right: l, isEdge: d, align: u, widthVarName: p, leftVarName: C, rightVarName: x } = t, k = n === T, y = n === v, G = n === _, b = r === "LEFT", R = r === "RIGHT", B = b || R, S = b && c === 0, E = b && d, H = R && d, z = R && l === 0, A = !G && !k;
-  return /* @__PURE__ */ h(
-    w,
+class We {
+  constructor(e, t, i) {
+    this.grid = e, this.row = t, this.column = i;
+  }
+  get value() {
+    return this.column.key === C ? this.row.rowIndex + 1 : this.column.key === x ? `${this.row.groupValue} (${this.row.count})` : null;
+  }
+}
+class me {
+  constructor(e, t, i, n, o) {
+    this.grid = e, this.groupColumn = t, this.rows = i, this.rowIndex = n, this.groupValue = o, i.forEach((r) => r.parentRow = this);
+  }
+  get key() {
+    return `${this.parentRow?.key ?? ""}${this.groupColumn.key}${this.groupValue}`;
+  }
+  parentRow;
+  get cells() {
+    return this.grid.columns.value.visibleLeafs.map((e) => new We(this.grid, this, e));
+  }
+  get selected() {
+    return this.allRows.every((e) => e.selected);
+  }
+  get indeterminate() {
+    return !this.selected && this.allRows.some((e) => e.selected);
+  }
+  get expanded() {
+    return this.grid.expandedGroupRow.has(this.key);
+  }
+  get depth() {
+    return this.parentRow ? this.parentRow.depth + 1 : 0;
+  }
+  get count() {
+    return this.rows.sumBy((e) => e.count, 0);
+  }
+  get flatRows() {
+    return this.expanded ? [this, ...this.rows.flatMap((e) => e.flatRows)] : [this];
+  }
+  get allRows() {
+    return this.rows.flatMap((e) => e.allRows);
+  }
+  get groupingColumn() {
+    return this.grid.columns.value.leafs.findOrThrow((e) => e.key === x);
+  }
+  get groupingColumnGridColumn() {
+    const { visibleLeafs: e } = this.grid.columns.value, { groupingColumn: t } = this;
+    return e.sumBy(
+      (n) => n.pin === t.pin && n.key !== E && n.key !== _ && n.key !== C ? 1 : 0
+    );
+  }
+  toggleRow() {
+    this.grid.toggleGroupRow(this.key);
+  }
+}
+function A(l) {
+  const { children: e, column: t, style: i, ...n } = l, { key: o, pin: r, left: u, right: a, isEdge: c, align: d, widthVarName: m, leftVarName: f, rightVarName: R } = t;
+  "align" in t.def && (n.jc = d);
+  const y = o === C, k = o === _, G = r === "LEFT", b = r === "RIGHT";
+  return /* @__PURE__ */ s(
+    g,
     {
-      component: "datagrid.cell",
+      component: "datagrid.body.cell",
       props: { role: "cell" },
-      variant: { isPinned: B, isFirstLeftPinned: S, isLastLeftPinned: E, isFirstRightPinned: H, isLastRightPinned: z, isRowNumber: y, isRowSelection: G },
-      jc: u,
+      variant: {
+        isPinned: G || b,
+        isFirstLeftPinned: G && u === 0,
+        isLastLeftPinned: G && c,
+        isFirstRightPinned: b && c,
+        isLastRightPinned: b && a === 0,
+        isRowSelection: k,
+        isRowNumber: y
+      },
       style: {
-        width: `var(${p})`,
+        width: `var(${m})`,
         height: `var(${t.grid.rowHeightVarName})`,
-        left: b ? `var(${C})` : void 0,
-        right: R ? `var(${x})` : void 0,
+        left: G ? `var(${f})` : void 0,
+        right: b ? `var(${R})` : void 0,
         ...i
       },
-      ...o,
-      children: [
-        A && /* @__PURE__ */ s(m, { px: 4, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: e }),
-        G && e
-      ]
+      ...n,
+      children: e
     }
   );
 }
-W.displayName = "DataGridCell";
-function ne(a) {
-  const { row: e } = a, t = P(() => {
-    e.grid.toggleRowsSelection(e.allRows.map((i) => i.key));
+A.displayName = "DataGridCell";
+function pe(l) {
+  const { row: e } = l, { selected: t, indeterminate: i, cells: n, groupingColumn: o, groupingColumnGridColumn: r, depth: u, expanded: a } = e, c = X(() => {
+    e.grid.toggleRowsSelection(e.allRows.map((d) => d.key));
   }, []);
-  return /* @__PURE__ */ s(w, { className: "grid-row", display: "contents", props: { role: "rowgroup" }, children: e.cells.map((i) => {
-    const { key: o, pin: n, groupColumnWidthVarName: r } = i.column, c = n === "RIGHT";
-    if (o === f)
+  return /* @__PURE__ */ s(g, { className: "grid-row", selected: t, display: "contents", props: { role: "rowgroup" }, children: n.map((d) => {
+    const { key: m, pin: f, groupColumnWidthVarName: R } = d.column, y = f === "RIGHT";
+    if (m === x)
       return /* @__PURE__ */ s(
-        W,
+        A,
         {
-          column: i.column,
+          column: d.column,
           style: {
-            width: `var(${r})`,
-            right: c ? "0" : void 0
+            width: `var(${R})`,
+            right: y ? "0" : void 0
           },
-          br: e.groupingColumn.pin === "LEFT" ? 1 : void 0,
-          gridColumn: e.groupingColumnGridColumn,
-          pl: 4 * e.depth,
-          children: /* @__PURE__ */ h(g, { clean: !0, onClick: () => e.toggleRow(), cursor: "pointer", display: "flex", gap: 1, ai: "center", children: [
-            /* @__PURE__ */ s(Z, { fill: "currentColor", width: "14px", height: "14px", rotate: e.expanded ? 0 : -90 }),
-            i.value
-          ] })
+          br: o.pin === "LEFT" ? 1 : void 0,
+          gridColumn: r,
+          pl: 4 * u,
+          overflow: "auto",
+          children: /* @__PURE__ */ s(p, { textWrap: "nowrap", px: 3, children: /* @__PURE__ */ h(w, { clean: !0, onClick: () => e.toggleRow(), cursor: "pointer", display: "flex", gap: 1, ai: "center", children: [
+            /* @__PURE__ */ s(ae, { fill: "currentColor", width: "14px", height: "14px", rotate: a ? 0 : -90 }),
+            d.value
+          ] }) })
         },
-        o
+        m
       );
-    if (o === _) {
-      const l = e.allRows, d = l.every((p) => p.selected), u = !d && l.some((p) => p.selected);
-      return /* @__PURE__ */ s(W, { column: i.column, children: /* @__PURE__ */ s(V, { variant: "datagrid", m: 1, checked: d, indeterminate: u, onChange: t }) }, o);
-    }
-    if (n !== e.groupingColumn.pin || o === T || o === v)
-      return /* @__PURE__ */ s(W, { column: i.column, children: i.value }, o);
+    if (m === _)
+      return /* @__PURE__ */ s(A, { column: d.column, children: /* @__PURE__ */ s(q, { variant: "datagrid", m: 1, checked: t, indeterminate: i, onChange: c }) }, m);
+    if (f !== o.pin || m === C || m === E)
+      return /* @__PURE__ */ s(A, { column: d.column, px: m === C ? 3 : void 0, children: d.value }, m);
   }) });
 }
-ne.displayName = "DataGridGroupRow";
-function se(a) {
-  const { row: e } = a, t = P((i) => {
-    e.grid.toggleRowSelection(e.key);
-  }, []);
-  return /* @__PURE__ */ s(w, { className: "grid-row", display: "contents", props: { role: "row" }, children: e.cells.map((i) => /* @__PURE__ */ s(W, { column: i.column, children: i.column.key === _ ? /* @__PURE__ */ s(V, { variant: "datagrid", checked: e.selected, onChange: t }) : i.value }, i.column.key)) });
+pe.displayName = "DataGridGroupRow";
+function ge(l) {
+  const { cell: e } = l;
+  return /* @__PURE__ */ s(g, { height: "fit", width: "fit", overflow: "auto", ai: "center", jc: e.column.align, children: /* @__PURE__ */ s(p, { px: 3, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: e.value }) });
+}
+ge.displayName = "DataGridCellText";
+function fe(l) {
+  const { row: e } = l, { selected: t } = e;
+  return /* @__PURE__ */ s(g, { className: "grid-row", selected: t, display: "contents", props: { role: "row" }, children: e.cells.map((i) => /* @__PURE__ */ s(A, { column: i.column, children: i.column.Cell ? /* @__PURE__ */ s(i.column.Cell, { cell: i }) : /* @__PURE__ */ s(ge, { cell: i }) }, i.column.key)) });
 }
-se.displayName = "DataGridRow";
-const Se = 10, J = 20;
-function re(a) {
-  const { grid: e, scrollTop: t } = a, i = e.flatRows.value.length, o = Math.max(0, Math.floor(t / e.rowHeight) - J), n = e.props.def.visibleRowsCount ?? Se, r = I(() => {
-    console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render rows");
-    const c = n + J * 2;
-    return e.flatRows.value.take(c, o).map((d) => d instanceof oe ? /* @__PURE__ */ s(ne, { row: d }, d.key) : /* @__PURE__ */ s(se, { row: d }, d.key));
-  }, [e.flatRows.value, o]);
-  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render DataGridBody"), /* @__PURE__ */ s(m, { style: { height: e.rowHeight * n + e.rowHeight / 5 }, children: /* @__PURE__ */ s(
-    m,
+fe.displayName = "DataGridRow";
+const He = 10, re = 20;
+function we(l) {
+  const { grid: e, scrollTop: t } = l, i = e.flatRows.value.length, n = Math.max(0, Math.floor(t / e.rowHeight) - re), o = e.props.def.visibleRowsCount ?? He, r = e.rowHeight * o + e.rowHeight / 5, u = j(() => {
+    if (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render rows"), e.props.data.length === 0)
+      return /* @__PURE__ */ s(g, { jc: "center", ai: "center", gridColumn: "full-row", style: { height: r }, children: e.props.loading ? "loading..." : "empty" });
+    const a = o + re * 2;
+    return e.flatRows.value.take(a, n).map((d) => d instanceof me ? /* @__PURE__ */ s(pe, { row: d }, d.key) : /* @__PURE__ */ s(fe, { row: d }, d.key));
+  }, [e.flatRows.value, e.props.data.length, e.props.loading, n, r, o]);
+  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render DataGridBody"), /* @__PURE__ */ s(p, { style: { height: r }, children: /* @__PURE__ */ s(
+    p,
     {
       style: {
         height: `${i * e.rowHeight}px`
       },
       children: /* @__PURE__ */ s(
-        te,
+        ce,
         {
+          component: "datagrid.body",
           width: "max-content",
           minWidth: "fit",
           transition: "none",
           style: {
-            transform: `translateY(${o * e.rowHeight}px)`,
+            transform: `translateY(${n * e.rowHeight}px)`,
             gridTemplateColumns: e.gridTemplateColumns.value
           },
-          children: r
+          children: u
         }
       )
     }
   ) });
 }
-re.displayName = "DataGridBody";
-function le(a) {
-  const { column: e } = a, [t, i, o] = ee({ hideOnScroll: !0, event: "mousedown" }), [n, r] = U({ top: 0, left: 0 }), c = I(() => n.left > window.innerWidth / 2, [n.left]), l = e.isLeaf && (e.grid.sortColumn !== e.key || e.grid.sortDirection === "DESC"), d = e.isLeaf && (e.grid.sortColumn !== e.key || e.grid.sortDirection === "ASC"), u = e.isLeaf && e.grid.sortColumn === e.key, p = e.pin !== "LEFT", C = e.pin !== "RIGHT", x = !!e.pin, k = e.isLeaf && e.key !== f, y = e.isLeaf && e.key === f, G = l || d || u, b = p || C || x;
-  return /* @__PURE__ */ s(w, { position: "absolute", right: e.pin === "RIGHT" ? 2.5 : 4, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu", onClick: () => i(!t), children: [
-    /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.icon", children: /* @__PURE__ */ s(ke, { fill: "currentColor" }) }),
-    t && /* @__PURE__ */ h(
-      ie,
-      {
-        component: "datagrid.header.cell.contextMenu.tooltip",
-        variant: { openLeft: c },
-        onPositionChange: r,
-        ref: o,
-        children: [
-          l && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("ASC"), children: [
-            /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(O, { width: "100%", fill: "currentColor" }) }),
-            "Sort Ascending"
-          ] }),
-          d && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("DESC"), children: [
-            /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(O, { width: "100%", fill: "currentColor", rotate: 180 }) }),
-            "Sort Descending"
-          ] }),
-          u && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn(void 0), children: [
-            /* @__PURE__ */ s(m, { width: 4 }),
-            "Clear Sort"
-          ] }),
-          G && (b || k || y) && /* @__PURE__ */ s(m, { bb: 1, my: 2, borderColor: "gray-300" }),
-          p && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("LEFT"), children: [
-            /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(j, { width: "100%", fill: "currentColor" }) }),
-            "Pin Left"
-          ] }),
-          C && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("RIGHT"), children: [
-            /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(j, { width: "100%", fill: "currentColor", rotate: -90 }) }),
-            "Pin Right"
-          ] }),
-          x && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn(), children: [
-            /* @__PURE__ */ s(m, { width: 4 }),
-            "Unpin"
-          ] }),
-          G && b && (k || y) && /* @__PURE__ */ s(m, { bb: 1, my: 2, borderColor: "gray-300" }),
-          k && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: e.toggleGrouping, children: [
-            /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(F, { width: "100%", fill: "currentColor" }) }),
-            /* @__PURE__ */ h(m, { textWrap: "nowrap", children: [
-              "Group by ",
-              e.header ?? e.key
-            ] })
-          ] }),
-          y && /* @__PURE__ */ h(g, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: e.grid.unGroupAll, children: [
-            /* @__PURE__ */ s(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(F, { width: "100%", fill: "currentColor" }) }),
-            /* @__PURE__ */ s(m, { textWrap: "nowrap", children: "Un-Group All" })
-          ] })
-        ]
-      }
-    )
-  ] }) });
+we.displayName = "DataGridBody";
+function Ce(l) {
+  const { column: e } = l, { key: t, pin: i, left: n, right: o, isEdge: r, isLeaf: u, align: a, header: c, grid: d } = e, [m, f, R] = de({ hideOnScroll: !0, event: "mousedown" }), [y, k] = te({ top: 0, left: 0 }), G = j(() => y.left > window.innerWidth / 2, [y.left]), b = u && (d.sortColumn !== t || d.sortDirection === "DESC"), L = u && (d.sortColumn !== t || d.sortDirection === "ASC"), v = u && d.sortColumn === t, T = i !== "LEFT", B = i !== "RIGHT", N = !!i, W = u && t !== x, H = u && t === x, F = b || L || v, O = T || B || N, $ = a === "right" ? 2 : void 0, Y = a === "right" ? void 0 : i === "RIGHT" ? 2.5 : 4, K = t === E, I = t === C, J = t === _, V = i === "LEFT", z = i === "RIGHT";
+  return /* @__PURE__ */ s(g, { position: "absolute", left: $, right: Y, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ h(
+    w,
+    {
+      component: "datagrid.header.cell.contextMenu",
+      onClick: () => f(!m),
+      variant: { isPinned: V || i === "RIGHT", isFirstLeftPinned: V && n === 0, isLastLeftPinned: V && r, isFirstRightPinned: z && r, isLastRightPinned: z && o === 0, isSortable: u && !K && !I && !J, isRowNumber: I },
+      children: [
+        /* @__PURE__ */ s(D, { component: "datagrid.header.cell.contextMenu.icon", children: /* @__PURE__ */ s(Se, { fill: "currentColor" }) }),
+        m && /* @__PURE__ */ h(
+          he,
+          {
+            component: "datagrid.header.cell.contextMenu.tooltip",
+            variant: { openLeft: G },
+            onPositionChange: k,
+            ref: R,
+            children: [
+              b && /* @__PURE__ */ h(w, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("ASC"), children: [
+                /* @__PURE__ */ s(D, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(Z, { width: "100%", fill: "currentColor" }) }),
+                "Sort Ascending"
+              ] }),
+              L && /* @__PURE__ */ h(w, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("DESC"), children: [
+                /* @__PURE__ */ s(D, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(Z, { width: "100%", fill: "currentColor", rotate: 180 }) }),
+                "Sort Descending"
+              ] }),
+              v && /* @__PURE__ */ h(w, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn(void 0), children: [
+                /* @__PURE__ */ s(p, { width: 4 }),
+                "Clear Sort"
+              ] }),
+              F && (O || W || H) && /* @__PURE__ */ s(p, { bb: 1, my: 2, borderColor: "gray-300" }),
+              T && /* @__PURE__ */ h(w, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("LEFT"), children: [
+                /* @__PURE__ */ s(D, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(ne, { width: "100%", fill: "currentColor" }) }),
+                "Pin Left"
+              ] }),
+              B && /* @__PURE__ */ h(w, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("RIGHT"), children: [
+                /* @__PURE__ */ s(D, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(ne, { width: "100%", fill: "currentColor", rotate: -90 }) }),
+                "Pin Right"
+              ] }),
+              N && /* @__PURE__ */ h(w, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn(), children: [
+                /* @__PURE__ */ s(p, { width: 4 }),
+                "Unpin"
+              ] }),
+              F && O && (W || H) && /* @__PURE__ */ s(p, { bb: 1, my: 2, borderColor: "gray-300" }),
+              W && /* @__PURE__ */ h(w, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: e.toggleGrouping, children: [
+                /* @__PURE__ */ s(D, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(ee, { width: "100%", fill: "currentColor" }) }),
+                /* @__PURE__ */ h(p, { textWrap: "nowrap", children: [
+                  "Group by ",
+                  c ?? t
+                ] })
+              ] }),
+              H && /* @__PURE__ */ h(w, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: d.unGroupAll, children: [
+                /* @__PURE__ */ s(D, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ s(ee, { width: "100%", fill: "currentColor" }) }),
+                /* @__PURE__ */ s(p, { textWrap: "nowrap", children: "Un-Group All" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
 }
-le.displayName = "DataGridHeaderCellContextMenu";
-function ae(a) {
-  const { column: e } = a;
+Ce.displayName = "DataGridHeaderCellContextMenu";
+function Re(l) {
+  const { column: e } = l;
   return /* @__PURE__ */ s(
-    w,
+    g,
     {
       height: "fit",
       ai: "center",
@@ -561,129 +596,131 @@ function ae(a) {
       left: e.pin !== "RIGHT" ? void 0 : 0,
       py: 3,
       children: /* @__PURE__ */ s(
-        m,
+        p,
         {
           cursor: "col-resize",
           px: 0.75,
           className: "resizer",
           height: "fit",
           props: { onMouseDown: e.resizeColumn, onTouchStart: e.resizeColumn },
-          children: /* @__PURE__ */ s(m, { component: "datagrid.header.cell.resizer" })
+          children: /* @__PURE__ */ s(p, { component: "datagrid.header.cell.resizer" })
         }
       )
     }
   );
 }
-ae.displayName = "DataGridHeaderCellResizer";
-function de(a) {
-  const { column: e } = a, { key: t, pin: i, left: o, right: n, isEdge: r, isLeaf: c, leafs: l, grid: d, header: u, gridRows: p, widthVarName: C, leftVarName: x, rightVarName: k, inlineWidth: y } = e, G = t === T, b = t === f, R = t === v, B = t === _, S = i === "LEFT", E = i === "RIGHT", H = S || i === "RIGHT", z = S && o === 0, A = S && r, ge = E && r, fe = E && n === 0, X = c && !G && !R && !B, we = c ? 1 : l.length, Ce = !R && !B, q = !R && !B, Y = P(() => {
-    d.toggleSelectAllRows();
-  }, []), ye = I(() => {
-    if (R) return null;
-    if (B) {
-      const N = d.selectedRows.size === d.props.data.length, $ = !N && d.selectedRows.size > 0;
-      return /* @__PURE__ */ s(V, { variant: "datagrid", m: 1, indeterminate: $, checked: N, onChange: Y });
+Re.displayName = "DataGridHeaderCellResizer";
+function ye(l) {
+  const { column: e } = l, { key: t, pin: i, left: n, right: o, isEdge: r, isLeaf: u, leafs: a, grid: c, header: d, gridRows: m, widthVarName: f, leftVarName: R, rightVarName: y, inlineWidth: k } = e, G = t === E, b = t === x, L = t === C, v = t === _, T = i === "LEFT", B = i === "RIGHT", N = T || i === "RIGHT", W = T && n === 0, H = T && r, F = B && r, O = B && o === 0, $ = u && !G && !L && !v, Y = u ? 1 : a.length, K = !L && !v, I = !L && !v, J = v ? void 0 : e.align === "right" ? 10 : 3, V = v ? void 0 : e.align === "center" ? 3 : void 0, z = X(() => {
+    c.toggleSelectAllRows();
+  }, []), ie = j(() => {
+    if (L) return null;
+    if (v) {
+      const M = c.selectedRows.size === c.props.data.length, U = !M && c.selectedRows.size > 0;
+      return /* @__PURE__ */ s(q, { variant: "datagrid", m: 1, indeterminate: U, checked: M, onChange: z });
     }
     if (b) {
-      if (d.groupColumns.size === 1) {
-        const N = d.columns.value.leafs.findOrThrow(($) => $.key === d.groupColumns.values().next().value);
-        return N.header ?? N.key;
+      if (c.groupColumns.size === 1) {
+        const M = c.columns.value.leafs.findOrThrow((U) => U.key === c.groupColumns.values().next().value);
+        return M.header ?? M.key;
       }
       return "Group";
     }
-    return u ?? t;
-  }, [d.groupColumns, d.selectedRows, Y]);
+    return d ?? t;
+  }, [c.groupColumns, c.selectedRows, z]);
   return /* @__PURE__ */ s(
-    w,
+    g,
     {
+      props: { role: "columnheader" },
       component: "datagrid.header.cell",
-      variant: { isRowNumber: R, isPinned: H, isFirstLeftPinned: z, isLastLeftPinned: A, isFirstRightPinned: ge, isLastRightPinned: fe, isSortable: X },
-      gridRow: p,
-      gridColumn: we,
+      variant: { isPinned: N, isFirstLeftPinned: W, isLastLeftPinned: H, isFirstRightPinned: F, isLastRightPinned: O, isSortable: $, isRowNumber: L },
+      gridRow: m,
+      gridColumn: Y,
       style: {
-        width: `var(${C})`,
-        left: S ? `var(${x})` : void 0,
-        right: E ? `var(${k})` : void 0
+        width: `var(${f})`,
+        left: T ? `var(${R})` : void 0,
+        right: B ? `var(${y})` : void 0
       },
-      children: !G && /* @__PURE__ */ h(Re, { children: [
-        /* @__PURE__ */ s(w, { width: "fit", height: "fit", jc: e.align, props: { onClick: X ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ h(
-          w,
+      children: !G && /* @__PURE__ */ h(ke, { children: [
+        /* @__PURE__ */ s(g, { width: "fit", height: "fit", jc: e.align, props: { onClick: $ ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ h(
+          g,
           {
             overflow: "hidden",
-            position: c ? void 0 : "sticky",
+            position: u ? void 0 : "sticky",
             ai: "center",
             transition: "none",
-            pl: e.align ? void 0 : 4,
+            pl: J,
+            pr: V,
             style: {
-              left: i ? void 0 : `var(${d.leftEdgeVarName})`
+              left: i ? void 0 : `var(${c.leftEdgeVarName})`
             },
             children: [
-              /* @__PURE__ */ s(m, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: ye }),
-              t === d.sortColumn && /* @__PURE__ */ s(m, { pl: (y ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ s(O, { width: "16px", rotate: d.sortDirection === "ASC" ? 0 : 180, fill: "currentColor" }) }),
-              q && /* @__PURE__ */ s(m, { minWidth: 10 })
+              /* @__PURE__ */ s(p, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: ie }),
+              t === c.sortColumn && /* @__PURE__ */ s(p, { pl: (k ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ s(Z, { width: "16px", rotate: c.sortDirection === "ASC" ? 0 : 180, fill: "currentColor" }) }),
+              I && /* @__PURE__ */ s(p, { minWidth: e.align === "right" ? 4 : 10 })
             ]
           }
         ) }),
-        Ce && /* @__PURE__ */ s(ae, { column: e }),
-        q && /* @__PURE__ */ s(le, { column: e })
+        K && /* @__PURE__ */ s(Re, { column: e }),
+        I && /* @__PURE__ */ s(Ce, { column: e })
       ] })
     }
   );
 }
-de.displayName = "DataGridHeaderCell";
-function he(a) {
-  const { grid: e } = a, { isResizeMode: t } = e;
-  return /* @__PURE__ */ s(te, { component: "datagrid.header", variant: { isResizeMode: t }, style: { gridTemplateColumns: e.gridTemplateColumns.value }, children: e.headerRows.value.map((i) => i.map((o) => /* @__PURE__ */ s(de, { column: o }, o.uniqueKey))) });
+ye.displayName = "DataGridHeaderCell";
+function ve(l) {
+  const { grid: e } = l, { isResizeMode: t } = e;
+  return /* @__PURE__ */ s(ce, { component: "datagrid.header", variant: { isResizeMode: t }, style: { gridTemplateColumns: e.gridTemplateColumns.value }, children: e.headerRows.value.map((i) => i.map((n) => /* @__PURE__ */ s(ye, { column: n }, n.uniqueKey))) });
 }
-he.displayName = "DataGridHeader";
-function ce(a) {
-  const { grid: e } = a, [t, i] = U(0), o = P(
-    Q.throttle((n) => {
-      i(n.target.scrollTop);
+ve.displayName = "DataGridHeader";
+function xe(l) {
+  const { grid: e } = l, [t, i] = te(0), n = X(
+    le.throttle((o) => {
+      i(o.target.scrollTop);
     }, 100),
     []
   );
-  return /* @__PURE__ */ h(m, { overflowX: "scroll", props: { onScroll: o }, children: [
-    /* @__PURE__ */ s(he, { grid: e }),
-    /* @__PURE__ */ s(re, { grid: e, scrollTop: t })
+  return /* @__PURE__ */ h(p, { overflowX: "scroll", props: { onScroll: n }, children: [
+    /* @__PURE__ */ s(ve, { grid: e }),
+    /* @__PURE__ */ s(we, { grid: e, scrollTop: t })
   ] });
 }
-ce.displayName = "DataGridContent";
-function ue(a) {
-  const { grid: e } = a;
-  return e.groupColumns.size === 0 ? null : /* @__PURE__ */ h(w, { component: "datagrid.topBar.columnGroups", children: [
-    /* @__PURE__ */ s(L, { component: "datagrid.topBar.columnGroups.icon", children: /* @__PURE__ */ s(F, { width: "100%", fill: "currentColor" }) }),
+xe.displayName = "DataGridContent";
+function Ge(l) {
+  const { grid: e } = l;
+  return e.groupColumns.size === 0 ? null : /* @__PURE__ */ h(g, { component: "datagrid.topBar.columnGroups", children: [
+    /* @__PURE__ */ s(D, { component: "datagrid.topBar.columnGroups.icon", children: /* @__PURE__ */ s(ee, { width: "100%", fill: "currentColor" }) }),
     Array.from(e.groupColumns, (t) => {
-      const i = e.columns.value.leafs.findOrThrow((o) => o.key === t);
-      return /* @__PURE__ */ h(ve.Fragment, { children: [
-        /* @__PURE__ */ s(Z, { fill: "currentColor", width: "14px", height: "14px", rotate: -90 }),
-        /* @__PURE__ */ h(w, { component: "datagrid.topBar.columnGroups.item", children: [
+      const i = e.columns.value.leafs.findOrThrow((n) => n.key === t);
+      return /* @__PURE__ */ h(Te.Fragment, { children: [
+        /* @__PURE__ */ s(ae, { fill: "currentColor", width: "14px", height: "14px", rotate: -90 }),
+        /* @__PURE__ */ h(g, { component: "datagrid.topBar.columnGroups.item", children: [
           i.header ?? i.key,
-          /* @__PURE__ */ s(g, { component: "datagrid.topBar.columnGroups.item.icon", onClick: () => e.toggleGrouping(i.key), children: /* @__PURE__ */ s(Ge, { fill: "currentColor", width: "100%" }) })
+          /* @__PURE__ */ s(w, { component: "datagrid.topBar.columnGroups.item.icon", onClick: () => e.toggleGrouping(i.key), children: /* @__PURE__ */ s(_e, { fill: "currentColor", width: "100%" }) })
         ] })
       ] }, t);
     })
   ] });
 }
-ue.displayName = "DataGridColumnGroups";
-function me(a) {
-  const { grid: e } = a, [t, i, o] = ee({ event: "mousedown" }), n = I(
+Ge.displayName = "DataGridColumnGroups";
+function be(l) {
+  const { grid: e } = l, [t, i, n] = de({ event: "mousedown" }), o = j(
     () => e.columns.value.leafs.filter(
-      (r) => ![T, v, _, f].includes(r.key)
+      (r) => ![E, C, _, x].includes(r.key)
     ),
     [e.columns.value.leafs]
   );
-  return /* @__PURE__ */ h(g, { component: "datagrid.topBar.contextMenu", onClick: () => i(!t), children: [
-    /* @__PURE__ */ s(be, { viewBox: "0 0 24 24", width: "20", fill: "currentColor", ...a, children: /* @__PURE__ */ s("path", { d: "M5 6h14M5 12h14M5 18h14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
-    t && /* @__PURE__ */ s(ie, { component: "datagrid.topBar.contextMenu.tooltip", ref: o, children: n.map((r) => /* @__PURE__ */ h(
-      g,
+  return /* @__PURE__ */ h(w, { component: "datagrid.topBar.contextMenu", onClick: () => i(!t), children: [
+    /* @__PURE__ */ s(Be, { viewBox: "0 0 24 24", width: "20", fill: "currentColor", ...l, children: /* @__PURE__ */ s("path", { d: "M5 6h14M5 12h14M5 18h14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+    t && /* @__PURE__ */ s(he, { component: "datagrid.topBar.contextMenu.tooltip", ref: n, children: o.map((r) => /* @__PURE__ */ h(
+      w,
       {
         component: "datagrid.topBar.contextMenu.tooltip.item",
-        onClick: (c) => {
-          c.stopPropagation(), r.toggleVisibility();
+        onClick: (u) => {
+          u.stopPropagation(), r.toggleVisibility();
         },
         children: [
-          /* @__PURE__ */ s(V, { variant: "datagrid", checked: r.isVisible, onChange: () => {
+          /* @__PURE__ */ s(q, { variant: "datagrid", checked: r.isVisible, onChange: () => {
           }, focus: { outline: 0 } }),
           r.header ?? r.key
         ]
@@ -692,28 +729,34 @@ function me(a) {
     )) })
   ] });
 }
-me.displayName = "DataGridTopBarContextMenu";
-function pe(a) {
-  const { grid: e } = a;
-  return /* @__PURE__ */ h(w, { component: "datagrid.topBar", position: "relative", children: [
-    /* @__PURE__ */ s(me, { grid: e }),
-    /* @__PURE__ */ s(ue, { grid: e })
+be.displayName = "DataGridTopBarContextMenu";
+function Le(l) {
+  const { grid: e } = l;
+  return /* @__PURE__ */ h(g, { component: "datagrid.topBar", position: "relative", children: [
+    /* @__PURE__ */ s(be, { grid: e }),
+    /* @__PURE__ */ s(Ge, { grid: e })
   ] });
 }
-pe.displayName = "DataGridTopBar";
-function Me(a) {
-  const [e, t] = U(0), i = xe();
-  return i.current || (i.current = new Be(a, () => t((o) => o + 1))), i.current;
+Le.displayName = "DataGridTopBar";
+function Ie(l) {
+  const [e, t] = te(0), i = De();
+  return i.current || (i.current = new Ne(l, () => t((n) => n + 1))), Q(() => {
+    i.current.props = l, i.current.rows.clear(), i.current.flatRows.clear(), i.current.update();
+  }, [l.data]), Q(() => {
+    i.current.props = l, i.current.sourceColumns.clear(), i.current.columns.clear(), i.current.headerRows.clear(), i.current.gridTemplateColumns.clear(), i.current.rows.clear(), i.current.flatRows.clear(), i.current.sizes.clear(), i.current.update();
+  }, [l.def]), Q(() => {
+    i.current.props = l, i.current.update();
+  }, [l.loading]), i.current;
 }
-function Ee(a) {
-  const e = Me(a);
-  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render"), /* @__PURE__ */ h(m, { component: "datagrid", style: e.sizes.value, props: { role: "presentation" }, children: [
-    /* @__PURE__ */ s(pe, { grid: e }),
-    /* @__PURE__ */ s(ce, { grid: e }),
-    /* @__PURE__ */ s(_e, { grid: e })
+function Ve(l) {
+  const e = Ie(l);
+  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render"), /* @__PURE__ */ h(p, { component: "datagrid", style: e.sizes.value, props: { role: "presentation" }, children: [
+    e.props.def.topBar && /* @__PURE__ */ s(Le, { grid: e }),
+    /* @__PURE__ */ s(xe, { grid: e }),
+    e.props.def.bottomBar && /* @__PURE__ */ s(Pe, { grid: e })
   ] });
 }
-Ee.displayName = "DataGrid";
+Ve.displayName = "DataGrid";
 export {
-  Ee as default
+  Ve as default
 };