@jmruthers/pace-core 0.5.136 → 0.5.139

package/src/components/DataTable/components/DataTableBody.tsx

@@ -0,0 +1,461 @@
+/**
+ * @file DataTable Body Component
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 0.3.0
+ * 
+ * The DataTable body component handles the main table content rendering including:
+ * - Table headers with sorting indicators
+ * - Data rows with cell rendering
+ * - Inline editing capabilities
+ * - Row creation interface
+ * - Grouped rows with expansion/collapse
+ * - Aggregate value display
+ * - Empty state handling
+ * 
+ * Features:
+ * - Virtual scrolling support for large datasets
+ * - Inline editing with input validation
+ * - Row grouping with collapsible sections
+ * - Custom cell renderers
+ * - Aggregate calculations and display
+ * - Loading and empty states
+ * - Keyboard navigation
+ * - Accessibility support
+ * 
+ * @example
+ * ```tsx
+ * <DataTableBody
+ *   table={tableInstance}
+ *   isCreating={false}
+ *   creationData={{}}
+ *   onCreationDataChange={(data) => setCreationData(data)}
+ *   onSaveCreation={() => handleSave()}
+ *   onCancelCreation={() => handleCancel()}
+ *   editingRowId={null}
+ *   editingData={{}}
+ *   onEditingDataChange={(data) => setEditingData(data)}
+ *   grouping={['category']}
+ *   aggregates={[{ field: 'price', function: 'avg', label: 'Avg Price' }]}
+ *   getRowId={(row) => row.id}
+ *   emptyState={{ title: 'No data found' }}
+ * />
+ * ```
+ * 
+ * @accessibility
+ * - Proper table semantics with thead/tbody
+ * - ARIA labels for interactive elements
+ * - Keyboard navigation support
+ * - Screen reader friendly
+ * - Focus management during editing
+ * 
+ * @performance
+ * - Efficient re-rendering with React.memo
+ * - Virtual scrolling for large datasets
+ * - Optimized cell rendering
+ * - Debounced input handling
+ */
+
+import React from 'react';
+import { type Table, flexRender } from '@tanstack/react-table';
+import { Button } from '../../Button/Button';
+import { ChevronUp, ChevronDown, ChevronRight, ChevronsUpDown } from 'lucide-react';
+import { EmptyState } from './EmptyState';
+import { Input } from '../../Input/Input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
+import type { AggregateConfig } from '../types';
+
+/**
+ * Props for the DataTable body component
+ * @template TData - The type of data records in the table
+ */
+interface DataTableBodyProps<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;
+  /** 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?: {
+    /** Empty state title */
+    title?: string;
+    /** Empty state description */
+    description?: string;
+    /** Empty state icon component */
+    icon?: React.ComponentType<{ className?: string }>;
+    /** Optional action button */
+    action?: {
+      /** Button label */
+      label: string;
+      /** Button click handler */
+      onClick: () => void;
+    };
+  };
+  /** Whether the table is currently filtered */
+  isFiltered?: boolean;
+  /** Callback to clear all filters */
+  onClearFilters?: () => void;
+  /** Hierarchical configuration */
+  hierarchical?: {
+    enabled: boolean;
+    expandAll: () => void;
+    collapseAll: () => void;
+    isAllExpanded: boolean;
+    hasAnyChildren: boolean;
+  };
+}
+
+// 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 editKey = columnDef.editAccessorKey || column.id;
+    const editValue = editingData[editKey] || value;
+    
+    return (
+      <Select
+        value={String(editValue || '')}
+        onValueChange={(newValue) => {
+          // If editAccessorKey is specified, update that field instead
+          if (columnDef.editAccessorKey) {
+            onChange({ [columnDef.editAccessorKey]: Number(newValue) });
+          } else {
+            onChange(newValue);
+          }
+        }}
+      >
+        <SelectTrigger className="w-full h-8">
+          <SelectValue placeholder={placeholder || `Select ${column.id}`} />
+        </SelectTrigger>
+        <SelectContent>
+          {columnDef.fieldOptions.map((option: any) => (
+            <SelectItem key={option.value} value={String(option.value)}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  }
+  
+  if (columnDef.fieldType === 'date') {
+    return (
+      <Input
+        type="date"
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        className="w-full h-8"
+      />
+    );
+  }
+  
+  // Default to text input
+  return (
+    <Input
+      type="text"
+      value={value || ''}
+      onChange={(e) => onChange(e.target.value)}
+      className="w-full h-8"
+      placeholder={placeholder || `Enter ${column.id}`}
+    />
+  );
+};
+
+export function DataTableBody<TData extends Record<string, any>>({
+  table,
+  isCreating,
+  creationData,
+  onCreationDataChange,
+  onSaveCreation,
+  onCancelCreation,
+  editingRowId,
+  editingData,
+  onEditingDataChange,
+  grouping,
+  aggregates,
+  getRowId,
+  emptyState,
+  isFiltered,
+  onClearFilters,
+  hierarchical,
+}: DataTableBodyProps<TData>) {
+  
+  // Debug logging
+  console.log('🔍 DataTableBody Debug:', {
+    rowModelLength: table.getRowModel().rows.length,
+    totalRowCount: table.getRowCount(),
+    groupingEnabled: grouping.length > 0,
+    grouping: grouping,
+    rowAnalysis: table.getRowModel().rows.map(row => ({
+      id: row.id,
+      isGrouped: row.getIsGrouped(),
+      hasParent: !!(typeof row.getParentRow === 'function' ? row.getParentRow() : false),
+      subRowsCount: row.subRows?.length || 0,
+      originalData: row.original?.meal_code || row.original?.id || 'no-id',
+    })),
+    paginationState: table.getState().pagination,
+  });
+
+  return (
+    <>
+      {/* Table Header */}
+      <thead>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <tr key={headerGroup.id}>
+            {/* Expand/Collapse All Button - Only show for hierarchical tables */}
+            {hierarchical?.enabled && hierarchical?.hasAnyChildren && (
+              <th 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>
+              </th>
+            )}
+            
+            {headerGroup.headers.map((header) => {
+              const isSortable = header.column.getCanSort();
+              const ariaSort = isSortable
+                ? (header.column.getIsSorted() === 'asc'
+                    ? 'ascending'
+                    : header.column.getIsSorted() === 'desc'
+                    ? 'descending'
+                    : 'none')
+                : undefined;
+              return (
+                <th
+                  key={header.id}
+                  {...(isSortable ? { 'aria-sort': ariaSort } : {})}
+                >
+                  {header.isPlaceholder ? null : (
+                    isSortable ? (
+                      <Button
+                        variant="ghost"
+                        className="h-auto p-0 font-medium hover:bg-transparent"
+                        onClick={header.column.getToggleSortingHandler()}
+                        aria-label={`Sort by ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : 'column'}`}
+                        tabIndex={0}
+                      >
+                        <div className="flex items-center gap-1">
+                          {typeof header.column.columnDef.header === 'function'
+                            ? header.column.columnDef.header(header.getContext())
+                            : header.column.columnDef.header}
+                          {header.column.getIsSorted() === 'asc' ? (
+                            <ChevronUp className="h-4 w-4" />
+                          ) : header.column.getIsSorted() === 'desc' ? (
+                            <ChevronDown className="h-4 w-4" />
+                          ) : (
+                            <ChevronsUpDown className="h-4 w-4" />
+                          )}
+                        </div>
+                      </Button>
+                    ) : (
+                      <div>
+                        {typeof header.column.columnDef.header === 'function'
+                          ? header.column.columnDef.header(header.getContext())
+                          : header.column.columnDef.header}
+                      </div>
+                    )
+                  )}
+                </th>
+              );
+            })}
+          </tr>
+        ))}
+      </thead>
+
+      {/* Table Body */}
+      <tbody>
+        {/* Creation Row */}
+        {isCreating && (
+          <tr>
+            {table.getVisibleFlatColumns().map((column) => (
+              <td key={column.id}>
+                                 {renderEditField(column, creationData[column.id], (value) => {
+                   if (typeof value === 'object' && value !== null) {
+                     // Handle editAccessorKey case
+                     onCreationDataChange({ ...creationData, ...value });
+                   } else {
+                     // Handle simple value case
+                     onCreationDataChange({ ...creationData, [column.id]: value });
+                   }
+                 }, creationData)}
+              </td>
+            ))}
+            <td className="flex gap-1">
+              <>
+                <button
+                  onClick={onSaveCreation}
+                  className="h-8 w-8 p-0 bg-app-main-500 text-app-main-50 rounded hover:bg-app-main-600 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 bg-app-sec-500 text-app-main-50 rounded hover:bg-app-sec-600 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>
+        )}
+        
+        {/* Table Rows */}
+        {table.getRowModel().rows.length === 0 && (
+          <tr>
+            <td colSpan={table.getVisibleFlatColumns().length} role="status">
+              <EmptyState
+                title={emptyState?.title}
+                description={emptyState?.description}
+                icon={emptyState?.icon}
+                action={emptyState?.action}
+                isFiltered={isFiltered}
+                onClearFilters={onClearFilters}
+              />
+            </td>
+          </tr>
+        )}
+        
+        {table.getRowModel().rows.map((row) => {
+          const rowId = getRowId ? getRowId(row.original, row.index) : String(row.index);
+          const isEditing = editingRowId === rowId;
+          
+          // Handle grouped rows
+          if (row.getIsGrouped()) {
+            const groupValue = row.getValue(grouping[0]);
+            const subRowsCount = row.subRows?.length || 0;
+            const isExpanded = row.getIsExpanded();
+            
+            return (
+              <React.Fragment key={row.id}>
+                {/* Group Header Row */}
+                <tr className="bg-app-sec-50 hover:bg-app-sec-100">
+                  <td className="flex items-center py-2 font-medium" colSpan={table.getAllColumns().length}>
+                    <>
+                      <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>
+                    </>
+                  </td>
+                </tr>
+                
+                {/* Render sub-rows if expanded */}
+                {isExpanded && row.subRows?.map((subRow) => {
+                  const subRowId = getRowId ? getRowId(subRow.original, subRow.index) : String(subRow.index);
+                  const isSubRowEditing = editingRowId === subRowId;
+                  
+                  return (
+                    <tr key={subRow.id} className="border-l-2 border-l-blue-200">
+                      {subRow.getVisibleCells().map((cell) => (
+                        <td key={cell.id} className="pl-8">
+                                            {isSubRowEditing && cell.column.id !== 'actions' ? (
+                    renderEditField(cell.column, editingData[cell.column.id], (value) => {
+                      if (typeof value === 'object' && value !== null) {
+                        // Handle editAccessorKey case
+                        onEditingDataChange({ ...editingData, ...value });
+                      } else {
+                        // Handle simple value case
+                        onEditingDataChange({ ...editingData, [cell.column.id]: value });
+                      }
+                    }, editingData)
+                  ) : (
+                    flexRender(cell.column.columnDef.cell, cell.getContext())
+                  )}
+                        </td>
+                      ))}
+                    </tr>
+                  );
+                })}
+              </React.Fragment>
+            );
+          }
+          
+          // Skip leaf rows when grouping is enabled - they're already rendered as sub-rows
+          // A row is a leaf if it has a parent (part of a group) and is not itself a group header
+          if (grouping.length > 0 && typeof row.getParentRow === 'function' && row.getParentRow() && !row.getIsGrouped()) {
+            return null;
+          }
+          
+          // Regular row (non-grouped or when grouping is disabled)
+          return (
+            <tr key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <td key={cell.id}>
+                  {isEditing && cell.column.id !== 'actions' ? (
+                    renderEditField(cell.column, editingData[cell.column.id], (value) => {
+                      if (typeof value === 'object' && value !== null) {
+                        // Handle editAccessorKey case
+                        onEditingDataChange({ ...editingData, ...value });
+                      } else {
+                        // Handle simple value case
+                        onEditingDataChange({ ...editingData, [cell.column.id]: value });
+                      }
+                    }, editingData)
+                  ) : (
+                    flexRender(cell.column.columnDef.cell, cell.getContext())
+                  )}
+                </td>
+              ))}
+            </tr>
+          );
+        })}
+      </tbody>
+    </>
+  );
+}

