@jmruthers/pace-core 0.5.95 → 0.5.97

package/docs/api/interfaces/StorageConfig.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / StorageConfig
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / StorageConfig
 
 # Interface: StorageConfig
 

package/docs/api/interfaces/StorageFileInfo.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / StorageFileInfo
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / StorageFileInfo
 
 # Interface: StorageFileInfo
 

package/docs/api/interfaces/StorageFileMetadata.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / StorageFileMetadata
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / StorageFileMetadata
 
 # Interface: StorageFileMetadata
 

package/docs/api/interfaces/StorageListOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / StorageListOptions
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / StorageListOptions
 
 # Interface: StorageListOptions
 

package/docs/api/interfaces/StorageListResult.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / StorageListResult
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / StorageListResult
 
 # Interface: StorageListResult
 

package/docs/api/interfaces/StorageUploadOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / StorageUploadOptions
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / StorageUploadOptions
 
 # Interface: StorageUploadOptions
 

package/docs/api/interfaces/StorageUploadResult.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / StorageUploadResult
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / StorageUploadResult
 
 # Interface: StorageUploadResult
 

package/docs/api/interfaces/StorageUrlOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / StorageUrlOptions
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / StorageUrlOptions
 
 # Interface: StorageUrlOptions
 

package/docs/api/interfaces/StyleImport.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / StyleImport
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / StyleImport
 
 # Interface: StyleImport
 

package/docs/api/interfaces/SwitchProps.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / SwitchProps
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / SwitchProps
 
 # Interface: SwitchProps
 

package/docs/api/interfaces/ToastActionElement.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / ToastActionElement
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / ToastActionElement
 
 # Interface: ToastActionElement
 

package/docs/api/interfaces/ToastProps.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / ToastProps
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / ToastProps
 
 # Interface: ToastProps
 

package/docs/api/interfaces/UnifiedAuthContextType.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UnifiedAuthContextType
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UnifiedAuthContextType
 
 # Interface: UnifiedAuthContextType
 

package/docs/api/interfaces/UnifiedAuthProviderProps.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UnifiedAuthProviderProps
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UnifiedAuthProviderProps
 
 # Interface: UnifiedAuthProviderProps
 

package/docs/api/interfaces/UseEventLogoOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UseEventLogoOptions
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UseEventLogoOptions
 
 # Interface: UseEventLogoOptions
 

package/docs/api/interfaces/UseEventLogoReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UseEventLogoReturn
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UseEventLogoReturn
 
 # Interface: UseEventLogoReturn
 

package/docs/api/interfaces/UseInactivityTrackerOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UseInactivityTrackerOptions
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UseInactivityTrackerOptions
 
 # Interface: UseInactivityTrackerOptions
 

package/docs/api/interfaces/UseInactivityTrackerReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UseInactivityTrackerReturn
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UseInactivityTrackerReturn
 
 # Interface: UseInactivityTrackerReturn
 

package/docs/api/interfaces/UsePublicEventLogoOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UsePublicEventLogoOptions
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UsePublicEventLogoOptions
 
 # Interface: UsePublicEventLogoOptions
 

package/docs/api/interfaces/UsePublicEventLogoReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UsePublicEventLogoReturn
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UsePublicEventLogoReturn
 
 # Interface: UsePublicEventLogoReturn
 

package/docs/api/interfaces/UsePublicEventOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UsePublicEventOptions
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UsePublicEventOptions
 
 # Interface: UsePublicEventOptions
 

package/docs/api/interfaces/UsePublicEventReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UsePublicEventReturn
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UsePublicEventReturn
 
 # Interface: UsePublicEventReturn
 

package/docs/api/interfaces/UsePublicFileDisplayOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UsePublicFileDisplayOptions
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UsePublicFileDisplayOptions
 
 # Interface: UsePublicFileDisplayOptions
 

package/docs/api/interfaces/UsePublicFileDisplayReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UsePublicFileDisplayReturn
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UsePublicFileDisplayReturn
 
 # Interface: UsePublicFileDisplayReturn
 

package/docs/api/interfaces/UsePublicRouteParamsReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UsePublicRouteParamsReturn
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UsePublicRouteParamsReturn
 
 # Interface: UsePublicRouteParamsReturn
 

package/docs/api/interfaces/UseResolvedScopeOptions.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UseResolvedScopeOptions
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UseResolvedScopeOptions
 
 # Interface: UseResolvedScopeOptions
 

package/docs/api/interfaces/UseResolvedScopeReturn.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UseResolvedScopeReturn
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UseResolvedScopeReturn
 
 # Interface: UseResolvedScopeReturn
 

