@ackplus/react-tanstack-data-table 1.0.35 → 1.1.3

package/{src/lib/components/table → dist/lib}/data-table.js

@@ -1,23 +1,66 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTable = void 0;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Main DataTable Component
+ *
+ * A comprehensive, highly customizable data table component built with:
+ * - Material-UI (MUI) for styling
+ * - TanStack Table for table logic
+ * - TypeScript for type safety
+ */
 const material_1 = require("@mui/material");
 const react_table_1 = require("@tanstack/react-table");
-const column_filter_feature_1 = require("../../features/column-filter.feature");
-const features_1 = require("../../features");
+// Import custom features
+const column_filter_feature_1 = require("./features/column-filter.feature");
+const features_1 = require("./features");
 const react_virtual_1 = require("@tanstack/react-virtual");
-const react_1 = require("react");
-const data_table_context_1 = require("../../contexts/data-table-context");
-const utils_1 = require("../../utils");
-const debounced_fetch_utils_1 = require("../../utils/debounced-fetch.utils");
-const slot_helpers_1 = require("../../utils/slot-helpers");
-const headers_1 = require("../headers");
-const pagination_1 = require("../pagination");
-const rows_1 = require("../rows");
-const toolbar_1 = require("../toolbar");
-const special_columns_utils_1 = require("../../utils/special-columns.utils");
+const react_1 = __importStar(require("react"));
+// Import from new organized structure
+const data_table_context_1 = require("./contexts/data-table-context");
+const utils_1 = require("./utils");
+const debounced_fetch_utils_1 = require("./utils/debounced-fetch.utils");
+const slot_helpers_1 = require("./utils/slot-helpers");
+const headers_1 = require("./components/headers");
+const pagination_1 = require("./components/pagination");
+const rows_1 = require("./components/rows");
+const toolbar_1 = require("./components/toolbar");
+const special_columns_utils_1 = require("./utils/special-columns.utils");
+// Static default initial state - defined outside component
 const DEFAULT_INITIAL_STATE = {
     sorting: [],
     pagination: {
@@ -41,8 +84,51 @@ const DEFAULT_INITIAL_STATE = {
         pendingLogic: 'AND',
     },
 };
-exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, columns, data = [], totalRow = 0, idKey = 'id', extraFilter = null, footerFilter = null, dataMode = 'client', initialLoadData = true, onFetchData, onDataStateChange, enableRowSelection = false, enableMultiRowSelection = true, selectMode = 'page', isRowSelectable, onSelectionChange, onRowClick, selectOnRowClick = false, enableBulkActions = false, bulkActions, enableColumnResizing = false, columnResizeMode = 'onChange', onColumnSizingChange, enableColumnDragging = false, onColumnDragEnd, enableColumnPinning = false, onColumnPinningChange, onColumnVisibilityChange, enableColumnVisibility = true, enableExpanding = false, getRowCanExpand, renderSubComponent, enablePagination = false, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, enableHover = true, enableStripes = false, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, estimateRowHeight = 52, enableTableSizeControl = true, enableExport = false, enableReset = true, loading = false, emptyMessage = 'No data available', skeletonRows = 5, onColumnFiltersChange, onPaginationChange, onGlobalFilterChange, slots = {}, slotProps = {}, logging, }, ref) {
-    var _a;
+/**
+ * Main DataTable component with all features
+ */
+exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, columns, data = [], totalRow = 0, idKey = 'id', extraFilter = null, footerFilter = null, 
+// Data management mode (MUI DataGrid style)
+dataMode = 'client', initialLoadData = true, onFetchData, onDataStateChange, 
+// Selection props
+enableRowSelection = false, enableMultiRowSelection = true, selectMode = 'page', isRowSelectable, onSelectionChange, 
+// Row click props
+onRowClick, selectOnRowClick = false, 
+// Bulk action props
+enableBulkActions = false, bulkActions, 
+// Column resizing props
+enableColumnResizing = false, columnResizeMode = 'onChange', onColumnSizingChange, 
+// Column ordering props
+enableColumnDragging = false, onColumnDragEnd, 
+// Column pinning props
+enableColumnPinning = false, onColumnPinningChange, 
+// Column visibility props
+onColumnVisibilityChange, enableColumnVisibility = true, 
+// Expandable rows props
+enableExpanding = false, getRowCanExpand, renderSubComponent, 
+// Pagination props
+enablePagination = false, paginationMode = 'client', 
+// Filtering props
+enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', 
+// Sorting props
+enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, 
+// Styling props
+enableHover = true, enableStripes = false, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', 
+// Sticky header/footer props
+enableStickyHeaderOrFooter = false, maxHeight = '400px', 
+// Virtualization props
+enableVirtualization = false, estimateRowHeight = 52, 
+// Toolbar props
+enableTableSizeControl = true, enableExport = false, enableReset = true, 
+// Loading and empty states
+loading = false, emptyMessage = 'No data available', skeletonRows = 5, 
+// Column filters props
+onColumnFiltersChange, onPaginationChange, onGlobalFilterChange, 
+// Slots
+slots = {}, slotProps = {}, 
+// Logging
+logging, }, ref) {
+    // Convert mode-based props to boolean flags for internal use
     const isServerMode = dataMode === 'server';
     const isServerPagination = paginationMode === 'server' || isServerMode;
     const isServerFiltering = filterMode === 'server' || isServerMode;
@@ -63,13 +149,26 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             }
         };
     }, [logger, dataMode, paginationMode, filterMode, sortingMode]);
+    // -------------------------------
+    // Memoized values (grouped together)
+    // -------------------------------
     const initialStateConfig = (0, react_1.useMemo)(() => {
-        const config = Object.assign(Object.assign({}, DEFAULT_INITIAL_STATE), initialState);
+        const config = {
+            ...DEFAULT_INITIAL_STATE,
+            ...initialState,
+        };
         if (logger.isLevelEnabled('info')) {
             logger.info('initialStateConfig', { config });
         }
         return config;
     }, [initialState, logger]);
+    const initialSelectionState = (0, react_1.useMemo)(() => {
+        return initialStateConfig.selectionState || DEFAULT_INITIAL_STATE.selectionState;
+    }, [initialStateConfig.selectionState]);
+    // -------------------------------
+    // State hooks (grouped together)
+    // -------------------------------
+    // const [fetchLoading, setFetchLoading] = useState(false);
     const [sorting, setSorting] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || DEFAULT_INITIAL_STATE.sorting);
     const [pagination, setPagination] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.pagination) || DEFAULT_INITIAL_STATE.pagination);
     const [globalFilter, setGlobalFilter] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.globalFilter) || DEFAULT_INITIAL_STATE.globalFilter);
@@ -84,20 +183,28 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
     const [serverData, setServerData] = (0, react_1.useState)(null);
     const [serverTotal, setServerTotal] = (0, react_1.useState)(0);
     const [exportController, setExportController] = (0, react_1.useState)(null);