package/src/components/DataTable/components/DraggableColumnHeader.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { Button } from '../../Button/Button';
+import { ChevronUp, ChevronDown,ChevronsUpDown } from 'lucide-react';
+import { cn } from '../../../utils/cn';
+import type { Header } from '@tanstack/react-table';
+
+interface DraggableColumnHeaderProps<TData> {
+  header: Header<TData, unknown>;
+  onMoveLeft?: () => void;
+  onMoveRight?: () => void;
+  canMoveLeft?: boolean;
+  canMoveRight?: boolean;
+  enableReordering?: boolean;
+  onColumnDrop?: (draggedColumnId: string, targetColumnId: string) => void;
+}
+
+export function DraggableColumnHeader<TData>({
+  header,
+  onMoveLeft,
+  onMoveRight,
+  canMoveLeft = false,
+  canMoveRight = false,
+  enableReordering = false,
+  onColumnDrop,
+}: DraggableColumnHeaderProps<TData>) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+
+  const isSortable = header.column.getCanSort ? header.column.getCanSort() : false;
+  const ariaSort = isSortable
+    ? (header.column.getIsSorted ? (header.column.getIsSorted() === 'asc'
+        ? 'ascending'
+        : header.column.getIsSorted() === 'desc'
+        ? 'descending'
+        : 'none') : 'none')
+    : undefined;
+
+  const handleDragStart = (e: React.DragEvent) => {
+    if (!enableReordering) return;
+    
+    setIsDragging(true);
+    e.dataTransfer.setData('text/plain', header.id);
+    e.dataTransfer.effectAllowed = 'move';
+    
+    // Add visual feedback
+    if (e.currentTarget instanceof HTMLElement) {
+      e.currentTarget.style.opacity = '0.5';
+    }
+  };
+
+  const handleDragEnd = (e: React.DragEvent) => {
+    setIsDragging(false);
+    setDragOver(false);
+    
+    // Reset visual feedback
+    if (e.currentTarget instanceof HTMLElement) {
+      e.currentTarget.style.opacity = '1';
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    if (!enableReordering) return;
+    
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    setDragOver(true);
+  };
+
+  const handleDragLeave = (e: React.DragEvent) => {
+    if (!enableReordering) return;
+    
+    // Only set dragOver to false if we're leaving the element entirely
+    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
+      setDragOver(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    if (!enableReordering) return;
+    
+    e.preventDefault();
+    setDragOver(false);
+    
+    const draggedHeaderId = e.dataTransfer.getData('text/plain');
+    if (draggedHeaderId && draggedHeaderId !== header.id && onColumnDrop) {
+      onColumnDrop(draggedHeaderId, header.id);
+    }
+  };
+
+  return (
+    <th
+      className={cn(
+        'px-3 py-2 text-sm font-medium text-left relative group',
+        isSortable && 'cursor-pointer hover:bg-sec-50',
+        isDragging && 'opacity-50',
+        dragOver && 'bg-main-50 border-main-200',
+        enableReordering && 'cursor-move'
+      )}
+      style={{}}
+      draggable={enableReordering}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+      {...(isSortable ? { 'aria-sort': ariaSort } : {})}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1 flex-1">
+          {header.isPlaceholder ? null : (
+            isSortable ? (
+              <Button
+                variant="ghost"
+                className="h-auto p-0 font-medium hover:bg-transparent flex-1 justify-start"
+                onClick={header.column.getToggleSortingHandler()}
+                aria-label={`Sort by ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : 'column'}`}
+                tabIndex={0}
+              >
+                <div className="flex items-center gap-1">
+                  {typeof header.column.columnDef.header === 'function'
+                    ? header.column.columnDef.header(header.getContext())
+                    : header.column.columnDef.header}
+                  {header.column.getIsSorted() === 'asc' ? (
+                    <ChevronUp className="h-4 w-4" />
+                  ) : header.column.getIsSorted() === 'desc' ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronsUpDown className="h-4 w-4" />
+                  )}
+                </div>
+              </Button>
+            ) : (
+              <div className="flex-1">
+                {typeof header.column.columnDef.header === 'function'
+                  ? header.column.columnDef.header(header.getContext())
+                  : header.column.columnDef.header}
+              </div>
+            )
+          )}
+        </div>
+      </div>
+    </th>
+  );
+}

