@jmruthers/pace-core 0.2.5 → 0.2.7

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

@@ -12,7 +12,7 @@
 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';
+// Removed Table component imports - using native HTML elements
 import { Button } from '../../Button/Button';
 import { ChevronUp, ChevronDown, ChevronRight } from 'lucide-react';
 import { EmptyState } from './EmptyState';
@@ -209,7 +209,6 @@ const renderEditField = (
 const MemoizedRow = ({ 
   row, 
   style, 
-  columnSizes, 
   isEditing, 
   editingData, 
   onEditingDataChange,
@@ -223,7 +222,6 @@ const MemoizedRow = ({
 }: { 
   row: any; 
   style?: React.CSSProperties;
-  columnSizes: Record<string, number>;
   isEditing?: boolean;
   editingData?: Record<string, any>;
   onEditingDataChange?: (data: Record<string, any>) => void;
@@ -262,6 +260,12 @@ const MemoizedRow = ({
 }) => {
   const rowId = getRowId ? getRowId(row.original, row.index) : String(row.index);
   
+  // 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;
+  
   // Handle grouped rows
   if (row.getIsGrouped && row.getIsGrouped()) {
     const groupValue = row.getValue(grouping[0]);
@@ -271,17 +275,13 @@ const MemoizedRow = ({
     return (
       <React.Fragment>
         {/* Group Header Row */}
-        <TableRow className="bg-sec-50 hover:bg-sec-100" style={style}>
-          <TableCell 
+        <tr className="bg-sec-50 hover:bg-sec-100" style={style}>
+          <td 
             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"
@@ -298,8 +298,8 @@ const MemoizedRow = ({
             <span className="text-sm">
               {String(groupValue)} ({subRowsCount} items)
             </span>
-          </TableCell>
-        </TableRow>
+          </td>
+        </tr>
         
         {/* Render sub-rows if expanded */}
         {isExpanded && row.subRows?.map((subRow: any) => {
@@ -307,17 +307,14 @@ const MemoizedRow = ({
           const isSubRowEditing = editingRowId === subRowId;
           
           return (
-            <TableRow key={subRow.id} className="border-l-2 border-l-blue-200" style={style}>
+            <tr key={subRow.id} className="border-l-2 border-l-blue-200" style={style}>
               {subRow.getVisibleCells().map((cell: any) => (
-                <TableCell 
+                <td 
                   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) => {
@@ -347,9 +344,9 @@ const MemoizedRow = ({
                       hasChildren: false
                     })
                   )}
-                </TableCell>
+                </td>
               ))}
-            </TableRow>
+            </tr>
           );
         })}
       </React.Fragment>
@@ -365,12 +362,6 @@ const MemoizedRow = ({
   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 ? 
@@ -384,7 +375,7 @@ const MemoizedRow = ({
   ) : '';
   
   return (
-    <TableRow 
+    <tr 
       key={row.id} 
       style={{
         ...style,
@@ -415,16 +406,12 @@ const MemoizedRow = ({
         
         
         return (
-          <TableCell 
+          <td 
             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 */}
@@ -500,10 +487,10 @@ const MemoizedRow = ({
                 )}
               </div>
             </div>
-          </TableCell>
+          </td>
         );
       })}
-    </TableRow>
+    </tr>
   );
 };
 
@@ -549,7 +536,6 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   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;
@@ -569,56 +555,16 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   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 
+        <tr>
+          <td 
             colSpan={table.getVisibleFlatColumns().length} 
             className="px-3 py-2" 
             role="status"
-            style={{
-              width: '100%',
-              minWidth: '100%',
-            }}
           >
             <EmptyState
               title={emptyState?.title}
@@ -628,8 +574,8 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
               isFiltered={isFiltered}
               onClearFilters={onClearFilters}
             />
-          </TableCell>
-        </TableRow>
+          </td>
+        </tr>
       );
     }
 
@@ -646,7 +592,6 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
           <MemoizedRow
             key={row.id}
             row={row}
-            columnSizes={columnSizes}
             isEditing={isEditing}
             editingData={editingData}
             onEditingDataChange={onEditingDataChange}
@@ -678,7 +623,6 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
           <MemoizedRow
             key={row.id}
             row={row}
-            columnSizes={columnSizes}
             isEditing={isEditing}
             editingData={editingData}
             onEditingDataChange={onEditingDataChange}
@@ -696,216 +640,74 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
   };
 
   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 => {
+    <tbody ref={bodyRef}>
+      {/* Unified Table Body - Same structure for both virtualized and standard */}
+      {/* Creation Row */}
+      {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;
-            }) || []}
-          />
-        </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 
+            })
+            ?.filter(header => header.column.id !== 'actions' && header.column.id !== 'select')
+            ?.map((header) => (
+              <td 
+                key={header.column.id} 
                 className={getTableCellClasses({
                   isCompact: true,
-                  className: "px-3 py-2 flex gap-1"
+                  className: "px-3 py-2"
                 })}
-                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>
+                {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)}
+              </td>
+            ))}
+          <td 
+            className={getTableCellClasses({
+              isCompact: true,
+              className: "px-3 py-2 flex gap-1"
+            })}
+          >
+            <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>
+          </td>
+        </tr>
       )}
-
-    </>
+      
+      {/* Filter Row */}
+      {showFilterRow && enableFiltering && (
+        <FilterRow 
+          table={table} 
+          visibleColumns={table.getHeaderGroups()[0]?.headers || []} 
+        />
+      )}
+      
+      {/* Table Content */}
+      {renderTableContent()}
+    </tbody>
   );
 }