@1771technologies/lytenyte-pro 1.0.0-beta.36 → 1.0.0-beta.38

package/dist/header/header.js

@@ -4,16 +4,7 @@ import { useGridRoot } from "../context";
 import { fastDeepMemo } from "@1771technologies/lytenyte-react-hooks";
 import { HeaderReact } from "@1771technologies/lytenyte-shared";
 const HeaderImpl = forwardRef(function Header(props, forwarded) {
-  const grid = useGridRoot().grid;
-  return _jsx(HeaderReact, {
-    ...props,
-    ref: forwarded,
-    floatingRowEnabled: grid.state.floatingRowEnabled.useValue(),
-    floatingRowHeight: grid.state.floatingRowHeight.useValue(),
-    headerGroupHeight: grid.state.headerGroupHeight.useValue(),
-    headerHeight: grid.state.headerHeight.useValue(),
-    rows: grid.internal.headerRows.useValue(),
-    width: grid.state.widthTotal.useValue(),
-  });
+    const grid = useGridRoot().grid;
+    return (_jsx(HeaderReact, { ...props, ref: forwarded, floatingRowEnabled: grid.state.floatingRowEnabled.useValue(), floatingRowHeight: grid.state.floatingRowHeight.useValue(), headerGroupHeight: grid.state.headerGroupHeight.useValue(), headerHeight: grid.state.headerHeight.useValue(), rows: grid.internal.headerRows.useValue(), width: grid.state.widthTotal.useValue() }));
 });
 export const Header = fastDeepMemo(HeaderImpl);

package/dist/header/resize-handler.d.ts

@@ -2,20 +2,11 @@ import { type SlotComponent } from "@1771technologies/lytenyte-react-hooks";
 import type { HeaderCellLayout } from "../+types";
 import { type CSSProperties } from "react";
 interface ResizeHandlerProps<T> {
-  readonly as?: SlotComponent;
-  readonly cell: HeaderCellLayout<T>;
-  readonly xPositions: Uint32Array;
-  readonly className?: string;
-  readonly style?: CSSProperties;
+    readonly as?: SlotComponent;
+    readonly cell: HeaderCellLayout<T>;
+    readonly xPositions: Uint32Array;
+    readonly className?: string;
+    readonly style?: CSSProperties;
 }
-export declare function ResizeHandler<T>({
-  as,
-  cell,
-  xPositions,
-  style,
-  className,
-}: ResizeHandlerProps<T>): import("react").ReactElement<
-  unknown,
-  string | import("react").JSXElementConstructor<any>
->;
+export declare function ResizeHandler<T>({ as, cell, xPositions, style, className, }: ResizeHandlerProps<T>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export {};

package/dist/header/resize-handler.js

@@ -1,142 +1,133 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useSlot } from "@1771technologies/lytenyte-react-hooks";
 import {} from "react";
