@jmruthers/pace-core 0.5.121 → 0.5.124

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

@@ -53,6 +53,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 { normalizeDataTableFeatures } from '../types';
 import type {
@@ -216,13 +217,7 @@ function DataTableInternal<TData extends DataRecord>({
   storageKey,
   onLayoutChange,
 }: DataTableCoreProps<TData>) {
-  // CRITICAL DEBUG: Log immediately when component renders
-  console.log('[DataTable] 🚀 DataTableInternal RENDERED:', {
-    dataLength: data.length,
-    columnsCount: columns.length,
-    isLoading: externalIsLoading,
-    pageName: rbac?.pageName || rbac?.pageId,
-  });
+  const logger = React.useMemo(() => createLogger('DataTableCore'), []);
   
   // ============================================================================
   // ALL HOOKS MUST BE CALLED IN THE SAME ORDER EVERY RENDER
@@ -239,6 +234,17 @@ function DataTableInternal<TData extends DataRecord>({
   // 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
   // ============================================================================
@@ -420,16 +426,15 @@ function DataTableInternal<TData extends DataRecord>({
   });
 
   useEffect(() => {
-    if (!hierarchicalValidation.isValid && import.meta.env?.MODE === 'development') {
-      console.error('[DataTable] Hierarchical data validation failed:', hierarchicalValidation.errors);
+    if (!hierarchicalValidation.isValid) {
+      logger.error('Hierarchical data validation failed:', hierarchicalValidation.errors);
     }
-  }, [hierarchicalValidation]);
+  }, [hierarchicalValidation, logger]);
 
-  // CRITICAL DEBUG: Log when finalTableData is empty but input data exists
-  // This helps diagnose the "record count shows but no rows" bug
+  // Diagnostic logging when finalTableData is empty but input data exists
   useEffect(() => {
-    if (import.meta.env?.MODE === 'development' && finalTableData.length === 0 && data.length > 0) {
-      console.warn('[DataTable] Diagnostic: finalTableData empty but input data exists', {
+    if (finalTableData.length === 0 && data.length > 0) {
+      logger.warn('Diagnostic: finalTableData empty but input data exists', {
         inputDataLength: data.length,
         finalTableDataLength: finalTableData.length,
         dataCount: finalDataCount,
@@ -440,7 +445,7 @@ function DataTableInternal<TData extends DataRecord>({
         hierarchicalValid: hierarchicalValidation.isValid,
       });
     }
-  }, [finalTableData.length, data.length, finalDataCount, finalPaginationMode, serverData, secureFeatures.hierarchical, hierarchical, hierarchicalValidation.isValid]);
+  }, [finalTableData.length, data.length, finalDataCount, finalPaginationMode, serverData, secureFeatures.hierarchical, hierarchical, hierarchicalValidation.isValid, logger]);
 
   const {
     columnOrder: savedColumnOrder,
@@ -473,19 +478,17 @@ function DataTableInternal<TData extends DataRecord>({
   useEffect(() => {
     if (secureFeatures.selection && state.columnOrder.includes('select') && state.columnOrder[0] !== 'select') {
       const normalizedOrder = ['select', ...state.columnOrder.filter(id => id !== 'select')];
-      if (import.meta.env?.MODE === 'development') {
-        console.warn('[DataTable] Correcting column order state - moving select to first position:', {
-          before: state.columnOrder,
-          after: normalizedOrder
-        });
-      }
+      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]);
+  }, [secureFeatures.selection, secureFeatures.columnReordering, state.columnOrder, stateActions, updateColumnOrder, logger]);
 
   // ============================================================================
   // CONFIGURATION RESOLUTION - ALWAYS call these hooks
@@ -507,14 +510,12 @@ function DataTableInternal<TData extends DataRecord>({
       Math.abs(curr - initialPageSize) < Math.abs(prev - initialPageSize) ? curr : prev
     );
     
-    if (import.meta.env?.MODE === 'development') {
-      console.warn(
-        `DataTable: initialPageSize ${initialPageSize} is not available in page size options [${finalPageSizeOptions.join(', ')}]. Using closest option: ${closestOption}`
-      );
-    }
+    logger.warn(
+      `initialPageSize ${initialPageSize} is not available in page size options [${finalPageSizeOptions.join(', ')}]. Using closest option: ${closestOption}`
+    );
     
     return closestOption;
-  }, [initialPageSize, finalPageSizeOptions, secureFeatures.pagination]);
+  }, [initialPageSize, finalPageSizeOptions, secureFeatures.pagination, logger]);
   
   // Determine the effective pageSize to use (validated or current state)
   // CRITICAL: This ensures we always pass a valid pageSize to TanStack Table configuration.
@@ -650,38 +651,76 @@ function DataTableInternal<TData extends DataRecord>({
   // ============================================================================
 
   // MANDATORY: Handlers are automatically secured
-  const secureHandlers = useMemo(() => ({
-    onEditRow: permissions.canUpdate.can ? onEditRow : undefined,
-    onDeleteRow: permissions.canDelete.can ? onDeleteRow : undefined,
-    onCreateRow: permissions.canCreate.can ? onCreateRow : undefined,
-    onImport: permissions.canImport.can ? onImport : undefined,
-    onExport: permissions.canExport.can ? onExport : undefined,
-    onDeleteSelected: permissions.canDelete.can ? onDeleteSelected : undefined,
-  }), [permissions.canUpdate.can, permissions.canDelete.can, permissions.canCreate.can, permissions.canImport.can, permissions.canExport.can, onEditRow, onDeleteRow, onCreateRow, onImport, onExport, onDeleteSelected]);
+  const secureHandlers = useMemo(() => {
+    const handlers = {
+      onEditRow: permissions.canUpdate.can ? onEditRow : undefined,
+      onDeleteRow: permissions.canDelete.can ? onDeleteRow : undefined,
+      onCreateRow: permissions.canCreate.can ? onCreateRow : undefined,
+      onImport: permissions.canImport.can ? onImport : undefined,
+      onExport: permissions.canExport.can ? onExport : undefined,
+      onDeleteSelected: permissions.canDelete.can ? onDeleteSelected : undefined,
+    };
+    
+    // Debug logging for creation handler
+    if (import.meta.env.MODE === 'development') {
+      logger.debug('[DataTableCore] Creation 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
+      });
+    }
+    
+    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'
+    });
+  }
 
   // MANDATORY: Process actions with RBAC checks
   const effectiveActions = useMemo(() => {
     // Create a new array to avoid mutating the original
     const result = [...actions];
     
-    // DEBUG: Log action configuration
-    if (import.meta.env.MODE === 'development') {
-      console.log('[DataTable] Action Configuration Debug:', {
-        originalActions: actions.length,
-        secureFeatures: {
-          editing: secureFeatures.editing,
-          deletion: secureFeatures.deletion
-        },
-        secureHandlers: {
-          onEditRow: !!secureHandlers.onEditRow,
-          onDeleteRow: !!secureHandlers.onDeleteRow
-        },
-        permissions: {
-          canUpdate: permissions.canUpdate.can,
-          canDelete: permissions.canDelete.can
-        }
-      });
-    }
+    // 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')) {
@@ -730,7 +769,7 @@ function DataTableInternal<TData extends DataRecord>({
               variant: "default"
             });
           } catch (error) {
-            console.error('[DataTable] Delete error:', error);
+            logger.error('Delete error:', error);
             toast({
               title: "Delete Failed",
               description: error instanceof Error ? error.message : 'Failed to delete row',
@@ -745,14 +784,12 @@ function DataTableInternal<TData extends DataRecord>({
       });
     }
 
-    // DEBUG: Log final actions
-    if (import.meta.env.MODE === 'development') {
-      console.log('[DataTable] Final Actions:', {
-        totalActions: result.length,
-        actionLabels: result.map(a => a.label),
-        hiddenActions: result.filter(a => a.hidden).map(a => a.label)
-      });
-    }
+    // 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]);
@@ -785,16 +822,14 @@ function DataTableInternal<TData extends DataRecord>({
       ? ['select', ...state.columnOrder.filter(id => id !== 'select')]
       : state.columnOrder;
     
-    // Debug logging in dev mode
-    if (import.meta.env?.MODE === 'development' && secureFeatures.selection) {
-      if (state.columnOrder[0] !== 'select') {
-        console.warn('[DataTable] Column order normalized:', {
-          original: state.columnOrder,
-          normalized: normalizedColumnOrder,
-          firstColumnOriginal: state.columnOrder[0],
-          firstColumnNormalized: normalizedColumnOrder[0]
-        });
-      }
+    // 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 {
@@ -848,59 +883,21 @@ function DataTableInternal<TData extends DataRecord>({
     hasServerSideConfig: !!serverSide,
   });
   
-  // CRITICAL DEBUG: Always log table configuration state
-  useEffect(() => {
-    console.log('[DataTable] 🔍 Table Config Created:', {
-      finalTableDataLength: finalTableData.length,
-      configDataLength: tableConfig.data?.length || 0,
-      columnsCount: enhancedColumns.length,
-      finalPaginationMode,
-      hasServerSideConfig: !!serverSide,
-      manualPagination: tableConfig.manualPagination,
-      hasGetPaginationRowModel: !!tableConfig.getPaginationRowModel,
-      effectivePageSize,
-      paginationState: tableStateSnapshot.pagination,
-    });
-  }, [finalTableData.length, tableConfig.data, tableConfig.manualPagination, tableConfig.getPaginationRowModel, finalPaginationMode, serverSide, effectivePageSize, tableStateSnapshot.pagination, enhancedColumns.length]);
 
   const table = useReactTable(tableConfig);
   
-  // CRITICAL DEBUG: Always log table state immediately after creation
+  // Diagnostic logging when table is created but rows are empty
   useEffect(() => {
     const rows = table.getRowModel().rows;
-    const coreRows = table.getCoreRowModel().rows;
-    const prePaginationRows = table.getPrePaginationRowModel?.()?.rows || [];
-    const filteredRows = table.getFilteredRowModel?.()?.rows || [];
-    const sortedRows = table.getSortedRowModel?.()?.rows || [];
-    const tableState = table.getState();
-    
-    console.log('[DataTable] 🔍 Table Created - Row Counts:', {
-      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,
-    });
     
     if (rows.length === 0 && finalTableData.length > 0) {
-      console.warn('[DataTable] ⚠️ CRITICAL: Table created but rows are empty!', {
+      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,
@@ -925,7 +922,7 @@ function DataTableInternal<TData extends DataRecord>({
         effectivePageSize,
       });
     }
-  }, [table, finalTableData.length, tableConfig, resolvedGetRowId, finalPaginationMode, serverSide, effectivePageSize]);
+  }, [table, finalTableData.length, tableConfig, resolvedGetRowId, finalPaginationMode, serverSide, effectivePageSize, logger]);
 
   // ============================================================================
   // RBAC VALIDATION AND EARLY RETURNS - AFTER ALL HOOKS
@@ -938,36 +935,26 @@ function DataTableInternal<TData extends DataRecord>({
 
   // Wait for permission check to complete before making access decisions
   if (permissions.canRead.isLoading) {
-    console.log('[DataTable] ⏳ Permission check in progress - showing loading state');
     return <LoadingComponent />;
   }
 
   // MANDATORY: No data access without read permission (only check after loading completes)
   if (!permissions.canRead.can) {
-    console.warn('[DataTable] 🚫 Access denied - no read permission:', {
+    logger.warn('Access denied - no read permission:', {
       canRead: permissions.canRead,
       pageId: effectivePageId,
       isLoading: permissions.canRead.isLoading,
     });
     return <AccessDeniedPage resource={effectivePageId || 'unknown-page'} operation="read" />;
   }
-  
-  console.log('[DataTable] ✅ Permission check passed - rendering table');
 
   // ============================================================================
   // RENDER
   // ============================================================================
   
   if (isLoading) {
-    console.log('[DataTable] ⏳ Loading state - showing loading component');
     return <LoadingComponent />;
   }
-  
-  console.log('[DataTable] 📊 About to render table with data:', {
-    finalTableDataLength: finalTableData.length,
-    tableExists: !!table,
-    canGetRows: !!table?.getRowModel,
-  });
 
   const PaginationComponent = enhancedPagination || finalPaginationMode !== 'client' 
     ? EnhancedPaginationControls 
@@ -1104,11 +1091,9 @@ function DataTableInternal<TData extends DataRecord>({
                     variant: "default"
                   });
                   
-                  if (import.meta.env.MODE === 'development') {
-                    console.log('DataTable: Export completed successfully');
-                  }
+                  logger.debug('Export completed successfully');
                 } catch (error) {
-                  console.error('DataTable: Failed to export data:', error);
+                  logger.error('Failed to export data:', error);
                   
                   // Show error toast notification to user
                   const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
@@ -1117,10 +1102,6 @@ function DataTableInternal<TData extends DataRecord>({
                     description: `Failed to export data: ${errorMessage}`,
                     variant: "destructive"
                   });
-                  
-                  if (import.meta.env.MODE === 'development') {
-                    console.error('DataTable: Export error details:', error);
-                  }
                 }
               })}
               rowSelection={rowSelection}
@@ -1146,7 +1127,7 @@ function DataTableInternal<TData extends DataRecord>({
                     variant: "default"
                   });
                 } catch (error) {
-                  console.error('[DataTable] Bulk delete error:', error);
+                  logger.error('Bulk delete error:', error);
                   toast({
                     title: "Delete Failed",
                     description: error instanceof Error ? error.message : 'Failed to delete selected rows',
@@ -1380,12 +1361,12 @@ function DataTableInternal<TData extends DataRecord>({
         onImport={async (data: TData[]) => {
           if (onImport) {
             try {
-              console.log('[DataTableCore] onImport called with', data.length, 'rows');
+              logger.debug('onImport called with', data.length, 'rows');
               const result = onImport(data);
               if (result && typeof result.then === 'function') {
                 await result;
               }
-              console.log('[DataTableCore] onImport completed successfully');
+              logger.debug('onImport completed successfully');
               
               // Show success toast
               // NOTE: Toast notifications use default timeout (5 seconds) - do not set duration property
@@ -1395,7 +1376,7 @@ function DataTableInternal<TData extends DataRecord>({
                 variant: "default"
               });
             } catch (error) {
-              console.error('[DataTableCore] Import error:', error);
+              logger.error('Import error:', error);
               toast({
                 title: "Import Failed",
                 description: error instanceof Error ? error.message : 'Failed to import data',
@@ -1405,7 +1386,7 @@ function DataTableInternal<TData extends DataRecord>({
               return;
             }
           } else {
-            console.error('[DataTableCore] onImport handler not provided');
+            logger.error('onImport handler not provided');
             toast({
               title: "Import Not Configured",
               description: "Import functionality requires an onImport handler to be provided.",

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

@@ -23,6 +23,7 @@
 
 import React, { useEffect } from 'react';
 import { ImportModal, type ImportModalConfig } from './ImportModal';
+import { createLogger } from '../../../utils/logger';
 
 /**
  * Maps CSV column data to table column structure
@@ -37,11 +38,12 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
     editAccessorKey?: string;
   }>
 ): TData[] {
+  const logger = createLogger('mapCSVToTableColumns');
   // Create a mapping from CSV headers to table field names
   // Priority: editAccessorKey > accessorKey > id
   const columnMap = new Map<string, string>();
   
-  console.log('[mapCSVToTableColumns] Building column map from', columns.length, 'column definitions');
+  logger.debug('Building column map from', columns.length, 'column definitions');
   
   columns.forEach(col => {
     const fieldName = col.editAccessorKey || col.accessorKey || col.id;
@@ -51,13 +53,13 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
       const headerLower = header.toLowerCase();
       // Map header to field name (case-insensitive)
       columnMap.set(headerLower, fieldName);
-      console.log(`[mapCSVToTableColumns] Mapped "${header}" -> "${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);
-        console.log(`[mapCSVToTableColumns] Also mapped "${colId}" -> "${fieldName}"`);
+        logger.debug(`Also mapped "${colId}" -> "${fieldName}"`);
       }
       
       // For reference fields with editAccessorKey, also map the ID column header
@@ -66,24 +68,24 @@ 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);
-        console.log(`[mapCSVToTableColumns] Mapped ID column "${idColumnHeader}" -> "${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);
-        console.log(`[mapCSVToTableColumns] Also mapped "${editAccessorKey}" -> "${editAccessorKey}"`);
+        logger.debug(`Also mapped "${editAccessorKey}" -> "${editAccessorKey}"`);
       }
     } else {
-      console.warn('[mapCSVToTableColumns] Skipping column with missing fieldName or header:', col);
+      logger.warn('Skipping column with missing fieldName or header:', col);
     }
   });
   
   if (csvData.length === 0) {
-    console.warn('[mapCSVToTableColumns] No CSV data to map');
+    logger.warn('No CSV data to map');
     return [];
   }
   
   const csvHeaders = Object.keys(csvData[0]);
-  console.log('[mapCSVToTableColumns] CSV headers found:', csvHeaders);
-  console.log('[mapCSVToTableColumns] Column map size:', columnMap.size);
+  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) => {
@@ -107,7 +109,7 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
           if (csvHeaderLower === mapKey || csvHeaderLower.endsWith(keyWithSpace)) {
             fieldName = mapValue;
             if (index === 0) {
-              console.log(`[mapCSVToTableColumns] Flexible match: "${csvHeader}" -> "${mapValue}" (matched "${mapKey}")`);
+              logger.debug(`Flexible match: "${csvHeader}" -> "${mapValue}" (matched "${mapKey}")`);
             }
             break; // Found a match, stop searching
           }
@@ -117,13 +119,13 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
       if (fieldName) {
         mappedRow[fieldName] = row[csvHeader];
         if (index === 0) {
-          console.log(`[mapCSVToTableColumns] Row 0: "${csvHeader}" -> "${fieldName}"`);
+          logger.debug(`Row 0: "${csvHeader}" -> "${fieldName}"`);
         }
       } else {
         // If no mapping found, use the CSV header as-is (lowercase)
         mappedRow[csvHeaderLower] = row[csvHeader];
         if (index === 0) {
-          console.warn(`[mapCSVToTableColumns] No mapping found for "${csvHeader}", using as-is`);
+          logger.warn(`No mapping found for "${csvHeader}", using as-is`);
         }
       }
     });
@@ -131,9 +133,9 @@ function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<str
     return mappedRow as TData;
   });
   
-  console.log('[mapCSVToTableColumns] Mapped', mappedData.length, 'rows');
+  logger.debug('Mapped', mappedData.length, 'rows');
   if (mappedData.length > 0) {
-    console.log('[mapCSVToTableColumns] First mapped row keys:', Object.keys(mappedData[0]));
+    logger.debug('First mapped row keys:', Object.keys(mappedData[0]));
   }
   
   return mappedData;
@@ -203,6 +205,7 @@ export function DataTableModals<TData extends Record<string, unknown> = Record<s
   onStoreFocus,
   onRestoreFocus,
 }: DataTableModalsProps<TData>) {
+  const logger = React.useMemo(() => createLogger('DataTableModals'), []);
   // Handle focus management for import modal
   useEffect(() => {
     if (showImportModal) {
@@ -227,28 +230,28 @@ 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) {
-              console.log('[DataTableModals] Mapping CSV data with', columns.length, 'column definitions');
-              console.log('[DataTableModals] Raw CSV headers:', rawData.length > 0 ? Object.keys(rawData[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);
-              console.log('[DataTableModals] Mapped data sample:', mappedData.length > 0 ? mappedData[0] : null);
+              logger.debug('Mapped data sample:', mappedData.length > 0 ? mappedData[0] : null);
             } else {
-              console.warn('[DataTableModals] No columns provided for mapping, using raw data');
+              logger.warn('No columns provided for mapping, using raw data');
               mappedData = rawData as TData[];
             }
             
             if (!onImport) {
-              console.error('[DataTableModals] onImport callback is not provided');
+              logger.error('onImport callback is not provided');
               throw new Error('Import handler is not configured. Please provide an onImport callback.');
             }
             
-            console.log('[DataTableModals] Calling onImport with', mappedData.length, 'rows');
+            logger.debug('Calling onImport with', mappedData.length, 'rows');
             const result = onImport(mappedData);
             if (result && typeof result.then === 'function') {
               await result;
             }
-            console.log('[DataTableModals] Import completed successfully');
+            logger.debug('Import completed successfully');
           } catch (error) {
-            console.error('[DataTableModals] Import error:', error);
+            logger.error('Import error:', error);
             throw error; // Re-throw to let ImportModal handle it
           }
         }}

package/src/components/DataTable/components/DataTableToolbar.tsx

@@ -212,7 +212,20 @@ export function DataTableToolbar<TData extends DataRecord>({
         )}
 
         {/* Row Creation - ONLY if user has create permission */}
-        {features.creation && permissions.canCreate.can && onCreateRow && (
+        {(() => {
+          // Debug logging for creation button visibility
+          if (import.meta.env.MODE === 'development') {
+            const logger = console;
+            logger.debug('[DataTableToolbar] Creation button check:', {
+              'features.creation': features.creation,
+              'permissions.canCreate.can': permissions.canCreate.can,
+              'onCreateRow provided': !!onCreateRow,
+              'will show button': features.creation && permissions.canCreate.can && onCreateRow
+            });
+          }
+          
+          return features.creation && permissions.canCreate.can && onCreateRow;
+        })() && (
           <Button 
             variant="outline" 
             onClick={onCreateRow}