@jmruthers/pace-core 0.5.93 → 0.5.95

package/src/components/DataTable/components/DataTableCore.tsx

@@ -571,16 +571,21 @@ function DataTableInternal<TData extends DataRecord>({
    * from the beginning. This provides a better user experience when searching
    * large datasets.
    * 
+   * CRITICAL: Must sync both state.searchQuery (used by state management) and
+   * performance hook's searchQuery (used by table filtering and search index).
+   * 
    * @param value - The search query string
    */
   const handleSearch = useCallback((value: string) => {
+    // Update both search query states to keep them in sync
     stateActions.setSearchQuery(value);
+    setSearchQuery(value);
     
     // Reset to first page when searching to show results from the beginning
     if (secureFeatures.pagination) {
       stateActions.setPagination({ ...state.pagination, pageIndex: 0 });
     }
-  }, [stateActions, secureFeatures.pagination, state.pagination]);
+  }, [stateActions, setSearchQuery, secureFeatures.pagination, state.pagination]);
 
   // ============================================================================
   // SERVER-SIDE DATA FETCHING - ALWAYS call these hooks
@@ -967,16 +972,34 @@ function DataTableInternal<TData extends DataRecord>({
                   // Get the current filtered/paginated data (what's actually visible)
                   const currentData = table.getFilteredRowModel().rows.map(row => row.original);
                   
-                  // Get only visible columns
-                  const visibleColumns = columns
-                    .filter(col => {
-                      const column = table.getColumn(col.accessorKey as string);
-                      return column && column.getIsVisible();
+                  // Get only visible columns by checking the actual table columns
+                  // This approach is more reliable because it uses the table's actual column registry
+                  const tableColumns = table.getAllColumns();
+                  const visibleTableColumns = tableColumns.filter(col => {
+                    // Exclude system columns (selection, actions) and only include data columns
+                    const isSystemColumn = col.id === 'select' || col.id === 'actions';
+                    return !isSystemColumn && col.getIsVisible();
+                  });
+                  
+                  // Map table columns back to original column definitions for export
+                  const visibleColumns = visibleTableColumns
+                    .map(tableCol => {
+                      // Find the original column definition that matches this table column
+                      const originalCol = columns.find(col => {
+                        const colId = col.id || col.accessorKey;
+                        return colId && String(colId) === tableCol.id;
+                      });
+                      
+                      if (!originalCol) return null;
+                      
+                      return {
+                        ...originalCol,
+                        header: typeof originalCol.header === 'string' 
+                          ? originalCol.header 
+                          : originalCol.accessorKey || tableCol.id || 'Column',
+                      };
                     })
-                    .map(col => ({
-                      ...col,
-                      header: typeof col.header === 'string' ? col.header : col.accessorKey || 'Column',
-                    }));
+                    .filter((col): col is NonNullable<typeof col> => col !== null);
                   
                   // Generate filename with timestamp
                   const timestamp = new Date().toISOString().split('T')[0];
@@ -1179,7 +1202,9 @@ function DataTableInternal<TData extends DataRecord>({
             emptyState={React.isValidElement(emptyState) ? undefined : emptyState as any}
             isFiltered={searchQuery !== '' || state.columnFilters.length > 0}
             onClearFilters={() => {
+              // Clear both search query states to keep them in sync
               stateActions.setSearchQuery('');
+              setSearchQuery('');
               stateActions.setColumnFilters([]);
             }}
             enableFiltering={secureFeatures.filtering}

package/src/components/DataTable/components/EditableRow.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { flexRender, type Row, type Column } from '@tanstack/react-table';
+import { X, Check } from 'lucide-react';
 
 import { Button } from '../../Button/Button';
 import { Input } from '../../Input/Input';
@@ -29,7 +30,9 @@ const renderEditField = <TData extends DataRecord>(
   column: Column<TData, unknown>,
   value: CellValue,
   onChange: (value: CellValue | Record<string, CellValue>) => void,
-  editingData: Record<string, CellValue> = {}
+  editingData: Record<string, CellValue> = {},
+  placeholder?: string,
+  inputRef?: React.Ref<HTMLInputElement>
 ) => {
   const columnDef = column.columnDef as EditableColumnDef<TData>;
 
@@ -63,6 +66,7 @@ const renderEditField = <TData extends DataRecord>(
   if (columnDef.fieldType === 'date') {
     return (
       <Input
+        ref={inputRef}
         type="date"
         value={String(value ?? '')}
         onChange={(e) => onChange(e.target.value as unknown as CellValue)}
@@ -74,6 +78,7 @@ const renderEditField = <TData extends DataRecord>(
   if (columnDef.fieldType === 'number') {
     return (
       <Input
+        ref={inputRef}
         type="number"
         value={String(value ?? '')}
         onChange={(e) => onChange(e.target.value as unknown as CellValue)}
@@ -84,11 +89,12 @@ const renderEditField = <TData extends DataRecord>(
 
   return (
     <Input
+      ref={inputRef}
       type="text"
       value={String(value ?? '')}
       onChange={(e) => onChange(e.target.value as unknown as CellValue)}
       className="w-full h-7"
-      placeholder={`Enter ${column.id}`}
+      placeholder={placeholder || `Enter ${column.id}`}
     />
   );
 };
@@ -105,6 +111,16 @@ export function EditableRow<TData extends DataRecord>({
   hierarchical = false,
 }: EditableRowProps<TData>) {
   const rowId = getRowId ? getRowId(row.original, row.index) : String(row.id);
+  const firstInputRef = React.useRef<HTMLInputElement>(null);
+  const hasAssignedRef = React.useRef(false);
+
+  // Auto-focus first input field when entering edit mode
+  React.useEffect(() => {
+    if (firstInputRef.current) {
+      firstInputRef.current.focus();
+      firstInputRef.current.select();
+    }
+  }, []);
 
   return (
     <tr
@@ -116,34 +132,58 @@ export function EditableRow<TData extends DataRecord>({
         <td key={cell.id} role="cell">
           <div className={cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}>
             {cell.column.id !== 'actions' ? (
-              cell.column.columnDef.cell ? (
-                flexRender(cell.column.columnDef.cell, {
-                  ...cell.getContext(),
-                  getIsEditing: () => true,
-                  setValue: (value: CellValue | Record<string, CellValue>) => {
+              // In edit mode, always use renderEditField for editable columns
+              // Custom cell renderers are for display mode only
+              (() => {
+                const columnDef = cell.column.columnDef as EditableColumnDef<TData>;
+                // If column is explicitly marked as not editable, check if custom cell renderer handles editing
+                if (columnDef.editable === false) {
+                  // Not editable - use custom cell renderer if available, otherwise show static value
+                  return cell.column.columnDef.cell ? (
+                    flexRender(cell.column.columnDef.cell, {
+                      ...cell.getContext(),
+                      getIsEditing: () => true,
+                      setValue: (value: CellValue | Record<string, CellValue>) => {
+                        if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
+                          onEditingDataChange({ ...editingData, ...(value as Record<string, CellValue>) });
+                        } else {
+                          onEditingDataChange({ ...editingData, [cell.column.id]: value as CellValue });
+                        }
+                      }
+                    })
+                  ) : (
+                    <span className="text-sm text-gray-600">{String(cell.getValue() ?? '')}</span>
+                  );
+                }
+                
+                // Column is editable - always use renderEditField in EditableRow
+                const shouldGetRef = !hasAssignedRef.current;
+                if (shouldGetRef) {
+                  hasAssignedRef.current = true;
+                }
+                
+                return renderEditField(
+                  cell.column, 
+                  editingData[cell.column.id] ?? (cell.getValue() as CellValue), 
+                  (value) => {
                     if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
                       onEditingDataChange({ ...editingData, ...(value as Record<string, CellValue>) });
                     } else {
                       onEditingDataChange({ ...editingData, [cell.column.id]: value as CellValue });
                     }
-                  }
-                })
-              ) : (
-                renderEditField(cell.column, editingData[cell.column.id], (value) => {
-                  if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
-                    onEditingDataChange({ ...editingData, ...(value as Record<string, CellValue>) });
-                  } else {
-                    onEditingDataChange({ ...editingData, [cell.column.id]: value as CellValue });
-                  }
-                }, editingData)
-              )
+                  }, 
+                  editingData,
+                  undefined, // placeholder
+                  shouldGetRef ? firstInputRef : undefined
+                );
+              })()
             ) : (
               <div className="flex gap-1">
-                <Button onClick={onSave} size="sm" variant="default">
-                  Save
+                <Button onClick={onSave} size="sm" variant="default" aria-label="Save changes">
+                  <Check className="h-4 w-4" />
                 </Button>
-                <Button onClick={onCancel} size="sm" variant="outline">
-                  Cancel
+                <Button onClick={onCancel} size="sm" variant="outline" aria-label="Cancel editing">
+                  <X className="h-4 w-4" />
                 </Button>
               </div>
             )}

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

@@ -319,109 +319,33 @@ const RowComponent = React.memo(({
     const subRowsCount = row.subRows?.length || 0;
     const isExpanded = row.getIsExpanded();
     
+    // Only render the group header row - sub-rows will be rendered by the standard rendering loop
     return (
-      <React.Fragment>
-        {/* Group Header Row */}
-        <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}
+      <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}
+        >
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => row.toggleExpanded()}
+            className="p-0 h-auto mr-2"
           >
-            <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: any) => {
-          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" style={style}>
-              {subRow.getVisibleCells().map((cell: any) => (
-                <td 
-                  key={cell.id} 
-                  className={getTableCellClasses({
-                    isCompact: true,
-                    className: `px-3 py-2 pl-8 ${cell.column.id === 'actions' ? 'whitespace-nowrap' : 'whitespace-normal break-words'} ${cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}`
-                  })}
-                >
-                  {isSubRowEditing && cell.column.id !== 'actions' ? (
-                    // Check if column has a custom cell renderer - if so, use it in edit mode
-                    cell.column.columnDef.cell ? (
-                      flexRender(cell.column.columnDef.cell, {
-                        ...cell.getContext(),
-                        hierarchical: hierarchical,
-                        isParent: false,
-                        isChild: true,
-                        isHierarchical: false,
-                        rowId: subRowId,
-                        isExpanded: false,
-                        hasChildren: false,
-                        getIsEditing: () => true, // Always true in edit mode
-                        setValue: (value: any) => {
-                          if (typeof value === 'object' && value !== null) {
-                            onEditingDataChange?.({ ...editingData, ...value });
-                          } else {
-                            onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
-                          }
-                        }
-                      })
-                    ) : (
-                      // Fall back to default edit field rendering when no custom cell renderer
-                      renderEditField(cell.column, editingData?.[cell.column.id], (value) => {
-                        if (typeof value === 'object' && value !== null) {
-                          onEditingDataChange?.({ ...editingData, ...value });
-                        } else {
-                          onEditingDataChange?.({ ...editingData, [cell.column.id]: value });
-                        }
-                      }, editingData)
-                    )
-                  ) : cell.column.id === 'actions' ? (
-                    <ActionButtons 
-                      row={row} 
-                      actions={actions}
-                      isEditing={isEditing}
-                      isParent={isParent}
-                      hierarchical={!!hierarchical}
-                      rbac={rbac}
-                      permissions={permissions}
-                    />
-                  ) : (
-                    flexRender(cell.column.columnDef.cell, {
-                      ...cell.getContext(),
-                      hierarchical: hierarchical,
-                      isParent: false,
-                      isChild: true,
-                      isHierarchical: false,
-                      rowId: subRowId,
-                      isExpanded: false,
-                      hasChildren: false
-                    })
-                  )}
-                </td>
-              ))}
-            </tr>
-          );
-        })}
-      </React.Fragment>
+            {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>
     );
   }