@cronocode/react-box 3.1.3 → 3.1.7

package/components/dataGrid.mjs

@@ -1,43 +1,57 @@
-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: [
+import { jsxs as d, jsx as n, Fragment as Be } from "react/jsx-runtime";
+import Ee, { useCallback as k, useMemo as X, useState as M, useRef as O, useEffect as z, useLayoutEffect as Pe } from "react";
+import g from "../box.mjs";
+import m from "./flex.mjs";
+import me from "./grid.mjs";
+import { F as Ie, m as P, f as ae, E as ge, b as Me, D as He, S as oe, P as ce, G as se, d as ze } from "../core.mjs";
+import le from "./checkbox.mjs";
+import D from "./button.mjs";
+import fe from "./baseSvg.mjs";
+import b from "./dropdown.mjs";
+import j from "./textbox.mjs";
+import { Span as I } from "./semantics.mjs";
+import Ae from "./tooltip.mjs";
+function Oe(s) {
+  const { grid: e } = s, { filtered: t, total: i } = e.filterStats, r = e.hasActiveFilters;
+  return /* @__PURE__ */ d(m, { component: "datagrid.bottomBar", children: [
+    /* @__PURE__ */ d(g, { children: [
       "Rows: ",
-      e.props.data.length
+      r ? `${t} / ${i}` : i
     ] }),
-    e.props.def.rowSelection && /* @__PURE__ */ h(p, { children: [
+    e.props.def.rowSelection && /* @__PURE__ */ d(g, { children: [
       "Selected: ",
       e.selectedRows.size
-    ] })
+    ] }),
+    r && /* @__PURE__ */ n(g, { color: "blue-600", cursor: "pointer", hover: { textDecoration: "underline" }, props: { onClick: e.clearAllFilters }, children: "Clear filters" })
   ] });
 }
-function ue(l) {
-  const { cell: e } = l, t = X(() => {
+function Ce(s) {
+  const { cell: e } = s, t = k(() => {
     e.grid.toggleRowSelection(e.row.key);
   }, [e.grid, e.row.key]);
-  return /* @__PURE__ */ s(q, { variant: "datagrid", checked: e.row.selected, onChange: t });
+  return /* @__PURE__ */ n(le, { variant: "datagrid", checked: e.row.selected, onChange: t });
 }
-ue.displayName = "DataGridCellRowSelection";
-const Ee = "NO_PIN";
-class S {
+Ce.displayName = "DataGridCellRowSelection";
+const $e = "NO_PIN";
+class A {
   constructor(e, t, i) {
-    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);
+    if (this.def = e, this.grid = t, this.parent = i, this.columns = e.columns?.map((r) => new A(e.pin ? { ...r, pin: e.pin } : r, t, this)) ?? [], this.isLeaf) {
+      const r = this.grid.columnWidths.get(this.key);
+      this._inlineWidth = this.key == V ? void 0 : r ?? this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = e.pin;
+    }
   }
   columns = [];
   get visibleColumns() {
     return this.columns.filter((e) => e.isVisible);
   }
+  get isFirstLeaf() {
+    const { leafs: e } = this;
+    return e.length > 0 && e.at(0) === this;
+  }
+  get isLastLeaf() {
+    const { leafs: e } = this;
+    return e.length > 0 && e.at(-1) === this;
+  }
   get key() {
     return this.def.key;
   }
@@ -53,6 +67,25 @@ class S {
   get Cell() {
     return this.def.Cell;
   }
+  get filterable() {
+    return this.def.filterable;
+  }
+  /** Whether sorting is enabled for this column. Column-level setting takes priority over grid-level. */
+  get sortable() {
+    return this.def.sortable !== void 0 ? this.def.sortable : this.grid.props.def.sortable !== !1;
+  }
+  /** Whether resizing is enabled for this column. Column-level setting takes priority over grid-level. */
+  get resizable() {
+    return this.def.resizable !== void 0 ? this.def.resizable : this.grid.props.def.resizable !== !1;
+  }
+  /** Whether column participates in flex distribution. Default true unless explicitly false. */
+  get isFlexible() {
+    return this.def.flexible !== !1;
+  }
+  /** The base width before flex calculation (what user set or DEFAULT). */
+  get baseWidth() {
+    return this._inlineWidth ?? this.grid.DEFAULT_COLUMN_WIDTH_PX;
+  }
   _pin;
   get pin() {
     if (this.isLeaf) return this._pin;
@@ -65,10 +98,10 @@ class S {
   getPinnedColumn(e) {
     if (this.hasPin(e)) {
       if (this.isLeaf) return this;
-      const t = new S({ ...this.def, pin: e }, this.grid, this.parent);
+      const t = new A({ ...this.def, pin: e }, this.grid, this.parent);
       return t.columns = this.columns.filter((i) => i.hasPin(e)).map((i) => {
-        const n = i.getPinnedColumn(e);
-        return n.parent = t, n;
+        const r = i.getPinnedColumn(e);
+        return r.parent = t, r;
       }).filter((i) => !!i), t;
     }
   }
@@ -84,7 +117,8 @@ class S {
   }
   _inlineWidth;
   get inlineWidth() {
-    if (this.isLeaf) return this._inlineWidth;
+    if (this.isLeaf)
+      return this.grid.getFlexWidth(this.key) ?? this._inlineWidth;
     const e = this.visibleColumns.map((t) => t.inlineWidth).filter((t) => typeof t == "number");
     if (e.length !== 0)
       return e.sumBy((t) => t);
@@ -92,22 +126,22 @@ class S {
   get left() {
     let e = 0;
     if (this.parent) {
-      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;
+      const { visibleColumns: t, left: i } = this.parent, r = t.findIndex((o) => o === this);
+      e += t.sumBy((o, a) => a < r ? o.inlineWidth ?? 0 : 0), e += i;
     } else {
-      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);
+      const t = this.grid.columns.value.left.filter((r) => r.isVisible), i = t.findIndex((r) => r === this);
+      e += t.sumBy((r, o) => o < i ? r.inlineWidth ?? 0 : 0);
     }
     return e;
   }
   get right() {
     let e = 0;
     if (this.parent) {
-      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;
+      const { visibleColumns: t } = this.parent, i = t.reverse(), r = i.findIndex((o) => o === this);
+      e += i.sumBy((o, a) => a < r ? o.inlineWidth ?? 0 : 0), e += this.parent.right;
     } else {
-      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);
+      const i = this.grid.columns.value.right.filter((o) => o.isVisible).reverse(), r = i.findIndex((o) => o === this);
+      e += i.sumBy((o, a) => a < r ? o.inlineWidth ?? 0 : 0);
     }
     return e;
   }
@@ -142,17 +176,16 @@ class S {
     return this.isLeaf ? this.grid.columns.value.maxDeath - this.death : 1;
   }
   resizeColumn = (e) => {
-    this.grid.isResizeMode = !0;
-    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);
+    const t = e.pageX, { MIN_COLUMN_WIDTH_PX: i, update: r } = this.grid, o = this.leafs.toRecord((c) => [c.key, c.inlineWidth ?? c.baseWidth]), a = this.leafs.sumBy((c) => o[c.key]) - this.leafs.length * i, h = Ie.throttle((c) => {
+      const p = (c.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();
+        const y = o[f.key], v = a > 0 ? (y - i) / a * p : p / this.leafs.length, R = Math.round(y + v);
+        f.setWidth(R < i ? i : R);
+      }), this.grid.flexWidths.clear(), this.grid.sizes.clear(), r();
+    }, 40), u = new AbortController(), l = (c) => {
+      u.abort(), r();
     };
-    window.addEventListener("mousemove", u, a), window.addEventListener("mouseup", c, a);
+    window.addEventListener("mousemove", h, u), window.addEventListener("mouseup", l, u);
   };
   pinColumn = (e) => {
     this.isLeaf ? this._pin = e : this.columns.forEach((t) => t.pinColumn(e)), this.grid.pinColumn(this.uniqueKey, e);
@@ -172,15 +205,15 @@ class S {
     this.grid.toggleColumnVisibility(this.key);
   };
 }
-class Me {
+class Ue {
   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.row.data[this.column.key];
+    return this.column.key === G ? this.row.rowIndex + 1 : this.row.data[this.column.key];
   }
 }
-class oe {
+class ue {
   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);
   }
@@ -188,7 +221,7 @@ class oe {
   parentRow;
   count = 1;
   get cells() {
-    return this.grid.columns.value.visibleLeafs.map((e) => new Me(this.grid, this, e));
+    return this.grid.columns.value.visibleLeafs.map((e) => new Ue(this.grid, this, e));
   }
   get selected() {
     return this.grid.selectedRows.has(this.key);
@@ -200,69 +233,200 @@ class oe {
     return this;
   }
 }
-const E = "empty-cell", C = "row-number-cell", se = 70, _ = "row-selection-cell", x = "grouping-cell";
-class Ne {
+const V = "empty-cell", G = "row-number-cell", he = 70, _ = "row-selection-cell", T = "grouping-cell";
+class je {
   constructor(e, t) {
     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) {
+    if (this.groupColumns.size > 0 && t.push(new A({ key: T }, this)), t.push(...e.columns.map((i) => new A(i, 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)
+        new A({ key: _, pin: i, width: 50, align: "center", Cell: Ce }, 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));
+      let i, r = he;
+      typeof e.showRowNumber == "object" && (e.showRowNumber.pinned && (i = "LEFT"), r = e.showRowNumber.width ?? he), t.unshift(new A({ key: G, pin: i, width: r, align: "right" }, this));
     }
     return t;
   });
   columns = P(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid columns memo");
-    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;
+    const e = this.sourceColumns.value.map((l) => l.getPinnedColumn("LEFT")).filter((l) => !!l), t = this.sourceColumns.value.map((l) => l.getPinnedColumn()).filter((l) => !!l), i = this.sourceColumns.value.map((l) => l.getPinnedColumn("RIGHT")).filter((l) => !!l), r = [...e, ...t, ...i].flatMap((l) => l.flatColumns), o = r.filter((l) => l.isLeaf), a = r.filter((l) => l.isLeaf && l.isVisible), h = a.filter(
+      (l) => ![V, G, _, T].includes(l.key)
+    ), u = r.maxBy((l) => l.death) + 1;
     return {
       left: e,
       middle: t,
       right: i,
-      flat: n,
+      flat: r,
       leafs: o,
-      visibleLeafs: r,
+      visibleLeafs: a,
+      userVisibleLeafs: h,
       maxDeath: u
     };
   });
   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]);
+    const i = t.values.groupBy((r) => r.pin ?? $e).toRecord((r) => [r.key, r.values]);
     return [
-      ...i.LEFT?.filter((n) => n.isVisible) ?? [],
-      ...i.NO_PIN?.filter((n) => n.isVisible) ?? [],
-      ...i.RIGHT?.filter((n) => n.isVisible) ?? []
+      ...i.LEFT?.filter((r) => r.isVisible) ?? [],
+      ...i.NO_PIN?.filter((r) => r.isVisible) ?? [],
+      ...i.RIGHT?.filter((r) => r.isVisible) ?? []
     ];
   })));
   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, n = i > 0 ? `repeat(${i}, max-content)` : "", o = t > 0 ? `repeat(${t}, max-content)` : "";
-    return `${n} auto ${o}`;
+    const { visibleLeafs: e } = this.columns.value, t = e.sumBy((a) => a.pin === "RIGHT" ? 1 : 0), i = e.length - t, r = i > 0 ? `repeat(${i}, max-content)` : "", o = t > 0 ? `repeat(${t}, max-content)` : "";
+    return `${r} ${o}`.trim();
   });
