@jmruthers/pace-core 0.5.135 → 0.5.137

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

@@ -19,7 +19,7 @@ import type {
   PaginationState,
 } from '@tanstack/react-table';
 import { Edit, Trash, ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react';
-import { cn } from '../../../utils/cn';
+import { cn } from '../../../utils/core/cn';
 import { Checkbox } from '../../Checkbox/Checkbox';
 import { Button } from '../../Button/Button';
 import { getTableClasses, getMainContainerClasses } from '../styles';
@@ -54,7 +54,7 @@ import { useTableColumns } from '../hooks/useTableColumns';
 import { initializeLiveRegion, announceSortChange } from '../utils/a11yUtils';
 import { useKeyboardNavigation } from '../hooks/useKeyboardNavigation';
 import { getRowIdSafe } from '../utils/rowUtils';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 
 import { normalizeDataTableFeatures } from '../types';
 import type {
@@ -220,13 +220,6 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
     onLayoutChange,
   } = props;
   
-  // Debug logging to verify onExport prop is received
-  console.log('[DataTableInternal] Props received:', {
-    'onExport in props': !!props.onExport,
-    'onExport after destructuring': !!onExport,
-    'onExport type': typeof onExport,
-    'props keys with Export': Object.keys(props).filter(k => k.toLowerCase().includes('export')),
-  });
   const logger = React.useMemo(() => createLogger('DataTableCore'), []);
   
   // ============================================================================
@@ -244,16 +237,6 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
   // MANDATORY: Get permissions and secure features
   const { permissions, secureFeatures, effectivePageId } = useDataTablePermissions(rbac, requestedFeatures);
   
-  // Debug logging for creation feature
-  if (import.meta.env.MODE === 'development') {
-    logger.debug('[DataTableCore] Creation feature check:', {
-      'incomingFeatures.creation': incomingFeatures.creation,
-      'requestedFeatures.creation': requestedFeatures.creation,
-      'secureFeatures.creation': secureFeatures.creation,
-      'permissions.canCreate.can': permissions.canCreate.can,
-      'onCreateRow prop provided': !!onCreateRow
-    });
-  }
   
   // ============================================================================
   // UNIFIED STATE MANAGEMENT - Use ONLY useDataTableState for all state
@@ -441,22 +424,6 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
     }
   }, [hierarchicalValidation, logger]);
 
-  // Diagnostic logging when finalTableData is empty but input data exists
-  useEffect(() => {
-    if (finalTableData.length === 0 && data.length > 0) {
-      logger.warn('Diagnostic: finalTableData empty but input data exists', {
-        inputDataLength: data.length,
-        finalTableDataLength: finalTableData.length,
-        dataCount: finalDataCount,
-        finalPaginationMode,
-        hasServerData: !!serverData,
-        serverDataLength: serverData?.data?.length || 0,
-        hierarchicalEnabled: Boolean(secureFeatures.hierarchical && hierarchical?.enabled),
-        hierarchicalValid: hierarchicalValidation.isValid,
-      });
-    }
-  }, [finalTableData.length, data.length, finalDataCount, finalPaginationMode, serverData, secureFeatures.hierarchical, hierarchical, hierarchicalValidation.isValid, logger]);
-
   const {
     columnOrder: savedColumnOrder,
     isLoaded: isColumnOrderLoaded,
@@ -488,17 +455,13 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
   useEffect(() => {
     if (secureFeatures.selection && state.columnOrder.includes('select') && state.columnOrder[0] !== 'select') {
       const normalizedOrder = ['select', ...state.columnOrder.filter(id => id !== 'select')];
-      logger.warn('Correcting column order state - moving select to first position:', {
-        before: state.columnOrder,
-        after: normalizedOrder
-      });
       stateActions.setColumnOrder(normalizedOrder);
       // Also update persisted order if persistence is enabled
       if (secureFeatures.columnReordering) {
         updateColumnOrder(normalizedOrder);
       }
     }
-  }, [secureFeatures.selection, secureFeatures.columnReordering, state.columnOrder, stateActions, updateColumnOrder, logger]);
+  }, [secureFeatures.selection, secureFeatures.columnReordering, state.columnOrder, stateActions, updateColumnOrder]);
 
   // ============================================================================
   // CONFIGURATION RESOLUTION - ALWAYS call these hooks
