@1771technologies/lytenyte-pro 1.0.6 → 1.0.8

package/dist/cells/+types.cell.d.ts

@@ -0,0 +1,13 @@
+import type { ColumnPin } from "../+types";
+export interface Cell {
+    readonly rowIndex: number;
+    readonly colIndex: number;
+    readonly colSpan: number;
+    readonly rowSpan: number;
+    readonly rowLastPinTop?: boolean;
+    readonly rowFirstPinBottom?: boolean;
+    readonly colLastStartPin?: boolean;
+    readonly colFirstEndPin?: boolean;
+    readonly colPin?: ColumnPin;
+    readonly rowPin?: "top" | "bottom" | null;
+}

package/dist/cells/+types.cell.js

@@ -0,0 +1 @@
+export {};

package/dist/cells/cell-spacer.d.ts

@@ -1,3 +1,9 @@
-export declare function CellSpacePinStart(): import("react/jsx-runtime").JSX.Element | null;
-export declare function CellSpacerPinEnd(): import("react/jsx-runtime").JSX.Element | null;
-export declare function CellSpacerNoPin(): import("react/jsx-runtime").JSX.Element | null;
+export declare function CellSpacePinStart({ xPositions: x }: {
+    xPositions: Uint32Array;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function CellSpacerPinEnd({ xPositions: x }: {
+    xPositions: Uint32Array;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function CellSpacerNoPin({ xPositions: x }: {
+    xPositions: Uint32Array;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/cells/cell-spacer.js

@@ -1,35 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useGridRoot } from "../context";
-export function CellSpacePinStart() {
+export function CellSpacePinStart({ xPositions: x }) {
     const ctx = useGridRoot().grid;
-    const xPos = ctx.state.xPositions.useValue();
     const bounds = ctx.state.viewBounds.useValue();
-    const offset = xPos[bounds.colCenterStart] - xPos[bounds.colStartEnd];
+    const offset = x[bounds.colCenterStart] - x[bounds.colStartEnd];
     const meta = ctx.state.columnMeta.useValue();
     if (meta.columnVisibleStartCount === 0)
         return null;
     return _jsx("div", { style: { display: "inline-block", width: offset, height: 0 } });
 }
-export function CellSpacerPinEnd() {
+export function CellSpacerPinEnd({ xPositions: x }) {
     const ctx = useGridRoot().grid;
-    const xPos = ctx.state.xPositions.useValue();
     const bounds = ctx.state.viewBounds.useValue();
-    const startOffset = xPos[bounds.colCenterEnd];
-    let offset = xPos[bounds.colEndStart] - startOffset;
+    const startOffset = x[bounds.colCenterEnd];
+    let offset = x[bounds.colEndStart] - startOffset;
     const viewWidth = ctx.state.viewportWidthInner.useValue();
-    if (xPos.at(-1) < viewWidth) {
-        offset = viewWidth - xPos.at(-1);
+    if (x.at(-1) < viewWidth) {
+        offset = viewWidth - x.at(-1);
     }
     const meta = ctx.state.columnMeta.useValue();
     if (meta.columnVisibleEndCount === 0)
         return null;
     return _jsx("div", { style: { display: "inline-block", width: offset, height: 0 } });
 }
-export function CellSpacerNoPin() {
+export function CellSpacerNoPin({ xPositions: x }) {
     const ctx = useGridRoot().grid;
-    const xPos = ctx.state.xPositions.useValue();
     const bounds = ctx.state.viewBounds.useValue();
-    const offset = xPos[bounds.colCenterStart - bounds.colStartEnd];
+    const offset = x[bounds.colCenterStart - bounds.colStartEnd];
     const meta = ctx.state.columnMeta.useValue();
     if (meta.columnVisibleStartCount > 0)
         return null;

package/dist/cells/cell.js

@@ -1,17 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
+import { forwardRef, memo, useEffect, useState } from "react";
 import { useGridRoot } from "../context";
-import { CellReact, sizeFromCoord } from "@1771technologies/lytenyte-shared";
+import { sizeFromCoord } from "@1771technologies/lytenyte-shared";
 import { CellDefault } from "./cell-default";
 import { CellEditor } from "./cell-editor";
 import { useRowMeta } from "../rows/row/context";
 import { CellSpacePinStart, CellSpacerPinEnd } from "./cell-spacer";
-export const Cell = forwardRef(function Cell({ cell, ...props }, forwarded) {
+import { useCellStyle } from "./use-cell-style";
+export const Cell = forwardRef(function Cell(props, forwarded) {
+    const { colBounds: [start, end], ...rowMeta } = useRowMeta();
+    // This enforces our column virtualization.
+    if (props.cell.colPin == null && (props.cell.colIndex >= end || props.cell.colIndex < start)) {
+        return null;
+    }
+    return _jsx(CellImpl, { ...props, ref: forwarded, ...rowMeta });
+});
+const CellImpl = memo(forwardRef(function Cell({ cell, row, selected, indeterminate, xPositions, yPositions, base, renderers, rtl, ...props }, forwarded) {
     const grid = useGridRoot().grid;
-    const cx = grid.state;
-    const base = grid.state.columnBase.useValue();
-    const row = cell.row.useValue();
-    const renderers = cx.cellRenderers.useValue();
     const providedRenderer = cell.column.cellRenderer ?? base.cellRenderer;
     const Renderer = providedRenderer
         ? typeof providedRenderer === "string"
@@ -29,12 +34,10 @@ export const Cell = forwardRef(function Cell({ cell, ...props }, forwarded) {
                 pos.rowIndex < cell.rowIndex + cell.rowSpan);
         });
     }, [cell.column, cell.rowIndex, cell.rowSpan, grid.internal.editActivePos]);
-    const xPositions = cx.xPositions.useValue();
-    const yPositions = cx.yPositions.useValue();
-    const rowMeta = useRowMeta();
+    const style = useCellStyle(xPositions, yPositions, cell, rtl, grid.api.rowDetailRenderedHeight(row ?? ""), undefined);
     if (cell.isDeadRow)
         return _jsx("div", { style: { width: sizeFromCoord(cell.colIndex, xPositions) } });
     if (!row || cell.isDeadCol)
         return null;
-    return (_jsxs(_Fragment, { children: [cell.colFirstEndPin && _jsx(CellSpacerPinEnd, {}), _jsxs(CellReact, { ...props, ref: forwarded, cell: cell, isEditing: isEditing, detailHeight: grid.api.rowDetailRenderedHeight(row ?? ""), rtl: cx.rtl.useValue(), xPosition: xPositions, yPosition: yPositions, children: [isEditing && _jsx(CellEditor, { cell: cell }), !isEditing && (_jsx(Renderer, { column: cell.column, rowSelected: rowMeta.selected, rowIndeterminate: rowMeta.indeterminate, row: row, grid: grid, rowIndex: cell.rowIndex, colIndex: cell.colIndex, rowPin: cell.rowPin }))] }), cell.colLastStartPin && _jsx(CellSpacePinStart, {})] }));
-});
+    return (_jsxs(_Fragment, { children: [cell.colFirstEndPin && _jsx(CellSpacerPinEnd, { xPositions: xPositions }), _jsxs("div", { ...props, ref: forwarded, role: "gridcell", "data-ln-rowindex": cell.rowIndex, "data-ln-colindex": cell.colIndex, "data-ln-colspan": cell.colSpan, "data-ln-rowspan": cell.rowSpan, "data-ln-pin": cell.colPin ?? "center", "data-ln-cell": true, "data-ln-last-top-pin": cell.rowLastPinTop, "data-ln-first-bottom-pin": cell.rowFirstPinBottom, "data-ln-last-start-pin": cell.colLastStartPin, "data-ln-first-end-pin": cell.colFirstEndPin, tabIndex: isEditing ? -1 : 0, style: style, children: [isEditing && _jsx(CellEditor, { cell: cell }), !isEditing && (_jsx(Renderer, { column: cell.column, rowSelected: selected, rowIndeterminate: indeterminate, row: row, grid: grid, rowIndex: cell.rowIndex, colIndex: cell.colIndex, rowPin: cell.rowPin }))] }), cell.colLastStartPin && _jsx(CellSpacePinStart, { xPositions: xPositions })] }));
+}));

package/dist/cells/use-cell-style.d.ts

@@ -0,0 +1,3 @@
+import { type CSSProperties } from "react";
+import type { Cell } from "./+types.cell";
+export declare function useCellStyle(xPositions: Uint32Array, yPositions: Uint32Array, cell: Cell, rtl: boolean, detailHeight: number, additional: CSSProperties | undefined): CSSProperties;

package/dist/cells/use-cell-style.js

@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+import { sizeFromCoord } from "@1771technologies/lytenyte-shared";
+export function useCellStyle(xPositions, yPositions, cell, rtl, detailHeight, additional) {
+    const width = sizeFromCoord(cell.colIndex, xPositions, cell.colSpan);
+    const height = sizeFromCoord(cell.rowIndex, yPositions, cell.rowSpan) - detailHeight;
+    const isSticky = !!cell.colPin;
+    const isRowPinned = !!cell.rowPin;
+    const styles = useMemo(() => {
+        const styles = {
+            height,
+            width,
+            minWidth: width,
+            maxWidth: width,
+            boxSizing: "border-box",
+            pointerEvents: "all",
+            display: "inline-block",
+            overflow: "hidden",
+        };
+        if (cell.colPin === "end") {
+            styles.position = "sticky";
+            const x = xPositions.at(-1) - xPositions[cell.colIndex + cell.colSpan];
+            if (rtl)
+                styles.left = x;
+            else
+                styles.right = x;
+            styles.zIndex = isRowPinned ? 5 : 2;
+        }
+        else if (isSticky) {
+            styles.position = "sticky";
+            const x = xPositions[cell.colIndex];
+            if (rtl)
+                styles.right = x;
+            else
+                styles.left = x;
+            styles.zIndex = isRowPinned ? 5 : 2;
+        }
+        return { ...additional, ...styles };
+    }, [
+        additional,
+        cell.colIndex,
+        cell.colPin,
+        cell.colSpan,
+        height,
+        isRowPinned,
+        isSticky,
+        rtl,
+        width,
+        xPositions,
+    ]);
+    return styles;
+}

package/dist/column-manager/use-column-manager.js

@@ -5,7 +5,7 @@ export function useColumnManager({ grid, query }) {
     const filteredColumns = useMemo(() => {
         if (!query)
             return columns;
-        return columns.filter((c) => (c.name ?? c.id).toLowerCase().includes(query));
+        return columns.filter((c) => (c.name ?? c.id).toLowerCase().includes(query.toLowerCase()));
     }, [columns, query]);
     const items = useTreeViewPaths(filteredColumns, true);
     const branchLookup = useMemo(() => {

package/dist/filter-tree/hooks/use-filter-tree.d.ts

@@ -33,5 +33,6 @@ export interface UseFilterTreeArgs<T> {
     treeItemHeight?: number;
     pivotMode?: boolean;
     applyChangesImmediately?: boolean;
+    query?: string;
 }
-export declare function useFilterTree<T>({ grid, column, treeItemHeight, pivotMode, applyChangesImmediately, }: UseFilterTreeArgs<T>): UseTreeFilterReturn<T>;
+export declare function useFilterTree<T>({ grid, column, treeItemHeight, pivotMode, applyChangesImmediately, query, }: UseFilterTreeArgs<T>): UseTreeFilterReturn<T>;

package/dist/filter-tree/hooks/use-filter-tree.js

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { useVirtualizedTree } from "../../tree-view/virtualized/use-virtualized-tree";
 import { useEvent } from "@1771technologies/lytenyte-react-hooks";
-export function useFilterTree({ grid, column, treeItemHeight = 24, pivotMode, applyChangesImmediately = false, }) {
+export function useFilterTree({ grid, column, treeItemHeight = 24, pivotMode, applyChangesImmediately = false, query, }) {
     const [items, setItems] = useState([]);
     const [expansions, onExpansionChange] = useState({});
     const [loading, setLoading] = useState(false);
@@ -41,9 +41,14 @@ export function useFilterTree({ grid, column, treeItemHeight = 24, pivotMode, ap
     useEffect(() => {
         fetchItems();
     }, [column, fetchItems, rds]);
+    const filteredItems = useMemo(() => {
+        if (!query)
+            return items;
+        return items.filter((c) => c.label.toLowerCase().includes(query.toLowerCase()));
+    }, [items, query]);
     const itemsWithSelectAll = useMemo(() => {
-        return [{ id: "__LNG__SELECT_ALL", label: "(Select All)", value: "" }, ...items];
-    }, [items]);
+        return [{ id: "__LNG__SELECT_ALL", label: "(Select All)", value: "" }, ...filteredItems];
+    }, [filteredItems]);
     const virt = useVirtualizedTree({
         itemHeight: treeItemHeight,
         paths: itemsWithSelectAll,

package/dist/row-data-source-client/use-client-data-source-paginated.js

@@ -333,6 +333,7 @@ export function makeClientDataSourcePaginated(p) {
                     continue;
                 }
                 d[source] = next;
+                cache.delete(source);
             }
         }
         data.set([...d]);
@@ -459,6 +460,7 @@ export function makeClientDataSourcePaginated(p) {
                 data.set(d);
                 const grid = grid$();
                 grid?.state.rowDataStore.rowClearCache();
+                cache.clear();
             },
             rowData: (section) => {
                 const d = [];

package/dist/row-data-source-client/use-client-data-source.js

@@ -428,6 +428,7 @@ export function makeClientDataSource(p) {
                     continue;
                 }
                 d[source] = next;
+                cache.delete(source);
             }
         }
         data.set([...d]);
@@ -534,6 +535,7 @@ export function makeClientDataSource(p) {
                 data.set(d);
                 const grid = peek(grid$);
                 grid?.state.rowDataStore.rowClearCache();
+                cache.clear();
             },
             rowData: (section) => {
                 const d = [];

package/dist/row-data-source-client/use-client-tree-data-source.js

@@ -277,6 +277,7 @@ export function makeClientTreeDataSource(p) {
                     continue;
                 }
                 d[source] = next;
+                cache.delete(source);
             }
         }
         data.set([...d]);
@@ -383,6 +384,7 @@ export function makeClientTreeDataSource(p) {
                 data.set(d);
                 const grid = peek(grid$);
                 grid?.state.rowDataStore.rowClearCache();
+                cache.clear();
             },
             rowExpand: (expansions) => {
                 const grid = peek(grid$);

package/dist/rows/row/context.d.ts

@@ -1,6 +1,14 @@
+import type { CellRendererFn, ColumnBase, RowNode } from "../../+types";
 export interface RowMetaData {
     readonly selected: boolean;
     readonly indeterminate: boolean;
+    readonly colBounds: [number, number];
+    readonly row: RowNode<any> | null;
+    readonly xPositions: Uint32Array;
+    readonly yPositions: Uint32Array;
+    readonly base: ColumnBase<any>;
+    readonly renderers: Record<string, CellRendererFn<any>>;
+    readonly rtl: boolean;
 }
 export declare const RowContext: import("react").Context<RowMetaData>;
 export declare const useRowMeta: () => RowMetaData;

package/dist/rows/row/context.js

@@ -1,3 +1,13 @@
 import { createContext, useContext } from "react";
-export const RowContext = createContext({ selected: false, indeterminate: false });
+export const RowContext = createContext({
+    selected: false,
+    indeterminate: false,
+    colBounds: [0, 0],
+    row: null,
+    xPositions: new Uint32Array(),
+    yPositions: new Uint32Array(),
+    base: null,
+    renderers: null,
+    rtl: false,
+});
 export const useRowMeta = () => useContext(RowContext);

package/dist/rows/row/row.js

@@ -10,9 +10,11 @@ import { CellSpacerNoPin } from "../../cells/cell-spacer";
 const empty = [];
 const RowImpl = forwardRef(function Rows({ row, ...props }, forwarded) {
     const ctx = useGridRoot().grid;
-    const rowMeta = useRowContextValue(ctx, row.row);
+    const yPos = ctx.state.yPositions.useValue();
+    const rowMeta = useRowContextValue(ctx, row.row, yPos);
+    const hasSpans = ctx.internal.hasSpans.useValue();
     const accepted = props.accepted ?? empty;
-    return (_jsx(RowContext.Provider, { value: rowMeta, children: _jsxs(RowReact, { ...props, ref: forwarded, accepted: accepted, gridId: ctx.state.gridId.useValue(), rowIndex: row.rowIndex, rowFirstPinBottom: row.rowFirstPinBottom, rowLastPinTop: row.rowLastPinTop, rowIsFocusRow: row.rowIsFocusRow ?? false, yPositions: ctx.state.yPositions.useValue(), "data-ln-row-selected": rowMeta.selected, children: [_jsx(CellSpacerNoPin, {}), props.children, _jsx(RowDetailRow, { layout: row })] }) }));
+    return (_jsx(RowContext.Provider, { value: rowMeta, children: _jsxs(RowReact, { ...props, ref: forwarded, accepted: accepted, gridId: ctx.state.gridId.useValue(), rowIndex: row.rowIndex, rowFirstPinBottom: row.rowFirstPinBottom, rowLastPinTop: row.rowLastPinTop, rowIsFocusRow: row.rowIsFocusRow ?? false, rowPin: row.rowPin, topOffset: ctx.view.useValue().rows.rowTopTotalHeight, yPositions: yPos, hasSpans: hasSpans, "data-ln-row-selected": rowMeta.selected, children: [_jsx(CellSpacerNoPin, { xPositions: rowMeta.xPositions }), props.children, _jsx(RowDetailRow, { layout: row })] }) }));
 });
 export const Row = memo(RowImpl, (prev, next) => {
     const { row: rowP, ...propsP } = prev;

package/dist/rows/row/use-row-context-value.d.ts

@@ -3,4 +3,4 @@ import type { InternalAtoms } from "../../state/+types";
 import type { RowMetaData } from "./context";
 export declare function useRowContextValue(grid: Grid<any> & {
     internal: InternalAtoms;
-}, row: GridAtomReadonlyUnwatchable<RowNode<any> | null>): RowMetaData;
+}, row: GridAtomReadonlyUnwatchable<RowNode<any> | null>, yPositions: Uint32Array): RowMetaData;

package/dist/rows/row/use-row-context-value.js

@@ -1,8 +1,13 @@
 import { useEffect, useMemo, useState } from "react";
-export function useRowContextValue(grid, row) {
+export function useRowContextValue(grid, row, yPositions) {
     const r = row.useValue();
+    const xPositions = grid.state.xPositions.useValue();
     const [indeterminate, setIndeterminate] = useState(false);
     const [selected, setSelected] = useState(false);
+    const colBounds = grid.internal.colBounds.useValue();
+    const rtl = grid.state.rtl.useValue();
+    const base = grid.state.columnBase.useValue();
+    const renderers = grid.state.cellRenderers.useValue();
     useEffect(() => {
         function handleSelection() {
             if (!r)
@@ -23,7 +28,17 @@ export function useRowContextValue(grid, row) {
         return grid.state.rowSelectedIds.watch(() => handleSelection());
     }, [grid.state.rowDataSource, grid.state.rowSelectedIds, r]);
     const value = useMemo(() => {
-        return { selected, indeterminate };
-    }, [indeterminate, selected]);
+        return {
+            selected,
+            indeterminate,
+            colBounds,
+            row: r,
+            xPositions,
+            yPositions,
+            rtl,
+            base,
+            renderers,
+        };
+    }, [base, colBounds, indeterminate, r, renderers, rtl, selected, xPositions, yPositions]);
     return value;
 }

package/dist/rows/row-full-width.js

@@ -10,8 +10,10 @@ const RowFullWidthImpl = forwardRef(function RowFullWidth({ row: layout, space,
     const grid = useGridRoot().grid;
     const Renderer = grid.state.rowFullWidthRenderer.useValue().fn;
     const row = layout.row.useValue();
-    const meta = useRowContextValue(grid, layout.row);
-    return (_jsx(RowFullWidthReact, { ...props, ref: forwarded, accepted: props.accepted ?? empty, detail: _jsx(RowDetailRow, { layout: layout }), detailHeight: grid.api.rowDetailRenderedHeight(row ?? ""), gridId: grid.state.gridId.useValue(), rtl: grid.state.rtl.useValue(), rowFirstPinBottom: layout.rowFirstPinBottom, rowLastPinTop: layout.rowLastPinTop, rowIndex: layout.rowIndex, rowIsFocusRow: layout.rowIsFocusRow ?? false, yPositions: grid.state.yPositions.useValue(), space: space, "data-ln-row-selected": meta.selected, children: children ??
+    const yPositions = grid.state.yPositions.useValue();
+    const hasSpans = grid.internal.hasSpans.useValue();
+    const meta = useRowContextValue(grid, layout.row, yPositions);
+    return (_jsx(RowFullWidthReact, { ...props, ref: forwarded, accepted: props.accepted ?? empty, detail: _jsx(RowDetailRow, { layout: layout }), detailHeight: grid.api.rowDetailRenderedHeight(row ?? ""), gridId: grid.state.gridId.useValue(), rtl: meta.rtl, hasSpans: hasSpans, rowFirstPinBottom: layout.rowFirstPinBottom, rowLastPinTop: layout.rowLastPinTop, rowIndex: layout.rowIndex, rowIsFocusRow: layout.rowIsFocusRow ?? false, rowPin: layout.rowPin, topOffset: grid.view.useValue().rows.rowTopTotalHeight, yPositions: yPositions, space: space, "data-ln-row-selected": meta.selected, children: children ??
             (row ? (_jsx(Renderer, { grid: grid, row: row, rowIndex: layout.rowIndex, rowSelected: meta.selected, rowIndeterminate: meta.indeterminate })) : null) }));
 });
 export const RowFullWidth = fastDeepMemo(RowFullWidthImpl);

package/dist/rows/scrollers/native-scroller.js

@@ -1,18 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useGridRoot } from "../../context";
-import { sizeFromCoord } from "@1771technologies/lytenyte-shared";
 export function NativeScroller(props) {
-    const cx = useGridRoot().grid;
-    const view = cx.view.useValue().rows;
-    const yPos = cx.state.yPositions.useValue();
-    let offset = yPos[view.rowFirstCenter] - view.rowTopTotalHeight;
-    if (view.rowFocusedIndex != null && view.rowFocusedIndex < view.rowFirstCenter) {
-        const size = sizeFromCoord(view.rowFocusedIndex, yPos);
-        offset -= size;
-    }
-    const offsetPx = `${offset}px`;
-    return (_jsx("div", { role: "presentation", style: {
-            transform: `translate3d(0px, ${offset}px, 0px)`,
-            "--ln-y-offset": offsetPx,
-        }, children: props.children }));
+    return _jsx("div", { role: "presentation", children: props.children });
 }

package/dist/state/+types.d.ts

@@ -8,6 +8,8 @@ export interface InternalAtoms {
     readonly xScroll: GridAtom<number>;
     readonly yScroll: GridAtom<number>;
     readonly layout: LayoutState;
+    readonly hasSpans: GridAtomReadonly<boolean>;
+    readonly colBounds: GridAtomReadonly<[number, number]>;
     readonly focusActive: GridAtom<PositionUnion | null>;
     readonly focusPrevColIndex: GridAtom<number | null>;
     readonly focusPrevRowIndex: GridAtom<number | null>;

package/dist/state/helpers/row-layout/row-layout.js

@@ -69,9 +69,6 @@ const partition = (n, row) => {
     };
 };
 function handleViewLayout({ columns, spanLayout: n, rowStart, rowEnd, rowPin, layout, viewCache, container, rowForIndex, }) {
-    /**
-     * TOP ROW LAYOUT START
-     */
     for (let r = rowStart; r < rowEnd; r++) {
         const status = layout.special[r];
         const computed = layout.computed[r];
@@ -87,7 +84,9 @@ function handleViewLayout({ columns, spanLayout: n, rowStart, rowEnd, rowPin, la
         const rowLastPinTop = n.rowTopEnd - 1 === r ? true : undefined;
         if (status === FULL_WIDTH) {
             const row = {
-                id: node.get()?.id ?? `${r}`,
+                get id() {
+                    return node.get()?.id ?? `${r}`;
+                },
                 rowIndex: r,
                 kind: "full-width",
                 rowPin,
@@ -155,7 +154,7 @@ function handleViewLayout({ columns, spanLayout: n, rowStart, rowEnd, rowPin, la
                 rowIndex: r,
                 rowSpan: cellSpec?.[c * 4] || 1,
                 colSpan: cellSpec?.[c * 4 + 1] || 1,
-                rowPin: "top",
+                rowPin,
                 colPin: "end",
                 isDeadCol,
                 isDeadRow,
@@ -166,11 +165,13 @@ function handleViewLayout({ columns, spanLayout: n, rowStart, rowEnd, rowPin, la
             });
         }
         const row = {
-            id: node.get()?.id ?? `${r}`,
+            get id() {
+                return node.get()?.id ?? `${r}`;
+            },
             rowIndex: r,
             kind: "row",
             cells: cellLayout,
-            rowPin: "top",
+            rowPin,
             row: node,
             rowLastPinTop,
         };

package/dist/state/use-lytenyte.js

@@ -246,6 +246,10 @@ export function makeLyteNyte(p) {
         });
         return bounds;
     }, { dirty: (prev, next) => !equal(prev, next) });
+    const internal_colBounds = computed(() => {
+        const b = bounds();
+        return [b.colCenterStart, b.colCenterEnd];
+    }, { dirty: (l, r) => !equal(l, r) });
     /**
      * COLUMN VIEW
      * Compute the column layout. This impacts both the row layout and header layout. Column layout
@@ -390,6 +394,10 @@ export function makeLyteNyte(p) {
         }, innerHeight - headerHeight);
     });
     const heightTotal = computed(() => yPositions().at(-1));
+    const hasSpans = computed(() => {
+        const visible = columnMeta().columnsVisible;
+        return cellSelectionMode() !== "none" || !visible.every((c) => !(c.colSpan || c.rowSpan));
+    });
     const rowView = computed(() => {
         if (!viewport())
             return {
@@ -412,7 +420,7 @@ export function makeLyteNyte(p) {
         const rowScan = rowScanDistance();
         const columns = columnMeta().columnsVisible;
         const rds = rowDataSource();
-        const { layout } = layoutState$();
+        const { layout, cache } = layoutState$();
         const topCount = rowDataStore.rowTopCount.$();
         const botCount = rowDataStore.rowBottomCount.$();
         const rowCount = rowDataStore.rowCount.$();
@@ -441,7 +449,7 @@ export function makeLyteNyte(p) {
         const focus = internal_focusActive();
         const view = makeRowLayout({
             view: n,
-            viewCache: new Map(),
+            viewCache: cache,
             layout,
             rds: rowDataStore,
             columns,
@@ -609,6 +617,8 @@ export function makeLyteNyte(p) {
             xScroll: makeAtom(xScroll),
             yScroll: makeAtom(yScroll),
             layout: layoutState,
+            colBounds: makeAtom(internal_colBounds),
+            hasSpans: makeAtom(hasSpans),
             focusActive: makeAtom(internal_focusActive),
             focusPrevColIndex: makeAtom(internal_focusPrevCol),
             focusPrevRowIndex: makeAtom(internal_focusPrevRow),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1771technologies/lytenyte-pro",
   "description": "Blazingly fast headless React data grid with 100s of features.",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "type": "module",
   "license": "COMMERCIAL",
   "files": [
@@ -49,12 +49,12 @@
   },
   "dependencies": {
     "@1771technologies/atom": "^1.0.2",
-    "@1771technologies/lytenyte-js-utils": "1.0.6",
-    "@1771technologies/lytenyte-dom-utils": "1.0.6",
-    "@1771technologies/lytenyte-react-hooks": "1.0.6",
-    "@1771technologies/lytenyte-shared": "1.0.6",
-    "@1771technologies/lytenyte-core": "1.0.6",
-    "@1771technologies/lytenyte-dragon": "1.0.6"
+    "@1771technologies/lytenyte-core": "1.0.8",
+    "@1771technologies/lytenyte-dragon": "1.0.8",
+    "@1771technologies/lytenyte-shared": "1.0.8",
+    "@1771technologies/lytenyte-dom-utils": "1.0.8",
+    "@1771technologies/lytenyte-react-hooks": "1.0.8",
+    "@1771technologies/lytenyte-js-utils": "1.0.8"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",