+    // -------------------------------
+    // Ref hooks (grouped together)
+    // -------------------------------
     const tableContainerRef = (0, react_1.useRef)(null);
     const internalApiRef = (0, react_1.useRef)(null);
     const { debouncedFetch, isLoading: fetchLoading } = (0, debounced_fetch_utils_1.useDebouncedFetch)(onFetchData);
-    const tableData = (0, react_1.useMemo)(() => serverData ? serverData : data, [onFetchData, serverData, data]);
-    const tableTotalRow = (0, react_1.useMemo)(() => serverData ? serverTotal : totalRow, [onFetchData, serverTotal, totalRow]);
+    const tableData = (0, react_1.useMemo)(() => serverData ? serverData : data, [serverData, data]);
+    const tableTotalRow = (0, react_1.useMemo)(() => serverData ? serverTotal : totalRow || data.length, [serverData, serverTotal, totalRow, data]);
     const tableLoading = (0, react_1.useMemo)(() => onFetchData ? (loading || fetchLoading) : loading, [onFetchData, loading, fetchLoading]);
     const enhancedColumns = (0, react_1.useMemo)(() => {
         let columnsMap = [...columns];
         if (enableExpanding) {
-            const expandingColumnMap = (0, special_columns_utils_1.createExpandingColumn)(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn) && typeof slotProps.expandColumn === 'object' ? slotProps.expandColumn : {})));
+            const expandingColumnMap = (0, special_columns_utils_1.createExpandingColumn)({
+                ...((slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn) && typeof slotProps.expandColumn === 'object' ? slotProps.expandColumn : {}),
+            });
             columnsMap = [expandingColumnMap, ...columnsMap];
         }
         if (enableRowSelection) {
-            const selectionColumnMap = (0, special_columns_utils_1.createSelectionColumn)(Object.assign(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn) && typeof slotProps.selectionColumn === 'object' ? slotProps.selectionColumn : {})), { multiSelect: enableMultiRowSelection }));
+            const selectionColumnMap = (0, special_columns_utils_1.createSelectionColumn)({
+                ...((slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn) && typeof slotProps.selectionColumn === 'object' ? slotProps.selectionColumn : {}),
+                multiSelect: enableMultiRowSelection,
+            });
             columnsMap = [selectionColumnMap, ...columnsMap];
         }
         const enhancedColumns = (0, utils_1.withIdsDeep)(columnsMap);
@@ -105,7 +212,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             logger.info('enhancedColumns', { enhancedColumns });
         }
         return enhancedColumns;
-    }, [columns, enableExpanding, enableRowSelection, enableMultiRowSelection, slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn, slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn]);
+    }, [columns, enableExpanding, enableRowSelection, logger, slotProps.expandColumn, slotProps.selectionColumn, enableMultiRowSelection]);
     const isExporting = (0, react_1.useMemo)(() => exportController !== null, [exportController]);
     const isSomeRowsSelected = (0, react_1.useMemo)(() => {
         if (!enableBulkActions || !enableRowSelection)
@@ -127,23 +234,10 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             return selectionState.ids.length;
         }
     }, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
-    const tableWidth = (0, react_1.useMemo)(() => {
-        if (fitToScreen) {
-            return '100%';
-        }
-        if (enableColumnResizing) {
-            return table.getCenterTotalSize();
-        }
-        return '100%';
-    }, [
-        fitToScreen,
-        enableColumnResizing,
-    ]);
-    const tableStyle = (0, react_1.useMemo)(() => ({
-        width: tableWidth,
-        minWidth: '100%',
-    }), [tableWidth]);
-    const fetchData = (0, react_1.useCallback)((...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (overrides = {}) {
+    // -------------------------------
+    // Callback hooks (grouped together)
+    // -------------------------------
+    const fetchData = (0, react_1.useCallback)(async (overrides = {}) => {
         var _a, _b;
         if (!onFetchData) {
             if (logger.isLevelEnabled('debug')) {
@@ -151,15 +245,18 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             }
             return;
         }
-        const filters = Object.assign({ globalFilter,
+        const filters = {
+            globalFilter,
             pagination,
             columnFilter,
-            sorting }, overrides);
+            sorting,
+            ...overrides,
+        };
         if (logger.isLevelEnabled('info')) {
             logger.info('Requesting data', { filters });
         }
         try {
-            const result = yield debouncedFetch(filters);
+            const result = await debouncedFetch(filters);
             if (logger.isLevelEnabled('info')) {
                 logger.info('Fetch resolved', {
                     rows: (_b = (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0,
@@ -179,7 +276,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             logger.error('Fetch failed', error);
             throw error;
         }
-    }), [
+    }, [
         onFetchData,
         globalFilter,
         pagination,
@@ -188,24 +285,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         debouncedFetch,
         logger,
     ]);
-    const handleSelectionStateChange = (0, react_1.useCallback)((updaterOrValue) => {
-        setSelectionState((prevState) => {
-            const newSelectionState = typeof updaterOrValue === 'function'
-                ? updaterOrValue(prevState)
-                : updaterOrValue;
-            setTimeout(() => {
-                if (onSelectionChange) {
-                    onSelectionChange(newSelectionState);
-                }
-            }, 0);
-            return newSelectionState;
-        });
-    }, [onSelectionChange]);
-    const handleColumnFilterStateChange = (0, react_1.useCallback)((filterState) => {
-        if (filterState && typeof filterState === 'object') {
-            setColumnFilter(filterState);
-        }
-    }, [onColumnFiltersChange]);
     const tableStateChange = (0, react_1.useCallback)((overrides = {}) => {
         if (!onDataStateChange) {
             if (logger.isLevelEnabled('debug')) {
@@ -213,14 +292,17 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             }
             return;
         }
-        const currentState = Object.assign({ globalFilter,
+        const currentState = {
+            globalFilter,
             columnFilter,
             sorting,
             pagination,
             columnOrder,
             columnPinning,
             columnVisibility,
-            columnSizing }, overrides);
+            columnSizing,
+            ...overrides,
+        };
         if (logger.isLevelEnabled('debug')) {
             logger.debug('Emitting tableStateChange', currentState);
         }
@@ -237,6 +319,45 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         columnSizing,
         logger,
     ]);
+    const handleSelectionStateChange = (0, react_1.useCallback)((updaterOrValue) => {
+        setSelectionState((prevState) => {
+            const newSelectionState = typeof updaterOrValue === 'function'
+                ? updaterOrValue(prevState)
+                : updaterOrValue;
+            setTimeout(() => {
+                if (onSelectionChange) {
+                    onSelectionChange(newSelectionState);
+                }
+                if (onDataStateChange) {
+                    tableStateChange({ selectionState: newSelectionState });
+                }
+            }, 0);
+            return newSelectionState;
+        });
+    }, [onSelectionChange, onDataStateChange, tableStateChange]);
+    const handleColumnFilterStateChange = (0, react_1.useCallback)((filterState) => {
+        if (!filterState || typeof filterState !== 'object')
+            return;
+        setColumnFilter(filterState);
+        if (onColumnFiltersChange) {
+            setTimeout(() => onColumnFiltersChange(filterState), 0);
+        }
+        if (onDataStateChange) {
+            setTimeout(() => tableStateChange({ columnFilter: filterState }), 0);
+        }
+    }, [onColumnFiltersChange, onDataStateChange, tableStateChange]);
+    const resetPageToFirst = (0, react_1.useCallback)(() => {
+        if (logger.isLevelEnabled('info')) {
+            logger.info('Resetting to first page due to state change', {
+                previousPageIndex: pagination.pageIndex,
+                pageSize: pagination.pageSize,
+            });
+        }
+        const newPagination = { pageIndex: 0, pageSize: pagination.pageSize };
+        setPagination(newPagination);
+        onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
+        return newPagination;
+    }, [pagination, logger, onPaginationChange]);
     const handleSortingChange = (0, react_1.useCallback)((updaterOrValue) => {
         let newSorting = typeof updaterOrValue === 'function'
             ? updaterOrValue(sorting)
@@ -271,16 +392,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 tableStateChange({ sorting: newSorting, pagination });
             }, 0);
         }
-    }, [
-        sorting,
-        onSortingChange,
-        fetchData,
-        isServerMode,
-        isServerSorting,
-        onDataStateChange,
-        tableStateChange,
-        logger,
-    ]);
+    }, [sorting, onSortingChange, logger, isServerMode, isServerSorting, onDataStateChange, resetPageToFirst, tableStateChange, fetchData]);
     const handleColumnOrderChange = (0, react_1.useCallback)((updatedColumnOrder) => {
         const newColumnOrder = typeof updatedColumnOrder === 'function'
             ? updatedColumnOrder(columnOrder)
@@ -299,6 +411,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             onColumnPinningChange(newColumnPinning);
         }
     }, [onColumnPinningChange, columnPinning]);
+    // Column visibility change handler - same pattern as column order
     const handleColumnVisibilityChange = (0, react_1.useCallback)((updater) => {
         const newVisibility = typeof updater === 'function'
             ? updater(columnVisibility)
@@ -315,6 +428,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             }, 0);
         }
     }, [onColumnVisibilityChange, onDataStateChange, tableStateChange, columnVisibility]);
