@jmruthers/pace-core 0.5.75 → 0.5.77

package/src/components/DataTable/components/UnifiedTableBody.tsx

@@ -9,8 +9,8 @@
  * while maintaining all features consistently.
  */
 
-import React, { useLayoutEffect, useState, useRef, useMemo } from 'react';
-import { type Table, flexRender } from '@tanstack/react-table';
+import React, { useLayoutEffect, useState, useRef, useMemo, useEffect } from 'react';
+import { type Table, flexRender, type Column, type Row } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 // Removed Table component imports - using native HTML elements
 import { Button } from '../../Button/Button';
@@ -18,12 +18,22 @@ import { ChevronUp, ChevronDown, ChevronRight } from 'lucide-react';
 import { EmptyState } from './EmptyState';
 import { FilterRow } from './FilterRow';
 import { ActionButtons } from './ActionButtons';
-import { DraggableColumnHeader } from './DraggableColumnHeader';
+import { EditableRow } from './EditableRow';
 import { getTableCellClasses, getTableHeadClasses, getTableRowClasses } from '../styles';
 import { Input } from '../../Input/Input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
-import type { AggregateConfig, HierarchicalConfig, HierarchicalDataRow } from '../types';
+import type {
+  AggregateConfig,
+  DataRecord,
+  DataTableAction,
+  EditableColumnDef,
+  EmptyStateConfig,
+  HierarchicalConfig,
+  HierarchicalDataRow,
+  CellValue
+} from '../types';
 import { calculateIndentation } from '../utils/hierarchicalUtils';
+import { getRowIdSafe } from '../utils/rowUtils';
 
 // Performance thresholds
 const VIRTUALIZATION_THRESHOLD = 1000;
@@ -33,15 +43,15 @@ const MEMORY_OPTIMIZATION_THRESHOLD = 100000;
 /**
  * Props for the unified table body component
  */
