@jmruthers/pace-core 0.5.95 → 0.5.98

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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](../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.98](README.md) / Exports
 
-# @jmruthers/pace-core - v0.5.95
+# @jmruthers/pace-core - v0.5.98
 
 **`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.98",
   "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

@@ -43,7 +43,7 @@ import { ColumnFactory } from '../core/ColumnFactory';
 import { AccessDeniedPage } from './AccessDeniedPage';
 import { useCan, useResolvedScope } from '../../../rbac/hooks';
 import { toast } from '../../../hooks/useToast';
-import { exportToCSV } from '../utils/exportUtils';
+import { exportToCSV, exportToCSVWithTableRows } from '../utils/exportUtils';
 import { useUnifiedAuth } from '../../../providers/UnifiedAuthProvider';
 import { Scope } from '../../../rbac/types';
 import { useDataTablePermissions } from '../hooks/useDataTablePermissions';
@@ -969,8 +969,8 @@ function DataTableInternal<TData extends DataRecord>({
               onExport={secureHandlers.onExport || (async () => {
                 try {
                   // Automatic export: exports exactly what's shown in the table
-                  // Get the current filtered/paginated data (what's actually visible)
-                  const currentData = table.getFilteredRowModel().rows.map(row => row.original);
+                  // Get the table rows (which have getValue() that properly evaluates accessorFn)
+                  const tableRows = table.getFilteredRowModel().rows;
                   
                   // Get only visible columns by checking the actual table columns
                   // This approach is more reliable because it uses the table's actual column registry
@@ -981,32 +981,74 @@ function DataTableInternal<TData extends DataRecord>({
                     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;
+                  // Map table columns to export columns
+                  // Use TanStack Table's getValue() which properly handles accessorFn
+                  const visibleColumns: Array<{
+                    header?: string;
+                    id?: string;
+                    accessorKey?: string;
+                    accessorFn?: (row: any) => any;
+                    editAccessorKey?: string;
+                    isIdColumn?: boolean;
+                  }> = [];
+                  
+                  // Store mapping of column IDs to table column instances for getValue() calls
+                  const columnIdToTableColumn = new Map<string, typeof visibleTableColumns[0]>();
+                  
+                  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;
+                    
+                    // Store the table column for getValue() calls
+                    columnIdToTableColumn.set(tableCol.id, tableCol);
+                    
+                    const hasAccessorFn = 'accessorFn' in originalCol && (originalCol as any).accessorFn;
+                    const editAccessorKey = originalCol.editAccessorKey;
+                    
+                    // Add the display column (what's shown in the table)
+                    // For columns with accessorFn, we'll use the table's getValue() method instead of calling accessorFn directly
+                    const displayHeader = typeof originalCol.header === 'string' 
+                      ? originalCol.header 
+                      : originalCol.accessorKey || tableCol.id || 'Column';
+                    
+                    visibleColumns.push({
+                      ...originalCol,
+                      header: displayHeader,
+                      // Store table column ID for getValue() lookup
+                      id: tableCol.id,
+                      // Preserve accessorFn if present (will use getValue() if available)
+                      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) {
+                      // Use the same string fallback logic as the display column to ensure
+                      // JSX headers are converted to strings (e.g., accessorKey or column ID)
+                      // This prevents "[object Object] (ID)" in the CSV header
+                      const idHeader = `${displayHeader} (ID)`;
+                      visibleColumns.push({
+                        id: editAccessorKey,
+                        accessorKey: editAccessorKey,
+                        header: idHeader,
+                        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];
                   const filename = title ? `${title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}_${timestamp}.csv` : `data_export_${timestamp}.csv`;
                   
-                  // Export to CSV
-                  await exportToCSV(currentData, visibleColumns, filename);
+                  // Export using table rows with getValue() for proper accessorFn evaluation
+                  // This ensures we get the same values that are displayed in the table
+                  await exportToCSVWithTableRows(tableRows, visibleColumns, columnIdToTableColumn, filename);
                   
                   // Show success toast notification
                   toast({
@@ -1249,7 +1291,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 +1301,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,
+        }))}
       />
     </>
   );