+    // Column sizing change handler - same pattern as column order
     const handleColumnSizingChange = (0, react_1.useCallback)((updater) => {
         const newSizing = typeof updater === 'function'
             ? updater(columnSizing)
@@ -340,11 +454,13 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 serverSide: isServerMode || isServerPagination,
             });
         }
+        // Update pagination state
         setPagination(newPagination);
         onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
         if (logger.isLevelEnabled('debug')) {
             logger.debug('Pagination state updated', newPagination);
         }
+        // Notify state change and fetch data if needed
         if (isServerMode || isServerPagination) {
             setTimeout(() => {
                 if (logger.isLevelEnabled('debug')) {
@@ -410,7 +526,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             }, 0);
         }
         onGlobalFilterChange === null || onGlobalFilterChange === void 0 ? void 0 : onGlobalFilterChange(newFilter);
-    }, [globalFilter, isServerMode, isServerFiltering, onDataStateChange, fetchData, tableStateChange, logger]);
+    }, [globalFilter, logger, isServerMode, isServerFiltering, onDataStateChange, onGlobalFilterChange, resetPageToFirst, tableStateChange, fetchData]);
     const onColumnFilterChangeHandler = (0, react_1.useCallback)((updater) => {
         const currentState = columnFilter;
         const newState = typeof updater === 'function'
@@ -427,29 +543,107 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
     const onColumnFilterApplyHandler = (0, react_1.useCallback)((appliedState) => {
         const pagination = resetPageToFirst();
         if (isServerFiltering) {
-            const serverFilterState = {
-                filters: appliedState.filters,
-                logic: appliedState.logic,
-                pendingFilters: appliedState.pendingFilters,
-                pendingLogic: appliedState.pendingLogic,
-            };
             tableStateChange({
-                columnFilter: serverFilterState,
+                columnFilter: appliedState,
                 pagination,
             });
             fetchData({
-                columnFilter: serverFilterState,
+                columnFilter: appliedState,
                 pagination,
             });
         }
+        else if (onDataStateChange) {
+            setTimeout(() => tableStateChange({ columnFilter: appliedState, pagination }), 0);
+        }
         setTimeout(() => {
-            if (onColumnFiltersChange) {
-                onColumnFiltersChange(appliedState);
-            }
+            onColumnFiltersChange === null || onColumnFiltersChange === void 0 ? void 0 : onColumnFiltersChange(appliedState);
         }, 0);
-    }, [isServerFiltering, fetchData, tableStateChange]);
-    const table = (0, react_table_1.useReactTable)(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ _features: [column_filter_feature_1.ColumnFilterFeature, features_1.SelectionFeature], data: tableData, columns: enhancedColumns, initialState: Object.assign({}, DEFAULT_INITIAL_STATE), state: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (enableSorting ? { sorting } : {})), (enablePagination ? { pagination } : {})), (enableGlobalFilter ? { globalFilter } : {})), (enableExpanding ? { expanded } : {})), (enableColumnDragging ? { columnOrder } : {})), (enableColumnPinning ? { columnPinning } : {})), (enableColumnVisibility ? { columnVisibility } : {})), (enableColumnResizing ? { columnSizing } : {})), (enableColumnFilter ? { columnFilter } : {})), (enableRowSelection ? { selectionState } : {})), selectMode: selectMode, enableAdvanceSelection: !!enableRowSelection, isRowSelectable: isRowSelectable }, (enableRowSelection ? { onSelectionStateChange: handleSelectionStateChange } : {})), { enableAdvanceColumnFilter: enableColumnFilter, onColumnFilterChange: onColumnFilterChangeHandler, onColumnFilterApply: onColumnFilterApplyHandler }), (enableSorting ? { onSortingChange: handleSortingChange } : {})), (enablePagination ? { onPaginationChange: handlePaginationChange } : {})), (enableRowSelection ? { onRowSelectionChange: handleSelectionStateChange } : {})), (enableGlobalFilter ? { onGlobalFilterChange: handleGlobalFilterChange } : {})), (enableExpanding ? { onExpandedChange: setExpanded } : {})), (enableColumnDragging ? { onColumnOrderChange: handleColumnOrderChange } : {})), (enableColumnPinning ? { onColumnPinningChange: handleColumnPinningChange } : {})), (enableColumnVisibility ? { onColumnVisibilityChange: handleColumnVisibilityChange } : {})), (enableColumnResizing ? { onColumnSizingChange: handleColumnSizingChange } : {})), { getCoreRowModel: (0, react_table_1.getCoreRowModel)() }), (enableSorting ? { getSortedRowModel: (0, react_table_1.getSortedRowModel)() } : {})), (enableColumnFilter ? { getFilteredRowModel: (0, column_filter_feature_1.getCombinedFilteredRowModel)() } : {})), (enablePagination ? { getPaginationRowModel: (0, react_table_1.getPaginationRowModel)() } : {})), { enableSorting: enableSorting, manualSorting: isServerSorting, manualFiltering: isServerFiltering, enableColumnResizing: enableColumnResizing, columnResizeMode: columnResizeMode, enableColumnPinning: enableColumnPinning }), (enableExpanding ? { getRowCanExpand: getRowCanExpand } : {})), { manualPagination: isServerPagination, autoResetPageIndex: false, rowCount: tableTotalRow, getRowId: (row, index) => (0, utils_1.generateRowId)(row, index, idKey), debugAll: false }));
-    const rows = ((_a = table.getRowModel()) === null || _a === void 0 ? void 0 : _a.rows) || [];
+    }, [resetPageToFirst, isServerFiltering, onDataStateChange, tableStateChange, fetchData, onColumnFiltersChange]);
+    // -------------------------------
+    // Table creation (after callbacks/memo)
+    // -------------------------------
+    const table = (0, react_table_1.useReactTable)({
+        _features: [column_filter_feature_1.ColumnFilterFeature, features_1.SelectionFeature],
+        data: tableData,
+        columns: enhancedColumns,
+        // Use merged initial state so built-in reset helpers align with our controlled state defaults
+        initialState: initialStateConfig,
+        state: {
+            ...(enableSorting ? { sorting } : {}),
+            ...(enablePagination ? { pagination } : {}),
+            ...(enableGlobalFilter ? { globalFilter } : {}),
+            ...(enableExpanding ? { expanded } : {}),
+            ...(enableColumnDragging ? { columnOrder } : {}),
+            ...(enableColumnPinning ? { columnPinning } : {}),
+            ...(enableColumnVisibility ? { columnVisibility } : {}),
+            ...(enableColumnResizing ? { columnSizing } : {}),
+            ...(enableColumnFilter ? { columnFilter } : {}),
+            ...(enableRowSelection ? { selectionState } : {}),
+        },
+        // Selection options (same pattern as column filter)
+        // Add custom features
+        selectMode: selectMode,
+        enableAdvanceSelection: !!enableRowSelection,
+        isRowSelectable: isRowSelectable,
+        ...(enableRowSelection ? { onSelectionStateChange: handleSelectionStateChange } : {}),
+        // Column filter
+        enableAdvanceColumnFilter: enableColumnFilter,
+        onColumnFilterChange: onColumnFilterChangeHandler, // Handle column filters change
+        onColumnFilterApply: onColumnFilterApplyHandler, // Handle when filters are actually applied
+        ...(enableSorting ? { onSortingChange: handleSortingChange } : {}),
+        ...(enablePagination ? { onPaginationChange: handlePaginationChange } : {}),
+        ...(enableGlobalFilter ? { onGlobalFilterChange: handleGlobalFilterChange } : {}),
+        ...(enableExpanding ? { onExpandedChange: setExpanded } : {}),
+        ...(enableColumnDragging ? { onColumnOrderChange: handleColumnOrderChange } : {}),
+        ...(enableColumnPinning ? { onColumnPinningChange: handleColumnPinningChange } : {}),
+        ...(enableColumnVisibility ? { onColumnVisibilityChange: handleColumnVisibilityChange } : {}),
+        ...(enableColumnResizing ? { onColumnSizingChange: handleColumnSizingChange } : {}),
+        // Row model
+        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
+        ...(enableSorting ? { getSortedRowModel: (0, react_table_1.getSortedRowModel)() } : {}),
+        ...(enableColumnFilter ? { getFilteredRowModel: (0, column_filter_feature_1.getCombinedFilteredRowModel)() } : {}),
+        ...(enablePagination ? { getPaginationRowModel: (0, react_table_1.getPaginationRowModel)() } : {}),
+        // Sorting
+        enableSorting: enableSorting,
+        manualSorting: isServerSorting,
+        // Filtering
+        manualFiltering: isServerFiltering,
+        // Column resizing
+        enableColumnResizing: enableColumnResizing,
+        columnResizeMode: columnResizeMode,
+        // Column pinning
+        enableColumnPinning: enableColumnPinning,
+        // Expanding
+        ...(enableExpanding ? { getRowCanExpand: getRowCanExpand } : {}),
+        // Pagination
+        manualPagination: isServerPagination,
+        autoResetPageIndex: false, // Prevent automatic page reset on state changes
+        // pageCount: enablePagination ? Math.ceil(tableTotalRow / pagination.pageSize) : -1,
+        rowCount: enablePagination ? (tableTotalRow !== null && tableTotalRow !== void 0 ? tableTotalRow : tableData.length) : tableData.length,
+        // Row ID
+        getRowId: (row, index) => (0, utils_1.generateRowId)(row, index, idKey),
+        // Debug
+        debugAll: false, // Disabled for production
+    });
+    // Compute width after table is created so column resizing is safe and reflects changes
+    const tableWidth = (0, react_1.useMemo)(() => {
+        if (fitToScreen) {
+            return '100%';
+        }
+        if (enableColumnResizing) {
+            return table.getCenterTotalSize();
+        }
+        return '100%';
+    }, [fitToScreen, enableColumnResizing, table]);
+    const tableStyle = (0, react_1.useMemo)(() => ({
+        width: tableWidth,
+        minWidth: '100%',
+    }), [tableWidth]);
+    // -------------------------------
+    // Virtualization and row memo
+    // -------------------------------
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const rows = (0, react_1.useMemo)(() => { var _a; return ((_a = table.getRowModel()) === null || _a === void 0 ? void 0 : _a.rows) || []; }, [table, tableData]);
     const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
         count: rows.length,
         getScrollElement: () => tableContainerRef.current,