package/docs/api/interfaces/UserEventAccess.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UserEventAccess
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UserEventAccess
 
 # Interface: UserEventAccess
 

package/docs/api/interfaces/UserMenuProps.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UserMenuProps
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UserMenuProps
 
 # Interface: UserMenuProps
 

package/docs/api/interfaces/UserProfile.md

@@ -1,4 +1,4 @@
-[@jmruthers/pace-core - v0.5.95](../README.md) / [Exports](../modules.md) / UserProfile
+[@jmruthers/pace-core - v0.5.97](../README.md) / [Exports](../modules.md) / UserProfile
 
 # Interface: UserProfile
 

package/docs/api/modules.md

@@ -1,6 +1,6 @@
-[@jmruthers/pace-core - v0.5.95](README.md) / Exports
+[@jmruthers/pace-core - v0.5.97](README.md) / Exports
 
-# @jmruthers/pace-core - v0.5.95
+# @jmruthers/pace-core - v0.5.97
 
 **`File`**
 

package/docs/implementation-guides/data-tables.md

@@ -694,7 +694,9 @@ function MealsTable() {
         filtering: true,  // Enable filtering
         search: true,
         pagination: true,
-        sorting: true
+        sorting: true,
+        export: true,     // Enable export
+        import: true      // Enable import
       }}
       rbac={{
         pageName: 'meals'
@@ -1227,6 +1229,159 @@ function UserManagement() {
 }
 ```
 
+## Export and Import
+
+DataTable provides seamless CSV export and import functionality with automatic column mapping and support for reference fields.
+
+### Basic Export/Import
+
+When `export: true` and `import: true` are enabled in features, the DataTable automatically provides export and import buttons in the toolbar.
+
+**Export**:
+- Exports all visible columns (respects column visibility settings)
+- Exports filtered data (respects current filters/search)
+- Exports all rows across all pages (not just current page)
+- Filename is automatically generated from table title: `{title}_{date}.csv`
+
+**Import**:
+- Automatically maps CSV column headers to table columns
+- Case-insensitive header matching
+- Supports both display names and field names
+
+### Export/Import with Reference Fields
+
+For columns that display related data (using `accessorFn` with `editAccessorKey`), the export includes both the display value and the ID value for seamless round-trip import/export.
+
+#### Example: Reference Field Column
+
+```tsx
+const columns = [
+  {
+    id: "meal_code",
+    accessorKey: "meal_code",
+    header: "Meal Code",
+  },
+  {
+    id: "meal_type",
+    // Display function - shows the related meal type name
+    accessorFn: (row) => row.mealtype?.mealtype_name || 'N/A',
+    header: "Type",
+    // Database field for storing/importing the ID
+    editAccessorKey: 'meal_mealtype_id',
+    fieldType: 'select',
+    fieldOptions: mealTypes.map(mt => ({
+      value: mt.mealtype_id,
+      label: mt.mealtype_name
+    }))
+  },
+  {
+    id: "meal_date",
+    accessorKey: "meal_date",
+    header: "Date",
+  },
+];
+```
+
+#### Export Behavior
+
+When you export this table, you'll get CSV columns like:
+
+```csv
+Meal Code,Type,Type (ID),Date
+ptry,Pantry,abc-123-uuid,2024-04-11
+11bf,Breakfast,def-456-uuid,2024-04-11
+```
+
+**Notice**:
+- "Type" column contains the display value (e.g., "Pantry", "Breakfast")
+- "Type (ID)" column contains the actual ID value (e.g., UUID) for importing
+- Both columns are included automatically
+
+#### Import Behavior
+
+The import automatically recognizes and maps:
+
+| CSV Header | Maps To | Description |
+|------------|---------|-------------|
+| `Type` | `meal_mealtype_id` | Display column header |
+| `Type (ID)` | `meal_mealtype_id` | ID column header |
+| `meal_mealtype_id` | `meal_mealtype_id` | Direct field name |
+
+**Round-Trip Support**: You can export data, modify it in Excel/CSV, and re-import it - the IDs will be automatically mapped correctly.
+
+#### Complete Example
+
+```tsx
+<DataTable
+  data={meals}
+  columns={columns}
+  features={{
+    export: true,
+    import: true,
+    // ... other features
+  }}
+  onImport={async (importedData) => {
+    // Imported data is already mapped to your column structure
+    // Reference fields use the editAccessorKey value
+    for (const meal of importedData) {
+      await createMeal({
+        meal_code: meal.meal_code,
+        meal_mealtype_id: meal.meal_mealtype_id,  // Automatically mapped
+        meal_date: meal.meal_date,
+      });
+    }
+  }}
+  rbac={{
+    pageName: 'meals'
+  }}
+/>
+```
+
+### Custom Export Filename
+
+The export filename is automatically generated from the table `title` prop:
+
+- If `title` is provided: `{title}_{date}.csv` (e.g., `meals_2024-04-11.csv`)
+- If no `title`: `data_export_{date}.csv`
+
+To customize the filename, you can provide a custom `onExport` handler:
+
+```tsx
+<DataTable
+  title="Meals"
+  columns={columns}
+  features={{ export: true }}
+  onExport={async () => {
+    // Custom export logic
+    const data = getFilteredData();
+    await exportToCSV(data, columns, 'custom-export-name.csv');
+  }}
+/>
+```
+
+### Export Column Selection
+
+**Important**: Only **visible columns** are exported. If a column is hidden (via column visibility controls), it will not be included in the export.
+
+To ensure all columns are exported:
+- Make sure all desired columns are visible before exporting
+- Or use a custom `onExport` handler to export specific columns
+
+### Import Column Mapping
+
+The import automatically maps CSV columns using this priority:
+
+1. **Column Header Match** (case-insensitive)
+   - CSV header "Type" → maps to column with `header: "Type"`
+   
+2. **editAccessorKey Match** (for reference fields)
+   - CSV header "Type" or "Type (ID)" → maps to `editAccessorKey` field
+   
+3. **accessorKey/id Match** (fallback)
+   - CSV header matches column `accessorKey` or `id`
+
+If no match is found, the CSV column name is used as-is (useful for new fields).
+
 ### Form Integration
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.5.95",
+  "version": "0.5.97",
   "description": "Clean, modern React component library with Tailwind v4 styling and native utilities",
   "private": false,
   "publishConfig": {

package/src/components/DataTable/DataTable.tsx

@@ -25,7 +25,7 @@
  * - ✅ **Pagination** - Configurable pagination with custom initial page size and page size options
  * - ✅ **Sorting** - Multi-column sorting with visual indicators (↕️ unsorted, ↑ ascending, ↓ descending)
  * - ✅ **Filtering** - Column-specific filtering with multiple input types
- * - ✅ **Export/Import** - CSV and JSON data export/import
+ * - ✅ **Export/Import** - CSV data export/import with automatic column mapping and reference field support
  * - ✅ **Row Selection** - Single and multi-row selection for bulk operations
  * - ✅ **Row Creation** - Add new rows with validation
  * - ✅ **Row Editing** - Inline row editing with input field conversion

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

@@ -982,24 +982,51 @@ function DataTableInternal<TData extends DataRecord>({
                   });
                   
                   // 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;
+                  // Also add ID columns for reference fields (columns with accessorFn + editAccessorKey)
+                  const visibleColumns: Array<{
+                    header?: string;
+                    id?: string;
+                    accessorKey?: string;
+                    accessorFn?: (row: any) => any;
+                    editAccessorKey?: string;
+                    isIdColumn?: boolean;
+                  }> = [];
+                  
+                  visibleTableColumns.forEach(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;
+                    
+                    const hasAccessorFn = 'accessorFn' in originalCol && (originalCol as any).accessorFn;
+                    const editAccessorKey = originalCol.editAccessorKey;
+                    
+                    // Add the display column (what's shown in the table)
+                    visibleColumns.push({
+                      ...originalCol,
+                      header: typeof originalCol.header === 'string' 
+                        ? originalCol.header 
+                        : originalCol.accessorKey || tableCol.id || 'Column',
+                      // Preserve accessorFn if present (for computed/reference fields)
+                      // accessorFn is part of ColumnDef from TanStack Table
+                      accessorFn: hasAccessorFn ? (originalCol as any).accessorFn : undefined,
+                    });
+                    
+                    // For reference fields (accessorFn + editAccessorKey), also add ID column
+                    // This allows round-trip import/export to work seamlessly
+                    if (hasAccessorFn && editAccessorKey) {
+                      visibleColumns.push({
+                        id: editAccessorKey,
+                        accessorKey: editAccessorKey,
+                        header: `${originalCol.header || 'ID'} (ID)`,
+                        isIdColumn: true,
+                        editAccessorKey: editAccessorKey,
                       });
-                      
-                      if (!originalCol) return null;
-                      
-                      return {
-                        ...originalCol,
-                        header: typeof originalCol.header === 'string' 
-                          ? originalCol.header 
-                          : originalCol.accessorKey || tableCol.id || 'Column',
-                      };
-                    })
-                    .filter((col): col is NonNullable<typeof col> => col !== null);
+                    }
+                  });
                   
                   // Generate filename with timestamp
                   const timestamp = new Date().toISOString().split('T')[0];
@@ -1249,7 +1276,7 @@ function DataTableInternal<TData extends DataRecord>({
       <DataTableModals
         showImportModal={state.showImportModal}
         onCloseImportModal={() => stateActions.setImportModal(false)}
-        onImport={async (data) => {
+        onImport={async (data: TData[]) => {
           if (onImport) {
             const result = onImport(data);
             if (result && typeof result.then === 'function') {
@@ -1259,6 +1286,12 @@ function DataTableInternal<TData extends DataRecord>({
           stateActions.setImportModal(false);
         }}
         importModalConfig={importModalConfig}
+        columns={columns.map(col => ({
+          id: col.id,
+          accessorKey: col.accessorKey,
+          header: typeof col.header === 'string' ? col.header : undefined,
+          editAccessorKey: col.editAccessorKey,
+        }))}
       />
     </>
   );

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

@@ -24,20 +24,83 @@
 import React, { useEffect } from 'react';
 import { ImportModal, type ImportModalConfig } from './ImportModal';
 
+/**
+ * Maps CSV column data to table column structure
+ * Handles reference fields (columns with editAccessorKey) and direct accessorKey columns
+ */
+function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<string, unknown>>(
+  csvData: Array<Record<string, unknown>>,
+  columns: Array<{
+    id?: string;
+    accessorKey?: string;
+    header?: string;
+    editAccessorKey?: string;
+  }>
+): TData[] {
+  // Create a mapping from CSV headers to table field names
+  // Priority: editAccessorKey > accessorKey > id
+  const columnMap = new Map<string, string>();
+  
+  columns.forEach(col => {
+    const fieldName = col.editAccessorKey || col.accessorKey || col.id;
+    const header = typeof col.header === 'string' ? col.header : '';
+    
+    if (fieldName && header) {
+      // Map header to field name (case-insensitive)
+      columnMap.set(header.toLowerCase(), 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);
+      }
+      
+      // For reference fields with editAccessorKey, also map the ID column header
+      // This handles exports that include both "Type" and "Type (ID)" columns
+      if (col.editAccessorKey && header) {
+        const idColumnHeader = `${header} (ID)`;
+        columnMap.set(idColumnHeader.toLowerCase(), col.editAccessorKey);
+        // Also map the editAccessorKey directly (in case CSV uses the field name)
+        columnMap.set(col.editAccessorKey.toLowerCase(), col.editAccessorKey);
+      }
+    }
+  });
+  
+  // Transform CSV data using the mapping
+  return csvData.map(row => {
+    const mappedRow: Record<string, unknown> = {};
+    
+    // For each CSV column, find the corresponding table field
+    Object.keys(row).forEach(csvHeader => {
+      const csvHeaderLower = csvHeader.toLowerCase();
+      const fieldName = columnMap.get(csvHeaderLower) || csvHeaderLower;
+      mappedRow[fieldName] = row[csvHeader];
+    });
+    
+    return mappedRow as TData;
+  });
+}
+
 /**
  * Props interface for the DataTableModals component
  * @public
  */
-export interface DataTableModalsProps {
+export interface DataTableModalsProps<TData extends Record<string, unknown> = Record<string, unknown>> {
   // Import modal
   /** Whether the import modal is visible */
   showImportModal: boolean;
   /** Callback function when the import modal is closed */
   onCloseImportModal: () => void;
   /** Callback function when data is imported successfully */
-  onImport: (data: any[]) => void | Promise<void>;
+  onImport: (data: TData[]) => void | Promise<void>;
   /** Configuration object for customizing import modal text content */
   importModalConfig?: ImportModalConfig;
+  /** Column definitions for automatic column mapping during import */
+  columns?: Array<{
+    id?: string;
+    accessorKey?: string;
+    header?: string;
+    editAccessorKey?: string;
+  }>;
   
   // Focus management
   /** Function to store focus before opening modal */
@@ -72,14 +135,15 @@ export interface DataTableModalsProps {
  * />
  * ```
  */
-export function DataTableModals({
+export function DataTableModals<TData extends Record<string, unknown> = Record<string, unknown>>({
   showImportModal,
   onCloseImportModal,
   onImport,
   importModalConfig,
+  columns,
   onStoreFocus,
   onRestoreFocus,
-}: DataTableModalsProps) {
+}: DataTableModalsProps<TData>) {
   // Handle focus management for import modal
   useEffect(() => {
     if (showImportModal) {
@@ -99,7 +163,14 @@ export function DataTableModals({
       <ImportModal
         isOpen={showImportModal}
         onClose={onCloseImportModal}
-        onImport={onImport}
+        onImport={async (rawData: Array<Record<string, unknown>>) => {
+          // Automatically map CSV columns to table columns based on column definitions
+          const mappedData = columns ? mapCSVToTableColumns<TData>(rawData, columns) : (rawData as TData[]);
+          const result = onImport(mappedData);
+          if (result && typeof result.then === 'function') {
+            await result;
+          }
+        }}
         config={importModalConfig}
       />