-import {
-  DEFAULT_COLUMN_WIDTH_MAX,
-  DEFAULT_COLUMN_WIDTH_MIN,
-  getColIndexFromEl,
-  getTranslate,
-  sizeFromCoord,
-} from "@1771technologies/lytenyte-shared";
+import { DEFAULT_COLUMN_WIDTH_MAX, DEFAULT_COLUMN_WIDTH_MIN, getColIndexFromEl, getTranslate, sizeFromCoord, } from "@1771technologies/lytenyte-shared";
 import { useGridRoot } from "../context";
 import { getComputedStyle, isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
 import { clamp, getClientX } from "@1771technologies/lytenyte-js-utils";
-export function ResizeHandler({ as, cell, xPositions, style, className }) {
-  const width = sizeFromCoord(cell.colStart, xPositions, cell.colSpan);
-  const sx = useGridRoot().grid;
-  const double = sx.state.columnDoubleClickToAutosize.useValue();
-  const defaultProps = {
-    role: "button",
-    "data-ln-header-resizer": "true",
-    "aria-label": `Resize ${cell.column.name ?? cell.column.id}`,
-    tabIndex: -1,
-    onDoubleClick: () => {
-      if (!double) return;
-      sx.api.columnAutosize({
-        columns: [cell.column],
-        includeHeader: true,
-      });
-    },
-    onPointerDown: (ev) => {
-      const vp = sx.state.viewport.get();
-      if (!vp) return;
-      if (ev.pointerType === "mouse" && ev.button !== 0) return;
-      ev.preventDefault();
-      ev.stopPropagation();
-      const isRtl = sx.state.rtl.get();
-      let startX = null;
-      let anim = null;
-      const style = getComputedStyle(vp);
-      const overflow = style.overflowX;
-      vp.style.overflowX = "hidden";
-      const base = sx.state.columnBase.get();
-      const minWidth = cell.column.widthMin ?? base.widthMin ?? DEFAULT_COLUMN_WIDTH_MIN;
-      const maxWidth = cell.column.widthMax ?? base.widthMax ?? DEFAULT_COLUMN_WIDTH_MAX;
-      const maxDelta = maxWidth - width;
-      const minDelta = minWidth - width;
-      const deltaRef = { current: 0 };
-      const controller = new AbortController();
-      document.addEventListener(
-        "pointermove",
-        (ev) => {
-          if (startX === null) {
-            startX = getClientX(ev);
-            return;
-          }
-          const endAdjust = cell.colPin === "end" ? -1 : 1;
-          const rtlAdjust = isRtl ? -1 : 1;
-          deltaRef.current = clamp(
-            minDelta,
-            (getClientX(ev) - startX) * endAdjust * rtlAdjust,
-            maxDelta,
-          );
-          if (anim) return;
-          anim = requestAnimationFrame(() => {
-            const id = sx.state.gridId.get();
-            const query = `[data-ln-row][data-ln-gridid="${id}"] [data-ln-cell="true"][data-ln-colindex="${cell.colStart}"]`;
-            const headerQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"]`;
-            const floatingQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"][data-ln-header-floating="true"]`;
-            const header = vp.querySelector(headerQuery);
-            const floating = vp.querySelector(floatingQuery);
-            if (!header) return;
-            const pin = header.getAttribute("data-ln-pin");
-            const queryAfter = `${query} ~ [data-ln-cell="true"]`;
-            const headerAfterQuery = `${headerQuery} ~ [data-ln-header-cell="true"]`;
-            let after;
-            if (pin !== "end") {
-              after = Array.from(vp.querySelectorAll(queryAfter)).concat(
-                Array.from(vp.querySelectorAll(headerAfterQuery)),
-              );
-            } else {
-              after = [];
-            }
-            const q = Array.from(vp.querySelectorAll(query));
-            q.push(header);
-            if (floating) q.push(floating);
-            q.forEach((c) => {
-              if (!isHTMLElement(c)) return;
-              c.style.removeProperty("min-width");
-              c.style.removeProperty("max-width");
-              c.style.width = `${width + deltaRef.current}px`;
-              if (pin === "end") {
-                const viewportWidth = sx.state.viewportWidthInner.get();
-                const spaceLeft = xPositions.at(-1) - xPositions[cell.colStart];
-                const x = viewportWidth - spaceLeft - deltaRef.current;
-                c.style.transform = getTranslate(isRtl ? -x : x, 0);
-              }
-            });
-            after.forEach((c) => {
-              if (!isHTMLElement(c)) return;
-              const thisPin = c.getAttribute("data-ln-pin");
-              if (pin === "end" && thisPin === "end") {
+export function ResizeHandler({ as, cell, xPositions, style, className, }) {
+    const width = sizeFromCoord(cell.colStart, xPositions, cell.colSpan);
+    const sx = useGridRoot().grid;
+    const double = sx.state.columnDoubleClickToAutosize.useValue();
+    const defaultProps = {
+        role: "button",
+        "data-ln-header-resizer": "true",
+        "aria-label": `Resize ${cell.column.name ?? cell.column.id}`,
+        tabIndex: -1,
+        onDoubleClick: () => {
+            if (!double)
                 return;
-              }
-              if (pin !== "end" && thisPin === "end") return;
-              const colindex = getColIndexFromEl(c);
-              const transform = xPositions[colindex] + deltaRef.current;
-              c.style.transform = getTranslate(transform * (isRtl ? -1 : 1), 0);
+            sx.api.columnAutosize({
+                columns: [cell.column],
+                includeHeader: true,
             });
-            anim = null;
-          });
         },
-        { signal: controller.signal },
-      );
-      window.addEventListener(
-        "pointerup",
-        () => {
-          if (anim) cancelAnimationFrame(anim);
-          controller.abort();
-          vp.style.overflowX = overflow;
-          const newWidth = width + deltaRef.current;
-          sx.api.columnResize({ [cell.id]: newWidth });
+        onPointerDown: (ev) => {
+            const vp = sx.state.viewport.get();
+            if (!vp)
+                return;
+            if (ev.pointerType === "mouse" && ev.button !== 0)
+                return;
+            ev.preventDefault();
+            ev.stopPropagation();
+            const isRtl = sx.state.rtl.get();
+            let startX = null;
+            let anim = null;
+            const style = getComputedStyle(vp);
+            const overflow = style.overflowX;
+            vp.style.overflowX = "hidden";
+            const base = sx.state.columnBase.get();
+            const minWidth = cell.column.widthMin ?? base.widthMin ?? DEFAULT_COLUMN_WIDTH_MIN;
+            const maxWidth = cell.column.widthMax ?? base.widthMax ?? DEFAULT_COLUMN_WIDTH_MAX;
+            const maxDelta = maxWidth - width;
+            const minDelta = minWidth - width;
+            const deltaRef = { current: 0 };
+            const controller = new AbortController();
+            document.addEventListener("pointermove", (ev) => {
+                if (startX === null) {
+                    startX = getClientX(ev);
+                    return;
+                }
+                const endAdjust = cell.colPin === "end" ? -1 : 1;
+                const rtlAdjust = isRtl ? -1 : 1;
+                deltaRef.current = clamp(minDelta, (getClientX(ev) - startX) * endAdjust * rtlAdjust, maxDelta);
+                if (anim)
+                    return;
+                anim = requestAnimationFrame(() => {
+                    const id = sx.state.gridId.get();
+                    const query = `[data-ln-row][data-ln-gridid="${id}"] [data-ln-cell="true"][data-ln-colindex="${cell.colStart}"]`;
+                    const headerQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"]`;
+                    const floatingQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"][data-ln-header-floating="true"]`;
+                    const header = vp.querySelector(headerQuery);
+                    const floating = vp.querySelector(floatingQuery);
+                    if (!header)
+                        return;
+                    const pin = header.getAttribute("data-ln-pin");
+                    const queryAfter = `${query} ~ [data-ln-cell="true"]`;
+                    const headerAfterQuery = `${headerQuery} ~ [data-ln-header-cell="true"]`;
+                    let after;
+                    if (pin !== "end") {
+                        after = Array.from(vp.querySelectorAll(queryAfter)).concat(Array.from(vp.querySelectorAll(headerAfterQuery)));
+                    }
+                    else {
+                        after = [];
+                    }
+                    const q = Array.from(vp.querySelectorAll(query));
+                    q.push(header);
+                    if (floating)
+                        q.push(floating);
+                    q.forEach((c) => {
+                        if (!isHTMLElement(c))
+                            return;
+                        c.style.removeProperty("min-width");
+                        c.style.removeProperty("max-width");
+                        c.style.width = `${width + deltaRef.current}px`;
+                        if (pin === "end") {
+                            const viewportWidth = sx.state.viewportWidthInner.get();
+                            const spaceLeft = xPositions.at(-1) - xPositions[cell.colStart];
+                            const x = viewportWidth - spaceLeft - deltaRef.current;
+                            c.style.transform = getTranslate(isRtl ? -x : x, 0);
+                        }
+                    });
+                    after.forEach((c) => {
+                        if (!isHTMLElement(c))
+                            return;
+                        const thisPin = c.getAttribute("data-ln-pin");
+                        if (pin === "end" && thisPin === "end") {
+                            return;
+                        }
+                        if (pin !== "end" && thisPin === "end")
+                            return;
+                        const colindex = getColIndexFromEl(c);
+                        const transform = xPositions[colindex] + deltaRef.current;
+                        c.style.transform = getTranslate(transform * (isRtl ? -1 : 1), 0);
+                    });
+                    anim = null;
+                });
+            }, { signal: controller.signal });
+            window.addEventListener("pointerup", () => {
+                if (anim)
+                    cancelAnimationFrame(anim);
+                controller.abort();
+                vp.style.overflowX = overflow;
+                const newWidth = width + deltaRef.current;
+                sx.api.columnResize({ [cell.id]: newWidth });
+            }, { signal: controller.signal });
+        },
+        className,
+        style: {
+            height: "100%",
+            width: "6px",
+            ...style,
+            top: "0px",
+            insetInlineEnd: cell.colPin !== "end" ? "0px" : undefined,
+            insetInlineStart: cell.colPin === "end" ? "0px" : undefined,
+            position: "absolute",
         },
-        { signal: controller.signal },
-      );
-    },
-    className,
-    style: {
-      height: "100%",
-      width: "6px",
-      ...style,
-      top: "0px",
-      insetInlineEnd: cell.colPin !== "end" ? "0px" : undefined,
-      insetInlineStart: cell.colPin === "end" ? "0px" : undefined,
-      position: "absolute",
-    },
-  };
-  const edge = useSlot({
-    props: [defaultProps],
-    slot: as ?? _jsx("div", {}),
-  });
-  return edge;
+    };
+    const edge = useSlot({
+        props: [defaultProps],
+        slot: as ?? _jsx("div", {}),
+    });
+    return edge;
 }

package/dist/header/use-drag-move.d.ts

@@ -1,25 +1,14 @@
-import type {
-  Grid,
-  HeaderCellFloating,
-  HeaderCellLayout,
-  HeaderGroupCellLayout,
-} from "../+types.js";
+import type { Grid, HeaderCellFloating, HeaderCellLayout, HeaderGroupCellLayout } from "../+types.js";
 import { type JSX } from "react";
 import type { InternalAtoms } from "../state/+types.js";
-export declare function useDragMove<T>(
-  grid: Grid<T> & {
+export declare function useDragMove<T>(grid: Grid<T> & {
     internal: InternalAtoms;
-  },
-  cell: HeaderGroupCellLayout | HeaderCellLayout<T> | HeaderCellFloating<T>,
-  onDragStart?: JSX.IntrinsicElements["div"]["onDragStart"],
-):
-  | {
-      draggable?: undefined;
-      onDragStart?: undefined;
-      ref?: undefined;
-    }
-  | {
-      draggable: true;
-      onDragStart: (e: import("react").DragEvent<Element>) => void;
-      ref: any;
-    };
+}, cell: HeaderGroupCellLayout | HeaderCellLayout<T> | HeaderCellFloating<T>, onDragStart?: JSX.IntrinsicElements["div"]["onDragStart"]): {
+    draggable?: undefined;
+    onDragStart?: undefined;
+    ref?: undefined;
+} | {
+    draggable: true;
+    onDragStart: (e: import("react").DragEvent<Element>) => void;
+    ref: any;
+};

package/dist/header/use-drag-move.js

@@ -1,98 +1,97 @@
-import {
-  COLUMN_MARKER_ID,
-  getHoveredColumnIndex,
-  getNearestFocusable,
-  GROUP_COLUMN_PREFIX,
-  useDraggable,
-} from "@1771technologies/lytenyte-shared";
+import { COLUMN_MARKER_ID, getHoveredColumnIndex, getNearestFocusable, GROUP_COLUMN_PREFIX, useDraggable, } from "@1771technologies/lytenyte-shared";
 import { useMemo, useRef } from "react";
 export function useDragMove(grid, cell, onDragStart) {
-  const ctx = grid.state;
-  const meta = ctx.columnMeta.useValue();
-  const base = ctx.columnBase.useValue();
-  const columns = useMemo(() => {
-    const columns = [];
-    for (let i = cell.colStart; i < cell.colEnd; i++) {
-      columns.push(meta.columnsVisible[i]);
-    }
-    return columns;
-  }, [cell.colEnd, cell.colStart, meta.columnsVisible]);
-  const isMovable = useMemo(() => {
-    return columns.every(
-      (c) =>
-        !c.id.startsWith(GROUP_COLUMN_PREFIX) &&
-        c.id !== COLUMN_MARKER_ID &&
-        (c.uiHints?.movable ?? base.uiHints?.movable ?? false),
-    );
-  }, [base.uiHints?.movable, columns]);
-  const swapDirection = useRef(null);
-  const swapIndex = useRef(-1);
-  const swapPrevIndex = useRef(-1);
-  const isForward = useRef(false);
-  const prevPos = useRef(-1);
-  const { dragProps } = useDraggable({
-    getItems: () => ({}),
-    onDragStart: () => {
-      if (cell.kind === "group") grid.internal.draggingHeader.set(cell);
-    },
-    onDragEnd: () => {
-      grid.internal.draggingHeader.set(null);
-    },
-    onDragMove: (p) => {
-      const element = document.elementFromPoint(p.position.x, p.position.y);
-      const vp = grid.state.viewport.get();
-      if (!vp?.contains(element)) return;
-      const nearest = getNearestFocusable(element);
-      if (!nearest) return;
-      if (prevPos.current < p.position.x) isForward.current = true;
-      if (prevPos.current > p.position.x) isForward.current = false;
-      prevPos.current = p.position.x;
-      const meta = grid.state.columnMeta.get();
-      const index = getHoveredColumnIndex({
-        viewport: vp,
-        centerCount: meta.columnVisibleCenterCount,
-        startCount: meta.columnVisibleStartCount,
-        endCount: meta.columnVisibleEndCount,
-        clientX: p.position.x,
-        rtl: grid.state.rtl.get(),
-        xPositions: grid.state.xPositions.get(),
-      });
-      if (index == null) return;
-      const columnTarget = grid.api.columnByIndex(index);
-      if (columnTarget) {
-        if (columnTarget.id === COLUMN_MARKER_ID || columnTarget.id.startsWith(GROUP_COLUMN_PREFIX))
-          return;
-      }
-      const first = columns[0];
-      const currentIndex = grid.api.columnIndex(first);
-      const columnIndices = columns.map((c) => grid.api.columnIndex(c));
-      if (columnIndices.includes(index)) return;
-      const ignoreMove =
-        swapDirection.current === isForward.current &&
-        swapIndex.current === currentIndex &&
-        index === swapPrevIndex.current;
-      if (currentIndex === index || ignoreMove) return;
-      swapDirection.current = isForward.current;
-      swapIndex.current = index;
-      swapPrevIndex.current = currentIndex;
-      grid.api.columnMove({
-        moveColumns: columns,
-        moveTarget: index,
-        before: currentIndex > index,
-        updatePinState: true,
-      });
-    },
-  });
-  const finalProps = useMemo(() => {
-    if (cell.kind === "floating" || !isMovable) return {};
-    return {
-      draggable: true,
-      onDragStart: (e) => {
-        onDragStart?.(e);
-        dragProps.onDragStart(e);
-      },
-      ref: dragProps.ref,
-    };
-  }, [cell.kind, dragProps, isMovable, onDragStart]);
-  return finalProps;
+    const ctx = grid.state;
+    const meta = ctx.columnMeta.useValue();
+    const base = ctx.columnBase.useValue();
+    const columns = useMemo(() => {
+        const columns = [];
+        for (let i = cell.colStart; i < cell.colEnd; i++) {
+            columns.push(meta.columnsVisible[i]);
+        }
+        return columns;
+    }, [cell.colEnd, cell.colStart, meta.columnsVisible]);
+    const isMovable = useMemo(() => {
+        return columns.every((c) => !c.id.startsWith(GROUP_COLUMN_PREFIX) &&
+            c.id !== COLUMN_MARKER_ID &&
+            (c.uiHints?.movable ?? base.uiHints?.movable ?? false));
+    }, [base.uiHints?.movable, columns]);
+    const swapDirection = useRef(null);
+    const swapIndex = useRef(-1);
+    const swapPrevIndex = useRef(-1);
+    const isForward = useRef(false);
+    const prevPos = useRef(-1);
+    const { dragProps } = useDraggable({
+        getItems: () => ({}),
+        onDragStart: () => {
+            if (cell.kind === "group")
+                grid.internal.draggingHeader.set(cell);
+        },
+        onDragEnd: () => {
+            grid.internal.draggingHeader.set(null);
+        },
+        onDragMove: (p) => {
+            const element = document.elementFromPoint(p.position.x, p.position.y);
+            const vp = grid.state.viewport.get();
+            if (!vp?.contains(element))
+                return;
+            const nearest = getNearestFocusable(element);
+            if (!nearest)
+                return;
+            if (prevPos.current < p.position.x)
+                isForward.current = true;
+            if (prevPos.current > p.position.x)
+                isForward.current = false;
+            prevPos.current = p.position.x;
+            const meta = grid.state.columnMeta.get();
+            const index = getHoveredColumnIndex({
+                viewport: vp,
+                centerCount: meta.columnVisibleCenterCount,
+                startCount: meta.columnVisibleStartCount,
+                endCount: meta.columnVisibleEndCount,
+                clientX: p.position.x,
+                rtl: grid.state.rtl.get(),
+                xPositions: grid.state.xPositions.get(),
+            });
+            if (index == null)
+                return;
+            const columnTarget = grid.api.columnByIndex(index);
+            if (columnTarget) {
+                if (columnTarget.id === COLUMN_MARKER_ID || columnTarget.id.startsWith(GROUP_COLUMN_PREFIX))
+                    return;
+            }
+            const first = columns[0];
+            const currentIndex = grid.api.columnIndex(first);
+            const columnIndices = columns.map((c) => grid.api.columnIndex(c));
+            if (columnIndices.includes(index))
+                return;
+            const ignoreMove = swapDirection.current === isForward.current &&
+                swapIndex.current === currentIndex &&
+                index === swapPrevIndex.current;
+            if (currentIndex === index || ignoreMove)
+                return;
+            swapDirection.current = isForward.current;
+            swapIndex.current = index;
+            swapPrevIndex.current = currentIndex;
+            grid.api.columnMove({
+                moveColumns: columns,
+                moveTarget: index,
+                before: currentIndex > index,
+                updatePinState: true,
+            });
+        },
+    });
+    const finalProps = useMemo(() => {
+        if (cell.kind === "floating" || !isMovable)
+            return {};
+        return {
+            draggable: true,
+            onDragStart: (e) => {
+                onDragStart?.(e);
+                dragProps.onDragStart(e);
+            },
+            ref: dragProps.ref,
+        };
+    }, [cell.kind, dragProps, isMovable, onDragStart]);
+    return finalProps;
 }

package/dist/header/use-header-cell-renderer.d.ts

@@ -1,11 +1,4 @@
 import type { HeaderCellFloating, HeaderCellLayout, HeaderCellRendererParams } from "../+types";
-declare function DefaultRenderer(
-  p: HeaderCellRendererParams<any>,
-): import("react/jsx-runtime").JSX.Element;
-export declare function useHeaderCellRenderer<T>(
-  cell: HeaderCellLayout<T> | HeaderCellFloating<T>,
-):
-  | import("../+types").HeaderFloatingCellRendererFn<any>
-  | import("../+types").HeaderCellRendererFn<T>
-  | typeof DefaultRenderer;
+declare function DefaultRenderer(p: HeaderCellRendererParams<any>): import("react/jsx-runtime").JSX.Element;
+export declare function useHeaderCellRenderer<T>(cell: HeaderCellLayout<T> | HeaderCellFloating<T>): import("../+types").HeaderFloatingCellRendererFn<any> | import("../+types").HeaderCellRendererFn<T> | typeof DefaultRenderer;
 export {};

package/dist/header/use-header-cell-renderer.js

@@ -2,31 +2,35 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useGridRoot } from "../context";
 function DefaultRenderer(p) {
-  return _jsx(_Fragment, { children: p.column.name ?? p.column.id });
+    return _jsx(_Fragment, { children: p.column.name ?? p.column.id });
 }
 export function useHeaderCellRenderer(cell) {
-  const ctx = useGridRoot().grid;
-  const base = ctx.state.columnBase.useValue();
-  const floatingRenderers = ctx.state.floatingCellRenderers.useValue();
-  const headerRenderers = ctx.state.headerCellRenderers.useValue();
-  return useMemo(() => {
-    if (cell.kind === "cell") {
-      const renderer = cell.column.headerRenderer ?? base.headerRenderer ?? DefaultRenderer;
-      if (typeof renderer === "string") return headerRenderers[renderer] ?? DefaultRenderer;
-      else return renderer;
-    } else {
-      const renderer =
-        cell.column.floatingCellRenderer ?? base.floatingCellRenderer ?? DefaultRenderer;
-      if (typeof renderer === "string") return floatingRenderers[renderer] ?? DefaultRenderer;
-      else return renderer;
-    }
-  }, [
-    base.floatingCellRenderer,
-    base.headerRenderer,
-    cell.column.floatingCellRenderer,
-    cell.column.headerRenderer,
-    cell.kind,
-    floatingRenderers,
-    headerRenderers,
-  ]);
+    const ctx = useGridRoot().grid;
+    const base = ctx.state.columnBase.useValue();
+    const floatingRenderers = ctx.state.floatingCellRenderers.useValue();
+    const headerRenderers = ctx.state.headerCellRenderers.useValue();
+    return useMemo(() => {
+        if (cell.kind === "cell") {
+            const renderer = cell.column.headerRenderer ?? base.headerRenderer ?? DefaultRenderer;
+            if (typeof renderer === "string")
+                return headerRenderers[renderer] ?? DefaultRenderer;
+            else
+                return renderer;
+        }
+        else {
+            const renderer = cell.column.floatingCellRenderer ?? base.floatingCellRenderer ?? DefaultRenderer;
+            if (typeof renderer === "string")
+                return floatingRenderers[renderer] ?? DefaultRenderer;
+            else
+                return renderer;
+        }
+    }, [
+        base.floatingCellRenderer,
+        base.headerRenderer,
+        cell.column.floatingCellRenderer,
+        cell.column.headerRenderer,
+        cell.kind,
+        floatingRenderers,
+        headerRenderers,
+    ]);
 }