@@ -457,18 +651,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         overscan: 10,
         enabled: enableVirtualization && !enablePagination && rows.length > 0,
     });
-    const resetPageToFirst = () => {
-        if (logger.isLevelEnabled('info')) {
-            logger.info('Resetting to first page due to state change', {
-                previousPageIndex: pagination.pageIndex,
-                pageSize: pagination.pageSize,
-            });
-        }
-        const newPagination = { pageIndex: 0, pageSize: pagination.pageSize };
-        setPagination(newPagination);
-        onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
-        return newPagination;
-    };
+    // -------------------------------
+    // Callbacks (after table creation)
+    // -------------------------------
     const handleColumnReorder = (0, react_1.useCallback)((draggedColumnId, targetColumnId) => {
         const currentOrder = columnOrder.length > 0 ? columnOrder : enhancedColumns.map((col, index) => {
             if (col.id)
@@ -488,6 +673,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         newOrder.splice(targetIndex, 0, draggedColumnId);
         handleColumnOrderChange(newOrder);
     }, [columnOrder, enhancedColumns, handleColumnOrderChange]);
+    // -------------------------------
+    // Effects (after callbacks)
+    // -------------------------------
     (0, react_1.useEffect)(() => {
         if (initialLoadData && onFetchData) {
             if (logger.isLevelEnabled('info')) {
@@ -501,6 +689,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 hasOnFetchData: !!onFetchData
             });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     (0, react_1.useEffect)(() => {
         if (enableColumnDragging && columnOrder.length === 0) {
@@ -520,6 +709,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         table: {
             getTable: () => table,
         },
+        // Column Management
         columnVisibility: {
             showColumn: (columnId) => {
                 var _a;
@@ -542,9 +732,11 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             resetColumnVisibility: () => {
                 const initialVisibility = initialStateConfig.columnVisibility || {};
                 table.setColumnVisibility(initialVisibility);
+                // Manually trigger handler to ensure callbacks are called
                 handleColumnVisibilityChange(initialVisibility);
             },
         },
+        // Column Ordering
         columnOrdering: {
             setColumnOrder: (columnOrder) => {
                 table.setColumnOrder(columnOrder);
@@ -570,21 +762,28 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                     return `column_${index}`;
                 });
                 table.setColumnOrder(initialOrder);
+                // Manually trigger handler to ensure callbacks are called
                 handleColumnOrderChange(initialOrder);
             },
         },
+        // Column Pinning
         columnPinning: {
             pinColumnLeft: (columnId) => {
                 const currentPinning = table.getState().columnPinning;
-                const newPinning = Object.assign({}, currentPinning);
+                const newPinning = { ...currentPinning };
+                // Remove from right if exists
                 newPinning.right = (newPinning.right || []).filter(id => id !== columnId);
+                // Add to left if not exists
                 newPinning.left = [...(newPinning.left || []).filter(id => id !== columnId), columnId];
                 table.setColumnPinning(newPinning);
             },
             pinColumnRight: (columnId) => {
                 const currentPinning = table.getState().columnPinning;
-                const newPinning = Object.assign({}, currentPinning);
+                const newPinning = { ...currentPinning };
+                // Remove from left if exists
                 newPinning.left = (newPinning.left || []).filter(id => id !== columnId);
+                // Add to right if not exists - prepend to beginning (appears rightmost to leftmost)
+                // First column pinned appears rightmost, second appears to its left, etc.
                 newPinning.right = [columnId, ...(newPinning.right || []).filter(id => id !== columnId)];
                 table.setColumnPinning(newPinning);
             },
@@ -602,29 +801,39 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             resetColumnPinning: () => {
                 const initialPinning = initialStateConfig.columnPinning || { left: [], right: [] };
                 table.setColumnPinning(initialPinning);
+                // Manually trigger handler to ensure callbacks are called
                 handleColumnPinningChange(initialPinning);
             },
         },
+        // Column Resizing
         columnResizing: {
             resizeColumn: (columnId, width) => {
+                // Use table's setColumnSizing method
                 const currentSizing = table.getState().columnSizing;
-                table.setColumnSizing(Object.assign(Object.assign({}, currentSizing), { [columnId]: width }));
+                table.setColumnSizing({
+                    ...currentSizing,
+                    [columnId]: width,
+                });
             },
             autoSizeColumn: (columnId) => {
                 var _a;
+                // TanStack doesn't have built-in auto-size, so reset to default
                 (_a = table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.resetSize();
             },
             autoSizeAllColumns: () => {
                 const initialSizing = initialStateConfig.columnSizing || {};
                 table.setColumnSizing(initialSizing);
+                // Manually trigger handler to ensure callbacks are called
                 handleColumnSizingChange(initialSizing);
             },
             resetColumnSizing: () => {
                 const initialSizing = initialStateConfig.columnSizing || {};
                 table.setColumnSizing(initialSizing);
+                // Manually trigger handler to ensure callbacks are called
                 handleColumnSizingChange(initialSizing);
             },
         },
+        // Filtering
         filtering: {
             setGlobalFilter: (filter) => {
                 table.setGlobalFilter(filter);
@@ -690,6 +899,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 }
             },
         },
+        // Sorting
         sorting: {
             setSorting: (sortingState) => {
                 table.setSorting(sortingState);
@@ -710,14 +920,17 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             },
             clearSorting: () => {
                 table.setSorting([]);
+                // Manually trigger handler to ensure callbacks are called
                 handleSortingChange([]);
             },
             resetSorting: () => {
                 const initialSorting = initialStateConfig.sorting || [];
                 table.setSorting(initialSorting);
+                // Manually trigger handler to ensure callbacks are called
                 handleSortingChange(initialSorting);
             },
         },
+        // Pagination
         pagination: {
             goToPage: (pageIndex) => {
                 table.setPageIndex(pageIndex);
@@ -761,9 +974,11 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             resetPagination: () => {
                 const initialPagination = initialStateConfig.pagination || { pageIndex: 0, pageSize: 10 };
                 table.setPagination(initialPagination);
+                // Manually trigger handler to ensure callbacks are called
                 handlePaginationChange(initialPagination);
             },
         },
+        // Access via table methods: table.selectRow(), table.getIsRowSelected(), etc.
         selection: {
             selectRow: (rowId) => { var _a; return (_a = table.selectRow) === null || _a === void 0 ? void 0 : _a.call(table, rowId); },
             deselectRow: (rowId) => { var _a; return (_a = table.deselectRow) === null || _a === void 0 ? void 0 : _a.call(table, rowId); },
@@ -776,6 +991,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             getSelectedCount: () => table.getSelectedCount(),
             isRowSelected: (rowId) => table.getIsRowSelected(rowId) || false,
         },
+        // Data Management
         data: {
             refresh: (resetPagination = false) => {
                 var _a, _b, _c;
@@ -786,7 +1002,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 };
                 const allState = table.getState();
                 setPagination(pagination);
-                onDataStateChange === null || onDataStateChange === void 0 ? void 0 : onDataStateChange(Object.assign(Object.assign({}, allState), { pagination }));
+                onDataStateChange === null || onDataStateChange === void 0 ? void 0 : onDataStateChange({ ...allState, pagination });
                 fetchData === null || fetchData === void 0 ? void 0 : fetchData({ pagination });
                 if (logger.isLevelEnabled('debug')) {
                     logger.debug('Refreshing data using Ref', { pagination, allState });
@@ -800,6 +1016,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                     logger.info('Reloading data', allState);
                 }
             },
+            // Data CRUD operations
             getAllData: () => {
                 var _a;
                 return ((_a = table.getRowModel().rows) === null || _a === void 0 ? void 0 : _a.map(row => row.original)) || [];
@@ -815,7 +1032,11 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             updateRow: (rowId, updates) => {
                 var _a;
                 const newData = (_a = table.getRowModel().rows) === null || _a === void 0 ? void 0 : _a.map(row => String(row.original[idKey]) === rowId
-                    ? Object.assign(Object.assign({}, row.original), updates) : row.original);
+                    ? {
+                        ...row.original,
+                        ...updates,
+                    }
+                    : row.original);
                 setServerData === null || setServerData === void 0 ? void 0 : setServerData(newData || []);
                 if (logger.isLevelEnabled('debug')) {
                     logger.debug(`Updating row ${rowId}`, updates);
@@ -825,7 +1046,10 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 var _a;
                 const newData = (_a = table.getRowModel().rows) === null || _a === void 0 ? void 0 : _a.map(row => row.original);
                 if (newData === null || newData === void 0 ? void 0 : newData[index]) {
-                    newData[index] = Object.assign(Object.assign({}, newData[index]), updates);
+                    newData[index] = {
+                        ...newData[index],
+                        ...updates,
+                    };
                     setServerData(newData);
                     if (logger.isLevelEnabled('debug')) {
                         logger.debug(`Updating row by index ${index}`, updates);
@@ -864,12 +1088,14 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 }
             },
             deleteSelectedRows: () => {
-                var _a;
-                const selectedRowIds = Object.keys(table.getState().rowSelection)
-                    .filter(key => table.getState().rowSelection[key]);
-                const newData = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.filter(row => !selectedRowIds.includes(String(row.original[idKey])));
+                var _a, _b, _c;
+                const selectedRows = ((_a = table.getSelectedRows) === null || _a === void 0 ? void 0 : _a.call(table)) || [];
+                if (selectedRows.length === 0)
+                    return;
+                const selectedIds = new Set(selectedRows.map(row => String(row.original[idKey])));
+                const newData = (_b = (table.getRowModel().rows || [])) === null || _b === void 0 ? void 0 : _b.filter(row => !selectedIds.has(String(row.original[idKey])));
                 setServerData((newData === null || newData === void 0 ? void 0 : newData.map(row => row.original)) || []);
-                table.resetRowSelection();
+                (_c = table.deselectAll) === null || _c === void 0 ? void 0 : _c.call(table);
                 if (logger.isLevelEnabled('debug')) {
                     logger.debug('Deleting selected rows');
                 }
@@ -877,13 +1103,17 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             replaceAllData: (newData) => {
                 setServerData === null || setServerData === void 0 ? void 0 : setServerData(newData);
             },
+            // Bulk operations
             updateMultipleRows: (updates) => {
                 var _a;
                 const updateMap = new Map(updates.map(u => [u.rowId, u.data]));
                 const newData = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.map(row => {
                     const rowId = String(row.original[idKey]);
                     const updateData = updateMap.get(rowId);
-                    return updateData ? Object.assign(Object.assign({}, row.original), updateData) : row.original;
+                    return updateData ? {
+                        ...row.original,
+                        ...updateData,
+                    } : row.original;
                 });
                 setServerData(newData || []);
             },
@@ -904,20 +1134,29 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 const newData = (_b = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.filter(row => !idsToDelete.has(String(row.original[idKey])))) === null || _b === void 0 ? void 0 : _b.map(row => row.original);
                 setServerData(newData);
             },
+            // Field-specific updates
             updateField: (rowId, fieldName, value) => {
                 var _a;
                 const newData = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.map(row => String(row.original[idKey]) === rowId
-                    ? Object.assign(Object.assign({}, row.original), { [fieldName]: value }) : row.original);
+                    ? {
+                        ...row.original,
+                        [fieldName]: value,
+                    }
+                    : row.original);
                 setServerData === null || setServerData === void 0 ? void 0 : setServerData(newData);
             },
             updateFieldByIndex: (index, fieldName, value) => {
                 var _a;
                 const newData = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.map(row => row.original);
                 if (newData[index]) {
-                    newData[index] = Object.assign(Object.assign({}, newData[index]), { [fieldName]: value });
+                    newData[index] = {
+                        ...newData[index],
+                        [fieldName]: value,
+                    };
                     setServerData === null || setServerData === void 0 ? void 0 : setServerData(newData);
                 }
             },
+            // Data queries
             findRows: (predicate) => {
                 var _a, _b;
                 return (_b = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.filter(row => predicate(row.original))) === null || _b === void 0 ? void 0 : _b.map(row => row.original);
@@ -934,6 +1173,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 return table.getFilteredRowModel().rows.length;
             },
         },
+        // Layout Management
         layout: {
             resetLayout: () => {
                 table.resetColumnSizing();
@@ -942,13 +1182,14 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 table.resetGlobalFilter();
             },
             resetAll: () => {
+                // Reset everything to initial state
                 table.resetColumnSizing();
                 table.resetColumnVisibility();
                 table.resetSorting();
                 table.resetGlobalFilter();
                 table.resetColumnOrder();
                 table.resetExpanded();
-                table.resetRowSelection();
+                handleSelectionStateChange(initialSelectionState);
                 table.resetColumnPinning();
                 handleColumnFilterStateChange(initialStateConfig.columnFilter || { filters: [], logic: 'AND', pendingFilters: [], pendingLogic: 'AND' });
                 if (enablePagination) {
@@ -997,6 +1238,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 }
             },
         },
+        // Table State
         state: {
             getTableState: () => {
                 return table.getState();
@@ -1010,19 +1252,23 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             getCurrentPagination: () => {
                 return table.getState().pagination;
             },
+            // Backward compatibility: expose the raw selection array expected by older consumers
             getCurrentSelection: () => {
-                return Object.keys(table.getState().rowSelection)
-                    .filter(key => table.getState().rowSelection[key]);
+                var _a;
+                return (_a = table.getSelectionState) === null || _a === void 0 ? void 0 : _a.call(table);
             },
         },
+        // Simplified Export
         export: {
-            exportCSV: (...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (options = {}) {
+            exportCSV: async (options = {}) => {
                 var _a;
                 const { filename = exportFilename, } = options;
                 try {
+                    // Create abort controller for this export
                     const controller = new AbortController();
                     setExportController === null || setExportController === void 0 ? void 0 : setExportController(controller);
                     if (dataMode === 'server' && onServerExport) {
+                        // Server export with selection data
                         const currentFilters = {
                             globalFilter: table.getState().globalFilter,
                             columnFilter: table.getState().columnFilter,
@@ -1032,7 +1278,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                         if (logger.isLevelEnabled('debug')) {
                             logger.debug('Server export CSV', { currentFilters });
                         }
-                        yield (0, utils_1.exportServerData)(table, {
+                        await (0, utils_1.exportServerData)(table, {
                             format: 'csv',
                             filename,
                             fetchData: (filters, selection) => onServerExport(filters, selection),
@@ -1044,7 +1290,8 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                         });
                     }
                     else {
-                        yield (0, utils_1.exportClientData)(table, {
+                        // Client export - auto-detect selected rows if not specified
+                        await (0, utils_1.exportClientData)(table, {
                             format: 'csv',
                             filename,
                             onProgress: onExportProgress,
@@ -1065,14 +1312,16 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 finally {
                     setExportController === null || setExportController === void 0 ? void 0 : setExportController(null);
                 }
-            }),
-            exportExcel: (...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (options = {}) {
+            },
+            exportExcel: async (options = {}) => {
                 var _a;
                 const { filename = exportFilename } = options;
                 try {
+                    // Create abort controller for this export
                     const controller = new AbortController();
                     setExportController === null || setExportController === void 0 ? void 0 : setExportController(controller);
                     if (dataMode === 'server' && onServerExport) {
+                        // Server export with selection data
                         const currentFilters = {
                             globalFilter: table.getState().globalFilter,
                             columnFilter: table.getState().columnFilter,
@@ -1082,7 +1331,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                         if (logger.isLevelEnabled('debug')) {
                             logger.debug('Server export Excel', { currentFilters });
                         }
-                        yield (0, utils_1.exportServerData)(table, {
+                        await (0, utils_1.exportServerData)(table, {
                             format: 'excel',
                             filename,
                             fetchData: (filters, selection) => onServerExport(filters, selection),
@@ -1094,7 +1343,8 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                         });
                     }
                     else {
-                        yield (0, utils_1.exportClientData)(table, {
+                        // Client export - auto-detect selected rows if not specified
+                        await (0, utils_1.exportClientData)(table, {
                             format: 'excel',
                             filename,
                             onProgress: onExportProgress,
@@ -1118,8 +1368,8 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 finally {
                     setExportController === null || setExportController === void 0 ? void 0 : setExportController(null);
                 }
-            }),
-            exportServerData: (options) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+            },
+            exportServerData: async (options) => {
                 var _a;
                 const { format, filename = exportFilename, fetchData = onServerExport, } = options;
                 if (!fetchData) {
@@ -1133,6 +1383,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                     return;
                 }
                 try {
+                    // Create abort controller for this export
                     const controller = new AbortController();
                     setExportController === null || setExportController === void 0 ? void 0 : setExportController(controller);
                     const currentFilters = {
@@ -1144,7 +1395,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                     if (logger.isLevelEnabled('debug')) {
                         logger.debug('Server export data', { currentFilters });
                     }
-                    yield (0, utils_1.exportServerData)(table, {
+                    await (0, utils_1.exportServerData)(table, {
                         format,
                         filename,
                         fetchData: (filters, selection) => fetchData(filters, selection),
@@ -1167,7 +1418,8 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 finally {
                     setExportController === null || setExportController === void 0 ? void 0 : setExportController(null);
                 }
-            }),
+            },
+            // Export state
             isExporting: () => isExporting || false,
             cancelExport: () => {
                 exportController === null || exportController === void 0 ? void 0 : exportController.abort();
@@ -1177,6 +1429,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 }
             },
         },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }), [
         table,
         enhancedColumns,
@@ -1186,6 +1439,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         onFetchData,
         enableColumnPinning,
         enablePagination,
+        // Export dependencies
         exportFilename,
         onExportProgress,
         onExportComplete,
@@ -1197,18 +1451,22 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         dataMode,
         selectMode,
         onSelectionChange,
+        // Note: custom selection removed from dependency array
     ]);
     internalApiRef.current = dataTableApi;
     (0, react_1.useImperativeHandle)(ref, () => dataTableApi, [dataTableApi]);
+    // -------------------------------
+    // Render table rows with slot support (callback)
+    // -------------------------------
     const renderTableRows = (0, react_1.useCallback)(() => {
         var _a, _b, _c, _d;
         if (tableLoading) {
             const { component: LoadingRowComponent, props: loadingRowProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'loadingRow', rows_1.LoadingRows, {});
-            return ((0, jsx_runtime_1.jsx)(LoadingRowComponent, Object.assign({ rowCount: enablePagination ? Math.min(pagination.pageSize, skeletonRows) : skeletonRows, colSpan: table.getAllColumns().length, slots: slots, slotProps: slotProps }, loadingRowProps)));
+            return ((0, jsx_runtime_1.jsx)(LoadingRowComponent, { rowCount: enablePagination ? Math.min(pagination.pageSize, skeletonRows) : skeletonRows, colSpan: table.getAllColumns().length, slots: slots, slotProps: slotProps, ...loadingRowProps }));
         }
         if (rows.length === 0) {
             const { component: EmptyRowComponent, props: emptyRowProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'emptyRow', rows_1.EmptyDataRow, {});
-            return ((0, jsx_runtime_1.jsx)(EmptyRowComponent, Object.assign({ colSpan: table.getAllColumns().length, message: emptyMessage, slots: slots, slotProps: slotProps }, emptyRowProps)));
+            return ((0, jsx_runtime_1.jsx)(EmptyRowComponent, { colSpan: table.getAllColumns().length, message: emptyMessage, slots: slots, slotProps: slotProps, ...emptyRowProps }));
         }
         if (enableVirtualization && !enablePagination && rows.length > 0) {
             const virtualItems = rowVirtualizer.getVirtualItems();
@@ -1248,6 +1506,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         selectOnRowClick,
         slots,
     ]);
+    // -------------------------------
+    // Export cancel callback
+    // -------------------------------
     const handleCancelExport = (0, react_1.useCallback)(() => {
         if (exportController) {
             exportController.abort();
@@ -1257,6 +1518,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             }
         }
     }, [exportController, onExportCancel]);
+    // -------------------------------
+    // Slot components
+    // -------------------------------
     const { component: RootComponent, props: rootSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'root', material_1.Box, {});
     const { component: ToolbarComponent, props: toolbarSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'toolbar', toolbar_1.DataTableToolbar, {});
     const { component: BulkActionsComponent, props: bulkActionsSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'bulkActionsToolbar', toolbar_1.BulkActionsToolbar, {});
@@ -1265,20 +1529,40 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
     const { component: BodyComponent, props: bodySlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'body', material_1.TableBody, {});
     const { component: FooterComponent, props: footerSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'footer', material_1.Box, {});
     const { component: PaginationComponent, props: paginationSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'pagination', pagination_1.DataTablePagination, {});
+    // -------------------------------
+    // Render
+    // -------------------------------
     return ((0, jsx_runtime_1.jsx)(data_table_context_1.DataTableProvider, { table: table, apiRef: internalApiRef, dataMode: dataMode, tableSize: tableSize, onTableSizeChange: (size) => {
             setTableSize(size);
-        }, columnFilter: columnFilter, onChangeColumnFilter: handleColumnFilterStateChange, slots: slots, slotProps: slotProps, isExporting: isExporting, exportController: exportController, onCancelExport: handleCancelExport, exportFilename: exportFilename, onExportProgress: onExportProgress, onExportComplete: onExportComplete, onExportError: onExportError, onServerExport: onServerExport, children: (0, jsx_runtime_1.jsxs)(RootComponent, Object.assign({}, rootSlotProps, { children: [(enableGlobalFilter || extraFilter) ? ((0, jsx_runtime_1.jsx)(ToolbarComponent, Object.assign({ extraFilter: extraFilter, enableGlobalFilter: enableGlobalFilter, enableColumnVisibility: enableColumnVisibility, enableColumnFilter: enableColumnFilter, enableExport: enableExport, enableReset: enableReset, enableTableSizeControl: enableTableSizeControl, enableColumnPinning: enableColumnPinning }, toolbarSlotProps))) : null, enableBulkActions && enableRowSelection && isSomeRowsSelected ? ((0, jsx_runtime_1.jsx)(BulkActionsComponent, Object.assign({ selectionState: selectionState, selectedRowCount: selectedRowCount, bulkActions: bulkActions, sx: Object.assign({ position: 'relative', zIndex: 2 }, bulkActionsSlotProps.sx) }, bulkActionsSlotProps))) : null, (0, jsx_runtime_1.jsx)(TableContainerComponent, Object.assign({ component: material_1.Paper, ref: tableContainerRef, sx: Object.assign(Object.assign(Object.assign({ width: '100%', overflowX: 'auto' }, (enableStickyHeaderOrFooter && {
-                        maxHeight: maxHeight,
-                        overflowY: 'auto',
-                    })), (enableVirtualization && {
-                        maxHeight: maxHeight,
-                        overflowY: 'auto',
-                    })), tableContainerSlotProps === null || tableContainerSlotProps === void 0 ? void 0 : tableContainerSlotProps.sx) }, tableContainerSlotProps, { children: (0, jsx_runtime_1.jsxs)(TableComponent, Object.assign({ size: tableSize, stickyHeader: enableStickyHeaderOrFooter, style: Object.assign(Object.assign(Object.assign({}, tableStyle), { tableLayout: fitToScreen ? 'fixed' : 'auto' }), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style) }, (0, slot_helpers_1.mergeSlotProps)(tableProps || {}, tableComponentSlotProps), { children: [(0, jsx_runtime_1.jsx)(headers_1.TableHeader, { draggable: enableColumnDragging, enableColumnResizing: enableColumnResizing, enableStickyHeader: enableStickyHeaderOrFooter, fitToScreen: fitToScreen, onColumnReorder: handleColumnReorder, slots: slots, slotProps: slotProps }), (0, jsx_runtime_1.jsx)(BodyComponent, Object.assign({}, bodySlotProps, { children: renderTableRows() }))] })) })), enablePagination ? ((0, jsx_runtime_1.jsx)(FooterComponent, Object.assign({ sx: Object.assign(Object.assign({}, (enableStickyHeaderOrFooter && {
-                        position: 'sticky',
-                        bottom: 0,
-                        backgroundColor: 'background.paper',
-                        borderTop: '1px solid',
-                        borderColor: 'divider',
-                        zIndex: 1,
-                    })), footerSlotProps.sx) }, footerSlotProps, { children: (0, jsx_runtime_1.jsx)(PaginationComponent, Object.assign({ footerFilter: footerFilter, pagination: pagination, totalRow: tableTotalRow }, paginationSlotProps)) }))) : null] })) }));
+        }, columnFilter: columnFilter, onChangeColumnFilter: handleColumnFilterStateChange, slots: slots, slotProps: slotProps, isExporting: isExporting, exportController: exportController, onCancelExport: handleCancelExport, exportFilename: exportFilename, onExportProgress: onExportProgress, onExportComplete: onExportComplete, onExportError: onExportError, onServerExport: onServerExport, children: (0, jsx_runtime_1.jsxs)(RootComponent, { ...rootSlotProps, children: [(enableGlobalFilter || extraFilter) ? ((0, jsx_runtime_1.jsx)(ToolbarComponent, { extraFilter: extraFilter, enableGlobalFilter: enableGlobalFilter, enableColumnVisibility: enableColumnVisibility, enableColumnFilter: enableColumnFilter, enableExport: enableExport, enableReset: enableReset, enableTableSizeControl: enableTableSizeControl, enableColumnPinning: enableColumnPinning, ...toolbarSlotProps })) : null, enableBulkActions && enableRowSelection && isSomeRowsSelected ? ((0, jsx_runtime_1.jsx)(BulkActionsComponent, { selectionState: selectionState, selectedRowCount: selectedRowCount, bulkActions: bulkActions, sx: {
+                        position: 'relative',
+                        zIndex: 2,
+                        ...bulkActionsSlotProps.sx,
+                    }, ...bulkActionsSlotProps })) : null, (0, jsx_runtime_1.jsx)(TableContainerComponent, { component: material_1.Paper, ref: tableContainerRef, sx: {
+                        width: '100%',
+                        overflowX: 'auto',
+                        ...(enableStickyHeaderOrFooter && {
+                            maxHeight: maxHeight,
+                            overflowY: 'auto',
+                        }),
+                        ...(enableVirtualization && {
+                            maxHeight: maxHeight,
+                            overflowY: 'auto',
+                        }),
+                        ...tableContainerSlotProps === null || tableContainerSlotProps === void 0 ? void 0 : tableContainerSlotProps.sx,
+                    }, ...tableContainerSlotProps, children: (0, jsx_runtime_1.jsxs)(TableComponent, { size: tableSize, stickyHeader: enableStickyHeaderOrFooter, style: {
+                            ...tableStyle,
+                            tableLayout: fitToScreen ? 'fixed' : 'auto',
+                            ...tableProps === null || tableProps === void 0 ? void 0 : tableProps.style,
+                        }, ...(0, slot_helpers_1.mergeSlotProps)(tableProps || {}, tableComponentSlotProps), children: [(0, jsx_runtime_1.jsx)(headers_1.TableHeader, { draggable: enableColumnDragging, enableColumnResizing: enableColumnResizing, enableStickyHeader: enableStickyHeaderOrFooter, fitToScreen: fitToScreen, onColumnReorder: handleColumnReorder, slots: slots, slotProps: slotProps }), (0, jsx_runtime_1.jsx)(BodyComponent, { ...bodySlotProps, children: renderTableRows() })] }) }), enablePagination ? ((0, jsx_runtime_1.jsx)(FooterComponent, { sx: {
+                        ...(enableStickyHeaderOrFooter && {
+                            position: 'sticky',
+                            bottom: 0,
+                            backgroundColor: 'background.paper',
+                            borderTop: '1px solid',
+                            borderColor: 'divider',
+                            zIndex: 1,
+                        }),
+                        ...footerSlotProps.sx,
+                    }, ...footerSlotProps, children: (0, jsx_runtime_1.jsx)(PaginationComponent, { footerFilter: footerFilter, pagination: pagination, totalRow: tableTotalRow, ...paginationSlotProps }) })) : null] }) }));
 });