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

package/src/lib/components/pagination/data-table-pagination.tsx

@@ -1,6 +1,6 @@
 // data-table-pagination.tsx
 import { TablePagination, Box, TablePaginationProps, SxProps } from '@mui/material';
-import { memo, ReactNode } from 'react';
+import { memo, ReactNode, useEffect, useMemo } from 'react';
 
 import { useDataTableContext } from '../../contexts/data-table-context';
 import { mergeSlotProps } from '../../utils/slot-helpers';
@@ -33,6 +33,18 @@ export const DataTablePagination = memo((props: DataTablePaginationProps) => {
     } = props;
 
     const { table, tableSize } = useDataTableContext();
+    const pageSize = pagination?.pageSize || 1;
+    const maxPageIndex = Math.max(0, Math.ceil(totalRow / pageSize) - 1);
+    const safePageIndex = useMemo(
+        () => Math.min(Math.max(pagination?.pageIndex ?? 0, 0), maxPageIndex),
+        [maxPageIndex, pagination?.pageIndex]
+    );
+
+    useEffect(() => {
+        if ((pagination?.pageIndex ?? 0) !== safePageIndex) {
+            table?.setPageIndex(safePageIndex);
+        }
+    }, [pagination?.pageIndex, safePageIndex, table]);
 
     // Extract slot-specific props with enhanced merging
     // const paginationSlotProps = extractSlotProps(slotProps, 'pagination');
@@ -59,7 +71,7 @@ export const DataTablePagination = memo((props: DataTablePaginationProps) => {
             size: tableSize === 'small' ? 'small' : 'medium',
             count: totalRow,
             rowsPerPage: pagination?.pageSize,
-            page: pagination?.pageIndex,
+            page: safePageIndex,
             onPageChange: (_, page: number) => {
                 // Use TanStack Table's native pagination methods
                 table.setPageIndex(page);

package/src/lib/components/toolbar/data-table-toolbar.tsx

@@ -16,6 +16,7 @@ import { TableExportControl } from './table-export-control';
 import { TableSearchControl } from './table-search-control';
 import { TableSizeControl } from './table-size-control';
 import { useDataTableContext } from '../../contexts/data-table-context';
+import { TableRefreshControl } from './table-refresh-control';
 import { getSlotComponent, mergeSlotProps, extractSlotProps } from '../../utils/slot-helpers';
 
 export interface DataTableToolbarProps extends ToolbarProps {
@@ -48,6 +49,7 @@ export function DataTableToolbar(props: DataTableToolbarProps = {}): ReactElemen
         enableColumnVisibility = true,
         enableExport = true,
         enableReset = true,
+        enableRefresh = false,
         enableColumnFilter = true,
         enableTableSizeControl = true,
         enableColumnPinning = true,
@@ -70,7 +72,8 @@ export function DataTableToolbar(props: DataTableToolbarProps = {}): ReactElemen
     const columnVisibilityControlSlotProps = extractSlotProps(slotProps, 'columnVisibilityControl');
     const resetButtonSlotProps = extractSlotProps(slotProps, 'resetButton');
     const exportButtonSlotProps = extractSlotProps(slotProps, 'exportButton');
-    
+    const refreshButtonSlotProps = extractSlotProps(slotProps, 'refreshButton');
+
     const ToolbarSlot = getSlotComponent(slots, 'toolbar', Toolbar);
     const TableSearchControlSlot = getSlotComponent(slots, 'searchInput', TableSearchControl);
     const TableSizeControlSlot = getSlotComponent(slots, 'tableSizeControl', TableSizeControl);
@@ -79,6 +82,7 @@ export function DataTableToolbar(props: DataTableToolbarProps = {}): ReactElemen
     const ColumnVisibilityControlSlot = getSlotComponent(slots, 'columnVisibilityControl', ColumnVisibilityControl);
     const ColumnResetControlSlot = getSlotComponent(slots, 'resetButton', ColumnResetControl);
     const TableExportControlSlot = getSlotComponent(slots, 'exportButton', TableExportControl);
+    const TableRefreshControlSlot = getSlotComponent(slots, 'refreshButton', TableRefreshControl);
 
     // Merge all props for maximum flexibility
     const mergedToolbarProps = mergeSlotProps(
@@ -210,6 +214,16 @@ export function DataTableToolbar(props: DataTableToolbarProps = {}): ReactElemen
                                 )}
                             />
                         ) : null}
+
+                        {enableRefresh ? (
+                            <TableRefreshControlSlot 
+                                {...mergeSlotProps(
+                                    {},
+                                    refreshButtonSlotProps,
+                                    props.refreshButtonProps || {}
+                                )}
+                            />
+                        ) : null}
                     </Stack>
 
                     {/* Right Section - Extra Filter and More Menu */}

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/components/toolbar/table-refresh-control.tsx

@@ -0,0 +1,58 @@
+import React, { ReactElement, useCallback } from 'react';
+import { Refresh } from '@mui/icons-material';
+import { IconButton, Tooltip, IconButtonProps, CircularProgress } from '@mui/material';
+
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { extractSlotProps, getSlotComponent, mergeSlotProps } from '../../utils/slot-helpers';
+
+export interface TableRefreshControlProps {
+    iconButtonProps?: IconButtonProps;
+    tooltipProps?: any;
+
+    /** optional override */
+    onRefresh?: () => void | Promise<void>;
+
+    /** disable + show spinner if true */
+    loading?: boolean;
+
+    /** use spinner instead of icon while loading */
+    showSpinnerWhileLoading?: boolean;
+
+    [key: string]: any;
+}
+
+export function TableRefreshControl(props: TableRefreshControlProps = {}): ReactElement {
+    const { apiRef, slots, slotProps } = useDataTableContext();
+
+    const refreshIconSlotProps = extractSlotProps(slotProps, 'refreshIcon');
+    const RefreshIconSlot = getSlotComponent(slots, 'refreshIcon', Refresh);
+
+    const handleRefresh = useCallback(() => {
+        if (props.onRefresh) return props.onRefresh();
+        // Default: use internal api
+        apiRef?.current?.data?.reload?.();
+    }, [props, apiRef]);
+
+    const mergedIconButtonProps = mergeSlotProps(
+        {
+            size: 'small',
+            onClick: handleRefresh,
+            disabled: !!props.loading,
+            sx: { flexShrink: 0 },
+        },
+        refreshIconSlotProps,
+        props.iconButtonProps || {}
+    );
+
+    return (
+        <Tooltip title="Refresh data" {...props.tooltipProps}>
+            <IconButton {...mergedIconButtonProps}>
+                {props.loading && props.showSpinnerWhileLoading ? (
+                    <CircularProgress size={16} />
+                ) : (
+                    <RefreshIconSlot {...refreshIconSlotProps} />
+                )}
+            </IconButton>
+        </Tooltip>
+    );
+}

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,