@ackplus/react-tanstack-data-table 1.1.12 → 1.1.13

package/src/lib/components/toolbar/table-export-control.tsx

@@ -10,6 +10,8 @@ import {
     Box,
     IconButtonProps,
     SxProps,
+    Divider,
+    LinearProgress,
 } from '@mui/material';
 
 import { MenuDropdown } from '../droupdown/menu-dropdown';
@@ -46,6 +48,9 @@ export function TableExportControl(props: TableExportControlProps = {}) {
         slots,
         slotProps,
         isExporting,
+        exportPhase,
+        exportProgress,
+        onCancelExport,
         // Export callbacks from context (DataTable props)
         exportFilename: contextExportFilename,
     } = useDataTableContext();
@@ -80,11 +85,18 @@ export function TableExportControl(props: TableExportControlProps = {}) {
         }
     };
 
+    const handleCancelExport = () => {
+        if (onCancelExport) {
+            onCancelExport();
+            return;
+        }
+        apiRef?.current?.export.cancelExport();
+    };
+
     // Merge all props for maximum flexibility
     const mergedIconButtonProps = mergeSlotProps(
         {
             size: 'small',
-            disabled: isExporting,
             sx: { flexShrink: 0 },
         },
         exportIconSlotProps,
@@ -98,6 +110,25 @@ export function TableExportControl(props: TableExportControlProps = {}) {
         menuItemProps || {}
     );
 
+    const progressPercentage = typeof exportProgress?.percentage === 'number'
+        ? Math.max(0, Math.min(100, exportProgress.percentage))
+        : undefined;
+
+    const getPhaseLabel = () => {
+        switch (exportPhase) {
+            case 'fetching':
+                return 'Fetching rows from server...';
+            case 'processing':
+                return 'Preparing export file...';
+            case 'downloading':
+                return 'Downloading file...';
+            case 'starting':
+                return 'Starting export...';
+            default:
+                return 'Export in progress...';
+        }
+    };
+
     return (
         <MenuDropdown
             anchor={(
@@ -162,15 +193,40 @@ export function TableExportControl(props: TableExportControlProps = {}) {
                     </MenuItem>
 
                     {isExporting && (
-                        <Box sx={{ p: 2, pt: 1 }}>
-                            <Typography
-                                variant="caption"
-                                color="text.secondary"
-                                sx={{ display: 'block', textAlign: 'center' }}
+                        <>
+                            <Box sx={{ px: 2, pb: 1 }}>
+                                <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.75 }}>
+                                    {getPhaseLabel()}
+                                </Typography>
+                                <LinearProgress
+                                    variant={progressPercentage !== undefined ? 'determinate' : 'indeterminate'}
+                                    value={progressPercentage !== undefined ? progressPercentage : 0}
+                                />
+                                {(exportProgress?.processedRows !== undefined || exportProgress?.totalRows !== undefined) && (
+                                    <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.75 }}>
+                                        {`${exportProgress?.processedRows ?? 0}${exportProgress?.totalRows !== undefined ? ` / ${exportProgress.totalRows}` : ''}${progressPercentage !== undefined ? ` (${progressPercentage}%)` : ''}`}
+                                    </Typography>
+                                )}
+                            </Box>
+                            <Divider sx={{ my: 1 }} />
+                            <MenuItem
+                                onClick={() => {
+                                    handleCancelExport();
+                                    handleClose();
+                                }}
+                                {...mergedMenuItemProps}
                             >
-                                Export in progress...
-                            </Typography>
-                        </Box>
+                                <ListItemText
+                                    primary="Cancel Export"
+                                    secondary="Stop current export job"
+                                    slotProps={{
+                                        primary: {
+                                            color: 'error.main',
+                                        },
+                                    }}
+                                />
+                            </MenuItem>
+                        </>
                     )}
                 </Box>
             )}

package/src/lib/contexts/data-table-context.tsx

@@ -2,7 +2,9 @@ import { Table } from '@tanstack/react-table';
 import React, { createContext, useContext, ReactNode, useMemo, RefObject, ReactElement } from 'react';
 
 import { ColumnFilterState, TableSize } from '../types';
+import { SelectionState } from '../features';
 import { DataTableApi } from '../types/data-table-api';
+import { ExportPhase, ExportProgressPayload, ServerExportResult } from '../types/export.types';
 
 
 /**
@@ -22,14 +24,20 @@ interface DataTableContextValue<T = any> {
     // Export state - managed by the DataTable component
     isExporting?: boolean;
     exportController?: AbortController | null;
+    exportPhase?: ExportPhase | null;
+    exportProgress?: ExportProgressPayload;
     onCancelExport?: () => void;
 
     // Export callbacks - passed from DataTable props
     exportFilename?: string;
-    onExportProgress?: (progress: { processedRows?: number; totalRows?: number; percentage?: number }) => void;
+    onExportProgress?: (progress: ExportProgressPayload) => void;
     onExportComplete?: (result: { success: boolean; filename: string; totalRows: number }) => void;
     onExportError?: (error: { message: string; code: string }) => void;
-    onServerExport?: (filters?: Partial<any>) => Promise<{ data: any[]; total: number }>;
+    onServerExport?: (
+        filters?: Partial<any>,
+        selection?: SelectionState,
+        signal?: AbortSignal
+    ) => Promise<ServerExportResult<any>>;
 }
 
 const DataTableContext = createContext<DataTableContextValue | null>(null);
@@ -51,6 +59,8 @@ export function DataTableProvider<T = any>({
     slotProps = {},
     isExporting,
     exportController,
+    exportPhase,
+    exportProgress,
     onCancelExport,
     exportFilename,
     onExportProgress,
@@ -70,6 +80,8 @@ export function DataTableProvider<T = any>({
         slotProps,
         isExporting,
         exportController,
+        exportPhase,
+        exportProgress,
         onCancelExport,
         exportFilename,
         onExportProgress,
@@ -88,6 +100,8 @@ export function DataTableProvider<T = any>({
         slotProps,
         isExporting,
         exportController,
+        exportPhase,
+        exportProgress,
         onCancelExport,
         exportFilename,
         onExportProgress,