@@ -671,77 +634,14 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
       onDeleteSelected: permissions.canDelete.can ? onDeleteSelected : undefined,
     };
     
-    // Debug logging for handlers
-    console.log('[DataTableCore] Secure handlers setup:', {
-      'permissions.canExport.can': permissions.canExport.can,
-      'onExport prop provided': !!onExport,
-      'onExport type': typeof onExport,
-      'secureHandlers.onExport': !!handlers.onExport,
-    });
-    
-    if (import.meta.env.MODE === 'development') {
-      logger.debug('[DataTableCore] Handler check:', {
-        'permissions.canCreate.can': permissions.canCreate.can,
-        'onCreateRow prop provided': !!onCreateRow,
-        'secureHandlers.onCreateRow': !!handlers.onCreateRow,
-        'secureFeatures.creation': secureFeatures.creation,
-        'will pass onCreateRow to toolbar': secureFeatures.creation && !!handlers.onCreateRow,
-        'permissions.canExport.can': permissions.canExport.can,
-        'onExport prop provided': !!onExport,
-        'secureHandlers.onExport': !!handlers.onExport,
-      });
-    }
-    
     return handlers;
-  }, [permissions.canUpdate.can, permissions.canDelete.can, permissions.canCreate.can, permissions.canImport.can, permissions.canExport.can, onEditRow, onDeleteRow, onCreateRow, onImport, onExport, onDeleteSelected, secureFeatures.creation, logger]);
-  
-  // Explicit debug log for creation button visibility (easier to spot)
-  if (import.meta.env.MODE === 'development') {
-    logger.debug('[DataTableCore] ⚠️ CREATION BUTTON DIAGNOSIS:', {
-      '✅ permissions.canCreate.can': permissions.canCreate.can,
-      '❓ features.creation enabled': secureFeatures.creation,
-      '❓ onCreateRow handler provided': !!onCreateRow,
-      '❓ secureHandlers.onCreateRow': !!secureHandlers.onCreateRow,
-      '🔍 WILL SHOW BUTTON': secureFeatures.creation && permissions.canCreate.can && !!onCreateRow,
-      '💡 SOLUTION': !secureFeatures.creation 
-        ? 'Enable features={{ creation: true }} in DataTable props'
-        : !onCreateRow 
-        ? 'Provide onCreateRow handler in DataTable props'
-        : 'All conditions met - button should be visible'
-    });
-  }
+  }, [permissions.canUpdate.can, permissions.canDelete.can, permissions.canCreate.can, permissions.canImport.can, permissions.canExport.can, onEditRow, onDeleteRow, onCreateRow, onImport, onExport, onDeleteSelected, secureFeatures.creation]);
 
   // MANDATORY: Process actions with RBAC checks
   const effectiveActions = useMemo(() => {
     // Create a new array to avoid mutating the original
     const result = [...actions];
     
-    // Log action configuration in development
-    logger.debug('Action Configuration Debug:', {
-      originalActions: actions.length,
-      secureFeatures: {
-        editing: secureFeatures.editing,
-        deletion: secureFeatures.deletion,
-        creation: secureFeatures.creation,
-        import: secureFeatures.import,
-        export: secureFeatures.export
-      },
-      secureHandlers: {
-        onEditRow: !!secureHandlers.onEditRow,
-        onDeleteRow: !!secureHandlers.onDeleteRow,
-        onCreateRow: !!secureHandlers.onCreateRow,
-        onImport: !!secureHandlers.onImport,
-        onExport: !!secureHandlers.onExport
-      },
-      permissions: {
-        canUpdate: permissions.canUpdate.can,
-        canDelete: permissions.canDelete.can,
-        canCreate: permissions.canCreate.can,
-        canImport: permissions.canImport.can,
-        canExport: permissions.canExport.can
-      }
-    });
-    
     // Add Edit action with RBAC check
     if (secureFeatures.editing && secureHandlers.onEditRow && !result.some(a => a.label === 'Edit')) {
       result.push({
@@ -804,13 +704,6 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
       });
     }
 
-    // Log final actions in development
-    logger.debug('Final Actions:', {
-      totalActions: result.length,
-      actionLabels: result.map(a => a.label),
-      hiddenActions: result.filter(a => a.hidden).map(a => a.label)
-    });
-
     return result;
   }, [actions, secureFeatures, permissions, secureHandlers, resolvedGetRowId, stateActions, data]);
 
