@jmruthers/pace-core 0.2.4

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

@@ -0,0 +1,911 @@
+/**
+ * @file Unified Table Body Component with Virtual Scrolling
+ * @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 } from 'react';
+import { type Table, flexRender } from '@tanstack/react-table';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { TableBody, TableHead, TableHeader, TableRow, TableCell } from '../../Table/Table';
+import { Button } from '../../Button/Button';
+import { ChevronUp, ChevronDown, ChevronRight } from 'lucide-react';
+import { EmptyState } from './EmptyState';
+import { FilterRow } from './FilterRow';
+import { ActionButtons } from './ActionButtons';
+import { DraggableColumnHeader } from './DraggableColumnHeader';
+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 { calculateIndentation } from '../utils/hierarchicalUtils';
+
+// Performance thresholds
+const VIRTUALIZATION_THRESHOLD = 1000;
+const CHUNKING_THRESHOLD = 10000;
+const MEMORY_OPTIMIZATION_THRESHOLD = 100000;
+
+/**
+ * Props for the unified table body component
+ */
+interface UnifiedTableBodyProps<TData extends Record<string, any>> {
+  /** 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>;
+  /** Callback when creation data changes */
+  onCreationDataChange: (data: Record<string, any>) => void;
+  /** Callback to save the new row */
+  onSaveCreation: () => void;
+  /** Callback to cancel row creation */
+  onCancelCreation: () => void;
+  /** ID of the row currently being edited */
+  editingRowId: string | null;
+  /** Data for the row being edited */
+  editingData: Record<string, any>;
+  /** Callback when editing data changes */
+  onEditingDataChange: (data: Record<string, any>) => void;
+  /** Callback to save the edited row */
+  onSaveEditing?: () => void;
+  /** Callback to cancel row editing */
+  onCancelEditing?: () => void;
+  /** Current grouping configuration */
+  grouping: string[];
+  /** Aggregate configurations for grouped data */
+  aggregates: AggregateConfig[];
+  /** 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;
+    };
+  };
+  /** Whether the table is currently filtered */
+  isFiltered?: boolean;
+  /** Callback to clear all filters */
+  onClearFilters?: () => void;
+  /** Whether filtering is enabled */
+  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 */
+  dataLength: number;
+  /** Virtual height for virtualized rendering */
+  virtualHeight?: number;
+  /** Whether to force virtualization */
+  forceVirtualization?: boolean;
+  /** Hierarchical configuration for parent/child rows */
+  hierarchical?: HierarchicalConfig & {
+    state?: {
+      isExpanded: (rowId: string) => boolean;
+      hasChildren: (rowId: string) => boolean;
+      getChildrenCount: (rowId: string) => number;
+      toggleRow: (rowId: string) => void;
+    };
+    expandAll?: () => void;
+    collapseAll?: () => void;
+    isAllExpanded?: boolean;
+    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;
+  }>;
+}
+
+// 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> = {},
+  placeholder?: string
+) => {
+  const columnDef = column.columnDef;
+  
+  // 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 (
+      <Select
+        value={currentValue}
+        onValueChange={(newValue) => onChange({ [accessorKey]: newValue })}
+      >
+        <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}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  }
+  
+  // Check for number type
+  if (columnDef.fieldType === 'number') {
+    return (
+      <Input
+        type="number"
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        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)}
+        className="h-8"
+      />
+    );
+  }
+  
+  // Default to text input
+  return (
+    <Input
+      type="text"
+      value={value || ''}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder || `Enter ${columnDef.header || column.id}...`}
+      className="h-8"
+    />
+  );
+};
+
+// Row component without memoization to ensure column visibility works
+const MemoizedRow = ({ 
+  row, 
+  style, 
+  columnSizes, 
+  isEditing, 
+  editingData, 
+  onEditingDataChange,
+  onSaveEditing,
+  onCancelEditing,
+  getRowId,
+  grouping,
+  editingRowId,
+  hierarchical,
+  actions
+}: { 
+  row: any; 
+  style?: React.CSSProperties;
+  columnSizes: Record<string, number>;
+  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;
+  }>;
+}) => {
+  const rowId = getRowId ? getRowId(row.original, row.index) : String(row.index);
+  
+  // Handle grouped rows
+  if (row.getIsGrouped && row.getIsGrouped()) {
+    const groupValue = row.getValue(grouping[0]);
+    const subRowsCount = row.subRows?.length || 0;
+    const isExpanded = row.getIsExpanded();
+    
+    return (
+      <React.Fragment>
+        {/* Group Header Row */}
+        <TableRow className="bg-sec-50 hover:bg-sec-100" style={style}>
+          <TableCell 
+            className={getTableCellClasses({
+              isCompact: true,
+              className: "px-3 py-2 flex items-center font-medium"
+            })} 
+            colSpan={row.getAllCells().length}
+            style={{
+              width: '100%',
+              minWidth: '100%',
+            }}
+          >
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => row.toggleExpanded()}
+              className="p-0 h-auto mr-2"
+            >
+              {isExpanded ? (
+                <ChevronDown className="h-4 w-4" />
+              ) : (
+                <ChevronRight className="h-4 w-4" />
+              )}
+            </Button>
+            <span className="text-sm">
+              {String(groupValue)} ({subRowsCount} items)
+            </span>
+          </TableCell>
+        </TableRow>
+        
+        {/* Render sub-rows if expanded */}
+        {isExpanded && row.subRows?.map((subRow: any) => {
+          const subRowId = getRowId ? getRowId(subRow.original, subRow.index) : String(subRow.index);
+          const isSubRowEditing = editingRowId === subRowId;
+          
+          return (
+            <TableRow key={subRow.id} className="border-l-2 border-l-blue-200" style={style}>
+              {subRow.getVisibleCells().map((cell: any) => (
+                <TableCell 
+                  key={cell.id} 
+                  className={getTableCellClasses({
+                    isCompact: true,
+                    className: "px-3 py-2 pl-8 whitespace-normal break-words"
+                  })}
+                  style={{
+                    width: columnSizes[cell.column.id] || (cell.column?.getSize ? cell.column.getSize() : 120),
+                  }}
+                >
+                  {isSubRowEditing && cell.column.id !== 'actions' ? (
+                    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}
+                    />
+                  ) : (
+                    flexRender(cell.column.columnDef.cell, {
+                      ...cell.getContext(),
+                      hierarchical: hierarchical,
+                      isParent: false,
+                      isChild: true,
+                      isHierarchical: false,
+                      rowId: subRowId,
+                      isExpanded: false,
+                      hasChildren: false
+                    })
+                  )}
+                </TableCell>
+              ))}
+            </TableRow>
+          );
+        })}
+      </React.Fragment>
+    );
+  }
+  
+  // Skip leaf rows when grouping is enabled
+  if (grouping.length > 0 && typeof row.getParentRow === 'function' && row.getParentRow() && (!row.getIsGrouped || !row.getIsGrouped())) {
+    return null;
+  }
+  
+  // Regular row
+  const visibleCells = row.getVisibleCells();
+  const allCells = row.getAllCells ? row.getAllCells() : [];
+  
+  // Hierarchical row styling
+  const hierarchicalRow = row.original as HierarchicalDataRow;
+  const isHierarchical = hierarchical?.enabled && hierarchicalRow?.isParent !== undefined;
+  const isParent = isHierarchical && hierarchicalRow.isParent;
+  const isChild = isHierarchical && !hierarchicalRow.isParent;
+  
+  // Calculate indentation for child rows
+  const indentSize = hierarchical?.indentSize || 24;
+  const indentation = isChild && hierarchical?.state ? 
+    calculateIndentation(hierarchicalRow, [], indentSize) : 0;
+  
+  // Apply hierarchical row classes
+  const rowClassName = isHierarchical ? (
+    isParent 
+      ? hierarchical?.parentRowClassName || 'bg-main-50 hover:bg-main-100 font-medium'
+      : hierarchical?.childRowClassName || 'bg-sec-25 hover:bg-sec-50'
+  ) : '';
+  
+  return (
+    <TableRow 
+      key={row.id} 
+      style={{
+        ...style,
+        ...(isChild && indentation > 0 ? { paddingLeft: `${indentation}px` } : {})
+      }}
+      className={rowClassName}
+    >
+      {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 (process.env.NODE_ENV === 'development' && isParent && isFirstCell) {
+          console.log('🔍 Expander Button Debug:', {
+            rowId,
+            isHierarchical,
+            isParent,
+            isFirstCell,
+            hasHierarchicalState: !!hierarchical?.state,
+            shouldShowExpansionButton,
+            hasChildren,
+            isExpanded
+          });
+        }
+        
+        
+        return (
+          <TableCell 
+            key={cell.id} 
+            className={getTableCellClasses({
+              isCompact: true,
+              className: "px-3 py-2 whitespace-normal break-words"
+            })}
+            style={{
+              width: columnSizes[cell.column.id] || (cell.column?.getSize ? cell.column.getSize() : 120),
+              minWidth: columnSizes[cell.column.id] ? undefined : 120,
+            }}
+          >
+            <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">
+                {isEditing && cell.column.id !== 'actions' ? (
+                  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' ? (
+                  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}
+                    />
+                  )
+                ) : (
+                  flexRender(cell.column.columnDef.cell, {
+                    ...cell.getContext(),
+                    hierarchical: hierarchical,
+                    isParent: isParent,
+                    isChild: isChild,
+                    isHierarchical: isHierarchical,
+                    rowId: rowId,
+                    isExpanded: isExpanded,
+                    hasChildren: hasChildren
+                  })
+                )}
+              </div>
+            </div>
+          </TableCell>
+        );
+      })}
+    </TableRow>
+  );
+};
+
+MemoizedRow.displayName = 'MemoizedRow';
+
+/**
+ * Unified table body component with intelligent virtualization
+ */
+export function UnifiedTableBody<TData extends Record<string, any>>({
+  table,
+  isCreating,
+  creationData,
+  onCreationDataChange,
+  onSaveCreation,
+  onCancelCreation,
+  editingRowId,
+  editingData,
+  onEditingDataChange,
+  onSaveEditing,
+  onCancelEditing,
+  grouping,
+  aggregates,
+  getRowId,
+  emptyState,
+  isFiltered,
+  onClearFilters,
+  enableFiltering = false,
+  showFilterRow = false,
+  enableColumnReordering = false,
+  onColumnOrderChange,
+  onColumnDrop,
+  savedColumnOrder,
+  enablePersistence = false,
+  tableId,
+  dataLength,
+  virtualHeight = 600,
+  forceVirtualization = false,
+  hierarchical,
+  actions = []
+}: UnifiedTableBodyProps<TData>) {
+  
+  
+  const headerRef = useRef<HTMLTableSectionElement>(null);
+  const bodyRef = useRef<HTMLTableSectionElement>(null);
+  const parentRef = useRef<HTMLDivElement>(null);
+  const [columnSizes, setColumnSizes] = useState<Record<string, number>>({});
+
+  // Determine if virtualization should be used
+  const shouldVirtualize = forceVirtualization || dataLength > VIRTUALIZATION_THRESHOLD;
+  
+  // Get table data
+  const rows = table.getRowModel().rows;
+  const headerGroups = table.getHeaderGroups();
+
+  // Virtual scrolling setup
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 40,
+    overscan: 5,
+  });
+
+  const virtualRows = virtualizer.getVirtualItems();
+  const totalSize = virtualizer.getTotalSize();
+
+  // Calculate column sizes and sync between header and body
+  useLayoutEffect(() => {
+    if (headerRef.current && bodyRef.current) {
+      const headerCells = headerRef.current.querySelectorAll('th');
+      const newColumnSizes: Record<string, number> = {};
+      const tableWidth = headerRef.current.closest('table')?.getBoundingClientRect().width || 0;
+      const totalColumns = table.getHeaderGroups()[0]?.headers.length || 0;
+      
+      // Calculate column sizes with proper distribution
+      table.getHeaderGroups()[0]?.headers.forEach((header, index) => {
+        const headerCell = headerCells[index];
+        if (headerCell) {
+          const columnSize = header.column?.getSize ? header.column.getSize() : 150;
+          const computedWidth = headerCell.getBoundingClientRect().width;
+          
+          // For fewer columns, ensure proper width distribution
+          if (totalColumns > 0) {
+            const availableWidth = tableWidth / totalColumns;
+            const minWidth = Math.max(columnSize, 80); // Reduced minimum column width
+            newColumnSizes[header.id] = Math.max(computedWidth, availableWidth, minWidth);
+          } else {
+            newColumnSizes[header.id] = Math.max(computedWidth, columnSize);
+          }
+        }
+      });
+      
+      // Only update if sizes have actually changed
+      const hasChanged = Object.keys(newColumnSizes).some(
+        key => newColumnSizes[key] !== columnSizes[key]
+      ) || Object.keys(columnSizes).length !== Object.keys(newColumnSizes).length;
+      
+      if (hasChanged) {
+        setColumnSizes(newColumnSizes);
+      }
+    }
+  }, [table, columnSizes]);
+
+  // Render table content
+  const renderTableContent = () => {
+    if (rows.length === 0) {
+      return (
+        <TableRow>
+          <TableCell 
+            colSpan={table.getVisibleFlatColumns().length} 
+            className="px-3 py-2" 
+            role="status"
+            style={{
+              width: '100%',
+              minWidth: '100%',
+            }}
+          >
+            <EmptyState
+              title={emptyState?.title}
+              description={emptyState?.description}
+              icon={emptyState?.icon}
+              action={emptyState?.action}
+              isFiltered={isFiltered}
+              onClearFilters={onClearFilters}
+            />
+          </TableCell>
+        </TableRow>
+      );
+    }
+
+    if (shouldVirtualize) {
+      // Virtualized rendering
+      return virtualRows.map((virtualRow) => {
+        const row = rows[virtualRow.index];
+        if (!row) return null;
+        
+        const rowId = getRowId ? getRowId(row.original, row.index) : String(row.index);
+        const isEditing = editingRowId === rowId;
+        
+        return (
+          <MemoizedRow
+            key={row.id}
+            row={row}
+            columnSizes={columnSizes}
+            isEditing={isEditing}
+            editingData={editingData}
+            onEditingDataChange={onEditingDataChange}
+            onSaveEditing={onSaveEditing}
+            onCancelEditing={onCancelEditing}
+            getRowId={getRowId}
+            grouping={grouping}
+            editingRowId={editingRowId}
+            hierarchical={hierarchical}
+            actions={actions}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: `${virtualRow.size}px`,
+              transform: `translateY(${virtualRow.start}px)`,
+            }}
+          />
+        );
+      });
+    } else {
+      // Standard rendering
+      return rows.map((row) => {
+        const rowId = getRowId ? getRowId(row.original, row.index) : String(row.index);
+        const isEditing = editingRowId === rowId;
+        
+        return (
+          <MemoizedRow
+            key={row.id}
+            row={row}
+            columnSizes={columnSizes}
+            isEditing={isEditing}
+            editingData={editingData}
+            onEditingDataChange={onEditingDataChange}
+            onSaveEditing={onSaveEditing}
+            onCancelEditing={onCancelEditing}
+            getRowId={getRowId}
+            grouping={grouping}
+            editingRowId={editingRowId}
+            hierarchical={hierarchical}
+            actions={actions}
+          />
+        );
+      });
+    }
+  };
+
+  return (
+    <>
+      {/* Table Header */}
+      <TableHeader ref={headerRef}>
+        {headerGroups.map((headerGroup) => (
+          <TableRow key={headerGroup.id}>
+            {/* Expand/Collapse All Button - Only show for hierarchical tables */}
+            {hierarchical?.enabled && hierarchical?.hasAnyChildren && (
+              <TableHead className="w-12">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={hierarchical.isAllExpanded ? hierarchical.collapseAll : hierarchical.expandAll}
+                  className="h-8 w-8 p-0"
+                  aria-label={hierarchical.isAllExpanded ? 'Collapse all' : 'Expand all'}
+                  title={hierarchical.isAllExpanded ? 'Collapse all' : 'Expand all'}
+                >
+                  {hierarchical.isAllExpanded ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4" />
+                  )}
+                </Button>
+              </TableHead>
+            )}
+            
+            {headerGroup.headers
+              .filter(header => {
+                // Check if getIsVisible method exists and call it, otherwise assume visible
+                return typeof header.column.getIsVisible === 'function' 
+                  ? header.column.getIsVisible() 
+                  : true;
+              })
+              .map((header) => (
+                <DraggableColumnHeader
+                  key={header.id}
+                  header={header}
+                  enableReordering={enableColumnReordering}
+                  onColumnDrop={onColumnDrop}
+                />
+              ))}
+          </TableRow>
+        ))}
+      </TableHeader>
+
+      {/* Filter Row */}
+      {enableFiltering && showFilterRow && (
+        <TableHeader>
+          <FilterRow
+            table={table}
+            visibleColumns={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;
+            }) || []}
+          />
+        </TableHeader>
+      )}
+
+      {/* Unified Table Body - Same structure for both virtualized and standard */}
+      {shouldVirtualize ? (
+        <div
+          ref={parentRef}
+          className="overflow-auto"
+          style={{ height: `${virtualHeight}px` }}
+        >
+          <div
+            style={{
+              height: `${totalSize}px`,
+              width: '100%',
+              position: 'relative',
+            }}
+          >
+            <table className="w-full" style={{ tableLayout: 'fixed', width: '100%' }}>
+              <TableBody ref={bodyRef}>
+                {/* Creation Row */}
+                {isCreating && (
+                  <TableRow>
+                    {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 => header.column.id !== 'actions' && header.column.id !== 'select')
+                      ?.map((header) => (
+                        <TableCell 
+                          key={header.column.id} 
+                          className={getTableCellClasses({
+                            isCompact: true,
+                            className: "px-3 py-2"
+                          })}
+                          style={{
+                            width: columnSizes[header.column.id] || (header.column?.getSize ? header.column.getSize() : 120),
+                          }}
+                        >
+                          {renderEditField(header.column, creationData[header.column.id], (value) => {
+                            if (typeof value === 'object' && value !== null) {
+                              onCreationDataChange({ ...creationData, ...value });
+                            } else {
+                              onCreationDataChange({ ...creationData, [header.column.id]: value });
+                            }
+                          }, creationData)}
+                        </TableCell>
+                      ))}
+                    <TableCell 
+                      className={getTableCellClasses({
+                        isCompact: true,
+                        className: "px-3 py-2 flex gap-1"
+                      })}
+                      style={{
+                        width: columnSizes['actions'] || 100,
+                      }}
+                    >
+                      <button
+                        onClick={onSaveCreation}
+                        className="h-8 w-8 p-0 hover:bg-muted/50 flex items-center justify-center"
+                        title="Save new row"
+                      >
+                        <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={onCancelCreation}
+                        className="h-8 w-8 p-0 hover:bg-muted/50 flex items-center justify-center"
+                        title="Cancel new row"
+                      >
+                        <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>
+                    </TableCell>
+                  </TableRow>
+                )}
+                
+                {renderTableContent()}
+              </TableBody>
+            </table>
+          </div>
+        </div>
+      ) : (
+        <TableBody ref={bodyRef}>
+          {/* Creation Row */}
+          {isCreating && (
+            <TableRow>
+              {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 => header.column.id !== 'actions' && header.column.id !== 'select')
+                ?.map((header) => (
+                  <TableCell 
+                    key={header.column.id} 
+                    className={getTableCellClasses({
+                      isCompact: true,
+                      className: "px-3 py-2"
+                    })}
+                    style={{
+                      width: columnSizes[header.column.id] || (header.column?.getSize ? header.column.getSize() : 120),
+                    }}
+                  >
+                    {renderEditField(header.column, creationData[header.column.id], (value) => {
+                      if (typeof value === 'object' && value !== null) {
+                        onCreationDataChange({ ...creationData, ...value });
+                      } else {
+                        onCreationDataChange({ ...creationData, [header.column.id]: value });
+                      }
+                    }, creationData)}
+                  </TableCell>
+                ))}
+              <TableCell 
+                className={getTableCellClasses({
+                  isCompact: true,
+                  className: "px-3 py-2 flex gap-1"
+                })}
+                style={{
+                  width: columnSizes['actions'] || 100,
+                }}
+              >
+                <button
+                  onClick={onSaveCreation}
+                  className="h-8 w-8 p-0 hover:bg-muted/50 flex items-center justify-center"
+                  title="Save new row"
+                >
+                  <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={onCancelCreation}
+                  className="h-8 w-8 p-0 hover:bg-muted/50 flex items-center justify-center"
+                  title="Cancel new row"
+                >
+                  <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>
+              </TableCell>
+            </TableRow>
+          )}
+          
+          {renderTableContent()}
+        </TableBody>
+      )}
+
+    </>
+  );
+}