@lotics/ui 2.6.0 → 3.0.0

package/src/grid/data_grid.tsx

@@ -1,2003 +0,0 @@
-import React, {
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import {
-  Grid,
-  GridRenderFooterCellProps,
-  GridRenderFooterProps,
-  GridRenderGroupHeadingProps,
-  GridRenderGroupSummaryCellProps,
-  GridRenderGroupSummaryRowProps,
-  GridRenderHeaderProps,
-  GridRenderRowProps,
-  GridRenderHeaderCellProps,
-  GridRenderRowCellProps,
-} from "@lotics/ui/grid/engine";
-import { type RowPathKey, type GroupPathKey, type RowPath } from "@lotics/ui/grid/layout";
-import { AutoSizer } from "@lotics/ui/auto_sizer";
-import { SelectCell } from "./select_cell";
-import { SelectHeaderCell } from "./select_header_cell";
-import { SelectGroupSummaryCell } from "./select_group_summary_cell";
-import { buildGridColumns, deriveHasSelectColumn } from "./data_grid_columns";
-import { IconButton } from "@lotics/ui/icon_button";
-import {
-  CellAnimationContext,
-  RowSelectionContext,
-  noopUseCellAnimation,
-  type RowSelectionContextValue,
-  type UseCellAnimationFn,
-  RowId,
-} from "./data_grid_context";
-import { useGridGroups } from "./use_grid_groups";
-import { GridRef } from "@lotics/ui/grid/use_virtual_grid";
-import { RowCell, NavigationDirection } from "./row_cell";
-import { View, StyleSheet } from "react-native";
-import { colors } from "@lotics/ui/colors";
-// i18n is the consumer's responsibility. DataGrid exposes the few
-// user-facing strings it renders via props (e.g. `expandGroupLabel`,
-// `collapseGroupLabel`); records-side wires them through lingui, iframe
-// apps default to English. Keeping @lotics/ui free of @lingui is what
-// lets the iframe bundle (esbuild) compile this file without pulling in
-// node-side @lingui internals.
-
-/**
- * Hierarchical group shape passed to DataGrid. Either a leaf group with `rows`,
- * a parent group with `children`, or both for grouped-with-summaries layouts.
- * Generic over the row payload — domain-agnostic. (Records page's
- * `RecordGroup<TableRecord>` from @lotics/shared is structurally compatible.)
- */
-export interface DataGridGroup<TRow> {
-  /** Grouped field value used for display in group headings */
-  value: unknown;
-  /** Field key this group is grouped by */
-  columnKey: string;
-  /** Nested groups (mutually exclusive with rows) */
-  children?: DataGridGroup<TRow>[];
-  /** Leaf rows (mutually exclusive with children) */
-  rows?: TRow[];
-}
-
-export interface CellPosition {
-  rowKey: RowPathKey;
-  column: number;
-}
-
-export interface SelectionRange {
-  /** The anchor cell where selection started (stays fixed during shift+arrow) */
-  anchor: CellPosition;
-  /** The focus cell where selection ends (moves during shift+arrow) */
-  focus: CellPosition;
-}
-
-/**
- * Selection bounds as primitives for efficient prop comparison.
- * Row indices are positions in the flat row list (not rowKey).
- */
-export interface SelectionBounds {
-  minRowIndex: number;
-  maxRowIndex: number;
-  minColumn: number;
-  maxColumn: number;
-  /** The active cell (focus) row index */
-  activeRowIndex: number;
-  /** The active cell (focus) column */
-  activeColumn: number;
-}
-
-/** Fill drag state for tracking fill handle interactions */
-export interface FillDragState {
-  /** Source row index where fill started */
-  sourceRowIndex: number;
-  /** Target row index where fill ends (updated during drag) */
-  targetRowIndex: number;
-  /** Column being filled */
-  column: number;
-}
-
-/** Data for a selected cell, used for cell selection change callback */
-export interface SelectedCellData {
-  rowId: string;
-  columnKey: string;
-  value: unknown;
-}
-
-export type { RowPathKey, GroupPathKey } from "@lotics/ui/grid/layout";
-export { useRowSelection, useHeaderRowSelection } from "./data_grid_context";
-
-/** Convert RowPathKey string back to RowPath array */
-function keyToRowPath(key: RowPathKey): RowPath {
-  return key.split(",").map(Number);
-}
-
-/** Format a cell value for clipboard (Excel-compatible) */
-function formatValueForClipboard(value: unknown): string {
-  if (value === null || value === undefined) {
-    return "";
-  }
-  if (typeof value === "boolean") {
-    return value ? "TRUE" : "FALSE";
-  }
-  if (typeof value === "number") {
-    return String(value);
-  }
-  if (typeof value === "string") {
-    // Escape tabs and newlines for TSV format
-    return value.replace(/\t/g, " ").replace(/\n/g, " ");
-  }
-  if (Array.isArray(value)) {
-    // For arrays (like multi-select), join with comma
-    return value.map((v) => formatValueForClipboard(v)).join(", ");
-  }
-  if (typeof value === "object") {
-    // For objects (like formula results), try to get a displayable value
-    if ("value" in value && value.value !== undefined) {
-      return formatValueForClipboard(value.value);
-    }
-    // Fallback to JSON
-    return JSON.stringify(value);
-  }
-  return String(value);
-}
-
-/** Module-level constant to avoid allocation on every keypress */
-const ARROW_KEY_TO_DIRECTION: Readonly<Record<string, NavigationDirection>> = {
-  ArrowUp: "up",
-  ArrowDown: "down",
-  ArrowLeft: "left",
-  ArrowRight: "right",
-};
-
-export interface RenderCellProps<TRow = unknown, TValue = unknown> {
-  rowKey: RowPathKey;
-  rowId: RowId;
-  columnKey: string;
-  value: TValue;
-  editable: boolean;
-  row: TRow;
-  active: boolean;
-  onValueChange: (nextValue: TValue) => void;
-}
-
-export interface RenderEditCellProps<TRow = unknown, TValue = unknown> {
-  rowKey: RowPathKey;
-  rowId: RowId;
-  columnKey: string;
-  value: TValue;
-  row: TRow;
-  onValueChange: (nextValue: TValue) => void;
-  onClose: () => void;
-  onCancel: () => void;
-}
-
-export interface RenderSummaryCellProps<TRow = unknown> {
-  groupKey: GroupPathKey;
-  rows: TRow[];
-  columnKey: string;
-}
-
-export interface RenderGroupHeadingProps {
-  /** Grouped field value. Callers narrow at the render site. */
-  value: unknown;
-  columnKey: string;
-  level: number;
-}
-
-export interface RenderHeaderCellProps {
-  columnKey: string;
-  /** Callback to resize this column. Optional - resize is also handled by the grid's resize handle. */
-  onResize?: (width: number) => void;
-  /** Callback to select all cells in this column. */
-  onSelectColumn?: () => void;
-}
-
-export interface DataGridColumn<TRow = unknown> {
-  key: string;
-  name: string | React.ReactElement;
-  width?: number;
-
-  isCellEditable?: (row: TRow, columnKey: string) => boolean;
-  /** Called when Enter/Space is pressed on an active, editable cell without renderEditCell (e.g., boolean toggle).
-   *  Returns the new cell value to commit. */
-  onActivate?: (row: TRow, columnKey: string) => unknown;
-  renderHeaderCell?: (props: RenderHeaderCellProps) => React.ReactNode;
-  renderCell?: <TValue = unknown>(props: RenderCellProps<TRow, TValue>) => React.ReactNode;
-  renderEditCell?: <TValue = unknown>(props: RenderEditCellProps<TRow, TValue>) => React.ReactNode;
-  renderGroupHeading?: (props: RenderGroupHeadingProps) => React.ReactNode;
-  renderSummaryCell?: (props: RenderSummaryCellProps<TRow>) => React.ReactNode;
-}
-
-export interface RowsChangeData {
-  indexes: number[];
-}
-
-export interface DataGridHandle {
-  selectCell: (params: { rowPathKey: RowPathKey; columnKey: string }) => void;
-  selectCells: (cells: SelectedCellData[]) => void;
-  clearSelection: () => void;
-}
-
-export interface FillEvent<TRow = unknown> {
-  columnKey: string;
-  sourceRow: TRow;
-  targetRow: TRow;
-}
-
-export interface DataGridProps<TRow = unknown> {
-  columns: DataGridColumn<TRow>[];
-  /**
-   * Returns the unique data identifier for a row.
-   * This is the business key (e.g., "rec_xyz123"), NOT a grid position.
-   */
-  rowIdGetter: (row: TRow) => RowId;
-  /**
-   * Maximum width for frozen columns. If frozen columns exceed this, they will be scaled down proportionally.
-   * Use this to prevent frozen columns from taking up too much screen space on small devices.
-   * Can be specified as:
-   * - A pixel value (e.g., 300) for absolute max width
-   * - A ratio between 0 and 1 (e.g., 0.5) for a percentage of the container width
-   */
-  maxFrozenColumnsWidth?: number;
-
-  /**
-   * Optional function to extract a background color for a row.
-   * Returns a CSS color string (e.g., "rgba(254, 242, 242, 1)") or undefined for no color.
-   * Used for conditional row coloring.
-   */
-  rowColorGetter?: (row: TRow) => string | undefined;
-
-  /**
-   * Pre-grouped data structure containing all rows.
-   * For flat (ungrouped) data, use a single group with all rows.
-   * Each group contains nested children or leaf rows with sorting already applied.
-   */
-  groups: DataGridGroup<TRow>[];
-  collapsedGroups?: GroupPathKey[];
-  onCollapsedGroupsChange?: (collapsedGroups: GroupPathKey[]) => void;
-  frozenColumnCount?: number;
-  ref?: React.Ref<DataGridHandle>;
-  rowHeight?: number;
-  groupHeadingHeight?: number;
-  groupSummaryHeight?: number;
-  /**
-   * Height of the spacer row rendered after each top-level group.
-   * Set to `0` to omit the spacer entirely — no row is added to the layout.
-   * @default 56
-   */
-  spacerHeight?: number;
-
-  /**
-   * Set of selected row path keys (RowPathKey format: "0,1").
-   * Used for checkbox row selection.
-   */
-  selectedRows?: Set<RowPathKey>;
-  onSelectedRowsChange?: (selectedRows: Set<RowPathKey>) => void;
-
-  /**
-   * Callback when cell selection (blue range highlight) changes.
-   * Called with array of selected cell data, or null when selection is cleared.
-   */
-  onCellSelectionChange?: (cells: SelectedCellData[] | null) => void;
-
-  // Fill handle callback
-  onFill?: (event: FillEvent<TRow>) => TRow;
-
-  // Row change callback (for editing)
-  onRowsChange?: (rows: TRow[], data: RowsChangeData) => void;
-
-  /**
-   * Callback to format a cell value for copying.
-   * Should return a string representation suitable for clipboard/Excel.
-   * If not provided, values are converted using String().
-   */
-  onCellCopy?: (params: { row: TRow; columnKey: string }) => string;
-
-  /**
-   * Callback to parse a pasted string value for a cell.
-   * Should return the parsed value to set on the cell, or undefined to skip.
-   * If not provided, the raw string is used.
-   */
-  onCellPaste?: (params: { row: TRow; columnKey: string; pastedText: string }) => unknown;
-
-  /**
-   * Callback to handle pasted files (images) for a cell.
-   * Called when clipboard contains image data instead of text.
-   * Typically used for file/attachment fields.
-   */
-  onFilePaste?: (params: { row: TRow; columnKey: string; files: File[] }) => void;
-
-  /**
-   * Predicate filtering pasted files before they're handed to `onFilePaste`.
-   * Defaults to accepting every file; records page narrows to image MIME
-   * types via `isImageMimeType`.
-   */
-  isPasteableFile?: (file: File) => boolean;
-
-  /**
-   * Optional hook called per cell render to decide whether to flash the cell.
-   * Records page wires this to its realtime-change-animation hook bound to
-   * the current `tableId`. Iframe apps omit it; cells never animate.
-   */
-  useCellAnimation?: UseCellAnimationFn;
-
-  /** Tooltip for the group-collapse chevron when the group is collapsed.
-   *  i18n is the consumer's responsibility — records page passes `t`Expand``,
-   *  iframe apps default to "Expand". */
-  expandGroupLabel?: string;
-  /** Tooltip for the group-collapse chevron when the group is expanded. */
-  collapseGroupLabel?: string;
-  /**
-   * Callback when a column is resized.
-   */
-  onColumnResize?: (columnKey: string, width: number) => void;
-
-  /**
-   * Callback when a column is reordered.
-   * @param columnKey - The key of the column being moved
-   * @param targetColumnKey - The key of the column to insert before, or null to insert at end
-   */
-  onColumnReorder?: (columnKey: string, targetColumnKey: string | null) => void;
-
-  /**
-   * Whether column reordering is enabled.
-   * When false, columns cannot be dragged to reorder even if onColumnReorder is provided.
-   * @default true
-   */
-  enableReordering?: boolean;
-
-  /**
-   * Whether column resizing is enabled.
-   * When false, columns cannot be resized even if onColumnResize is provided.
-   * @default true
-   */
-  enableResizing?: boolean;
-
-  /** Fires when scroll nears the bottom. Used for infinite scroll pagination. */
-  onEndReached?: () => void;
-  /** Fires when the visible row range changes. Used for viewport-driven page loading. */
-  onVisibleRangeChange?: (rowRange: [number, number]) => void;
-
-  /**
-   * Declarative scroll target. When set, the grid scrolls to this row when its
-   * layout is ready (the row exists in the grid's internal layout cache).
-   * After scrolling, `onScrollTargetReached` is called so the parent can clear the target.
-   * This is the proper way to scroll to a record — the grid owns the timing.
-   */
-  scrollTarget?: { rowPathKey: RowPathKey; columnKey: string; revealId: number } | null;
-  onScrollTargetReached?: (revealId: number) => void;
-
-  /** Callback when a non-editable cell is double-clicked (e.g., locked cell). */
-  onRequestLockedFieldChange?: (row: TRow, columnKey: string) => void;
-
-  /**
-   * Custom renderer for the select column cell.
-   * When provided, called for each row. Return a ReactNode to replace the default SelectCell,
-   * or undefined to use the default SelectCell.
-   */
-  renderSelectCell?: (props: { rowKey: RowPathKey; rowId: RowId; row: TRow }) => React.ReactNode | undefined;
-
-  /**
-   * Custom renderer for the select column header. Pass `() => null` to suppress
-   * the default "select all" checkbox (e.g., when the column is being used for
-   * per-row actions rather than row selection).
-   */
-  renderSelectHeaderCell?: () => React.ReactNode;
-
-  // Placeholder props for API compatibility (not yet implemented)
-  onCellClick?: unknown;
-  onCellKeyDown?: unknown;
-  onSelectedCellChange?: unknown;
-}
-
-export function DataGrid<TRow extends Record<string, unknown>>(props: DataGridProps<TRow>) {
-  const {
-    columns: userColumns,
-    groups,
-    rowHeight = 56,
-    groupHeadingHeight = 40,
-    groupSummaryHeight = 40,
-    spacerHeight = 56,
-    ref,
-    collapsedGroups,
-    onCollapsedGroupsChange,
-    frozenColumnCount = 1,
-    maxFrozenColumnsWidth,
-    selectedRows,
-    onSelectedRowsChange,
-    onCellSelectionChange,
-    onRowsChange,
-    rowIdGetter,
-    rowColorGetter,
-    onFill,
-    onCellCopy,
-    onCellPaste,
-    onFilePaste,
-    onColumnResize,
-    onColumnReorder,
-    enableReordering = true,
-    enableResizing = true,
-    onRequestLockedFieldChange,
-    renderSelectCell: renderSelectCellProp,
-    renderSelectHeaderCell: renderSelectHeaderCellProp,
-    isPasteableFile,
-    useCellAnimation,
-    onEndReached,
-    onVisibleRangeChange,
-    scrollTarget,
-    onScrollTargetReached,
-  } = props;
-
-  const gridRef = useRef<GridRef>(null);
-
-  const hasSelectColumn = deriveHasSelectColumn(selectedRows, onSelectedRowsChange);
-
-  const expandGroupLabel = props.expandGroupLabel ?? "Expand";
-  const collapseGroupLabel = props.collapseGroupLabel ?? "Collapse";
-  // Selection state: anchor (start) and focus (current) positions
-  const [selection, setSelection] = useState<SelectionRange | null>(null);
-
-  const [editingCell, setEditingCell] = useState<{
-    rowKey: RowPathKey;
-    column: number;
-  } | null>(null);
-
-  // Fill drag state for tracking fill handle drag
-  const [fillDrag, setFillDrag] = useState<FillDragState | null>(null);
-
-  // Column resize state
-  const [resizeDrag, setResizeDrag] = useState<{
-    columnKey: string;
-    startX: number;
-    startWidth: number;
-  } | null>(null);
-
-  // Column reorder drag state
-  const [reorderDrag, setReorderDrag] = useState<{
-    columnKey: string;
-    targetColumnKey: string | null;
-  } | null>(null);
-
-  const { gridGroups, groupDataMap, rowDataMap, allRowPathKeys, descendantCache } = useGridGroups({
-    groups,
-    rowIdGetter,
-  });
-
-  // Build ordered row keys array for navigation
-  const orderedRowKeys = useMemo(() => {
-    return Array.from(allRowPathKeys);
-  }, [allRowPathKeys]);
-
-  // Build row key to index lookup
-  const rowKeyToIndex = useMemo(() => {
-    const map = new Map<RowPathKey, number>();
-    orderedRowKeys.forEach((key, index) => {
-      map.set(key, index);
-    });
-    return map;
-  }, [orderedRowKeys]);
-
-  // Build rowId to data-array index lookup for O(1) row lookups in mutations
-  const rowIdToDataIndex = useMemo(() => {
-    const map = new Map<RowId, number>();
-    let idx = 0;
-    for (const row of rowDataMap.values()) {
-      map.set(rowIdGetter(row), idx);
-      idx++;
-    }
-    return map;
-  }, [rowDataMap, rowIdGetter]);
-
-  const rowIdToDataIndexRef = useRef(rowIdToDataIndex);
-  rowIdToDataIndexRef.current = rowIdToDataIndex;
-
-  const rowDataMapRef = useRef(rowDataMap);
-  rowDataMapRef.current = rowDataMap;
-
-  const descendantCacheRef = useRef(descendantCache);
-  descendantCacheRef.current = descendantCache;
-
-  const onRowsChangeRef = useRef(onRowsChange);
-  onRowsChangeRef.current = onRowsChange;
-
-  const onFillRef = useRef(onFill);
-  onFillRef.current = onFill;
-
-  const onCellCopyRef = useRef(onCellCopy);
-  onCellCopyRef.current = onCellCopy;
-
-  const onCellPasteRef = useRef(onCellPaste);
-  onCellPasteRef.current = onCellPaste;
-
-  const onFilePasteRef = useRef(onFilePaste);
-  onFilePasteRef.current = onFilePaste;
-
-  const isPasteableFileRef = useRef(isPasteableFile);
-  isPasteableFileRef.current = isPasteableFile;
-
-  const onColumnResizeRef = useRef(onColumnResize);
-  onColumnResizeRef.current = onColumnResize;
-
-  const onColumnReorderRef = useRef(onColumnReorder);
-  onColumnReorderRef.current = onColumnReorder;
-
-  const onCellSelectionChangeRef = useRef(onCellSelectionChange);
-  onCellSelectionChangeRef.current = onCellSelectionChange;
-
-  const orderedRowKeysRef = useRef(orderedRowKeys);
-  orderedRowKeysRef.current = orderedRowKeys;
-
-  const rowKeyToIndexRef = useRef(rowKeyToIndex);
-  rowKeyToIndexRef.current = rowKeyToIndex;
-
-  const fillDragRef = useRef(fillDrag);
-  fillDragRef.current = fillDrag;
-
-  // First selectable column: index 0 when there is no select column, else 1
-  // (the select checkbox column occupies index 0 and is not cell-selectable).
-  const firstSelectableColumn = hasSelectColumn ? 1 : 0;
-
-  // Build finalColumns first so we can use columnCount in handlers.
-  // The select column is prepended only when the consumer participates in row
-  // selection (`hasSelectColumn`); otherwise the grid is just its user columns.
-  const finalColumns = useMemo(() => {
-    const selectColumn: DataGridColumn<TRow> = {
-      key: "select",
-      name: "",
-      width: 32 + 4,
-      renderHeaderCell: renderSelectHeaderCellProp ?? (() => <SelectHeaderCell />),
-      renderCell: (props) => {
-        if (renderSelectCellProp) {
-          const custom = renderSelectCellProp({ rowKey: props.rowKey, rowId: props.rowId, row: props.row });
-          if (custom !== undefined) return custom;
-        }
-        return <SelectCell rowKey={props.rowKey} />;
-      },
-      renderSummaryCell: (props: RenderSummaryCellProps<TRow>) => (
-        <SelectGroupSummaryCell
-          groupKey={props.groupKey}
-          descendantRowKeys={descendantCacheRef.current.get(props.groupKey)?.rowPathKeys ?? []}
-        />
-      ),
-    };
-
-    return buildGridColumns(hasSelectColumn, selectColumn, userColumns);
-  }, [hasSelectColumn, userColumns, renderSelectCellProp, renderSelectHeaderCellProp]);
-
-  const columnCount = finalColumns.length;
-
-  const finalColumnsRef = useRef(finalColumns);
-  finalColumnsRef.current = finalColumns;
-
-  const columnCountRef = useRef(columnCount);
-  columnCountRef.current = columnCount;
-
-  // Check if any user column has a summary cell defined (for footer rendering)
-  const hasAnySummaryCell = useMemo(
-    () => userColumns.some((col) => col.renderSummaryCell !== undefined),
-    [userColumns],
-  );
-
-  // Compute selection bounds as primitives for efficient prop comparison
-  const selectionBounds = useMemo((): SelectionBounds | null => {
-    if (!selection) return null;
-
-    const anchorRowIndex = rowKeyToIndex.get(selection.anchor.rowKey);
-    const focusRowIndex = rowKeyToIndex.get(selection.focus.rowKey);
-
-    if (anchorRowIndex === undefined || focusRowIndex === undefined) {
-      return null;
-    }
-
-    return {
-      minRowIndex: Math.min(anchorRowIndex, focusRowIndex),
-      maxRowIndex: Math.max(anchorRowIndex, focusRowIndex),
-      minColumn: Math.min(selection.anchor.column, selection.focus.column),
-      maxColumn: Math.max(selection.anchor.column, selection.focus.column),
-      activeRowIndex: focusRowIndex,
-      activeColumn: selection.focus.column,
-    };
-  }, [selection, rowKeyToIndex]);
-
-  // Notify parent when cell selection changes
-  useEffect(() => {
-    const callback = onCellSelectionChangeRef.current;
-    if (!callback) return;
-
-    if (!selectionBounds) {
-      callback(null);
-      return;
-    }
-
-    const { minRowIndex, maxRowIndex, minColumn, maxColumn } = selectionBounds;
-    const cells: SelectedCellData[] = [];
-
-    for (let rowIdx = minRowIndex; rowIdx <= maxRowIndex; rowIdx++) {
-      const rowKey = orderedRowKeysRef.current[rowIdx];
-      const row = rowDataMapRef.current.get(rowKey);
-      if (!row) continue;
-
-      const rowId = rowIdGetter(row);
-
-      for (let colIdx = minColumn; colIdx <= maxColumn; colIdx++) {
-        const column = finalColumnsRef.current[colIdx];
-        if (!column || column.key === "select") continue;
-
-        cells.push({
-          rowId,
-          columnKey: column.key,
-          value: row[column.key as keyof typeof row],
-        });
-      }
-    }
-
-    callback(cells.length > 0 ? cells : null);
-  }, [selectionBounds, rowIdGetter]);
-
-  // Clear selection when rows change if selected rows no longer exist
-  useEffect(() => {
-    setSelection((prev) => {
-      if (!prev) return null;
-      const anchorExists = rowKeyToIndex.has(prev.anchor.rowKey);
-      const focusExists = rowKeyToIndex.has(prev.focus.rowKey);
-      if (anchorExists && focusExists) return prev;
-      return null;
-    });
-  }, [rowKeyToIndex]);
-
-  const handleCellCommit = useCallback(
-    (row: TRow, columnKey: string, newValue: unknown) => {
-      if (!onRowsChangeRef.current) return;
-
-      const rowIndex = rowIdToDataIndexRef.current.get(rowIdGetter(row));
-      if (rowIndex === undefined) return;
-
-      const updatedRow = { ...row, [columnKey]: newValue } as TRow;
-      const allRows = Array.from(rowDataMapRef.current.values());
-      const newRows = [...allRows];
-      newRows[rowIndex] = updatedRow;
-      onRowsChangeRef.current(newRows, { indexes: [rowIndex] });
-    },
-    [rowIdGetter],
-  );
-
-  // Ref for selection to allow stable handlers
-  const selectionRef = useRef(selection);
-  selectionRef.current = selection;
-
-  const editingCellRef = useRef(editingCell);
-  editingCellRef.current = editingCell;
-
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // Focus the grid container (keyboard events flow to container, not individual cells)
-  const focusContainer = useCallback(() => {
-    containerRef.current?.focus({ preventScroll: true });
-  }, []);
-
-  // Start new selection (mousedown without shift)
-  const handleSelectStart = useCallback(
-    (rowKey: RowPathKey, column: number) => {
-      // Skip non-selectable columns
-      if (column < firstSelectableColumn) return;
-
-      setSelection({
-        anchor: { rowKey, column },
-        focus: { rowKey, column },
-      });
-      focusContainer();
-    },
-    [focusContainer, firstSelectableColumn],
-  );
-
-  // Extend selection (shift+click or mouse drag)
-  const handleSelectUpdate = useCallback(
-    (rowKey: RowPathKey, column: number) => {
-      // Skip non-selectable columns
-      if (column < firstSelectableColumn) return;
-
-      const currentSelection = selectionRef.current;
-      if (!currentSelection) return;
-
-      // Extend from anchor to new cell
-      setSelection({
-        anchor: currentSelection.anchor,
-        focus: { rowKey, column },
-      });
-    },
-    [firstSelectableColumn],
-  );
-
-  const handleStartEditing = useCallback((rowKey: RowPathKey, column: number) => {
-    setEditingCell({ rowKey, column });
-  }, []);
-
-  // Stable callback for navigation - uses refs to read current values
-  const handleNavigate = useCallback(
-    (direction: NavigationDirection, extend: boolean) => {
-      const currentSelection = selectionRef.current;
-      const currentOrderedRowKeys = orderedRowKeysRef.current;
-      const currentRowKeyToIndex = rowKeyToIndexRef.current;
-      const currentColumnCount = columnCountRef.current;
-
-      // Calculate delta based on direction
-      let deltaRow = 0;
-      let deltaColumn = 0;
-      switch (direction) {
-        case "up":
-          deltaRow = -1;
-          break;
-        case "down":
-          deltaRow = 1;
-          break;
-        case "left":
-          deltaColumn = -1;
-          break;
-        case "right":
-          deltaColumn = 1;
-          break;
-      }
-
-      if (!currentSelection) {
-        // No selection - start at first cell
-        if (currentOrderedRowKeys.length > 0) {
-          const firstRowKey = currentOrderedRowKeys[0];
-          setSelection({
-            anchor: { rowKey: firstRowKey, column: firstSelectableColumn },
-            focus: { rowKey: firstRowKey, column: firstSelectableColumn },
-          });
-          gridRef.current?.scrollToCell({
-            rowPath: keyToRowPath(firstRowKey),
-            column: firstSelectableColumn,
-          });
-        }
-        return;
-      }
-
-      const currentRowIndex = currentRowKeyToIndex.get(currentSelection.focus.rowKey);
-      if (currentRowIndex === undefined) return;
-
-      const newRowIndex = Math.max(
-        0,
-        Math.min(currentOrderedRowKeys.length - 1, currentRowIndex + deltaRow),
-      );
-      const newColumn = Math.max(
-        firstSelectableColumn,
-        Math.min(currentColumnCount - 1, currentSelection.focus.column + deltaColumn),
-      );
-
-      const newRowKey = currentOrderedRowKeys[newRowIndex];
-      if (!newRowKey) return;
-
-      if (extend) {
-        setSelection({
-          anchor: currentSelection.anchor,
-          focus: { rowKey: newRowKey, column: newColumn },
-        });
-      } else {
-        setSelection({
-          anchor: { rowKey: newRowKey, column: newColumn },
-          focus: { rowKey: newRowKey, column: newColumn },
-        });
-      }
-
-      gridRef.current?.scrollToCell({
-        rowPath: keyToRowPath(newRowKey),
-        column: newColumn,
-      });
-    },
-    [firstSelectableColumn],
-  );
-
-  // Shared helper to clear editable cells within a range
-  const clearCellsInRange = useCallback(
-    (bounds: {
-      minRowIndex: number;
-      maxRowIndex: number;
-      minColumn: number;
-      maxColumn: number;
-    }) => {
-      const currentOrderedRowKeys = orderedRowKeysRef.current;
-      const currentRowDataMap = rowDataMapRef.current;
-      const currentColumns = finalColumnsRef.current;
-      const currentOnRowsChange = onRowsChangeRef.current;
-      const currentRowIdToDataIndex = rowIdToDataIndexRef.current;
-
-      if (!currentOnRowsChange) return;
-
-      const allRows = Array.from(currentRowDataMap.values());
-      const updatedRows = [...allRows];
-      const changedIndexes: number[] = [];
-
-      for (let rowIdx = bounds.minRowIndex; rowIdx <= bounds.maxRowIndex; rowIdx++) {
-        const rowKey = currentOrderedRowKeys[rowIdx];
-        const row = currentRowDataMap.get(rowKey);
-        if (!row) continue;
-
-        const rowIndex = currentRowIdToDataIndex.get(rowIdGetter(row));
-        if (rowIndex === undefined) continue;
-
-        let rowModified = false;
-        let updatedRow = { ...row } as TRow;
-
-        for (let colIdx = bounds.minColumn; colIdx <= bounds.maxColumn; colIdx++) {
-          const column = currentColumns[colIdx];
-          if (!column) continue;
-
-          const editable = column.isCellEditable?.(row, column.key) ?? true;
-          if (!editable) continue;
-
-          updatedRow = { ...updatedRow, [column.key]: null };
-          rowModified = true;
-        }
-
-        if (rowModified) {
-          updatedRows[rowIndex] = updatedRow;
-          changedIndexes.push(rowIndex);
-        }
-      }
-
-      if (changedIndexes.length > 0) {
-        currentOnRowsChange(updatedRows, { indexes: changedIndexes });
-      }
-    },
-    [rowIdGetter],
-  );
-
-  // Clear selected cells (Delete key)
-  const handleClearCell = useCallback(() => {
-    const currentSelection = selectionRef.current;
-    if (!currentSelection) return;
-
-    const currentRowKeyToIndex = rowKeyToIndexRef.current;
-    const anchorRowIndex = currentRowKeyToIndex.get(currentSelection.anchor.rowKey);
-    const focusRowIndex = currentRowKeyToIndex.get(currentSelection.focus.rowKey);
-    if (anchorRowIndex === undefined || focusRowIndex === undefined) return;
-
-    clearCellsInRange({
-      minRowIndex: Math.min(anchorRowIndex, focusRowIndex),
-      maxRowIndex: Math.max(anchorRowIndex, focusRowIndex),
-      minColumn: Math.min(currentSelection.anchor.column, currentSelection.focus.column),
-      maxColumn: Math.max(currentSelection.anchor.column, currentSelection.focus.column),
-    });
-  }, [clearCellsInRange]);
-
-  // Stable callback for canceling editing (keeps cell selected, restores focus)
-  const handleCancelEditing = useCallback(() => {
-    setEditingCell(null);
-    focusContainer();
-  }, [focusContainer]);
-
-  // Stable callback for select all
-  const handleSelectAll = useCallback(() => {
-    const currentOrderedRowKeys = orderedRowKeysRef.current;
-    const currentColumnCount = columnCountRef.current;
-
-    if (currentOrderedRowKeys.length === 0) return;
-
-    setSelection({
-      anchor: {
-        rowKey: currentOrderedRowKeys[0],
-        column: firstSelectableColumn,
-      },
-      focus: {
-        rowKey: currentOrderedRowKeys[currentOrderedRowKeys.length - 1],
-        column: currentColumnCount - 1,
-      },
-    });
-    focusContainer();
-  }, [focusContainer, firstSelectableColumn]);
-
-  // Stable callback for selecting all cells in a column
-  const handleSelectColumn = useCallback(
-    (columnIndex: number) => {
-      const currentOrderedRowKeys = orderedRowKeysRef.current;
-
-      if (currentOrderedRowKeys.length === 0) return;
-      if (columnIndex < firstSelectableColumn) return;
-
-      setSelection({
-        anchor: {
-          rowKey: currentOrderedRowKeys[0],
-          column: columnIndex,
-        },
-        focus: {
-          rowKey: currentOrderedRowKeys[currentOrderedRowKeys.length - 1],
-          column: columnIndex,
-        },
-      });
-
-      // Scroll to make the column visible
-      gridRef.current?.scrollToCell({
-        rowPath: keyToRowPath(currentOrderedRowKeys[0]),
-        column: columnIndex,
-      });
-      focusContainer();
-    },
-    [focusContainer, firstSelectableColumn],
-  );
-
-  // Fill handle: start dragging from active cell
-  const handleFillStart = useCallback((sourceRowIndex: number, column: number) => {
-    setFillDrag({
-      sourceRowIndex,
-      targetRowIndex: sourceRowIndex,
-      column,
-    });
-  }, []);
-
-  // Fill handle: update target row during drag
-  const handleFillUpdate = useCallback((targetRowIndex: number) => {
-    setFillDrag((prev) => {
-      if (!prev) return null;
-      if (prev.targetRowIndex === targetRowIndex) return prev;
-      return { ...prev, targetRowIndex };
-    });
-  }, []);
-
-  // Fill handle: complete the fill operation
-  const handleFillComplete = useCallback(() => {
-    const currentFillDrag = fillDragRef.current;
-    if (!currentFillDrag) return;
-
-    const { sourceRowIndex, targetRowIndex, column } = currentFillDrag;
-    const currentOrderedRowKeys = orderedRowKeysRef.current;
-    const currentRowDataMap = rowDataMapRef.current;
-    const currentColumns = finalColumnsRef.current;
-    const currentOnFill = onFillRef.current;
-    const currentOnRowsChange = onRowsChangeRef.current;
-    const currentRowIdToDataIndex = rowIdToDataIndexRef.current;
-
-    // Clear fill state
-    setFillDrag(null);
-
-    // No-op if same row or no fill callback
-    if (sourceRowIndex === targetRowIndex || !currentOnFill) return;
-
-    const columnDef = currentColumns[column];
-    if (!columnDef) return;
-
-    const sourceRowKey = currentOrderedRowKeys[sourceRowIndex];
-    const sourceRow = currentRowDataMap.get(sourceRowKey);
-    if (!sourceRow) return;
-
-    // Determine fill direction and range
-    const minRow = Math.min(sourceRowIndex, targetRowIndex);
-    const maxRow = Math.max(sourceRowIndex, targetRowIndex);
-
-    // Collect all updated rows
-    const allRows = Array.from(currentRowDataMap.values());
-    const updatedRows = [...allRows];
-    const changedIndexes: number[] = [];
-
-    for (let i = minRow; i <= maxRow; i++) {
-      // Skip source row
-      if (i === sourceRowIndex) continue;
-
-      const rowKey = currentOrderedRowKeys[i];
-      const targetRow = currentRowDataMap.get(rowKey);
-      if (!targetRow) continue;
-
-      const rowIndex = currentRowIdToDataIndex.get(rowIdGetter(targetRow));
-      if (rowIndex === undefined) continue;
-
-      // Apply fill callback
-      const filledRow = currentOnFill({
-        columnKey: columnDef.key,
-        sourceRow,
-        targetRow,
-      });
-
-      // Only record change if row actually changed
-      if (filledRow !== targetRow) {
-        updatedRows[rowIndex] = filledRow;
-        changedIndexes.push(rowIndex);
-      }
-    }
-
-    // Call onRowsChange with all updates at once
-    if (changedIndexes.length > 0 && currentOnRowsChange) {
-      currentOnRowsChange(updatedRows, { indexes: changedIndexes });
-    }
-  }, [rowIdGetter]);
-
-  // Global listeners for fill drag - managed at DataGrid level
-  useEffect(() => {
-    if (!fillDrag) return;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      // Find the cell under cursor using data-row-index attribute
-      const target = document.elementFromPoint(e.clientX, e.clientY);
-      if (!target) return;
-
-      const cell = target.closest("[data-row-index]");
-      if (cell) {
-        const targetRowIndex = parseInt(cell.getAttribute("data-row-index") || "", 10);
-        if (!isNaN(targetRowIndex)) {
-          handleFillUpdate(targetRowIndex);
-        }
-      }
-    };
-
-    const handleMouseUp = () => {
-      handleFillComplete();
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [fillDrag, handleFillUpdate, handleFillComplete]);
-
-  // Copy selected cells to clipboard in TSV format (Excel-compatible)
-  // Returns the selection bounds for reuse (e.g., in cut operation)
-  const copySelectionToClipboard = useCallback(() => {
-    const currentSelection = selectionRef.current;
-    if (!currentSelection) return;
-
-    const currentOrderedRowKeys = orderedRowKeysRef.current;
-    const currentRowKeyToIndex = rowKeyToIndexRef.current;
-    const currentRowDataMap = rowDataMapRef.current;
-    const currentColumns = finalColumnsRef.current;
-    const currentOnCellCopy = onCellCopyRef.current;
-
-    // Get selection bounds
-    const anchorRowIndex = currentRowKeyToIndex.get(currentSelection.anchor.rowKey);
-    const focusRowIndex = currentRowKeyToIndex.get(currentSelection.focus.rowKey);
-
-    if (anchorRowIndex === undefined || focusRowIndex === undefined) return;
-
-    const minRowIndex = Math.min(anchorRowIndex, focusRowIndex);
-    const maxRowIndex = Math.max(anchorRowIndex, focusRowIndex);
-    const minColumn = Math.min(currentSelection.anchor.column, currentSelection.focus.column);
-    const maxColumn = Math.max(currentSelection.anchor.column, currentSelection.focus.column);
-
-    // Build TSV string (tab-separated columns, newline-separated rows)
-    const rows: string[] = [];
-
-    for (let rowIdx = minRowIndex; rowIdx <= maxRowIndex; rowIdx++) {
-      const rowKey = currentOrderedRowKeys[rowIdx];
-      const row = currentRowDataMap.get(rowKey);
-      if (!row) continue;
-
-      const cells: string[] = [];
-      for (let colIdx = minColumn; colIdx <= maxColumn; colIdx++) {
-        const column = currentColumns[colIdx];
-        if (!column) continue;
-
-        // Format the value
-        let cellText: string;
-        if (currentOnCellCopy) {
-          cellText = currentOnCellCopy({
-            row,
-            columnKey: column.key,
-          });
-        } else {
-          // Default formatting
-          cellText = formatValueForClipboard(row[column.key]);
-        }
-
-        cells.push(cellText);
-      }
-
-      rows.push(cells.join("\t"));
-    }
-
-    const tsvData = rows.join("\n");
-
-    // Write to clipboard. `writeText` rejects when the Clipboard API is
-    // blocked (e.g. a sandboxed iframe without clipboard-write permission, or
-    // a non-secure context) — catch it so the failure surfaces as a logged
-    // warning instead of an unhandled promise rejection.
-    navigator.clipboard.writeText(tsvData).catch((err: unknown) => {
-      console.warn("Grid copy to clipboard failed", err);
-    });
-
-    return { minRowIndex, maxRowIndex, minColumn, maxColumn };
-  }, []);
-
-  // Handle copy action (Ctrl/Cmd+C)
-  const handleCopySelection = useCallback(() => {
-    copySelectionToClipboard();
-  }, [copySelectionToClipboard]);
-
-  // Handle cut action (Ctrl/Cmd+X) - copy then clear selected cells
-  const handleCutSelection = useCallback(() => {
-    const bounds = copySelectionToClipboard();
-    if (!bounds) return;
-    clearCellsInRange(bounds);
-  }, [copySelectionToClipboard, clearCellsInRange]);
-
-  // Paste into the active cell from clipboard data (provided by native paste event)
-  const handlePasteSelection = useCallback(
-    (data: { text: string; files: File[] }) => {
-      const currentSelection = selectionRef.current;
-      if (!currentSelection) return;
-
-      const currentRowKeyToIndex = rowKeyToIndexRef.current;
-      const currentOrderedRowKeys = orderedRowKeysRef.current;
-      const currentRowDataMap = rowDataMapRef.current;
-      const currentColumns = finalColumnsRef.current;
-      const currentOnCellPaste = onCellPasteRef.current;
-      const currentOnFilePaste = onFilePasteRef.current;
-      const currentIsPasteableFile = isPasteableFileRef.current;
-      const currentOnRowsChange = onRowsChangeRef.current;
-
-      // For now, only paste into single active cell
-      const activeRowIndex = currentRowKeyToIndex.get(currentSelection.focus.rowKey);
-      if (activeRowIndex === undefined) return;
-
-      const activeColumn = currentSelection.focus.column;
-      const column = currentColumns[activeColumn];
-      if (!column) return;
-
-      const rowKey = currentOrderedRowKeys[activeRowIndex];
-      const row = currentRowDataMap.get(rowKey);
-      if (!row) return;
-
-      // Check if cell is editable
-      const editable = column.isCellEditable?.(row, column.key) ?? true;
-      if (!editable) return;
-
-      // Handle pasted files (if onFilePaste is provided). `isPasteableFile`
-      // narrows the set — records page restricts to image MIME types via
-      // `isImageMimeType`; default accepts everything.
-      if (currentOnFilePaste && data.files.length > 0) {
-        const accept = currentIsPasteableFile ?? (() => true);
-        const acceptedFiles = Array.from(data.files).filter(accept);
-        if (acceptedFiles.length > 0) {
-          currentOnFilePaste({
-            row,
-            columnKey: column.key,
-            files: acceptedFiles,
-          });
-          return;
-        }
-      }
-
-      // Handle text paste
-      const pastedText = data.text;
-      if (!pastedText) return;
-
-      // Parse the value
-      let newValue: unknown;
-      if (currentOnCellPaste) {
-        newValue = currentOnCellPaste({
-          row,
-          columnKey: column.key,
-          pastedText,
-        });
-        // If callback returns undefined, skip the paste
-        if (newValue === undefined) return;
-      } else {
-        // Default: use raw string
-        newValue = pastedText;
-      }
-
-      // Update the cell
-      if (!currentOnRowsChange) return;
-
-      const rowIndex = rowIdToDataIndexRef.current.get(rowIdGetter(row));
-      if (rowIndex === undefined) return;
-
-      const updatedRow = { ...row, [column.key]: newValue } as TRow;
-      const allRows = Array.from(currentRowDataMap.values());
-      const newRows = [...allRows];
-      newRows[rowIndex] = updatedRow;
-      currentOnRowsChange(newRows, { indexes: [rowIndex] });
-    },
-    [rowIdGetter],
-  );
-
-  // Stable commit handler for RowCell (avoids inline closure in renderRowCell)
-  // Uses the provided rowKey to identify the correct row, rather than reading
-  // selectionRef which may have already moved (e.g. click-to-blur on another cell).
-  const handleCommit = useCallback(
-    (nextValue: unknown, columnKey: string, rowKey: RowPathKey) => {
-      const row = rowDataMapRef.current.get(rowKey);
-      if (!row) return;
-      handleCellCommit(row, columnKey, nextValue);
-      setEditingCell(null);
-      focusContainer();
-    },
-    [handleCellCommit, focusContainer],
-  );
-
-  // Check if the active cell can be edited
-  const canEditActiveCell = useCallback((): boolean => {
-    const sel = selectionRef.current;
-    if (!sel) return false;
-    const column = finalColumnsRef.current[sel.focus.column];
-    if (!column?.renderEditCell) return false;
-    const row = rowDataMapRef.current.get(sel.focus.rowKey);
-    if (!row) return false;
-    return column.isCellEditable?.(row, column.key) ?? true;
-  }, []);
-
-  // Activate an inline-editable cell (e.g., toggle boolean) without opening an editor
-  const handleActivateCell = useCallback(() => {
-    const sel = selectionRef.current;
-    if (!sel) return;
-    const column = finalColumnsRef.current[sel.focus.column];
-    if (!column?.onActivate) return;
-    const row = rowDataMapRef.current.get(sel.focus.rowKey);
-    if (!row) return;
-    const editable = column.isCellEditable?.(row, column.key) ?? true;
-    if (!editable) return;
-    const nextValue = column.onActivate(row, column.key);
-    handleCellCommit(row, column.key, nextValue);
-  }, [handleCellCommit]);
-
-  // Container-level keyboard handler (replaces per-cell handleKeyDown)
-  const handleContainerKeyDown = useCallback(
-    (event: React.KeyboardEvent) => {
-      // Don't intercept keys while editing — let editor handle them
-      if (editingCellRef.current) return;
-
-      const sel = selectionRef.current;
-
-      // Escape: clear selection
-      if (event.key === "Escape") {
-        event.preventDefault();
-        setSelection(null);
-        return;
-      }
-
-      // Ctrl/Cmd+A: select all
-      if ((event.ctrlKey || event.metaKey) && event.key === "a") {
-        event.preventDefault();
-        handleSelectAll();
-        return;
-      }
-
-      // Ctrl/Cmd+C: copy
-      if ((event.ctrlKey || event.metaKey) && event.key === "c") {
-        event.preventDefault();
-        handleCopySelection();
-        return;
-      }
-
-      // Ctrl/Cmd+X: cut
-      if ((event.ctrlKey || event.metaKey) && event.key === "x") {
-        event.preventDefault();
-        handleCutSelection();
-        return;
-      }
-
-      // NOTE: Ctrl/Cmd+V paste is handled by the native onPaste event handler
-
-      // Enter / F2: start editing, or activate inline-editable cells (e.g., boolean toggle)
-      if (event.key === "Enter" || event.key === "F2") {
-        event.preventDefault();
-        if (sel) {
-          if (canEditActiveCell()) {
-            handleStartEditing(sel.focus.rowKey, sel.focus.column);
-          } else {
-            handleActivateCell();
-          }
-        }
-        return;
-      }
-
-      // Space: activate inline-editable cells (e.g., toggle checkbox)
-      if (event.key === " ") {
-        event.preventDefault();
-        handleActivateCell();
-        return;
-      }
-
-      // Tab / Shift+Tab: navigate
-      if (event.key === "Tab") {
-        event.preventDefault();
-        handleNavigate(event.shiftKey ? "left" : "right", false);
-        return;
-      }
-
-      // Delete: clear cell
-      if (event.key === "Delete") {
-        event.preventDefault();
-        handleClearCell();
-        return;
-      }
-
-      // Backspace: start editing (clears then edits)
-      if (event.key === "Backspace") {
-        event.preventDefault();
-        if (sel && canEditActiveCell()) {
-          handleStartEditing(sel.focus.rowKey, sel.focus.column);
-        }
-        return;
-      }
-
-      // Printable character: start editing
-      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-        if (sel && canEditActiveCell()) {
-          handleStartEditing(sel.focus.rowKey, sel.focus.column);
-        }
-        return;
-      }
-
-      // Arrow key navigation
-      const direction = ARROW_KEY_TO_DIRECTION[event.key];
-      if (direction) {
-        event.preventDefault();
-        handleNavigate(direction, event.shiftKey);
-      }
-    },
-    [
-      handleSelectAll,
-      handleCopySelection,
-      handleCutSelection,
-      handleStartEditing,
-      handleNavigate,
-      handleClearCell,
-      canEditActiveCell,
-      handleActivateCell,
-    ],
-  );
-
-  // Container-level paste handler (replaces per-cell handlePaste)
-  const handleContainerPaste = useCallback(
-    (event: React.ClipboardEvent) => {
-      // Don't intercept paste while editing — let the editor handle it natively
-      if (editingCellRef.current) return;
-
-      event.preventDefault();
-      const text = event.clipboardData.getData("text/plain");
-      const files = Array.from(event.clipboardData.files);
-      handlePasteSelection({ text, files });
-    },
-    [handlePasteSelection],
-  );
-
-  // Local state for column widths - allows immediate visual feedback during resize
-  const [localColumnWidths, setLocalColumnWidths] = useState<Map<string, number>>(() => new Map());
-
-  // Compute column widths: use local override if present, otherwise from props
-  const columnWidths = useMemo(() => {
-    return finalColumns.map((col) => {
-      const localWidth = localColumnWidths.get(col.key);
-      return localWidth ?? col.width ?? 150;
-    });
-  }, [finalColumns, localColumnWidths]);
-
-  useImperativeHandle(ref, () => {
-    return {
-      selectCell: (params: { rowPathKey: RowPathKey; columnKey: string }) => {
-        const { rowPathKey, columnKey } = params;
-
-        // Find column index
-        const columnIndex = finalColumns.findIndex((col) => col.key === columnKey);
-        if (columnIndex === -1) return;
-
-        // Set selection to the cell
-        setSelection({
-          anchor: { rowKey: rowPathKey, column: columnIndex },
-          focus: { rowKey: rowPathKey, column: columnIndex },
-        });
-
-        // Scroll to the cell
-        gridRef.current?.scrollToCell({
-          rowPath: keyToRowPath(rowPathKey),
-          column: columnIndex,
-        });
-        focusContainer();
-      },
-      selectCells: (cells: SelectedCellData[]) => {
-        if (cells.length === 0) {
-          setSelection(null);
-          return;
-        }
-
-        // Build rowId → rowKey reverse lookup
-        const rowIdToKey = new Map<string, RowPathKey>();
-        for (const [key, row] of rowDataMapRef.current.entries()) {
-          rowIdToKey.set(rowIdGetter(row), key);
-        }
-
-        // Find bounding range
-        let minRowIdx = Infinity;
-        let maxRowIdx = -Infinity;
-        let minCol = Infinity;
-        let maxCol = -Infinity;
-
-        for (const cell of cells) {
-          const rowKey = rowIdToKey.get(cell.rowId);
-          if (!rowKey) continue;
-          const rowIdx = rowKeyToIndexRef.current.get(rowKey);
-          if (rowIdx === undefined) continue;
-          const colIdx = finalColumns.findIndex((col) => col.key === cell.columnKey);
-          if (colIdx === -1) continue;
-
-          minRowIdx = Math.min(minRowIdx, rowIdx);
-          maxRowIdx = Math.max(maxRowIdx, rowIdx);
-          minCol = Math.min(minCol, colIdx);
-          maxCol = Math.max(maxCol, colIdx);
-        }
-
-        if (minRowIdx === Infinity) return;
-
-        const anchorRowKey = orderedRowKeysRef.current[minRowIdx];
-        const focusRowKey = orderedRowKeysRef.current[maxRowIdx];
-        if (!anchorRowKey || !focusRowKey) return;
-
-        setSelection({
-          anchor: { rowKey: anchorRowKey, column: minCol },
-          focus: { rowKey: focusRowKey, column: maxCol },
-        });
-        focusContainer();
-      },
-      clearSelection: () => {
-        setSelection(null);
-      },
-    } as DataGridHandle;
-  }, [finalColumns, focusContainer, rowIdGetter]);
-
-  // Declarative scroll target: when set, scroll to the row once the grid's
-  // layout includes it. useLayoutEffect fires after Grid's useImperativeHandle
-  // (child layout effects run first), so gridRef.current has the current layout.
-  useLayoutEffect(() => {
-    if (!scrollTarget || !gridRef.current) return;
-    const { rowPathKey, columnKey, revealId } = scrollTarget;
-
-    // Wait until the row is in our data before scrolling
-    if (!rowKeyToIndex.has(rowPathKey)) return;
-
-    const columnIndex = finalColumns.findIndex((col) => col.key === columnKey);
-    if (columnIndex === -1) return;
-    setSelection({
-      anchor: { rowKey: rowPathKey, column: columnIndex },
-      focus: { rowKey: rowPathKey, column: columnIndex },
-    });
-    gridRef.current.scrollToCell({
-      rowPath: keyToRowPath(rowPathKey),
-      column: columnIndex,
-    });
-    focusContainer();
-    onScrollTargetReached?.(revealId);
-  }, [scrollTarget, rowKeyToIndex, finalColumns, focusContainer, onScrollTargetReached]);
-
-  const isGroupCollapsed = useCallback(
-    (groupPathKey: GroupPathKey) => {
-      if (!collapsedGroups || collapsedGroups.length === 0) {
-        return false;
-      }
-
-      return collapsedGroups.includes(groupPathKey);
-    },
-    [collapsedGroups],
-  );
-
-  const toggleGroupCollapse = useCallback(
-    (groupPathKey: GroupPathKey) => {
-      if (!onCollapsedGroupsChange) {
-        return;
-      }
-
-      const currentCollapsed = collapsedGroups ?? [];
-      const isCollapsed = currentCollapsed.includes(groupPathKey);
-
-      if (isCollapsed) {
-        onCollapsedGroupsChange(currentCollapsed.filter((key) => key !== groupPathKey));
-      } else {
-        onCollapsedGroupsChange([...currentCollapsed, groupPathKey]);
-      }
-    },
-    [collapsedGroups, onCollapsedGroupsChange],
-  );
-
-  const renderRowCell = useCallback(
-    (params: GridRenderRowCellProps<TRow>) => {
-      const {
-        rowKey,
-        frozen,
-        inSelectedRow,
-        row,
-        active,
-        selected,
-        editing,
-        rowIndex,
-        inFillRange,
-        rowBackgroundColor,
-      } = params;
-      const column = finalColumns[params.column];
-      const rowId = rowIdGetter(row);
-
-      return (
-        <RowCell
-          rowKey={rowKey}
-          rowId={rowId}
-          row={row}
-          column={column}
-          frozen={frozen}
-          inSelectedRow={inSelectedRow}
-          columnIdx={params.column}
-          editing={editing}
-          value={row[column.key] as unknown}
-          active={active}
-          selected={selected}
-          rowIndex={rowIndex}
-          inFillRange={inFillRange}
-          rowBackgroundColor={rowBackgroundColor}
-          onStartEditing={handleStartEditing}
-          onSelectStart={handleSelectStart}
-          onSelectUpdate={handleSelectUpdate}
-          onCommit={handleCommit}
-          onFillStart={handleFillStart}
-          onCancelEditing={handleCancelEditing}
-          onNavigate={handleNavigate}
-          onRequestLockedFieldChange={onRequestLockedFieldChange}
-        />
-      );
-    },
-    [
-      finalColumns,
-      handleCommit,
-      handleSelectStart,
-      handleSelectUpdate,
-      handleStartEditing,
-      handleFillStart,
-      handleCancelEditing,
-      handleNavigate,
-      onRequestLockedFieldChange,
-      rowIdGetter,
-    ],
-  );
-
-  // Start column resize drag
-  const handleResizeStart = useCallback((columnKey: string, startX: number, startWidth: number) => {
-    setResizeDrag({ columnKey, startX, startWidth });
-  }, []);
-
-  // Global listeners for column resize - managed at DataGrid level
-  useEffect(() => {
-    if (!resizeDrag) return;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const delta = e.clientX - resizeDrag.startX;
-      const newWidth = Math.max(50, resizeDrag.startWidth + delta);
-      // Update local state for immediate visual feedback
-      setLocalColumnWidths((prev) => {
-        const next = new Map(prev);
-        next.set(resizeDrag.columnKey, newWidth);
-        return next;
-      });
-    };
-
-    const handleMouseUp = (e: MouseEvent) => {
-      // Calculate final width and notify parent to persist
-      const delta = e.clientX - resizeDrag.startX;
-      const newWidth = Math.max(50, resizeDrag.startWidth + delta);
-      onColumnResizeRef.current?.(resizeDrag.columnKey, newWidth);
-      // Keep local override - it stays until parent props update or next resize
-      setResizeDrag(null);
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [resizeDrag]);
-
-  // Column reorder handlers
-  const handleReorderStart = useCallback((columnKey: string) => {
-    setReorderDrag({ columnKey, targetColumnKey: null });
-  }, []);
-
-  const handleReorderUpdate = useCallback((targetColumnKey: string | null) => {
-    setReorderDrag((prev) => {
-      if (!prev) return null;
-      if (prev.targetColumnKey === targetColumnKey) return prev;
-      return { ...prev, targetColumnKey };
-    });
-  }, []);
-
-  const handleReorderEnd = useCallback(() => {
-    if (reorderDrag && reorderDrag.targetColumnKey !== null) {
-      // Don't reorder to same position
-      if (reorderDrag.columnKey !== reorderDrag.targetColumnKey) {
-        onColumnReorderRef.current?.(reorderDrag.columnKey, reorderDrag.targetColumnKey);
-      }
-    }
-    setReorderDrag(null);
-  }, [reorderDrag]);
-
-  const handleReorderCancel = useCallback(() => {
-    setReorderDrag(null);
-  }, []);
-
-  // Global listeners for column reorder - managed at DataGrid level
-  useEffect(() => {
-    if (!reorderDrag) return;
-
-    const handleDragEnd = () => {
-      handleReorderEnd();
-    };
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        handleReorderCancel();
-      }
-    };
-
-    document.addEventListener("dragend", handleDragEnd);
-    document.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      document.removeEventListener("dragend", handleDragEnd);
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [reorderDrag, handleReorderEnd, handleReorderCancel]);
-
-  const renderHeaderCell = useCallback(
-    (params: GridRenderHeaderCellProps) => {
-      const column = finalColumns[params.column];
-      const columnIndex = params.column;
-      const isDragging = reorderDrag?.columnKey === column.key;
-      const isDropTarget = reorderDrag?.targetColumnKey === column.key;
-      const canReorder = enableReordering && onColumnReorderRef.current !== undefined;
-      const canResize = enableResizing && onColumnResizeRef.current !== undefined;
-
-      return (
-        <HeaderCellWrapper
-          columnKey={column.key}
-          width={params.width}
-          onResizeStart={canResize ? handleResizeStart : undefined}
-          onReorderStart={canReorder ? handleReorderStart : undefined}
-          onReorderUpdate={canReorder ? handleReorderUpdate : undefined}
-          isDragging={isDragging}
-          isDropTarget={isDropTarget}
-        >
-          {column.renderHeaderCell?.({
-            columnKey: column.key,
-            onResize: canResize
-              ? (width: number) => onColumnResizeRef.current?.(column.key, width)
-              : undefined,
-            onSelectColumn: () => handleSelectColumn(columnIndex),
-          })}
-        </HeaderCellWrapper>
-      );
-    },
-    [
-      finalColumns,
-      handleResizeStart,
-      handleReorderStart,
-      handleReorderUpdate,
-      handleSelectColumn,
-      reorderDrag,
-      enableReordering,
-      enableResizing,
-    ],
-  );
-
-  const renderGroupSummaryCell = useCallback(
-    (params: GridRenderGroupSummaryCellProps) => {
-      const groupPathKey = params.groupKey;
-
-      const column = finalColumns[params.column];
-
-      const groupRows = descendantCacheRef.current.get(groupPathKey)?.rows ?? [];
-
-      return column.renderSummaryCell?.({
-        groupKey: groupPathKey,
-        rows: groupRows,
-        columnKey: column.key,
-      });
-    },
-    [finalColumns],
-  );
-
-  const renderFooterCell = useCallback(
-    (params: GridRenderFooterCellProps) => {
-      const column = finalColumns[params.column];
-      if (column.key === "select") {
-        return null;
-      }
-
-      return column.renderSummaryCell?.({
-        groupKey: "footer",
-        rows: Array.from(rowDataMap.values()),
-        columnKey: column.key,
-      });
-    },
-    [finalColumns, rowDataMap],
-  );
-
-  const renderGroupHeading = useCallback(
-    (params: GridRenderGroupHeadingProps) => {
-      const groupPathKey = params.groupKey;
-      const groupData = groupDataMap.get(groupPathKey)!;
-
-      const collapsed = isGroupCollapsed(groupPathKey);
-      const column = finalColumns.find((col) => col.key === groupData.columnKey);
-
-      let groupHeadingContent: React.ReactNode;
-      if (column?.renderGroupHeading) {
-        groupHeadingContent = column.renderGroupHeading({
-          value: groupData.value,
-          columnKey: groupData.columnKey,
-          level: groupData.level,
-        });
-      } else {
-        groupHeadingContent = String(groupData.value ?? "");
-      }
-
-      return (
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-            height: "100%",
-            paddingLeft: 6,
-            paddingRight: 6,
-            gap: 4,
-          }}
-        >
-          <IconButton
-            icon={collapsed ? "chevron-right" : "chevron-down"}
-            tooltip={collapsed ? expandGroupLabel : collapseGroupLabel}
-            onPress={() => toggleGroupCollapse(groupPathKey)}
-          />
-          {groupHeadingContent}
-        </div>
-      );
-    },
-    [finalColumns, groupDataMap, isGroupCollapsed, expandGroupLabel, collapseGroupLabel, toggleGroupCollapse],
-  );
-
-  const renderFooter = useCallback(
-    ({ children }: GridRenderFooterProps) => (
-      <View
-        style={{
-          height: "100%",
-          width: "100%",
-          backgroundColor: colors.background,
-          borderTopWidth: 1,
-          borderStyle: "solid",
-          borderColor: colors.border,
-          flexDirection: "row",
-        }}
-      >
-        {children}
-      </View>
-    ),
-    [],
-  );
-
-  const renderGroupSummaryRow = useCallback(
-    ({ children }: GridRenderGroupSummaryRowProps) => (
-      <View
-        style={{
-          backgroundColor: colors.background,
-          flexDirection: "row",
-          width: "100%",
-          height: "100%",
-          borderTopWidth: 1,
-          borderBottomWidth: 1,
-          borderStyle: "solid",
-          borderColor: colors.border,
-        }}
-      >
-        {children}
-      </View>
-    ),
-    [],
-  );
-
-  const renderRow = useCallback(({ children }: GridRenderRowProps<TRow>) => <>{children}</>, []);
-
-  const renderHeader = useCallback(({ children }: GridRenderHeaderProps) => <>{children}</>, []);
-
-  const rowSelectionContextValue = useMemo<RowSelectionContextValue>(
-    () => ({
-      selectedRows,
-      onSelectedRowsChange,
-      allRowPathKeys,
-    }),
-    [selectedRows, onSelectedRowsChange, allRowPathKeys],
-  );
-
-  return (
-    <AutoSizer>
-      {({ width, height }) => {
-        // Compute actual max frozen width: if value is between 0-1, treat as ratio
-        const computedMaxFrozenColumnsWidth =
-          maxFrozenColumnsWidth !== undefined
-            ? maxFrozenColumnsWidth > 0 && maxFrozenColumnsWidth <= 1
-              ? Math.floor(width * maxFrozenColumnsWidth)
-              : maxFrozenColumnsWidth
-            : undefined;
-
-        return (
-          <div
-            ref={containerRef}
-            role="grid"
-            aria-rowcount={orderedRowKeys.length}
-            aria-colcount={columnCount - (hasSelectColumn ? 1 : 0)}
-            aria-multiselectable
-            tabIndex={editingCell ? -1 : 0}
-            onKeyDown={handleContainerKeyDown}
-            onPaste={handleContainerPaste}
-            style={{ outline: "none", width, height }}
-          >
-            <RowSelectionContext.Provider value={rowSelectionContextValue}>
-              <CellAnimationContext.Provider value={useCellAnimation ?? noopUseCellAnimation}>
-              <Grid<TRow>
-                selectedRows={selectedRows}
-                ref={gridRef}
-                style={styles.grid}
-                height={height}
-                width={width}
-                columns={columnWidths}
-                frozenColumnCount={frozenColumnCount + (hasSelectColumn ? 1 : 0)}
-                maxFrozenColumnsWidth={computedMaxFrozenColumnsWidth}
-                groups={gridGroups}
-                rowData={rowDataMap}
-                rowKeyToIndex={rowKeyToIndex}
-                editingCell={editingCell}
-                selectionMinRowIndex={selectionBounds?.minRowIndex ?? null}
-                selectionMaxRowIndex={selectionBounds?.maxRowIndex ?? null}
-                selectionMinColumn={selectionBounds?.minColumn ?? null}
-                selectionMaxColumn={selectionBounds?.maxColumn ?? null}
-                selectionActiveRowIndex={selectionBounds?.activeRowIndex ?? null}
-                selectionActiveColumn={selectionBounds?.activeColumn ?? null}
-                fillSourceRowIndex={fillDrag?.sourceRowIndex ?? null}
-                fillTargetRowIndex={fillDrag?.targetRowIndex ?? null}
-                fillColumn={fillDrag?.column ?? null}
-                rowBackgroundColorGetter={rowColorGetter}
-                collapsedRows={collapsedGroups}
-                leafRowHeight={rowHeight}
-                groupHeadingHeight={groupHeadingHeight}
-                groupSummaryHeight={groupSummaryHeight}
-                headerHeight={48}
-                spacerHeight={spacerHeight}
-                renderRowCell={renderRowCell}
-                renderHeaderCell={renderHeaderCell}
-                renderGroupHeading={renderGroupHeading}
-                renderGroupSummaryCell={renderGroupSummaryCell}
-                renderGroupSummaryRow={renderGroupSummaryRow}
-                renderRow={renderRow}
-                renderHeader={renderHeader}
-                footerHeight={hasAnySummaryCell ? groupSummaryHeight : 0}
-                renderFooterCell={hasAnySummaryCell ? renderFooterCell : undefined}
-                renderFooter={hasAnySummaryCell ? renderFooter : undefined}
-                onEndReached={onEndReached}
-                onVisibleRangeChange={onVisibleRangeChange}
-              />
-              </CellAnimationContext.Provider>
-            </RowSelectionContext.Provider>
-          </div>
-        );
-      }}
-    </AutoSizer>
-  );
-}
-
-interface HeaderCellWrapperProps {
-  columnKey: string;
-  width: number;
-  onResizeStart?: (columnKey: string, startX: number, startWidth: number) => void;
-  onReorderStart?: (columnKey: string) => void;
-  onReorderUpdate?: (targetColumnKey: string | null) => void;
-  isDragging?: boolean;
-  isDropTarget?: boolean;
-  children: React.ReactNode;
-}
-
-function HeaderCellWrapper(props: HeaderCellWrapperProps) {
-  const {
-    columnKey,
-    width,
-    onResizeStart,
-    onReorderStart,
-    onReorderUpdate,
-    isDragging,
-    isDropTarget,
-    children,
-  } = props;
-
-  const handleResizeMouseDown = useCallback(
-    (event: React.MouseEvent) => {
-      if (!onResizeStart) return;
-      event.preventDefault();
-      event.stopPropagation();
-      onResizeStart(columnKey, event.clientX, width);
-    },
-    [columnKey, width, onResizeStart],
-  );
-
-  const handleDragStart = useCallback(
-    (event: React.DragEvent) => {
-      if (!onReorderStart) return;
-      event.dataTransfer.effectAllowed = "move";
-      event.dataTransfer.setData("text/plain", columnKey);
-      onReorderStart(columnKey);
-    },
-    [columnKey, onReorderStart],
-  );
-
-  const handleDragOver = useCallback(
-    (event: React.DragEvent) => {
-      if (!onReorderUpdate) return;
-      event.preventDefault();
-      event.dataTransfer.dropEffect = "move";
-      onReorderUpdate(columnKey);
-    },
-    [columnKey, onReorderUpdate],
-  );
-
-  const handleDragLeave = useCallback(() => {
-    // Don't clear target here - let the next dragOver or dragEnd handle it
-  }, []);
-
-  return (
-    <View
-      style={{
-        backgroundColor: colors.zinc["50"],
-        width: "100%",
-        height: "100%",
-        borderLeftWidth: isDropTarget ? 2 : 0,
-        borderLeftColor: colors.blue["500"],
-        position: "relative",
-        opacity: isDragging ? 0.5 : 1,
-      }}
-    >
-      {/* Draggable area */}
-      <div
-        draggable={!!onReorderStart}
-        onDragStart={handleDragStart}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        style={{
-          width: "100%",
-          height: "100%",
-          cursor: onReorderStart ? "grab" : "default",
-        }}
-      >
-        {children}
-      </div>
-      {/* Resize handle */}
-      {onResizeStart && (
-        <div
-          onMouseDown={handleResizeMouseDown}
-          style={{
-            position: "absolute",
-            right: 0,
-            top: 0,
-            bottom: 0,
-            width: 6,
-            cursor: "col-resize",
-            backgroundColor: "transparent",
-            zIndex: 1,
-          }}
-          onMouseEnter={(e) => {
-            (e.target as HTMLDivElement).style.backgroundColor = colors.blue["200"];
-          }}
-          onMouseLeave={(e) => {
-            (e.target as HTMLDivElement).style.backgroundColor = "transparent";
-          }}
-        />
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  grid: {
-    backgroundColor: colors.background,
-    borderTopRightRadius: 8,
-    borderTopLeftRadius: 8,
-    borderWidth: 0,
-  },
-});