@@ -842,16 +735,6 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
       ? ['select', ...state.columnOrder.filter(id => id !== 'select')]
       : state.columnOrder;
     
-    // Log column order normalization in development
-    if (secureFeatures.selection && state.columnOrder[0] !== 'select') {
-      logger.warn('Column order normalized:', {
-        original: state.columnOrder,
-        normalized: normalizedColumnOrder,
-        firstColumnOriginal: state.columnOrder[0],
-        firstColumnNormalized: normalizedColumnOrder[0]
-      });
-    }
-    
     return {
       sorting: state.sorting,
       columnFilters: state.columnFilters,
@@ -905,44 +788,6 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
   
 
   const table = useReactTable(tableConfig);
-  
-  // Diagnostic logging when table is created but rows are empty
-  useEffect(() => {
-    const rows = table.getRowModel().rows;
-    
-    if (rows.length === 0 && finalTableData.length > 0) {
-      const coreRows = table.getCoreRowModel().rows;
-      const prePaginationRows = table.getPrePaginationRowModel?.()?.rows || [];
-      const filteredRows = table.getFilteredRowModel?.()?.rows || [];
-      const sortedRows = table.getSortedRowModel?.()?.rows || [];
-      const tableState = table.getState();
-      
-      logger.warn('Table created but rows are empty!', {
-        finalTableDataLength: finalTableData.length,
-        tableConfigDataLength: tableConfig.data?.length || 0,
-        coreRowsLength: coreRows.length,
-        prePaginationRowsLength: prePaginationRows.length,
-        filteredRowsLength: filteredRows.length,
-        sortedRowsLength: sortedRows.length,
-        finalRowsLength: rows.length,
-        pagination: tableState.pagination,
-        finalPaginationMode,
-        hasServerSideConfig: !!serverSide,
-        tableOptions: {
-          getCoreRowModel: !!tableConfig.getCoreRowModel,
-          getFilteredRowModel: !!tableConfig.getFilteredRowModel,
-          getSortedRowModel: !!tableConfig.getSortedRowModel,
-          getPaginationRowModel: !!tableConfig.getPaginationRowModel,
-          manualPagination: tableConfig.manualPagination,
-          manualFiltering: tableConfig.manualFiltering,
-          manualSorting: tableConfig.manualSorting,
-          pageCount: tableConfig.pageCount,
-        },
-        hasRowId: !!resolvedGetRowId,
-        effectivePageSize,
-      });
-    }
-  }, [table, finalTableData.length, tableConfig, resolvedGetRowId, finalPaginationMode, serverSide, effectivePageSize, logger]);
 
   // ============================================================================
   // RBAC VALIDATION AND EARLY RETURNS - AFTER ALL HOOKS
@@ -1084,31 +929,9 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
                   };
                   
                   // If custom handler provided, call it with options
-                  console.log('[DataTableCore] Export handler check:', {
-                    'secureHandlers.onExport exists': !!secureHandlers.onExport,
-                    'permissions.canExport.can': permissions.canExport.can,
-                    'onExport prop provided': !!onExport,
-                    'onExport type': typeof onExport,
-                  });
-                  
                   if (secureHandlers.onExport) {
-                    console.log('[DataTableCore] ✅ Calling custom onExport handler');
-                    logger.debug('[DataTableCore] Calling custom onExport handler');
                     await secureHandlers.onExport(exportOptions);
-                    console.log('[DataTableCore] ✅ Custom onExport handler completed');
-                    logger.debug('[DataTableCore] Custom onExport handler completed');
                     return;
-                  } else {
-                    console.warn('[DataTableCore] ⚠️ No custom onExport handler, using default export', {
-                      'secureHandlers.onExport': !!secureHandlers.onExport,
-                      'permissions.canExport.can': permissions.canExport.can,
-                      'onExport prop provided': !!onExport,
-                    });
-                    logger.debug('[DataTableCore] No custom onExport handler, using default export', {
-                      'secureHandlers.onExport': !!secureHandlers.onExport,
-                      'permissions.canExport.can': permissions.canExport.can,
-                      'onExport prop provided': !!onExport,
-                    });
                   }
                   
                   // Default export: exports exactly what's shown in the table
@@ -1150,8 +973,6 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
                     description: `Data exported to ${exportOptions.filename}`,
                     variant: "default"
                   });
