@taskctrl/canvas-grid 0.1.0 → 0.1.2

package/dist/canvas-grid.es.js

@@ -1,7 +1,7 @@
-import { jsxs as de, jsx as H } from "react/jsx-runtime";
-import { useRef as ne, useState as ve, useCallback as te, useEffect as re, memo as $t, forwardRef as Bt, useMemo as Ne, useImperativeHandle as Kt } from "react";
-import { createPortal as Ft } from "react-dom";
-class St {
+import { jsxs as be, jsx as _ } from "react/jsx-runtime";
+import { useRef as ce, useState as me, useCallback as le, useEffect as we, memo as wn, forwardRef as bn, useMemo as mt, useImperativeHandle as vn } from "react";
+import { createPortal as Cn } from "react-dom";
+class Zt {
   constructor(e) {
     this.scrollX = 0, this.scrollY = 0, this.canvasWidth = 0, this.canvasHeight = 0, this.rowHeight = 32, this.pinnedWidth = 0, this._columnOffsets = [], this._columnWidths = [], this._pinnedOffsets = [], this._pinnedWidths = [], this._scrollableOffsets = [], this._scrollableWidths = [], e && this.update(e);
   }
@@ -68,8 +68,8 @@ class St {
     return -1;
   }
 }
-const Ct = ["grid", "cells", "overlay"];
-class Ut {
+const Kt = ["grid", "cells", "overlay"];
+class yn {
   constructor(e) {
     this._dirty = { grid: !1, cells: !1, overlay: !1 }, this._rafId = null, this._drawFn = e;
   }
@@ -77,7 +77,7 @@ class Ut {
     this._dirty[e] = !0, this._rafId === null && (this._rafId = requestAnimationFrame(() => this._flush()));
   }
   markAllDirty() {
-    for (const e of Ct)
+    for (const e of Kt)
       this._dirty[e] = !0;
     this._rafId === null && (this._rafId = requestAnimationFrame(() => this._flush()));
   }
@@ -86,11 +86,11 @@ class Ut {
   }
   _flush() {
     this._rafId = null;
-    for (const e of Ct)
+    for (const e of Kt)
       this._dirty[e] && (this._dirty[e] = !1, this._drawFn(e));
   }
 }
-class Nt {
+class xn {
   constructor(e, o) {
     this._rows = e, this._expandedRows = o, this._depthMap = /* @__PURE__ */ new Map(), this._childrenMap = /* @__PURE__ */ new Map(), this._buildMaps(), this._flattenedRows = this._buildFlattenedRows();
   }
@@ -145,8 +145,8 @@ class Nt {
     return { startIndex: r, endIndex: c };
   }
 }
-const jt = 30;
-class Ie {
+const In = 30;
+class Pe {
   constructor(e) {
     this._columns = e;
   }
@@ -214,10 +214,10 @@ class Ie {
     const n = this.getScrollableColumns();
     if (n.length === 0) return { startIndex: 0, endIndex: 0 };
     const r = this.getPinnedWidth(), c = o - r;
-    let a = 0, m = 0, f = n.length - 1;
-    for (let R = 0; R < n.length; R++)
-      a + n[R].width <= e && (m = R + 1), a < e + c && (f = R), a += n[R].width;
-    return m = Math.min(m, n.length - 1), f = Math.min(f, n.length - 1), { startIndex: m, endIndex: f };
+    let a = 0, f = 0, u = n.length - 1;
+    for (let S = 0; S < n.length; S++)
+      a + n[S].width <= e && (f = S + 1), a < e + c && (u = S), a += n[S].width;
+    return f = Math.min(f, n.length - 1), u = Math.min(u, n.length - 1), { startIndex: f, endIndex: u };
   }
   /** Returns the range of pinned columns (always all of them). */
   getPinnedRange() {
@@ -227,32 +227,32 @@ class Ie {
   resize(e, o) {
     const n = this._columns.map((r) => {
       if (r.id !== e) return r;
-      const c = r.minWidth ?? jt;
+      const c = r.minWidth ?? In;
       return { ...r, width: Math.max(c, o) };
     });
-    return new Ie(n);
+    return new Pe(n);
   }
   reorder(e, o) {
-    const n = [...this._columns], r = n.findIndex((m) => m.id === e);
-    if (r === -1) return new Ie(n);
+    const n = [...this._columns], r = n.findIndex((f) => f.id === e);
+    if (r === -1) return new Pe(n);
     const [c] = n.splice(r, 1), a = Math.max(0, Math.min(o, n.length));
-    return n.splice(a, 0, c), new Ie(n);
+    return n.splice(a, 0, c), new Pe(n);
   }
   hide(e) {
     const o = this._columns.map((n) => n.id === e ? { ...n, hidden: !0 } : n);
-    return new Ie(o);
+    return new Pe(o);
   }
   show(e) {
     const o = this._columns.map(
       (n) => n.id === e ? { ...n, hidden: !1 } : n
     );
-    return new Ie(o);
+    return new Pe(o);
   }
 }
-function Se(t, e) {
+function ze(t, e) {
   return `${t}|${e}`;
 }
-function je() {
+function wt() {
   return {
     cells: /* @__PURE__ */ new Set(),
     rows: /* @__PURE__ */ new Set(),
@@ -260,22 +260,22 @@ function je() {
     anchor: void 0
   };
 }
-class qt {
+class Rn {
   constructor(e) {
     e ? this._selection = {
       cells: new Set(e.cells),
       rows: new Set(e.rows),
       columns: new Set(e.columns),
       anchor: e.anchor
-    } : this._selection = je();
+    } : this._selection = wt();
   }
   // Single click — clear previous, select one cell, set anchor
   click(e, o, n, r) {
-    this._selection = je(), this._selection.cells.add(Se(e, o)), this._selection.anchor = { rowId: e, colId: o };
+    this._selection = wt(), this._selection.cells.add(ze(e, o)), this._selection.anchor = { rowId: e, colId: o };
   }
   // Ctrl+click — toggle cell in/out of selection
   ctrlClick(e, o) {
-    const n = Se(e, o);
+    const n = ze(e, o);
     this._selection.cells.has(n) ? this._selection.cells.delete(n) : this._selection.cells.add(n), this._selection.anchor = { rowId: e, colId: o };
   }
   // Shift+click — select rectangle from anchor to target
@@ -285,30 +285,30 @@ class qt {
       this.click(e, o, n, r);
       return;
     }
-    const a = n.indexOf(c.rowId), m = n.indexOf(e), f = r.indexOf(c.colId), R = r.indexOf(o), y = Math.min(a, m), L = Math.max(a, m), O = Math.min(f, R), W = Math.max(f, R), S = /* @__PURE__ */ new Set();
-    for (let G = y; G <= L; G++)
-      for (let $ = O; $ <= W; $++)
-        S.add(Se(n[G], r[$]));
-    this._selection.cells = S, this._selection.rows = /* @__PURE__ */ new Set(), this._selection.columns = /* @__PURE__ */ new Set();
+    const a = n.indexOf(c.rowId), f = n.indexOf(e), u = r.indexOf(c.colId), S = r.indexOf(o), W = Math.min(a, f), L = Math.max(a, f), x = Math.min(u, S), H = Math.max(u, S), D = /* @__PURE__ */ new Set();
+    for (let B = W; B <= L; B++)
+      for (let E = x; E <= H; E++)
+        D.add(ze(n[B], r[E]));
+    this._selection.cells = D, this._selection.rows = /* @__PURE__ */ new Set(), this._selection.columns = /* @__PURE__ */ new Set();
   }
   // Select entire row
   selectRow(e, o) {
     for (const n of o)
-      this._selection.cells.add(Se(e, n));
+      this._selection.cells.add(ze(e, n));
     this._selection.rows.add(e), this._selection.anchor = { rowId: e, colId: o[0] ?? "" };
   }
   // Select entire column
   selectColumn(e, o) {
     for (const n of o)
-      this._selection.cells.add(Se(n, e));
+      this._selection.cells.add(ze(n, e));
     this._selection.columns.add(e), this._selection.anchor = { rowId: o[0] ?? "", colId: e };
   }
   // Clear all selection
   clear() {
-    this._selection = je();
+    this._selection = wt();
   }
   isSelected(e, o) {
-    return this._selection.cells.has(Se(e, o));
+    return this._selection.cells.has(ze(e, o));
   }
   isRowSelected(e) {
     return this._selection.rows.has(e);
@@ -326,233 +326,233 @@ class qt {
     };
   }
 }
-function Ve(t, e, o, n, r) {
+function rt(t, e, o, n, r) {
   const c = o.yToRow(e), a = n.flattenedRows;
   if (c < 0 || c >= a.length) return null;
-  const m = r.getPinnedColumns(), f = r.getPinnedWidth();
-  if (m.length > 0) {
-    if (t < f) {
-      let W = 0;
-      for (const S of m) {
-        if (t >= W && t < W + S.width)
-          return { rowId: a[c].id, colId: S.id };
-        W += S.width;
+  const f = r.getPinnedColumns(), u = r.getPinnedWidth();
+  if (f.length > 0) {
+    if (t < u) {
+      let H = 0;
+      for (const D of f) {
+        if (t >= H && t < H + D.width)
+          return { rowId: a[c].id, colId: D.id };
+        H += D.width;
       }
       return null;
     }
-    const y = t - f + o.scrollX, L = r.getScrollableColumns();
-    let O = 0;
-    for (const W of L) {
-      if (y >= O && y < O + W.width)
-        return { rowId: a[c].id, colId: W.id };
-      O += W.width;
+    const W = t - u + o.scrollX, L = r.getScrollableColumns();
+    let x = 0;
+    for (const H of L) {
+      if (W >= x && W < x + H.width)
+        return { rowId: a[c].id, colId: H.id };
+      x += H.width;
     }
     return null;
   }
-  const R = r.getColumnAtX(t + o.scrollX);
-  return R === null ? null : { rowId: a[c].id, colId: R };
+  const S = r.getColumnAtX(t + o.scrollX);
+  return S === null ? null : { rowId: a[c].id, colId: S };
 }
-function Jt(t, e, o) {
+function Sn(t, e, o) {
   const n = window.devicePixelRatio || 1;
   (t.width !== Math.round(e * n) || t.height !== Math.round(o * n)) && (t.width = Math.round(e * n), t.height = Math.round(o * n), t.style.width = `${e}px`, t.style.height = `${o}px`);
   const c = t.getContext("2d");
   return c.setTransform(n, 0, 0, n, 0, 0), c;
 }
-function kt(t, e, o, n, r = {}) {
-  const { canvasWidth: c, canvasHeight: a, rowHeight: m } = e, { rowStyle: f } = r;
+function Jt(t, e, o, n, r = {}) {
+  const { canvasWidth: c, canvasHeight: a, rowHeight: f } = e, { rowStyle: u } = r;
   t.clearRect(0, 0, c, a), t.fillStyle = "#f3f4f6", t.fillRect(0, 0, c, a);
-  const R = o.getVisibleRange(e.scrollY, a, m), y = o.flattenedRows, L = n.getPinnedColumns(), O = n.getScrollableColumns(), W = n.getPinnedWidth(), S = L.length > 0;
-  if (y.length === 0 || L.length === 0 && O.length === 0) return;
-  const G = n.getTotalWidth(), $ = Math.min(c, G - e.scrollX + (S ? e.scrollX : 0)), X = S ? Math.min(c, W + n.getScrollableColumns().reduce((T, C) => T + C.width, 0) - e.scrollX) : $, l = y.length * m, Y = Math.min(a, l - e.scrollY);
-  for (let T = R.startIndex; T <= R.endIndex; T++) {
-    const C = y[T];
-    if (!C) continue;
-    const D = e.rowToY(T), w = o.getDepth(C.id);
-    let h = T % 2 === 0 ? "#ffffff" : "#f9fafb";
-    if (f) {
-      const u = f(C, w);
-      u != null && u.backgroundColor && (h = u.backgroundColor);
+  const S = o.getVisibleRange(e.scrollY, a, f), W = o.flattenedRows, L = n.getPinnedColumns(), x = n.getScrollableColumns(), H = n.getPinnedWidth(), D = L.length > 0;
+  if (W.length === 0 || L.length === 0 && x.length === 0) return;
+  const B = n.getTotalWidth(), E = Math.min(c, B - e.scrollX + (D ? e.scrollX : 0)), Y = D ? Math.min(c, H + n.getScrollableColumns().reduce((I, w) => I + w.width, 0) - e.scrollX) : E, J = W.length * f, z = Math.min(a, J - e.scrollY);
+  for (let I = S.startIndex; I <= S.endIndex; I++) {
+    const w = W[I];
+    if (!w) continue;
+    const T = e.rowToY(I), p = o.getDepth(w.id);
+    let b = I % 2 === 0 ? "#ffffff" : "#f9fafb";
+    if (u) {
+      const M = u(w, p);
+      M != null && M.backgroundColor && (b = M.backgroundColor);
     }
-    t.fillStyle = h, t.fillRect(0, D, Math.max(X, W), m), t.strokeStyle = "#d1d5db", t.lineWidth = 0.5, t.beginPath(), t.moveTo(0, D + m), t.lineTo(Math.max(X, W), D + m), t.stroke();
+    t.fillStyle = b, t.fillRect(0, T, Math.max(Y, H), f), t.strokeStyle = "#d1d5db", t.lineWidth = 0.5, t.beginPath(), t.moveTo(0, T + f), t.lineTo(Math.max(Y, H), T + f), t.stroke();
   }
-  if (Y > 0) {
-    const T = n.getVisibleRange(e.scrollX, c);
+  if (z > 0) {
+    const I = n.getVisibleRange(e.scrollX, c);
     t.strokeStyle = "#d1d5db", t.lineWidth = 0.5;
-    for (let C = T.startIndex; C <= T.endIndex; C++) {
-      const D = O[C];
-      if (!D) continue;
-      const w = e.colToX(C, !1);
-      t.beginPath(), t.moveTo(w + D.width, 0), t.lineTo(w + D.width, Y), t.stroke();
+    for (let w = I.startIndex; w <= I.endIndex; w++) {
+      const T = x[w];
+      if (!T) continue;
+      const p = e.colToX(w, !1);
+      t.beginPath(), t.moveTo(p + T.width, 0), t.lineTo(p + T.width, z), t.stroke();
     }
   }
-  if (S && Y > 0) {
-    t.fillStyle = "#ffffff", t.fillRect(0, 0, W, a);
-    for (let C = R.startIndex; C <= R.endIndex; C++) {
-      const D = y[C];
-      if (!D) continue;
-      const w = e.rowToY(C), h = o.getDepth(D.id);
-      let u = C % 2 === 0 ? "#ffffff" : "#f9fafb";
-      if (f) {
-        const x = f(D, h);
-        x != null && x.backgroundColor && (u = x.backgroundColor);
+  if (D && z > 0) {
+    t.fillStyle = "#ffffff", t.fillRect(0, 0, H, a);
+    for (let w = S.startIndex; w <= S.endIndex; w++) {
+      const T = W[w];
+      if (!T) continue;
+      const p = e.rowToY(w), b = o.getDepth(T.id);
+      let M = w % 2 === 0 ? "#ffffff" : "#f9fafb";
+      if (u) {
+        const R = u(T, b);
+        R != null && R.backgroundColor && (M = R.backgroundColor);
       }
-      t.fillStyle = u, t.fillRect(0, w, W, m), t.strokeStyle = "#d1d5db", t.lineWidth = 0.5, t.beginPath(), t.moveTo(0, w + m), t.lineTo(W, w + m), t.stroke();
+      t.fillStyle = M, t.fillRect(0, p, H, f), t.strokeStyle = "#d1d5db", t.lineWidth = 0.5, t.beginPath(), t.moveTo(0, p + f), t.lineTo(H, p + f), t.stroke();
     }
-    const T = n.getPinnedRange();
+    const I = n.getPinnedRange();
     t.strokeStyle = "#d1d5db", t.lineWidth = 0.5;
-    for (let C = T.startIndex; C <= T.endIndex; C++) {
-      const D = L[C];
-      if (!D) continue;
-      const w = e.colToX(C, !0);
-      t.beginPath(), t.moveTo(w + D.width, 0), t.lineTo(w + D.width, Y), t.stroke();
+    for (let w = I.startIndex; w <= I.endIndex; w++) {
+      const T = L[w];
+      if (!T) continue;
+      const p = e.colToX(w, !0);
+      t.beginPath(), t.moveTo(p + T.width, 0), t.lineTo(p + T.width, z), t.stroke();
     }
-    t.strokeStyle = "#d1d5db", t.lineWidth = 1, t.beginPath(), t.moveTo(W, 0), t.lineTo(W, Y), t.stroke();
+    t.strokeStyle = "#d1d5db", t.lineWidth = 1, t.beginPath(), t.moveTo(H, 0), t.lineTo(H, z), t.stroke();
   }
 }
-function Qt(t) {
-  function e(a, m, f, R, y, L) {
-    t.fillStyle = L, t.beginPath(), t.roundRect(a, m, f, R, y), t.fill();
-  }
-  function o(a, m, f, R) {
-    t.fillText(a, m, f, R);
-  }
-  function n(a, m) {
-    if (t.measureText(a).width <= m) return a;
-    let f = a;
-    for (; f.length > 0; )
-      if (f = f.slice(0, -1), t.measureText(f + "…").width <= m)
-        return f + "…";
+function kn(t) {
+  function e(a, f, u, S, W, L) {
+    t.fillStyle = L, t.beginPath(), t.roundRect(a, f, u, S, W), t.fill();
+  }
+  function o(a, f, u, S) {
+    t.fillText(a, f, u, S);
+  }
+  function n(a, f) {
+    if (t.measureText(a).width <= f) return a;
+    let u = a;
+    for (; u.length > 0; )
+      if (u = u.slice(0, -1), t.measureText(u + "…").width <= f)
+        return u + "…";
     return "…";
   }
-  function r(a, m, f, R, y) {
-    const S = t.measureText(f).width + 16;
-    return e(a, m, S, 20, 20 / 2, R), t.fillStyle = y, t.fillText(f, a + 8, m + 20 / 2), S;
+  function r(a, f, u, S, W) {
+    const D = t.measureText(u).width + 16;
+    return e(a, f, D, 20, 20 / 2, S), t.fillStyle = W, t.fillText(u, a + 8, f + 20 / 2), D;
   }
-  function c(a, m, f, R, y, L) {
-    e(a, m, f, R, R / 2, "#d1d5db");
-    const O = f * Math.max(0, Math.min(1, y));
-    O > 0 && e(a, m, O, R, R / 2, L);
+  function c(a, f, u, S, W, L) {
+    e(a, f, u, S, S / 2, "#d1d5db");
+    const x = u * Math.max(0, Math.min(1, W));
+    x > 0 && e(a, f, x, S, S / 2, L);
   }
   return { roundRect: e, fillText: o, truncateText: n, badge: r, progressBar: c };
 }
-function _t(t, e, o, n, r, c) {
-  const { canvasWidth: a, canvasHeight: m, rowHeight: f } = e, { cellRenderer: R, getCellData: y, hoveredCell: L } = c;
-  t.clearRect(0, 0, a, m);
-  const O = o.getVisibleRange(e.scrollY, m, f), W = o.flattenedRows, S = n.getPinnedColumns(), G = n.getScrollableColumns(), $ = S.length > 0;
-  if (W.length === 0 || S.length === 0 && G.length === 0) return;
-  const X = Qt(t), l = (T, C, D, w) => {
-    const h = { x: D, y: w, width: C.width, height: f }, u = { rowId: T.id, colId: C.id, data: y(T.id, C.id) }, x = {
-      selected: r.isSelected(T.id, C.id),
-      hovered: L != null && L.rowId === T.id && L.colId === C.id,
-      rowSelected: r.isRowSelected(T.id),
-      colSelected: r.isColumnSelected(C.id),
+function Qt(t, e, o, n, r, c) {
+  const { canvasWidth: a, canvasHeight: f, rowHeight: u } = e, { cellRenderer: S, getCellData: W, hoveredCell: L } = c;
+  c.clearBackground !== !1 && t.clearRect(0, 0, a, f);
+  const x = o.getVisibleRange(e.scrollY, f, u), H = o.flattenedRows, D = n.getPinnedColumns(), B = n.getScrollableColumns(), E = D.length > 0;
+  if (H.length === 0 || D.length === 0 && B.length === 0) return;
+  const Y = kn(t), J = (I, w, T, p) => {
+    const b = { x: T, y: p, width: w.width, height: u }, M = { rowId: I.id, colId: w.id, data: W(I.id, w.id) }, R = {
+      selected: r.isSelected(I.id, w.id),
+      hovered: L != null && L.rowId === I.id && L.colId === w.id,
+      rowSelected: r.isRowSelected(I.id),
+      colSelected: r.isColumnSelected(w.id),
       filtered: !0,
-      depth: o.getDepth(T.id),
-      hasChildren: o.hasChildren(T.id),
-      expanded: o.isExpanded(T.id)
+      depth: o.getDepth(I.id),
+      hasChildren: o.hasChildren(I.id),
+      expanded: o.isExpanded(I.id)
     };
-    t.save(), t.beginPath(), t.rect(D, w, C.width, f), t.clip(), R(t, u, h, x, X), t.restore();
-  }, Y = n.getVisibleRange(e.scrollX, a);
-  for (let T = O.startIndex; T <= O.endIndex; T++) {
-    const C = W[T];
-    if (!C) continue;
-    const D = e.rowToY(T);
-    for (let w = Y.startIndex; w <= Y.endIndex; w++) {
-      const h = G[w];
-      if (!h) continue;
-      const u = e.colToX(w, $ ? !1 : void 0);
-      l(C, h, u, D);
+    t.save(), t.beginPath(), t.rect(T, p, w.width, u), t.clip(), S(t, M, b, R, Y), t.restore();
+  }, z = n.getVisibleRange(e.scrollX, a);
+  for (let I = x.startIndex; I <= x.endIndex; I++) {
+    const w = H[I];
+    if (!w) continue;
+    const T = e.rowToY(I);
+    for (let p = z.startIndex; p <= z.endIndex; p++) {
+      const b = B[p];
+      if (!b) continue;
+      const M = e.colToX(p, E ? !1 : void 0);
+      J(w, b, M, T);
     }
   }
-  if ($) {
+  if (E) {
     n.getPinnedWidth();
-    const T = n.getPinnedRange();
-    for (let C = O.startIndex; C <= O.endIndex; C++) {
-      const D = W[C];
-      if (!D) continue;
-      const w = e.rowToY(C);
+    const I = n.getPinnedRange();
+    for (let w = x.startIndex; w <= x.endIndex; w++) {
+      const T = H[w];
+      if (!T) continue;
+      const p = e.rowToY(w);
       t.save(), t.fillStyle = "#ffffff", t.restore();
-      for (let h = T.startIndex; h <= T.endIndex; h++) {
-        const u = S[h];
-        if (!u) continue;
-        const x = e.colToX(h, !0);
-        l(D, u, x, w);
+      for (let b = I.startIndex; b <= I.endIndex; b++) {
+        const M = D[b];
+        if (!M) continue;
+        const R = e.colToX(b, !0);
+        J(T, M, R, p);
       }
     }
   }
 }
-function Zt(t, e, o, n, r, c = {}) {
-  const { canvasWidth: a, canvasHeight: m, rowHeight: f } = e, { hoveredCell: R, hoveredRowId: y, selectedCell: L, resizingColumn: O, loading: W } = c;
-  t.clearRect(0, 0, a, m);
-  const S = o.getVisibleRange(e.scrollY, m, f), G = o.flattenedRows, $ = n.getPinnedColumns(), X = n.getScrollableColumns(), l = $.length > 0;
-  if (n.getPinnedWidth(), G.length === 0 || $.length === 0 && X.length === 0) return;
-  const Y = n.getVisibleRange(e.scrollX, a), T = n.getPinnedRange(), C = (w) => {
-    for (let h = Y.startIndex; h <= Y.endIndex; h++) {
-      const u = X[h];
-      if (!u) continue;
-      const x = l ? e.colToX(h, !1) : e.colToX(h);
-      w(u, x);
+function Mn(t, e, o, n, r, c = {}) {
+  const { canvasWidth: a, canvasHeight: f, rowHeight: u } = e, { hoveredCell: S, hoveredRowId: W, selectedCell: L, resizingColumn: x, loading: H } = c;
+  t.clearRect(0, 0, a, f);
+  const D = o.getVisibleRange(e.scrollY, f, u), B = o.flattenedRows, E = n.getPinnedColumns(), Y = n.getScrollableColumns(), J = E.length > 0;
+  if (n.getPinnedWidth(), B.length === 0 || E.length === 0 && Y.length === 0) return;
+  const z = n.getVisibleRange(e.scrollX, a), I = n.getPinnedRange(), w = (p) => {
+    for (let b = z.startIndex; b <= z.endIndex; b++) {
+      const M = Y[b];
+      if (!M) continue;
+      const R = J ? e.colToX(b, !1) : e.colToX(b);
+      p(M, R);
     }
-    if (l)
-      for (let h = T.startIndex; h <= T.endIndex; h++) {
-        const u = $[h];
-        if (!u) continue;
-        const x = e.colToX(h, !0);
-        w(u, x);
+    if (J)
+      for (let b = I.startIndex; b <= I.endIndex; b++) {
+        const M = E[b];
+        if (!M) continue;
+        const R = e.colToX(b, !0);
+        p(M, R);
       }
   };
   if (L) {
-    for (let w = S.startIndex; w <= S.endIndex; w++) {
-      const h = G[w];
-      if (!h || h.id !== L.rowId) continue;
-      const u = e.rowToY(w);
-      C((x, F) => {
-        t.fillStyle = "rgba(59,130,246,0.06)", t.fillRect(F, u, x.width, f);
+    for (let p = D.startIndex; p <= D.endIndex; p++) {
+      const b = B[p];
+      if (!b || b.id !== L.rowId) continue;
+      const M = e.rowToY(p);
+      w((R, N) => {
+        t.fillStyle = "rgba(59,130,246,0.06)", t.fillRect(N, M, R.width, u);
       });
       break;
     }
-    C((w, h) => {
-      if (w.id === L.colId)
-        for (let u = S.startIndex; u <= S.endIndex; u++) {
-          if (!G[u]) continue;
-          const F = e.rowToY(u);
-          t.fillStyle = "rgba(59,130,246,0.06)", t.fillRect(h, F, w.width, f);
+    w((p, b) => {
+      if (p.id === L.colId)
+        for (let M = D.startIndex; M <= D.endIndex; M++) {
+          if (!B[M]) continue;
+          const N = e.rowToY(M);
+          t.fillStyle = "rgba(59,130,246,0.06)", t.fillRect(b, N, p.width, u);
         }
     });
   }
-  const D = (w, h, u, x, F) => {
-    const B = w.width, K = f, d = r.isSelected(u.id, w.id), M = r.isRowSelected(u.id), P = r.isColumnSelected(w.id), z = y != null && y === u.id, V = R != null && R.rowId === u.id && R.colId === w.id;
-    d ? (t.fillStyle = "rgba(59,130,246,0.12)", t.fillRect(h, x, B, K), t.strokeStyle = "#3b82f6", t.lineWidth = 2, t.strokeRect(h + 1, x + 1, B - 2, K - 2)) : M || P || V ? (t.fillStyle = "rgba(59,130,246,0.08)", t.fillRect(h, x, B, K)) : z && (t.fillStyle = "rgba(59,130,246,0.04)", t.fillRect(h, x, B, K));
+  const T = (p, b, M, R, N) => {
+    const l = p.width, ne = u, De = r.isSelected(M.id, p.id), ke = r.isRowSelected(M.id), d = r.isColumnSelected(p.id), P = W != null && W === M.id, $ = S != null && S.rowId === M.id && S.colId === p.id;
+    De ? (t.fillStyle = "rgba(59,130,246,0.12)", t.fillRect(b, R, l, ne), t.strokeStyle = "#3b82f6", t.lineWidth = 2, t.strokeRect(b + 1, R + 1, l - 2, ne - 2)) : ke || d || $ ? (t.fillStyle = "rgba(59,130,246,0.08)", t.fillRect(b, R, l, ne)) : P && (t.fillStyle = "rgba(59,130,246,0.04)", t.fillRect(b, R, l, ne));
   };
-  for (let w = S.startIndex; w <= S.endIndex; w++) {
-    const h = G[w];
-    if (!h) continue;
-    const u = e.rowToY(w);
-    for (let x = Y.startIndex; x <= Y.endIndex; x++) {
-      const F = X[x];
-      if (!F) continue;
-      const B = l ? e.colToX(x, !1) : e.colToX(x);
-      D(F, B, h, u);
+  for (let p = D.startIndex; p <= D.endIndex; p++) {
+    const b = B[p];
+    if (!b) continue;
+    const M = e.rowToY(p);
+    for (let R = z.startIndex; R <= z.endIndex; R++) {
+      const N = Y[R];
+      if (!N) continue;
+      const l = J ? e.colToX(R, !1) : e.colToX(R);
+      T(N, l, b, M);
     }
   }
-  if (l)
-    for (let w = S.startIndex; w <= S.endIndex; w++) {
-      const h = G[w];
-      if (!h) continue;
-      const u = e.rowToY(w);
-      for (let x = T.startIndex; x <= T.endIndex; x++) {
-        const F = $[x];
-        if (!F) continue;
-        const B = e.colToX(x, !0);
-        D(F, B, h, u);
+  if (J)
+    for (let p = D.startIndex; p <= D.endIndex; p++) {
+      const b = B[p];
+      if (!b) continue;
+      const M = e.rowToY(p);
+      for (let R = I.startIndex; R <= I.endIndex; R++) {
+        const N = E[R];
+        if (!N) continue;
+        const l = e.colToX(R, !0);
+        T(N, l, b, M);
       }
     }
-  if (O && (t.save(), t.strokeStyle = "#3b82f6", t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(O.x, 0), t.lineTo(O.x, m), t.stroke(), t.setLineDash([]), t.restore()), W) {
-    const h = m - 32;
-    t.fillStyle = "#f3f4f6", t.fillRect(0, h, a, 32), t.strokeStyle = "#e5e7eb", t.lineWidth = 1, t.beginPath(), t.moveTo(0, h), t.lineTo(a, h), t.stroke(), t.fillStyle = "#6b7280", t.font = "13px system-ui, sans-serif", t.textAlign = "center", t.textBaseline = "middle", t.fillText("Loading...", a / 2, h + 32 / 2);
+  if (x && (t.save(), t.strokeStyle = "#3b82f6", t.lineWidth = 1, t.setLineDash([4, 4]), t.beginPath(), t.moveTo(x.x, 0), t.lineTo(x.x, f), t.stroke(), t.setLineDash([]), t.restore()), H) {
+    const b = f - 32;
+    t.fillStyle = "#f3f4f6", t.fillRect(0, b, a, 32), t.strokeStyle = "#e5e7eb", t.lineWidth = 1, t.beginPath(), t.moveTo(0, b), t.lineTo(a, b), t.stroke(), t.fillStyle = "#6b7280", t.font = "13px system-ui, sans-serif", t.textAlign = "center", t.textBaseline = "middle", t.fillText("Loading...", a / 2, b + 32 / 2);
   }
 }
-function en({
+function _n({
   treeEngine: t,
   width: e,
   rowHeight: o,
@@ -560,54 +560,54 @@ function en({
   viewportHeight: r,
   sidebarRenderer: c,
   onToggle: a,
-  onRowClick: m,
-  hoveredRowId: f,
-  onRowHover: R
+  onRowClick: f,
+  hoveredRowId: u,
+  onRowHover: S
 }) {
-  const y = t.flattenedRows, { startIndex: L, endIndex: O } = t.getVisibleRange(n, r, o), W = [];
-  for (let $ = L; $ <= O; $++) {
-    const X = y[$];
-    if (!X) continue;
-    const l = t.getDepth(X.id), Y = t.hasChildren(X.id), T = t.isExpanded(X.id), C = $ * o;
-    let D;
+  const W = t.flattenedRows, { startIndex: L, endIndex: x } = t.getVisibleRange(n, r, o), H = [];
+  for (let E = L; E <= x; E++) {
+    const Y = W[E];
+    if (!Y) continue;
+    const J = t.getDepth(Y.id), z = t.hasChildren(Y.id), I = t.isExpanded(Y.id), w = E * o;
+    let T;
     if (c)
-      D = c(X, l, T, Y);
+      T = c(Y, J, I, z);
     else {
-      const h = l * 16 + 8;
-      D = /* @__PURE__ */ de(
+      const b = J * 16 + 8;
+      T = /* @__PURE__ */ be(
         "div",
         {
           style: {
             display: "flex",
             alignItems: "center",
             height: "100%",
-            paddingLeft: h,
+            paddingLeft: b,
             overflow: "hidden",
             whiteSpace: "nowrap",
-            cursor: Y ? "pointer" : "default",
+            cursor: z ? "pointer" : "default",
             userSelect: "none"
           },
-          onPointerDown: Y ? (u) => {
-            u.stopPropagation(), a(X.id);
+          onPointerDown: z ? (M) => {
+            M.stopPropagation(), a(Y.id);
           } : void 0,
           children: [
-            Y ? /* @__PURE__ */ H("span", { style: { marginRight: 4, flexShrink: 0, fontSize: 10, color: "#6b7280" }, children: T ? "▾" : "▸" }) : /* @__PURE__ */ H("span", { style: { width: 14, flexShrink: 0 } }),
-            /* @__PURE__ */ H("span", { style: { overflow: "hidden", textOverflow: "ellipsis", fontSize: 12 }, children: String(X.title ?? X.id) })
+            z ? /* @__PURE__ */ _("span", { style: { marginRight: 4, flexShrink: 0, fontSize: 10, color: "#6b7280" }, children: I ? "▾" : "▸" }) : /* @__PURE__ */ _("span", { style: { width: 14, flexShrink: 0 } }),
+            /* @__PURE__ */ _("span", { style: { overflow: "hidden", textOverflow: "ellipsis", fontSize: 12 }, children: String(Y.title ?? Y.id) })
           ]
         }
       );
     }
-    const w = f === X.id;
-    W.push(
-      /* @__PURE__ */ H(
+    const p = u === Y.id;
+    H.push(
+      /* @__PURE__ */ _(
         "div",
         {
           role: "rowheader",
-          "aria-level": l + 1,
-          "aria-expanded": Y ? T : void 0,
+          "aria-level": J + 1,
+          "aria-expanded": z ? I : void 0,
           style: {
             position: "absolute",
-            top: C,
+            top: w,
             left: 0,
             width: "100%",
             height: o,
@@ -615,20 +615,20 @@ function en({
             fontSize: 13,
             color: "#374151",
             borderBottom: "1px solid #e5e7eb",
-            cursor: m ? "pointer" : "default",
-            backgroundColor: w ? "rgba(59,130,246,0.04)" : void 0
+            cursor: f ? "pointer" : "default",
+            backgroundColor: p ? "rgba(59,130,246,0.04)" : void 0
           },
-          onPointerDown: m ? (h) => m(X.id, h) : void 0,
-          onPointerEnter: () => R == null ? void 0 : R(X.id),
-          onPointerLeave: () => R == null ? void 0 : R(null),
-          children: D
+          onPointerDown: f ? (b) => f(Y.id, b) : void 0,
+          onPointerEnter: () => S == null ? void 0 : S(Y.id),
+          onPointerLeave: () => S == null ? void 0 : S(null),
+          children: T
         },
-        String(X.id)
+        String(Y.id)
       )
     );
   }
-  const S = y.length * o, G = Math.min(r, S - n);
-  return /* @__PURE__ */ de(
+  const D = W.length * o, B = Math.min(r, D - n);
+  return /* @__PURE__ */ be(
     "div",
     {
       style: {
@@ -640,7 +640,7 @@ function en({
         backgroundColor: "#ffffff"
       },
       children: [
-        /* @__PURE__ */ H(
+        /* @__PURE__ */ _(
           "div",
           {
             style: {
@@ -648,13 +648,13 @@ function en({
               top: 0,
               right: 0,
               width: 1,
-              height: Math.max(0, G),
+              height: Math.max(0, B),
               backgroundColor: "#e5e7eb",
               zIndex: 1
             }
           }
         ),
-        /* @__PURE__ */ H(
+        /* @__PURE__ */ _(
           "div",
           {
             style: {
@@ -662,18 +662,18 @@ function en({
               top: 0,
               left: 0,
               width: "100%",
-              height: S,
+              height: D,
               transform: `translateY(-${n}px)`
             },
-            children: W
+            children: H
           }
         )
       ]
     }
   );
 }
-const qe = 28, Je = 28, tn = 4;
-function nn(t) {
+const bt = 28, vt = 28, Tn = 4;
+function Wn(t) {
   switch (t) {
     case "vertical":
       return 120;
@@ -681,133 +681,156 @@ function nn(t) {
       return 32;
   }
 }
-function on({
+function Hn({ active: t }) {
+  return /* @__PURE__ */ _(
+    "svg",
+    {
+      width: 13,
+      height: 13,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: t ? "#2563eb" : "#9ca3af",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ _("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })
+    }
+  );
+}
+function Dn({
   columnEngine: t,
   columnGroups: e,
   scrollX: o,
   orientation: n = "horizontal",
-  onColumnClick: r,
-  onColumnResize: c,
-  onColumnReorder: a,
-  columnHeaderRenderer: m
+  columnHeaderHeight: r,
+  onColumnClick: c,
+  onColumnResize: a,
+  onColumnReorder: f,
+  onColumnFilterClick: u,
+  columnHeaderRenderer: S
 }) {
-  const f = t.getPinnedColumns(), R = t.getScrollableColumns(), y = t.getVisibleColumns(), L = t.getPinnedWidth(), O = /* @__PURE__ */ new Map();
+  const W = t.getPinnedColumns(), L = t.getScrollableColumns(), x = t.getVisibleColumns(), H = t.getPinnedWidth(), D = /* @__PURE__ */ new Map();
   if (e)
     for (const d of e)
-      O.set(d.id, d);
-  const W = ne(null), [S, G] = ve(null), $ = ne(null), X = ne(!1), l = ne(null), Y = ne(null);
-  $.current = S;
-  const T = [...f, ...R], C = [];
+      D.set(d.id, d);
+  const B = ce(null), [E, Y] = me(null), J = ce(null), z = ce(!1), I = ce(null), w = ce(null);
+  J.current = E;
+  const T = [...W, ...L], p = [];
   if (e && e.length > 0) {
-    let d, M = 0, P = 0, z = !1;
-    for (const V of T) {
-      const q = t.getColumnX(V.id), J = V.pinned === "left";
-      if (V.group !== d) {
-        if (d !== void 0 && P > 0) {
-          const Q = O.get(d);
-          Q && C.push({ group: Q, startX: M, width: P, pinned: z });
+    let d, P = 0, $ = 0, V = !1;
+    for (const G of T) {
+      const U = t.getColumnX(G.id), F = G.pinned === "left";
+      if (G.group !== d) {
+        if (d !== void 0 && $ > 0) {
+          const se = D.get(d);
+          se && p.push({ group: se, startX: P, width: $, pinned: V });
         }
-        d = V.group, M = q, P = V.width, z = J;
+        d = G.group, P = U, $ = G.width, V = F;
       } else
-        P += V.width;
+        $ += G.width;
     }
-    if (d !== void 0 && P > 0) {
-      const V = O.get(d);
-      V && C.push({ group: V, startX: M, width: P, pinned: z });
+    if (d !== void 0 && $ > 0) {
+      const G = D.get(d);
+      G && p.push({ group: G, startX: P, width: $, pinned: V });
     }
   }
-  const D = C.length > 0, w = nn(n), h = D ? qe + w : w, u = te(
-    (d, M) => {
-      M.stopPropagation(), M.preventDefault();
-      const P = y.find((z) => z.id === d);
-      P && (W.current = { colId: d, startX: M.clientX, startWidth: P.width });
+  const b = p.length > 0, M = r ?? Wn(n), R = b ? bt + M : M, N = le(
+    (d, P) => {
+      P.stopPropagation(), P.preventDefault();
+      const $ = x.find((V) => V.id === d);
+      $ && (B.current = { colId: d, startX: P.clientX, startWidth: $.width });
     },
-    [y]
+    [x]
   );
-  re(() => {
-    const d = (P) => {
-      const z = W.current;
-      if (!z) return;
-      const V = P.clientX - z.startX, q = Math.max(z.startWidth + V, 30);
-      c == null || c(z.colId, q);
-    }, M = () => {
-      W.current = null;
+  we(() => {
+    const d = ($) => {
+      const V = B.current;
+      if (!V) return;
+      const G = $.clientX - V.startX, U = Math.max(V.startWidth + G, 30);
+      a == null || a(V.colId, U);
+    }, P = () => {
+      B.current = null;
     };
-    return document.addEventListener("mousemove", d), document.addEventListener("mouseup", M), () => {
-      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", M);
+    return document.addEventListener("mousemove", d), document.addEventListener("mouseup", P), () => {
+      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", P);
     };
-  }, [c]);
-  const x = te(
+  }, [a]);
+  const l = le(
     (d) => {
-      const M = Y.current;
-      if (!M) return { dropIndex: 0 };
-      const P = M.getBoundingClientRect(), z = d - P.left + o;
-      let V = 0;
-      for (let q = 0; q < y.length; q++) {
-        const J = y[q], le = t.getColumnX(J.id) + J.width / 2;
-        z > le && (V = q + 1);
+      const P = w.current;
+      if (!P) return { dropIndex: 0 };
+      const $ = P.getBoundingClientRect(), V = d - $.left + o;
+      let G = 0;
+      for (let U = 0; U < x.length; U++) {
+        const F = x[U], pe = t.getColumnX(F.id) + F.width / 2;
+        V > pe && (G = U + 1);
       }
-      return { dropIndex: V };
+      return { dropIndex: G };
     },
-    [y, t, o]
-  ), F = te(
-    (d, M) => {
-      M.target.dataset.resizeHandle || a && (M.preventDefault(), X.current = !1, l.current = { colId: d, startX: M.clientX, currentX: M.clientX });
+    [x, t, o]
+  ), ne = le(
+    (d, P) => {
+      P.target.dataset.resizeHandle || f && (P.preventDefault(), z.current = !1, I.current = { colId: d, startX: P.clientX, currentX: P.clientX });
     },
-    [a]
+    [f]
   );
-  re(() => {
-    if (!a) return;
-    const d = (z) => {
-      const V = l.current;
-      if (!V) return;
-      const q = Math.abs(z.clientX - V.startX);
-      if (!X.current && q >= tn) {
-        X.current = !0;
-        const J = y.find((Pe) => Pe.id === V.colId), Q = t.getColumnX(V.colId), { dropIndex: le } = x(z.clientX);
-        G({
-          colId: V.colId,
-          startX: V.startX,
-          currentX: z.clientX,
-          dropIndex: le,
-          ghostLeft: Q - o,
-          ghostWidth: (J == null ? void 0 : J.width) ?? 80,
-          ghostTitle: (J == null ? void 0 : J.title) ?? ""
+  we(() => {
+    if (!f) return;
+    const d = (V) => {
+      const G = I.current;
+      if (!G) return;
+      const U = Math.abs(V.clientX - G.startX);
+      if (!z.current && U >= Tn) {
+        z.current = !0;
+        const F = x.find((te) => te.id === G.colId), se = t.getColumnX(G.colId), { dropIndex: pe } = l(V.clientX);
+        Y({
+          colId: G.colId,
+          startX: G.startX,
+          currentX: V.clientX,
+          dropIndex: pe,
+          ghostLeft: se - o,
+          ghostWidth: (F == null ? void 0 : F.width) ?? 80,
+          ghostTitle: (F == null ? void 0 : F.title) ?? ""
         });
         return;
       }
-      if (X.current) {
-        const { dropIndex: J } = x(z.clientX);
-        G((Q) => Q && { ...Q, currentX: z.clientX, dropIndex: J });
+      if (z.current) {
+        const { dropIndex: F } = l(V.clientX);
+        Y((se) => se && { ...se, currentX: V.clientX, dropIndex: F });
       }
-    }, M = () => {
-      X.current && $.current && a($.current.colId, $.current.dropIndex), l.current = null, X.current = !1, G(null);
-    }, P = (z) => {
-      z.key === "Escape" && (l.current = null, X.current = !1, G(null));
+    }, P = () => {
+      z.current && J.current && f(J.current.colId, J.current.dropIndex), I.current = null, z.current = !1, Y(null);
+    }, $ = (V) => {
+      V.key === "Escape" && (I.current = null, z.current = !1, Y(null));
     };
-    return document.addEventListener("mousemove", d), document.addEventListener("mouseup", M), document.addEventListener("keydown", P), () => {
-      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", M), document.removeEventListener("keydown", P);
+    return document.addEventListener("mousemove", d), document.addEventListener("mouseup", P), document.addEventListener("keydown", $), () => {
+      document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", P), document.removeEventListener("keydown", $);
     };
-  }, [a, y, t, o, x]);
-  const B = () => {
-    if (!S) return 0;
-    const { dropIndex: d } = S;
-    if (d >= y.length) {
-      const M = y[y.length - 1];
-      return t.getColumnX(M.id) + M.width - o;
+  }, [f, x, t, o, l]);
+  const De = () => {
+    if (!E) return 0;
+    const { dropIndex: d } = E;
+    if (d >= x.length) {
+      const P = x[x.length - 1];
+      return t.getColumnX(P.id) + P.width - o;
     }
-    return t.getColumnX(y[d].id) - o;
-  }, K = (d, M, P) => {
-    const z = (S == null ? void 0 : S.colId) === d.id, q = d.pinned === "left" ? "horizontal" : n, J = m == null ? void 0 : m(d.id, d.title);
-    let Q;
-    return J ? Q = J : q === "vertical" ? Q = /* @__PURE__ */ H(
+    return t.getColumnX(x[d].id) - o;
+  }, ke = (d, P, $) => {
+    const V = (E == null ? void 0 : E.colId) === d.id, U = d.pinned === "left" ? "horizontal" : n, F = S == null ? void 0 : S(d.id, d.title, {
+      width: d.width,
+      height: $,
+      orientation: U
+    }), se = d.filterable && !!u;
+    let pe;
+    return F ? pe = F : U === "vertical" ? pe = /* @__PURE__ */ _(
       "div",
       {
         style: {
           writingMode: "vertical-rl",
           textOrientation: "mixed",
           transform: "rotate(180deg)",
-          height: P - 16,
+          height: $ - 16,
           lineHeight: `${d.width}px`,
           overflow: "hidden",
           textOverflow: "ellipsis",
@@ -815,35 +838,64 @@ function on({
         },
         children: d.title
       }
-    ) : Q = /* @__PURE__ */ H("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }, children: d.title }), /* @__PURE__ */ de(
+    ) : pe = /* @__PURE__ */ _("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: 1 }, children: d.title }), /* @__PURE__ */ be(
       "div",
       {
         role: "columnheader",
-        title: d.title,
+        "aria-label": d.title,
         style: {
           position: "absolute",
-          left: M,
+          left: P,
           width: d.width,
-          height: P,
+          height: $,
           boxSizing: "border-box",
           borderRight: "1px solid #d1d5db",
           display: "flex",
-          alignItems: q === "horizontal" ? "center" : "flex-end",
-          justifyContent: q === "horizontal" ? "flex-start" : "center",
-          paddingLeft: q === "horizontal" ? 8 : 0,
-          paddingBottom: q !== "horizontal" ? 6 : 0,
-          cursor: a ? "grab" : r ? "pointer" : "default",
+          alignItems: U === "horizontal" ? "center" : "flex-end",
+          justifyContent: U === "horizontal" ? "flex-start" : "center",
+          paddingLeft: U === "horizontal" ? 8 : 0,
+          paddingBottom: U !== "horizontal" ? 6 : 0,
+          cursor: f ? "grab" : c ? "pointer" : "default",
           userSelect: "none",
           fontSize: 13,
           fontWeight: 500,
           color: "#6C737F",
-          opacity: z ? 0.4 : 1
+          opacity: V ? 0.4 : 1
         },
-        onMouseDown: a ? (le) => F(d.id, le) : void 0,
-        onPointerDown: r && !a ? (le) => r(d.id, le) : void 0,
+        onMouseDown: f ? (te) => ne(d.id, te) : void 0,
+        onPointerDown: c && !f ? (te) => c(d.id, te) : void 0,
         children: [
-          Q,
-          c && /* @__PURE__ */ H(
+          pe,
+          se && /* @__PURE__ */ _(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Filter column",
+              "data-cg-filter-icon": d.id,
+              style: {
+                position: "absolute",
+                top: 2,
+                right: 5,
+                zIndex: 2,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                padding: 1,
+                border: "none",
+                borderRadius: 3,
+                background: "transparent",
+                cursor: "pointer",
+                lineHeight: 0
+              },
+              onMouseDown: (te) => te.stopPropagation(),
+              onPointerDown: (te) => te.stopPropagation(),
+              onClick: (te) => {
+                te.stopPropagation(), u == null || u(d.id, te.currentTarget.getBoundingClientRect());
+              },
+              children: /* @__PURE__ */ _(Hn, { active: d.filterActive })
+            }
+          ),
+          a && /* @__PURE__ */ _(
             "div",
             {
               "data-resize-handle": "true",
@@ -856,7 +908,7 @@ function on({
                 cursor: "col-resize",
                 zIndex: 1
               },
-              onMouseDown: (le) => u(d.id, le)
+              onMouseDown: (te) => N(d.id, te)
             }
           )
         ]
@@ -864,19 +916,21 @@ function on({
       d.id
     );
   };
-  return /* @__PURE__ */ de(
+  return /* @__PURE__ */ be(
     "div",
     {
-      ref: Y,
+      ref: w,
       style: {
         flex: 1,
-        height: h + 1,
+        // Exactly totalHeight so the bottom-border row isn't pushed under the
+        // body (a +1 here gets clipped/covered, hiding the header border).
+        height: R,
         overflow: "hidden",
         position: "relative",
         backgroundColor: "#f9fafb"
       },
       children: [
-        /* @__PURE__ */ de(
+        /* @__PURE__ */ be(
           "div",
           {
             style: {
@@ -884,21 +938,21 @@ function on({
               top: 0,
               left: 0,
               transform: `translateX(-${o}px)`,
-              height: h
+              height: R
             },
             children: [
-              /* @__PURE__ */ H("div", { style: { position: "absolute", top: 0, height: h }, children: R.map((d) => {
-                const M = t.getColumnX(d.id);
-                return K(d, M, h);
+              /* @__PURE__ */ _("div", { style: { position: "absolute", top: 0, height: R }, children: L.map((d) => {
+                const P = t.getColumnX(d.id);
+                return ke(d, P, R);
               }) }),
-              D && /* @__PURE__ */ H("div", { style: { position: "relative", height: qe, zIndex: 1 }, children: C.filter((d) => !d.pinned).map((d) => /* @__PURE__ */ H(
+              b && /* @__PURE__ */ _("div", { style: { position: "relative", height: bt, zIndex: 1 }, children: p.filter((d) => !d.pinned).map((d) => /* @__PURE__ */ _(
                 "div",
                 {
                   style: {
                     position: "absolute",
                     left: d.startX,
                     width: d.width,
-                    height: qe,
+                    height: bt,
                     borderBottom: `1px solid ${d.group.color ?? "#3b82f6"}`,
                     display: "flex",
                     alignItems: "center",
@@ -918,22 +972,22 @@ function on({
             ]
           }
         ),
-        f.length > 0 && /* @__PURE__ */ de(
+        W.length > 0 && /* @__PURE__ */ be(
           "div",
           {
             style: {
               position: "absolute",
               top: 0,
               left: 0,
-              width: L,
-              height: h,
+              width: H,
+              height: R,
               backgroundColor: "#f9fafb",
               zIndex: 2,
               display: "flex",
               flexDirection: "column"
             },
             children: [
-              D && /* @__PURE__ */ H("div", { style: { position: "absolute", top: 0, left: 0, width: L, height: h - Je }, children: C.filter((d) => d.pinned).map((d) => /* @__PURE__ */ H(
+              b && /* @__PURE__ */ _("div", { style: { position: "absolute", top: 0, left: 0, width: H, height: R - vt }, children: p.filter((d) => d.pinned).map((d) => /* @__PURE__ */ _(
                 "div",
                 {
                   style: {
@@ -958,11 +1012,11 @@ function on({
                 },
                 d.group.id
               )) }),
-              /* @__PURE__ */ H("div", { style: { position: "absolute", bottom: 0, left: 0, width: L, height: Je, borderTop: "1px solid #d1d5db" }, children: f.map((d) => {
-                const M = t.getColumnX(d.id);
-                return K(d, M, Je);
+              /* @__PURE__ */ _("div", { style: { position: "absolute", bottom: 0, left: 0, width: H, height: vt, borderTop: "1px solid #d1d5db" }, children: W.map((d) => {
+                const P = t.getColumnX(d.id);
+                return ke(d, P, vt);
               }) }),
-              /* @__PURE__ */ H(
+              /* @__PURE__ */ _(
                 "div",
                 {
                   style: {
@@ -979,30 +1033,30 @@ function on({
             ]
           }
         ),
-        /* @__PURE__ */ H("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: 1, backgroundColor: "#d1d5db", zIndex: 5 } }),
-        S && /* @__PURE__ */ H("div", { style: { position: "absolute", top: 0, left: B(), width: 2, height: h, backgroundColor: "#3b82f6", pointerEvents: "none", zIndex: 10 } }),
-        S && /* @__PURE__ */ H("div", { style: { position: "fixed", top: 0, left: S.currentX - S.ghostWidth / 2, width: S.ghostWidth, height: 32, backgroundColor: "#dbeafe", border: "1px solid #3b82f6", borderRadius: 4, display: "flex", alignItems: "center", paddingLeft: 8, boxSizing: "border-box", fontSize: 12, fontWeight: 600, color: "#1d4ed8", opacity: 0.85, pointerEvents: "none", zIndex: 9999, whiteSpace: "nowrap", overflow: "hidden" }, children: S.ghostTitle })
+        /* @__PURE__ */ _("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0, height: 1, backgroundColor: "#d1d5db", zIndex: 5 } }),
+        E && /* @__PURE__ */ _("div", { style: { position: "absolute", top: 0, left: De(), width: 2, height: R, backgroundColor: "#3b82f6", pointerEvents: "none", zIndex: 10 } }),
+        E && /* @__PURE__ */ _("div", { style: { position: "fixed", top: 0, left: E.currentX - E.ghostWidth / 2, width: E.ghostWidth, height: 32, backgroundColor: "#dbeafe", border: "1px solid #3b82f6", borderRadius: 4, display: "flex", alignItems: "center", paddingLeft: 8, boxSizing: "border-box", fontSize: 12, fontWeight: 600, color: "#1d4ed8", opacity: 0.85, pointerEvents: "none", zIndex: 9999, whiteSpace: "nowrap", overflow: "hidden" }, children: E.ghostTitle })
       ]
     }
   );
 }
-function ln({
+function Xn({
   columnEngine: t,
   onColumnVisibilityChange: e
 }) {
-  const [o, n] = ve(!1), r = ne(null), c = t.getAllColumns();
-  return re(() => {
+  const [o, n] = me(!1), r = ce(null), c = t.getAllColumns();
+  return we(() => {
     if (!o) return;
-    const a = (f) => {
-      r.current && !r.current.contains(f.target) && n(!1);
-    }, m = (f) => {
-      f.key === "Escape" && n(!1);
+    const a = (u) => {
+      r.current && !r.current.contains(u.target) && n(!1);
+    }, f = (u) => {
+      u.key === "Escape" && n(!1);
     };
-    return document.addEventListener("mousedown", a), document.addEventListener("keydown", m), () => {
-      document.removeEventListener("mousedown", a), document.removeEventListener("keydown", m);
+    return document.addEventListener("mousedown", a), document.addEventListener("keydown", f), () => {
+      document.removeEventListener("mousedown", a), document.removeEventListener("keydown", f);
     };
-  }, [o]), /* @__PURE__ */ de("div", { ref: r, style: { position: "relative", display: "inline-block" }, children: [
-    /* @__PURE__ */ H(
+  }, [o]), /* @__PURE__ */ be("div", { ref: r, style: { position: "relative", display: "inline-block" }, children: [
+    /* @__PURE__ */ _(
       "button",
       {
         onClick: () => n((a) => !a),
@@ -1025,7 +1079,7 @@ function ln({
         children: "Columns"
       }
     ),
-    o && /* @__PURE__ */ H(
+    o && /* @__PURE__ */ _(
       "div",
       {
         style: {
@@ -1042,8 +1096,8 @@ function ln({
           padding: "4px 0"
         },
         children: c.map((a) => {
-          const m = !a.hidden;
-          return /* @__PURE__ */ de(
+          const f = !a.hidden;
+          return /* @__PURE__ */ be(
             "label",
             {
               style: {
@@ -1056,25 +1110,25 @@ function ln({
                 color: "#374151",
                 userSelect: "none"
               },
-              onMouseEnter: (f) => {
-                f.currentTarget.style.backgroundColor = "#f3f4f6";
+              onMouseEnter: (u) => {
+                u.currentTarget.style.backgroundColor = "#f3f4f6";
               },
-              onMouseLeave: (f) => {
-                f.currentTarget.style.backgroundColor = "";
+              onMouseLeave: (u) => {
+                u.currentTarget.style.backgroundColor = "";
               },
               children: [
-                /* @__PURE__ */ H(
+                /* @__PURE__ */ _(
                   "input",
                   {
                     type: "checkbox",
-                    checked: m,
-                    onChange: (f) => {
-                      e(a.id, f.target.checked);
+                    checked: f,
+                    onChange: (u) => {
+                      e(a.id, u.target.checked);
                     },
                     style: { cursor: "pointer", width: 14, height: 14 }
                   }
                 ),
-                /* @__PURE__ */ H("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: a.title })
+                /* @__PURE__ */ _("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: a.title })
               ]
             },
             a.id
@@ -1084,9 +1138,9 @@ function ln({
     )
   ] });
 }
-function sn({ content: t, position: e }) {
-  return Ft(
-    /* @__PURE__ */ H(
+function Pn({ content: t, position: e }) {
+  return Cn(
+    /* @__PURE__ */ _(
       "div",
       {
         style: {
@@ -1102,8 +1156,8 @@ function sn({ content: t, position: e }) {
     document.body
   );
 }
-function rn({ message: t }) {
-  return /* @__PURE__ */ H(
+function En({ message: t }) {
+  return /* @__PURE__ */ _(
     "div",
     {
       role: "status",
@@ -1124,8 +1178,9 @@ function rn({ message: t }) {
     }
   );
 }
-const Ge = 24, Qe = 32;
-function dn(t) {
+const Ze = 28, Ln = 32, On = 120;
+function An(t) {
+  var Ye, Ve;
   const {
     treeEngine: e,
     columnEngine: o,
@@ -1133,330 +1188,369 @@ function dn(t) {
     rowHeight: r,
     sidebarWidth: c,
     gridLayerConfig: a,
-    cellLayerConfig: m,
-    scale: f = 2
-  } = t, R = n != null && n.length > 0, y = R ? Ge + Qe : Qe, L = o.getVisibleColumns(), O = e.flattenedRows, W = o.getTotalWidth(), S = O.length * r, G = c + W, $ = y + S, X = document.createElement("canvas");
-  X.width = Math.round(G * f), X.height = Math.round($ * f), X.style.width = `${G}px`, X.style.height = `${$}px`;
-  const l = X.getContext("2d");
-  l.setTransform(f, 0, 0, f, 0, 0), l.fillStyle = "#ffffff", l.fillRect(0, 0, G, $);
-  const Y = new St({
+    cellLayerConfig: f,
+    headerOrientation: u = "horizontal",
+    scale: S = 2
+  } = t, W = n != null && n.length > 0, L = t.columnHeaderHeight ?? (u === "vertical" ? On : Ln), x = W ? Ze + L : L, H = o.getVisibleColumns(), D = e.flattenedRows, B = Math.max(0, ((Ye = t.rowRange) == null ? void 0 : Ye.start) ?? 0), E = Math.min(D.length, ((Ve = t.rowRange) == null ? void 0 : Ve.end) ?? D.length), Y = Math.max(0, E - B), J = B * r, z = o.getTotalWidth(), I = Y * r, w = c + z, T = x + I, p = 16384, M = Math.min(
+    p / w,
+    p / T,
+    Math.sqrt(256e6 / (w * T))
+  );
+  let R = Math.min(S, M);
+  (!Number.isFinite(R) || R <= 0) && (R = 1);
+  const N = document.createElement("canvas");
+  N.width = Math.round(w * R), N.height = Math.round(T * R), N.style.width = `${w}px`, N.style.height = `${T}px`;
+  const l = N.getContext("2d");
+  l.setTransform(R, 0, 0, R, 0, 0), l.fillStyle = "#ffffff", l.fillRect(0, 0, w, T);
+  const ne = new Zt({
     scrollX: 0,
-    scrollY: 0,
-    canvasWidth: W,
-    canvasHeight: S,
+    scrollY: J,
+    canvasWidth: z,
+    canvasHeight: I,
     rowHeight: r
-  }), T = [], C = [];
-  let D = 0;
-  for (const u of L)
-    T.push(D), C.push(u.width), D += u.width;
-  Y.setColumnOffsets(T), Y.setColumnWidths(C), l.save(), l.translate(c, y), kt(l, Y, e, o, a), _t(l, Y, e, o, t.selectionEngine, m), l.restore(), l.save(), l.translate(0, y);
-  const w = "#ffffff";
-  l.fillStyle = w, l.fillRect(0, 0, c, S), l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(c, 0), l.lineTo(c, S), l.stroke(), l.font = "13px system-ui, sans-serif", l.textBaseline = "middle", l.fillStyle = "#374151";
-  for (let u = 0; u < O.length; u++) {
-    const x = O[u];
-    if (!x) continue;
-    const F = e.getDepth(x.id), B = u * r, K = F * 16 + 8, d = String(x.title ?? x.id), M = c - K - 8;
-    l.fillStyle = u % 2 === 0 ? "#ffffff" : "#f9fafb", l.fillRect(0, B, c, r), l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(0, B + r), l.lineTo(c, B + r), l.stroke(), l.fillStyle = "#374151";
-    let P = d;
-    if (l.measureText(P).width > M && M > 0) {
-      for (; P.length > 0 && l.measureText(P + "…").width > M; )
-        P = P.slice(0, -1);
-      P = P + "…";
+  }), De = [], ke = [];
+  let d = 0;
+  for (const O of H)
+    De.push(d), ke.push(O.width), d += O.width;
+  ne.setColumnOffsets(De), ne.setColumnWidths(ke);
+  const P = o.getPinnedColumns(), $ = o.getScrollableColumns(), V = [], G = [];
+  let U = 0;
+  for (const O of P)
+    V.push(U), G.push(O.width), U += O.width;
+  const F = [], se = [];
+  let pe = 0;
+  for (const O of $)
+    F.push(pe), se.push(O.width), pe += O.width;
+  if (ne.pinnedWidth = o.getPinnedWidth(), ne.setPinnedOffsets(V, G), ne.setScrollableOffsets(F, se), l.save(), l.translate(c, x), Jt(l, ne, e, o, a), Qt(l, ne, e, o, t.selectionEngine, {
+    ...f,
+    clearBackground: !1
+  }), l.restore(), c > 0) {
+    l.save(), l.translate(0, x);
+    const O = "#ffffff";
+    l.fillStyle = O, l.fillRect(0, 0, c, I), l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(c, 0), l.lineTo(c, I), l.stroke(), l.font = "13px system-ui, sans-serif", l.textBaseline = "middle", l.fillStyle = "#374151";
+    for (let oe = B; oe < E; oe++) {
+      const q = D[oe];
+      if (!q) continue;
+      const xe = e.getDepth(q.id), Q = (oe - B) * r, ie = xe * 16 + 8, Me = String(q.title ?? q.id), ve = c - ie - 8;
+      l.fillStyle = oe % 2 === 0 ? "#ffffff" : "#f9fafb", l.fillRect(0, Q, c, r), l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(0, Q + r), l.lineTo(c, Q + r), l.stroke(), l.fillStyle = "#374151";
+      let he = Me;
+      if (l.measureText(he).width > ve && ve > 0) {
+        for (; he.length > 0 && l.measureText(he + "…").width > ve; )
+          he = he.slice(0, -1);
+        he = he + "…";
+      }
+      l.fillText(he, ie, Q + r / 2);
     }
-    l.fillText(P, K, B + r / 2);
-  }
-  if (l.restore(), l.save(), l.translate(0, 0), l.fillStyle = "#f9fafb", l.fillRect(0, 0, G, y), l.strokeStyle = "#e5e7eb", l.lineWidth = 1, l.beginPath(), l.moveTo(0, y), l.lineTo(G, y), l.stroke(), l.fillStyle = "#f9fafb", l.fillRect(0, 0, c, y), l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(c, 0), l.lineTo(c, y), l.stroke(), R && n) {
-    const u = /* @__PURE__ */ new Map();
-    for (const d of n)
-      u.set(d.id, d);
-    let x, F = 0, B = 0;
-    const K = (d, M, P) => {
-      if (d === void 0 || P <= 0) return;
-      const z = u.get(d);
-      if (!z) return;
-      const V = c + M;
-      l.fillStyle = z.color ?? "#3b82f6", l.fillRect(V, Ge - 2, P, 2), l.font = "600 11px system-ui, sans-serif", l.fillStyle = "#6b7280", l.textBaseline = "middle", l.textAlign = "left", l.fillText(z.title, V + 8, Ge / 2);
+    l.restore();
+  }
+  if (l.save(), l.translate(0, 0), l.fillStyle = "#f9fafb", l.fillRect(0, 0, w, x), l.fillStyle = "#d1d5db", l.fillRect(0, 0, w, 1), l.strokeStyle = "#d1d5db", l.lineWidth = 1, l.beginPath(), l.moveTo(0, x), l.lineTo(w, x), l.stroke(), l.fillStyle = "#f9fafb", l.fillRect(0, 0, c, x), l.strokeStyle = "#d1d5db", l.lineWidth = 1, l.beginPath(), l.moveTo(c, 0), l.lineTo(c, x), l.stroke(), W && n) {
+    const O = /* @__PURE__ */ new Map();
+    for (const ie of n)
+      O.set(ie.id, ie);
+    let oe, q = 0, xe = 0;
+    const Q = (ie, Me, ve) => {
+      if (ie === void 0 || ve <= 0) return;
+      const he = O.get(ie);
+      if (!he) return;
+      const Ee = c + Me;
+      l.strokeStyle = "#d1d5db", l.lineWidth = 1, l.beginPath(), l.moveTo(Ee, Ze), l.lineTo(Ee + ve, Ze), l.stroke(), l.font = "600 11px system-ui, sans-serif", l.fillStyle = "#6b7280", l.textBaseline = "middle", l.textAlign = "left", l.fillText(he.title, Ee + 8, Ze / 2);
     };
-    for (const d of L) {
-      const M = o.getColumnX(d.id);
-      d.group !== x ? (K(x, F, B), x = d.group, F = M, B = d.width) : B += d.width;
+    for (const ie of H) {
+      const Me = o.getColumnX(ie.id);
+      ie.group !== oe ? (Q(oe, q, xe), oe = ie.group, q = Me, xe = ie.width) : xe += ie.width;
     }
-    K(x, F, B);
-  }
-  const h = R ? Ge : 0;
-  l.font = "600 12px system-ui, sans-serif", l.textBaseline = "middle", l.textAlign = "left", l.fillStyle = "#374151";
-  for (const u of L) {
-    const x = o.getColumnX(u.id), F = c + x;
-    l.strokeStyle = "#e5e7eb", l.lineWidth = 0.5, l.beginPath(), l.moveTo(F + u.width, h), l.lineTo(F + u.width, y), l.stroke(), l.fillStyle = "#374151";
-    const B = u.width - 16;
-    let K = u.title;
-    if (B > 0 && l.measureText(K).width > B) {
-      for (; K.length > 0 && l.measureText(K + "…").width > B; )
-        K = K.slice(0, -1);
-      K = K + "…";
-    }
-    l.fillText(K, F + 8, h + Qe / 2);
+    Q(oe, q, xe);
+  }
+  const te = W ? Ze : 0, Je = (O, oe) => {
+    if (oe <= 0 || l.measureText(O).width <= oe) return O;
+    let q = O;
+    for (; q.length > 0 && l.measureText(q + "…").width > oe; )
+      q = q.slice(0, -1);
+    return q + "…";
+  };
+  for (const O of H) {
+    const oe = o.getColumnX(O.id), q = c + oe, xe = u === "vertical" && O.pinned !== "left";
+    if (l.strokeStyle = "#d1d5db", l.lineWidth = 1, l.beginPath(), l.moveTo(q + O.width, te), l.lineTo(q + O.width, x), l.stroke(), !!O.title)
+      if (l.fillStyle = "#6b7280", l.textBaseline = "middle", xe) {
+        const Q = L - 12;
+        l.save(), l.translate(q + O.width / 2 + 4, x - 6), l.rotate(-Math.PI / 2), l.font = "11px system-ui, sans-serif", l.textAlign = "left", l.fillText(Je(O.title, Q), 0, 0, Q), l.restore();
+      } else {
+        l.font = "600 12px system-ui, sans-serif", l.textAlign = "left";
+        const Q = O.width - 16, ie = u === "vertical" ? x - 14 : te + L / 2;
+        l.fillText(Je(O.title, Q), q + 8, ie, Q);
+      }
   }
-  return l.restore(), X;
+  return l.restore(), l.fillStyle = "#d1d5db", l.fillRect(0, 0, w, 1), l.fillRect(0, T - 1, w, 1), l.fillRect(0, 0, 1, T), l.fillRect(w - 1, 0, 1, T), N;
 }
-const yt = 180, xt = 32, cn = 24, It = 200;
-function Rt(t, e) {
-  let o;
-  switch (t) {
-    case "vertical":
-      o = 120;
-      break;
-    default:
-      o = 32;
-  }
-  return e ? cn + o : o;
+const Ut = 180, Nt = 32, zn = 28, jt = 200;
+function qt(t, e, o) {
+  const n = o ?? (t === "vertical" ? 120 : 32);
+  return e ? zn + n : n;
 }
-const un = $t(
-  Bt(function(e, o) {
+const Gn = wn(
+  bn(function(e, o) {
     const {
       rows: n,
       columns: r,
       columnGroups: c,
       getCellData: a,
-      cellRenderer: m,
-      sidebarRenderer: f,
-      sidebarWidth: R = yt,
-      rowHeight: y = xt,
+      cellRenderer: f,
+      sidebarRenderer: u,
+      sidebarWidth: S = Ut,
+      rowHeight: W = Nt,
       headerOrientation: L = "horizontal",
-      rowStyle: O,
-      selection: W,
-      onSelectionChange: S,
-      onCellClick: G,
-      onCellDoubleClick: $,
-      onCellContextMenu: X,
-      onCellHover: l,
-      onColumnHeaderClick: Y,
+      columnHeaderHeight: x,
+      maxHeight: H,
+      rowStyle: D,
+      selection: B,
+      onSelectionChange: E,
+      onCellClick: Y,
+      onCellDoubleClick: J,
+      onCellContextMenu: z,
+      onCellHover: I,
+      onColumnHeaderClick: w,
       onTreeToggle: T,
-      defaultExpandedRows: C,
-      onExpandChange: D,
-      onLoadMore: w,
-      hasMore: h,
-      loading: u,
-      hoverContent: x,
-      hoverPosition: F,
-      showColumnVisibilityMenu: B,
-      ariaLabel: K = "Data grid"
-    } = e, [d, M] = ve(
-      () => new Set(C ?? [])
-    ), [P, z] = ve(0), [V, q] = ve(0), [J, Q] = ve(r), [le, Pe] = ve(null), [Tt, Ce] = ve(""), [Mt, $e] = ve(null), Ee = ne(null), Ze = ne(null);
-    re(() => {
-      Q(r);
+      defaultExpandedRows: p,
+      onExpandChange: b,
+      onLoadMore: M,
+      hasMore: R,
+      loading: N,
+      hoverContent: l,
+      hoverPosition: ne,
+      showColumnVisibilityMenu: De,
+      ariaLabel: ke = "Data grid"
+    } = e, [d, P] = me(
+      () => new Set(p ?? [])
+    ), [$, V] = me(0), [G, U] = me(0), [F, se] = me({ width: 0, height: 0 }), [pe, te] = me(!1), [Je, Ye] = me(!1), [Ve, O] = me(r), [oe, q] = me(null), [xe, Q] = me(""), [ie, Me] = me(null), ve = ce(null), he = ce(null);
+    we(() => {
+      O(r);
     }, [r]);
-    const et = ne(null), pe = ne([]), ce = ne(new St({ rowHeight: y })), N = ne(null), A = ne(e), fe = ne(null), Le = ne(null), Oe = ne(!1);
+    const Ee = ce(null), _e = ce([]), fe = ce(new Zt({ rowHeight: W })), j = ce(null), A = ce(e), Ce = ce(null), Qe = ce(null), et = ce(!1);
     A.current = e;
-    const ke = Ne(
-      () => new Nt(n, d),
+    const Le = mt(
+      () => new xn(n, d),
       [n, d]
-    ), se = Ne(() => new Ie(J), [J]), tt = Ne(() => new qt(W), [W]);
-    fe.current = { treeEngine: ke, columnEngine: se, selectionEngine: tt };
-    const Be = se.getPinnedColumns().length > 0, _e = Be ? 0 : R, nt = te((i) => {
-      const g = fe.current;
+    ), ue = mt(() => new Pe(Ve), [Ve]), Ct = mt(() => new Rn(B), [B]);
+    Ce.current = { treeEngine: Le, columnEngine: ue, selectionEngine: Ct };
+    const ct = ue.getPinnedColumns().length > 0, Be = ct ? 0 : S, yt = le((i) => {
+      const h = Ce.current;
+      if (!h) return;
+      const { treeEngine: C, columnEngine: k, selectionEngine: v } = h, m = fe.current, s = i === "grid" ? 0 : i === "cells" ? 1 : 2, g = _e.current[s];
       if (!g) return;
-      const { treeEngine: I, columnEngine: _, selectionEngine: v } = g, b = ce.current, s = i === "grid" ? 0 : i === "cells" ? 1 : 2, p = pe.current[s];
-      if (!p) return;
-      const k = Jt(p, b.canvasWidth, b.canvasHeight);
-      i === "grid" ? kt(k, b, I, _, { rowStyle: A.current.rowStyle }) : i === "cells" ? _t(k, b, I, _, v, {
+      const y = Sn(g, m.canvasWidth, m.canvasHeight);
+      i === "grid" ? Jt(y, m, C, k, { rowStyle: A.current.rowStyle }) : i === "cells" ? Qt(y, m, C, k, v, {
         cellRenderer: A.current.cellRenderer,
         getCellData: A.current.getCellData,
-        hoveredCell: Le.current
-      }) : Zt(k, b, I, _, v, {
-        hoveredCell: Le.current,
-        hoveredRowId: Ee.current,
-        selectedCell: Ze.current,
-        resizingColumn: le ?? void 0,
+        hoveredCell: Qe.current
+      }) : Mn(y, m, C, k, v, {
+        hoveredCell: Qe.current,
+        hoveredRowId: ve.current,
+        selectedCell: he.current,
+        resizingColumn: oe ?? void 0,
         loading: A.current.loading
       });
-    }, [le]);
-    re(() => {
-      const i = se.getPinnedColumns(), g = se.getScrollableColumns(), I = se.getPinnedWidth(), _ = [], v = [];
-      let b = 0;
-      for (const oe of i)
-        _.push(b), v.push(oe.width), b += oe.width;
-      const s = [], p = [];
-      let k = 0;
-      for (const oe of g)
-        s.push(k), p.push(oe.width), k += oe.width;
-      const E = ce.current;
-      E.pinnedWidth = I, E.setPinnedOffsets(_, v), E.setScrollableOffsets(s, p);
-      const U = se.getVisibleColumns(), Z = [], ae = [];
-      let ye = 0;
-      for (const oe of U)
-        Z.push(ye), ae.push(oe.width), ye += oe.width;
-      E.setColumnOffsets(Z), E.setColumnWidths(ae), E.update({ rowHeight: y });
-    }, [se, y]), re(() => {
-      const i = new Ut(nt);
-      return N.current = i, i.markAllDirty(), () => {
-        i.destroy(), N.current = null;
+    }, [oe]);
+    we(() => {
+      const i = ue.getPinnedColumns(), h = ue.getScrollableColumns(), C = ue.getPinnedWidth(), k = [], v = [];
+      let m = 0;
+      for (const de of i)
+        k.push(m), v.push(de.width), m += de.width;
+      const s = [], g = [];
+      let y = 0;
+      for (const de of h)
+        s.push(y), g.push(de.width), y += de.width;
+      const X = fe.current;
+      X.pinnedWidth = C, X.setPinnedOffsets(k, v), X.setScrollableOffsets(s, g);
+      const K = ue.getVisibleColumns(), Z = [], ge = [];
+      let Ie = 0;
+      for (const de of K)
+        Z.push(Ie), ge.push(de.width), Ie += de.width;
+      X.setColumnOffsets(Z), X.setColumnWidths(ge), X.update({ rowHeight: W });
+    }, [ue, W]), we(() => {
+      const i = new yn(yt);
+      return j.current = i, i.markAllDirty(), () => {
+        i.destroy(), j.current = null;
       };
-    }, [nt]), re(() => {
-      const i = et.current;
+    }, [yt]), we(() => {
+      const i = Ee.current;
       if (!i) return;
-      const g = new ResizeObserver((I) => {
-        var _, v;
-        for (const b of I) {
-          const { width: s, height: p } = b.contentRect, k = s - _e, E = Rt(A.current.headerOrientation ?? "horizontal", (((_ = A.current.columnGroups) == null ? void 0 : _.length) ?? 0) > 0), U = p - E;
-          ce.current.update({
-            canvasWidth: Math.max(0, k),
-            canvasHeight: Math.max(0, U)
-          }), (v = N.current) == null || v.markAllDirty();
+      const h = new ResizeObserver((C) => {
+        var k, v;
+        for (const m of C) {
+          const { width: s, height: g } = m.contentRect, y = s - Be, X = qt(A.current.headerOrientation ?? "horizontal", (((k = A.current.columnGroups) == null ? void 0 : k.length) ?? 0) > 0, A.current.columnHeaderHeight), K = g - X;
+          fe.current.update({
+            canvasWidth: Math.max(0, y),
+            canvasHeight: Math.max(0, K)
+          }), se({
+            width: Math.max(0, y),
+            height: Math.max(0, K)
+          }), (v = j.current) == null || v.markAllDirty();
         }
       });
-      return g.observe(i), () => g.disconnect();
-    }, [_e]), re(() => {
+      return h.observe(i), () => h.disconnect();
+    }, [Be]), we(() => {
       var i;
-      (i = N.current) == null || i.markAllDirty();
-    }, [ke, se, tt]), re(() => {
+      (i = j.current) == null || i.markAllDirty();
+    }, [Le, ue, Ct]), we(() => {
       var i;
-      (i = N.current) == null || i.markDirty("overlay");
-    }, [u]);
-    const Ke = te((i) => {
-      var ae;
+      (i = j.current) == null || i.markDirty("overlay");
+    }, [N]);
+    const dt = le((i) => {
+      var ge;
       i.preventDefault();
-      const g = ce.current, I = fe.current;
-      if (!I) return;
-      const _ = I.treeEngine.flattenedRows.length * g.rowHeight, v = I.columnEngine.getTotalWidth(), b = Math.max(0, _ - g.canvasHeight), s = v - I.columnEngine.getPinnedWidth(), p = g.canvasWidth - I.columnEngine.getPinnedWidth(), k = Math.max(0, s - p), E = Math.max(0, Math.min(b, g.scrollY + i.deltaY)), U = Math.max(0, Math.min(k, g.scrollX + i.deltaX));
-      g.update({ scrollY: E, scrollX: U }), z(E), q(U), (ae = N.current) == null || ae.markAllDirty();
+      const h = fe.current, C = Ce.current;
+      if (!C) return;
+      const k = C.treeEngine.flattenedRows.length * h.rowHeight, v = C.columnEngine.getTotalWidth(), m = Math.max(0, k - h.canvasHeight), s = v - C.columnEngine.getPinnedWidth(), g = h.canvasWidth - C.columnEngine.getPinnedWidth(), y = Math.max(0, s - g), X = Math.max(0, Math.min(m, h.scrollY + i.deltaY)), K = Math.max(0, Math.min(y, h.scrollX + i.deltaX));
+      h.update({ scrollY: X, scrollX: K }), V(X), U(K), (ge = j.current) == null || ge.markAllDirty();
       const Z = A.current;
-      Z.hasMore && Z.onLoadMore && !Z.loading && b - E < It ? Oe.current || (Oe.current = !0, Z.onLoadMore()) : b - E >= It && (Oe.current = !1);
+      Z.hasMore && Z.onLoadMore && !Z.loading && m - X < jt ? et.current || (et.current = !0, Z.onLoadMore()) : m - X >= jt && (et.current = !1);
     }, []);
-    re(() => {
-      const i = pe.current[2];
+    we(() => {
+      const i = _e.current[2];
       if (i)
-        return i.addEventListener("wheel", Ke, { passive: !1 }), () => i.removeEventListener("wheel", Ke);
-    }, [Ke]), re(() => {
-      u || (Oe.current = !1);
-    }, [u]);
-    const Wt = te((i) => {
-      var p, k, E;
-      const g = fe.current;
-      if (!g) return;
-      const I = pe.current[2];
-      if (!I) return;
-      const _ = I.getBoundingClientRect(), v = i.clientX - _.left, b = i.clientY - _.top, s = Ve(v, b, ce.current, g.treeEngine, g.columnEngine);
-      Le.current = s, Ee.current = (s == null ? void 0 : s.rowId) ?? null, $e((s == null ? void 0 : s.rowId) ?? null), (p = N.current) == null || p.markDirty("overlay"), (E = (k = A.current).onCellHover) == null || E.call(k, (s == null ? void 0 : s.rowId) ?? null, (s == null ? void 0 : s.colId) ?? null, i.nativeEvent);
-    }, []), Fe = te((i) => {
-      M((g) => {
-        var _, v;
-        const I = new Set(g);
-        return I.has(i) ? (I.delete(i), Ce(`Row ${i} collapsed`)) : (I.add(i), Ce(`Row ${i} expanded`)), (v = (_ = A.current).onExpandChange) == null || v.call(_, [...I]), I;
+        return i.addEventListener("wheel", dt, { passive: !1 }), () => i.removeEventListener("wheel", dt);
+    }, [dt]), we(() => {
+      N || (et.current = !1);
+    }, [N]);
+    const en = le((i) => {
+      var g, y, X;
+      const h = Ce.current;
+      if (!h) return;
+      const C = _e.current[2];
+      if (!C) return;
+      const k = C.getBoundingClientRect(), v = i.clientX - k.left, m = i.clientY - k.top, s = rt(v, m, fe.current, h.treeEngine, h.columnEngine);
+      Qe.current = s, ve.current = (s == null ? void 0 : s.rowId) ?? null, Me((s == null ? void 0 : s.rowId) ?? null), (g = j.current) == null || g.markDirty("overlay"), (X = (y = A.current).onCellHover) == null || X.call(y, (s == null ? void 0 : s.rowId) ?? null, (s == null ? void 0 : s.colId) ?? null, i.nativeEvent);
+    }, []), at = le((i) => {
+      P((h) => {
+        var k, v;
+        const C = new Set(h);
+        return C.has(i) ? (C.delete(i), Q(`Row ${i} collapsed`)) : (C.add(i), Q(`Row ${i} expanded`)), (v = (k = A.current).onExpandChange) == null || v.call(k, [...C]), C;
       });
-    }, []), Dt = te((i) => {
-      var Te, Me, We, De, Xe;
-      const g = fe.current;
-      if (!g) return;
-      const I = pe.current[2];
-      if (!I) return;
-      const _ = I.getBoundingClientRect(), v = i.clientX - _.left, b = i.clientY - _.top, s = Ve(v, b, ce.current, g.treeEngine, g.columnEngine);
+    }, []), tn = le((i) => {
+      var Fe, Ke, Ue, Ne, je;
+      const h = Ce.current;
+      if (!h) return;
+      const C = _e.current[2];
+      if (!C) return;
+      const k = C.getBoundingClientRect(), v = i.clientX - k.left, m = i.clientY - k.top, s = rt(v, m, fe.current, h.treeEngine, h.columnEngine);
       if (!s) return;
-      const { treeEngine: p, columnEngine: k, selectionEngine: E } = g, U = k.getPinnedColumns();
-      if (U.length > 0) {
-        const ue = U[0].id;
-        if (p.hasChildren(s.rowId) && s.colId === ue) {
-          A.current.onTreeToggle ? A.current.onTreeToggle(s.rowId) : Fe(s.rowId);
+      const { treeEngine: g, columnEngine: y, selectionEngine: X } = h, K = y.getPinnedColumns();
+      if (K.length > 0) {
+        const Re = K[0].id;
+        if (g.hasChildren(s.rowId) && s.colId === Re) {
+          A.current.onTreeToggle ? A.current.onTreeToggle(s.rowId) : at(s.rowId);
           return;
         }
       }
-      const Z = p.flattenedRows.map((ue) => ue.id), ae = k.getVisibleColumns().map((ue) => ue.id);
-      i.ctrlKey || i.metaKey ? E.ctrlClick(s.rowId, s.colId) : i.shiftKey ? E.shiftClick(s.rowId, s.colId, Z, ae) : E.click(s.rowId, s.colId, Z, ae), Ze.current = { rowId: s.rowId, colId: s.colId }, (Me = (Te = A.current).onSelectionChange) == null || Me.call(Te, E.getSelection()), (De = (We = A.current).onCellClick) == null || De.call(We, s.rowId, s.colId, i.nativeEvent), (Xe = N.current) == null || Xe.markDirty("overlay");
-      const ye = String(s.rowId), oe = k.getVisibleColumns().find((ue) => ue.id === s.colId), ze = (oe == null ? void 0 : oe.title) ?? s.colId;
-      Ce(`Row ${ye}, Column ${ze} selected`);
-    }, [Fe]), Xt = te((i) => {
-      var p, k;
-      const g = fe.current;
-      if (!g) return;
-      const I = pe.current[2];
-      if (!I) return;
-      const _ = I.getBoundingClientRect(), v = i.clientX - _.left, b = i.clientY - _.top, s = Ve(v, b, ce.current, g.treeEngine, g.columnEngine);
-      s && ((k = (p = A.current).onCellDoubleClick) == null || k.call(p, s.rowId, s.colId, i.nativeEvent));
-    }, []), Ht = te((i) => {
-      var p, k;
+      const Z = g.flattenedRows.map((Re) => Re.id), ge = y.getVisibleColumns().map((Re) => Re.id);
+      i.ctrlKey || i.metaKey ? X.ctrlClick(s.rowId, s.colId) : i.shiftKey ? X.shiftClick(s.rowId, s.colId, Z, ge) : X.click(s.rowId, s.colId, Z, ge), he.current = { rowId: s.rowId, colId: s.colId }, (Ke = (Fe = A.current).onSelectionChange) == null || Ke.call(Fe, X.getSelection()), (Ne = (Ue = A.current).onCellClick) == null || Ne.call(Ue, s.rowId, s.colId, i.nativeEvent), (je = j.current) == null || je.markDirty("overlay");
+      const Ie = String(s.rowId), de = y.getVisibleColumns().find((Re) => Re.id === s.colId), it = (de == null ? void 0 : de.title) ?? s.colId;
+      Q(`Row ${Ie}, Column ${it} selected`);
+    }, [at]), nn = le((i) => {
+      var g, y;
+      const h = Ce.current;
+      if (!h) return;
+      const C = _e.current[2];
+      if (!C) return;
+      const k = C.getBoundingClientRect(), v = i.clientX - k.left, m = i.clientY - k.top, s = rt(v, m, fe.current, h.treeEngine, h.columnEngine);
+      s && ((y = (g = A.current).onCellDoubleClick) == null || y.call(g, s.rowId, s.colId, i.nativeEvent));
+    }, []), on = le((i) => {
+      var g, y;
       i.preventDefault();
-      const g = fe.current;
-      if (!g) return;
-      const I = pe.current[2];
-      if (!I) return;
-      const _ = I.getBoundingClientRect(), v = i.clientX - _.left, b = i.clientY - _.top, s = Ve(v, b, ce.current, g.treeEngine, g.columnEngine);
-      s && ((k = (p = A.current).onCellContextMenu) == null || k.call(p, s.rowId, s.colId, i.nativeEvent));
-    }, []), Pt = te(() => {
-      var i, g, I;
-      Le.current = null, Ee.current = null, $e(null), (i = N.current) == null || i.markDirty("overlay"), (I = (g = A.current).onCellHover) == null || I.call(g, null, null, new PointerEvent("pointerleave"));
-    }, []), Et = te(
-      (i, g) => {
-        var I, _;
-        (_ = (I = A.current).onColumnHeaderClick) == null || _.call(I, i, g.nativeEvent);
+      const h = Ce.current;
+      if (!h) return;
+      const C = _e.current[2];
+      if (!C) return;
+      const k = C.getBoundingClientRect(), v = i.clientX - k.left, m = i.clientY - k.top, s = rt(v, m, fe.current, h.treeEngine, h.columnEngine);
+      s && ((y = (g = A.current).onCellContextMenu) == null || y.call(g, s.rowId, s.colId, i.nativeEvent));
+    }, []), ln = le(() => {
+      var i, h, C;
+      Qe.current = null, ve.current = null, Me(null), (i = j.current) == null || i.markDirty("overlay"), (C = (h = A.current).onCellHover) == null || C.call(h, null, null, new PointerEvent("pointerleave"));
+    }, []), sn = le(
+      (i, h) => {
+        var C, k;
+        (k = (C = A.current).onColumnHeaderClick) == null || k.call(C, i, h.nativeEvent);
       },
       []
-    ), Lt = te(
-      (i, g) => {
-        var _, v, b, s;
-        Q((p) => p.map((E) => {
-          if (E.id !== i) return E;
-          const U = E.minWidth ?? 30;
-          return { ...E, width: Math.max(U, g) };
+    ), rn = le(
+      (i, h) => {
+        var k, v, m, s;
+        O((g) => g.map((X) => {
+          if (X.id !== i) return X;
+          const K = X.minWidth ?? 30;
+          return { ...X, width: Math.max(K, h) };
         }));
-        const I = (_ = fe.current) == null ? void 0 : _.columnEngine;
-        if (I) {
-          const p = I.getColumnX(i), k = I.getVisibleColumns().find((E) => E.id === i);
-          if (k) {
-            const U = k.pinned === "left" ? p + Math.max(k.minWidth ?? 30, g) : p + Math.max(k.minWidth ?? 30, g) - ce.current.scrollX;
-            Pe({ colId: i, x: U });
+        const C = (k = Ce.current) == null ? void 0 : k.columnEngine;
+        if (C) {
+          const g = C.getColumnX(i), y = C.getVisibleColumns().find((X) => X.id === i);
+          if (y) {
+            const K = y.pinned === "left" ? g + Math.max(y.minWidth ?? 30, h) : g + Math.max(y.minWidth ?? 30, h) - fe.current.scrollX;
+            q({ colId: i, x: K });
           }
         }
-        (b = (v = A.current).onColumnResize) == null || b.call(v, i, g), (s = N.current) == null || s.markAllDirty();
+        (m = (v = A.current).onColumnResize) == null || m.call(v, i, h), (s = j.current) == null || s.markAllDirty();
       },
       []
     );
-    re(() => {
+    we(() => {
       const i = () => {
-        Pe(null);
+        q(null);
       };
       return document.addEventListener("mouseup", i), () => document.removeEventListener("mouseup", i);
     }, []);
-    const Ot = te(
-      (i, g) => {
-        var I, _, v;
-        Q((b) => {
-          const s = [...b], p = s.findIndex((U) => U.id === i);
-          if (p === -1) return b;
-          const [k] = s.splice(p, 1), E = Math.max(0, Math.min(g, s.length));
-          return s.splice(E, 0, k), s;
-        }), (_ = (I = A.current).onColumnReorder) == null || _.call(I, i, g), (v = N.current) == null || v.markAllDirty();
+    const cn = le(
+      (i, h) => {
+        var C, k, v;
+        O((m) => {
+          const s = [...m], g = s.findIndex((K) => K.id === i);
+          if (g === -1) return m;
+          const [y] = s.splice(g, 1), X = Math.max(0, Math.min(h, s.length));
+          return s.splice(X, 0, y), s;
+        }), (k = (C = A.current).onColumnReorder) == null || k.call(C, i, h), (v = j.current) == null || v.markAllDirty();
       },
       []
-    ), zt = te(
-      (i, g) => {
-        var I, _, v;
-        Q(
-          (b) => b.map((s) => s.id === i ? { ...s, hidden: !g } : s)
-        ), (_ = (I = A.current).onColumnVisibilityChange) == null || _.call(I, i, g), (v = N.current) == null || v.markAllDirty();
+    ), dn = le(
+      (i, h) => {
+        var C, k, v;
+        O(
+          (m) => m.map((s) => s.id === i ? { ...s, hidden: !h } : s)
+        ), (k = (C = A.current).onColumnVisibilityChange) == null || k.call(C, i, h), (v = j.current) == null || v.markAllDirty();
       },
       []
-    ), At = te((i) => {
-      var ae, ye, oe, ze, Te, Me, We, De, Xe, ue, Ue, it, lt, st, rt, dt, ct, at, ht, ft, ut, gt, pt, mt;
-      const g = fe.current;
-      if (!g) return;
-      const { treeEngine: I, columnEngine: _, selectionEngine: v } = g, b = ce.current, s = I.flattenedRows.map((j) => j.id), p = _.getVisibleColumns().map((j) => j.id);
-      if (s.length === 0 || p.length === 0) return;
-      const k = v.getSelection().anchor, E = i.ctrlKey || i.metaKey, U = (j, ee) => {
-        const ie = s.length * b.rowHeight, me = _.getTotalWidth(), we = Math.max(0, ie - b.canvasHeight), Ae = Math.max(0, me - b.canvasWidth), xe = j * b.rowHeight, Re = xe + b.rowHeight;
-        let he = b.scrollY;
-        xe < b.scrollY ? he = xe : Re > b.scrollY + b.canvasHeight && (he = Re - b.canvasHeight), he = Math.max(0, Math.min(we, he));
-        const be = _.getVisibleColumns()[ee], He = be ? _.getColumnX(be.id) : 0, Ye = He + ((be == null ? void 0 : be.width) ?? 0);
-        let ge = b.scrollX;
-        He < b.scrollX ? ge = He : Ye > b.scrollX + b.canvasWidth && (ge = Ye - b.canvasWidth), ge = Math.max(0, Math.min(Ae, ge)), (he !== b.scrollY || ge !== b.scrollX) && (b.update({ scrollY: he, scrollX: ge }), z(he), q(ge));
-      }, Z = (j, ee, ie) => {
-        var wt, bt, vt;
-        let me = k ? s.indexOf(k.rowId) : -1, we = k ? p.indexOf(k.colId) : -1;
-        me === -1 && (me = 0), we === -1 && (we = 0);
-        const Ae = Math.max(0, Math.min(s.length - 1, me + j)), xe = Math.max(0, Math.min(p.length - 1, we + ee)), Re = s[Ae], he = p[xe];
-        ie ? v.shiftClick(Re, he, s, p) : v.click(Re, he, s, p), (bt = (wt = A.current).onSelectionChange) == null || bt.call(wt, v.getSelection()), (vt = N.current) == null || vt.markDirty("overlay"), U(Ae, xe);
-        const be = _.getVisibleColumns()[xe], He = String(Re), Ye = (be == null ? void 0 : be.title) ?? String(he), ge = v.getSelection().cells.size;
-        ge > 1 ? Ce(`${ge} cells selected`) : Ce(`Row ${He}, Column ${Ye} selected`);
+    ), xt = le(
+      (i, h, C, k) => {
+        h.preventDefault(), h.stopPropagation(), Ye(!0);
+        const v = i === "y" ? h.clientY : h.clientX, m = i === "y" ? fe.current.scrollY : fe.current.scrollX, s = (y) => {
+          var Ie;
+          const X = (i === "y" ? y.clientY : y.clientX) - v, K = C > 0 ? X / C * k : 0, Z = Math.max(0, Math.min(k, m + K)), ge = fe.current;
+          i === "y" ? (ge.update({ scrollY: Z }), V(Z)) : (ge.update({ scrollX: Z }), U(Z)), (Ie = j.current) == null || Ie.markAllDirty();
+        }, g = () => {
+          Ye(!1), document.removeEventListener("mousemove", s), document.removeEventListener("mouseup", g);
+        };
+        document.addEventListener("mousemove", s), document.addEventListener("mouseup", g);
+      },
+      []
+    ), an = le((i) => {
+      var ge, Ie, de, it, Fe, Ke, Ue, Ne, je, Re, pt, Wt, Ht, Dt, Xt, Pt, Et, Lt, Ot, At, zt, Yt, Vt, Bt;
+      const h = Ce.current;
+      if (!h) return;
+      const { treeEngine: C, columnEngine: k, selectionEngine: v } = h, m = fe.current, s = C.flattenedRows.map((ee) => ee.id), g = k.getVisibleColumns().map((ee) => ee.id);
+      if (s.length === 0 || g.length === 0) return;
+      const y = v.getSelection().anchor, X = i.ctrlKey || i.metaKey, K = (ee, re) => {
+        const ae = s.length * m.rowHeight, Te = k.getTotalWidth(), We = Math.max(0, ae - m.canvasHeight), lt = Math.max(0, Te - m.canvasWidth), Xe = ee * m.rowHeight, Ae = Xe + m.rowHeight;
+        let ye = m.scrollY;
+        Xe < m.scrollY ? ye = Xe : Ae > m.scrollY + m.canvasHeight && (ye = Ae - m.canvasHeight), ye = Math.max(0, Math.min(We, ye));
+        const He = k.getVisibleColumns()[re], qe = He ? k.getColumnX(He.id) : 0, st = qe + ((He == null ? void 0 : He.width) ?? 0);
+        let Se = m.scrollX;
+        qe < m.scrollX ? Se = qe : st > m.scrollX + m.canvasWidth && (Se = st - m.canvasWidth), Se = Math.max(0, Math.min(lt, Se)), (ye !== m.scrollY || Se !== m.scrollX) && (m.update({ scrollY: ye, scrollX: Se }), V(ye), U(Se));
+      }, Z = (ee, re, ae) => {
+        var Gt, $t, Ft;
+        let Te = y ? s.indexOf(y.rowId) : -1, We = y ? g.indexOf(y.colId) : -1;
+        Te === -1 && (Te = 0), We === -1 && (We = 0);
+        const lt = Math.max(0, Math.min(s.length - 1, Te + ee)), Xe = Math.max(0, Math.min(g.length - 1, We + re)), Ae = s[lt], ye = g[Xe];
+        ae ? v.shiftClick(Ae, ye, s, g) : v.click(Ae, ye, s, g), ($t = (Gt = A.current).onSelectionChange) == null || $t.call(Gt, v.getSelection()), (Ft = j.current) == null || Ft.markDirty("overlay"), K(lt, Xe);
+        const He = k.getVisibleColumns()[Xe], qe = String(Ae), st = (He == null ? void 0 : He.title) ?? String(ye), Se = v.getSelection().cells.size;
+        Se > 1 ? Q(`${Se} cells selected`) : Q(`Row ${qe}, Column ${st} selected`);
       };
       switch (i.key) {
         case "ArrowUp":
@@ -1473,103 +1567,123 @@ const un = $t(
           break;
         case "Tab": {
           if (i.preventDefault(), i.shiftKey) {
-            const j = k ? s.indexOf(k.rowId) : 0;
-            if ((k ? p.indexOf(k.colId) : 0) > 0)
+            const ee = y ? s.indexOf(y.rowId) : 0;
+            if ((y ? g.indexOf(y.colId) : 0) > 0)
               Z(0, -1, !1);
             else {
-              const ie = Math.max(0, (j === -1 ? 0 : j) - 1), me = s[ie], we = p[p.length - 1];
-              v.click(me, we, s, p), (Te = (ze = A.current).onSelectionChange) == null || Te.call(ze, v.getSelection()), (Me = N.current) == null || Me.markDirty("overlay"), U(ie, p.length - 1);
+              const ae = Math.max(0, (ee === -1 ? 0 : ee) - 1), Te = s[ae], We = g[g.length - 1];
+              v.click(Te, We, s, g), (Fe = (it = A.current).onSelectionChange) == null || Fe.call(it, v.getSelection()), (Ke = j.current) == null || Ke.markDirty("overlay"), K(ae, g.length - 1);
             }
           } else {
-            const j = k ? s.indexOf(k.rowId) : 0;
-            if ((k ? p.indexOf(k.colId) : -1) < p.length - 1)
+            const ee = y ? s.indexOf(y.rowId) : 0;
+            if ((y ? g.indexOf(y.colId) : -1) < g.length - 1)
               Z(0, 1, !1);
             else {
-              const ie = Math.min(s.length - 1, (j === -1 ? 0 : j) + 1), me = s[ie], we = p[0];
-              v.click(me, we, s, p), (ye = (ae = A.current).onSelectionChange) == null || ye.call(ae, v.getSelection()), (oe = N.current) == null || oe.markDirty("overlay"), U(ie, 0);
+              const ae = Math.min(s.length - 1, (ee === -1 ? 0 : ee) + 1), Te = s[ae], We = g[0];
+              v.click(Te, We, s, g), (Ie = (ge = A.current).onSelectionChange) == null || Ie.call(ge, v.getSelection()), (de = j.current) == null || de.markDirty("overlay"), K(ae, 0);
             }
           }
           break;
         }
         case "Escape":
-          i.preventDefault(), v.clear(), (De = (We = A.current).onSelectionChange) == null || De.call(We, v.getSelection()), (Xe = N.current) == null || Xe.markDirty("overlay"), Ce("Selection cleared");
+          i.preventDefault(), v.clear(), (Ne = (Ue = A.current).onSelectionChange) == null || Ne.call(Ue, v.getSelection()), (je = j.current) == null || je.markDirty("overlay"), Q("Selection cleared");
           break;
         case "a":
         case "A":
-          if (E) {
+          if (X) {
             i.preventDefault();
-            for (const j of s)
-              for (const ee of p)
-                v.ctrlClick(j, ee);
-            (Ue = (ue = A.current).onSelectionChange) == null || Ue.call(ue, v.getSelection()), (it = N.current) == null || it.markDirty("overlay"), Ce(`${s.length * p.length} cells selected`);
+            for (const ee of s)
+              for (const re of g)
+                v.ctrlClick(ee, re);
+            (pt = (Re = A.current).onSelectionChange) == null || pt.call(Re, v.getSelection()), (Wt = j.current) == null || Wt.markDirty("overlay"), Q(`${s.length * g.length} cells selected`);
           }
           break;
         case "Home": {
           i.preventDefault();
-          const j = k ? s.indexOf(k.rowId) : 0;
-          if (E)
-            v.click(s[0], p[0], s, p), (st = (lt = A.current).onSelectionChange) == null || st.call(lt, v.getSelection()), (rt = N.current) == null || rt.markDirty("overlay"), U(0, 0);
+          const ee = y ? s.indexOf(y.rowId) : 0;
+          if (X)
+            v.click(s[0], g[0], s, g), (Dt = (Ht = A.current).onSelectionChange) == null || Dt.call(Ht, v.getSelection()), (Xt = j.current) == null || Xt.markDirty("overlay"), K(0, 0);
           else {
-            const ee = j === -1 ? 0 : j;
-            v.click(s[ee], p[0], s, p), (ct = (dt = A.current).onSelectionChange) == null || ct.call(dt, v.getSelection()), (at = N.current) == null || at.markDirty("overlay"), U(ee, 0);
+            const re = ee === -1 ? 0 : ee;
+            v.click(s[re], g[0], s, g), (Et = (Pt = A.current).onSelectionChange) == null || Et.call(Pt, v.getSelection()), (Lt = j.current) == null || Lt.markDirty("overlay"), K(re, 0);
           }
           break;
         }
         case "End": {
           i.preventDefault();
-          const j = k ? s.indexOf(k.rowId) : 0;
-          if (E) {
-            const ee = s.length - 1, ie = p.length - 1;
-            v.click(s[ee], p[ie], s, p), (ft = (ht = A.current).onSelectionChange) == null || ft.call(ht, v.getSelection()), (ut = N.current) == null || ut.markDirty("overlay"), U(ee, ie);
+          const ee = y ? s.indexOf(y.rowId) : 0;
+          if (X) {
+            const re = s.length - 1, ae = g.length - 1;
+            v.click(s[re], g[ae], s, g), (At = (Ot = A.current).onSelectionChange) == null || At.call(Ot, v.getSelection()), (zt = j.current) == null || zt.markDirty("overlay"), K(re, ae);
           } else {
-            const ee = j === -1 ? 0 : j, ie = p.length - 1;
-            v.click(s[ee], p[ie], s, p), (pt = (gt = A.current).onSelectionChange) == null || pt.call(gt, v.getSelection()), (mt = N.current) == null || mt.markDirty("overlay"), U(ee, ie);
+            const re = ee === -1 ? 0 : ee, ae = g.length - 1;
+            v.click(s[re], g[ae], s, g), (Vt = (Yt = A.current).onSelectionChange) == null || Vt.call(Yt, v.getSelection()), (Bt = j.current) == null || Bt.markDirty("overlay"), K(re, ae);
           }
           break;
         }
       }
     }, []);
-    Kt(o, () => ({
+    vn(o, () => ({
       captureToCanvas(i) {
-        const g = fe.current;
-        if (!g)
+        const h = Ce.current;
+        if (!h)
           throw new Error("CanvasGrid: engines not initialized");
-        const { treeEngine: I, columnEngine: _, selectionEngine: v } = g, b = A.current, s = b.rowHeight ?? xt, p = b.sidebarWidth ?? yt;
-        return dn({
-          treeEngine: I,
-          columnEngine: _,
+        const { treeEngine: C, columnEngine: k, selectionEngine: v } = h, m = A.current, s = m.rowHeight ?? Nt, g = m.sidebarWidth ?? Ut;
+        return An({
+          treeEngine: C,
+          columnEngine: k,
           selectionEngine: v,
-          columnGroups: b.columnGroups,
+          columnGroups: m.columnGroups,
           rowHeight: s,
-          sidebarWidth: p,
-          gridLayerConfig: { rowStyle: b.rowStyle },
+          sidebarWidth: g,
+          headerOrientation: m.headerOrientation ?? "horizontal",
+          columnHeaderHeight: m.columnHeaderHeight,
+          gridLayerConfig: { rowStyle: m.rowStyle },
           cellLayerConfig: {
-            cellRenderer: b.cellRenderer,
-            getCellData: b.getCellData,
+            cellRenderer: m.cellRenderer,
+            getCellData: m.getCellData,
             hoveredCell: null
           },
-          scale: (i == null ? void 0 : i.scale) ?? 2
+          scale: (i == null ? void 0 : i.scale) ?? 2,
+          rowRange: i == null ? void 0 : i.rowRange
         });
+      },
+      getRowCount() {
+        var i;
+        return ((i = Ce.current) == null ? void 0 : i.treeEngine.flattenedRows.length) ?? 0;
       }
     }), []);
-    const Yt = c != null && c.length > 0, ot = Rt(L ?? "horizontal", Yt), Vt = _e + se.getTotalWidth() + 2, Gt = ot + ke.flattenedRows.length * y + 2;
-    return /* @__PURE__ */ de(
+    const hn = c != null && c.length > 0, It = qt(
+      L ?? "horizontal",
+      hn,
+      x
+    ), fn = Be + ue.getTotalWidth() + 2, un = It + Le.flattenedRows.length * W + 2, Oe = 12, Rt = 24, tt = pe || Je, St = Le.flattenedRows.length * W, gn = ue.getTotalWidth(), ht = ue.getPinnedWidth(), nt = Math.max(0, St - F.height), kt = gn - ht, ft = Math.max(0, F.width - ht), ot = Math.max(0, kt - ft), Mt = 2, _t = nt > Mt && F.height > 0, Tt = ot > Mt && F.width > 0, Ge = F.height - (Tt ? Oe : 0), ut = Math.min(
+      Ge,
+      Math.max(Rt, Ge * (F.height / St))
+    ), pn = nt > 0 ? $ / nt * (Ge - ut) : 0, $e = ft - (_t ? Oe : 0), gt = Math.min(
+      $e,
+      Math.max(
+        Rt,
+        $e * (ft / kt)
+      )
+    ), mn = ot > 0 ? G / ot * ($e - gt) : 0;
+    return /* @__PURE__ */ be(
       "div",
       {
-        ref: et,
+        ref: Ee,
         tabIndex: 0,
         role: "grid",
-        "aria-label": K,
-        "aria-rowcount": ke.flattenedRows.length,
-        "aria-colcount": se.getVisibleColumns().length,
-        onKeyDown: At,
+        "aria-label": ke,
+        "aria-rowcount": Le.flattenedRows.length,
+        "aria-colcount": ue.getVisibleColumns().length,
+        onKeyDown: an,
         style: {
           display: "flex",
           flexDirection: "column",
-          width: Vt,
-          height: Gt,
+          width: fn,
+          height: un,
           maxWidth: "100%",
-          maxHeight: "100%",
+          maxHeight: H ?? "100%",
           overflow: "hidden",
           fontFamily: "system-ui, sans-serif",
           outline: "none",
@@ -1577,12 +1691,12 @@ const un = $t(
           borderRadius: 4
         },
         children: [
-          /* @__PURE__ */ de("div", { style: { display: "flex", flexDirection: "row", height: ot, flexShrink: 0 }, children: [
-            !Be && /* @__PURE__ */ H(
+          /* @__PURE__ */ be("div", { style: { display: "flex", flexDirection: "row", height: It, flexShrink: 0 }, children: [
+            !ct && /* @__PURE__ */ _(
               "div",
               {
                 style: {
-                  width: _e,
+                  width: Be,
                   flexShrink: 0,
                   borderRight: "1px solid #e5e7eb",
                   borderBottom: "1px solid #e5e7eb",
@@ -1591,95 +1705,169 @@ const un = $t(
                   flexDirection: "column",
                   overflow: "hidden"
                 },
-                children: e.sidebarHeaderRenderer ? /* @__PURE__ */ H("div", { style: { width: "100%", flex: 1 }, children: e.sidebarHeaderRenderer() }) : B ? /* @__PURE__ */ H("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", flex: 1 }, children: /* @__PURE__ */ H(
-                  ln,
+                children: e.sidebarHeaderRenderer ? /* @__PURE__ */ _("div", { style: { width: "100%", flex: 1 }, children: e.sidebarHeaderRenderer() }) : De ? /* @__PURE__ */ _("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", flex: 1 }, children: /* @__PURE__ */ _(
+                  Xn,
                   {
-                    columnEngine: se,
-                    onColumnVisibilityChange: zt
+                    columnEngine: ue,
+                    onColumnVisibilityChange: dn
                   }
                 ) }) : null
               }
             ),
-            /* @__PURE__ */ H(
-              on,
+            /* @__PURE__ */ _(
+              Dn,
               {
-                columnEngine: se,
+                columnEngine: ue,
                 columnGroups: c,
-                scrollX: V,
+                scrollX: G,
                 orientation: L,
-                onColumnClick: Y ? Et : void 0,
-                onColumnResize: e.onColumnResize !== void 0 ? Lt : void 0,
-                onColumnReorder: e.onColumnReorder !== void 0 ? Ot : void 0,
+                columnHeaderHeight: x,
+                onColumnClick: w ? sn : void 0,
+                onColumnResize: e.onColumnResize !== void 0 ? rn : void 0,
+                onColumnReorder: e.onColumnReorder !== void 0 ? cn : void 0,
+                onColumnFilterClick: e.onColumnFilterClick,
                 columnHeaderRenderer: e.columnHeaderRenderer
               }
             )
           ] }),
-          /* @__PURE__ */ de("div", { style: { display: "flex", flexDirection: "row", flex: 1, overflow: "hidden" }, children: [
-            !Be && /* @__PURE__ */ H(
-              en,
+          /* @__PURE__ */ be("div", { style: { display: "flex", flexDirection: "row", flex: 1, overflow: "hidden" }, children: [
+            !ct && /* @__PURE__ */ _(
+              _n,
               {
-                treeEngine: ke,
-                width: _e,
-                rowHeight: y,
-                scrollTop: P,
-                viewportHeight: ce.current.canvasHeight || 600,
-                sidebarRenderer: f,
-                onToggle: Fe,
-                onRowClick: e.onRowHeaderClick ? (i, g) => e.onRowHeaderClick(i, g.nativeEvent) : void 0,
-                hoveredRowId: Mt,
+                treeEngine: Le,
+                width: Be,
+                rowHeight: W,
+                scrollTop: $,
+                viewportHeight: fe.current.canvasHeight || 600,
+                sidebarRenderer: u,
+                onToggle: at,
+                onRowClick: e.onRowHeaderClick ? (i, h) => e.onRowHeaderClick(i, h.nativeEvent) : void 0,
+                hoveredRowId: ie,
                 onRowHover: (i) => {
-                  var g;
-                  Ee.current = i, $e(i), (g = N.current) == null || g.markDirty("overlay");
+                  var h;
+                  ve.current = i, Me(i), (h = j.current) == null || h.markDirty("overlay");
                 }
               }
             ),
-            /* @__PURE__ */ de("div", { style: { flex: 1, position: "relative", overflow: "hidden" }, children: [
-              /* @__PURE__ */ H(
-                "canvas",
-                {
-                  ref: (i) => {
-                    i && (pe.current[0] = i);
-                  },
-                  style: { position: "absolute", top: 0, left: 0, zIndex: 0 }
-                }
-              ),
-              /* @__PURE__ */ H(
-                "canvas",
-                {
-                  ref: (i) => {
-                    i && (pe.current[1] = i);
-                  },
-                  style: { position: "absolute", top: 0, left: 0, zIndex: 1 }
-                }
-              ),
-              /* @__PURE__ */ H(
-                "canvas",
-                {
-                  ref: (i) => {
-                    i && (pe.current[2] = i);
-                  },
-                  style: { position: "absolute", top: 0, left: 0, zIndex: 2 },
-                  onPointerMove: Wt,
-                  onPointerDown: Dt,
-                  onDoubleClick: Xt,
-                  onContextMenu: Ht,
-                  onPointerLeave: Pt
-                }
-              )
-            ] })
+            /* @__PURE__ */ be(
+              "div",
+              {
+                style: { flex: 1, position: "relative", overflow: "hidden" },
+                onMouseEnter: () => te(!0),
+                onMouseLeave: () => te(!1),
+                children: [
+                  /* @__PURE__ */ _(
+                    "canvas",
+                    {
+                      ref: (i) => {
+                        i && (_e.current[0] = i);
+                      },
+                      style: { position: "absolute", top: 0, left: 0, zIndex: 0 }
+                    }
+                  ),
+                  /* @__PURE__ */ _(
+                    "canvas",
+                    {
+                      ref: (i) => {
+                        i && (_e.current[1] = i);
+                      },
+                      style: { position: "absolute", top: 0, left: 0, zIndex: 1 }
+                    }
+                  ),
+                  /* @__PURE__ */ _(
+                    "canvas",
+                    {
+                      ref: (i) => {
+                        i && (_e.current[2] = i);
+                      },
+                      style: { position: "absolute", top: 0, left: 0, zIndex: 2 },
+                      onPointerMove: en,
+                      onPointerDown: tn,
+                      onDoubleClick: nn,
+                      onContextMenu: on,
+                      onPointerLeave: ln
+                    }
+                  ),
+                  _t && /* @__PURE__ */ _(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        width: Oe,
+                        height: Ge,
+                        zIndex: 3,
+                        opacity: tt ? 1 : 0,
+                        transition: "opacity 150ms ease",
+                        pointerEvents: tt ? "auto" : "none"
+                      },
+                      children: /* @__PURE__ */ _(
+                        "div",
+                        {
+                          onMouseDown: (i) => xt("y", i, Ge - ut, nt),
+                          style: {
+                            position: "absolute",
+                            top: pn,
+                            left: 2,
+                            width: Oe - 4,
+                            height: ut,
+                            borderRadius: 8,
+                            backgroundColor: "rgba(0, 0, 0, 0.3)",
+                            cursor: "pointer"
+                          }
+                        }
+                      )
+                    }
+                  ),
+                  Tt && /* @__PURE__ */ _(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        bottom: 0,
+                        left: ht,
+                        height: Oe,
+                        width: $e,
+                        zIndex: 3,
+                        opacity: tt ? 1 : 0,
+                        transition: "opacity 150ms ease",
+                        pointerEvents: tt ? "auto" : "none"
+                      },
+                      children: /* @__PURE__ */ _(
+                        "div",
+                        {
+                          onMouseDown: (i) => xt("x", i, $e - gt, ot),
+                          style: {
+                            position: "absolute",
+                            left: mn,
+                            top: 2,
+                            height: Oe - 4,
+                            width: gt,
+                            borderRadius: 8,
+                            backgroundColor: "rgba(0, 0, 0, 0.3)",
+                            cursor: "pointer"
+                          }
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
           ] }),
-          x != null && F != null && /* @__PURE__ */ H(sn, { content: x, position: F }),
-          /* @__PURE__ */ H(rn, { message: Tt })
+          l != null && ne != null && /* @__PURE__ */ _(Pn, { content: l, position: ne }),
+          /* @__PURE__ */ _(En, { message: xe })
         ]
       }
     );
   })
 );
 export {
-  un as CanvasGrid,
-  Ie as ColumnEngine,
-  qt as SelectionEngine,
-  Nt as TreeEngine,
-  St as ViewState,
-  Qt as createDrawHelpers
+  Gn as CanvasGrid,
+  Pe as ColumnEngine,
+  Rn as SelectionEngine,
+  xn as TreeEngine,
+  Zt as ViewState,
+  kn as createDrawHelpers
 };