@jmruthers/pace-core 0.6.1 → 0.6.3

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

@@ -3,45 +3,35 @@
  * @package @jmruthers/pace-core
  * @module Components/DataTable/Components
  * @since 0.3.0
- * 
+ *
  * A unified table body component that handles both standard and virtualized rendering
  * based on data size. This eliminates the need for separate virtualized components
  * while maintaining all features consistently.
  */
 
-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';
-import { ChevronUp, ChevronDown, ChevronRight } from 'lucide-react';
+import React, { useEffect, useRef } from 'react';
+import { type Table } from '@tanstack/react-table';
+import { useVirtualizer, type VirtualItem } from '@tanstack/react-virtual';
 import { EmptyState } from './EmptyState';
 import { FilterRow } from './FilterRow';
-import { ActionButtons } from './ActionButtons';
-import { EditableRow } from './EditableRow';
-import { getTableCellClasses, getTableHeadClasses, getTableRowClasses } from '../styles';
+import { MemoizedRow } from './RowComponent';
+import { renderEditField } from './EditFields';
+import { getTableCellClasses } from '../styles';
 import { Input } from '../../Input/Input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectGroup, SelectLabel, SelectSeparator } from '../../Select/Select';
 import { createLogger } from '../../../utils/core/logger';
-import { cn } from '../../../utils/core/cn';
 import type {
   AggregateConfig,
+  CellValue,
   DataRecord,
   DataTableAction,
-  DataTableColumn,
   EditableColumnDef,
   EmptyStateConfig,
   HierarchicalConfig,
-  HierarchicalDataRow,
-  CellValue
 } from '../types';
-import { calculateIndentation } from '../utils/hierarchicalUtils';
 import { getRowIdSafe } from '../utils/rowUtils';
 
 // Performance thresholds
 const VIRTUALIZATION_THRESHOLD = 1000;
