@cronocode/react-box 3.1.2 → 3.1.6

package/components/dataGrid.mjs

@@ -1,38 +1,41 @@
-import { jsxs as u, jsx as r, Fragment as Ge } from "react/jsx-runtime";
-import h from "../box.mjs";
-import g from "./flex.mjs";
-import be, { useCallback as W, useMemo as H, useState as O, useRef as ke, useEffect as z } from "react";
-import { F as J, m as S, E as Q, b as Z, D as Le, S as A, P as q, G as $, C as De } from "../core.mjs";
-import ee from "./grid.mjs";
-import I from "./checkbox.mjs";
-import f from "./button.mjs";
-import { Span as L } from "./semantics.mjs";
-import te from "./tooltip.mjs";
-import Te from "./baseSvg.mjs";
-function Se(a) {
-  const { grid: e } = a;
-  return /* @__PURE__ */ u(g, { component: "datagrid.bottomBar", children: [
-    /* @__PURE__ */ u(h, { children: [
+import { jsxs as d, jsx as r, Fragment as _e } from "react/jsx-runtime";
+import g from "../box.mjs";
+import m from "./flex.mjs";
+import Be, { useCallback as k, useMemo as Y, useState as W, useRef as O, useEffect as A } from "react";
+import he from "./grid.mjs";
+import { F as Ve, m as H, f as se, E as pe, b as me, D as Ee, S as ne, P as le, G as re, d as Me } from "../core.mjs";
+import Z from "./checkbox.mjs";
+import T from "./button.mjs";
+import D from "./dropdown.mjs";
+import j from "./textbox.mjs";
+import { Span as E } from "./semantics.mjs";
+import ge from "./tooltip.mjs";
+import We from "./baseSvg.mjs";
+function Ie(s) {
+  const { grid: e } = s, { filtered: t, total: i } = e.filterStats, n = e.hasActiveFilters;
+  return /* @__PURE__ */ d(m, { component: "datagrid.bottomBar", children: [
+    /* @__PURE__ */ d(g, { children: [
       "Rows: ",
-      e.props.data.length
+      n ? `${t} / ${i}` : i
     ] }),
-    e.props.def.rowSelection && /* @__PURE__ */ u(h, { children: [
+    e.props.def.rowSelection && /* @__PURE__ */ d(g, { children: [
       "Selected: ",
       e.selectedRows.size
-    ] })
+    ] }),
+    n && /* @__PURE__ */ r(g, { color: "blue-600", cursor: "pointer", hover: { textDecoration: "underline" }, props: { onClick: e.clearAllFilters }, children: "Clear filters" })
   ] });
 }
-function ie(a) {
-  const { cell: e } = a, t = W(() => {
+function fe(s) {
+  const { cell: e } = s, t = k(() => {
     e.grid.toggleRowSelection(e.row.key);
   }, [e.grid, e.row.key]);
-  return /* @__PURE__ */ r(I, { variant: "datagrid", checked: e.row.selected, onChange: t });
+  return /* @__PURE__ */ r(Z, { variant: "datagrid", checked: e.row.selected, onChange: t });
 }
-ie.displayName = "DataGridCellRowSelection";
-const Be = "NO_PIN";
-class D {
+fe.displayName = "DataGridCellRowSelection";
+const He = "NO_PIN";
+class M {
   constructor(e, t, i) {
-    this.def = e, this.grid = t, this.parent = i, this.columns = e.columns?.map((n) => new D(e.pin ? { ...n, pin: e.pin } : n, t, this)) ?? [], this.isLeaf && (this._inlineWidth = this.key == _ ? 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 M(e.pin ? { ...n, pin: e.pin } : n, t, this)) ?? [], this.isLeaf && (this._inlineWidth = this.key == B ? void 0 : this.def.width ?? this.grid.DEFAULT_COLUMN_WIDTH_PX, this._pin = e.pin);
   }
   columns = [];
   get visibleColumns() {
@@ -53,6 +56,9 @@ class D {
   get Cell() {
     return this.def.Cell;
   }
+  get filterable() {
+    return this.def.filterable;
+  }
   _pin;
   get pin() {
     if (this.isLeaf) return this._pin;
@@ -65,7 +71,7 @@ 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 M({ ...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;
@@ -93,7 +99,7 @@ class D {
     let e = 0;
     if (this.parent) {
       const { visibleColumns: t, left: i } = this.parent, n = t.findIndex((o) => o === this);
-      e += t.sumBy((o, s) => s < n ? o.inlineWidth ?? 0 : 0), e += i;
+      e += t.sumBy((o, l) => l < n ? 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);
@@ -104,10 +110,10 @@ class D {
     let e = 0;
     if (this.parent) {
       const { visibleColumns: t } = this.parent, i = t.reverse(), n = i.findIndex((o) => o === this);
-      e += i.sumBy((o, s) => s < n ? o.inlineWidth ?? 0 : 0), e += this.parent.right;
+      e += i.sumBy((o, l) => l < n ? 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, s) => s < n ? o.inlineWidth ?? 0 : 0);
+      e += i.sumBy((o, l) => l < n ? o.inlineWidth ?? 0 : 0);
     }
     return e;
   }
@@ -143,16 +149,16 @@ class D {
   }
   resizeColumn = (e) => {
     this.grid.isResizeMode = !0;
-    const t = e.pageX, { MIN_COLUMN_WIDTH_PX: i, update: n } = this.grid, o = this.leafs.sumBy((c) => c.inlineWidth) - this.leafs.length * i, s = this.leafs.toRecord((c) => [c.key, c.inlineWidth]), m = J.throttle((c) => {
+    const t = e.pageX, { MIN_COLUMN_WIDTH_PX: i, update: n } = this.grid, o = this.leafs.sumBy((c) => c.inlineWidth) - this.leafs.length * i, l = this.leafs.toRecord((c) => [c.key, c.inlineWidth]), u = Ve.throttle((c) => {
       const p = (c.pageX - t) * (this.pin === "RIGHT" ? -1 : 1);
-      this.leafs.forEach((w) => {
-        const v = s[w.key], x = o > 0 ? (v - i) / o * p : p / this.leafs.length, C = Math.round(v + x);
-        w.setWidth(C < i ? i : C);
+      this.leafs.forEach((f) => {
+        const v = l[f.key], y = o > 0 ? (v - i) / o * p : p / this.leafs.length, R = Math.round(v + y);
+        f.setWidth(R < i ? i : R);
       }), this.grid.sizes.clear(), n();
-    }, 40), l = new AbortController(), d = (c) => {
-      l.abort(), this.grid.isResizeMode = !1, n();
+    }, 40), a = new AbortController(), h = (c) => {
+      a.abort(), this.grid.isResizeMode = !1, n();
     };
-    window.addEventListener("mousemove", m, l), window.addEventListener("mouseup", d, l);
+    window.addEventListener("mousemove", u, a), window.addEventListener("mouseup", h, a);
   };
   pinColumn = (e) => {
     this.isLeaf ? this._pin = e : this.columns.forEach((t) => t.pinColumn(e)), this.grid.pinColumn(this.uniqueKey, e);
@@ -172,15 +178,15 @@ class D {
     this.grid.toggleColumnVisibility(this.key);
   };
 }
-class _e {
+class Ae {
   constructor(e, t, i) {
     this.grid = e, this.row = t, this.column = i;
   }
   get value() {
-    return this.column.key === b ? this.row.rowIndex + 1 : this.row.data[this.column.key];
+    return this.column.key === L ? this.row.rowIndex + 1 : this.row.data[this.column.key];
   }
 }
-class Y {
+class ae {
   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 +194,7 @@ class Y {
   parentRow;
   count = 1;
   get cells() {
-    return this.grid.columns.value.visibleLeafs.map((e) => new _e(this.grid, this, e));
+    return this.grid.columns.value.visibleLeafs.map((e) => new Ae(this.grid, this, e));
   }
   get selected() {
     return this.grid.selectedRows.has(this.key);
@@ -200,89 +206,217 @@ class Y {
     return this;
   }
 }
-const _ = "empty-cell", b = "row-number-cell", B = "row-selection-cell", y = "grouping-cell";
-class Me {
+const B = "empty-cell", L = "row-number-cell", ce = 70, P = "row-selection-cell", N = "grouping-cell";
+class ze {
   constructor(e, t) {
     this.props = e, this.update = t, console.debug("\x1B[32m%s\x1B[0m", "[react-box]: DataGrid GridModel ctor");
   }
-  sourceColumns = S(() => {
+  sourceColumns = H(() => {
     const { def: e } = this.props, t = [];
-    if (this.groupColumns.size > 0 && t.push(new D({ key: y }, this)), t.push(...e.columns.map((i) => new D(i, this))), t.push(new D({ key: _, Cell: () => null }, this)), e.rowSelection) {
+    if (this.groupColumns.size > 0 && t.push(new M({ key: N }, this)), t.push(...e.columns.map((i) => new M(i, this))), t.push(new M({ key: B, Cell: () => null }, this)), e.rowSelection) {
       const i = typeof e.rowSelection == "object" && e.rowSelection.pinned ? "LEFT" : void 0;
       t.unshift(
-        new D({ key: B, pin: i, width: 50, align: "center", Cell: ie }, this)
+        new M({ key: P, pin: i, width: 50, align: "center", Cell: fe }, this)
       );
     }
     if (e.showRowNumber) {
-      const i = typeof e.showRowNumber == "object" && e.showRowNumber.pinned ? "LEFT" : void 0;
-      t.unshift(new D({ key: b, pin: i, width: 70, align: "right" }, this));
+      let i, n = ce;
+      typeof e.showRowNumber == "object" && (e.showRowNumber.pinned && (i = "LEFT"), n = e.showRowNumber.width ?? ce), t.unshift(new M({ key: L, pin: i, width: n, align: "right" }, this));
     }
     return t;
   });
-  columns = S(() => {
+  columns = H(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid columns memo");
-    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), n = [...e, ...t, ...i].flatMap((l) => l.flatColumns), o = n.filter((l) => l.isLeaf), s = n.filter((l) => l.isLeaf && l.isVisible), m = n.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), l = n.filter((a) => a.isLeaf && a.isVisible), u = n.maxBy((a) => a.death) + 1;
     return {
       left: e,
       middle: t,
       right: i,
       flat: n,
       leafs: o,
-      visibleLeafs: s,
-      maxDeath: m
+      visibleLeafs: l,
+      maxDeath: u
     };
   });
-  headerRows = S(() => (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 ?? Be).toRecord((n) => [n.key, n.values]);
+  headerRows = H(() => (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 ?? He).toRecord((n) => [n.key, n.values]);
     return [
       ...i.LEFT?.filter((n) => n.isVisible) ?? [],
       ...i.NO_PIN?.filter((n) => n.isVisible) ?? [],
       ...i.RIGHT?.filter((n) => n.isVisible) ?? []
     ];
   })));
-  gridTemplateColumns = S(() => {
+  gridTemplateColumns = H(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid gridTemplateColumns memo");
-    const { visibleLeafs: e } = this.columns.value, t = e.sumBy((s) => s.pin === "RIGHT" ? 1 : 0), i = e.length - t - 1, n = i > 0 ? `repeat(${i}, max-content)` : "", o = t > 0 ? `repeat(${t}, max-content)` : "";
+    const { visibleLeafs: e } = this.columns.value, t = e.sumBy((l) => l.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 = S(() => {
-    console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid rows memo");
+  // ========== 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, n = i ?? this.columns.value.leafs.filter(
+      (o) => o.key !== B && o.key !== L && o.key !== P && o.key !== N
+    ).map((o) => o.key);
+    return e.filter((o) => n.some((l) => {
+      const u = o[l];
+      return u == null ? !1 : se(t, String(u));
+    }));
+  }
+  /**
+   * Apply column-level filters
+   */
+  applyColumnFilters(e) {
+    const t = this.columnFilters, i = Object.keys(t);
+    return i.length === 0 ? e : e.filter((n) => i.every((o) => {
+      const l = t[o];
+      if (!l) return !0;
+      const u = n[o];
+      return this.matchesFilter(u, l);
+    }));
+  }
+  /**
+   * Check if a cell value matches a filter
+   */
+  matchesFilter(e, t) {
+    switch (t.type) {
+      case "text":
+        return t.value.trim() ? e == null ? !1 : se(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 n = i[e];
+      n !== void 0 && t.add(n);
+    }), Array.from(t).sort((i, n) => i === null ? 1 : n === null ? -1 : typeof i == "string" && typeof n == "string" ? i.localeCompare(n) : typeof i == "number" && typeof n == "number" ? i - n : String(i).localeCompare(String(n)));
+  };
+  /**
+   * 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 = H(() => {
+    console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid rows memo");
+    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 s = n.values().next().value;
-        n.delete(s);
-        const m = this.columns.value.leafs.findOrThrow((l) => l.key === s);
-        return this._sortColumn === y && (i = i.sortBy((l) => l[s], this._sortDirection)), i.groupBy((l) => l[s]).map((l) => {
-          let d;
-          n.size > 0 ? d = t(l.values, new Set(n), o + 1) : d = l.values.map((p, w) => new Y(this, p, o + 1 + w));
-          const c = new ne(this, m, d, o, l.key);
-          return o += 1, c.expanded && (o += d.length), c;
+        const l = n.values().next().value;
+        n.delete(l);
+        const u = this.columns.value.leafs.findOrThrow((a) => a.key === l);
+        return this._sortColumn === N && (i = i.sortBy((a) => a[l], this._sortDirection)), i.groupBy((a) => a[l]).map((a) => {
+          let h;
+          n.size > 0 ? h = t(a.values, new Set(n), o + 1) : h = a.values.map((p, f) => new ae(this, p, o + 1 + f));
+          const c = new we(this, u, h, o, a.key);
+          return o += 1, c.expanded && (o += h.length), c;
         });
       };
       return t(e, new Set(this.groupColumns), 0);
     }
-    return e.map((t, i) => new Y(this, t, i));
+    return e.map((t, i) => new ae(this, t, i));
   });
-  flatRows = S(() => (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid flatRows memo"), this.rows.value.flatMap((e) => e.flatRows)));
+  flatRows = H(() => (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 = S(() => {
+  sizes = H(() => {
     console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid sizes memo");
     const e = this.columns.value.flat.reduce((n, o) => {
-      const { inlineWidth: s } = o;
-      return typeof s == "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 { inlineWidth: l } = o;
+      return typeof l == "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((n) => n.key === y);
+    const { visibleLeafs: t } = this.columns.value, i = t.find((n) => n.key === N);
     if (i) {
-      const n = t.sumBy((o) => o.pin === i.pin && o.key !== b && o.key !== B ? o.inlineWidth ?? 0 : 0);
+      const n = t.sumBy((o) => o.pin === i.pin && o.key !== L && o.key !== P ? o.inlineWidth ?? 0 : 0);
       e[i.groupColumnWidthVarName] = `${n}px`;
     }
     return this.groupColumns.forEach((n) => {
-      const o = this.columns.value.leafs.findOrThrow((s) => s.key === n);
-      e[o.groupColumnWidthVarName] = `${t.sumBy((s) => s.pin === o.pin ? s.inlineWidth ?? 0 : 0)}px`;
+      const o = this.columns.value.leafs.findOrThrow((l) => l.key === n);
+      e[o.groupColumnWidthVarName] = `${t.sumBy((l) => l.pin === o.pin ? l.inlineWidth ?? 0 : 0)}px`;
     }), e;
   });
   DEFAULT_ROW_HEIGHT_PX = 48;
@@ -321,7 +455,8 @@ class Me {
     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.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.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();
@@ -362,24 +497,30 @@ class Me {
     return this._sortDirection;
   }
 }
-class Ne {
+class Oe {
   constructor(e, t, i) {
     this.grid = e, this.row = t, this.column = i;
   }
   get value() {
-    return this.column.key === b ? this.row.rowIndex + 1 : this.column.key === y ? `${this.row.groupValue} (${this.row.count})` : null;
+    return this.column.key === L ? this.row.rowIndex + 1 : this.column.key === N ? `${this.row.groupValue} (${this.row.count})` : null;
   }
 }
-class ne {
+class we {
   constructor(e, t, i, n, o) {
-    this.grid = e, this.groupColumn = t, this.rows = i, this.rowIndex = n, this.groupValue = o, i.forEach((s) => s.parentRow = this);
+    this.grid = e, this.groupColumn = t, this.rows = i, this.rowIndex = n, this.groupValue = o, i.forEach((l) => l.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 Ne(this.grid, this, e));
+    return this.grid.columns.value.visibleLeafs.map((e) => new Oe(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);
@@ -397,33 +538,41 @@ class ne {
     return this.rows.flatMap((e) => e.allRows);
   }
   get groupingColumn() {
-    return this.grid.columns.value.leafs.findOrThrow((e) => e.key === y);
+    return this.grid.columns.value.leafs.findOrThrow((e) => e.key === N);
   }
   get groupingColumnGridColumn() {
     const { visibleLeafs: e } = this.grid.columns.value, { groupingColumn: t } = this;
     return e.sumBy(
-      (n) => n.pin === t.pin && n.key !== _ && n.key !== B && n.key !== b ? 1 : 0
+      (n) => n.pin === t.pin && n.key !== B && n.key !== P && n.key !== L ? 1 : 0
     );
   }
   toggleRow() {
     this.grid.toggleGroupRow(this.key);
   }
 }
-function E(a) {
-  const { children: e, column: t, style: i, ...n } = a, { key: o, pin: s, left: m, right: l, isEdge: d, align: c, widthVarName: p, leftVarName: w, rightVarName: v } = t;
+function X(s) {
+  const { children: e, column: t, style: i, ...n } = s, { key: o, pin: l, left: u, right: a, isEdge: h, align: c, widthVarName: p, leftVarName: f, rightVarName: v } = t;
   "align" in t.def && (n.jc = c);
-  const x = o === b, C = o === B, R = s === "LEFT", G = s === "RIGHT";
+  const y = o === L, R = o === P, F = l === "LEFT", b = l === "RIGHT";
   return /* @__PURE__ */ r(
-    g,
+    m,
     {
-      component: "datagrid.cell",
+      component: "datagrid.body.cell",
       props: { role: "cell" },
-      variant: { isPinned: R || G, isFirstLeftPinned: R && m === 0, isLastLeftPinned: R && d, isFirstRightPinned: G && d, isLastRightPinned: G && l === 0, isRowNumber: x, isRowSelection: C },
+      variant: {
+        isPinned: F || b,
+        isFirstLeftPinned: F && u === 0,
+        isLastLeftPinned: F && h,
+        isFirstRightPinned: b && h,
+        isLastRightPinned: b && a === 0,
+        isRowSelection: R,
+        isRowNumber: y
+      },
       style: {
         width: `var(${p})`,
         height: `var(${t.grid.rowHeightVarName})`,
-        left: R ? `var(${w})` : void 0,
-        right: G ? `var(${v})` : void 0,
+        left: F ? `var(${f})` : void 0,
+        right: b ? `var(${v})` : void 0,
         ...i
       },
       ...n,
@@ -431,143 +580,353 @@ function E(a) {
     }
   );
 }
-E.displayName = "DataGridCell";
-function oe(a) {
-  const { row: e } = a, t = W(() => {
-    e.grid.toggleRowsSelection(e.allRows.map((i) => i.key));
+X.displayName = "DataGridCell";
+function Ce(s) {
+  const { row: e } = s, { selected: t, indeterminate: i, cells: n, groupingColumn: o, groupingColumnGridColumn: l, depth: u, expanded: a } = e, h = k(() => {
+    e.grid.toggleRowsSelection(e.allRows.map((c) => c.key));
   }, []);
-  return /* @__PURE__ */ r(g, { className: "grid-row", display: "contents", props: { role: "rowgroup" }, children: e.cells.map((i) => {
-    const { key: n, pin: o, groupColumnWidthVarName: s } = i.column, m = o === "RIGHT";
-    if (n === y)
+  return /* @__PURE__ */ r(m, { className: "grid-row", selected: t, display: "contents", props: { role: "rowgroup" }, children: n.map((c) => {
+    const { key: p, pin: f, groupColumnWidthVarName: v } = c.column, y = f === "RIGHT";
+    if (p === N)
       return /* @__PURE__ */ r(
-        E,
+        X,
         {
-          column: i.column,
+          column: c.column,
           style: {
-            width: `var(${s})`,
-            right: m ? "0" : void 0
+            width: `var(${v})`,
+            right: y ? "0" : void 0
           },
-          br: e.groupingColumn.pin === "LEFT" ? 1 : void 0,
-          gridColumn: e.groupingColumnGridColumn,
-          pl: 4 * e.depth,
+          br: o.pin === "LEFT" ? 1 : void 0,
+          gridColumn: l,
+          pl: 4 * u,
           overflow: "auto",
-          children: /* @__PURE__ */ r(h, { textWrap: "nowrap", px: 4, children: /* @__PURE__ */ u(f, { clean: !0, onClick: () => e.toggleRow(), cursor: "pointer", display: "flex", gap: 1, ai: "center", children: [
-            /* @__PURE__ */ r(Q, { fill: "currentColor", width: "14px", height: "14px", rotate: e.expanded ? 0 : -90 }),
-            i.value
+          children: /* @__PURE__ */ r(g, { textWrap: "nowrap", px: 3, children: /* @__PURE__ */ d(T, { clean: !0, onClick: () => e.toggleRow(), cursor: "pointer", display: "flex", gap: 1, ai: "center", children: [
+            /* @__PURE__ */ r(pe, { fill: "currentColor", width: "14px", height: "14px", rotate: a ? 0 : -90 }),
+            c.value
           ] }) })
         },
-        n
+        p
       );
-    if (n === B) {
-      const l = e.allRows, d = l.every((p) => p.selected), c = !d && l.some((p) => p.selected);
-      return /* @__PURE__ */ r(E, { column: i.column, children: /* @__PURE__ */ r(I, { variant: "datagrid", m: 1, checked: d, indeterminate: c, onChange: t }) }, n);
-    }
-    if (n === _) return /* @__PURE__ */ r(h, {}, n);
-    if (o !== e.groupingColumn.pin || n === b)
-      return /* @__PURE__ */ r(E, { column: i.column, px: 4, children: i.value }, n);
+    if (p === P)
+      return /* @__PURE__ */ r(X, { column: c.column, children: /* @__PURE__ */ r(Z, { variant: "datagrid", m: 1, checked: t, indeterminate: i, onChange: h }) }, p);
+    if (f !== o.pin || p === L || p === B)
+      return /* @__PURE__ */ r(X, { column: c.column, px: p === L ? 3 : void 0, children: c.value }, p);
   }) });
 }
-oe.displayName = "DataGridGroupRow";
-function re(a) {
-  const { cell: e } = a;
-  return /* @__PURE__ */ r(g, { height: "fit", width: "fit", overflow: "auto", ai: "center", jc: e.column.align, children: /* @__PURE__ */ r(h, { px: 4, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: e.value }) });
+Ce.displayName = "DataGridGroupRow";
+function ve(s) {
+  const { cell: e } = s;
+  return /* @__PURE__ */ r(m, { height: "fit", width: "fit", overflow: "auto", ai: "center", jc: e.column.align, children: /* @__PURE__ */ r(g, { px: 3, textOverflow: "ellipsis", overflow: "hidden", textWrap: "nowrap", children: e.value }) });
 }
-re.displayName = "DataGridCellText";
-function se(a) {
-  const { row: e } = a;
-  return /* @__PURE__ */ r(g, { className: "grid-row", display: "contents", props: { role: "row" }, children: e.cells.map((t) => /* @__PURE__ */ r(E, { column: t.column, children: t.column.Cell ? /* @__PURE__ */ r(t.column.Cell, { cell: t }) : /* @__PURE__ */ r(re, { cell: t }) }, t.column.key)) });
+ve.displayName = "DataGridCellText";
+function ye(s) {
+  const { row: e } = s, { selected: t } = e;
+  return /* @__PURE__ */ r(m, { className: "grid-row", selected: t, display: "contents", props: { role: "row" }, children: e.cells.map((i) => /* @__PURE__ */ r(X, { column: i.column, children: i.column.Cell ? /* @__PURE__ */ r(i.column.Cell, { cell: i }) : /* @__PURE__ */ r(ve, { cell: i }) }, i.column.key)) });
 }
-se.displayName = "DataGridRow";
-const Ee = 10, K = 20;
-function le(a) {
-  const { grid: e, scrollTop: t } = a, i = e.flatRows.value.length, n = Math.max(0, Math.floor(t / e.rowHeight) - K), o = e.props.def.visibleRowsCount ?? Ee, s = e.rowHeight * o + e.rowHeight / 5, m = H(() => {
+ye.displayName = "DataGridRow";
+const $e = 10, ue = 20;
+function Re(s) {
+  const { grid: e, scrollTop: t } = s, i = e.flatRows.value.length, n = Math.max(0, Math.floor(t / e.rowHeight) - ue), o = e.props.def.visibleRowsCount ?? $e, l = e.rowHeight * o + e.rowHeight / 5, u = Y(() => {
     if (console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render rows"), e.props.data.length === 0)
-      return /* @__PURE__ */ r(g, { jc: "center", ai: "center", gridColumn: "full-row", style: { height: s }, children: e.props.loading ? "loading..." : "empty" });
-    const l = o + K * 2;
-    return e.flatRows.value.take(l, n).map((c) => c instanceof ne ? /* @__PURE__ */ r(oe, { row: c }, c.key) : /* @__PURE__ */ r(se, { row: c }, c.key));
-  }, [e.flatRows.value, e.props.data.length, e.props.loading, n, s, o]);
-  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render DataGridBody"), /* @__PURE__ */ r(h, { style: { height: s }, children: /* @__PURE__ */ r(
-    h,
+      return /* @__PURE__ */ r(m, { jc: "center", ai: "center", gridColumn: "full-row", style: { height: l }, children: e.props.loading ? "loading..." : "empty" });
+    const a = o + ue * 2;
+    return e.flatRows.value.take(a, n).map((c) => c instanceof we ? /* @__PURE__ */ r(Ce, { row: c }, c.key) : /* @__PURE__ */ r(ye, { row: c }, c.key));
+  }, [e.flatRows.value, e.props.data.length, e.props.loading, n, l, o]);
+  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render DataGridBody"), /* @__PURE__ */ r(g, { style: { height: l }, children: /* @__PURE__ */ r(
+    g,
     {
       style: {
         height: `${i * e.rowHeight}px`
       },
       children: /* @__PURE__ */ r(
-        ee,
+        he,
         {
+          component: "datagrid.body",
           width: "max-content",
           minWidth: "fit",
           transition: "none",
           style: {
-            transform: `translateY(${n * e.rowHeight}px)`,
+            transform: `translate3d(0, ${n * e.rowHeight}px, 0)`,
+            willChange: "transform",
             gridTemplateColumns: e.gridTemplateColumns.value
           },
-          children: m
+          children: u
         }
       )
     }
   ) });
 }
-le.displayName = "DataGridBody";
-function ae(a) {
-  const { column: e } = a, [t, i, n] = Z({ hideOnScroll: !0, event: "mousedown" }), [o, s] = O({ top: 0, left: 0 }), m = H(() => o.left > window.innerWidth / 2, [o.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"), c = e.isLeaf && e.grid.sortColumn === e.key, p = e.pin !== "LEFT", w = e.pin !== "RIGHT", v = !!e.pin, x = e.isLeaf && e.key !== y, C = e.isLeaf && e.key === y, R = l || d || c, G = p || w || v, k = e.align === "right" ? 2 : void 0, T = e.align === "right" ? void 0 : e.pin === "RIGHT" ? 2.5 : 4;
-  return /* @__PURE__ */ r(g, { position: "absolute", left: k, right: T, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu", onClick: () => i(!t), children: [
-    /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.icon", children: /* @__PURE__ */ r(Le, { fill: "currentColor" }) }),
-    t && /* @__PURE__ */ u(
-      te,
+Re.displayName = "DataGridBody";
+function de({ column: s, grid: e }) {
+  const t = e.columnFilters[s.key], i = t?.type === "text" ? t.value : "", [n, o] = W(i), l = O(null);
+  A(() => () => {
+    l.current && clearTimeout(l.current);
+  }, []);
+  const u = k(
+    (c) => {
+      const p = c.target.value;
+      o(p), l.current && clearTimeout(l.current), l.current = setTimeout(() => {
+        p.trim() ? e.setColumnFilter(s.key, { type: "text", value: p }) : e.setColumnFilter(s.key, void 0), l.current = null;
+      }, 300);
+    },
+    [e, s.key]
+  ), a = k(() => {
+    o(""), e.setColumnFilter(s.key, void 0);
+  }, [e, s.key]), h = typeof s.def.filterable == "object" ? s.def.filterable : {};
+  return /* @__PURE__ */ d(m, { ai: "center", position: "relative", width: "fit", children: [
+    /* @__PURE__ */ r(j, { width: "fit", variant: "compact", placeholder: h.placeholder ?? "Filter...", value: n, onChange: u }),
+    n && /* @__PURE__ */ r(m, { position: "absolute", right: 2, top: "1/2", translateY: "-1/2", cursor: "pointer", props: { onClick: a }, children: /* @__PURE__ */ r(g, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
+  ] });
+}
+function Ue({ column: s, grid: e }) {
+  const t = e.columnFilters[s.key], i = t?.type === "number" ? t.value : "", n = t?.type === "number" ? t.operator : "eq", o = t?.type === "number" ? t.valueTo : "", [l, u] = W(i), [a, h] = W(n), [c, p] = W(o ?? ""), f = O(null), v = O(null);
+  A(() => () => {
+    f.current && clearTimeout(f.current), v.current && clearTimeout(v.current);
+  }, []);
+  const y = typeof s.def.filterable == "object" ? s.def.filterable : {}, R = k(
+    (w, C, S) => {
+      const _ = typeof C == "number" ? C : parseFloat(C);
+      if (isNaN(_) || C === "") {
+        e.setColumnFilter(s.key, void 0);
+        return;
+      }
+      const V = {
+        type: "number",
+        operator: w,
+        value: _
+      };
+      if (w === "between" && S !== void 0 && S !== "") {
+        const I = typeof S == "number" ? S : parseFloat(String(S));
+        isNaN(I) || (V.valueTo = I);
+      }
+      e.setColumnFilter(s.key, V);
+    },
+    [e, s.key]
+  ), F = k(
+    (w) => {
+      const C = w.target.value;
+      u(C), f.current && clearTimeout(f.current), f.current = setTimeout(() => {
+        R(a, C, c), f.current = null;
+      }, 300);
+    },
+    [a, c, R]
+  ), b = k(
+    (w) => {
+      h(w), R(w, l, c);
+    },
+    [l, c, R]
+  ), x = k(
+    (w) => {
+      const C = w.target.value;
+      p(C), v.current && clearTimeout(v.current), v.current = setTimeout(() => {
+        R(a, l, C), v.current = null;
+      }, 300);
+    },
+    [a, l, R]
+  ), G = k(() => {
+    u(""), p(""), h("eq"), e.setColumnFilter(s.key, void 0);
+  }, [e, s.key]);
+  return /* @__PURE__ */ d(m, { ai: a === "between" ? "start" : "center", gap: 1, width: "fit", children: [
+    /* @__PURE__ */ d(
+      D,
       {
-        component: "datagrid.header.cell.contextMenu.tooltip",
-        variant: { openLeft: m },
-        onPositionChange: s,
-        ref: n,
+        value: a,
+        variant: "compact",
+        onChange: (w) => w && b(w),
+        minWidth: 6,
+        hideIcon: !0,
         children: [
-          l && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("ASC"), children: [
-            /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(A, { width: "100%", fill: "currentColor" }) }),
-            "Sort Ascending"
-          ] }),
-          d && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("DESC"), children: [
-            /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(A, { width: "100%", fill: "currentColor", rotate: 180 }) }),
-            "Sort Descending"
-          ] }),
-          c && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn(void 0), children: [
-            /* @__PURE__ */ r(h, { width: 4 }),
-            "Clear Sort"
-          ] }),
-          R && (G || x || C) && /* @__PURE__ */ r(h, { bb: 1, my: 2, borderColor: "gray-300" }),
-          p && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("LEFT"), children: [
-            /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(q, { width: "100%", fill: "currentColor" }) }),
-            "Pin Left"
-          ] }),
-          w && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("RIGHT"), children: [
-            /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(q, { width: "100%", fill: "currentColor", rotate: -90 }) }),
-            "Pin Right"
-          ] }),
-          v && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn(), children: [
-            /* @__PURE__ */ r(h, { width: 4 }),
-            "Unpin"
-          ] }),
-          R && G && (x || C) && /* @__PURE__ */ r(h, { bb: 1, my: 2, borderColor: "gray-300" }),
-          x && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: e.toggleGrouping, children: [
-            /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r($, { width: "100%", fill: "currentColor" }) }),
-            /* @__PURE__ */ u(h, { textWrap: "nowrap", children: [
-              "Group by ",
-              e.header ?? e.key
-            ] })
-          ] }),
-          C && /* @__PURE__ */ u(f, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: e.grid.unGroupAll, children: [
-            /* @__PURE__ */ r(L, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r($, { width: "100%", fill: "currentColor" }) }),
-            /* @__PURE__ */ r(h, { textWrap: "nowrap", children: "Un-Group All" })
-          ] })
+          /* @__PURE__ */ r(D.Item, { value: "eq", children: "=" }),
+          /* @__PURE__ */ r(D.Item, { value: "ne", children: "≠" }),
+          /* @__PURE__ */ r(D.Item, { value: "gt", children: ">" }),
+          /* @__PURE__ */ r(D.Item, { value: "gte", children: "≥" }),
+          /* @__PURE__ */ r(D.Item, { value: "lt", children: "<" }),
+          /* @__PURE__ */ r(D.Item, { value: "lte", children: "≤" }),
+          /* @__PURE__ */ r(D.Item, { value: "between", children: "↔" })
         ]
       }
-    )
-  ] }) });
+    ),
+    a === "between" ? /* @__PURE__ */ d(m, { d: "column", gap: 1, flex1: !0, children: [
+      /* @__PURE__ */ d(m, { ai: "center", position: "relative", flex1: !0, children: [
+        /* @__PURE__ */ r(
+          j,
+          {
+            type: "number",
+            variant: "compact",
+            placeholder: y.placeholder ?? "From",
+            value: l,
+            onChange: F,
+            width: "fit",
+            step: y.step
+          }
+        ),
+        (l !== "" || c !== "") && /* @__PURE__ */ r(m, { position: "absolute", right: 2, top: "1/2", translateY: "-1/2", cursor: "pointer", props: { onClick: G }, children: /* @__PURE__ */ r(g, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
+      ] }),
+      /* @__PURE__ */ r(m, { ai: "center", flex1: !0, children: /* @__PURE__ */ r(
+        j,
+        {
+          type: "number",
+          variant: "compact",
+          placeholder: "To",
+          value: c,
+          onChange: x,
+          width: "fit",
+          step: y.step
+        }
+      ) })
+    ] }) : /* @__PURE__ */ d(m, { ai: "center", position: "relative", flex1: !0, children: [
+      /* @__PURE__ */ r(
+        j,
+        {
+          type: "number",
+          variant: "compact",
+          placeholder: y.placeholder ?? "Value",
+          value: l,
+          onChange: F,
+          width: "fit",
+          step: y.step
+        }
+      ),
+      l !== "" && /* @__PURE__ */ r(m, { position: "absolute", right: 2, top: "1/2", translateY: "-1/2", cursor: "pointer", props: { onClick: G }, children: /* @__PURE__ */ r(g, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
+    ] })
+  ] });
 }
-ae.displayName = "DataGridHeaderCellContextMenu";
-function de(a) {
-  const { column: e } = a;
+function qe({ column: s, grid: e }) {
+  const t = e.columnFilters[s.key], i = t?.type === "multiselect" ? t.values : [], n = typeof s.def.filterable == "object" ? s.def.filterable : {}, o = Y(() => n.options ? n.options : e.getColumnUniqueValues(s.key).map((a) => ({
+    label: a === null ? "(empty)" : String(a),
+    value: a
+  })), [n.options, e, s.key]), l = k(
+    (u, a) => {
+      a.length === 0 ? e.setColumnFilter(s.key, void 0) : e.setColumnFilter(s.key, { type: "multiselect", values: a });
+    },
+    [e, s.key]
+  );
+  return /* @__PURE__ */ d(
+    D,
+    {
+      multiple: !0,
+      showCheckbox: !0,
+      isSearchable: !0,
+      searchPlaceholder: "Search...",
+      value: i,
+      width: "fit",
+      minWidth: 0,
+      onChange: l,
+      variant: "compact",
+      children: [
+        /* @__PURE__ */ r(D.Unselect, { children: "Clear" }),
+        /* @__PURE__ */ r(D.SelectAll, { children: "Select All" }),
+        o.map((u) => /* @__PURE__ */ r(D.Item, { value: u.value, ai: "center", gap: 2, children: u.label }, String(u.value)))
+      ]
+    }
+  );
+}
+function be(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__ */ r(de, { column: e, grid: t });
+    case "number":
+      return /* @__PURE__ */ r(Ue, { column: e, grid: t });
+    case "multiselect":
+      return /* @__PURE__ */ r(qe, { column: e, grid: t });
+    default:
+      return /* @__PURE__ */ r(de, { column: e, grid: t });
+  }
+}
+be.displayName = "DataGridColumnFilter";
+function xe(s) {
+  const { column: e, grid: t } = s, { key: i, pin: n, left: o, right: l, isEdge: u, widthVarName: a, leftVarName: h, rightVarName: c, filterable: p } = e, f = i === B, F = f || i === N || i === L || i === P, b = n === "LEFT", x = n === "RIGHT";
   return /* @__PURE__ */ r(
-    g,
+    m,
+    {
+      component: "datagrid.filter.cell",
+      variant: { isPinned: b || x, isFirstLeftPinned: b && o === 0, isLastLeftPinned: b && u, isFirstRightPinned: x && u, isLastRightPinned: x && l === 0 },
+      px: f ? 0 : 2,
+      style: {
+        width: `var(${a})`,
+        left: b ? `var(${h})` : void 0,
+        right: x ? `var(${c})` : void 0
+      },
+      children: !F && p && /* @__PURE__ */ r(be, { column: e, grid: t })
+    }
+  );
+}
+xe.displayName = "DataGridFilterCell";
+function Fe(s) {
+  const { grid: e } = s, { visibleLeafs: t } = e.columns.value;
+  return t.some((n) => n.filterable) ? t.map((n) => /* @__PURE__ */ r(xe, { column: n, grid: e }, n.uniqueKey)) : null;
+}
+Fe.displayName = "DataGridFilterRow";
+function Ge(s) {
+  const { column: e } = s, { key: t, pin: i, left: n, right: o, isEdge: l, isLeaf: u, align: a, header: h, grid: c } = e, [p, f, v] = me({ hideOnScroll: !0, event: "mousedown" }), [y, R] = W({ top: 0, left: 0 }), F = Y(() => y.left > window.innerWidth / 2, [y.left]), b = u && (c.sortColumn !== t || c.sortDirection === "DESC"), x = u && (c.sortColumn !== t || c.sortDirection === "ASC"), G = u && c.sortColumn === t, w = i !== "LEFT", C = i !== "RIGHT", S = !!i, _ = u && t !== N, V = u && t === N, I = b || x || G, K = w || C || S, J = a === "right" ? 2 : void 0, ee = a === "right" ? void 0 : i === "RIGHT" ? 2.5 : 4, te = t === B, $ = t === L, ie = t === P, U = i === "LEFT", q = i === "RIGHT";
+  return /* @__PURE__ */ r(m, { position: "absolute", left: J, right: ee, top: "1/2", translateY: -3, ai: "center", children: /* @__PURE__ */ d(
+    T,
+    {
+      component: "datagrid.header.cell.contextMenu",
+      onClick: () => f(!p),
+      variant: { isPinned: U || i === "RIGHT", isFirstLeftPinned: U && n === 0, isLastLeftPinned: U && l, isFirstRightPinned: q && l, isLastRightPinned: q && o === 0, isSortable: u && !te && !$ && !ie, isRowNumber: $ },
+      children: [
+        /* @__PURE__ */ r(E, { component: "datagrid.header.cell.contextMenu.icon", children: /* @__PURE__ */ r(Ee, { fill: "currentColor" }) }),
+        p && /* @__PURE__ */ d(
+          ge,
+          {
+            component: "datagrid.header.cell.contextMenu.tooltip",
+            onPositionChange: R,
+            ref: v,
+            adjustTranslateX: F ? "-100%" : "-21px",
+            adjustTranslateY: "16px",
+            children: [
+              b && /* @__PURE__ */ d(T, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("ASC"), children: [
+                /* @__PURE__ */ r(E, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(ne, { width: "100%", fill: "currentColor" }) }),
+                "Sort Ascending"
+              ] }),
+              x && /* @__PURE__ */ d(T, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn("DESC"), children: [
+                /* @__PURE__ */ r(E, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(ne, { width: "100%", fill: "currentColor", rotate: 180 }) }),
+                "Sort Descending"
+              ] }),
+              G && /* @__PURE__ */ d(T, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.sortColumn(void 0), children: [
+                /* @__PURE__ */ r(g, { width: 4 }),
+                "Clear Sort"
+              ] }),
+              I && (K || _ || V) && /* @__PURE__ */ r(g, { bb: 1, my: 2, borderColor: "gray-300", component: "datagrid.header.cell.contextMenu.tooltip.item.separator" }),
+              w && /* @__PURE__ */ d(T, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("LEFT"), children: [
+                /* @__PURE__ */ r(E, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(le, { width: "100%", fill: "currentColor" }) }),
+                "Pin Left"
+              ] }),
+              C && /* @__PURE__ */ d(T, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn("RIGHT"), children: [
+                /* @__PURE__ */ r(E, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(le, { width: "100%", fill: "currentColor", rotate: -90 }) }),
+                "Pin Right"
+              ] }),
+              S && /* @__PURE__ */ d(T, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: () => e.pinColumn(), children: [
+                /* @__PURE__ */ r(g, { width: 4 }),
+                "Unpin"
+              ] }),
+              I && K && (_ || V) && /* @__PURE__ */ r(g, { component: "datagrid.header.cell.contextMenu.tooltip.item.separator" }),
+              _ && /* @__PURE__ */ d(T, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: e.toggleGrouping, children: [
+                /* @__PURE__ */ r(E, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(re, { width: "100%", fill: "currentColor" }) }),
+                /* @__PURE__ */ d(g, { textWrap: "nowrap", children: [
+                  "Group by ",
+                  h ?? t
+                ] })
+              ] }),
+              V && /* @__PURE__ */ d(T, { component: "datagrid.header.cell.contextMenu.tooltip.item", onClick: c.unGroupAll, children: [
+                /* @__PURE__ */ r(E, { component: "datagrid.header.cell.contextMenu.tooltip.item.icon", children: /* @__PURE__ */ r(re, { width: "100%", fill: "currentColor" }) }),
+                /* @__PURE__ */ r(g, { textWrap: "nowrap", children: "Un-Group All" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+Ge.displayName = "DataGridHeaderCellContextMenu";
+function ke(s) {
+  const { column: e } = s;
+  return /* @__PURE__ */ r(
+    m,
     {
       height: "fit",
       ai: "center",
@@ -576,165 +935,216 @@ function de(a) {
       left: e.pin !== "RIGHT" ? void 0 : 0,
       py: 3,
       children: /* @__PURE__ */ r(
-        h,
+        g,
         {
           cursor: "col-resize",
           px: 0.75,
+          mt: -6,
           className: "resizer",
           height: "fit",
           props: { onMouseDown: e.resizeColumn, onTouchStart: e.resizeColumn },
-          children: /* @__PURE__ */ r(h, { component: "datagrid.header.cell.resizer" })
+          children: /* @__PURE__ */ r(g, { component: "datagrid.header.cell.resizer" })
         }
       )
     }
   );
 }
-de.displayName = "DataGridHeaderCellResizer";
-function ce(a) {
-  const { column: e } = a, { key: t, pin: i, left: n, right: o, isEdge: s, isLeaf: m, leafs: l, grid: d, header: c, gridRows: p, widthVarName: w, leftVarName: v, rightVarName: x, inlineWidth: C } = e, R = t === _, G = t === y, k = t === b, T = t === B, M = i === "LEFT", P = i === "RIGHT", F = M || i === "RIGHT", fe = M && n === 0, we = M && s, Ce = P && s, Re = P && o === 0, U = m && !R && !k && !T, ye = m ? 1 : l.length, ve = !k && !T, X = !k && !T, j = W(() => {
-    d.toggleSelectAllRows();
-  }, []), xe = H(() => {
-    if (k) return null;
-    if (T) {
-      const N = d.selectedRows.size === d.props.data.length, V = !N && d.selectedRows.size > 0;
-      return /* @__PURE__ */ r(I, { variant: "datagrid", m: 1, indeterminate: V, checked: N, onChange: j });
-    }
+ke.displayName = "DataGridHeaderCellResizer";
+function Te(s) {
+  const { column: e } = s, { key: t, pin: i, left: n, right: o, isEdge: l, isLeaf: u, leafs: a, grid: h, header: c, gridRows: p, widthVarName: f, leftVarName: v, rightVarName: y, inlineWidth: R } = e, F = t === B, b = t === N, x = t === L, G = t === P, w = i === "LEFT", C = i === "RIGHT", S = w || i === "RIGHT", _ = w && n === 0, V = w && l, I = C && l, K = C && o === 0, J = u && !F && !x && !G, ee = u ? 1 : a.length, te = !x && !G, $ = !x && !G, ie = G ? void 0 : e.align === "right" ? 10 : 3, U = G ? void 0 : e.align === "center" ? 3 : void 0, q = k(() => {
+    h.toggleSelectAllRows();
+  }, []), oe = Y(() => {
+    if (x) return null;
     if (G) {
-      if (d.groupColumns.size === 1) {
-        const N = d.columns.value.leafs.findOrThrow((V) => V.key === d.groupColumns.values().next().value);
-        return N.header ?? N.key;
+      const z = h.selectedRows.size === h.props.data.length, Q = !z && h.selectedRows.size > 0;
+      return /* @__PURE__ */ r(Z, { variant: "datagrid", m: 1, indeterminate: Q, checked: z, onChange: q });
+    }
+    if (b) {
+      if (h.groupColumns.size === 1) {
+        const z = h.columns.value.leafs.findOrThrow((Q) => Q.key === h.groupColumns.values().next().value);
+        return z.header ?? z.key;
       }
       return "Group";
     }
     return c ?? t;
-  }, [d.groupColumns, d.selectedRows, j]);
+  }, [h.groupColumns, h.selectedRows, q]);
   return /* @__PURE__ */ r(
-    g,
+    m,
     {
+      props: { role: "columnheader" },
       component: "datagrid.header.cell",
-      variant: { isRowNumber: k, isPinned: F, isFirstLeftPinned: fe, isLastLeftPinned: we, isFirstRightPinned: Ce, isLastRightPinned: Re, isSortable: U },
+      variant: { isPinned: S, isFirstLeftPinned: _, isLastLeftPinned: V, isFirstRightPinned: I, isLastRightPinned: K, isSortable: J, isRowNumber: x },
       gridRow: p,
-      gridColumn: ye,
+      gridColumn: ee,
       style: {
-        width: `var(${w})`,
-        left: M ? `var(${v})` : void 0,
-        right: P ? `var(${x})` : void 0
+        width: `var(${f})`,
+        left: w ? `var(${v})` : void 0,
+        right: C ? `var(${y})` : void 0
       },
-      children: !R && /* @__PURE__ */ u(Ge, { children: [
-        /* @__PURE__ */ r(g, { width: "fit", height: "fit", jc: e.align, props: { onClick: U ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ u(
-          g,
+      children: !F && /* @__PURE__ */ d(_e, { children: [
+        /* @__PURE__ */ r(m, { width: "fit", height: "fit", jc: e.align, props: { onClick: J ? () => e.sortColumn() : void 0 }, children: /* @__PURE__ */ d(
+          m,
           {
             overflow: "hidden",
-            position: m ? void 0 : "sticky",
+            position: u ? void 0 : "sticky",
             ai: "center",
             transition: "none",
-            pl: e.align === "right" ? 10 : 4,
+            pl: ie,
+            pr: U,
             style: {
-              left: i ? void 0 : `var(${d.leftEdgeVarName})`
+              left: i ? void 0 : `var(${h.leftEdgeVarName})`
             },
             children: [
-              /* @__PURE__ */ r(h, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: xe }),
-              t === d.sortColumn && /* @__PURE__ */ r(h, { pl: (C ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ r(A, { width: "16px", rotate: d.sortDirection === "ASC" ? 0 : 180, fill: "currentColor" }) }),
-              X && /* @__PURE__ */ r(h, { minWidth: e.align === "right" ? 4 : 10 })
+              /* @__PURE__ */ r(g, { overflow: "hidden", textOverflow: "ellipsis", textWrap: "nowrap", children: oe }),
+              t === h.sortColumn && /* @__PURE__ */ r(g, { pl: (R ?? 0) < 58 ? 0 : 2, children: /* @__PURE__ */ r(ne, { width: "16px", rotate: h.sortDirection === "ASC" ? 0 : 180, fill: "currentColor" }) }),
+              $ && /* @__PURE__ */ r(g, { minWidth: e.align === "right" ? 4 : 10 })
             ]
           }
         ) }),
-        ve && /* @__PURE__ */ r(de, { column: e }),
-        X && /* @__PURE__ */ r(ae, { column: e })
+        te && /* @__PURE__ */ r(ke, { column: e }),
+        $ && /* @__PURE__ */ r(Ge, { column: e })
       ] })
     }
   );
 }
-ce.displayName = "DataGridHeaderCell";
-function ue(a) {
-  const { grid: e } = a, { isResizeMode: t } = e;
-  return /* @__PURE__ */ r(ee, { component: "datagrid.header", variant: { isResizeMode: t }, style: { gridTemplateColumns: e.gridTemplateColumns.value }, children: e.headerRows.value.map((i) => i.map((n) => /* @__PURE__ */ r(ce, { column: n }, n.uniqueKey))) });
+Te.displayName = "DataGridHeaderCell";
+function Le(s) {
+  const { grid: e } = s, { isResizeMode: t } = e;
+  return /* @__PURE__ */ d(he, { component: "datagrid.header", variant: { isResizeMode: t }, style: { gridTemplateColumns: e.gridTemplateColumns.value }, children: [
+    e.headerRows.value.map((i) => i.map((n) => /* @__PURE__ */ r(Te, { column: n }, n.uniqueKey))),
+    /* @__PURE__ */ r(Fe, { grid: e })
+  ] });
 }
-ue.displayName = "DataGridHeader";
-function he(a) {
-  const { grid: e } = a, [t, i] = O(0), n = W(
-    J.throttle((o) => {
-      i(o.target.scrollTop);
-    }, 100),
-    []
-  );
-  return /* @__PURE__ */ u(h, { overflowX: "scroll", props: { onScroll: n }, children: [
-    /* @__PURE__ */ r(ue, { grid: e }),
-    /* @__PURE__ */ r(le, { grid: e, scrollTop: t })
+Le.displayName = "DataGridHeader";
+function Se(s) {
+  const { grid: e } = s, [t, i] = W(0), n = O(null), o = k((l) => {
+    n.current !== null && cancelAnimationFrame(n.current), n.current = requestAnimationFrame(() => {
+      i(l.target.scrollTop), n.current = null;
+    });
+  }, []);
+  return /* @__PURE__ */ d(g, { overflowX: "scroll", style: { willChange: "scroll-position" }, props: { onScroll: o }, children: [
+    /* @__PURE__ */ r(Le, { grid: e }),
+    /* @__PURE__ */ r(Re, { grid: e, scrollTop: t })
   ] });
 }
-he.displayName = "DataGridContent";
-function me(a) {
-  const { grid: e } = a;
-  return e.groupColumns.size === 0 ? null : /* @__PURE__ */ u(g, { component: "datagrid.topBar.columnGroups", children: [
-    /* @__PURE__ */ r(L, { component: "datagrid.topBar.columnGroups.icon", children: /* @__PURE__ */ r($, { width: "100%", fill: "currentColor" }) }),
+Se.displayName = "DataGridContent";
+function De(s) {
+  const { grid: e } = s;
+  return e.groupColumns.size === 0 ? null : /* @__PURE__ */ d(m, { component: "datagrid.topBar.columnGroups", children: [
+    /* @__PURE__ */ r(E, { component: "datagrid.topBar.columnGroups.icon", children: /* @__PURE__ */ r(re, { width: "100%", fill: "currentColor" }) }),
     Array.from(e.groupColumns, (t) => {
       const i = e.columns.value.leafs.findOrThrow((n) => n.key === t);
-      return /* @__PURE__ */ u(be.Fragment, { children: [
-        /* @__PURE__ */ r(Q, { fill: "currentColor", width: "14px", height: "14px", rotate: -90 }),
-        /* @__PURE__ */ u(g, { component: "datagrid.topBar.columnGroups.item", children: [
+      return /* @__PURE__ */ d(Be.Fragment, { children: [
+        /* @__PURE__ */ r(pe, { fill: "currentColor", width: "14px", height: "14px", rotate: -90 }),
+        /* @__PURE__ */ d(m, { component: "datagrid.topBar.columnGroups.item", children: [
           i.header ?? i.key,
-          /* @__PURE__ */ r(f, { component: "datagrid.topBar.columnGroups.item.icon", onClick: () => e.toggleGrouping(i.key), children: /* @__PURE__ */ r(De, { fill: "currentColor", width: "100%" }) })
+          /* @__PURE__ */ r(T, { component: "datagrid.topBar.columnGroups.item.icon", onClick: () => e.toggleGrouping(i.key), children: /* @__PURE__ */ r(g, { fontSize: 10, color: "gray-400", hover: { color: "gray-600" }, children: "✕" }) })
         ] })
       ] }, t);
     })
   ] });
 }
-me.displayName = "DataGridColumnGroups";
-function pe(a) {
-  const { grid: e } = a, [t, i, n] = Z({ event: "mousedown" }), o = H(
+De.displayName = "DataGridColumnGroups";
+function je(s) {
+  const { grid: e } = s, [t, i] = W(e.globalFilterValue), n = O(null);
+  A(() => () => {
+    n.current && clearTimeout(n.current);
+  }, []);
+  const o = k(
+    (c) => {
+      const p = c.target.value;
+      i(p), n.current && clearTimeout(n.current), n.current = setTimeout(() => {
+        e.setGlobalFilter(p), n.current = null;
+      }, 300);
+    },
+    [e]
+  ), l = k(() => {
+    i(""), e.setGlobalFilter("");
+  }, [e]), { filtered: u, total: a } = e.filterStats, h = e.hasActiveFilters && u !== a;
+  return /* @__PURE__ */ d(m, { component: "datagrid.topBar.globalFilter", children: [
+    h && /* @__PURE__ */ d(g, { component: "datagrid.topBar.globalFilter.stats", children: [
+      u,
+      " / ",
+      a
+    ] }),
+    /* @__PURE__ */ d(m, { component: "datagrid.topBar.globalFilter.inputWrapper", children: [
+      /* @__PURE__ */ r(m, { component: "datagrid.topBar.globalFilter.inputWrapper.icon", children: /* @__PURE__ */ r(Me, { fill: "currentColor", width: "1rem" }) }),
+      /* @__PURE__ */ r(
+        j,
+        {
+          component: "datagrid.topBar.globalFilter.inputWrapper.input",
+          placeholder: "Search...",
+          value: t,
+          onChange: o,
+          pl: 8,
+          pr: t ? 8 : 3,
+          height: 8,
+          width: 50
+        }
+      ),
+      t && /* @__PURE__ */ r(g, { component: "datagrid.topBar.globalFilter.inputWrapper.clear", props: { onClick: l }, children: "✕" })
+    ] })
+  ] });
+}
+function Ne(s) {
+  const { grid: e } = s, [t, i, n] = me({ event: "mousedown" }), o = Y(
     () => e.columns.value.leafs.filter(
-      (s) => ![_, b, B, y].includes(s.key)
+      (l) => ![B, L, P, N].includes(l.key)
     ),
     [e.columns.value.leafs]
   );
-  return /* @__PURE__ */ u(f, { component: "datagrid.topBar.contextMenu", onClick: () => i(!t), children: [
-    /* @__PURE__ */ r(Te, { viewBox: "0 0 24 24", width: "20", fill: "currentColor", ...a, children: /* @__PURE__ */ r("path", { d: "M5 6h14M5 12h14M5 18h14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
-    t && /* @__PURE__ */ r(te, { component: "datagrid.topBar.contextMenu.tooltip", ref: n, children: o.map((s) => /* @__PURE__ */ u(
-      f,
+  return /* @__PURE__ */ d(T, { component: "datagrid.topBar.contextMenu", onClick: () => i(!t), children: [
+    /* @__PURE__ */ r(We, { viewBox: "0 0 24 24", width: "20", fill: "currentColor", ...s, children: /* @__PURE__ */ r("path", { d: "M5 6h14M5 12h14M5 18h14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+    t && /* @__PURE__ */ r(ge, { component: "datagrid.topBar.contextMenu.tooltip", ref: n, children: o.map((l) => /* @__PURE__ */ d(
+      T,
       {
         component: "datagrid.topBar.contextMenu.tooltip.item",
-        onClick: (m) => {
-          m.stopPropagation(), s.toggleVisibility();
+        onClick: (u) => {
+          u.stopPropagation(), l.toggleVisibility();
         },
         children: [
-          /* @__PURE__ */ r(I, { variant: "datagrid", checked: s.isVisible, onChange: () => {
+          /* @__PURE__ */ r(Z, { variant: "datagrid", checked: l.isVisible, onChange: () => {
           }, focus: { outline: 0 } }),
-          s.header ?? s.key
+          l.header ?? l.key
         ]
       },
-      s.key
+      l.key
     )) })
   ] });
 }
-pe.displayName = "DataGridTopBarContextMenu";
-function ge(a) {
-  const { grid: e } = a;
-  return /* @__PURE__ */ u(g, { component: "datagrid.topBar", position: "relative", children: [
-    /* @__PURE__ */ r(pe, { grid: e }),
-    /* @__PURE__ */ r(me, { grid: e })
+Ne.displayName = "DataGridTopBarContextMenu";
+function Pe(s) {
+  const { grid: e } = s;
+  return /* @__PURE__ */ d(m, { component: "datagrid.topBar", position: "relative", ai: "center", jc: "space-between", children: [
+    /* @__PURE__ */ d(m, { ai: "center", gap: 2, children: [
+      /* @__PURE__ */ r(Ne, { grid: e }),
+      /* @__PURE__ */ r(De, { grid: e })
+    ] }),
+    e.props.def.globalFilter && /* @__PURE__ */ r(m, { position: "relative", pr: 2, children: /* @__PURE__ */ r(je, { grid: e }) })
   ] });
 }
-ge.displayName = "DataGridTopBar";
-function Pe(a) {
-  const [e, t] = O(0), i = ke();
-  return i.current || (i.current = new Me(a, () => t((n) => n + 1))), z(() => {
-    i.current.props = a, i.current.rows.clear(), i.current.flatRows.clear(), i.current.update();
-  }, [a.data]), z(() => {
-    i.current.props = a, 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();
-  }, [a.def]), z(() => {
-    i.current.props = a, i.current.update();
-  }, [a.loading]), i.current;
+Pe.displayName = "DataGridTopBar";
+function Xe(s) {
+  const [e, t] = W(0), i = O();
+  return i.current || (i.current = new ze(s, () => t((n) => n + 1))), A(() => {
+    i.current.props = s, i.current.rows.clear(), i.current.flatRows.clear(), i.current.update();
+  }, [s.data]), A(() => {
+    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]), A(() => {
+    i.current.props = s, i.current.update();
+  }, [s.loading]), A(() => {
+    i.current.props = s, i.current.rows.clear(), i.current.flatRows.clear(), i.current.update();
+  }, [s.globalFilterValue, s.columnFilters]), i.current;
 }
-function We(a) {
-  const e = Pe(a);
-  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render"), /* @__PURE__ */ u(h, { component: "datagrid", style: e.sizes.value, props: { role: "presentation" }, children: [
-    /* @__PURE__ */ r(ge, { grid: e }),
-    /* @__PURE__ */ r(he, { grid: e }),
-    /* @__PURE__ */ r(Se, { grid: e })
+function Ye(s) {
+  const e = Xe(s);
+  return console.debug("\x1B[36m%s\x1B[0m", "[react-box]: DataGrid render"), /* @__PURE__ */ d(g, { component: "datagrid", style: e.sizes.value, props: { role: "presentation" }, children: [
+    e.props.def.topBar && /* @__PURE__ */ r(Pe, { grid: e }),
+    /* @__PURE__ */ r(Se, { grid: e }),
+    e.props.def.bottomBar && /* @__PURE__ */ r(Ie, { grid: e })
   ] });
 }
-We.displayName = "DataGrid";
+Ye.displayName = "DataGrid";
 export {
-  We as default
+  Ye as default
 };