-                  
-                  logger.debug('Export completed successfully');
                 } catch (error) {
                   logger.error('Failed to export data:', error);
                   
@@ -1421,12 +1242,10 @@ function DataTableInternal<TData extends DataRecord>(props: DataTableCoreProps<T
         onImport={async (data: TData[]) => {
           if (onImport) {
             try {
-              logger.debug('onImport called with', data.length, 'rows');
               const result = onImport(data);
               if (result && typeof result.then === 'function') {
                 await result;
               }
-              logger.debug('onImport completed successfully');
               
               // Show success toast
               // NOTE: Toast notifications use default timeout (5 seconds) - do not set duration property

package/src/components/DataTable/components/DataTableErrorBoundary.tsx

@@ -10,7 +10,7 @@
 import React, { Component, ErrorInfo, ReactNode } from 'react';
 import { Alert, AlertDescription, AlertTitle } from '../../Alert/Alert';
 import { Button } from '../../Button/Button';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 // Icons removed to avoid test mocking issues
 
 // ============================================================================

package/src/components/DataTable/components/DataTableModals.tsx

@@ -23,7 +23,7 @@
 
 import React, { useEffect } from 'react';
 import { ImportModal, type ImportModalConfig } from './ImportModal';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 
 /**
  * Maps CSV column data to table column structure
@@ -43,8 +43,6 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
   // Priority: editAccessorKey > accessorKey > id
   const columnMap = new Map<string, string>();
   
-  logger.debug('Building column map from', columns.length, 'column definitions');
-  
   columns.forEach(col => {
     const fieldName = col.editAccessorKey || col.accessorKey || col.id;
     const header = typeof col.header === 'string' ? col.header : '';
@@ -53,13 +51,11 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
       const headerLower = header.toLowerCase();
       // Map header to field name (case-insensitive)
       columnMap.set(headerLower, fieldName);
-      logger.debug(`Mapped "${header}" -> "${fieldName}"`);
       
       // Also map id/accessorKey if different from header
       const colId = col.id || col.accessorKey;
       if (colId && colId !== header && colId !== fieldName) {
         columnMap.set(colId.toLowerCase(), fieldName);
-        logger.debug(`Also mapped "${colId}" -> "${fieldName}"`);
       }
       
       // For reference fields with editAccessorKey, also map the ID column header
@@ -68,10 +64,8 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
         const editAccessorKey = col.editAccessorKey; // Store in const for proper type narrowing
         const idColumnHeader = `${header} (ID)`;
         columnMap.set(idColumnHeader.toLowerCase(), editAccessorKey);
-        logger.debug(`Mapped ID column "${idColumnHeader}" -> "${editAccessorKey}"`);
         // Also map the editAccessorKey directly (in case CSV uses the field name)
         columnMap.set(editAccessorKey.toLowerCase(), editAccessorKey);
-        logger.debug(`Also mapped "${editAccessorKey}" -> "${editAccessorKey}"`);
       }
     } else {
       logger.warn('Skipping column with missing fieldName or header:', col);
@@ -83,10 +77,6 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
     return [];
   }
   
-  const csvHeaders = Object.keys(csvData[0]);
-  logger.debug('CSV headers found:', csvHeaders);
-  logger.debug('Column map size:', columnMap.size);
-  
   // Transform CSV data using the mapping
   const mappedData = csvData.map((row, index) => {
     const mappedRow: Record<string, unknown> = {};
@@ -108,9 +98,6 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
           const keyWithSpace = ` ${mapKey}`;
           if (csvHeaderLower === mapKey || csvHeaderLower.endsWith(keyWithSpace)) {
             fieldName = mapValue;
-            if (index === 0) {
-              logger.debug(`Flexible match: "${csvHeader}" -> "${mapValue}" (matched "${mapKey}")`);
-            }
             break; // Found a match, stop searching
           }
         }
@@ -118,9 +105,6 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
       
       if (fieldName) {
         mappedRow[fieldName] = row[csvHeader];
-        if (index === 0) {
-          logger.debug(`Row 0: "${csvHeader}" -> "${fieldName}"`);
-        }
       } else {
         // If no mapping found, use the CSV header as-is (lowercase)
         mappedRow[csvHeaderLower] = row[csvHeader];
@@ -133,11 +117,6 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
     return mappedRow as TData;
   });
   
-  logger.debug('Mapped', mappedData.length, 'rows');
-  if (mappedData.length > 0) {
-    logger.debug('First mapped row keys:', Object.keys(mappedData[0]));
-  }
-  
   return mappedData;
 }
 
@@ -230,10 +209,7 @@ export function DataTableModals<TData extends Record<string, unknown> = Record<s
             // Automatically map CSV columns to table columns based on column definitions
             let mappedData: TData[];
             if (columns && columns.length > 0) {
-              logger.debug('Mapping CSV data with', columns.length, 'column definitions');
-              logger.debug('Raw CSV headers:', rawData.length > 0 ? Object.keys(rawData[0]) : []);
               mappedData = mapCSVToTableColumns<TData>(rawData, columns);
-              logger.debug('Mapped data sample:', mappedData.length > 0 ? mappedData[0] : null);
             } else {
               logger.warn('No columns provided for mapping, using raw data');
               mappedData = rawData as TData[];
@@ -244,12 +220,10 @@ export function DataTableModals<TData extends Record<string, unknown> = Record<s
               throw new Error('Import handler is not configured. Please provide an onImport callback.');
             }
             
-            logger.debug('Calling onImport with', mappedData.length, 'rows');
             const result = onImport(mappedData);
             if (result && typeof result.then === 'function') {
               await result;
             }
-            logger.debug('Import completed successfully');
           } catch (error) {
             logger.error('Import error:', error);
             throw error; // Re-throw to let ImportModal handle it

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/EditableRow.tsx

@@ -14,7 +14,7 @@ import {
   SelectLabel,
   SelectSeparator,
 } from '../../Select/Select';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 import type { CellValue, DataRecord, DataTableAction, EditableColumnDef } from '../types';
 
 interface EditableRowProps<TData extends DataRecord> {

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/ImportModal.tsx

@@ -41,7 +41,7 @@ import { Button } from '../../Button/Button';
 import { Input } from '../../Input/Input';
 import { Progress } from '../../Progress/Progress';
 import { Upload, FileText, AlertCircle } from 'lucide-react';
-import { createLogger } from '../../../utils/logger';
+import { createLogger } from '../../../utils/core/logger';
 
 /**
  * Configuration interface for customizing ImportModal text content
@@ -160,11 +160,7 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
 
 
   const processCSV = (csvText: string): Array<Record<string, unknown>> => {
-    logger.debug('Raw CSV text:', csvText.substring(0, 200) + '...');
-    
     const lines = csvText.split('\n').filter(line => line.trim());
-    logger.debug('CSV lines count:', lines.length);
-    logger.debug('First few lines:', lines.slice(0, 3));
     
     if (lines.length < 2) {
       throw new Error('CSV must have at least a header row and one data row');
@@ -193,19 +189,16 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
     };
 
     const headers = parseCSVLine(lines[0]).map(h => h.replace(/"/g, '').trim());
-    logger.debug('Parsed headers:', headers);
     
-    const data = lines.slice(1).map((line, index) => {
+    const data = lines.slice(1).map((line) => {
       const values = parseCSVLine(line).map(v => v.replace(/"/g, '').trim());
       const row: Record<string, unknown> = {};
       headers.forEach((header, colIndex) => {
         row[header] = values[colIndex] || '';
       });
-      logger.debug(`Row ${index + 1}:`, row);
       return row;
     });
 
-    logger.debug('Final parsed data:', data);
     return data;
   };
 
@@ -350,7 +343,6 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
   
   const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFile = event.target.files?.[0];
-    logger.debug('File selected:', selectedFile?.name);
     if (selectedFile) {
       setFile(selectedFile);
       setError(null);
@@ -359,13 +351,9 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
       // Generate preview
       try {
         const text = await selectedFile.text();
-        logger.debug('File content length:', text.length);
         const data = processCSV(text);
-        logger.debug('Parsed CSV data:', data.length, 'rows');
-        logger.debug('Setting preview data:', data.slice(0, 5));
         setPreviewData(data.slice(0, 5)); // Show first 5 rows as preview
         setTotalCount(data.length); // Store total count
-        logger.debug('Preview data state should be updated');
       } catch (err) {
         logger.error('CSV parsing error:', err);
         setError(err instanceof Error ? err.message : 'Failed to preview file');