gp-grid-react 0.1.0

package/src/Grid.tsx

@@ -0,0 +1,1220 @@
+// packages/react/src/Grid.tsx
+
+import React, {
+  useEffect,
+  useRef,
+  useReducer,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
+import {
+  GridCore,
+  createClientDataSource,
+  createDataSourceFromArray,
+} from "gp-grid-core";
+import type {
+  GridInstruction,
+  ColumnDefinition,
+  DataSource,
+  Row,
+  CellRendererParams,
+  EditRendererParams,
+  HeaderRendererParams,
+  CellPosition,
+  CellRange,
+  CellValue,
+  SortDirection,
+} from "gp-grid-core";
+import { injectStyles } from "./styles";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type ReactCellRenderer = (params: CellRendererParams) => React.ReactNode;
+export type ReactEditRenderer = (params: EditRendererParams) => React.ReactNode;
+export type ReactHeaderRenderer = (params: HeaderRendererParams) => React.ReactNode;
+
+export interface GridProps<TData extends Row = Row> {
+  columns: ColumnDefinition[];
+  /** Data source for the grid */
+  dataSource?: DataSource<TData>;
+  /** Legacy: Raw row data (will be wrapped in a client data source) */
+  rowData?: TData[];
+  rowHeight: number;
+  headerHeight?: number;
+  overscan?: number;
+  /** Show filter row below headers */
+  showFilters?: boolean;
+  /** Debounce time for filter input (ms) */
+  filterDebounce?: number;
+  /** Enable dark mode styling */
+  darkMode?: boolean;
+
+  // Renderer registries
+  cellRenderers?: Record<string, ReactCellRenderer>;
+  editRenderers?: Record<string, ReactEditRenderer>;
+  headerRenderers?: Record<string, ReactHeaderRenderer>;
+
+  // Global fallback renderers
+  cellRenderer?: ReactCellRenderer;
+  editRenderer?: ReactEditRenderer;
+  headerRenderer?: ReactHeaderRenderer;
+}
+
+// =============================================================================
+// State Types
+// =============================================================================
+
+interface SlotData {
+  slotId: string;
+  rowIndex: number;
+  rowData: Row;
+  translateY: number;
+}
+
+interface GridState {
+  slots: Map<string, SlotData>;
+  activeCell: CellPosition | null;
+  selectionRange: CellRange | null;
+  editingCell: { row: number; col: number; initialValue: CellValue } | null;
+  contentWidth: number;
+  contentHeight: number;
+  headers: Map<number, { column: ColumnDefinition; sortDirection?: SortDirection; sortIndex?: number }>;
+  isLoading: boolean;
+  error: string | null;
+  totalRows: number;
+}
+
+type GridAction =
+  | { type: "BATCH_INSTRUCTIONS"; instructions: GridInstruction[] }
+  | { type: "RESET" };
+
+// =============================================================================
+// Reducer
+// =============================================================================
+
+/**
+ * Apply a single instruction to mutable slot maps and return other state changes.
+ * This allows batching multiple slot operations efficiently.
+ */
+function applyInstruction(
+  instruction: GridInstruction,
+  slots: Map<string, SlotData>,
+  headers: Map<number, { column: ColumnDefinition; sortDirection?: SortDirection; sortIndex?: number }>
+): Partial<GridState> | null {
+  switch (instruction.type) {
+    case "CREATE_SLOT":
+      slots.set(instruction.slotId, {
+        slotId: instruction.slotId,
+        rowIndex: -1,
+        rowData: {},
+        translateY: 0,
+      });
+      return null; // Slots map is mutated
+
+    case "DESTROY_SLOT":
+      slots.delete(instruction.slotId);
+      return null;
+
+    case "ASSIGN_SLOT": {
+      const existing = slots.get(instruction.slotId);
+      if (existing) {
+        slots.set(instruction.slotId, {
+          ...existing,
+          rowIndex: instruction.rowIndex,
+          rowData: instruction.rowData,
+        });
+      }
+      return null;
+    }
+
+    case "MOVE_SLOT": {
+      const existing = slots.get(instruction.slotId);
+      if (existing) {
+        slots.set(instruction.slotId, {
+          ...existing,
+          translateY: instruction.translateY,
+        });
+      }
+      return null;
+    }
+
+    case "SET_ACTIVE_CELL":
+      return { activeCell: instruction.position };
+
+    case "SET_SELECTION_RANGE":
+      return { selectionRange: instruction.range };
+
+    case "START_EDIT":
+      return {
+        editingCell: {
+          row: instruction.row,
+          col: instruction.col,
+          initialValue: instruction.initialValue,
+        },
+      };
+
+    case "STOP_EDIT":
+      return { editingCell: null };
+
+    case "SET_CONTENT_SIZE":
+      return {
+        contentWidth: instruction.width,
+        contentHeight: instruction.height,
+      };
+
+    case "UPDATE_HEADER":
+      headers.set(instruction.colIndex, {
+        column: instruction.column,
+        sortDirection: instruction.sortDirection,
+        sortIndex: instruction.sortIndex,
+      });
+      return null;
+
+    case "DATA_LOADING":
+      return { isLoading: true, error: null };
+
+    case "DATA_LOADED":
+      return { isLoading: false, totalRows: instruction.totalRows };
+
+    case "DATA_ERROR":
+      return { isLoading: false, error: instruction.error };
+
+    default:
+      return null;
+  }
+}
+
+function gridReducer(state: GridState, action: GridAction): GridState {
+  if (action.type === "RESET") {
+    return createInitialState();
+  }
+
+  // Process batch of instructions in one state update
+  const { instructions } = action;
+  // console.log("[GP-Grid Reducer] Processing batch:", instructions.map(i => i.type));
+  if (instructions.length === 0) {
+    return state;
+  }
+
+  // Create mutable copies of Maps to batch updates
+  const newSlots = new Map(state.slots);
+  const newHeaders = new Map(state.headers);
+  let stateChanges: Partial<GridState> = {};
+
+  // Apply all instructions
+  for (const instruction of instructions) {
+    const changes = applyInstruction(instruction, newSlots, newHeaders);
+    if (changes) {
+      stateChanges = { ...stateChanges, ...changes };
+    }
+  }
+
+  // Return new state with all changes applied
+  return {
+    ...state,
+    ...stateChanges,
+    slots: newSlots,
+    headers: newHeaders,
+  };
+}
+
+function createInitialState(): GridState {
+  return {
+    slots: new Map(),
+    activeCell: null,
+    selectionRange: null,
+    editingCell: null,
+    contentWidth: 0,
+    contentHeight: 0,
+    headers: new Map(),
+    isLoading: false,
+    error: null,
+    totalRows: 0,
+  };
+}
+
+// =============================================================================
+// Grid Component
+// =============================================================================
+
+export function Grid<TData extends Row = Row>(props: GridProps<TData>) {
+  // Inject styles on first render (safe to call multiple times)
+  injectStyles();
+
+  const {
+    columns,
+    dataSource: providedDataSource,
+    rowData,
+    rowHeight,
+    headerHeight = rowHeight,
+    overscan = 3,
+    showFilters = false,
+    filterDebounce = 300,
+    darkMode = false,
+    cellRenderers = {},
+    editRenderers = {},
+    headerRenderers = {},
+    cellRenderer,
+    editRenderer,
+    headerRenderer,
+  } = props;
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const coreRef = useRef<GridCore<TData> | null>(null);
+  const [state, dispatch] = useReducer(gridReducer, null, createInitialState);
+  const [filterValues, setFilterValues] = useState<Record<string, string>>({});
+  const filterTimeoutRef = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
+  const [isDraggingFill, setIsDraggingFill] = useState(false);
+  const [fillTarget, setFillTarget] = useState<{ row: number; col: number } | null>(null);
+  const [fillSourceRange, setFillSourceRange] = useState<{ startRow: number; startCol: number; endRow: number; endCol: number } | null>(null);
+  const autoScrollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // Computed heights
+  const filterRowHeight = showFilters ? 40 : 0;
+  const totalHeaderHeight = headerHeight + filterRowHeight;
+
+  // Create data source from rowData if not provided
+  const dataSource = useMemo(() => {
+    if (providedDataSource) {
+      return providedDataSource;
+    }
+    if (rowData) {
+      return createDataSourceFromArray(rowData);
+    }
+    // Empty data source
+    return createClientDataSource<TData>([]);
+  }, [providedDataSource, rowData]);
+
+  // Compute column positions
+  const columnPositions = useMemo(() => {
+    const positions = [0];
+    let pos = 0;
+    for (const col of columns) {
+      pos += col.width;
+      positions.push(pos);
+    }
+    return positions;
+  }, [columns]);
+
+  const totalWidth = columnPositions[columnPositions.length - 1] ?? 0;
+
+  // Initialize GridCore
+  useEffect(() => {
+    const core = new GridCore<TData>({
+      columns,
+      dataSource,
+      rowHeight,
+      headerHeight: totalHeaderHeight,
+      overscan,
+    });
+
+    coreRef.current = core;
+
+    // Subscribe to batched instructions for efficient state updates
+    const unsubscribe = core.onBatchInstruction((instructions) => {
+      dispatch({ type: "BATCH_INSTRUCTIONS", instructions });
+    });
+
+    // Initialize
+    core.initialize();
+
+    return () => {
+      unsubscribe();
+      coreRef.current = null;
+    };
+  }, [columns, dataSource, rowHeight, totalHeaderHeight, overscan]);
+
+  // Handle scroll
+  const handleScroll = useCallback(() => {
+    const container = containerRef.current;
+    const core = coreRef.current;
+    if (!container || !core) return;
+
+    core.setViewport(
+      container.scrollTop,
+      container.scrollLeft,
+      container.clientWidth,
+      container.clientHeight
+    );
+  }, []);
+
+  // Initial measurement
+  useEffect(() => {
+    const container = containerRef.current;
+    const core = coreRef.current;
+    if (!container || !core) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      core.setViewport(
+        container.scrollTop,
+        container.scrollLeft,
+        container.clientWidth,
+        container.clientHeight
+      );
+    });
+
+    resizeObserver.observe(container);
+    handleScroll();
+
+    return () => resizeObserver.disconnect();
+  }, [handleScroll]);
+
+  // Handle filter change with debounce
+  const handleFilterChange = useCallback(
+    (colId: string, value: string) => {
+      setFilterValues((prev) => ({ ...prev, [colId]: value }));
+
+      // Clear existing timeout
+      if (filterTimeoutRef.current[colId]) {
+        clearTimeout(filterTimeoutRef.current[colId]);
+      }
+
+      // Debounce the actual filter application
+      filterTimeoutRef.current[colId] = setTimeout(() => {
+        const core = coreRef.current;
+        if (core) {
+          core.setFilter(colId, value);
+        }
+      }, filterDebounce);
+    },
+    [filterDebounce]
+  );
+
+  // Keyboard navigation
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const core = coreRef.current;
+      if (!core) return;
+
+      // Don't handle keyboard events when editing
+      if (state.editingCell && e.key !== "Enter" && e.key !== "Escape" && e.key !== "Tab") {
+        return;
+      }
+
+      const { selection } = core;
+      const isShift = e.shiftKey;
+      const isCtrl = e.ctrlKey || e.metaKey;
+
+      switch (e.key) {
+        case "ArrowUp":
+          e.preventDefault();
+          selection.moveFocus("up", isShift);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          selection.moveFocus("down", isShift);
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          selection.moveFocus("left", isShift);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          selection.moveFocus("right", isShift);
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (state.editingCell) {
+            core.commitEdit();
+          } else if (state.activeCell) {
+            core.startEdit(state.activeCell.row, state.activeCell.col);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          if (state.editingCell) {
+            core.cancelEdit();
+          } else {
+            selection.clearSelection();
+          }
+          break;
+        case "Tab":
+          e.preventDefault();
+          if (state.editingCell) {
+            core.commitEdit();
+          }
+          selection.moveFocus(isShift ? "left" : "right", false);
+          break;
+        case "a":
+          if (isCtrl) {
+            e.preventDefault();
+            selection.selectAll();
+          }
+          break;
+        case "c":
+          if (isCtrl) {
+            e.preventDefault();
+            selection.copySelectionToClipboard();
+          }
+          break;
+        case "F2":
+          e.preventDefault();
+          if (state.activeCell && !state.editingCell) {
+            core.startEdit(state.activeCell.row, state.activeCell.col);
+          }
+          break;
+        case "Delete":
+        case "Backspace":
+          // Start editing with empty value on delete/backspace
+          if (state.activeCell && !state.editingCell) {
+            e.preventDefault();
+            core.startEdit(state.activeCell.row, state.activeCell.col);
+          }
+          break;
+        default:
+          // Start editing on any printable character
+          if (
+            state.activeCell &&
+            !state.editingCell &&
+            !isCtrl &&
+            e.key.length === 1
+          ) {
+            core.startEdit(state.activeCell.row, state.activeCell.col);
+          }
+          break;
+      }
+    },
+    [state.activeCell, state.editingCell]
+  );
+
+  // Scroll active cell into view when navigating with keyboard
+  useEffect(() => {
+    // Skip scrolling when editing - the user just clicked on the cell so it's already visible
+    if (!state.activeCell || !containerRef.current || state.editingCell) return;
+
+    const { row, col } = state.activeCell;
+    const container = containerRef.current;
+
+    // Calculate cell position
+    const cellTop = row * rowHeight + totalHeaderHeight;
+    const cellBottom = cellTop + rowHeight;
+    const cellLeft = columnPositions[col] ?? 0;
+    const cellRight = cellLeft + (columns[col]?.width ?? 0);
+
+    // Get visible area
+    const visibleTop = container.scrollTop + totalHeaderHeight;
+    const visibleBottom = container.scrollTop + container.clientHeight;
+    const visibleLeft = container.scrollLeft;
+    const visibleRight = container.scrollLeft + container.clientWidth;
+
+    // Scroll vertically if needed
+    if (cellTop < visibleTop) {
+      container.scrollTop = cellTop - totalHeaderHeight;
+    } else if (cellBottom > visibleBottom) {
+      container.scrollTop = cellBottom - container.clientHeight;
+    }
+
+    // Scroll horizontally if needed
+    if (cellLeft < visibleLeft) {
+      container.scrollLeft = cellLeft;
+    } else if (cellRight > visibleRight) {
+      container.scrollLeft = cellRight - container.clientWidth;
+    }
+  }, [state.activeCell, state.editingCell, rowHeight, totalHeaderHeight, columnPositions, columns]);
+
+  // Cell click handler
+  const handleCellClick = useCallback(
+    (rowIndex: number, colIndex: number, e: React.MouseEvent) => {
+      // console.log("[GP-Grid] Cell click:", { rowIndex, colIndex, coreExists: !!coreRef.current });
+      const core = coreRef.current;
+      if (!core || core.getEditState() !== null) {
+        // console.warn("[GP-Grid] Core not initialized on cell click");
+        return;
+      }
+
+      // Focus the container to enable keyboard navigation
+      containerRef.current?.focus();
+
+      core.selection.startSelection(
+        { row: rowIndex, col: colIndex },
+        { shift: e.shiftKey, ctrl: e.ctrlKey || e.metaKey }
+      );
+    },
+    []
+  );
+
+  // Cell double-click handler
+  const handleCellDoubleClick = useCallback(
+    (rowIndex: number, colIndex: number) => {
+      const core = coreRef.current;
+      if (!core) return;
+
+      core.startEdit(rowIndex, colIndex);
+    },
+    []
+  );
+
+  // Header click handler (sort)
+  const handleHeaderClick = useCallback(
+    (colIndex: number, e: React.MouseEvent) => {
+      // console.log("[GP-Grid] Header click:", { colIndex, coreExists: !!coreRef.current });
+      const core = coreRef.current;
+      if (!core) {
+        // console.warn("[GP-Grid] Core not initialized on header click");
+        return;
+      }
+
+      const column = columns[colIndex];
+      if (!column) {
+        // console.warn("[GP-Grid] Column not found for index:", colIndex);
+        return;
+      }
+
+      const colId = column.colId ?? column.field;
+      const headerInfo = state.headers.get(colIndex);
+      const currentDirection = headerInfo?.sortDirection;
+
+      // Cycle: none -> asc -> desc -> none
+      let newDirection: SortDirection | null;
+      if (!currentDirection) {
+        newDirection = "asc";
+      } else if (currentDirection === "asc") {
+        newDirection = "desc";
+      } else {
+        newDirection = null;
+      }
+
+      // console.log("[GP-Grid] Setting sort:", { colId, newDirection });
+      core.setSort(colId, newDirection, e.shiftKey);
+    },
+    [columns, state.headers]
+  );
+
+  // Fill handle drag handlers
+  const handleFillHandleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      // console.log("[GP-Grid] Fill handle mousedown triggered");
+      e.preventDefault();
+      e.stopPropagation();
+
+      const core = coreRef.current;
+      if (!core) return;
+
+      const { activeCell, selectionRange } = state;
+      if (!activeCell && !selectionRange) return;
+
+      // Create source range from selection or active cell
+      const sourceRange = selectionRange ?? {
+        startRow: activeCell!.row,
+        startCol: activeCell!.col,
+        endRow: activeCell!.row,
+        endCol: activeCell!.col,
+      };
+
+      // console.log("[GP-Grid] Starting fill drag with source range:", sourceRange);
+      core.fill.startFillDrag(sourceRange);
+      setFillSourceRange(sourceRange);
+      setFillTarget({ 
+        row: Math.max(sourceRange.startRow, sourceRange.endRow),
+        col: Math.max(sourceRange.startCol, sourceRange.endCol)
+      });
+      setIsDraggingFill(true);
+    },
+    [state.activeCell, state.selectionRange]
+  );
+
+  // Handle mouse move during fill drag
+  useEffect(() => {
+    if (!isDraggingFill) return;
+
+    // Auto-scroll configuration
+    const SCROLL_THRESHOLD = 40; // pixels from edge to trigger scroll
+    const SCROLL_SPEED = 10; // pixels per frame
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const core = coreRef.current;
+      const container = containerRef.current;
+      if (!core || !container) return;
+
+      // Get container bounds
+      const rect = container.getBoundingClientRect();
+      const scrollLeft = container.scrollLeft;
+      const scrollTop = container.scrollTop;
+
+      // Calculate mouse position relative to grid content
+      const mouseX = e.clientX - rect.left + scrollLeft;
+      const mouseY = e.clientY - rect.top + scrollTop - totalHeaderHeight;
+
+      // Find the row and column under the mouse
+      const targetRow = Math.max(0, Math.floor(mouseY / rowHeight));
+      
+      // Find column by checking column positions
+      let targetCol = 0;
+      for (let i = 0; i < columnPositions.length - 1; i++) {
+        if (mouseX >= columnPositions[i]! && mouseX < columnPositions[i + 1]!) {
+          targetCol = i;
+          break;
+        }
+        if (mouseX >= columnPositions[columnPositions.length - 1]!) {
+          targetCol = columnPositions.length - 2;
+        }
+      }
+
+      core.fill.updateFillDrag(targetRow, targetCol);
+      setFillTarget({ row: targetRow, col: targetCol });
+
+      // Auto-scroll logic
+      const mouseYInContainer = e.clientY - rect.top;
+      const mouseXInContainer = e.clientX - rect.left;
+
+      // Clear any existing auto-scroll
+      if (autoScrollIntervalRef.current) {
+        clearInterval(autoScrollIntervalRef.current);
+        autoScrollIntervalRef.current = null;
+      }
+
+      // Check if we need to auto-scroll
+      let scrollDeltaX = 0;
+      let scrollDeltaY = 0;
+
+      // Vertical scrolling
+      if (mouseYInContainer < SCROLL_THRESHOLD + totalHeaderHeight) {
+        scrollDeltaY = -SCROLL_SPEED;
+      } else if (mouseYInContainer > rect.height - SCROLL_THRESHOLD) {
+        scrollDeltaY = SCROLL_SPEED;
+      }
+
+      // Horizontal scrolling
+      if (mouseXInContainer < SCROLL_THRESHOLD) {
+        scrollDeltaX = -SCROLL_SPEED;
+      } else if (mouseXInContainer > rect.width - SCROLL_THRESHOLD) {
+        scrollDeltaX = SCROLL_SPEED;
+      }
+
+      // Start auto-scroll if needed
+      if (scrollDeltaX !== 0 || scrollDeltaY !== 0) {
+        autoScrollIntervalRef.current = setInterval(() => {
+          if (containerRef.current) {
+            containerRef.current.scrollTop += scrollDeltaY;
+            containerRef.current.scrollLeft += scrollDeltaX;
+          }
+        }, 16); // ~60fps
+      }
+    };
+
+    const handleMouseUp = () => {
+      // Clear auto-scroll
+      if (autoScrollIntervalRef.current) {
+        clearInterval(autoScrollIntervalRef.current);
+        autoScrollIntervalRef.current = null;
+      }
+
+      const core = coreRef.current;
+      if (core) {
+        core.fill.commitFillDrag();
+        // Refresh slots to show updated values
+        core.refreshSlotData();
+      }
+      setIsDraggingFill(false);
+      setFillTarget(null);
+      setFillSourceRange(null);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      // Clear auto-scroll on cleanup
+      if (autoScrollIntervalRef.current) {
+        clearInterval(autoScrollIntervalRef.current);
+        autoScrollIntervalRef.current = null;
+      }
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDraggingFill, totalHeaderHeight, rowHeight, columnPositions]);
+
+  // Render helpers
+  const isSelected = useCallback(
+    (row: number, col: number): boolean => {
+      const { selectionRange } = state;
+      if (!selectionRange) return false;
+
+      const minRow = Math.min(selectionRange.startRow, selectionRange.endRow);
+      const maxRow = Math.max(selectionRange.startRow, selectionRange.endRow);
+      const minCol = Math.min(selectionRange.startCol, selectionRange.endCol);
+      const maxCol = Math.max(selectionRange.startCol, selectionRange.endCol);
+
+      return row >= minRow && row <= maxRow && col >= minCol && col <= maxCol;
+    },
+    [state.selectionRange]
+  );
+
+  const isActiveCell = useCallback(
+    (row: number, col: number): boolean => {
+      return state.activeCell?.row === row && state.activeCell?.col === col;
+    },
+    [state.activeCell]
+  );
+
+  const isEditingCell = useCallback(
+    (row: number, col: number): boolean => {
+      return state.editingCell?.row === row && state.editingCell?.col === col;
+    },
+    [state.editingCell]
+  );
+
+  // Check if cell is in fill preview range
+  const isInFillPreview = useCallback(
+    (row: number, col: number): boolean => {
+      if (!isDraggingFill || !fillSourceRange || !fillTarget) return false;
+
+      const srcMinRow = Math.min(fillSourceRange.startRow, fillSourceRange.endRow);
+      const srcMaxRow = Math.max(fillSourceRange.startRow, fillSourceRange.endRow);
+      const srcMinCol = Math.min(fillSourceRange.startCol, fillSourceRange.endCol);
+      const srcMaxCol = Math.max(fillSourceRange.startCol, fillSourceRange.endCol);
+
+      // Determine fill direction and range
+      const fillDown = fillTarget.row > srcMaxRow;
+      const fillUp = fillTarget.row < srcMinRow;
+      const fillRight = fillTarget.col > srcMaxCol;
+      const fillLeft = fillTarget.col < srcMinCol;
+
+      // Check if cell is in the fill preview area (not the source area)
+      if (fillDown) {
+        return row > srcMaxRow && row <= fillTarget.row && col >= srcMinCol && col <= srcMaxCol;
+      }
+      if (fillUp) {
+        return row < srcMinRow && row >= fillTarget.row && col >= srcMinCol && col <= srcMaxCol;
+      }
+      if (fillRight) {
+        return col > srcMaxCol && col <= fillTarget.col && row >= srcMinRow && row <= srcMaxRow;
+      }
+      if (fillLeft) {
+        return col < srcMinCol && col >= fillTarget.col && row >= srcMinRow && row <= srcMaxRow;
+      }
+
+      return false;
+    },
+    [isDraggingFill, fillSourceRange, fillTarget]
+  );
+
+  // Get cell value from row data
+  const getCellValue = useCallback((rowData: Row, field: string): CellValue => {
+    const parts = field.split(".");
+    let value: unknown = rowData;
+
+    for (const part of parts) {
+      if (value == null || typeof value !== "object") {
+        return null;
+      }
+      value = (value as Record<string, unknown>)[part];
+    }
+
+    return (value ?? null) as CellValue;
+  }, []);
+
+  // Render cell content
+  const renderCell = useCallback(
+    (
+      column: ColumnDefinition,
+      rowData: Row,
+      rowIndex: number,
+      colIndex: number
+    ): React.ReactNode => {
+      const value = getCellValue(rowData, column.field);
+      const params: CellRendererParams = {
+        value,
+        rowData,
+        column,
+        rowIndex,
+        colIndex,
+        isActive: isActiveCell(rowIndex, colIndex),
+        isSelected: isSelected(rowIndex, colIndex),
+        isEditing: isEditingCell(rowIndex, colIndex),
+      };
+
+      // Check for column-specific renderer
+      if (column.cellRenderer && typeof column.cellRenderer === "string") {
+        const renderer = cellRenderers[column.cellRenderer];
+        if (renderer) {
+          return renderer(params);
+        }
+      }
+
+      // Fall back to global renderer
+      if (cellRenderer) {
+        return cellRenderer(params);
+      }
+
+      // Default text rendering
+      return value == null ? "" : String(value);
+    },
+    [getCellValue, isActiveCell, isSelected, isEditingCell, cellRenderers, cellRenderer]
+  );
+
+  // Render edit cell
+  const renderEditCell = useCallback(
+    (
+      column: ColumnDefinition,
+      rowData: Row,
+      rowIndex: number,
+      colIndex: number,
+      initialValue: CellValue
+    ): React.ReactNode => {
+      const core = coreRef.current;
+      if (!core) return null;
+
+      const value = getCellValue(rowData, column.field);
+      const params: EditRendererParams = {
+        value,
+        rowData,
+        column,
+        rowIndex,
+        colIndex,
+        isActive: true,
+        isSelected: true,
+        isEditing: true,
+        initialValue,
+        onValueChange: (newValue) => core.updateEditValue(newValue),
+        onCommit: () => core.commitEdit(),
+        onCancel: () => core.cancelEdit(),
+      };
+
+      // Check for column-specific renderer
+      if (column.editRenderer && typeof column.editRenderer === "string") {
+        const renderer = editRenderers[column.editRenderer];
+        if (renderer) {
+          return renderer(params);
+        }
+      }
+
+      // Fall back to global renderer
+      if (editRenderer) {
+        return editRenderer(params);
+      }
+
+      // Default input
+      return (
+        <input
+          className="gp-grid-edit-input"
+          type="text"
+          defaultValue={initialValue == null ? "" : String(initialValue)}
+          autoFocus
+          onFocus={(e) => e.target.select()}
+          onChange={(e) => core.updateEditValue(e.target.value)}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+            if (e.key === "Enter") {
+              core.commitEdit();
+            } else if (e.key === "Escape") {
+              core.cancelEdit();
+            } else if (e.key === "Tab") {
+              e.preventDefault();
+              core.commitEdit();
+              core.selection.moveFocus(e.shiftKey ? "left" : "right", false);
+            }
+          }}
+          onBlur={() => core.commitEdit()}
+        />
+      );
+    },
+    [getCellValue, editRenderers, editRenderer]
+  );
+
+  // Render header
+  const renderHeader = useCallback(
+    (
+      column: ColumnDefinition,
+      colIndex: number,
+      sortDirection?: SortDirection,
+      sortIndex?: number
+    ): React.ReactNode => {
+      const core = coreRef.current;
+      const params: HeaderRendererParams = {
+        column,
+        colIndex,
+        sortDirection,
+        sortIndex,
+        onSort: (direction, addToExisting) => {
+          if (core) {
+            core.setSort(column.colId ?? column.field, direction, addToExisting);
+          }
+        },
+      };
+
+      // Check for column-specific renderer
+      if (column.headerRenderer && typeof column.headerRenderer === "string") {
+        const renderer = headerRenderers[column.headerRenderer];
+        if (renderer) {
+          return renderer(params);
+        }
+      }
+
+      // Fall back to global renderer
+      if (headerRenderer) {
+        return headerRenderer(params);
+      }
+
+      // Default header
+      return (
+        <>
+          <span className="gp-grid-header-text">
+            {column.headerName ?? column.field}
+          </span>
+          {sortDirection && (
+            <span className="gp-grid-sort-indicator">
+              {sortDirection === "asc" ? "▲" : "▼"}
+              {sortIndex !== undefined && sortIndex > 0 && (
+                <span className="gp-grid-sort-index">{sortIndex}</span>
+              )}
+            </span>
+          )}
+        </>
+      );
+    },
+    [headerRenderers, headerRenderer]
+  );
+
+  // Convert slots map to array for rendering
+  const slotsArray = useMemo(() => Array.from(state.slots.values()), [state.slots]);
+
+  // Calculate fill handle position (only show for editable columns)
+  const fillHandlePosition = useMemo(() => {
+    const { activeCell, selectionRange } = state;
+    if (!activeCell && !selectionRange) return null;
+
+    // Get the bottom-right corner and column range of selection or active cell
+    let row: number, col: number;
+    let minCol: number, maxCol: number;
+    
+    if (selectionRange) {
+      row = Math.max(selectionRange.startRow, selectionRange.endRow);
+      col = Math.max(selectionRange.startCol, selectionRange.endCol);
+      minCol = Math.min(selectionRange.startCol, selectionRange.endCol);
+      maxCol = Math.max(selectionRange.startCol, selectionRange.endCol);
+    } else if (activeCell) {
+      row = activeCell.row;
+      col = activeCell.col;
+      minCol = col;
+      maxCol = col;
+    } else {
+      return null;
+    }
+
+    // Check if ALL columns in the selection are editable
+    for (let c = minCol; c <= maxCol; c++) {
+      const column = columns[c];
+      if (!column || column.editable !== true) {
+        return null; // Don't show fill handle if any column is not editable
+      }
+    }
+
+    const cellTop = row * rowHeight + totalHeaderHeight;
+    const cellLeft = columnPositions[col] ?? 0;
+    const cellWidth = columns[col]?.width ?? 0;
+
+    return {
+      top: cellTop + rowHeight - 5,
+      left: cellLeft + cellWidth - 20, // Move significantly left to avoid scrollbar overlap
+    };
+  }, [state.activeCell, state.selectionRange, rowHeight, totalHeaderHeight, columnPositions, columns]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`gp-grid-container${darkMode ? " gp-grid-container--dark" : ""}`}
+      style={{
+        width: "100%",
+        height: "100%",
+        overflow: "auto",
+        position: "relative",
+      }}
+      onScroll={handleScroll}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+    >
+      {/* Content sizer */}
+      <div
+        style={{
+          width: Math.max(state.contentWidth, totalWidth),
+          height: Math.max(state.contentHeight, totalHeaderHeight),
+          position: "relative",
+          minWidth: "100%",
+        }}
+      >
+        {/* Headers */}
+        <div
+          className="gp-grid-header"
+          style={{
+            position: "sticky",
+            top: 0,
+            left: 0,
+            height: headerHeight,
+            width: Math.max(state.contentWidth, totalWidth),
+            minWidth: "100%",
+            zIndex: 100,
+          }}
+        >
+          {columns.map((column, colIndex) => {
+            const headerInfo = state.headers.get(colIndex);
+            return (
+              <div
+                key={column.colId ?? column.field}
+                className="gp-grid-header-cell"
+                style={{
+                  position: "absolute",
+                  left: `${columnPositions[colIndex]}px`,
+                  top: 0,
+                  width: `${column.width}px`,
+                  height: `${headerHeight}px`,
+                  background: "transparent",
+                }}
+                onClick={(e) => handleHeaderClick(colIndex, e)}
+              >
+                {renderHeader(
+                  column,
+                  colIndex,
+                  headerInfo?.sortDirection,
+                  headerInfo?.sortIndex
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Filter Row */}
+        {showFilters && (
+          <div
+            className="gp-grid-filter-row"
+            style={{
+              position: "sticky",
+              top: headerHeight,
+              left: 0,
+              height: filterRowHeight,
+              width: Math.max(state.contentWidth, totalWidth),
+              minWidth: "100%",
+              zIndex: 99,
+            }}
+          >
+            {columns.map((column, colIndex) => {
+              const colId = column.colId ?? column.field;
+              return (
+                <div
+                  key={`filter-${colId}`}
+                  className="gp-grid-filter-cell"
+                  style={{
+                    position: "absolute",
+                    left: `${columnPositions[colIndex]}px`,
+                    top: 0,
+                    width: `${column.width}px`,
+                    height: `${filterRowHeight}px`,
+                  }}
+                >
+                  <input
+                    className="gp-grid-filter-input"
+                    type="text"
+                    placeholder={`Filter ${column.headerName ?? column.field}...`}
+                    value={filterValues[colId] ?? ""}
+                    onChange={(e) => handleFilterChange(colId, e.target.value)}
+                    onKeyDown={(e) => e.stopPropagation()}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Row slots */}
+        {slotsArray.map((slot) => {
+          if (slot.rowIndex < 0) return null;
+
+          const isEvenRow = slot.rowIndex % 2 === 0;
+
+          return (
+            <div
+              key={slot.slotId}
+              className={`gp-grid-row ${isEvenRow ? "gp-grid-row--even" : ""}`}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                transform: `translateY(${slot.translateY}px)`,
+                width: `${Math.max(state.contentWidth, totalWidth)}px`,
+                height: `${rowHeight}px`,
+              }}
+            >
+              {columns.map((column, colIndex) => {
+                const isEditing = isEditingCell(slot.rowIndex, colIndex);
+                const active = isActiveCell(slot.rowIndex, colIndex);
+                const selected = isSelected(slot.rowIndex, colIndex);
+                const inFillPreview = isInFillPreview(slot.rowIndex, colIndex);
+
+                const cellClasses = [
+                  "gp-grid-cell",
+                  active && "gp-grid-cell--active",
+                  selected && !active && "gp-grid-cell--selected",
+                  isEditing && "gp-grid-cell--editing",
+                  inFillPreview && "gp-grid-cell--fill-preview",
+                ]
+                  .filter(Boolean)
+                  .join(" ");
+
+                return (
+                  <div
+                    key={`${slot.slotId}-${colIndex}`}
+                    className={cellClasses}
+                    style={{
+                      position: "absolute",
+                      left: `${columnPositions[colIndex]}px`,
+                      top: 0,
+                      width: `${column.width}px`,
+                      height: `${rowHeight}px`,
+                    }}
+                    onClick={(e) => handleCellClick(slot.rowIndex, colIndex, e)}
+                    onDoubleClick={() => handleCellDoubleClick(slot.rowIndex, colIndex)}
+                  >
+                    {isEditing && state.editingCell
+                      ? renderEditCell(
+                          column,
+                          slot.rowData,
+                          slot.rowIndex,
+                          colIndex,
+                          state.editingCell.initialValue
+                        )
+                      : renderCell(column, slot.rowData, slot.rowIndex, colIndex)}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+
+        {/* Fill handle (drag to fill) */}
+        {fillHandlePosition && !state.editingCell && (
+          <div
+            className="gp-grid-fill-handle"
+            style={{
+              position: "absolute",
+              top: fillHandlePosition.top,
+              left: fillHandlePosition.left,
+              zIndex: 200,
+            }}
+            onMouseDown={handleFillHandleMouseDown}
+          />
+        )}
+
+        {/* Loading indicator */}
+        {state.isLoading && (
+          <div className="gp-grid-loading">
+            <div className="gp-grid-loading-spinner" />
+            Loading...
+          </div>
+        )}
+
+        {/* Error message */}
+        {state.error && (
+          <div className="gp-grid-error">Error: {state.error}</div>
+        )}
+
+        {/* Empty state */}
+        {!state.isLoading && !state.error && state.totalRows === 0 && (
+          <div className="gp-grid-empty">No data to display</div>
+        )}
+      </div>
+    </div>
+  );
+}