@optilogic/core 1.0.0-beta.0

package/src/components/data-grid/DataGrid.tsx

@@ -0,0 +1,1027 @@
+/**
+ * DataGrid Component
+ *
+ * A powerful, reusable grid component with:
+ * - Virtualization for large datasets
+ * - Resizable columns
+ * - Sorting, filtering, and pagination
+ * - Inline cell editing with validation
+ * - Full keyboard navigation
+ * - Controlled and uncontrolled state modes
+ *
+ * Built on @tanstack/react-virtual for performance.
+ */
+
+import * as React from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  ChevronsLeft,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsRight,
+  Search,
+} from "lucide-react";
+import { cn } from "../../utils/cn";
+import { Button } from "../button";
+import { Input } from "../input";
+import { HeaderCell } from "./components/HeaderCell";
+import { CellEditor } from "./components/CellEditor";
+import { useDataGridState } from "./hooks/useDataGridState";
+import { useKeyboardNavigation } from "./hooks/useKeyboardNavigation";
+import { useColumnResizeManager } from "./hooks/useColumnResize";
+import { applySorting, applyFilters, getCellValue as getCellValueUtil } from "./utils/dataProcessing";
+import type {
+  DataGridProps,
+  ColumnDef,
+  SortConfig,
+  FilterConfig,
+  CellPosition,
+  CellValue,
+} from "./types";
+
+/**
+ * Default row height for virtualization
+ */
+const DEFAULT_ROW_HEIGHT = 35;
+
+/**
+ * Default overscan for virtualization
+ */
+const DEFAULT_OVERSCAN = 10;
+
+/**
+ * Estimate minimum column width based on header text and features
+ * Ensures columns are wide enough to show full header text
+ */
+function estimateColumnWidth<T>(column: ColumnDef<T>): number {
+  const headerText = typeof column.header === "string" ? column.header : "";
+  // Base width: ~8px per character for the font size used
+  const textWidth = headerText.length * 8;
+  // Padding: 24px (px-3 = 12px on each side)
+  const padding = 24;
+  // Sort icon: ~20px if sortable
+  const sortIconWidth = column.sortable ? 20 : 0;
+  // Filter icon: ~28px if filterable (icon + some spacing)
+  const filterIconWidth = column.filterable ? 28 : 0;
+  // Resize handle area: ~16px if resizable (handled separately, but add small buffer)
+  const resizeBuffer = 8;
+  
+  const estimatedWidth = textWidth + padding + sortIconWidth + filterIconWidth + resizeBuffer;
+  
+  // Minimum 80px, reasonable default max of 200px unless header is very long
+  return Math.max(80, Math.min(estimatedWidth, 300));
+}
+
+/**
+ * DataGrid Component
+ */
+export function DataGrid<T = Record<string, CellValue>>({
+  // Data
+  data,
+  columns,
+  getRowKey = (_, index) => String(index),
+
+  // Feature toggles
+  resizableColumns = false,
+  virtualized,
+  stickyHeader = true,
+  showTooltips = true,
+  tooltipMinLength = 30,
+  enableKeyboardNavigation = true,
+  showColumnBorders = true,
+  enableInternalSorting = true,
+  enableInternalFiltering = true,
+
+  // Controlled sorting
+  sorting: controlledSorting,
+  onSortChange,
+
+  // Controlled filtering
+  filters: controlledFilters,
+  onFilterChange,
+
+  // Controlled column widths
+  columnWidths: controlledColumnWidths,
+  onColumnResize,
+  onColumnResizeStart,
+  onColumnResizeEnd,
+
+  // Uncontrolled defaults
+  defaultSorting,
+  defaultFilters,
+  defaultColumnWidths,
+
+  // State change callback
+  onStateChange,
+
+  // Row interactions
+  onRowClick,
+  onRowDoubleClick,
+  selectedRows = [],
+  onSelectedRowsChange,
+  rowClassName,
+
+  // Cell editing
+  onCellEdit,
+  onCellEditStart,
+  onCellEditCancel,
+
+  // Keyboard navigation
+  focusedCell: controlledFocusedCell,
+  onFocusedCellChange,
+
+  // Pagination
+  pagination,
+
+  // Search
+  search,
+
+  // Loading & empty states
+  loading = false,
+  loadingComponent,
+  emptyMessage = "No data available",
+  emptyComponent,
+
+  // Styling
+  className,
+  tableClassName,
+
+  // Infinite scroll
+  infiniteScroll = false,
+  onLoadMore,
+  hasMore = false,
+  loadingMore = false,
+}: DataGridProps<T>) {
+  const parentRef = React.useRef<HTMLDivElement>(null);
+  const headerRef = React.useRef<HTMLDivElement>(null);
+  const [headerHeight, setHeaderHeight] = React.useState(40);
+  const [hoveredCell, setHoveredCell] = React.useState<{
+    row: number;
+    col: number;
+    content: string;
+    x: number;
+    y: number;
+  } | null>(null);
+
+  // Filter visible columns
+  const visibleColumns = React.useMemo(
+    () => columns.filter((col) => !col.hidden),
+    [columns]
+  );
+
+  // Get cell value helper
+  const getCellValue = React.useCallback(
+    (row: T, column: ColumnDef<T>): CellValue => {
+      if (column.accessor) {
+        return column.accessor(row);
+      }
+      // Dynamic property access - row is expected to be an object with string keys
+      return (row as Record<string, CellValue>)[column.key];
+    },
+    []
+  );
+
+  // Use data grid state hook
+  const { state, actions, isControlled } = useDataGridState({
+    sorting: controlledSorting,
+    filters: controlledFilters,
+    columnWidths: controlledColumnWidths,
+    focusedCell: controlledFocusedCell,
+    defaultSorting,
+    defaultFilters,
+    defaultColumnWidths,
+    onSortChange,
+    onFilterChange,
+    onColumnResize,
+    onFocusedCellChange,
+    onStateChange,
+    onCellEdit,
+    onCellEditStart,
+    onCellEditCancel,
+    columns: visibleColumns,
+    data,
+    getCellValue,
+  });
+
+  // Process data with internal sorting/filtering (uncontrolled mode)
+  const processedData = React.useMemo(() => {
+    let result = data;
+
+    // Apply internal filtering when not controlled
+    if (enableInternalFiltering && !isControlled.filters && state.filters.length > 0) {
+      result = applyFilters(result, state.filters, visibleColumns);
+    }
+
+    // Apply internal sorting when not controlled
+    if (enableInternalSorting && !isControlled.sorting && state.sorting.length > 0) {
+      result = applySorting(result, state.sorting, visibleColumns);
+    }
+
+    return result;
+  }, [
+    data,
+    enableInternalFiltering,
+    enableInternalSorting,
+    isControlled.filters,
+    isControlled.sorting,
+    state.filters,
+    state.sorting,
+    visibleColumns,
+  ]);
+
+  // Use column resize manager
+  const { resizingColumn, getResizeProps } = useColumnResizeManager({
+    columns: visibleColumns,
+    columnWidths: state.columnWidths,
+    resizableColumns,
+    onColumnResize: actions.setColumnWidth,
+    onColumnResizeStart,
+    onColumnResizeEnd,
+  });
+
+  // Auto-enable virtualization for large datasets
+  const shouldVirtualize = virtualized ?? processedData.length > 100;
+
+  // Measure header height for virtualization offset
+  React.useLayoutEffect(() => {
+    if (headerRef.current && shouldVirtualize) {
+      setHeaderHeight(headerRef.current.offsetHeight);
+    }
+  }, [visibleColumns, shouldVirtualize]);
+
+  // Virtualize rows
+  const rowVirtualizer = useVirtualizer({
+    count: processedData.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => DEFAULT_ROW_HEIGHT,
+    overscan: DEFAULT_OVERSCAN,
+    enabled: shouldVirtualize,
+  });
+
+  // Calculate table width - prefer explicit widths, fall back to estimated width from header
+  const tableWidth = React.useMemo(() => {
+    return visibleColumns.reduce((acc, col) => {
+      const width = state.columnWidths[col.key] || col.width || estimateColumnWidth(col);
+      return acc + width;
+    }, 0);
+  }, [visibleColumns, state.columnWidths]);
+
+  // Get visible row count for keyboard navigation
+  const visibleRowCount = React.useMemo(() => {
+    if (!parentRef.current) return 10;
+    return Math.floor(parentRef.current.clientHeight / DEFAULT_ROW_HEIGHT);
+  }, []);
+
+  // Use keyboard navigation hook
+  const { handleKeyDown, containerRef, focusContainer } = useKeyboardNavigation({
+    enabled: enableKeyboardNavigation,
+    focusedCell: state.focusedCell,
+    editingCell: state.editingCell,
+    columns: visibleColumns,
+    rowCount: processedData.length,
+    visibleRowCount,
+    onFocusedCellChange: actions.setFocusedCell,
+    onStartEditing: actions.startEditing,
+    onCommitEdit: actions.commitEdit,
+    onCancelEdit: actions.cancelEdit,
+    onScrollToRow: (rowIndex) => {
+      rowVirtualizer.scrollToIndex(rowIndex, { align: "auto" });
+    },
+  });
+
+  // Handle blur to clear selection when focus leaves the grid data area
+  // This includes clicking the search bar, pagination, or anywhere outside
+  const handleBlur = React.useCallback(
+    (event: React.FocusEvent) => {
+      const target = event.target as HTMLElement;
+      const relatedTarget = event.relatedTarget as HTMLElement | null;
+
+      // Helper to check if an element is part of the cell editing flow (Radix portals, etc.)
+      const isEditingFlowElement = (el: HTMLElement | null): boolean => {
+        if (!el) return false;
+        return !!(
+          el.closest("[data-radix-popper-content-wrapper]") ||
+          el.closest("[data-radix-select-viewport]") ||
+          el.closest("[data-radix-menu-content]") ||
+          el.closest("[role='dialog']") ||
+          el.closest("[data-cell-editor]")
+        );
+      };
+
+      // Helper to check if an element is inside the grid data area (rows/cells)
+      const isInGridDataArea = (el: HTMLElement | null): boolean => {
+        if (!el) return false;
+        // Check if the element is a grid cell, or inside a row/cell
+        return !!(
+          el.closest("[role='gridcell']") ||
+          el.closest("[role='row']") ||
+          el.closest("[data-cell-editor]")
+        );
+      };
+
+      // If the blur originated from inside a cell editor, let the CellEditor's
+      // own blur handler manage the commit - don't double-process
+      if (target.closest("[data-cell-editor]")) {
+        // Clear focused cell if focus is moving outside the grid data area
+        if (relatedTarget && !isInGridDataArea(relatedTarget) && !isEditingFlowElement(relatedTarget)) {
+          setTimeout(() => {
+            actions.setFocusedCell(null);
+          }, 0);
+        } else if (!relatedTarget) {
+          // Focus moving to non-focusable element - check after timeout
+          setTimeout(() => {
+            const activeElement = document.activeElement as HTMLElement | null;
+            if (!isInGridDataArea(activeElement) && !isEditingFlowElement(activeElement)) {
+              actions.setFocusedCell(null);
+            }
+          }, 0);
+        }
+        return;
+      }
+
+      // If we're editing and focus is moving to another element
+      if (state.editingCell && relatedTarget) {
+        // If focus is moving to a Radix portal or cell editor, keep editing
+        if (isEditingFlowElement(relatedTarget)) {
+          return;
+        }
+        // Otherwise, commit the edit
+        actions.commitEdit();
+        // Clear focus if moving outside grid data area (e.g., search bar, pagination, outside)
+        if (!isInGridDataArea(relatedTarget)) {
+          actions.setFocusedCell(null);
+        }
+        return;
+      }
+
+      // Not editing - clear focused cell if focus moves outside the grid data area
+      if (relatedTarget) {
+        if (!isInGridDataArea(relatedTarget) && !isEditingFlowElement(relatedTarget)) {
+          actions.setFocusedCell(null);
+        }
+      } else {
+        // Focus is moving to nothing (e.g., clicking on non-focusable element)
+        setTimeout(() => {
+          const activeElement = document.activeElement as HTMLElement | null;
+          if (isEditingFlowElement(activeElement)) {
+            return;
+          }
+          if (!isInGridDataArea(activeElement)) {
+            if (state.editingCell) {
+              actions.commitEdit();
+            }
+            actions.setFocusedCell(null);
+          }
+        }, 0);
+      }
+    },
+    [state.editingCell, actions]
+  );
+
+  // Handle infinite scroll
+  React.useEffect(() => {
+    if (!infiniteScroll || !hasMore || loadingMore || !parentRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting) {
+          onLoadMore?.();
+        }
+      },
+      { root: parentRef.current, threshold: 0.1 }
+    );
+
+    // Observe the last row
+    const lastRow = parentRef.current.querySelector("[data-last-row]");
+    if (lastRow) {
+      observer.observe(lastRow);
+    }
+
+    return () => observer.disconnect();
+  }, [infiniteScroll, hasMore, loadingMore, onLoadMore, data.length]);
+
+  // Get sort config for a column
+  const getColumnSort = (columnKey: string): SortConfig | undefined => {
+    return state.sorting.find((s) => s.field === columnKey);
+  };
+
+  // Get filter config for a column
+  const getColumnFilter = (columnKey: string): FilterConfig | undefined => {
+    return state.filters.find((f) => f.columnKey === columnKey);
+  };
+
+  // Handle header sort click
+  const handleSort = (columnKey: string) => {
+    actions.toggleSort(columnKey);
+  };
+
+  // Handle filter change
+  const handleFilterChange = (
+    columnKey: string,
+    filter: FilterConfig | null
+  ) => {
+    actions.setFilter(filter, columnKey);
+  };
+
+  // Render cell content
+  const renderCell = (
+    row: T,
+    column: ColumnDef<T>,
+    rowIndex: number,
+    isEditing: boolean
+  ) => {
+    // If editing this cell
+    if (isEditing && state.editingCell) {
+      return (
+        <CellEditor
+          column={column}
+          value={state.editingCell.value}
+          row={row}
+          rowIndex={rowIndex}
+          onCommit={actions.commitEdit}
+          onCancel={actions.cancelEdit}
+          onChange={actions.updateEditingValue}
+        />
+      );
+    }
+
+    // Custom cell renderer
+    if (column.cell) {
+      return column.cell(row, rowIndex);
+    }
+
+    // Default rendering
+    const value = getCellValue(row, column);
+    if (value === null || value === undefined) {
+      return <span className="text-muted-foreground italic">NULL</span>;
+    }
+    return String(value);
+  };
+
+  // Loading state
+  if (loading) {
+    if (loadingComponent) {
+      return <>{loadingComponent}</>;
+    }
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center h-full bg-muted/30",
+          className
+        )}
+      >
+        <div className="text-muted-foreground">Loading...</div>
+      </div>
+    );
+  }
+
+  // Empty state - but keep the search bar if it exists
+  if (processedData.length === 0) {
+    const emptyContent = emptyComponent ? (
+      <>{emptyComponent}</>
+    ) : (
+      <div className="flex items-center justify-center flex-1 bg-muted/30">
+        <div className="text-muted-foreground text-sm">{emptyMessage}</div>
+      </div>
+    );
+
+    // If search is enabled, show the search bar with empty state below
+    if (search) {
+      return (
+        <div className={cn("flex flex-col h-full w-full min-h-0", className)}>
+          <div className="flex-shrink-0 p-3 border-b border-border bg-background">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                type="text"
+                placeholder={search.placeholder || "Search..."}
+                value={search.searchQuery}
+                onChange={(e) => search.onSearchChange(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+          </div>
+          {emptyContent}
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center h-full bg-muted/30",
+          className
+        )}
+      >
+        <div className="text-muted-foreground text-sm">{emptyMessage}</div>
+      </div>
+    );
+  }
+
+  // Virtualized rendering
+  if (shouldVirtualize) {
+    return (
+      <div
+        ref={containerRef as React.RefObject<HTMLDivElement>}
+        className={cn("flex flex-col h-full w-full min-h-0", className)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        tabIndex={enableKeyboardNavigation ? 0 : -1}
+        role="grid"
+        aria-rowcount={processedData.length}
+        aria-colcount={visibleColumns.length}
+      >
+        {/* Search bar */}
+        {search && (
+          <div className="flex-shrink-0 p-3 border-b border-border bg-background">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                type="text"
+                placeholder={search.placeholder || "Search..."}
+                value={search.searchQuery}
+                onChange={(e) => search.onSearchChange(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+          </div>
+        )}
+
+        <div
+          ref={parentRef}
+          className="flex-1 overflow-auto bg-background relative w-full min-h-0 max-h-full"
+          style={{ contain: "strict" }}
+        >
+          <div
+            style={{
+              height: `${rowVirtualizer.getTotalSize() + headerHeight}px`,
+              width: tableWidth ? `${tableWidth}px` : "100%",
+              position: "relative",
+              minWidth: "100%",
+            }}
+          >
+            {/* Sticky Header */}
+            <div
+              ref={headerRef}
+              className={cn(
+                "sticky top-0 z-10 bg-muted border-b border-border",
+                stickyHeader && "sticky"
+              )}
+              style={{
+                display: "flex",
+                width: tableWidth ? `${tableWidth}px` : "100%",
+              }}
+              role="row"
+            >
+              {visibleColumns.map((column, colIndex) => {
+                const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                const resizeProps = getResizeProps(column.key);
+
+                return (
+                  <HeaderCell
+                    key={column.key}
+                    column={column}
+                    columnIndex={colIndex}
+                    width={width}
+                    sorting={getColumnSort(column.key)}
+                    filter={getColumnFilter(column.key)}
+                    isResizable={
+                      resizableColumns && column.resizable !== false
+                    }
+                    onSort={() => handleSort(column.key)}
+                    onFilterChange={(filter) =>
+                      handleFilterChange(column.key, filter)
+                    }
+                    onResizeMouseDown={resizeProps.handleMouseDown}
+                    onResizeDoubleClick={resizeProps.handleDoubleClick}
+                    isResizing={resizeProps.isDragging}
+                  />
+                );
+              })}
+            </div>
+
+            {/* Virtualized Rows */}
+            {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+              const row = processedData[virtualRow.index];
+              const rowKey = getRowKey(row, virtualRow.index);
+              const isSelected = selectedRows.includes(rowKey);
+              const isLastRow = virtualRow.index === processedData.length - 1;
+
+              return (
+                <div
+                  key={virtualRow.key}
+                  data-last-row={isLastRow ? true : undefined}
+                  className={cn(
+                    "absolute top-0 left-0 transition-colors border-b border-border",
+                    onRowClick && "cursor-pointer",
+                    isSelected && "bg-accent/20",
+                    !isSelected && "hover:bg-muted/50",
+                    rowClassName && rowClassName(row, virtualRow.index)
+                  )}
+                  style={{
+                    height: `${virtualRow.size}px`,
+                    transform: `translateY(${virtualRow.start + headerHeight}px)`,
+                    display: "flex",
+                    width: tableWidth ? `${tableWidth}px` : "100%",
+                  }}
+                  onClick={() => {
+                    onRowClick?.(row, virtualRow.index);
+                    if (enableKeyboardNavigation && visibleColumns.length > 0) {
+                      actions.setFocusedCell({
+                        rowIndex: virtualRow.index,
+                        columnKey: visibleColumns[0].key,
+                      });
+                      focusContainer();
+                    }
+                  }}
+                  onDoubleClick={() =>
+                    onRowDoubleClick?.(row, virtualRow.index)
+                  }
+                  role="row"
+                  aria-rowindex={virtualRow.index + 1}
+                  aria-selected={isSelected}
+                >
+                  {visibleColumns.map((column, colIndex) => {
+                    const width =
+                      state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                    const isEditingThisCell =
+                      state.editingCell?.rowIndex === virtualRow.index &&
+                      state.editingCell?.columnKey === column.key;
+                    const isFocused =
+                      state.focusedCell?.rowIndex === virtualRow.index &&
+                      state.focusedCell?.columnKey === column.key;
+
+                    const cellContent = renderCell(
+                      row,
+                      column,
+                      virtualRow.index,
+                      isEditingThisCell
+                    );
+                    const cellValue =
+                      typeof cellContent === "string"
+                        ? cellContent
+                        : String(getCellValue(row, column) || "");
+                    const isLong =
+                      showTooltips && cellValue.length > tooltipMinLength;
+
+                      return (
+                        <div
+                          key={column.key}
+                          className={cn(
+                            "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
+                            showColumnBorders && "border-r border-border last:border-r-0",
+                            isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
+                            column.align === "center" && "text-center",
+                            column.align === "right" && "text-right"
+                          )}
+                          style={{ width }}
+                          onMouseDown={(e) => {
+                            // Prevent cell from capturing mouse events when editing
+                            // This allows clicks on dropdowns, date pickers, etc. to work
+                            if (isEditingThisCell && e.target !== e.currentTarget) {
+                              e.stopPropagation();
+                            }
+                          }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            // Don't change focus if already editing this cell
+                            if (isEditingThisCell) return;
+                            if (enableKeyboardNavigation) {
+                              actions.setFocusedCell({
+                                rowIndex: virtualRow.index,
+                                columnKey: column.key,
+                              });
+                              focusContainer();
+                            }
+                          }}
+                          onDoubleClick={(e) => {
+                            e.stopPropagation();
+                            // Don't re-trigger edit if already editing
+                            if (isEditingThisCell) return;
+                            if (column.editable && onCellEdit) {
+                              actions.startEditing(virtualRow.index, column.key);
+                            }
+                          }}
+                          onMouseEnter={(e) => {
+                            if (isLong && !isEditingThisCell) {
+                              const rect =
+                                e.currentTarget.getBoundingClientRect();
+                              setHoveredCell({
+                                row: virtualRow.index,
+                                col: colIndex,
+                                content: cellValue,
+                                x: rect.left,
+                                y: rect.bottom + 4,
+                              });
+                            }
+                          }}
+                          onMouseLeave={() => setHoveredCell(null)}
+                          role="gridcell"
+                          aria-colindex={colIndex + 1}
+                          tabIndex={-1}
+                        >
+                          <div className="truncate">{cellContent}</div>
+                        </div>
+                      );
+                  })}
+                </div>
+              );
+            })}
+
+            {/* Infinite scroll loading indicator */}
+            {infiniteScroll && loadingMore && (
+              <div
+                className="absolute bottom-0 left-0 right-0 flex items-center justify-center py-4 bg-background/80"
+                style={{
+                  transform: `translateY(${rowVirtualizer.getTotalSize() + headerHeight}px)`,
+                }}
+              >
+                <div className="text-muted-foreground text-sm">
+                  Loading more...
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Pagination */}
+        {pagination && (
+          <PaginationFooter pagination={pagination} />
+        )}
+
+        {/* Tooltip for long content */}
+        {hoveredCell && (
+          <div
+            className="fixed z-[200] p-3 bg-popover text-popover-foreground border border-border rounded-md shadow-xl max-w-md break-words text-sm pointer-events-none"
+            style={{
+              left: `${hoveredCell.x}px`,
+              top: `${hoveredCell.y}px`,
+            }}
+          >
+            <div className="whitespace-pre-wrap font-mono text-xs">
+              {hoveredCell.content}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // Non-virtualized rendering (standard table)
+  return (
+    <div
+      ref={containerRef as React.RefObject<HTMLDivElement>}
+      className={cn("flex flex-col h-full min-h-0", className)}
+      onKeyDown={handleKeyDown}
+      onBlur={handleBlur}
+      tabIndex={enableKeyboardNavigation ? 0 : -1}
+      role="grid"
+      aria-rowcount={processedData.length}
+      aria-colcount={visibleColumns.length}
+    >
+      {/* Search bar */}
+      {search && (
+        <div className="flex-shrink-0 p-3 border-b border-border bg-background">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              type="text"
+              placeholder={search.placeholder || "Search..."}
+              value={search.searchQuery}
+              onChange={(e) => search.onSearchChange(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="flex-1 overflow-auto min-h-0">
+        {/* Header row using HeaderCell for consistent features */}
+        <div
+          className={cn(
+            "flex border-b border-border bg-muted",
+            stickyHeader && "sticky top-0 z-10"
+          )}
+          style={{ width: tableWidth ? `${tableWidth}px` : "100%" }}
+          role="row"
+        >
+          {visibleColumns.map((column, colIndex) => {
+            const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+            const resizeProps = getResizeProps(column.key);
+
+            return (
+              <HeaderCell
+                key={column.key}
+                column={column}
+                columnIndex={colIndex}
+                width={width}
+                sorting={getColumnSort(column.key)}
+                filter={getColumnFilter(column.key)}
+                isResizable={resizableColumns && column.resizable !== false}
+                onSort={() => handleSort(column.key)}
+                onFilterChange={(filter) => handleFilterChange(column.key, filter)}
+                onResizeMouseDown={resizeProps.handleMouseDown}
+                onResizeDoubleClick={resizeProps.handleDoubleClick}
+                isResizing={resizeProps.isDragging}
+              />
+            );
+          })}
+        </div>
+
+        {/* Data rows */}
+          {processedData.map((row, rowIndex) => {
+            const rowKey = getRowKey(row, rowIndex);
+            const isSelected = selectedRows.includes(rowKey);
+
+            return (
+              <div
+                key={rowKey}
+                className={cn(
+                  "flex border-b border-border transition-colors",
+                  onRowClick && "cursor-pointer",
+                  isSelected && "bg-accent/20",
+                  !isSelected && "hover:bg-muted/50",
+                  rowClassName && rowClassName(row, rowIndex)
+                )}
+                style={{ width: tableWidth ? `${tableWidth}px` : "100%" }}
+                onClick={() => onRowClick?.(row, rowIndex)}
+                onDoubleClick={() => onRowDoubleClick?.(row, rowIndex)}
+                role="row"
+              >
+                {visibleColumns.map((column) => {
+                  const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                  const isEditingThisCell =
+                    state.editingCell?.rowIndex === rowIndex &&
+                    state.editingCell?.columnKey === column.key;
+                  const isFocused =
+                    state.focusedCell?.rowIndex === rowIndex &&
+                    state.focusedCell?.columnKey === column.key;
+
+                  return (
+                    <div
+                      key={column.key}
+                      className={cn(
+                        "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
+                        showColumnBorders && "border-r border-border last:border-r-0",
+                        isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
+                        column.align === "center" && "text-center",
+                        column.align === "right" && "text-right"
+                      )}
+                      style={{ width }}
+                      onMouseDown={(e) => {
+                        // Prevent cell from capturing mouse events when editing
+                        // This allows clicks on dropdowns, date pickers, etc. to work
+                        if (isEditingThisCell && e.target !== e.currentTarget) {
+                          e.stopPropagation();
+                        }
+                      }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        // Don't change focus if already editing this cell
+                        if (isEditingThisCell) return;
+                        if (enableKeyboardNavigation) {
+                          actions.setFocusedCell({
+                            rowIndex,
+                            columnKey: column.key,
+                          });
+                          focusContainer();
+                        }
+                      }}
+                      onDoubleClick={(e) => {
+                        e.stopPropagation();
+                        // Don't re-trigger edit if already editing
+                        if (isEditingThisCell) return;
+                        if (column.editable && onCellEdit) {
+                          actions.startEditing(rowIndex, column.key);
+                        }
+                      }}
+                      role="gridcell"
+                    >
+                      {renderCell(row, column, rowIndex, isEditingThisCell)}
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
+      </div>
+
+      {/* Pagination */}
+      {pagination && (
+        <PaginationFooter pagination={pagination} />
+      )}
+    </div>
+  );
+}
+
+/**
+ * Pagination Footer Component
+ */
+interface PaginationFooterProps {
+  pagination: NonNullable<DataGridProps["pagination"]>;
+}
+
+function PaginationFooter({ pagination }: PaginationFooterProps) {
+  const [goToPage, setGoToPage] = React.useState("");
+
+  const handleGoToPage = () => {
+    const page = parseInt(goToPage, 10);
+    if (!isNaN(page) && page >= 1 && page <= pagination.totalPages) {
+      pagination.onPageChange(page - 1);
+      setGoToPage("");
+    }
+  };
+
+  return (
+    <div className="flex-shrink-0 border-t border-border p-4 flex items-center justify-between bg-background">
+      <div className="flex items-center gap-2">
+        <span className="text-sm text-muted-foreground">Rows per page:</span>
+        <select
+          value={pagination.pageSize}
+          onChange={(e) => pagination.onPageSizeChange(Number(e.target.value))}
+          className="px-2 py-1 border border-border rounded bg-background text-foreground text-sm"
+        >
+          {(pagination.pageSizeOptions || [15, 50, 100, 500]).map((size) => (
+            <option key={size} value={size}>
+              {size}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-muted-foreground">
+          Page {pagination.currentPage + 1} of {pagination.totalPages}
+          {pagination.totalItems && ` (${pagination.totalItems} total)`}
+        </span>
+
+        {/* Go to page input */}
+        {pagination.showGoToPage && (
+          <div className="flex items-center gap-1">
+            <Input
+              type="number"
+              min={1}
+              max={pagination.totalPages}
+              value={goToPage}
+              onChange={(e) => setGoToPage(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  handleGoToPage();
+                }
+              }}
+              placeholder="Go to"
+              className="w-16 h-8 text-sm"
+            />
+            <Button
+              onClick={handleGoToPage}
+              variant="outline"
+              size="sm"
+              disabled={!goToPage}
+            >
+              Go
+            </Button>
+          </div>
+        )}
+
+        <div className="flex items-center gap-1">
+          <Button
+            onClick={() => pagination.onPageChange(0)}
+            disabled={pagination.currentPage === 0}
+            variant="ghost"
+            size="icon"
+            aria-label="First page"
+          >
+            <ChevronsLeft className="w-4 h-4" />
+          </Button>
+          <Button
+            onClick={() => pagination.onPageChange(pagination.currentPage - 1)}
+            disabled={pagination.currentPage === 0}
+            variant="ghost"
+            size="icon"
+            aria-label="Previous page"
+          >
+            <ChevronLeft className="w-4 h-4" />
+          </Button>
+          <Button
+            onClick={() => pagination.onPageChange(pagination.currentPage + 1)}
+            disabled={pagination.currentPage >= pagination.totalPages - 1}
+            variant="ghost"
+            size="icon"
+            aria-label="Next page"
+          >
+            <ChevronRight className="w-4 h-4" />
+          </Button>
+          <Button
+            onClick={() => pagination.onPageChange(pagination.totalPages - 1)}
+            disabled={pagination.currentPage >= pagination.totalPages - 1}
+            variant="ghost"
+            size="icon"
+            aria-label="Last page"
+          >
+            <ChevronsRight className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}