-const CHUNKING_THRESHOLD = 10000;
-const MEMORY_OPTIMIZATION_THRESHOLD = 100000;
 
 /**
  * Props for the unified table body component
@@ -123,752 +113,6 @@ interface UnifiedTableBodyProps<TData extends DataRecord> {
   };
 }
 
-// Component for select fields with searchable and creatable support
-function SelectEditField<TData extends DataRecord>({
-  columnDef,
-  accessorKey,
-  currentValue,
-  placeholder,
-  onChange,
-}: {
-  columnDef: EditableColumnDef<TData>;
-  accessorKey: string;
-  currentValue: CellValue;
-  placeholder?: string;
-  onChange: (value: CellValue) => void;
-}) {
-  const logger = createLogger('SelectEditField');
-  // Determine if searchable - explicitly check for true to ensure visible search input appears
-  // When selectSearchable is true or undefined, show the visible search input box
-  // When selectSearchable is false, hide the search input (type-to-search still works via SelectContent internals)
-  const isSearchable = columnDef.selectSearchable !== false;
-  const isCreatable = columnDef.creatable === true;
-  const selectRef = React.useRef<HTMLFormElement>(null);
-  const [searchTerm, setSearchTerm] = React.useState('');
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [showCreateOption, setShowCreateOption] = React.useState(false);
-
-  // Monitor search input value via DOM events to detect when user types
-  React.useEffect(() => {
-    if (!isOpen || !isSearchable || !isCreatable || !columnDef.onCreateNew) {
-      // Reset showCreateOption when conditions aren't met
-      if (!isOpen || !isCreatable || !columnDef.onCreateNew) {
-        setShowCreateOption(false);
-      }
-      return;
-    }
-    
-    // Function to find and attach listener to search input
-    const findAndAttachSearchInput = (): (() => void) | null => {
-      // Try to find search input - check both within selectRef and document
-      // SelectContent might be rendered outside the form element
-      let searchInput: HTMLInputElement | null = null;
-      
-      if (selectRef.current) {
-        searchInput = selectRef.current.querySelector<HTMLInputElement>('[data-testid="select-search-input"]');
-      }
-      
-      // If not found in selectRef, try document (in case SelectContent is in a portal)
-      if (!searchInput) {
-        // Find the most recently opened select's search input
-        const allSearchInputs = document.querySelectorAll<HTMLInputElement>('[data-testid="select-search-input"]');
-        // Get the one that's visible (not hidden)
-        for (const input of Array.from(allSearchInputs)) {
-          const content = input.closest('[data-testid="select-content"]');
-          if (content && content.getAttribute('aria-hidden') !== 'true') {
-            searchInput = input;
-            break;
-          }
-        }
-      }
-      
-      if (!searchInput) return null;
-
-      const handleInput = (e: Event) => {
-        const target = e.target as HTMLInputElement;
-        const currentSearch = target.value;
-        setSearchTerm(currentSearch);
-        
-        // Check if search doesn't match any option (including items in groups)
-        if (currentSearch.trim()) {
-          const searchLower = currentSearch.toLowerCase().trim();
-          
-          // Helper to check if an option matches
-          // Use explicit union type instead of typeof to avoid Babel parsing issues
-          type FieldOption = 
-            | { value: string | number; label: string }
-            | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }
-            | { type: 'separator' };
-          
-          const checkMatch = (opt: FieldOption): boolean => {
-            // Simple option
-            if ('value' in opt && !('type' in opt)) {
-              return opt.label.toLowerCase().includes(searchLower);
-            }
-            // Group - check items within the group
-            if ('type' in opt && opt.type === 'group') {
-              return (opt as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }).items.some((item: { value: string | number; label: string }) => item.label.toLowerCase().includes(searchLower));
-            }
-            // Separator - doesn't match
-            return false;
-          };
-          
-          const hasMatch = (columnDef.fieldOptions || []).some(checkMatch);
-          // Always show create option when there's a search term (user might want to create even if matches exist)
-          const shouldShow = isCreatable && !!columnDef.onCreateNew;
-          
-          setShowCreateOption(shouldShow);
-        } else {
-          setShowCreateOption(false);
-        }
-      };
-
-      // Check initial value in case user has already typed
-      const initialValue = searchInput.value;
-      if (initialValue) {
-        const currentSearch = initialValue;
-        setSearchTerm(currentSearch);
-        
-        // Check if search doesn't match any option (including items in groups)
-        if (currentSearch.trim()) {
-          const searchLower = currentSearch.toLowerCase().trim();
-          
-          type FieldOption = 
-            | { value: string | number; label: string }
-            | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }
-            | { type: 'separator' };
-          
-          const checkMatch = (opt: FieldOption): boolean => {
-            if ('value' in opt && !('type' in opt)) {
-              return opt.label.toLowerCase().includes(searchLower);
-            }
-            if ('type' in opt && opt.type === 'group') {
-              return (opt as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }).items.some((item: { value: string | number; label: string }) => item.label.toLowerCase().includes(searchLower));
-            }
-            return false;
-          };
-          
-          const hasMatch = (columnDef.fieldOptions || []).some(checkMatch);
-          // Always show create option when there's a search term (user might want to create even if matches exist)
-          const shouldShow = isCreatable && !!columnDef.onCreateNew;
-          setShowCreateOption(shouldShow);
-        } else {
-          setShowCreateOption(false);
-        }
-      }
-
-      searchInput.addEventListener('input', handleInput);
-      
-      return () => {
-        searchInput?.removeEventListener('input', handleInput);
-      };
-    };
-
-    // Try to find immediately
-    let cleanup: (() => void) | null = findAndAttachSearchInput();
-    
-    // If not found, try again after a short delay (SelectContent might render asynchronously)
-    if (!cleanup) {
-      let timeoutCleanup: (() => void) | null = null;
-      const timeoutId = setTimeout(() => {
-        timeoutCleanup = findAndAttachSearchInput();
-      }, 50);
-      
-      return () => {
-        clearTimeout(timeoutId);
-        timeoutCleanup?.();
-      };
-    }
-    
-    return cleanup;
-  }, [isOpen, isSearchable, isCreatable, columnDef.fieldOptions, columnDef.onCreateNew]);
-
-  const handleCreateNew = React.useCallback(async () => {
-    if (!isCreatable || !columnDef.onCreateNew || !searchTerm.trim()) return;
-    
-    try {
-      const newValue = await columnDef.onCreateNew(searchTerm.trim());
-      onChange(newValue);
-      setSearchTerm('');
-      setShowCreateOption(false);
-    } catch (error) {
-      logger.error('Error creating new item:', error);
-    }
-  }, [isCreatable, columnDef.onCreateNew, searchTerm, onChange, logger]);
-
-  return (
-    <Select
-      ref={selectRef}
-      value={String(currentValue)}
-      onValueChange={(newValue) => {
-        if (newValue.startsWith('__create_new__')) {
-          handleCreateNew();
-        } else {
-          onChange(newValue as CellValue);
-        }
-      }}
-      onOpenChange={(open) => {
-        setIsOpen(open);
-        if (!open) {
-          setSearchTerm('');
-          setShowCreateOption(false);
-        }
-      }}
-    >
-      <SelectTrigger className="h-8">
-        <SelectValue placeholder={placeholder || `Select ${columnDef.header || 'option'}...`} />
-      </SelectTrigger>
-      <SelectContent 
-        searchable={Boolean(isSearchable)}
-        searchPlaceholder={`Search ${columnDef.header || 'options'}...`}
-        maxHeight={columnDef.selectMaxHeight}
-        className={columnDef.selectContentClassName}
-        style={columnDef.selectContentStyle}
-      >
-        {columnDef.fieldOptions?.map((option, index) => {
-          // Simple option item
-          if ('value' in option && !('type' in option)) {
-            return (
-              <SelectItem key={`${option.value}-${index}`} value={String(option.value)}>
-                {option.label}
-              </SelectItem>
-            );
-          }
-          
-          // Separator
-          if ('type' in option && option.type === 'separator') {
-            return <SelectSeparator key={`separator-${index}`} />;
-          }
-          
-          // Group with label
-          if ('type' in option && option.type === 'group') {
-            const groupOption = option as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> };
-            return (
-              <SelectGroup key={`group-${groupOption.label}-${index}`}>
-                <SelectLabel>{groupOption.label}</SelectLabel>
-                {groupOption.items.map((item: { value: string | number; label: string }) => (
-                  <SelectItem key={`${item.value}-${index}`} value={String(item.value)}>
-                    {item.label}
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            );
-          }
-          
-          return null;
-        })}
-        {showCreateOption && isCreatable && searchTerm.trim() && columnDef.onCreateNew && (
-          <SelectItem 
-            key="__create_new__" 
-            value={`__create_new__${searchTerm}`}
-            className="bg-main-100 font-medium border-t border-main-200"
-          >
-            Create "{searchTerm}"
-          </SelectItem>
-        )}
-      </SelectContent>
-    </Select>
-  );
-}
-
-// Helper function to render the appropriate input type based on column configuration
-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 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-sec-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 ?? '';
-
-    return (
-      <SelectEditField
-        columnDef={columnDef}
-        accessorKey={accessorKey}
-        currentValue={currentValue}
-        placeholder={placeholder}
-        onChange={(newValue) => onChange({ [accessorKey]: newValue })}
-      />
-    );
-  }
-  
-  // Check for number type (applies to number, currency, and percentage fields)
-  if (columnDef.fieldType === 'number') {
-    // Hide spinner arrows by default for all number-related fields
-    // Currency and percentage columns use fieldType: 'number' with formatting in cell renderer
-    // Only show spinners if explicitly set to false
-    const hideSpinners = columnDef.hideNumberSpinners !== false; // Default to true
-    return (
-      <Input
-        type="number"
-        value={String(value ?? '')}
-        onChange={(e) => onChange(e.target.value as unknown as CellValue)}
-        placeholder={placeholder || `Enter ${columnDef.header || column.id}...`}
-        className={`h-8 ${hideSpinners ? 'datatable-number-no-spinners' : ''}`}
-      />
-    );
-  }
-
-  // Check for date type
-  if (columnDef.fieldType === 'date') {
-    return (
-      <Input
-        type="date"
-        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={String(value ?? '')}
-      onChange={(e) => onChange(e.target.value as unknown as CellValue)}
-      placeholder={placeholder || `Enter ${columnDef.header || column.id}...`}
-      className="h-8"
-    />
-  );
-};
-
-// Row component props interface
-interface RowProps { 
-  row: any; 
-  style?: React.CSSProperties;
-  isEditing?: boolean;
-  editingData?: Record<string, any>;
-  onEditingDataChange?: (data: Record<string, any>) => void;
-  onSaveEditing?: () => void;
-  onCancelEditing?: () => void;
-  getRowId?: (row: any, index: number) => string;
-  grouping: string[];
-  editingRowId?: string | null;
-  hierarchical?: HierarchicalConfig & {
-    state?: {
-      isExpanded: (rowId: string) => boolean;
-      hasChildren: (rowId: string) => boolean;
-      getChildrenCount: (rowId: string) => number;
-      toggleRow: (rowId: string) => void;
-    };
-  };
-  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;
-  }>;
-  rbac?: {
-    pageId?: string;
-    pageName?: string;
-  };
-  permissions?: {
-    canRead: { can: boolean; isLoading: boolean };
-    canCreate: { can: boolean; isLoading: boolean };
-    canUpdate: { can: boolean; isLoading: boolean };
-    canDelete: { can: boolean; isLoading: boolean };
-    canExport: { can: boolean; isLoading: boolean };
-    canImport: { can: boolean; isLoading: boolean };
-  };
-}
-
-// 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 logger = createLogger('RowComponent');
-  
-  const rowId = getRowIdSafe(row.original, row.index, getRowId);
-  
-  // Hierarchical row styling - moved to top to avoid hoisting issues
-  const hierarchicalRow = row.original as HierarchicalDataRow;
-  const isHierarchical = hierarchical?.enabled && hierarchicalRow?.isParent !== undefined;
-  const isParent = isHierarchical && hierarchicalRow.isParent;
-  const isChild = isHierarchical && !hierarchicalRow.isParent;
-  
-  // React Compiler handles memoization automatically
-  const visibleCells = row.getVisibleCells();
-  const isSelected = typeof row.getIsSelected === 'function' ? row.getIsSelected() : false;
-  
-  // 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]);
-    const subRowsCount = row.subRows?.length || 0;
-    const isExpanded = row.getIsExpanded();
-    
-    // Get child rows for aggregation (convert TanStack Row to original data)
-    const childRows: DataRecord[] = row.subRows?.map((subRow: any) => subRow.original) || [];
-    
-    // Render individual cells for each column with aggregation support
-    return (
-      <tr className="bg-sec-50 hover:bg-sec-100" style={style}>
-        {visibleCells.map((cell: any, cellIndex: number) => {
-          const columnDef = cell.column.columnDef as DataTableColumn<DataRecord>;
-          const isGroupingColumn = cellIndex === 0 || grouping.includes(cell.column.id || '');
-          
-          // For the grouping column, show the group header with expand/collapse
-          if (isGroupingColumn && cellIndex === 0) {
-            return (
-              <td
-                key={cell.id}
-                className={getTableCellClasses({
-                  isCompact: true,
-                  className: "px-3 py-2 flex items-center font-medium"
-                })}
-              >
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => row.toggleExpanded()}
-                  className="p-0 h-auto mr-2"
-                >
-                  {isExpanded ? (
-                    <ChevronDown className="size-4" />
-                  ) : (
-                    <ChevronRight className="size-4" />
-                  )}
-                </Button>
-                <span className="text-sm">
-                  {String(groupValue)} ({subRowsCount} items)
-                </span>
-              </td>
-            );
-          }
-          
-          // For other columns, check if they have aggregation functions
-          if (columnDef.aggregateFn && childRows.length > 0) {
-            try {
-              // Call the aggregation function with child rows
-              const aggregatedValue = columnDef.aggregateFn(childRows, columnDef);
-              
-              // Use aggregateCell renderer if provided, otherwise use regular cell renderer
-              let cellContent: React.ReactNode;
-              if (columnDef.aggregateCell) {
-                cellContent = columnDef.aggregateCell(aggregatedValue, childRows, columnDef);
-              } else if (columnDef.cell) {
-                // Use regular cell renderer with a mock cell context
-                // Create a mock cell object for the aggregated value
-                const mockCell = {
-                  ...cell,
-                  getValue: () => aggregatedValue,
-                  renderValue: () => aggregatedValue,
-                };
-                cellContent = flexRender(columnDef.cell, {
-                  ...mockCell,
-                  row: row,
-                  column: cell.column,
-                  cell: mockCell,
-                  getValue: () => aggregatedValue,
-                  renderValue: () => aggregatedValue,
-                });
-              } else {
-                // Fallback to displaying the raw value
-                cellContent = aggregatedValue != null ? String(aggregatedValue) : '';
-              }
-              
-              return (
-                <td
-                  key={cell.id}
-                  className={getTableCellClasses({
-                    isCompact: true,
-                    className: `px-3 py-2 ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`
-                  })}
-                >
-                  {cellContent}
-                </td>
-              );
-            } catch (error) {
-              // If aggregation fails, show empty cell
-              logger.warn('Error in aggregation function:', error);
-              return (
-                <td
-                  key={cell.id}
-                  className={getTableCellClasses({
-                    isCompact: true,
-                    className: "px-3 py-2"
-                  })}
-                />
-              );
-            }
-          }
-          
-          // For columns without aggregation, show empty cell
-          return (
-            <td
-              key={cell.id}
-              className={getTableCellClasses({
-                isCompact: true,
-                className: "px-3 py-2"
-              })}
-            />
-          );
-        })}
-      </tr>
-    );
-  }
-  
-  // CRITICAL FIX: Removed the buggy filter that was hiding all rows when grouping is enabled
-  // TanStack Table's getRowModel() already correctly handles collapsing/expanding groups,
-  // returning only visible rows (group headers + children of expanded groups).
-  // The previous check was incorrectly filtering out all child rows regardless of parent expansion state,
-  // causing the bug where DataTable showed record count but no rows for large datasets.
-  // 
-  // When grouping is enabled:
-  // - Group headers are rendered above (lines 317-426)
-  // - Child rows are ONLY in getRowModel().rows if their parent is expanded
-  // - Collapsed groups' children are NOT in getRowModel().rows (handled by TanStack Table)
-  // 
-  // Therefore, we should trust getRowModel() and render all rows it returns.
-  
-  // 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)
-  // visibleCells is already memoized above
-  
-  // Calculate indentation for child rows
-  const indentSize = hierarchical?.indentSize || 24;
-  const indentation = React.useMemo(() => {
-    return isChild && hierarchical?.state ? 
-      calculateIndentation(hierarchicalRow, [], indentSize) : 0;
-  }, [isChild, hierarchical?.state, hierarchicalRow, indentSize]);
-  
-  // Apply hierarchical row classes - combine with standard row classes
-  const rowClassName = React.useMemo(() => {
-    if (isHierarchical) {
-      const hierarchicalClass = isParent 
-        ? hierarchical?.parentRowClassName || 'bg-main-50 hover:bg-main-100 font-medium'
-        : hierarchical?.childRowClassName || 'bg-sec-25 hover:bg-sec-50';
-      // Combine with standard row classes for consistent hover behavior
-      return cn(
-        getTableRowClasses({ isSelected, isVirtualized: false }),
-        hierarchicalClass
-      );
-    }
-    // Use standard row classes when not hierarchical
-    return getTableRowClasses({ isSelected, isVirtualized: false });
-  }, [isHierarchical, isParent, isSelected, hierarchical]);
-  
-  return (
-    <tr 
-      ref={rowRef}
-      key={row.id} 
-      role="row"
-      style={{
-        ...style,
-        ...(isChild && indentation > 0 ? { paddingLeft: `${indentation}px` } : {})
-      }}
-      className={rowClassName}
-      aria-selected={isSelected ? 'true' : 'false'}
-    >
-      {visibleCells.map((cell: any, cellIndex: number) => {
-        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;
-        
-        return (
-          <td 
-            key={cell.id} 
-            className={getTableCellClasses({
-              isCompact: true,
-              className: `px-3 py-2 ${cell.column.id === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words'} ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`
-            })}
-          >
-            {shouldShowExpansionButton && hasChildren && (
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() => hierarchical?.state?.toggleRow(rowId)}
-                className="size-6 p-0 flex-shrink-0"
-                aria-label={isExpanded ? 'Collapse row' : 'Expand row'}
-                title={isExpanded ? 'Collapse row' : 'Expand row'}
-              >
-                {isExpanded ? (
-                  <ChevronDown className="size-4" />
-                ) : (
-                  <ChevronRight className="size-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';
-
-// Custom comparison function for React.memo to prevent unnecessary re-renders
-// This compares the actual row data and props, not just object references
-const areRowPropsEqual = (prevProps: RowProps, nextProps: RowProps): boolean => {
-  // Compare row by ID and index (stable identifiers)
-  if (prevProps.row.id !== nextProps.row.id || prevProps.row.index !== nextProps.row.index) {
-    return false;
-  }
-  
-  // Compare editing state
-  if (prevProps.isEditing !== nextProps.isEditing) {
-    return false;
-  }
-  
-  if (prevProps.editingRowId !== nextProps.editingRowId) {
-    return false;
-  }
-  
-  // Compare style object (shallow comparison)
-  if (prevProps.style !== nextProps.style) {
-    if (!prevProps.style || !nextProps.style) {
-      return false;
-    }
-    // Convert to records for comparison
-    const prevStyle = prevProps.style as Record<string, unknown>;
-    const nextStyle = nextProps.style as Record<string, unknown>;
-    const styleKeys = new Set([...Object.keys(prevStyle), ...Object.keys(nextStyle)]);
-    for (const key of styleKeys) {
-      if (prevStyle[key] !== nextStyle[key]) {
-        return false;
-      }
-    }
-  }
-  
-  // Compare other primitive props
-  if (prevProps.grouping.length !== nextProps.grouping.length ||
-      prevProps.grouping.some((id, i) => id !== nextProps.grouping[i])) {
-    return false;
-  }
-  
-  // For hierarchical state, compare the enabled flag and state functions
-  if (prevProps.hierarchical?.enabled !== nextProps.hierarchical?.enabled) {
-    return false;
-  }
-  
-  // Compare row selection state by checking the function result
-  const prevSelected = typeof prevProps.row.getIsSelected === 'function' ? prevProps.row.getIsSelected() : false;
-  const nextSelected = typeof nextProps.row.getIsSelected === 'function' ? nextProps.row.getIsSelected() : false;
-  if (prevSelected !== nextSelected) {
-    return false;
-  }
-  
-  // If all checks pass, props are equal
-  return true;
-};
-
-// Use the memoized RowComponent with custom comparison
-const MemoizedRow = React.memo(RowComponent, areRowPropsEqual);
-
 /**
  * Unified table body component with intelligent virtualization
  */
