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

package/README.md

@@ -129,7 +129,9 @@ function MyDataTable() {
 |------|------|---------|-------------|
 | `dataMode` | `'client' \| 'server'` | `'client'` | Data management mode |
 | `initialLoadData` | `boolean` | `true` | Load data on component mount |
-| `onFetchData` | `(filters) => Promise<{data, total}>` | - | Server-side data fetching |
+| `onFetchData` | `(filters, meta?) => Promise<{data, total}>` | - | Server-side data fetching with optional refresh metadata (`reason`, `force`) |
+| `onRefreshData` | `(context) => void \| Promise<void>` | - | External refresh handler for controlled data sources (React Query, SWR, etc.) |
+| `onDataChange` | `(nextData, context) => void` | - | Receives mutations from `apiRef.data.*` when data is controlled by props |
 | `onDataStateChange` | `(state) => void` | - | Called when table state changes |
 | `totalRow` | `number` | `0` | Total rows for server-side pagination |
 
@@ -165,10 +167,10 @@ This allows for efficient handling of large datasets where you might select "all
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `enablePagination` | `boolean` | `true` | Enable pagination |
+| `enablePagination` | `boolean` | `false` | Enable pagination |
 | `paginationMode` | `'client' \| 'server'` | `'client'` | Pagination mode |
 | `onPaginationChange` | `(pagination: PaginationState) => void` | - | Pagination change callback |
-| `initialState.pagination` | `{pageIndex: number, pageSize: number}` | `{pageIndex: 0, pageSize: 50}` | Initial pagination state |
+| `initialState.pagination` | `{pageIndex: number, pageSize: number}` | `{pageIndex: 0, pageSize: 10}` | Initial pagination state |
 
 ### Filtering & Search
 
@@ -206,12 +208,17 @@ This allows for efficient handling of large datasets where you might select "all
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `enableExport` | `boolean` | `true` | Enable data export |
+| `enableExport` | `boolean` | `false` | Enable data export |
 | `exportFilename` | `string` | `'export'` | Default export filename |
+| `exportConcurrency` | `'ignoreIfRunning' \| 'cancelAndRestart' \| 'queue'` | `'cancelAndRestart'` | How export requests are handled while another export is running |
+| `exportChunkSize` | `number` | `1000` | Chunk size for server export pagination |
+| `exportStrictTotalCheck` | `boolean` | `false` | Validate server export row count against reported total |
+| `exportSanitizeCSV` | `boolean` | `true` | Protect CSV against spreadsheet formula injection |
 | `onExportProgress` | `(progress: {processedRows?, totalRows?, percentage?}) => void` | - | Export progress callback |
 | `onExportComplete` | `(result: {success: boolean, filename: string, totalRows: number}) => void` | - | Export completion callback |
 | `onExportError` | `(error: {message: string, code: string}) => void` | - | Export error callback |
-| `onServerExport` | `(filters?: Partial<TableState>, selection?: SelectionState) => Promise<{data: any[], total: number}>` | - | Server-side export handler |
+| `onExportStateChange` | `(state: ExportStateChange) => void` | - | Export lifecycle callback (`starting`, `fetching`, `processing`, `downloading`, `completed`, `cancelled`, `error`) |
+| `onServerExport` | `(filters?: Partial<TableState>, selection?: SelectionState, signal?: AbortSignal) => Promise<ServerExportResult<any>>` | - | Server-side export handler (paged data or file URL/blob streaming) |
 | `onExportCancel` | `() => void` | - | Export cancellation callback |
 
 ### Expandable Rows (Enhanced Slot System)
@@ -533,6 +540,98 @@ function ServerSideTable() {
 }
 ```
 
+### React Query Controlled Data (No `onFetchData`)
+
+```tsx
+import { useMemo, useRef, useState } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { DataTable, DataTableApi, SelectionState, TableState } from '@ackplus/react-tanstack-data-table';
+
+function ReactQueryTable() {
+  const apiRef = useRef<DataTableApi<User>>(null);
+  const queryClient = useQueryClient();
+  const [tableState, setTableState] = useState<Partial<TableState>>({
+    pagination: { pageIndex: 0, pageSize: 10 },
+    sorting: [],
+    globalFilter: '',
+  });
+
+  const queryKey = useMemo(() => ['users', tableState], [tableState]);
+
+  const usersQuery = useQuery({
+    queryKey,
+    queryFn: async () => {
+      const res = await fetch('/api/users/query', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(tableState),
+      });
+      return res.json() as Promise<{ data: User[]; total: number }>;
+    },
+    placeholderData: (prev) => prev,
+  });
+
+  const applyUserPatch = async (id: string, patch: Partial<User>) => {
+    const res = await fetch(`/api/users/${id}`, {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(patch),
+    });
+    const updated = (await res.json()) as User;
+    apiRef.current?.data.updateRow(String(updated.id), updated);
+  };
+
+  const handleServerExport = async (
+    filters?: Partial<TableState>,
+    selection?: SelectionState,
+    signal?: AbortSignal,
+  ) => {
+    const res = await fetch('/api/users/export', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ filters, selection }),
+      signal,
+    });
+    return res.json() as Promise<{ data: User[]; total: number }>;
+  };
+
+  return (
+    <DataTable
+      ref={apiRef}
+      dataMode="server"
+      columns={columns}
+      data={usersQuery.data?.data ?? []}
+      totalRow={usersQuery.data?.total ?? 0}
+      loading={usersQuery.isFetching}
+      enablePagination
+      enableSorting
+      enableGlobalFilter
+      onServerExport={handleServerExport}
+      onDataStateChange={setTableState}
+      // Fetch-on-state-change stays outside DataTable
+      onRefreshData={({ options }) =>
+        queryClient.invalidateQueries({
+          queryKey: ['users'],
+          exact: false,
+          refetchType: options.force ? 'all' : 'active',
+        })
+      }
+      // Row mutation sync stays outside DataTable
+      onDataChange={(nextData) => {
+        queryClient.setQueryData(queryKey, (prev: any) => {
+          if (!prev) return prev;
+          return { ...prev, data: nextData };
+        });
+      }}
+    />
+  );
+}
+
+// Manual refresh
+apiRef.current?.data.refresh(); // normal refresh
+apiRef.current?.data.refresh({ force: true, reason: 'manual-hard-refresh' }); // hard refresh
+```
+
 ### Row Selection with Bulk Actions and Enhanced Slot System
 
 ```tsx