+  // ========== Filtering ==========
+  _globalFilterValue = "";
+  get globalFilterValue() {
+    return this.props.globalFilterValue ?? this._globalFilterValue;
+  }
+  _columnFilters = {};
+  get columnFilters() {
+    return this.props.columnFilters ?? this._columnFilters;
+  }
+  /**
+   * Apply global filter (fuzzy search across all or specified columns)
+   */
+  applyGlobalFilter(e) {
+    const t = this.globalFilterValue.trim();
+    if (!t) return e;
+    const { globalFilterKeys: i } = this.props.def, r = i ?? this.columns.value.leafs.filter(
+      (o) => o.key !== V && o.key !== G && o.key !== _ && o.key !== T
+    ).map((o) => o.key);
+    return e.filter((o) => r.some((a) => {
+      const h = o[a];
+      return h == null ? !1 : ae(t, String(h));
+    }));
+  }
+  /**
+   * Apply column-level filters
+   */
+  applyColumnFilters(e) {
+    const t = this.columnFilters, i = Object.keys(t);
+    return i.length === 0 ? e : e.filter((r) => i.every((o) => {
+      const a = t[o];
+      if (!a) return !0;
+      const h = r[o];
+      return this.matchesFilter(h, a);
+    }));
+  }
+  /**
+   * Check if a cell value matches a filter
+   */
+  matchesFilter(e, t) {
+    switch (t.type) {
+      case "text":
+        return t.value.trim() ? e == null ? !1 : ae(t.value, String(e)) : !0;
+      case "number": {
+        if (e == null) return !1;
+        const i = typeof e == "number" ? e : parseFloat(String(e));
+        if (isNaN(i)) return !1;
+        switch (t.operator) {
+          case "eq":
+            return i === t.value;
+          case "ne":
+            return i !== t.value;
+          case "gt":
+            return i > t.value;
+          case "gte":
+            return i >= t.value;
+          case "lt":
+            return i < t.value;
+          case "lte":
+            return i <= t.value;
+          case "between":
+            return t.valueTo !== void 0 ? i >= t.value && i <= t.valueTo : i >= t.value;
+          default:
+            return !0;
+        }
+      }
+      case "multiselect":
+        return t.values.length === 0 ? !0 : t.values.includes(e);
+      default:
+        return !0;
+    }
+  }
+  /**
+   * Get filtered data (applies global filter then column filters)
+   */
+  get filteredData() {
+    let e = this.props.data;
+    return this.props.def.globalFilter && (e = this.applyGlobalFilter(e)), e = this.applyColumnFilters(e), e;
+  }
+  /**
+   * Set global filter value
+   */
+  setGlobalFilter = (e) => {
+    this.props.onGlobalFilterChange ? this.props.onGlobalFilterChange(e) : this._globalFilterValue = e, this.rows.clear(), this.flatRows.clear(), this.update();
+  };
+  /**
+   * Set a single column filter
+   */
+  setColumnFilter = (e, t) => {
+    const i = { ...this.columnFilters };
+    t === void 0 ? delete i[e] : i[e] = t, this.props.onColumnFiltersChange ? this.props.onColumnFiltersChange(i) : this._columnFilters = i, this.rows.clear(), this.flatRows.clear(), this.update();
+  };
+  /**
+   * Clear all column filters
+   */
+  clearColumnFilters = () => {
+    this.props.onColumnFiltersChange ? this.props.onColumnFiltersChange({}) : this._columnFilters = {}, this.rows.clear(), this.flatRows.clear(), this.update();
+  };
+  /**
+   * Clear all filters (global + column)
+   */
+  clearAllFilters = () => {
+    this.setGlobalFilter(""), this.clearColumnFilters();
+  };
+  /**
+   * Get unique values for a column (used for multiselect filter options)
+   */
+  getColumnUniqueValues = (e) => {
+    const t = /* @__PURE__ */ new Set();
+    return this.props.data.forEach((i) => {
+      const r = i[e];
+      r !== void 0 && t.add(r);
+    }), Array.from(t).sort((i, r) => i === null ? 1 : r === null ? -1 : typeof i == "string" && typeof r == "string" ? i.localeCompare(r) : typeof i == "number" && typeof r == "number" ? i - r : String(i).localeCompare(String(r)));
+  };
+  /**
+   * Check if any filter is active
+   */
+  get hasActiveFilters() {
+    return this.globalFilterValue.trim() !== "" || Object.keys(this.columnFilters).length > 0;
+  }
+  /**
+   * Get count of filtered rows vs total rows
+   */
+  get filterStats() {
+    return {
+      filtered: this.filteredData.length,
+      total: this.props.data.length
+    };
+  }
   rows = P(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid rows memo");
-    let e = this.props.data;
+    let e = this.filteredData;
     if (this._sortColumn && (e = e.sortBy((t) => t[this._sortColumn], this._sortDirection)), this.groupColumns.size > 0) {
-      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;
+      const t = (i, r, o) => {
+        const a = r.values().next().value;
+        r.delete(a);
+        const h = this.columns.value.leafs.findOrThrow((u) => u.key === a);
+        return this._sortColumn === T && (i = i.sortBy((u) => u[a], this._sortDirection)), i.groupBy((u) => u[a]).map((u) => {
+          let l;
+          r.size > 0 ? l = t(u.values, new Set(r), o + 1) : l = u.values.map((p, f) => new ue(this, p, o + 1 + f));
+          const c = new we(this, h, l, o, u.key);
+          return o += 1, c.expanded && (o += l.length), c;
         });
       };
       return t(e, new Set(this.groupColumns), 0);
     }
-    return e.map((t, i) => new oe(this, t, i));
+    return e.map((t, i) => new ue(this, t, i));
   });
   flatRows = P(() => (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid flatRows memo"), this.rows.value.flatMap((e) => e.flatRows)));
   get rowHeight() {
@@ -270,25 +434,53 @@ class Ne {
   }
   sizes = P(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid sizes memo");
-    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;
+    const e = this.columns.value.flat.reduce((r, o) => {
+      const { inlineWidth: a } = o;
+      return typeof a == "number" && (r[o.widthVarName] = `${o.inlineWidth}px`), o.pin === "LEFT" && (r[o.leftVarName] = `${o.left}px`), o.pin === "RIGHT" && (r[o.rightVarName] = `${o.right}px`), r;
     }, {});
     e[this.rowHeightVarName] = `${this.rowHeight}px`, e[this.leftEdgeVarName] = `${this.leftEdge}px`;
-    const { visibleLeafs: t } = this.columns.value, i = t.find((n) => n.key === x);
+    const { visibleLeafs: t } = this.columns.value, i = t.find((r) => r.key === T);
     if (i) {
-      const n = t.sumBy((o) => o.pin === i.pin && o.key !== C && o.key !== _ ? o.inlineWidth ?? 0 : 0);
-      e[i.groupColumnWidthVarName] = `${n}px`;
+      const r = t.sumBy((o) => o.pin === i.pin && o.key !== G && o.key !== _ ? o.inlineWidth ?? 0 : 0);
+      e[i.groupColumnWidthVarName] = `${r}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`;
+    return this.groupColumns.forEach((r) => {
+      const o = this.columns.value.leafs.findOrThrow((a) => a.key === r);
+      e[o.groupColumnWidthVarName] = `${t.sumBy((a) => a.pin === o.pin ? a.inlineWidth ?? 0 : 0)}px`;
     }), e;
   });
+  // ========== Flexible Column Sizing ==========
+  _containerWidth = 0;
+  get containerWidth() {
+    return this._containerWidth;
+  }
+  setContainerWidth = (e) => {
+    this._containerWidth !== e && (this._containerWidth = e, this.flexWidths.clear(), this.sizes.clear(), this.update());
+  };
+  flexWidths = P(() => {
+    console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid flexWidths memo");
+    const e = this._containerWidth;
+    if (e <= 0) return {};
+    const t = this.columns.value.visibleLeafs.filter((c) => c.key !== V), i = (c) => !c.isFlexible || this.columnWidths.has(c.key), r = t.filter(i).sumBy((c) => c.baseWidth), o = t.filter((c) => !i(c)), a = o.sumBy((c) => c.baseWidth), h = e - r;
+    if (h <= a)
+      return o.toRecord((c) => [c.key, c.baseWidth]);
+    const u = {};
+    let l = 0;
+    return o.forEach((c, p) => {
+      if (p === o.length - 1)
+        u[c.key] = h - l;
+      else {
+        const f = Math.floor(c.baseWidth / a * h);
+        u[c.key] = f, l += f;
+      }
+    }), u;
+  });
+  getFlexWidth(e) {
+    return this.flexWidths.value[e];
+  }
   DEFAULT_ROW_HEIGHT_PX = 48;
   MIN_COLUMN_WIDTH_PX = 48;
   DEFAULT_COLUMN_WIDTH_PX = 200;
-  isResizeMode = !1;
   expandedGroupRow = /* @__PURE__ */ new Set();
   selectedRows = /* @__PURE__ */ new Set();
   get leftEdge() {
@@ -308,20 +500,21 @@ class Ne {
     if (t.length > 0)
       [this._sortDirection] = t, this._sortColumn = this._sortDirection ? e : void 0;
     else {
-      const { _sortColumn: i, _sortDirection: n } = this;
-      this._sortColumn = i === e && n === "DESC" ? void 0 : e, this._sortDirection = i === e && n === "ASC" ? "DESC" : "ASC";
+      const { _sortColumn: i, _sortDirection: r } = this;
+      this._sortColumn = i === e && r === "DESC" ? void 0 : e, this._sortDirection = i === e && r === "ASC" ? "DESC" : "ASC";
     }
     this.headerRows.clear(), this.rows.clear(), this.flatRows.clear(), this.update();
   };
   pinColumn = (e, t) => {
-    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();
+    const i = this.columns.value.flat.findOrThrow((r) => r.uniqueKey === e);
+    i.pin !== t && i.pinColumn(t), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.flexWidths.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)), this.sourceColumns.clear(), 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.flexWidths.clear(), this.sizes.clear(), this.update();
   };
   unGroupAll = () => {
-    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();
+    const e = new Set(this.groupColumns);
+    this.groupColumns = /* @__PURE__ */ new Set(), this.hiddenColumns = new Set(Array.from(this.hiddenColumns).filter((t) => !e.has(t))), this.sourceColumns.clear(), this.columns.clear(), this.headerRows.clear(), this.gridTemplateColumns.clear(), this.rows.clear(), this.flatRows.clear(), this.flexWidths.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();
@@ -343,16 +536,14 @@ class Ne {
     this.toggleRowsSelection(this.props.data.map((e) => this.getRowKey(e)));
   };
   toggleColumnVisibility = (e) => {
-    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();
+    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.flexWidths.clear(), this.sizes.clear(), this.update();
   };
   setWidth = (e, t) => {
-    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.value.flatMap((o) => o.flatColumns).findOrThrow((o) => o.key === e).setWidth(t);
+    this.columnWidths.set(e, t);
   };
   groupColumns = /* @__PURE__ */ new Set();
   hiddenColumns = /* @__PURE__ */ new Set();
+  columnWidths = /* @__PURE__ */ new Map();
   _sortColumn;
   get sortColumn() {
     return this._sortColumn;
@@ -362,24 +553,24 @@ class Ne {
     return this._sortDirection;
   }
 }
-class We {
+class qe {
   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;
+    return this.column.key === G ? this.row.rowIndex + 1 : this.column.key === T ? `${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);
+class we {
+  constructor(e, t, i, r, o) {
+    this.grid = e, this.groupColumn = t, this.rows = i, this.rowIndex = r, this.groupValue = o, i.forEach((a) => a.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));
+    return this.grid.columns.value.visibleLeafs.map((e) => new qe(this.grid, this, e));
   }
   get selected() {
     return this.allRows.every((e) => e.selected);
@@ -403,178 +594,428 @@ class me {
     return this.rows.flatMap((e) => e.allRows);
   }
   get groupingColumn() {
-    return this.grid.columns.value.leafs.findOrThrow((e) => e.key === x);
+    return this.grid.columns.value.leafs.findOrThrow((e) => e.key === T);
   }
   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
+      (r) => r.pin === t.pin && r.key !== V && r.key !== _ && r.key !== G ? 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,
+function q(s) {
+  const { children: e, column: t, style: i, ...r } = s, { key: o, pin: a, left: h, right: u, isEdge: l, align: c, widthVarName: p, leftVarName: f, rightVarName: y, isFirstLeaf: v, isLastLeaf: R } = t;
+  "align" in t.def && (r.jc = c);
+  const N = o === G, S = o === _, x = o === V, L = a === "LEFT", C = a === "RIGHT";
+  return /* @__PURE__ */ n(
+    m,
     {
       component: "datagrid.body.cell",
       props: { role: "cell" },
       variant: {
-        isPinned: G || b,
-        isFirstLeftPinned: G && u === 0,
-        isLastLeftPinned: G && c,
-        isFirstRightPinned: b && c,
-        isLastRightPinned: b && a === 0,
-        isRowSelection: k,
-        isRowNumber: y
+        isPinned: L || C,
+        isFirstLeftPinned: L && h === 0,
+        isLastLeftPinned: L && l,
+        isFirstRightPinned: C && l,
+        isLastRightPinned: C && u === 0,
+        isRowSelection: S,
+        isRowNumber: N,
+        isFirstLeaf: v,
+        isLastLeaf: R,
+        isEmptyCell: x
       },
       style: {
-        width: `var(${m})`,
+        width: `var(${p})`,
         height: `var(${t.grid.rowHeightVarName})`,
-        left: G ? `var(${f})` : void 0,
-        right: b ? `var(${R})` : void 0,
+        left: L ? `var(${f})` : void 0,
+        right: C ? `var(${y})` : void 0,
         ...i
       },
-      ...n,
+      ...r,
       children: e
     }
   );
 }
-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));
+q.displayName = "DataGridCell";
+function ye(s) {
+  const { row: e } = s, { selected: t, indeterminate: i, cells: r, groupingColumn: o, groupingColumnGridColumn: a, depth: h, expanded: u } = e, l = k(() => {
+    e.grid.toggleRowsSelection(e.allRows.map((c) => c.key));
   }, []);
-  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(
-        A,
+  return /* @__PURE__ */ n(m, { className: "grid-row", selected: t, display: "contents", props: { role: "rowgroup" }, children: r.map((c) => {
+    const { key: p, pin: f, groupColumnWidthVarName: y } = c.column, v = f === "RIGHT";
+    if (p === T)
+      return /* @__PURE__ */ n(
+        q,
         {
-          column: d.column,
+          column: c.column,
           style: {
-            width: `var(${R})`,
-            right: y ? "0" : void 0
+            width: `var(${y})`,
+            right: v ? "0" : void 0
           },
           br: o.pin === "LEFT" ? 1 : void 0,
-          gridColumn: r,
-          pl: 4 * u,
+          gridColumn: a,
+          pl: 4 * h,
           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
+          children: /* @__PURE__ */ n(g, { textWrap: "nowrap", px: 3, children: /* @__PURE__ */ d(D, { clean: !0, onClick: () => e.toggleRow(), cursor: "pointer", display: "flex", gap: 1, ai: "center", children: [
+            /* @__PURE__ */ n(ge, { fill: "currentColor", width: "14px", height: "14px", rotate: u ? 0 : -90 }),
+            c.value
           ] }) })
         },
-        m
+        p
       );
-    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);
+    if (p === _)
+      return /* @__PURE__ */ n(q, { column: c.column, children: /* @__PURE__ */ n(le, { variant: "datagrid", m: 1, checked: t, indeterminate: i, onChange: l }) }, p);
+    if (f !== o.pin || p === G || p === V)
+      return /* @__PURE__ */ n(q, { column: c.column, px: p === G ? 3 : void 0, children: c.value }, p);
   }) });
 }
-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 }) });
+ye.displayName = "DataGridGroupRow";
+function ve(s) {
+  const { cell: e } = s;
+  return /* @__PURE__ */ n(m, { height: "fit", width: "fit", overflow: "auto", ai: "center", jc: e.column.align, children: /* @__PURE__ */ n(g, { 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)) });
+ve.displayName = "DataGridCellText";
+function be(s) {
+  const { row: e } = s, { selected: t } = e;
+  return /* @__PURE__ */ n(m, { className: "grid-row", selected: t, display: "contents", props: { role: "row" }, children: e.cells.map((i) => /* @__PURE__ */ n(q, { column: i.column, children: i.column.Cell ? /* @__PURE__ */ n(i.column.Cell, { cell: i }) : /* @__PURE__ */ n(ve, { cell: i }) }, i.column.key)) });
 }
-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(() => {
+be.displayName = "DataGridRow";
+const Xe = 10, de = 20;
+function Re(s) {
+  const { grid: e, scrollTop: t } = s, i = e.flatRows.value.length, r = Math.max(0, Math.floor(t / e.rowHeight) - de), o = e.props.def.visibleRowsCount ?? Xe, a = e.rowHeight * o + e.rowHeight / 5, h = X(() => {
     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,
+      return /* @__PURE__ */ n(m, { jc: "center", ai: "center", gridColumn: "full-row", style: { height: a }, children: e.props.loading ? "loading..." : "empty" });
+    const u = o + de * 2;
+    return e.flatRows.value.take(u, r).map((c) => c instanceof we ? /* @__PURE__ */ n(ye, { row: c }, c.key) : /* @__PURE__ */ n(be, { row: c }, c.key));
+  }, [e.flatRows.value, e.props.data.length, e.props.loading, r, a, o]);
+  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render DataGridBody"), /* @__PURE__ */ n(g, { style: { height: a }, children: /* @__PURE__ */ n(
+    g,
     {
       style: {
         height: `${i * e.rowHeight}px`
       },
-      children: /* @__PURE__ */ s(
-        ce,
+      children: /* @__PURE__ */ n(
+        me,
         {
           component: "datagrid.body",
           width: "max-content",
           minWidth: "fit",
           transition: "none",
           style: {
-            transform: `translateY(${n * e.rowHeight}px)`,
+            transform: `translate3d(0, ${r * e.rowHeight}px, 0)`,
+            willChange: "transform",
             gridTemplateColumns: e.gridTemplateColumns.value
           },
-          children: u
+          children: h
         }
       )
     }
   ) });
 }
-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,
+Re.displayName = "DataGridBody";
+function Ye() {
+  return /* @__PURE__ */ n(
+    m,
+    {
+      d: "column",
+      ai: "center",
+      jc: "center",
+      gap: 4,
+      py: 16,
+      px: 6,
+      bgColor: "gray-50",
+      borderRadius: 4,
+      theme: { dark: { bgColor: "gray-900" } },
+      children: /* @__PURE__ */ d(m, { d: "column", ai: "center", gap: 3, children: [
+        /* @__PURE__ */ n(
+          g,
+          {
+            width: 16,
+            height: 16,
+            borderRadius: 999,
+            bgColor: "gray-200",
+            theme: { dark: { bgColor: "gray-700" } },
+            display: "flex",
+            ai: "center",
+            jc: "center",
+            children: /* @__PURE__ */ n(fe, { viewBox: "0 0 24 24", width: "40", fill: "currentColor", color: "gray-400", theme: { dark: { color: "gray-500" } }, children: /* @__PURE__ */ n(
+              "path",
+              {
+                fillRule: "evenodd",
+                clipRule: "evenodd",
+                d: "M3 6a3 3 0 013-3h12a3 3 0 013 3v12a3 3 0 01-3 3H6a3 3 0 01-3-3V6zm3-1a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V6a1 1 0 00-1-1H6zm2 3a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h6a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h4a1 1 0 110 2H9a1 1 0 01-1-1z"
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ d(m, { d: "column", ai: "center", gap: 1, children: [
+          /* @__PURE__ */ n(g, { fontSize: 18, fontWeight: 600, color: "gray-900", theme: { dark: { color: "gray-50" } }, children: "No Columns Selected" }),
+          /* @__PURE__ */ n(g, { fontSize: 14, color: "gray-500", textAlign: "center", theme: { dark: { color: "gray-400" } }, children: "Select at least one column from the columns menu to display data" })
+        ] })
+      ] })
+    }
+  );
+}
+function pe({ column: s, grid: e }) {
+  const t = e.columnFilters[s.key], i = t?.type === "text" ? t.value : "", [r, o] = M(i), a = O(null);
+  z(() => () => {
+    a.current && clearTimeout(a.current);
+  }, []);
+  const h = k(
+    (c) => {
+      const p = c.target.value;
+      o(p), a.current && clearTimeout(a.current), a.current = setTimeout(() => {
+        p.trim() ? e.setColumnFilter(s.key, { type: "text", value: p }) : e.setColumnFilter(s.key, void 0), a.current = null;
+      }, 300);
+    },
+    [e, s.key]
+  ), u = k(() => {
+    o(""), e.setColumnFilter(s.key, void 0);
+  }, [e, s.key]), l = typeof s.def.filterable == "object" ? s.def.filterable : {};
+  return /* @__PURE__ */ d(m, { ai: "center", position: "relative", width: "fit", children: [
+    /* @__PURE__ */ n(j, { width: "fit", variant: "compact", placeholder: l.placeholder ?? "Filter...", value: r, onChange: h }),
+    r && /* @__PURE__ */ n(m, { position: "absolute", right: 2, top: "1/2", translateY: "-1/2", cursor: "pointer", props: { onClick: u }, children: /* @__PURE__ */ n(g, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
+  ] });
+}
+function Ke({ column: s, grid: e }) {
+  const t = e.columnFilters[s.key], i = t?.type === "number" ? t.value : "", r = t?.type === "number" ? t.operator : "eq", o = t?.type === "number" ? t.valueTo : "", [a, h] = M(i), [u, l] = M(r), [c, p] = M(o ?? ""), f = O(null), y = O(null);
+  z(() => () => {
+    f.current && clearTimeout(f.current), y.current && clearTimeout(y.current);
+  }, []);
+  const v = typeof s.def.filterable == "object" ? s.def.filterable : {}, R = k(
+    (C, w, F) => {
+      const W = typeof w == "number" ? w : parseFloat(w);
+      if (isNaN(W) || w === "") {
+        e.setColumnFilter(s.key, void 0);
+        return;
+      }
+      const B = {
+        type: "number",
+        operator: C,
+        value: W
+      };
+      if (C === "between" && F !== void 0 && F !== "") {
+        const E = typeof F == "number" ? F : parseFloat(String(F));
+        isNaN(E) || (B.valueTo = E);
+      }
+      e.setColumnFilter(s.key, B);
+    },
+    [e, s.key]
+  ), N = k(
+    (C) => {
+      const w = C.target.value;
+      h(w), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+        R(u, w, c), f.current = null;
+      }, 300);
+    },
+    [u, c, R]
+  ), S = k(
+    (C) => {
+      l(C), R(C, a, c);
+    },
+    [a, c, R]
+  ), x = k(
+    (C) => {
+      const w = C.target.value;
+      p(w), y.current && clearTimeout(y.current), y.current = setTimeout(() => {
+        R(u, a, w), y.current = null;
+      }, 300);
+    },
+    [u, a, R]
+  ), L = k(() => {
+    h(""), p(""), l("eq"), e.setColumnFilter(s.key, void 0);
+  }, [e, s.key]);
+  return /* @__PURE__ */ d(m, { ai: u === "between" ? "start" : "center", gap: 1, width: "fit", children: [
+    /* @__PURE__ */ d(
+      b,
+      {
+        value: u,
+        variant: "compact",
+        onChange: (C) => C && S(C),
+        minWidth: 6,
+        hideIcon: !0,
+        children: [
+          /* @__PURE__ */ n(b.Item, { value: "eq", children: "=" }),
+          /* @__PURE__ */ n(b.Item, { value: "ne", children: "≠" }),
+          /* @__PURE__ */ n(b.Item, { value: "gt", children: ">" }),
+          /* @__PURE__ */ n(b.Item, { value: "gte", children: "≥" }),
+          /* @__PURE__ */ n(b.Item, { value: "lt", children: "<" }),
+          /* @__PURE__ */ n(b.Item, { value: "lte", children: "≤" }),
+          /* @__PURE__ */ n(b.Item, { value: "between", children: "↔" })
+        ]
+      }
+    ),
+    u === "between" ? /* @__PURE__ */ d(m, { d: "column", gap: 1, flex1: !0, children: [
+      /* @__PURE__ */ d(m, { ai: "center", position: "relative", flex1: !0, children: [
+        /* @__PURE__ */ n(
+          j,
+          {
+            type: "number",
+            variant: "compact",
+            placeholder: v.placeholder ?? "From",
+            value: a,
+            onChange: N,
+            width: "fit",
+            step: v.step
+          }
+        ),
+        (a !== "" || c !== "") && /* @__PURE__ */ n(m, { position: "absolute", right: 2, top: "1/2", translateY: "-1/2", cursor: "pointer", props: { onClick: L }, children: /* @__PURE__ */ n(g, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
+      ] }),
+      /* @__PURE__ */ n(m, { ai: "center", flex1: !0, children: /* @__PURE__ */ n(
+        j,
+        {
+          type: "number",
+          variant: "compact",
+          placeholder: "To",
+          value: c,
+          onChange: x,
+          width: "fit",
+          step: v.step
+        }
+      ) })
+    ] }) : /* @__PURE__ */ d(m, { ai: "center", position: "relative", flex1: !0, children: [
+      /* @__PURE__ */ n(
+        j,
+        {
+          type: "number",
+          variant: "compact",
+          placeholder: v.placeholder ?? "Value",
+          value: a,
+          onChange: N,
+          width: "fit",
+          step: v.step
+        }
+      ),
+      a !== "" && /* @__PURE__ */ n(m, { position: "absolute", right: 2, top: "1/2", translateY: "-1/2", cursor: "pointer", props: { onClick: L }, children: /* @__PURE__ */ n(g, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
+    ] })
+  ] });
+}
+function Je({ column: s, grid: e }) {
+  const t = e.columnFilters[s.key], i = t?.type === "multiselect" ? t.values : [], r = typeof s.def.filterable == "object" ? s.def.filterable : {}, o = X(() => r.options ? r.options : e.getColumnUniqueValues(s.key).map((u) => ({
+    label: u === null ? "(empty)" : String(u),
+    value: u
+  })), [r.options, e, s.key]), a = k(
+    (h, u) => {
+      u.length === 0 ? e.setColumnFilter(s.key, void 0) : e.setColumnFilter(s.key, { type: "multiselect", values: u });
+    },
+    [e, s.key]
+  );
+  return /* @__PURE__ */ d(
+    b,
+    {
+      multiple: !0,
+      showCheckbox: !0,
+      isSearchable: !0,
+      searchPlaceholder: "Search...",
+      value: i,
+      width: "fit",
+      minWidth: 0,
+      onChange: a,
+      variant: "compact",
+      children: [
+        /* @__PURE__ */ n(b.Unselect, { children: "Clear" }),
+        /* @__PURE__ */ n(b.SelectAll, { children: "Select All" }),
+        o.map((h) => /* @__PURE__ */ n(b.Item, { value: h.value, ai: "center", gap: 2, children: h.label }, String(h.value)))
+      ]
+    }
+  );
+}
+function xe(s) {
+  const { column: e, grid: t } = s, { filterable: i } = e.def;
+  if (!i) return null;
+  switch ((typeof i == "object" ? i : { type: "text" }).type) {
+    case "text":
+      return /* @__PURE__ */ n(pe, { column: e, grid: t });
+    case "number":
+      return /* @__PURE__ */ n(Ke, { column: e, grid: t });
+    case "multiselect":
+      return /* @__PURE__ */ n(Je, { column: e, grid: t });
+    default:
+      return /* @__PURE__ */ n(pe, { column: e, grid: t });
+  }
+}
+xe.displayName = "DataGridColumnFilter";
+function Fe(s) {
+  const { column: e, grid: t } = s, { key: i, pin: r, left: o, right: a, isEdge: h, widthVarName: u, leftVarName: l, rightVarName: c, filterable: p } = e, f = i === V, N = f || i === T || i === G || i === _, S = r === "LEFT", x = r === "RIGHT";
+  return /* @__PURE__ */ n(
+    m,
+    {
+      component: "datagrid.filter.cell",
+      variant: { isPinned: S || x, isFirstLeftPinned: S && o === 0, isLastLeftPinned: S && h, isFirstRightPinned: x && h, isLastRightPinned: x && a === 0 },
+      px: f ? 0 : 2,
+      style: {
+        width: `var(${u})`,
+        left: S ? `var(${l})` : void 0,
+        right: x ? `var(${c})` : void 0
+      },
+      children: !N && p && /* @__PURE__ */ n(xe, { column: e, grid: t })
+    }
+  );
+}
+Fe.displayName = "DataGridFilterCell";
+function ke(s) {
+  const { grid: e } = s, { visibleLeafs: t } = e.columns.value;
+  return t.some((r) => r.filterable) ? t.map((r) => /* @__PURE__ */ n(Fe, { column: r, grid: e }, r.uniqueKey)) : null;
+}
+ke.displayName = "DataGridFilterRow";
+function Ge(s) {
+  const { column: e } = s, { key: t, pin: i, left: r, right: o, isEdge: a, isLeaf: h, align: u, header: l, grid: c } = e, [p, f, y] = Me({ hideOnScroll: !0, event: "mousedown" }), [v, R] = M({ top: 0, left: 0 }), N = X(() => v.left > window.innerWidth / 2, [v.left]), S = h && e.sortable && (c.sortColumn !== t || c.sortDirection === "DESC"), x = h && e.sortable && (c.sortColumn !== t || c.sortDirection === "ASC"), L = h && e.sortable && c.sortColumn === t, C = i !== "LEFT", w = i !== "RIGHT", F = !!i, W = h && t !== T, B = h && t === T, E = S || x || L, Y = C || w || F, ee = u === "right" ? 2 : void 0, te = u === "right" ? void 0 : i === "RIGHT" ? 2.5 : 4, K = t === V, J = t === G, ie = t === _, $ = i === "LEFT", Q = i === "RIGHT", re = $ || i === "RIGHT", Z = $ && r === 0, ne = $ && a, H = Q && a, U = Q && o === 0, Ne = h && !K && !J && !ie && e.sortable;
+  return /* @__PURE__ */ n(m, { position: "absolute", left: ee, right: te, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ d(
+    D,
     {
       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 },
+      onClick: () => f(!p),
+      variant: { isPinned: re, isFirstLeftPinned: Z, isLastLeftPinned: ne, isFirstRightPinned: H, isLastRightPinned: U, isSortable: Ne, isRowNumber: J },
       children: [
-        /* @__PURE__ */ s(D, { component: "datagrid.header.cell.contextMenu.icon", children: /* @__PURE__ */ s(Se, { fill: "currentColor" }) }),
-        m && /* @__PURE__ */ h(
-          he,
+        /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.icon", children: /* @__PURE__ */ n(He, { fill: "currentColor" }) }),
+        p && /* @__PURE__ */ d(
+          Ae,
           {
             component: "datagrid.header.cell.contextMenu.tooltip",
-            variant: { openLeft: G },
-            onPositionChange: k,
-            ref: R,
+            onPositionChange: R,
+            ref: y,
+            adjustTranslateX: N ? "-100%" : "-21px",
+            adjustTranslateY: "16px",
             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" }) }),
+              S && /* @__PURE__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("ASC"), children: [
+                /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ n(oe, { 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 }) }),
+              x && /* @__PURE__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("DESC"), children: [
+                /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ n(oe, { 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 }),
+              L && /* @__PURE__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn(void 0), children: [
+                /* @__PURE__ */ n(g, { 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" }) }),
+              E && (Y || W || B) && /* @__PURE__ */ n(g, { bb: 1, my: 2, borderColor: "gray-300", component: "datagrid.header.cell.contextMenu.tooltip.item.separator" }),
+              C && /* @__PURE__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("LEFT"), children: [
+                /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ n(ce, { 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 }) }),
+              w && /* @__PURE__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("RIGHT"), children: [
+                /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ n(ce, { 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 }),
+              F && /* @__PURE__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn(), children: [
+                /* @__PURE__ */ n(g, { 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: [
+              E && Y && (W || B) && /* @__PURE__ */ n(g, { component: "datagrid.header.cell.contextMenu.tooltip.item.separator" }),
+              W && /* @__PURE__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: e.toggleGrouping, children: [
+                /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ n(se, { width: "100%", fill: "currentColor" }) }),
+                /* @__PURE__ */ d(g, { textWrap: "nowrap", children: [
                   "Group by ",
-                  c ?? t
+                  l ?? 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" })
+              B && /* @__PURE__ */ d(D, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: c.unGroupAll, children: [
+                /* @__PURE__ */ n(I, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ n(se, { width: "100%", fill: "currentColor" }) }),
+                /* @__PURE__ */ n(g, { textWrap: "nowrap", children: "Un-Group All" })
               ] })
             ]
           }
@@ -583,11 +1024,11 @@ function Ce(l) {
     }
   ) });
 }
-Ce.displayName = "DataGridHeaderCellContextMenu";
-function Re(l) {
-  const { column: e } = l;
-  return /* @__PURE__ */ s(
-    g,
+Ge.displayName = "DataGridHeaderCellContextMenu";
+function Se(s) {
+  const { column: e } = s;
+  return /* @__PURE__ */ n(
+    m,
     {
       height: "fit",
       ai: "center",
@@ -595,168 +1036,304 @@ function Re(l) {
       right: e.pin === "RIGHT" ? void 0 : 0,
       left: e.pin !== "RIGHT" ? void 0 : 0,
       py: 3,
-      children: /* @__PURE__ */ s(
-        p,
+      children: /* @__PURE__ */ n(
+        g,
         {
           cursor: "col-resize",
           px: 0.75,
+          mt: -6,
           className: "resizer",
           height: "fit",
           props: { onMouseDown: e.resizeColumn, onTouchStart: e.resizeColumn },
-          children: /* @__PURE__ */ s(p, { component: "datagrid.header.cell.resizer" })
+          children: /* @__PURE__ */ n(g, { component: "datagrid.header.cell.resizer" })
         }
       )
     }
   );
 }
-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 });
+Se.displayName = "DataGridHeaderCellResizer";
+function Le(s) {
+  const { column: e } = s, {
+    key: t,
+    pin: i,
+    left: r,
+    right: o,
+    isEdge: a,
+    isLeaf: h,
+    leafs: u,
+    grid: l,
+    header: c,
+    gridRows: p,
+    widthVarName: f,
+    leftVarName: y,
+    rightVarName: v,
+    inlineWidth: R,
+    isFirstLeaf: N,
+    isLastLeaf: S
+  } = e, x = t === V, L = t === T, C = t === G, w = t === _, F = i === "LEFT", W = i === "RIGHT", B = F || i === "RIGHT", E = F && r === 0, Y = F && a, ee = W && a, te = W && o === 0, K = h && !x && !C && !w && e.sortable, J = h ? 1 : u.length, ie = !C && !w && e.resizable, $ = !C && !w, Q = w ? void 0 : e.align === "right" ? 10 : 3, re = w ? void 0 : e.align === "center" ? 3 : void 0, Z = k(() => {
+    l.toggleSelectAllRows();
+  }, []), ne = X(() => {
+    if (C) return null;
+    if (w) {
+      const H = l.selectedRows.size === l.props.data.length, U = !H && l.selectedRows.size > 0;
+      return /* @__PURE__ */ n(le, { variant: "datagrid", m: 1, indeterminate: U, checked: H, onChange: Z });
     }
-    if (b) {
-      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;
+    if (L) {
+      if (l.groupColumns.size === 1) {
+        const H = l.columns.value.leafs.findOrThrow((U) => U.key === l.groupColumns.values().next().value);
+        return H.header ?? H.key;
       }
       return "Group";
     }
-    return d ?? t;
-  }, [c.groupColumns, c.selectedRows, z]);
-  return /* @__PURE__ */ s(
-    g,
+    return c ?? t;
+  }, [l.groupColumns, l.selectedRows, Z]);
+  return /* @__PURE__ */ n(
+    m,
     {
       props: { role: "columnheader" },
       component: "datagrid.header.cell",
-      variant: { isPinned: N, isFirstLeftPinned: W, isLastLeftPinned: H, isFirstRightPinned: F, isLastRightPinned: O, isSortable: $, isRowNumber: L },
-      gridRow: m,
-      gridColumn: Y,
+      variant: {
+        isPinned: B,
+        isFirstLeftPinned: E,
+        isLastLeftPinned: Y,
+        isFirstRightPinned: ee,
+        isLastRightPinned: te,
+        isSortable: K,
+        isRowNumber: C,
+        isFirstLeaf: N,
+        isLastLeaf: S,
+        isEmptyCell: x
+      },
+      gridRow: p,
+      gridColumn: J,
       style: {
         width: `var(${f})`,
-        left: T ? `var(${R})` : void 0,
-        right: B ? `var(${y})` : void 0
+        left: F ? `var(${y})` : void 0,
+        right: W ? `var(${v})` : void 0
       },
-      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,
+      children: !x && /* @__PURE__ */ d(Be, { children: [
+        /* @__PURE__ */ n(m, { width: "fit", height: "fit", jc: e.align, props: { onClick: K ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ d(
+          m,
           {
             overflow: "hidden",
-            position: u ? void 0 : "sticky",
+            position: h ? void 0 : "sticky",
             ai: "center",
             transition: "none",
-            pl: J,
-            pr: V,
+            pl: Q,
+            pr: re,
             style: {
-              left: i ? void 0 : `var(${c.leftEdgeVarName})`
+              left: i ? void 0 : `var(${l.leftEdgeVarName})`
             },
             children: [
-              /* @__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 })
+              /* @__PURE__ */ n(g, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: ne }),
+              t === l.sortColumn && /* @__PURE__ */ n(g, { pl: (R ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ n(oe, { width: "16px", rotate: l.sortDirection === "ASC" ? 0 : 180, fill: "currentColor" }) }),
+              $ && /* @__PURE__ */ n(g, { minWidth: e.align === "right" ? 4 : 10 })
             ]
           }
         ) }),
-        K && /* @__PURE__ */ s(Re, { column: e }),
-        I && /* @__PURE__ */ s(Ce, { column: e })
+        ie && /* @__PURE__ */ n(Se, { column: e }),
+        $ && /* @__PURE__ */ n(Ge, { column: e })
       ] })
     }
   );
 }
-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))) });
-}
-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(p, { overflowX: "scroll", props: { onScroll: n }, children: [
-    /* @__PURE__ */ s(ve, { grid: e }),
-    /* @__PURE__ */ s(we, { grid: e, scrollTop: t })
+Le.displayName = "DataGridHeaderCell";
+function Te(s) {
+  const { grid: e } = s;
+  return /* @__PURE__ */ d(me, { component: "datagrid.header", style: { gridTemplateColumns: e.gridTemplateColumns.value }, children: [
+    e.headerRows.value.map((t) => t.map((i) => /* @__PURE__ */ n(Le, { column: i }, i.uniqueKey))),
+    /* @__PURE__ */ n(ke, { grid: e })
   ] });
 }
-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" }) }),
+Te.displayName = "DataGridHeader";
+function We(s) {
+  const { grid: e } = s, [t, i] = M(0), r = O(null), o = k((h) => {
+    r.current !== null && cancelAnimationFrame(r.current), r.current = requestAnimationFrame(() => {
+      i(h.target.scrollTop), r.current = null;
+    });
+  }, []);
+  return e.columns.value.userVisibleLeafs.length > 0 ? /* @__PURE__ */ d(g, { overflowX: "scroll", style: { willChange: "scroll-position" }, props: { onScroll: o }, children: [
+    /* @__PURE__ */ n(Te, { grid: e }),
+    /* @__PURE__ */ n(Re, { grid: e, scrollTop: t })
+  ] }) : /* @__PURE__ */ n(Ye, {});
+}
+We.displayName = "DataGridContent";
+function De(s) {
+  const { grid: e } = s;
+  return e.groupColumns.size === 0 ? null : /* @__PURE__ */ d(m, { component: "datagrid.topBar.columnGroups", children: [
+    /* @__PURE__ */ n(I, { component: "datagrid.topBar.columnGroups.icon", children: /* @__PURE__ */ n(se, { width: "100%", fill: "currentColor" }) }),
     Array.from(e.groupColumns, (t) => {
-      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: [
+      const i = e.columns.value.leafs.findOrThrow((r) => r.key === t);
+      return /* @__PURE__ */ d(Ee.Fragment, { children: [
+        /* @__PURE__ */ n(ge, { fill: "currentColor", width: "14px", height: "14px", rotate: -90 }),
+        /* @__PURE__ */ d(m, { component: "datagrid.topBar.columnGroups.item", children: [
           i.header ?? i.key,
-          /* @__PURE__ */ s(w, { component: "datagrid.topBar.columnGroups.item.icon", onClick: () => e.toggleGrouping(i.key), children: /* @__PURE__ */ s(_e, { fill: "currentColor", width: "100%" }) })
+          /* @__PURE__ */ n(D, { component: "datagrid.topBar.columnGroups.item.icon", onClick: () => e.toggleGrouping(i.key), children: /* @__PURE__ */ n(g, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
         ] })
       ] }, t);
     })
   ] });
 }
-Ge.displayName = "DataGridColumnGroups";
-function be(l) {
-  const { grid: e } = l, [t, i, n] = de({ event: "mousedown" }), o = j(
+De.displayName = "DataGridColumnGroups";
+function Qe(s) {
+  const { grid: e } = s, [t, i] = M(e.globalFilterValue), r = O(null);
+  z(() => () => {
+    r.current && clearTimeout(r.current);
+  }, []);
+  const o = k(
+    (c) => {
+      const p = c.target.value;
+      i(p), r.current && clearTimeout(r.current), r.current = setTimeout(() => {
+        e.setGlobalFilter(p), r.current = null;
+      }, 300);
+    },
+    [e]
+  ), a = k(() => {
+    i(""), e.setGlobalFilter("");
+  }, [e]), { filtered: h, total: u } = e.filterStats, l = e.hasActiveFilters && h !== u;
+  return /* @__PURE__ */ d(m, { component: "datagrid.topBar.globalFilter", children: [
+    l && /* @__PURE__ */ d(g, { component: "datagrid.topBar.globalFilter.stats", children: [
+      h,
+      "/",
+      u
+    ] }),
+    /* @__PURE__ */ d(m, { position: "relative", ai: "center", children: [
+      /* @__PURE__ */ n(m, { position: "absolute", left: 3, pointerEvents: "none", color: "gray-400", theme: { dark: { color: "gray-500" } }, children: /* @__PURE__ */ n(ze, { fill: "currentColor", width: "14px" }) }),
+      /* @__PURE__ */ n(j, { placeholder: "Search...", variant: "compact", value: t, onChange: o, pl: 8, pr: t ? 8 : 3 }),
+      t && /* @__PURE__ */ n(
+        g,
+        {
+          position: "absolute",
+          right: 2,
+          cursor: "pointer",
+          p: 1,
+          color: "gray-400",
+          hover: { color: "gray-600" },
+          theme: { dark: { color: "gray-500", hover: { color: "gray-300" } } },
+          props: { onClick: a },
+          children: /* @__PURE__ */ n(g, { fontSize: 12, fontWeight: 600, children: "✕" })
+        }
+      )
+    ] })
+  ] });
+}
+function _e(s) {
+  const { grid: e } = s, i = X(
     () => e.columns.value.leafs.filter(
-      (r) => ![E, C, _, x].includes(r.key)
+      (l) => ![V, G, _, T].includes(l.key)
     ),
     [e.columns.value.leafs]
-  );
-  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: (u) => {
-          u.stopPropagation(), r.toggleVisibility();
-        },
-        children: [
-          /* @__PURE__ */ s(q, { variant: "datagrid", checked: r.isVisible, onChange: () => {
-          }, focus: { outline: 0 } }),
-          r.header ?? r.key
-        ]
+  ).map((l) => ({
+    id: String(l.key),
+    label: l.header ?? l.key,
+    leaf: l
+  })), r = i.filter((l) => l.leaf.isVisible).map((l) => l.id), o = i.length, h = o - r.length > 0;
+  return /* @__PURE__ */ d(
+    b,
+    {
+      multiple: !0,
+      showCheckbox: !0,
+      hideIcon: !0,
+      variant: "compact",
+      value: r,
+      onChange: (l, c) => {
+        const p = new Set(c);
+        i.forEach((f) => {
+          const y = p.has(f.id);
+          f.leaf.isVisible !== y && f.leaf.toggleVisibility();
+        });
       },
-      r.key
-    )) })
-  ] });
+      isSearchable: i.length > 6,
+      searchPlaceholder: "Search columns...",
+      display: "inline-flex",
+      children: [
+        /* @__PURE__ */ n(b.Display, { children: (l) => {
+          const c = l.length === 0;
+          return /* @__PURE__ */ d(m, { ai: "center", gap: 2, children: [
+            /* @__PURE__ */ d(fe, { viewBox: "0 0 20 20", width: "18", height: "18", children: [
+              /* @__PURE__ */ n("rect", { x: "2", y: "3", width: "4", height: "14", rx: "1", fill: "currentColor", opacity: 0.9 }),
+              /* @__PURE__ */ n("rect", { x: "8", y: "3", width: "4", height: "14", rx: "1", fill: "currentColor", opacity: 0.6 }),
+              /* @__PURE__ */ n("rect", { x: "14", y: "3", width: "4", height: "14", rx: "1", fill: "currentColor", opacity: 0.3 })
+            ] }),
+            h && /* @__PURE__ */ d(
+              g,
+              {
+                tag: "span",
+                fontSize: 11,
+                lineHeight: 16,
+                fontWeight: 500,
+                px: 2,
+                py: 0.5,
+                borderRadius: 1,
+                bgColor: c ? "red-100" : "amber-100",
+                color: c ? "red-700" : "amber-700",
+                theme: {
+                  dark: {
+                    bgColor: c ? "red-900" : "amber-900",
+                    color: c ? "red-300" : "amber-300"
+                  }
+                },
+                children: [
+                  l.length,
+                  "/",
+                  o
+                ]
+              }
+            )
+          ] });
+        } }),
+        /* @__PURE__ */ n(b.SelectAll, { children: "Show All" }),
+        /* @__PURE__ */ n(b.Unselect, { children: "Hide All" }),
+        i.map((l) => /* @__PURE__ */ n(b.Item, { value: l.id, textWrap: "nowrap", children: l.label }, l.id))
+      ]
+    }
+  );
 }
-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 })
+_e.displayName = "DataGridTopBarContextMenu";
+function Ve(s) {
+  const { grid: e } = s, { title: t, topBarContent: i, globalFilter: r } = e.props.def;
+  return /* @__PURE__ */ d(m, { component: "datagrid.topBar", position: "relative", ai: "center", jc: "space-between", gap: 4, flexWrap: "wrap", children: [
+    /* @__PURE__ */ d(m, { ai: "center", gap: 3, flexWrap: "wrap", minWidth: 0, children: [
+      /* @__PURE__ */ n(_e, { grid: e }),
+      t && /* @__PURE__ */ n(g, { fontWeight: 600, fontSize: 16, color: "gray-800", theme: { dark: { color: "gray-100" } }, children: t }),
+      /* @__PURE__ */ n(De, { grid: e })
+    ] }),
+    /* @__PURE__ */ d(m, { ai: "center", gap: 3, flexWrap: "wrap", jc: "flex-end", minWidth: 0, children: [
+      i && /* @__PURE__ */ n(g, { children: i }),
+      r && /* @__PURE__ */ n(Qe, { grid: e })
+    ] })
   ] });
 }
-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;
+Ve.displayName = "DataGridTopBar";
+function Ze(s) {
+  const [e, t] = M(0), i = O();
+  return i.current || (i.current = new je(s, () => t((r) => r + 1))), z(() => {
+    i.current.props = s, i.current.rows.clear(), i.current.flatRows.clear(), i.current.update();
+  }, [s.data]), z(() => {
+    i.current.props = s, 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();
+  }, [s.def]), z(() => {
+    i.current.props = s, i.current.update();
+  }, [s.loading]), z(() => {
+    i.current.props = s, i.current.rows.clear(), i.current.flatRows.clear(), i.current.update();
+  }, [s.globalFilterValue, s.columnFilters]), i.current;
 }
-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 })
+function et(s) {
+  const e = Ze(s), t = O(null);
+  return Pe(() => {
+    const i = t.current;
+    if (!i) return;
+    const r = new ResizeObserver((o) => {
+      const a = o[0]?.contentRect.width ?? 0;
+      e.setContainerWidth(a);
+    });
+    return r.observe(i), () => r.disconnect();
+  }, [e]), console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render"), /* @__PURE__ */ d(g, { ref: t, component: "datagrid", style: e.sizes.value, props: { role: "presentation" }, children: [
+    e.props.def.topBar && /* @__PURE__ */ n(Ve, { grid: e }),
+    /* @__PURE__ */ n(We, { grid: e }),
+    e.props.def.bottomBar && /* @__PURE__ */ n(Oe, { grid: e })
   ] });
 }
-Ve.displayName = "DataGrid";
+et.displayName = "DataGrid";
 export {
-  Ve as default
+  et as default
 };