@@ -885,7 +129,7 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   onSaveEditing,
   onCancelEditing,
   grouping,
-  aggregates,
+  aggregates: _aggregates,
   getRowId,
   emptyState,
   isFiltered,
@@ -893,33 +137,26 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   enableFiltering = false,
   showFilterRow = false,
   dataLength,
-  virtualHeight = 600,
+  virtualHeight: _virtualHeight = 600,
   forceVirtualization = false,
   hierarchical,
   actions = [],
   rbac,
-  permissions
+  permissions,
 }: UnifiedTableBodyProps<TData>) {
   const logger = createLogger('UnifiedTableBody');
-  
-  const headerRef = useRef<HTMLTableSectionElement>(null);
+
   const bodyRef = useRef<HTMLTableSectionElement>(null);
   const parentRef = useRef<HTMLDivElement>(null);
 
-  // Determine if virtualization should be used
   const shouldVirtualize = forceVirtualization || dataLength > VIRTUALIZATION_THRESHOLD;
-  
-  // Get table data
+
   const rows = table.getRowModel().rows;
   const headerGroups = table.getHeaderGroups();
 
-  // CRITICAL FIX: Virtual scrolling requires a scroll container (parentRef).
-  // If virtualization is enabled but no scroll container exists, fall back to standard rendering.
-  // This fixes the bug where rows exist but nothing renders when virtualization is enabled.
   const hasScrollContainer = !!parentRef.current;
   const effectiveShouldVirtualize = shouldVirtualize && hasScrollContainer;
-  
-  // Virtual scrolling setup - only create virtualizer when we have a scroll container
+
   const virtualizer = useVirtualizer({
     count: effectiveShouldVirtualize ? rows.length : 0,
     getScrollElement: () => parentRef.current || null,
@@ -928,9 +165,7 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   });
 
   const virtualRows = effectiveShouldVirtualize ? virtualizer.getVirtualItems() : [];
-  const totalSize = effectiveShouldVirtualize ? virtualizer.getTotalSize() : 0;
-  
-  // Warning if virtualization is expected but no container exists
+
   useEffect(() => {
     if (shouldVirtualize && !hasScrollContainer) {
       logger.warn('Virtualization enabled but no scroll container found. Falling back to standard rendering.', {
@@ -940,17 +175,11 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
     }
   }, [shouldVirtualize, hasScrollContainer, rows.length, dataLength, logger]);
 
-
-  // Render table content
   const renderTableContent = () => {
     if (rows.length === 0) {
       return (
         <tr>
-          <td 
-            colSpan={table.getVisibleFlatColumns().length} 
-            className="px-3 py-2" 
-            role="status"
-          >
+          <td colSpan={table.getVisibleFlatColumns().length} className="px-3 py-2" role="status">
             <EmptyState
               title={emptyState?.title}
               description={emptyState?.description}
@@ -965,14 +194,13 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
     }
 
     if (effectiveShouldVirtualize && virtualRows.length > 0) {
-      // Virtualized rendering
-      return virtualRows.map((virtualRow) => {
+      return virtualRows.map((virtualRow: VirtualItem) => {
         const row = rows[virtualRow.index];
         if (!row) return null;
-        
+
         const rowId = getRowIdSafe(row.original, row.index, getRowId);
         const isEditing = editingRowId === rowId;
-        
+
         return (
           <MemoizedRow
             key={row.id}
@@ -1000,32 +228,31 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
           />
         );
       });
-    } else {
-      // Standard rendering
-      return rows.map((row) => {
-        const rowId = getRowIdSafe(row.original, row.index, getRowId);
-        const isEditing = editingRowId === rowId;
-        
-        return (
-          <MemoizedRow
-            key={row.id}
-            row={row}
-            isEditing={isEditing}
-            editingData={editingData}
-            onEditingDataChange={onEditingDataChange}
-            onSaveEditing={onSaveEditing}
-            onCancelEditing={onCancelEditing}
-            getRowId={getRowId}
-            grouping={grouping}
-            editingRowId={editingRowId}
-            hierarchical={hierarchical}
-            actions={actions}
-            rbac={rbac}
-            permissions={permissions}
-          />
-        );
-      });
     }
+
+    return rows.map((row) => {
+      const rowId = getRowIdSafe(row.original, row.index, getRowId);
+      const isEditing = editingRowId === rowId;
+
+      return (
+        <MemoizedRow
+          key={row.id}
+          row={row}
+          isEditing={isEditing}
+          editingData={editingData}
+          onEditingDataChange={onEditingDataChange}
+          onSaveEditing={onSaveEditing}
+          onCancelEditing={onCancelEditing}
+          getRowId={getRowId}
+          grouping={grouping}
+          editingRowId={editingRowId}
+          hierarchical={hierarchical}
+          actions={actions}
+          rbac={rbac}
+          permissions={permissions}
+        />
+      );
+    });
   };
 
   return (
@@ -1035,60 +262,50 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
       {isCreating && (
         <tr>
           {headerGroups[0]?.headers
-            ?.filter(header => {
-              // Check if getIsVisible method exists and call it, otherwise assume visible
-              return typeof header.column.getIsVisible === 'function' 
-                ? header.column.getIsVisible() 
-                : true;
+            ?.filter((header) => {
+              return typeof header.column.getIsVisible === 'function' ? header.column.getIsVisible() : true;
             })
-            ?.filter(header => header.column.id !== 'actions') // Only exclude actions column
+            ?.filter((header) => header.column.id !== 'actions')
             ?.map((header) => {
-              // Handle select column separately - render empty checkbox cell for alignment
               if (header.column.id === 'select') {
                 return (
-                  <td 
-                    key={header.column.id} 
+                  <td
+                    key={header.column.id}
                     className={getTableCellClasses({
                       isCompact: true,
-                      className: "px-3 py-2"
+                      className: 'px-3 py-2',
                     })}
                   >
                     {/* Empty cell for selection checkbox to maintain alignment */}
                   </td>
                 );
               }
-              
-              // Render edit fields for data columns
-              // Determine the correct key to use for creationData
-              // Priority: editAccessorKey > accessorKey > column.id
+
               const columnDef = header.column.columnDef as EditableColumnDef<TData>;
               const dataKey = columnDef.editAccessorKey || columnDef.accessorKey || header.column.id;
-              
-              // Always render a cell to maintain alignment - renderEditField always returns something
+
               const editField = renderEditField(
-                header.column, 
-                creationData[dataKey] ?? creationData[header.column.id] ?? '', 
+                header.column,
+                creationData[dataKey] ?? creationData[header.column.id] ?? '',
                 (value) => {
                   if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
                     onCreationDataChange({ ...creationData, ...(value as Record<string, CellValue>) });
                   } else {
-                    // Use the determined dataKey for consistent data access
                     onCreationDataChange({ ...creationData, [dataKey]: value as CellValue });
                   }
-                }, 
+                },
                 creationData
               );
-              
+
               return (
-                <td 
-                  key={header.column.id} 
+                <td
+                  key={header.column.id}
                   className={getTableCellClasses({
                     isCompact: true,
-                    className: "px-3 py-2"
+                    className: 'px-3 py-2',
                   })}
                 >
                   {editField || (
-                    // Fallback: render a text input if renderEditField somehow returns nothing
                     <Input
                       type="text"
                       value={String(creationData[dataKey] ?? creationData[header.column.id] ?? '')}
@@ -1100,10 +317,10 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
                 </td>
               );
             })}
-          <td 
+          <td
             className={getTableCellClasses({
               isCompact: true,
-              className: "px-3 py-2 flex gap-1"
+              className: 'px-3 py-2 flex gap-1',
             })}
           >
             <button
@@ -1127,15 +344,10 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
           </td>
         </tr>
       )}
-      
+
       {/* Filter Row */}
-      {showFilterRow && enableFiltering && (
-        <FilterRow 
-          table={table} 
-          visibleColumns={table.getHeaderGroups()[0]?.headers || []} 
-        />
-      )}
-      
+      {showFilterRow && enableFiltering && <FilterRow table={table} visibleColumns={table.getHeaderGroups()[0]?.headers || []} />}
+
       {/* Table Content */}
       {renderTableContent()}
     </tbody>