@@ -738,6 +837,7 @@ function ManageableColumnsTable() {
 ```tsx
 function ExportableTable() {
   const [exportProgress, setExportProgress] = useState(null);
+  const [exportState, setExportState] = useState(null);
 
   const handleExportProgress = (progress) => {
     setExportProgress(progress);
@@ -753,7 +853,12 @@ function ExportableTable() {
       data={data}
       enableExport
       exportFilename="users-export"
+      exportConcurrency="queue"
+      exportChunkSize={500}
+      exportStrictTotalCheck
+      exportSanitizeCSV
       onExportProgress={handleExportProgress}
+      onExportStateChange={setExportState}
       onExportComplete={handleExportComplete}
       onExportError={(error) => console.error('Export failed:', error)}
     />
@@ -761,6 +866,30 @@ function ExportableTable() {
 }
 ```
 
+### Server Export with Streaming File Response
+
+```tsx
+const handleServerExport = async (filters, selection, signal) => {
+  const res = await fetch('/api/users/export-stream', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ filters, selection }),
+    signal,
+  });
+
+  // Option 1: backend returns generated file payload directly
+  const blob = await res.blob();
+  return {
+    blob,
+    filename: 'users-stream-export.csv',
+    mimeType: 'text/csv',
+  };
+
+  // Option 2: backend returns URL (alternative shape)
+  // return { fileUrl: signedDownloadUrl, filename: 'users-export.csv' };
+};
+```
+
 ## 🎛️ API Reference
 
 ### DataTable Component
@@ -790,6 +919,9 @@ interface DataTableColumn<T> extends ColumnDef<T> {
   
   // Export
   hideInExport?: boolean;
+  exportHeader?: string | ((context) => string);
+  exportValue?: (context) => any;
+  exportFormat?: 'auto' | 'string' | 'number' | 'boolean' | 'json' | 'date' | ((context) => any);
 }
 ```
 
@@ -877,13 +1009,13 @@ function MyComponent() {
 - `selection.deselectAll()` - Deselect all rows
 - `selection.toggleSelectAll()` - Toggle select all
 - `selection.getSelectionState()` - Get current selection state
-- `selection.getSelectedRows()` - Get selected rows
+- `selection.getSelectedRows()` - Get selected rows currently loaded in the table
 - `selection.getSelectedCount()` - Get selected count
 - `selection.isRowSelected(rowId)` - Check if row is selected
 
 **Data Management:**
-- `data.refresh()` - Refresh data
-- `data.reload()` - Reload data
+- `data.refresh(options?)` - Refresh data (`boolean` or `{ resetPagination?, force?, reason? }`)
+- `data.reload(options?)` - Reload data (`{ force?, reason?, resetPagination? }`)
 - `data.getAllData()` - Get all data
 - `data.getRowData(rowId)` - Get specific row data
 - `data.getRowByIndex(index)` - Get row by index
@@ -911,9 +1043,9 @@ function MyComponent() {
 - `layout.restoreLayout(layout)` - Restore saved layout
 
 **Export:**
-- `export.exportCSV(options?)` - Export to CSV
-- `export.exportExcel(options?)` - Export to Excel
-- `export.exportServerData(options)` - Server-side export
+- `export.exportCSV(options?)` - Export to CSV (`filename`, `chunkSize`, `strictTotalCheck`, `sanitizeCSV`)
+- `export.exportExcel(options?)` - Export to Excel (`filename`, `chunkSize`, `strictTotalCheck`)
+- `export.exportServerData(options)` - Server-side export (supports paged data, `blob`, or `fileUrl` responses)
 - `export.isExporting()` - Check if exporting
 - `export.cancelExport()` - Cancel export
 

package/dist/lib/components/droupdown/menu-dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/droupdown/menu-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACjE,OAAc,EAEV,YAAY,EACZ,SAAS,EAIZ,MAAM,OAAO,CAAC;AAGf,KAAK,aAAa,GAAG;IACjB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,IAAI,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,WAAW,iBACb,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,MAAM,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC,GAAG,SAAS,GAAG,GAAG,CAAC;IACnE,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,WAAW,KAAK,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,OAAO,GAAG,OAAO,IAAI,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACX,EAAE,iBAAiB,GAAG,YAAY,CA8DlC"}
+{"version":3,"file":"menu-dropdown.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/droupdown/menu-dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACjE,OAAc,EAEV,YAAY,EACZ,SAAS,EAIZ,MAAM,OAAO,CAAC;AAGf,KAAK,aAAa,GAAG;IACjB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,IAAI,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,WAAW,iBACb,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,MAAM,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,aAAa,KAAK,SAAS,CAAC,GAAG,SAAS,GAAG,GAAG,CAAC;IACnE,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,WAAW,KAAK,YAAY,CAAC,GAAG,CAAC,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,OAAO,GAAG,OAAO,IAAI,CAAC;CAC5C;AAED,wBAAgB,YAAY,CAAC,EACzB,QAAQ,EACR,MAAM,EACN,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACX,EAAE,iBAAiB,GAAG,YAAY,CAoElC"}

package/dist/lib/components/droupdown/menu-dropdown.js

@@ -51,13 +51,20 @@ function MenuDropdown({ children, anchor, label, component, ...props }) {
         setAnchorEl(null);
     }, []);
     const anchorNode = (0, react_1.useMemo)(() => {
+        var _a;
         if (anchor) {
             let node = anchor;
             if (typeof anchor === 'function') {
                 node = anchor({ isOpen: isOpen });
             }
+            const existingOnClick = (_a = node.props) === null || _a === void 0 ? void 0 : _a.onClick;
             return (0, react_1.cloneElement)(node, {
-                onClick: handleClick,
+                onClick: (event) => {
+                    existingOnClick === null || existingOnClick === void 0 ? void 0 : existingOnClick(event);
+                    if (!event.defaultPrevented) {
+                        handleClick(event);
+                    }
+                },
             });
         }
         return (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleClick, children: label });

package/dist/lib/components/filters/filter-value-input.js

@@ -33,8 +33,8 @@ function FilterValueInput(props) {
     }
     // Select type with options
     if (options && options.length > 0) {
-        // Multi-select for 'in' operator
-        if (operator === 'in') {
+        // Multi-select for set operators
+        if (operator === 'in' || operator === 'notIn') {
             const currentValue = Array.isArray(filter.value) ? filter.value : [];
             return ((0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: {
                     flex: 1,

package/dist/lib/components/pagination/data-table-pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-pagination.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pagination/data-table-pagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,oBAAoB,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACpF,OAAO,EAAQ,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxC,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,cAAc,GAAG,qBAAqB,CAAC;IACnJ,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAChC,UAAU,EAAE;QACR,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KACpB,CAAC;IAEF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,KAyE9B,CAAC"}
+{"version":3,"file":"data-table-pagination.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/pagination/data-table-pagination.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,oBAAoB,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACpF,OAAO,EAAQ,SAAS,EAAsB,MAAM,OAAO,CAAC;AAK5D,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,cAAc,GAAG,qBAAqB,CAAC;IACnJ,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAChC,UAAU,EAAE;QACR,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;KACpB,CAAC;IAEF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,KAqF9B,CAAC"}

package/dist/lib/components/pagination/data-table-pagination.js

@@ -10,6 +10,15 @@ const slot_helpers_1 = require("../../utils/slot-helpers");
 exports.DataTablePagination = (0, react_1.memo)((props) => {
     const { footerFilter = null, pagination, totalRow, containerSx, paginationProps, footerSx, ...otherProps } = props;
     const { table, tableSize } = (0, data_table_context_1.useDataTableContext)();
+    const pageSize = (pagination === null || pagination === void 0 ? void 0 : pagination.pageSize) || 1;
+    const maxPageIndex = Math.max(0, Math.ceil(totalRow / pageSize) - 1);
+    const safePageIndex = (0, react_1.useMemo)(() => { var _a; return Math.min(Math.max((_a = pagination === null || pagination === void 0 ? void 0 : pagination.pageIndex) !== null && _a !== void 0 ? _a : 0, 0), maxPageIndex); }, [maxPageIndex, pagination === null || pagination === void 0 ? void 0 : pagination.pageIndex]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (((_a = pagination === null || pagination === void 0 ? void 0 : pagination.pageIndex) !== null && _a !== void 0 ? _a : 0) !== safePageIndex) {
+            table === null || table === void 0 ? void 0 : table.setPageIndex(safePageIndex);
+        }
+    }, [pagination === null || pagination === void 0 ? void 0 : pagination.pageIndex, safePageIndex, table]);
     // Extract slot-specific props with enhanced merging
     // const paginationSlotProps = extractSlotProps(slotProps, 'pagination');
     // Merge all props for maximum flexibility
@@ -28,7 +37,7 @@ exports.DataTablePagination = (0, react_1.memo)((props) => {
         size: tableSize === 'small' ? 'small' : 'medium',
         count: totalRow,
         rowsPerPage: pagination === null || pagination === void 0 ? void 0 : pagination.pageSize,
-        page: pagination === null || pagination === void 0 ? void 0 : pagination.pageIndex,
+        page: safePageIndex,
         onPageChange: (_, page) => {
             // Use TanStack Table's native pagination methods
             table.setPageIndex(page);

package/dist/lib/components/toolbar/table-export-control.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-export-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/table-export-control.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,eAAe,EACf,OAAO,EACV,MAAM,eAAe,CAAC;AAOvB,UAAU,uBAAuB;IAE7B,cAAc,CAAC,EAAE,MAAM,CAAC;IAMxB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,GAAE,uBAA4B,OAgJrE"}
+{"version":3,"file":"table-export-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/table-export-control.tsx"],"names":[],"mappings":"AAEA,OAAO,EAQH,eAAe,EACf,OAAO,EAGV,MAAM,eAAe,CAAC;AAOvB,UAAU,uBAAuB;IAE7B,cAAc,CAAC,EAAE,MAAM,CAAC;IAMxB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,YAAY,CAAC,EAAE,GAAG,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,KAAK,GAAE,uBAA4B,OAsMrE"}

package/dist/lib/components/toolbar/table-export-control.js

@@ -14,7 +14,7 @@ const icons_1 = require("../../icons");
 const slot_helpers_1 = require("../../utils/slot-helpers");
 function TableExportControl(props = {}) {
     const { exportFilename: propsExportFilename, iconButtonProps, tooltipProps, menuSx, menuItemProps, } = props;
-    const { apiRef, slots, slotProps, isExporting, 
+    const { apiRef, slots, slotProps, isExporting, exportPhase, exportProgress, onCancelExport, 
     // Export callbacks from context (DataTable props)
     exportFilename: contextExportFilename, } = (0, data_table_context_1.useDataTableContext)();
     // Use props if provided, otherwise fall back to context values
@@ -45,23 +45,57 @@ function TableExportControl(props = {}) {
             console.error('Export failed:', error);
         }
     };
+    const handleCancelExport = () => {
+        var _a;
+        if (onCancelExport) {
+            onCancelExport();
+            return;
+        }
+        (_a = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _a === void 0 ? void 0 : _a.export.cancelExport();
+    };
     // Merge all props for maximum flexibility
     const mergedIconButtonProps = (0, slot_helpers_1.mergeSlotProps)({
         size: 'small',
-        disabled: isExporting,
         sx: { flexShrink: 0 },
     }, exportIconSlotProps, iconButtonProps || {});
     const mergedMenuItemProps = (0, slot_helpers_1.mergeSlotProps)({
         sx: { minWidth: 150 },
     }, menuItemProps || {});
-    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: isExporting ? 'Export in progress...' : 'Export data', ...tooltipProps, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...mergedIconButtonProps, children: (0, jsx_runtime_1.jsx)(ExportIconSlot, { ...exportIconSlotProps }) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                minWidth: 200,
-                ...menuSx,
-            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { p: 2, pb: 1 }, children: "Export Format" }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
-                        handleExport('csv');
-                        handleClose();
-                    }, disabled: isExporting, ...mergedMenuItemProps, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(CsvIconSlot, { ...csvIconSlotProps }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "CSV", secondary: "Comma-separated values" })] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
-                        handleExport('excel');
-                        handleClose();
-                    }, disabled: isExporting, ...mergedMenuItemProps, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExcelIconSlot, { ...excelIconSlotProps }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Excel", secondary: "Microsoft Excel format" })] }), isExporting && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { p: 2, pt: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { display: 'block', textAlign: 'center' }, children: "Export in progress..." }) }))] })) }));
+    const progressPercentage = typeof (exportProgress === null || exportProgress === void 0 ? void 0 : 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 ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: isExporting ? 'Export in progress...' : 'Export data', ...tooltipProps, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { ...mergedIconButtonProps, children: (0, jsx_runtime_1.jsx)(ExportIconSlot, { ...exportIconSlotProps }) }) })), children: ({ handleClose }) => {
+            var _a;
+            return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    minWidth: 200,
+                    ...menuSx,
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { p: 2, pb: 1 }, children: "Export Format" }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
+                            handleExport('csv');
+                            handleClose();
+                        }, disabled: isExporting, ...mergedMenuItemProps, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(CsvIconSlot, { ...csvIconSlotProps }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "CSV", secondary: "Comma-separated values" })] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
+                            handleExport('excel');
+                            handleClose();
+                        }, disabled: isExporting, ...mergedMenuItemProps, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExcelIconSlot, { ...excelIconSlotProps }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Excel", secondary: "Microsoft Excel format" })] }), isExporting && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { px: 2, pb: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { display: 'block', mb: 0.75 }, children: getPhaseLabel() }), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { variant: progressPercentage !== undefined ? 'determinate' : 'indeterminate', value: progressPercentage !== undefined ? progressPercentage : 0 }), ((exportProgress === null || exportProgress === void 0 ? void 0 : exportProgress.processedRows) !== undefined || (exportProgress === null || exportProgress === void 0 ? void 0 : exportProgress.totalRows) !== undefined) && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { display: 'block', mt: 0.75 }, children: `${(_a = exportProgress === null || exportProgress === void 0 ? void 0 : exportProgress.processedRows) !== null && _a !== void 0 ? _a : 0}${(exportProgress === null || exportProgress === void 0 ? void 0 : exportProgress.totalRows) !== undefined ? ` / ${exportProgress.totalRows}` : ''}${progressPercentage !== undefined ? ` (${progressPercentage}%)` : ''}` }))] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { my: 1 } }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => {
+                                    handleCancelExport();
+                                    handleClose();
+                                }, ...mergedMenuItemProps, children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Cancel Export", secondary: "Stop current export job", slotProps: {
+                                        primary: {
+                                            color: 'error.main',
+                                        },
+                                    } }) })] }))] }));
+        } }));
 }

package/dist/lib/contexts/data-table-context.d.ts

@@ -1,7 +1,9 @@
 import { Table } from '@tanstack/react-table';
 import { ReactNode, 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';
 /**
  * Context value for the DataTable
  */
@@ -17,13 +19,11 @@ interface DataTableContextValue<T = any> {
     slotProps?: Record<string, any>;
     isExporting?: boolean;
     exportController?: AbortController | null;
+    exportPhase?: ExportPhase | null;
+    exportProgress?: ExportProgressPayload;
     onCancelExport?: () => void;
     exportFilename?: string;
-    onExportProgress?: (progress: {
-        processedRows?: number;
-        totalRows?: number;
-        percentage?: number;
-    }) => void;
+    onExportProgress?: (progress: ExportProgressPayload) => void;
     onExportComplete?: (result: {
         success: boolean;
         filename: string;
@@ -33,15 +33,12 @@ interface DataTableContextValue<T = any> {
         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>>;
 }
 interface DataTableProviderProps<T = any> extends DataTableContextValue<T> {
     children: ReactNode;
 }
-export declare function DataTableProvider<T = any>({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, columnFilter, onChangeColumnFilter, slots, slotProps, isExporting, exportController, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }: DataTableProviderProps<T>): ReactElement;
+export declare function DataTableProvider<T = any>({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, columnFilter, onChangeColumnFilter, slots, slotProps, isExporting, exportController, exportPhase, exportProgress, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }: DataTableProviderProps<T>): ReactElement;
 export declare function useDataTableContext<T = any>(): DataTableContextValue<T>;
 export {};
 //# sourceMappingURL=data-table-context.d.ts.map

package/dist/lib/contexts/data-table-context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-context.d.ts","sourceRoot":"","sources":["../../../src/lib/contexts/data-table-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAc,EAA6B,SAAS,EAAW,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEtG,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD;;GAEG;AACH,UAAU,qBAAqB,CAAC,CAAC,GAAG,GAAG;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAGhC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAG5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,aAAa,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3G,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,cAAc,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC;QAAE,IAAI,EAAE,GAAG,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACxF;AAID,UAAU,sBAAsB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,qBAAqB,CAAC,CAAC,CAAC;IACtE,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,GAAG,EAAE,EACvC,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,oBAAoB,EACpB,KAAU,EACV,SAAc,EACd,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,cAAc,GACjB,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,YAAY,CA4C1C;AAED,wBAAgB,mBAAmB,CAAC,CAAC,GAAG,GAAG,KAAK,qBAAqB,CAAC,CAAC,CAAC,CAMvE"}
+{"version":3,"file":"data-table-context.d.ts","sourceRoot":"","sources":["../../../src/lib/contexts/data-table-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAc,EAA6B,SAAS,EAAW,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAEtG,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAG/F;;GAEG;AACH,UAAU,qBAAqB,CAAC,CAAC,GAAG,GAAG;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,oBAAoB,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAGhC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACjC,cAAc,CAAC,EAAE,qBAAqB,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAG5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC7D,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,cAAc,CAAC,EAAE,CACb,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,EACtB,SAAS,CAAC,EAAE,cAAc,EAC1B,MAAM,CAAC,EAAE,WAAW,KACnB,OAAO,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;CACzC;AAID,UAAU,sBAAsB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,qBAAqB,CAAC,CAAC,CAAC;IACtE,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,GAAG,EAAE,EACvC,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,oBAAoB,EACpB,KAAU,EACV,SAAc,EACd,WAAW,EACX,gBAAgB,EAChB,WAAW,EACX,cAAc,EACd,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,cAAc,GACjB,EAAE,sBAAsB,CAAC,CAAC,CAAC,GAAG,YAAY,CAgD1C;AAED,wBAAgB,mBAAmB,CAAC,CAAC,GAAG,GAAG,KAAK,qBAAqB,CAAC,CAAC,CAAC,CAMvE"}

package/dist/lib/contexts/data-table-context.js

@@ -38,7 +38,7 @@ exports.useDataTableContext = useDataTableContext;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const DataTableContext = (0, react_1.createContext)(null);
-function DataTableProvider({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, columnFilter, onChangeColumnFilter, slots = {}, slotProps = {}, isExporting, exportController, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }) {
+function DataTableProvider({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, columnFilter, onChangeColumnFilter, slots = {}, slotProps = {}, isExporting, exportController, exportPhase, exportProgress, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }) {
     const value = (0, react_1.useMemo)(() => ({
         table,
         apiRef,
@@ -51,6 +51,8 @@ function DataTableProvider({ children, table, apiRef, dataMode, tableSize, onTab
         slotProps,
         isExporting,
         exportController,
+        exportPhase,
+        exportProgress,
         onCancelExport,
         exportFilename,
         onExportProgress,
@@ -69,6 +71,8 @@ function DataTableProvider({ children, table, apiRef, dataMode, tableSize, onTab
         slotProps,
         isExporting,
         exportController,
+        exportPhase,
+        exportProgress,
         onCancelExport,
         exportFilename,
         onExportProgress,

package/dist/lib/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/lib/data-table.tsx"],"names":[],"mappings":"AA8EA;;GAEG;AACH,eAAO,MAAM,SAAS,KAmrDpB,CAAC"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/lib/data-table.tsx"],"names":[],"mappings":"AAqFA;;GAEG;AACH,eAAO,MAAM,SAAS,KA6oEpB,CAAC"}