@nu-grid/nuxt 0.1.1

package/dist/runtime/composables/_internal/useNuGridRowDragDrop.js

@@ -0,0 +1,295 @@
+import { markRaw, ref, toRaw, toRef } from "vue";
+export function useNuGridRowDragDrop(tableApi, data, options, tableRef, emit, eventEmitter) {
+  const draggedRowId = ref(null);
+  const draggedRowData = ref(null);
+  const dropTargetRowId = ref(null);
+  const dropPosition = ref("after");
+  const dragSourceGridId = ref(null);
+  const isDraggingOutside = ref(false);
+  function isRowDraggable(_row) {
+    if (!options.value.enabled) return false;
+    const sortingState = tableApi.getState().sorting;
+    if (sortingState && sortingState.length > 0) {
+      return false;
+    }
+    return true;
+  }
+  function handleRowDragStart(e, row) {
+    if (!isRowDraggable(row)) return;
+    document.body.classList.add("is-dragging-row");
+    const dataId = row.original.id;
+    draggedRowId.value = dataId;
+    draggedRowData.value = row.original;
+    dragSourceGridId.value = options.value.gridId || null;
+    isDraggingOutside.value = false;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = "move";
+      const rows = tableApi.getRowModel().rows;
+      const rowIndex = rows.findIndex((r) => r.id === row.id);
+      const dragData = {
+        rowId: dataId,
+        // Use data ID, not row model ID
+        rowData: row.original,
+        gridId: options.value.gridId,
+        originalIndex: rowIndex
+      };
+      e.dataTransfer.setData("application/json", JSON.stringify(dragData));
+      const target = e.target;
+      const rowElement = target.closest("[data-row-id]");
+      if (rowElement) {
+        const scrollContainer = rowElement.closest("[data-nugrid-scroll]") || tableRef.value;
+        const containerRect = scrollContainer?.getBoundingClientRect();
+        const rowRect = rowElement.getBoundingClientRect();
+        const visibleLeft = Math.max(rowRect.left, containerRect?.left ?? rowRect.left);
+        const visibleRight = Math.min(rowRect.right, containerRect?.right ?? rowRect.right);
+        const visibleWidth = visibleRight - visibleLeft;
+        const scrollOffset = visibleLeft - rowRect.left;
+        const wrapper = document.createElement("div");
+        wrapper.style.position = "absolute";
+        wrapper.style.top = "-9999px";
+        wrapper.style.left = "-9999px";
+        wrapper.style.width = `${visibleWidth}px`;
+        wrapper.style.height = `${rowRect.height}px`;
+        wrapper.style.overflow = "hidden";
+        wrapper.style.opacity = "0.9";
+        wrapper.style.backgroundColor = "var(--color-elevated)";
+        wrapper.style.borderRadius = "6px";
+        wrapper.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.15)";
+        const clone = rowElement.cloneNode(true);
+        clone.style.position = "relative";
+        clone.style.left = `-${scrollOffset}px`;
+        clone.style.width = `${rowElement.offsetWidth}px`;
+        clone.style.margin = "0";
+        wrapper.appendChild(clone);
+        document.body.appendChild(wrapper);
+        const offsetX = e.clientX - visibleLeft;
+        const offsetY = e.clientY - rowRect.top;
+        e.dataTransfer.setDragImage(wrapper, offsetX, offsetY);
+        requestAnimationFrame(() => {
+          setTimeout(() => {
+            wrapper.remove();
+          }, 0);
+        });
+      }
+    }
+  }
+  function handleRowDragOver(e, row) {
+    const types = e.dataTransfer?.types;
+    const typesArray = types ? Array.from(types) : [];
+    const hasDragData = typesArray.includes("application/json");
+    if (!hasDragData && !draggedRowId.value) {
+      return;
+    }
+    const dataId = row.original.id;
+    if (draggedRowId.value === dataId) {
+      return;
+    }
+    e.preventDefault();
+    if (e.dataTransfer) {
+      e.dataTransfer.dropEffect = "move";
+    }
+    const target = e.currentTarget;
+    if (target) {
+      const rect = target.getBoundingClientRect();
+      const mouseY = e.clientY;
+      const rowMiddle = rect.top + rect.height / 2;
+      dropPosition.value = mouseY < rowMiddle ? "before" : "after";
+    }
+    dropTargetRowId.value = dataId;
+    isDraggingOutside.value = false;
+  }
+  function handleRowDrop(e, row) {
+    e.preventDefault();
+    try {
+      const dragDataStr = e.dataTransfer?.getData("application/json");
+      if (!dragDataStr) {
+        return;
+      }
+      const dragData = JSON.parse(dragDataStr);
+      const sourceGridId = dragData.gridId;
+      const targetGridId = options.value.gridId;
+      const draggedRowIdFromData = dragData.rowId;
+      if (sourceGridId !== targetGridId && !options.value.allowCrossGrid) {
+        handleRowDragEnd();
+        return;
+      }
+      const rows = tableApi.getRowModel().rows;
+      const targetDataId = row.original?.id;
+      const targetIndex = rows.findIndex((r) => r.original.id === targetDataId);
+      const isCrossGrid = sourceGridId !== targetGridId;
+      if (isCrossGrid) {
+        if (targetIndex !== -1 && emit) {
+          let insertIndex = targetIndex;
+          if (dropPosition.value === "after") {
+            insertIndex = targetIndex + 1;
+          }
+          const event = {
+            row: dragData.rowData,
+            originalIndex: dragData.originalIndex,
+            newIndex: insertIndex,
+            sourceGridId,
+            targetGridId,
+            positionChange: insertIndex - dragData.originalIndex,
+            groupChanged: false,
+            // Cross-grid doesn't track groups
+            gridChanged: true,
+            dropPosition: dropPosition.value
+          };
+          if (eventEmitter?.rowDragged) {
+            eventEmitter.rowDragged(event);
+          }
+          emit?.("rowDragged", event);
+        }
+      } else {
+        const effectiveDraggedRowId = draggedRowId.value || draggedRowIdFromData;
+        const targetRow = row;
+        const targetDataId2 = targetRow.original?.id;
+        let groupingField = "";
+        const groupingState = tableApi.getState().grouping;
+        let sourceGroup;
+        let targetGroup;
+        if (groupingState && groupingState.length > 0) {
+          groupingField = groupingState[0];
+        }
+        const newData = [...data.value];
+        const draggedDataIndex = newData.findIndex((item) => item.id === effectiveDraggedRowId);
+        const targetDataIndex = newData.findIndex((item) => item.id === targetDataId2);
+        if (draggedDataIndex !== -1 && targetDataIndex !== -1) {
+          const movedItem = newData[draggedDataIndex];
+          const movedItemPayload = toRaw(newData[draggedDataIndex]);
+          if (groupingField && movedItem) {
+            sourceGroup = String(movedItem[groupingField] ?? "");
+          }
+          if (groupingField && targetRow?.original) {
+            targetGroup = String(targetRow.original[groupingField] ?? "");
+          }
+          newData.splice(draggedDataIndex, 1);
+          if (movedItem) {
+            let insertIndex = targetDataIndex;
+            if (dropPosition.value === "after") {
+              if (draggedDataIndex >= targetDataIndex) {
+                insertIndex = targetDataIndex + 1;
+              } else {
+                insertIndex = targetDataIndex;
+              }
+            } else {
+              if (draggedDataIndex < targetDataIndex) {
+                insertIndex = targetDataIndex - 1;
+              } else {
+                insertIndex = targetDataIndex;
+              }
+            }
+            newData.splice(insertIndex, 0, movedItem);
+            if (groupingField && sourceGroup !== targetGroup && options.value.allowCrossGroup) {
+              ;
+              movedItem[groupingField] = targetGroup;
+            }
+            if (options.value.sortOrderField) {
+              newData.forEach((item, index) => {
+                ;
+                item[options.value.sortOrderField] = index;
+              });
+            }
+            data.value = newData;
+            const event = {
+              row: movedItemPayload,
+              // Use snapshot, not stale reference
+              originalIndex: draggedDataIndex,
+              newIndex: insertIndex,
+              sourceGridId,
+              targetGridId,
+              sourceGroup,
+              targetGroup,
+              positionChange: insertIndex - draggedDataIndex,
+              groupChanged: sourceGroup !== targetGroup,
+              gridChanged: sourceGridId !== targetGridId,
+              dropPosition: dropPosition.value
+            };
+            if (eventEmitter?.rowDragged) {
+              eventEmitter.rowDragged(event);
+            }
+            emit?.("rowDragged", event);
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Error handling row drop:", error);
+    }
+    handleRowDragEnd();
+  }
+  function handleRowDragEnd() {
+    draggedRowId.value = null;
+    draggedRowData.value = null;
+    dropTargetRowId.value = null;
+    dropPosition.value = "after";
+    dragSourceGridId.value = null;
+    isDraggingOutside.value = false;
+    document.body.classList.remove("is-dragging-row");
+    document.body.classList.remove("is-dragging-row-outside");
+  }
+  function handleRowDragLeave(e) {
+    const relatedTarget = e.relatedTarget;
+    if (!relatedTarget || !(relatedTarget instanceof HTMLElement) || !tableRef.value?.contains(relatedTarget)) {
+      isDraggingOutside.value = true;
+      dropTargetRowId.value = null;
+      document.body.classList.add("is-dragging-row-outside");
+      document.body.classList.remove("is-dragging-row");
+    }
+  }
+  function handleRowDragEnter() {
+    if (document.body.classList.contains("is-dragging-row-outside")) {
+      document.body.classList.remove("is-dragging-row-outside");
+      document.body.classList.add("is-dragging-row");
+    }
+    isDraggingOutside.value = false;
+  }
+  function rowDragProps(row) {
+    const dataId = row.original.id;
+    const isDragging = draggedRowId.value === dataId;
+    const isDropTarget = dropTargetRowId.value === dataId;
+    const isDropBefore = isDropTarget && dropPosition.value === "before";
+    const isDropAfter = isDropTarget && dropPosition.value === "after";
+    return {
+      "data-dragging": isDragging ? "true" : "false",
+      "data-drop-target": isDropTarget ? "true" : "false",
+      "data-drop-position": isDropTarget ? dropPosition.value : void 0,
+      "class": [
+        isDragging && "opacity-60",
+        isDropBefore && "border-t-[3px] border-t-blue-500/80 bg-blue-500/[0.08] transition-all duration-200",
+        isDropAfter && "border-b-[3px] border-b-blue-500/80 bg-blue-500/[0.08] transition-all duration-200"
+      ].filter(Boolean).join(" "),
+      "onDragover": (e) => handleRowDragOver(e, row),
+      "onDrop": (e) => handleRowDrop(e, row),
+      "onDragend": handleRowDragEnd,
+      "onDragleave": handleRowDragLeave,
+      "onDragenter": handleRowDragEnter
+    };
+  }
+  function rowDragHandleProps(row) {
+    const draggable = isRowDraggable(row);
+    return {
+      draggable,
+      class: draggable ? "cursor-grab active:cursor-grabbing" : "cursor-not-allowed opacity-30",
+      onDragstart: (e) => draggable && handleRowDragStart(e, row)
+    };
+  }
+  return toRef({
+    draggedRowId,
+    draggedRowData,
+    dropTargetRowId,
+    dropPosition,
+    dragSourceGridId,
+    isDraggingOutside,
+    ...markRaw({
+      handleRowDragStart,
+      handleRowDragOver,
+      handleRowDrop,
+      handleRowDragEnd,
+      handleRowDragLeave,
+      handleRowDragEnter,
+      isRowDraggable,
+      rowDragHandleProps,
+      rowDragProps
+    })
+  });
+}

package/dist/runtime/composables/_internal/useNuGridRowSelection.d.ts

@@ -0,0 +1,14 @@
+import type { TableData } from '@nuxt/ui';
+import type { VisibilityState } from '@tanstack/vue-table';
+import type { Ref } from 'vue';
+import type { NuGridRowSelectionMode, UseNuGridRowSelectionReturn } from '../../types/_internal/index.js';
+/**
+ * Composable for managing row selection in NuGrid.
+ * Handles creating the selection column and determining if multi-selection is enabled.
+ *
+ * IMPORTANT: The selection column is created at instantiation and cannot be added later.
+ * If rowSelectionMode is initially false/undefined and later changed to enabled,
+ * an error will be thrown. To start with a hidden selection column, use:
+ * { mode: 'multi', hidden: true }
+ */
+export declare function useNuGridRowSelection<T extends TableData>(rowSelectionMode: Ref<NuGridRowSelectionMode<T>>, columnVisibilityState?: Ref<VisibilityState>): UseNuGridRowSelectionReturn<T>;

package/dist/runtime/composables/_internal/useNuGridRowSelection.js

@@ -0,0 +1,214 @@
+import { computed, h, ref, watch } from "vue";
+import NuGridCellCheckbox from "../../components/NuGridCellCheckbox.vue";
+import { getDefaults } from "../../config/_internal/index.js";
+import { nuGridCellTypeRegistry } from "../useNuGridCellTypeRegistry.js";
+const selectionDefaults = getDefaults("selection");
+const selectionTotalsCache = /* @__PURE__ */ new WeakMap();
+function createSelectionColumn(modeRef, enabledRef, rowSelectionEnabledRef, columnDef) {
+  const defaultColumn = {
+    id: "__selection",
+    size: 48,
+    minSize: 48,
+    maxSize: 48,
+    enableResizing: false,
+    enableSorting: false,
+    enableHiding: false,
+    enableColumnFilter: false,
+    enableGrouping: false,
+    enableReordering: false,
+    enablePinning: false,
+    enableEditing: true,
+    enableFocusing: true,
+    cellDataType: "selection",
+    editor: nuGridCellTypeRegistry.getEditor("selection"),
+    accessorFn: (_row, _index) => {
+      return false;
+    },
+    // Header reactively checks the current mode to show/hide "select all" checkbox
+    header: ({ table }) => {
+      if (modeRef.value !== "multi") {
+        return "";
+      }
+      const typedTable = table;
+      const coreRows = table.getCoreRowModel().rows;
+      const rowSelection = table.getState().rowSelection;
+      let totalCount = 0;
+      let selectedCount = 0;
+      const cached = selectionTotalsCache.get(typedTable);
+      if (cached && cached.lastCoreRows === coreRows && cached.lastSelectionState === rowSelection) {
+        totalCount = cached.totalCount;
+        selectedCount = cached.selectedCount;
+      } else {
+        for (const row of coreRows) {
+          if (row.getCanSelect()) {
+            totalCount++;
+            if (rowSelection[row.id]) {
+              selectedCount++;
+            }
+          }
+        }
+        selectionTotalsCache.set(typedTable, {
+          lastCoreRows: coreRows,
+          lastSelectionState: rowSelection,
+          totalCount,
+          selectedCount
+        });
+      }
+      const isAllSelected = totalCount > 0 && selectedCount === totalCount;
+      const isSomeSelected = selectedCount > 0 && selectedCount < totalCount;
+      return h(NuGridCellCheckbox, {
+        "modelValue": isSomeSelected ? "indeterminate" : isAllSelected,
+        "onUpdate:modelValue": (value) => table.toggleAllPageRowsSelected(!!value),
+        "interactive": enabledRef.value,
+        "disabled": !enabledRef.value,
+        "aria-label": "Select all"
+      });
+    },
+    // Store enabled ref in meta for cell renderer to access
+    // Using 'any' type assertion because ColumnMeta is user-defined in TanStack Table
+    meta: {
+      selectionEnabled: true,
+      // Default value, actual check uses enabledRef
+      enabledRef,
+      // Pass the ref so cell renderer can access current value
+      rowSelectionEnabledRef
+      // Pass the ref so cell renderer can check per-row selection
+    }
+  };
+  return {
+    ...defaultColumn,
+    ...columnDef
+  };
+}
+function isNuGridRowSelectOptions(value) {
+  return typeof value === "object" && value !== null;
+}
+function parseRowSelectionMode(mode) {
+  if (mode === void 0 || mode === false) return null;
+  if (mode === true || mode === "multi")
+    return {
+      mode: selectionDefaults.mode,
+      hidden: selectionDefaults.hidden,
+      enabled: selectionDefaults.enabled
+    };
+  if (mode === "single")
+    return {
+      mode: "single",
+      hidden: selectionDefaults.hidden,
+      enabled: selectionDefaults.enabled
+    };
+  if (isNuGridRowSelectOptions(mode)) {
+    return {
+      mode: mode.mode ?? selectionDefaults.mode,
+      hidden: mode.hidden ?? selectionDefaults.hidden,
+      enabled: mode.enabled ?? selectionDefaults.enabled,
+      rowSelectionEnabled: mode.rowSelectionEnabled,
+      columnDef: mode.columnDef
+    };
+  }
+  return null;
+}
+export function useNuGridRowSelection(rowSelectionMode, columnVisibilityState) {
+  const initialOptions = parseRowSelectionMode(rowSelectionMode.value);
+  const wasCreatedAtInstantiation = ref(initialOptions !== null);
+  const parsedOptions = computed(() => {
+    return parseRowSelectionMode(rowSelectionMode.value);
+  });
+  const isCurrentlyConfigured = computed(() => {
+    return parsedOptions.value !== null;
+  });
+  const hasSelectionColumn = computed(() => {
+    return wasCreatedAtInstantiation.value;
+  });
+  const normalizedMode = computed(() => {
+    if (parsedOptions.value) {
+      return parsedOptions.value.mode ?? "multi";
+    }
+    if (wasCreatedAtInstantiation.value) {
+      return "multi";
+    }
+    return null;
+  });
+  const isHidden = computed(() => {
+    if (!isCurrentlyConfigured.value && wasCreatedAtInstantiation.value) {
+      return true;
+    }
+    return parsedOptions.value?.hidden ?? false;
+  });
+  const isInteractive = computed(() => {
+    if (!isCurrentlyConfigured.value) {
+      return false;
+    }
+    return parsedOptions.value?.enabled ?? true;
+  });
+  const rowSelectionEnabled = computed(() => {
+    if (!isCurrentlyConfigured.value) {
+      return void 0;
+    }
+    return parsedOptions.value?.rowSelectionEnabled;
+  });
+  const enableMultiRowSelection = computed(() => {
+    return normalizedMode.value !== "single";
+  });
+  const enableRowSelection = computed(() => {
+    if (!isInteractive.value) {
+      return false;
+    }
+    const rowSelectionFn = rowSelectionEnabled.value;
+    if (rowSelectionFn) {
+      return (row) => rowSelectionFn(row);
+    }
+    return true;
+  });
+  const selectionColumn = wasCreatedAtInstantiation.value ? createSelectionColumn(
+    normalizedMode,
+    isInteractive,
+    rowSelectionEnabled,
+    // Type assertion needed because NuGridRowSelectOptions.columnDef defaults to SelectionColumnDef<TableData>
+    // but we need SelectionColumnDef<T>. At runtime, if columnDef is provided, it will be compatible.
+    initialOptions?.columnDef
+  ) : null;
+  function prependSelectionColumn(columns) {
+    if (!selectionColumn) return columns;
+    return [selectionColumn, ...columns];
+  }
+  watch(
+    rowSelectionMode,
+    (newValue) => {
+      const newOptions = parseRowSelectionMode(newValue);
+      if (newOptions !== null && !wasCreatedAtInstantiation.value) {
+        throw new Error(
+          'Cannot enable row selection after grid instantiation. Row selection must be configured when the grid is created. To start with a hidden selection column, use: { mode: "multi", hidden: true }'
+        );
+      }
+    },
+    { flush: "sync" }
+  );
+  if (columnVisibilityState) {
+    watch(
+      isHidden,
+      (hidden) => {
+        if (hasSelectionColumn.value) {
+          columnVisibilityState.value = {
+            ...columnVisibilityState.value,
+            __selection: !hidden
+          };
+        }
+      },
+      { immediate: true }
+    );
+  }
+  return {
+    isEnabled: isCurrentlyConfigured,
+    hasSelectionColumn,
+    normalizedMode,
+    enableMultiRowSelection,
+    enableRowSelection,
+    selectionColumn,
+    prependSelectionColumn,
+    isHidden,
+    isInteractive,
+    rowSelectionEnabled,
+    parsedOptions
+  };
+}

package/dist/runtime/composables/_internal/useNuGridScroll.d.ts

@@ -0,0 +1,110 @@
+import type { TableData } from '@nuxt/ui';
+import type { Table } from '@tanstack/vue-table';
+import type { Primitive } from 'reka-ui';
+import type { ComputedRef, Ref } from 'vue';
+export interface ScrollToCellOptions {
+    /** The cell element to scroll to */
+    cellElement: HTMLElement;
+    /** The scroll container element (used for vertical scrolling) */
+    scrollContainer: HTMLElement;
+    /** Optional separate container for horizontal scrolling (if different from scrollContainer) */
+    horizontalScrollContainer?: HTMLElement;
+    /** The table element (for finding headers) */
+    tableElement: HTMLElement | null;
+    /** The row index being scrolled to */
+    rowIndex: number;
+    /** The column index being scrolled to */
+    columnIndex: number;
+    /** Sticky header height (for virtualized grids) */
+    virtualizedStickyHeight?: number;
+    /** Scroll behavior - 'instant' for immediate, 'smooth' for animated */
+    behavior?: 'instant' | 'smooth';
+    /** Vertical padding around the cell */
+    verticalPadding?: number;
+    /** Whether to look for headers above when scrolling */
+    includeHeadersAbove?: boolean;
+    /** Whether to skip horizontal scrolling (useful for row focus mode) */
+    skipHorizontalScroll?: boolean;
+    /** Whether this is vertical-only navigation (up/down keys) - enables extra optimizations */
+    verticalOnly?: boolean;
+}
+/**
+ * Scroll manager for NuGrid with performance optimizations
+ * Uses requestAnimationFrame for better timing and cancellation support
+ */
+export declare class NuGridScrollManager {
+    private pendingScrollFrame;
+    private pendingResolve;
+    private isProcessing;
+    private tableApi;
+    private pinnedLeftWidth;
+    private pinnedRightWidth;
+    private visibleColumns;
+    private cumulativeWidthsFromRight;
+    private cachedTableElement;
+    private cachedHeaderElement;
+    private isHeaderSticky;
+    private dimensionCache;
+    constructor(tableApi: Table<any>, pinnedLeftWidth: ComputedRef<number>, pinnedRightWidth: ComputedRef<number>, visibleColumns: ComputedRef<any[]>, cumulativeWidthsFromRight: ComputedRef<number[]>);
+    /**
+     * Cancel any pending scroll operation
+     */
+    cancelPending(clearProcessing?: boolean): void;
+    /**
+     * Check if a scroll operation is currently being processed
+     */
+    get isProcessingScroll(): boolean;
+    /**
+     * Set the processing state
+     */
+    setProcessing(value: boolean): void;
+    /**
+     * Invalidate the sticky header cache
+     * Call this if the table structure changes (e.g., headers added/removed)
+     */
+    invalidateHeaderCache(): void;
+    /**
+     * Invalidate dimension cache
+     * Call this when container size might have changed
+     */
+    invalidateDimensionCache(): void;
+    /**
+     * Get or compute container dimensions with caching
+     * Cache is valid for 30000ms (30 seconds) - invalidated manually on keyup
+     */
+    private getCachedDimensions;
+    /**
+     * Update cached sticky header information if table element changed
+     * This avoids expensive querySelector and getComputedStyle calls on every scroll
+     */
+    private updateStickyHeaderCache;
+    /**
+     * Return the sticky header height, reusing cached lookups when possible
+     */
+    getStickyHeaderHeight(tableElement: HTMLElement | null, virtualizedStickyHeight?: number): number;
+    /**
+     * Scroll horizontally to the start/end of the scroll container
+     */
+    scrollToHorizontalEdge(scrollContainer: HTMLElement, direction: 'start' | 'end', behavior?: ScrollBehavior): Promise<void>;
+    /**
+     * Scroll vertically to the top/bottom of the scroll container
+     */
+    scrollToVerticalEdge(scrollContainer: HTMLElement, direction: 'start' | 'end', behavior?: ScrollBehavior): Promise<void>;
+    /**
+     * Scroll to make a cell visible with performance optimizations
+     * Returns a promise that resolves when scrolling is complete
+     */
+    scrollToCell(options: ScrollToCellOptions): Promise<void>;
+}
+/**
+ * Composable for managing scroll operations with performance optimizations
+ */
+export declare function useNuGridScroll<T extends TableData>(tableApi: Table<T>, rootRef?: Ref<InstanceType<typeof Primitive> | null | undefined> | null): {
+    scrollManager: NuGridScrollManager;
+    pinnedLeftWidth: ComputedRef<number>;
+    pinnedRightWidth: ComputedRef<number>;
+    visibleColumns: ComputedRef<import("@tanstack/table-core").Column<T, unknown>[]>;
+    verticalScrollContainer: ComputedRef<HTMLElement | null>;
+    horizontalScrollContainer: ComputedRef<HTMLElement | null>;
+    updateScrollContainerCache: () => void;
+};