-interface UnifiedTableBodyProps<TData extends Record<string, any>> {
+interface UnifiedTableBodyProps<TData extends DataRecord> {
   /** TanStack table instance */
   table: Table<TData>;
   /** Whether a new row is being created */
   isCreating: boolean;
   /** Data for the row being created */
-  creationData: Record<string, any>;
+  creationData: Record<string, CellValue>;
   /** Callback when creation data changes */
-  onCreationDataChange: (data: Record<string, any>) => void;
+  onCreationDataChange: (data: Record<string, CellValue>) => void;
   /** Callback to save the new row */
   onSaveCreation: () => void;
   /** Callback to cancel row creation */
@@ -49,9 +59,9 @@ interface UnifiedTableBodyProps<TData extends Record<string, any>> {
   /** ID of the row currently being edited */
   editingRowId: string | null;
   /** Data for the row being edited */
-  editingData: Record<string, any>;
+  editingData: Record<string, CellValue>;
   /** Callback when editing data changes */
-  onEditingDataChange: (data: Record<string, any>) => void;
+  onEditingDataChange: (data: Record<string, CellValue>) => void;
   /** Callback to save the edited row */
   onSaveEditing?: () => void;
   /** Callback to cancel row editing */
@@ -63,15 +73,7 @@ interface UnifiedTableBodyProps<TData extends Record<string, any>> {
   /** Function to get unique row ID */
   getRowId?: (row: TData, index: number) => string;
   /** Custom empty state configuration */
-  emptyState?: {
-    title?: string;
-    description?: string;
-    icon?: React.ComponentType<{ className?: string }>;
-    action?: {
-      label: string;
-      onClick: () => void;
-    };
-  };
+  emptyState?: EmptyStateConfig;
   /** Whether the table is currently filtered */
   isFiltered?: boolean;
   /** Callback to clear all filters */
@@ -80,16 +82,6 @@ interface UnifiedTableBodyProps<TData extends Record<string, any>> {
   enableFiltering?: boolean;
   /** Whether the filter row should be visible */
   showFilterRow?: boolean;
-  /** Whether column reordering is enabled */
-  enableColumnReordering?: boolean;
-  /** Callback when column order changes */
-  onColumnOrderChange?: (columnOrder: string[]) => void;
-  /** Callback when a column is dropped on another column */
-  onColumnDrop?: (draggedColumnId: string, targetColumnId: string) => void;
-  /** Saved column order from persistence */
-  savedColumnOrder?: string[];
-  /** Whether persistence is enabled */
-  enablePersistence?: boolean;
   /** Table ID for persistence */
   tableId?: string;
   /** Data length for virtualization decision */
@@ -112,25 +104,7 @@ interface UnifiedTableBodyProps<TData extends Record<string, any>> {
     hasAnyChildren?: boolean;
   };
   /** Actions for action buttons */
-  actions?: Array<{
-    label: string;
-    onClick: (row: any) => void;
-    icon?: any;
-    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost';
-    disabled?: boolean | ((row?: any) => boolean);
-    visible?: boolean | ((row?: any) => boolean);
-    testId?: string;
-    showInEditMode?: boolean;
-    hideInViewMode?: boolean;
-    showInViewMode?: boolean;
-    hidden?: boolean;
-    showForParent?: boolean;
-    showForChild?: boolean;
-    parentIcon?: any;
-    childIcon?: any;
-    parentLabel?: string;
-    childLabel?: string;
-  }>;
+  actions?: DataTableAction<TData>[];
   // MANDATORY RBAC
   rbac?: {
     pageId?: string;
@@ -147,38 +121,38 @@ interface UnifiedTableBodyProps<TData extends Record<string, any>> {
 }
 
 // Helper function to render the appropriate input type based on column configuration
-const renderEditField = (
-  column: any,
-  value: any,
-  onChange: (value: any) => void,
-  editingData: Record<string, any> = {},
+const renderEditField = <TData extends DataRecord>(
+  column: Column<TData, unknown>,
+  value: CellValue,
+  onChange: (value: CellValue | Record<string, CellValue>) => void,
+  editingData: Record<string, CellValue> = {},
   placeholder?: string
 ) => {
-  const columnDef = column.columnDef;
-  
+  const columnDef = column.columnDef as EditableColumnDef<TData>;
+
   // Check if column is editable (default: true)
   if (columnDef.editable === false) {
     // Return the original value as text if column is not editable
-    return <span className="text-sm text-gray-600">{value || ''}</span>;
+    return <span className="text-sm text-gray-600">{String(value ?? '')}</span>;
   }
-  
+
   // Check for custom field type
   if (columnDef.fieldType === 'select' && columnDef.fieldOptions) {
     // Use editAccessorKey if specified, otherwise use the column id
     const accessorKey = columnDef.editAccessorKey || column.id;
-    const currentValue = editingData[accessorKey] || value || '';
-    
+    const currentValue = editingData[accessorKey] ?? value ?? '';
+
     return (
       <Select
-        value={currentValue}
-        onValueChange={(newValue) => onChange({ [accessorKey]: newValue })}
+        value={String(currentValue)}
+        onValueChange={(newValue) => onChange({ [accessorKey]: newValue as CellValue })}
       >
         <SelectTrigger className="h-8">
           <SelectValue placeholder={placeholder || `Select ${columnDef.header || column.id}...`} />
         </SelectTrigger>
         <SelectContent>
-          {columnDef.fieldOptions.map((option: any) => (
-            <SelectItem key={option.value} value={option.value}>
+          {columnDef.fieldOptions.map(option => (
+            <SelectItem key={option.value} value={String(option.value)}>
               {option.label}
             </SelectItem>
           ))}
@@ -192,55 +166,40 @@ const renderEditField = (
     return (
       <Input
         type="number"
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
+        value={String(value ?? '')}
+        onChange={(e) => onChange(e.target.value as unknown as CellValue)}
         placeholder={placeholder || `Enter ${columnDef.header || column.id}...`}
         className="h-8"
       />
     );
   }
-  
+
   // Check for date type
   if (columnDef.fieldType === 'date') {
     return (
       <Input
         type="date"
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
+        value={String(value ?? '')}
+        onChange={(e) => onChange(e.target.value as unknown as CellValue)}
         className="h-8"
       />
     );
   }
-  
+
   // Default to text input
   return (
     <Input
       type="text"
-      value={value || ''}
-      onChange={(e) => onChange(e.target.value)}
+      value={String(value ?? '')}
+      onChange={(e) => onChange(e.target.value as unknown as CellValue)}
       placeholder={placeholder || `Enter ${columnDef.header || column.id}...`}
       className="h-8"
     />
   );
 };
 
-// Row component without memoization to ensure column visibility works
-const MemoizedRow = ({ 
-  row, 
-  style, 
-  isEditing, 
-  editingData, 
-  onEditingDataChange,
-  onSaveEditing,
-  onCancelEditing,
-  getRowId,
-  grouping,
-  editingRowId,
-  hierarchical,
-  actions,
-  rbac,
-  permissions
-}: { 
+// Row component props interface
+interface RowProps { 
   row: any; 
   style?: React.CSSProperties;
   isEditing?: boolean;
@@ -290,8 +249,29 @@ const MemoizedRow = ({
     canExport: { can: boolean; isLoading: boolean };
     canImport: { can: boolean; isLoading: boolean };
   };
-}) => {
-  const rowId = getRowId ? getRowId(row.original, row.index) : String(row.index);
+}
+
+// Row component with proper memoization
+const RowComponent = React.memo(({ 
+  row, 
+  style, 
+  isEditing, 
+  editingData, 
+  onEditingDataChange,
+  onSaveEditing,
+  onCancelEditing,
+  getRowId,
+  grouping,
+  editingRowId,
+  hierarchical,
+  actions,
+  rbac,
+  permissions
+}: RowProps) => {
+  const rowRef = useRef<HTMLTableRowElement>(null);
+  const firstInputRef = useRef<HTMLInputElement>(null);
+  
+  const rowId = getRowIdSafe(row.original, row.index, getRowId);
   
   // Hierarchical row styling - moved to top to avoid hoisting issues
   const hierarchicalRow = row.original as HierarchicalDataRow;
@@ -299,6 +279,40 @@ const MemoizedRow = ({
   const isParent = isHierarchical && hierarchicalRow.isParent;
   const isChild = isHierarchical && !hierarchicalRow.isParent;
   
+  // Auto-focus first editable field when entering edit mode
+  useEffect(() => {
+    if (isEditing && firstInputRef.current) {
+      firstInputRef.current.focus();
+      firstInputRef.current.select();
+    }
+  }, [isEditing]);
+
+  // Keyboard navigation (Enter to save, Escape to cancel)
+  useEffect(() => {
+    if (!isEditing) return;
+    
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const target = event.target as HTMLElement;
+      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+        if (event.key === 'Enter' && !event.shiftKey && target.tagName === 'INPUT') {
+          event.preventDefault();
+          onSaveEditing?.();
+        } else if (event.key === 'Escape') {
+          event.preventDefault();
+          onCancelEditing?.();
+        }
+      }
+    };
+
+    const currentRow = rowRef.current;
+    if (currentRow) {
+      currentRow.addEventListener('keydown', handleKeyDown);
+      return () => {
+        currentRow.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+  }, [isEditing, onSaveEditing, onCancelEditing]);
+  
   // Handle grouped rows
   if (row.getIsGrouped && row.getIsGrouped()) {
     const groupValue = row.getValue(grouping[0]);
@@ -346,52 +360,12 @@ const MemoizedRow = ({
                   key={cell.id} 
                   className={getTableCellClasses({
                     isCompact: true,
-                    className: "px-3 py-2 pl-8 whitespace-normal break-words"
+                    className: `px-3 py-2 pl-8 ${cell.column.id === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words'} ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`
                   })}
                 >
-                  <div className={`${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`}>
-                    {isSubRowEditing && cell.column.id !== 'actions' ? (
-                      // Check if column has a custom cell renderer - if so, use it in edit mode
-                      cell.column.columnDef.cell ? (
-                        flexRender(cell.column.columnDef.cell, {
-                          ...cell.getContext(),
-                          hierarchical: hierarchical,
-                          isParent: false,
-                          isChild: true,
-                          isHierarchical: false,
-                          rowId: subRowId,
-                          isExpanded: false,
-                          hasChildren: false,
-                          getIsEditing: () => true, // Always true in edit mode
-                          setValue: (value: any) => {
-                            if (typeof value === 'object' && value !== null) {
-                              onEditingDataChange?.({ ...editingData, ...value });
-                            } else {
-                              onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
-                            }
-                          }
-                        })
-                      ) : (
-                        // Fall back to default edit field rendering when no custom cell renderer
-                        renderEditField(cell.column, editingData?.[cell.column.id], (value) => {
-                          if (typeof value === 'object' && value !== null) {
-                            onEditingDataChange?.({ ...editingData, ...value });
-                          } else {
-                            onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
-                          }
-                        }, editingData)
-                      )
-                    ) : cell.column.id === 'actions' ? (
-                      <ActionButtons 
-                        row={row} 
-                        actions={actions}
-                        isEditing={isEditing}
-                        isParent={isParent}
-                        hierarchical={!!hierarchical}
-                        rbac={rbac}
-                        permissions={permissions}
-                      />
-                    ) : (
+                  {isSubRowEditing && cell.column.id !== 'actions' ? (
+                    // Check if column has a custom cell renderer - if so, use it in edit mode
+                    cell.column.columnDef.cell ? (
                       flexRender(cell.column.columnDef.cell, {
                         ...cell.getContext(),
                         hierarchical: hierarchical,
@@ -400,10 +374,48 @@ const MemoizedRow = ({
                         isHierarchical: false,
                         rowId: subRowId,
                         isExpanded: false,
-                        hasChildren: false
+                        hasChildren: false,
+                        getIsEditing: () => true, // Always true in edit mode
+                        setValue: (value: any) => {
+                          if (typeof value === 'object' && value !== null) {
+                            onEditingDataChange?.({ ...editingData, ...value });
+                          } else {
+                            onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
+                          }
+                        }
                       })
-                    )}
-                  </div>
+                    ) : (
+                      // Fall back to default edit field rendering when no custom cell renderer
+                      renderEditField(cell.column, editingData?.[cell.column.id], (value) => {
+                        if (typeof value === 'object' && value !== null) {
+                          onEditingDataChange?.({ ...editingData, ...value });
+                        } else {
+                          onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
+                        }
+                      }, editingData)
+                    )
+                  ) : cell.column.id === 'actions' ? (
+                    <ActionButtons 
+                      row={row} 
+                      actions={actions}
+                      isEditing={isEditing}
+                      isParent={isParent}
+                      hierarchical={!!hierarchical}
+                      rbac={rbac}
+                      permissions={permissions}
+                    />
+                  ) : (
+                    flexRender(cell.column.columnDef.cell, {
+                      ...cell.getContext(),
+                      hierarchical: hierarchical,
+                      isParent: false,
+                      isChild: true,
+                      isHierarchical: false,
+                      rowId: subRowId,
+                      isExpanded: false,
+                      hasChildren: false
+                    })
+                  )}
                 </td>
               ))}
             </tr>
@@ -418,7 +430,24 @@ const MemoizedRow = ({
     return null;
   }
   
-  // Regular row
+  // If we're in edit mode, use EditableRow for better UX (auto-focus, keyboard shortcuts)
+  if (isEditing && editingData && onEditingDataChange && onSaveEditing && onCancelEditing) {
+    return (
+      <EditableRow
+        row={row}
+        editingData={editingData}
+        onEditingDataChange={onEditingDataChange}
+        onSave={onSaveEditing}
+        onCancel={onCancelEditing}
+        actions={actions ?? []}
+        getRowId={getRowId}
+        isParent={isParent}
+        hierarchical={!!hierarchical}
+      />
+    );
+  }
+  
+  // Regular row (not in edit mode)
   const visibleCells = row.getVisibleCells();
   const allCells = row.getAllCells ? row.getAllCells() : [];
   
@@ -436,158 +465,79 @@ const MemoizedRow = ({
   
   return (
     <tr 
+      ref={rowRef}
       key={row.id} 
+      role="row"
       style={{
         ...style,
         ...(isChild && indentation > 0 ? { paddingLeft: `${indentation}px` } : {})
       }}
       className={rowClassName}
+      aria-selected={typeof row.getIsSelected === 'function' ? (row.getIsSelected() ? 'true' : 'false') : 'false'}
     >
       {visibleCells.map((cell: any, cellIndex: number) => {
-        // For hierarchical parent rows, add expansion button to the first cell
         const isFirstCell = cellIndex === 0;
         const shouldShowExpansionButton = isHierarchical && isParent && isFirstCell && hierarchical?.state;
         const isExpanded = shouldShowExpansionButton ? hierarchical?.state?.isExpanded(rowId) : false;
         const hasChildren = shouldShowExpansionButton ? hierarchical?.state?.hasChildren(rowId) : false;
         
-        // Debug logging for expander button conditions (development only)
-        if (import.meta.env.MODE === 'development' && isParent && isFirstCell) {
-          console.log('🔍 Expander Button Debug:', {
-            rowId,
-            isHierarchical,
-            isParent,
-            isFirstCell,
-            hasHierarchicalState: !!hierarchical?.state,
-            shouldShowExpansionButton,
-            hasChildren,
-            isExpanded
-          });
-        }
-        
-        
         return (
           <td 
             key={cell.id} 
             className={getTableCellClasses({
               isCompact: true,
-              className: "px-3 py-2 whitespace-normal break-words"
+              className: `px-3 py-2 ${cell.column.id === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words'} ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`
             })}
           >
-            <div className="flex items-center gap-2">
-              {/* Individual expansion button for hierarchical parent rows */}
-              {shouldShowExpansionButton && hasChildren && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => hierarchical?.state?.toggleRow(rowId)}
-                  className="h-6 w-6 p-0 flex-shrink-0"
-                  aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
-                  title={isExpanded ? 'Collapse row' : 'Expand row'}
-                >
-                  {isExpanded ? (
-                    <ChevronDown className="h-4 w-4" />
-                  ) : (
-                    <ChevronRight className="h-4 w-4" />
-                  )}
-                </Button>
-              )}
-              
-              {/* Cell content */}
-              <div className={`flex-1 ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`}>
-                {(() => {
-                  const columnDef = cell.column.columnDef as any;
-                  const isColumnEditable = columnDef.editable !== false;
-                  const shouldRenderEditField = isEditing && cell.column.id !== 'actions' && isColumnEditable;
-                  
-                  if (shouldRenderEditField) {
-                    // Render edit input fields for editable columns in edit mode
-                    return cell.column.columnDef.cell ? (
-                      flexRender(cell.column.columnDef.cell, {
-                        ...cell.getContext(),
-                        hierarchical: hierarchical,
-                        isParent: isParent,
-                        isChild: isChild,
-                        isHierarchical: isHierarchical,
-                        rowId: rowId,
-                        isExpanded: isExpanded,
-                        hasChildren: hasChildren,
-                        getIsEditing: () => true, // Always true in edit mode
-                        setValue: (value: any) => {
-                          if (typeof value === 'object' && value !== null) {
-                            onEditingDataChange?.({ ...editingData, ...value });
-                          } else {
-                            onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
-                          }
-                        }
-                      })
-                    ) : (
-                      renderEditField(cell.column, editingData?.[cell.column.id], (value) => {
-                        if (typeof value === 'object' && value !== null) {
-                          onEditingDataChange?.({ ...editingData, ...value });
-                        } else {
-                          onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
-                        }
-                      }, editingData)
-                    );
-                  }
-                  
-                  // Render normal cell (not in edit mode, or column not editable, or is actions column)
-                  if (cell.column.id === 'actions') {
-                    return isEditing ? (
-                      <div className="flex gap-1">
-                        <button
-                          onClick={onSaveEditing}
-                          className="h-8 w-8 p-0 hover:bg-muted/50 flex items-center justify-center"
-                          title="Save changes"
-                        >
-                          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                          </svg>
-                        </button>
-                        <button
-                          onClick={onCancelEditing}
-                          className="h-8 w-8 p-0 hover:bg-muted/50 flex items-center justify-center"
-                          title="Cancel changes"
-                        >
-                          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                          </svg>
-                        </button>
-                      </div>
-                    ) : (
-                      <ActionButtons 
-                        row={row} 
-                        actions={actions}
-                        isEditing={isEditing}
-                        isParent={isParent}
-                        hierarchical={!!hierarchical}
-                        rbac={rbac}
-                        permissions={permissions}
-                      />
-                    );
-                  }
-                  
-                  return flexRender(cell.column.columnDef.cell, {
-                    ...cell.getContext(),
-                    hierarchical: hierarchical,
-                    isParent: isParent,
-                    isChild: isChild,
-                    isHierarchical: isHierarchical,
-                    rowId: rowId,
-                    isExpanded: isExpanded,
-                    hasChildren: hasChildren,
-                  });
-                })()}
-              </div>
-            </div>
+            {shouldShowExpansionButton && hasChildren && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => hierarchical?.state?.toggleRow(rowId)}
+                className="h-6 w-6 p-0 flex-shrink-0"
+                aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
+                title={isExpanded ? 'Collapse row' : 'Expand row'}
+              >
+                {isExpanded ? (
+                  <ChevronDown className="h-4 w-4" />
+                ) : (
+                  <ChevronRight className="h-4 w-4" />
+                )}
+              </Button>
+            )}
+            {cell.column.id === 'actions' ? (
+              <ActionButtons 
+                row={row} 
+                actions={actions}
+                isEditing={isEditing}
+                isParent={isParent}
+                hierarchical={!!hierarchical}
+                rbac={rbac}
+                permissions={permissions}
+              />
+            ) : (
+              flexRender(cell.column.columnDef.cell, {
+                ...cell.getContext(),
+                hierarchical: hierarchical,
+                isParent: isParent,
+                isChild: isChild,
+                isHierarchical: isHierarchical,
+                rowId: rowId,
+                isExpanded: isExpanded,
+                hasChildren: hasChildren,
+              })
+            )}
           </td>
         );
       })}
     </tr>
   );
-};
+});
+
+RowComponent.displayName = 'RowComponent';
 
-MemoizedRow.displayName = 'MemoizedRow';
+// Use the already memoized RowComponent
+const MemoizedRow = RowComponent;
 
 /**
  * Unified table body component with intelligent virtualization
@@ -612,12 +562,6 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   onClearFilters,
   enableFiltering = false,
   showFilterRow = false,
-  enableColumnReordering = false,
-  onColumnOrderChange,
-  onColumnDrop,
-  savedColumnOrder,
-  enablePersistence = false,
-  tableId,
   dataLength,
   virtualHeight = 600,
   forceVirtualization = false,
@@ -639,16 +583,16 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   const rows = table.getRowModel().rows;
   const headerGroups = table.getHeaderGroups();
 
-  // Virtual scrolling setup
+  // Virtual scrolling setup - only create virtualizer when needed
   const virtualizer = useVirtualizer({
-    count: rows.length,
+    count: shouldVirtualize ? rows.length : 0,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 40,
     overscan: 5,
   });
 
-  const virtualRows = virtualizer.getVirtualItems();
-  const totalSize = virtualizer.getTotalSize();
+  const virtualRows = shouldVirtualize ? virtualizer.getVirtualItems() : [];
+  const totalSize = shouldVirtualize ? virtualizer.getTotalSize() : 0;
 
 
   // Render table content
@@ -680,7 +624,7 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
         const row = rows[virtualRow.index];
         if (!row) return null;
         
-        const rowId = getRowId ? getRowId(row.original, row.index) : String(row.index);
+        const rowId = getRowIdSafe(row.original, row.index, getRowId);
         const isEditing = editingRowId === rowId;
         
         return (
@@ -713,7 +657,7 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
     } else {
       // Standard rendering
       return rows.map((row) => {
-        const rowId = getRowId ? getRowId(row.original, row.index) : String(row.index);
+        const rowId = getRowIdSafe(row.original, row.index, getRowId);
         const isEditing = editingRowId === rowId;
         
         return (
@@ -761,10 +705,10 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
                 })}
               >
                 {renderEditField(header.column, creationData[header.column.id], (value) => {
-                  if (typeof value === 'object' && value !== null) {
-                    onCreationDataChange({ ...creationData, ...value });
+                  if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
+                    onCreationDataChange({ ...creationData, ...(value as Record<string, CellValue>) });
                   } else {
-                    onCreationDataChange({ ...creationData, [header.column.id]: value });
+                    onCreationDataChange({ ...creationData, [header.column.id]: value as CellValue });
                   }
                 }, creationData)}
               </td>