package/src/components/DataTable/components/FilterRow.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ColumnFilter } from './ColumnFilter';
 import type { Header, Table } from '@tanstack/react-table';
+import { getColumnHeaderText } from '../utils/columnUtils';
 
 interface FilterRowProps<TData> {
   table: Table<TData>;
@@ -52,10 +53,15 @@ export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData
     
     // PRIORITY 1: Check if column has explicit filter type configuration
     // This MUST be checked first and must respect any explicit value, including 'text'
-    // Use explicit !== undefined && !== null check to ensure 'text' is not treated as falsy
+    // Check for valid filter type strings explicitly to prevent any edge cases
     // This prevents auto-detection from overriding explicit filterType settings
     const explicitFilterType = columnDef.filterType;
-    if (explicitFilterType !== undefined && explicitFilterType !== null && explicitFilterType !== '') {
+    if (
+      explicitFilterType === 'text' ||
+      explicitFilterType === 'select' ||
+      explicitFilterType === 'number' ||
+      explicitFilterType === 'date'
+    ) {
       // Explicit filterType set - return it immediately (no auto-detection)
       // This ensures filterType: 'text' is always respected, even for columns with ≤10 unique values
       return explicitFilterType as 'text' | 'select' | 'number' | 'date';
@@ -108,7 +114,7 @@ export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData
                 column={column}
                 filterType={filterType}
                 options={options}
-                placeholder={`Filter ${column.id}...`}
+                placeholder={`Filter ${getColumnHeaderText(column)}...`}
               />
             ) : (
               <div className="h-8 flex items-center text-sec-400 text-sm">

package/src/components/DataTable/components/PaginationControls.tsx

@@ -108,6 +108,7 @@ export function PaginationControls<TData extends DataRecord>({
         selectedText={currentPageSize?.toString() || '10'}
         onValueChange={(value) => setPageSize(Number(value))}
         disabled={isLoading}
+        direction="up"
         className="w-36 h-8"
       >