@ackplus/react-tanstack-data-table 1.1.15 → 1.1.17

package/dist/lib/data-table.js

@@ -36,1654 +36,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * Main DataTable Component
+ * Main DataTable Component (thin wrapper)
  *
- * A comprehensive, highly customizable data table component built with:
- * - Material-UI (MUI) for styling
- * - TanStack Table for table logic
- * - TypeScript for type safety
+ * Composes useDataTableEngine + DataTableProvider + DataTableView.
+ * Preserves forwardRef API and DataTableApi surface.
  */
-const material_1 = require("@mui/material");
-const react_table_1 = require("@tanstack/react-table");
-// 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 = __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: {
-        pageIndex: 0,
-        pageSize: 10,
-    },
-    selectionState: { ids: [], type: 'include' },
-    globalFilter: '',
-    expanded: {},
-    columnOrder: [],
-    columnPinning: {
-        left: [],
-        right: [],
-    },
-    columnVisibility: {},
-    columnSizing: {},
-    columnFilter: {
-        filters: [],
-        logic: 'AND',
-        pendingFilters: [],
-        pendingLogic: 'AND',
-    },
-};
-/**
- * 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, // callback to fetch data from the server need to with response { data: T[], total: number }
-onFetchStateChange, // callback to fetch data from the server no need to resonce , this for filter data 
-onDataChange, // callback to change data
-onDataStateChange, // callback to change data state
-// 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, 
-//export props
-exportFilename = 'export', exportConcurrency = 'cancelAndRestart', exportChunkSize = 1000, exportStrictTotalCheck = false, exportSanitizeCSV = true, onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, onExportStateChange, 
-// 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, enableRefresh = false, 
-// 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;
-    const isServerSorting = sortingMode === 'server' || isServerMode;
-    const theme = (0, material_1.useTheme)();
-    const logger = (0, react_1.useMemo)(() => (0, utils_1.createLogger)('DataTable', logging), [logging]);
-    (0, react_1.useEffect)(() => {
-        if (logger.isLevelEnabled('info')) {
-            logger.info('mounted', {
-                dataMode,
-                paginationMode,
-                filterMode,
-                sortingMode,
-            });
-        }
-        return () => {
-            if (logger.isLevelEnabled('info')) {
-                logger.info('unmounted');
-            }
-        };
-    }, [logger, dataMode, paginationMode, filterMode, sortingMode]);
-    // -------------------------------
-    // Memoized values (grouped together)
-    // -------------------------------
-    const initialStateConfig = (0, react_1.useMemo)(() => {
-        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);
-    const [selectionState, setSelectionState] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.selectionState) || DEFAULT_INITIAL_STATE.selectionState);
-    const [columnFilter, setColumnFilter] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnFilter) || DEFAULT_INITIAL_STATE.columnFilter);
-    const [expanded, setExpanded] = (0, react_1.useState)({});
-    const [tableSize, setTableSize] = (0, react_1.useState)(initialTableSize || 'medium');
-    const [columnOrder, setColumnOrder] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || DEFAULT_INITIAL_STATE.columnOrder);
-    const [columnPinning, setColumnPinning] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnPinning) || DEFAULT_INITIAL_STATE.columnPinning);
-    const [columnVisibility, setColumnVisibility] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility) || DEFAULT_INITIAL_STATE.columnVisibility);
-    const [columnSizing, setColumnSizing] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || DEFAULT_INITIAL_STATE.columnSizing);
-    const [serverData, setServerData] = (0, react_1.useState)(null);
-    const [serverTotal, setServerTotal] = (0, react_1.useState)(0);
-    const [exportController, setExportController] = (0, react_1.useState)(null);
-    const [exportProgress, setExportProgress] = (0, react_1.useState)({});
-    const [exportPhase, setExportPhase] = (0, react_1.useState)(null);
-    const [queuedExportCount, setQueuedExportCount] = (0, react_1.useState)(0);
-    // -------------------------------
-    // Ref hooks (grouped together)
-    // -------------------------------
-    const tableContainerRef = (0, react_1.useRef)(null);
-    const internalApiRef = (0, react_1.useRef)(null);
-    const exportControllerRef = (0, react_1.useRef)(null);
-    const exportQueueRef = (0, react_1.useRef)(Promise.resolve());
-    const isExternallyControlledData = (0, react_1.useMemo)(() => !onFetchData && (!!onDataChange || !!onFetchStateChange), [onFetchData, onDataChange, onFetchStateChange]);
-    const { debouncedFetch, isLoading: fetchLoading } = (0, debounced_fetch_utils_1.useDebouncedFetch)(onFetchData);
-    const tableData = (0, react_1.useMemo)(() => {
-        if (isExternallyControlledData)
-            return data;
-        return serverData !== null ? serverData : data;
-    }, [isExternallyControlledData, serverData, data]);
-    const tableTotalRow = (0, react_1.useMemo)(() => (isExternallyControlledData ? (totalRow || data.length) : (serverData !== null ? serverTotal : totalRow || data.length)), [isExternallyControlledData, 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)({
-                ...((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)({
-                ...((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);
-        if (logger.isLevelEnabled('info')) {
-            logger.info('enhancedColumns', { enhancedColumns });
-        }
-        return enhancedColumns;
-    }, [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)
-            return false;
-        if (selectionState.type === 'exclude') {
-            return selectionState.ids.length < tableTotalRow;
-        }
-        else {
-            return selectionState.ids.length > 0;
-        }
-    }, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
-    const selectedRowCount = (0, react_1.useMemo)(() => {
-        if (!enableBulkActions || !enableRowSelection)
-            return 0;
-        if (selectionState.type === 'exclude') {
-            return tableTotalRow - selectionState.ids.length;
-        }
-        else {
-            return selectionState.ids.length;
-        }
-    }, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
-    // -------------------------------
-    // Callback hooks (grouped together)
-    // -------------------------------
-    const fetchData = (0, react_1.useCallback)(async (overrides = {}, options) => {
-        var _a, _b, _c, _d, _e;
-        const filters = {
-            globalFilter,
-            pagination,
-            columnFilter,
-            sorting,
-            ...overrides,
-        };
-        if (onFetchStateChange) {
-            onFetchStateChange(filters, options === null || options === void 0 ? void 0 : options.meta);
-        }
-        if (!onFetchData) {
-            if (logger.isLevelEnabled('debug')) {
-                logger.debug('onFetchData not provided, skipping fetch', { overrides, columnFilter, sorting, pagination });
-            }
-            return;
-        }
-        if (logger.isLevelEnabled('info')) {
-            logger.info('Requesting data', {
-                filters,
-                reason: (_a = options === null || options === void 0 ? void 0 : options.meta) === null || _a === void 0 ? void 0 : _a.reason,
-                force: (_b = options === null || options === void 0 ? void 0 : options.meta) === null || _b === void 0 ? void 0 : _b.force,
-            });
-        }
-        try {
-            const delay = (_c = options === null || options === void 0 ? void 0 : options.delay) !== null && _c !== void 0 ? _c : 300; // respects 0
-            const result = await debouncedFetch(filters, {
-                debounceDelay: delay,
-                meta: options === null || options === void 0 ? void 0 : options.meta,
-            });
-            if (logger.isLevelEnabled('info')) {
-                logger.info('Fetch resolved', {
-                    rows: (_e = (_d = result === null || result === void 0 ? void 0 : result.data) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0,
-                    total: result === null || result === void 0 ? void 0 : result.total,
-                });
-            }
-            if (result && Array.isArray(result.data) && result.total !== undefined) {
-                setServerData(result.data);
-                setServerTotal(result.total);
-            }
-            else if (logger.isLevelEnabled('warn')) {
-                logger.warn('Fetch handler returned unexpected shape', result);
-            }
-            return result;
-        }
-        catch (error) {
-            logger.error('Fetch failed', error);
-            throw error;
-        }
-    }, [
-        onFetchData,
-        globalFilter,
-        pagination,
-        columnFilter,
-        sorting,
-        debouncedFetch,
-        logger,
-        onFetchStateChange,
-    ]);
-    const normalizeRefreshOptions = (0, react_1.useCallback)((options, fallbackReason = 'refresh') => {
-        var _a, _b, _c;
-        if (typeof options === 'boolean') {
-            return {
-                resetPagination: options,
-                force: false,
-                reason: fallbackReason,
-            };
-        }
-        return {
-            resetPagination: (_a = options === null || options === void 0 ? void 0 : options.resetPagination) !== null && _a !== void 0 ? _a : false,
-            force: (_b = options === null || options === void 0 ? void 0 : options.force) !== null && _b !== void 0 ? _b : false,
-            reason: (_c = options === null || options === void 0 ? void 0 : options.reason) !== null && _c !== void 0 ? _c : fallbackReason,
-        };
-    }, []);
-    const handleSelectionStateChange = (0, react_1.useCallback)((updaterOrValue) => {
-        setSelectionState((prevState) => {
-            const next = typeof updaterOrValue === 'function' ? updaterOrValue(prevState) : updaterOrValue;
-            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(next);
-            return next;
-        });
-    }, [onSelectionChange]);
-    const handleColumnFilterStateChange = (0, react_1.useCallback)((filterState) => {
-        if (!filterState || typeof filterState !== 'object')
-            return;
-        setColumnFilter(filterState);
-        onColumnFiltersChange === null || onColumnFiltersChange === void 0 ? void 0 : onColumnFiltersChange(filterState);
-        return filterState;
-    }, [onColumnFiltersChange]);
-    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) => {
-        setSorting((prev) => {
-            const next = typeof updaterOrValue === 'function' ? updaterOrValue(prev) : updaterOrValue;
-            const cleaned = next.filter((s) => s === null || s === void 0 ? void 0 : s.id);
-            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(cleaned);
-            const nextPagination = resetPageToFirst();
-            if (isServerMode || isServerSorting) {
-                fetchData({ sorting: cleaned, pagination: nextPagination }, { delay: 0 });
-            }
-            return cleaned;
-        });
-    }, [onSortingChange, isServerMode, isServerSorting, resetPageToFirst, fetchData]);
-    const handleColumnOrderChange = (0, react_1.useCallback)((updatedColumnOrder) => {
-        const newColumnOrder = typeof updatedColumnOrder === 'function'
-            ? updatedColumnOrder(columnOrder)
-            : updatedColumnOrder;
-        setColumnOrder(newColumnOrder);
-        if (onColumnDragEnd) {
-            onColumnDragEnd(newColumnOrder);
-        }
-    }, [onColumnDragEnd, columnOrder]);
-    const handleColumnPinningChange = (0, react_1.useCallback)((updater) => {
-        setColumnPinning((prev) => {
-            const next = typeof updater === "function" ? updater(prev) : updater;
-            // keep direct callback here (optional)
-            onColumnPinningChange === null || onColumnPinningChange === void 0 ? void 0 : onColumnPinningChange(next);
-            return next;
-        });
-    }, [onColumnPinningChange]);
-    // Column visibility change handler - same pattern as column order
-    const handleColumnVisibilityChange = (0, react_1.useCallback)((updater) => {
-        setColumnVisibility((prev) => {
-            const next = typeof updater === 'function' ? updater(prev) : updater;
-            onColumnVisibilityChange === null || onColumnVisibilityChange === void 0 ? void 0 : onColumnVisibilityChange(next);
-            return next;
-        });
-    }, [onColumnVisibilityChange]);
-    // Column sizing change handler - same pattern as column order
-    const handleColumnSizingChange = (0, react_1.useCallback)((updater) => {
-        setColumnSizing((prev) => {
-            const next = typeof updater === 'function' ? updater(prev) : updater;
-            onColumnSizingChange === null || onColumnSizingChange === void 0 ? void 0 : onColumnSizingChange(next);
-            return next;
-        });
-    }, [onColumnSizingChange]);
-    const handlePaginationChange = (0, react_1.useCallback)((updater) => {
-        setPagination((prev) => {
-            const next = typeof updater === 'function' ? updater(prev) : updater;
-            onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(next);
-            if (isServerMode || isServerPagination) {
-                fetchData({ pagination: next }, { delay: 0 });
-            }
-            return next;
-        });
-    }, [isServerMode, isServerPagination, fetchData, onPaginationChange]);
-    const handleGlobalFilterChange = (0, react_1.useCallback)((updaterOrValue) => {
-        setGlobalFilter((prev) => {
-            const next = typeof updaterOrValue === 'function' ? updaterOrValue(prev) : updaterOrValue;
-            onGlobalFilterChange === null || onGlobalFilterChange === void 0 ? void 0 : onGlobalFilterChange(next);
-            if (isServerMode || isServerFiltering) {
-                const nextPagination = { pageIndex: 0, pageSize: pagination.pageSize };
-                setPagination(nextPagination);
-                fetchData({ globalFilter: next, pagination: nextPagination }, { delay: 0 });
-            }
-            return next;
-        });
-    }, [isServerMode, isServerFiltering, onGlobalFilterChange, fetchData, pagination.pageSize]);
-    const onColumnFilterChangeHandler = (0, react_1.useCallback)((updater) => {
-        const currentState = columnFilter;
-        const newState = typeof updater === 'function'
-            ? updater(currentState)
-            : updater;
-        const legacyFilterState = {
-            filters: newState.filters,
-            logic: newState.logic,
-            pendingFilters: newState.pendingFilters,
-            pendingLogic: newState.pendingLogic
-        };
-        handleColumnFilterStateChange(legacyFilterState);
-    }, [columnFilter, handleColumnFilterStateChange]);
-    const onColumnFilterApplyHandler = (0, react_1.useCallback)((appliedState) => {
-        const pagination = resetPageToFirst();
-        if (isServerFiltering) {
-            fetchData({
-                columnFilter: appliedState,
-                pagination,
-            });
-        }
-        onColumnFiltersChange === null || onColumnFiltersChange === void 0 ? void 0 : onColumnFiltersChange(appliedState);
-    }, [resetPageToFirst, isServerFiltering, 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 || enableGlobalFilter ? { getFilteredRowModel: (0, column_filter_feature_1.getCombinedFilteredRowModel)() } : {}),
-        // Only use getPaginationRowModel for client-side pagination
-        ...(enablePagination && !isServerPagination ? { getPaginationRowModel: (0, react_table_1.getPaginationRowModel)() } : {}),
-        // Sorting
-        enableSorting: enableSorting,
-        manualSorting: isServerSorting,
-        // Filtering
-        manualFiltering: isServerFiltering,
-        // Column resizing
-        enableColumnResizing: enableColumnResizing,
-        columnResizeMode: columnResizeMode,
-        columnResizeDirection: theme.direction,
-        // 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 allLeafColumns = table.getAllLeafColumns();
-    const visibleLeafColumns = table.getVisibleLeafColumns();
-    const hasExplicitSizing = allLeafColumns.some((column) => {
-        const { size, minSize, maxSize } = column.columnDef;
-        return size !== undefined || minSize !== undefined || maxSize !== undefined;
-    });
-    const useFixedLayout = fitToScreen || enableColumnResizing || hasExplicitSizing;
-    const tableTotalSize = table.getTotalSize();
-    const tableWidth = fitToScreen ? '100%' : (useFixedLayout ? tableTotalSize : '100%');
-    const tableStyle = {
-        width: tableWidth,
-        minWidth: fitToScreen ? tableTotalSize : undefined,
-        tableLayout: useFixedLayout ? 'fixed' : 'auto',
-    };
-    // -------------------------------
-    // Virtualization and row memo
-    // -------------------------------
-    // Note: globalFilter is needed in dependencies to trigger recalculation when filter changes
-    // The table object is stable, so we need to depend on the filter state directly
-    const rows = table.getRowModel().rows;
-    const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
-        count: rows.length,
-        getScrollElement: () => tableContainerRef.current,
-        estimateSize: () => estimateRowHeight,
-        overscan: 10,
-        enabled: enableVirtualization && !enablePagination && rows.length > 0,
-    });
-    // -------------------------------
-    // 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)
-                return col.id;
-            const anyCol = col;
-            if (anyCol.accessorKey && typeof anyCol.accessorKey === 'string') {
-                return anyCol.accessorKey;
-            }
-            return `column_${index}`;
-        });
-        const draggedIndex = currentOrder.indexOf(draggedColumnId);
-        const targetIndex = currentOrder.indexOf(targetColumnId);
-        if (draggedIndex === -1 || targetIndex === -1)
-            return;
-        const newOrder = [...currentOrder];
-        newOrder.splice(draggedIndex, 1);
-        newOrder.splice(targetIndex, 0, draggedColumnId);
-        handleColumnOrderChange(newOrder);
-    }, [columnOrder, enhancedColumns, handleColumnOrderChange]);
-    // -------------------------------
-    // Effects (after callbacks)
-    // -------------------------------
-    (0, react_1.useEffect)(() => {
-        if (!isExternallyControlledData || serverData === null)
-            return;
-        setServerData(null);
-        setServerTotal(0);
-    }, [isExternallyControlledData, serverData]);
-    (0, react_1.useEffect)(() => {
-        if (initialLoadData && (onFetchData || onFetchStateChange)) {
-            if (logger.isLevelEnabled('info')) {
-                logger.info('Initial data load triggered', { initialLoadData });
-            }
-            fetchData({}, {
-                delay: 0,
-                meta: { reason: 'initial' },
-            });
-        }
-        else if (logger.isLevelEnabled('debug')) {
-            logger.debug('Skipping initial data load', {
-                initialLoadData,
-                hasOnFetchData: !!onFetchData
-            });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (enableColumnDragging && columnOrder.length === 0) {
-            const initialOrder = enhancedColumns.map((col, index) => {
-                if (col.id)
-                    return col.id;
-                const anyCol = col;
-                if (anyCol.accessorKey && typeof anyCol.accessorKey === 'string') {
-                    return anyCol.accessorKey;
-                }
-                return `column_${index}`;
-            });
-            setColumnOrder(initialOrder);
-        }
-    }, [enableColumnDragging, enhancedColumns, columnOrder.length]);
-    const lastSentRef = (0, react_1.useRef)("");
-    const emitTableState = (0, react_1.useCallback)(() => {
-        if (!onDataStateChange)
-            return;
-        const live = table.getState();
-        const liveColumnFilter = live.columnFilter;
-        // only keep what you persist/store
-        const payload = {
-            sorting: live.sorting,
-            pagination: live.pagination,
-            globalFilter: live.globalFilter,
-            columnFilter: liveColumnFilter,
-            columnVisibility: live.columnVisibility,
-            columnSizing: live.columnSizing,
-            columnOrder: live.columnOrder,
-            columnPinning: live.columnPinning,
-        };
-        const key = JSON.stringify(payload);
-        if (key === lastSentRef.current)
-            return;
-        lastSentRef.current = key;
-        onDataStateChange(payload);
-    }, [onDataStateChange, table]);
-    (0, react_1.useEffect)(() => {
-        emitTableState();
-    }, [
-        emitTableState,
-        sorting,
-        pagination,
-        globalFilter,
-        columnFilter,
-        columnVisibility,
-        columnSizing,
-        columnOrder,
-        columnPinning,
-    ]);
-    const getResetState = (0, react_1.useCallback)(() => {
-        var _a;
-        const resetSorting = initialStateConfig.sorting || [];
-        const resetGlobalFilter = (_a = initialStateConfig.globalFilter) !== null && _a !== void 0 ? _a : '';
-        const resetColumnFilter = initialStateConfig.columnFilter;
-        const resetPagination = enablePagination
-            ? (initialStateConfig.pagination || { pageIndex: 0, pageSize: 10 })
-            : undefined;
-        return {
-            sorting: resetSorting,
-            globalFilter: resetGlobalFilter,
-            columnFilter: resetColumnFilter,
-            ...(resetPagination ? { pagination: resetPagination } : {}),
-        };
-    }, [initialStateConfig, enablePagination]);
-    const applyDataMutation = (0, react_1.useCallback)((action, updater, details = {}) => {
-        const previousData = [...tableData];
-        const nextData = updater(previousData);
-        if (nextData === previousData)
-            return nextData;
-        const nextTotal = Math.max(0, tableTotalRow + (nextData.length - previousData.length));
-        if (!isExternallyControlledData) {
-            setServerData(nextData);
-            setServerTotal(nextTotal);
-        }
-        onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(nextData, {
-            action,
-            previousData,
-            nextData,
-            totalRow: nextTotal,
-            ...details,
-        });
-        if (logger.isLevelEnabled('debug')) {
-            logger.debug('Applied data mutation', {
-                action,
-                previousCount: previousData.length,
-                nextCount: nextData.length,
-                totalRow: nextTotal,
-            });
-        }
-        return nextData;
-    }, [isExternallyControlledData, logger, onDataChange, tableData, tableTotalRow]);
-    const triggerRefresh = (0, react_1.useCallback)(async (options, fallbackReason = 'refresh') => {
-        const normalizedOptions = normalizeRefreshOptions(options, fallbackReason);
-        const nextPagination = enablePagination
-            ? {
-                pageIndex: normalizedOptions.resetPagination ? 0 : pagination.pageIndex,
-                pageSize: pagination.pageSize,
-            }
-            : undefined;
-        const shouldUpdatePagination = !!nextPagination
-            && (nextPagination.pageIndex !== pagination.pageIndex || nextPagination.pageSize !== pagination.pageSize);
-        if (nextPagination && shouldUpdatePagination) {
-            setPagination(nextPagination);
-            onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(nextPagination);
-        }
-        await fetchData(nextPagination ? { pagination: nextPagination } : {}, {
-            delay: 0,
-            meta: {
-                reason: normalizedOptions.reason,
-                force: normalizedOptions.force,
-            },
-        });
-        return;
-    }, [normalizeRefreshOptions, enablePagination, pagination, onPaginationChange, fetchData]);
-    const resetAllAndReload = (0, react_1.useCallback)(() => {
-        var _a;
-        const resetState = getResetState();
-        setSorting(resetState.sorting || []);
-        setGlobalFilter((_a = resetState.globalFilter) !== null && _a !== void 0 ? _a : '');
-        setColumnFilter(resetState.columnFilter);
-        if (resetState.pagination) {
-            setPagination(resetState.pagination);
-            onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(resetState.pagination);
-        }
-        setSelectionState(initialSelectionState);
-        setExpanded({});
-        // layout state
-        setColumnVisibility(initialStateConfig.columnVisibility || {});
-        setColumnSizing(initialStateConfig.columnSizing || {});
-        setColumnOrder(initialStateConfig.columnOrder || []);
-        setColumnPinning(initialStateConfig.columnPinning || { left: [], right: [] });
-        const resetOptions = normalizeRefreshOptions({
-            resetPagination: true,
-            force: true,
-            reason: 'reset',
-        }, 'reset');
-        void fetchData(resetState, {
-            delay: 0,
-            meta: {
-                reason: resetOptions.reason,
-                force: resetOptions.force,
-            },
-        });
-    }, [getResetState, initialSelectionState, initialStateConfig, onPaginationChange, normalizeRefreshOptions, fetchData]);
-    const setExportControllerSafely = (0, react_1.useCallback)((value) => {
-        setExportController((current) => {
-            const next = typeof value === 'function' ? value(current) : value;
-            exportControllerRef.current = next;
-            return next;
-        });
-    }, []);
-    const handleExportProgressInternal = (0, react_1.useCallback)((progress) => {
-        setExportProgress(progress || {});
-        onExportProgress === null || onExportProgress === void 0 ? void 0 : onExportProgress(progress);
-    }, [onExportProgress]);
-    const handleExportStateChangeInternal = (0, react_1.useCallback)((state) => {
-        setExportPhase(state.phase);
-        if (state.processedRows !== undefined
-            || state.totalRows !== undefined
-            || state.percentage !== undefined) {
-            setExportProgress({
-                processedRows: state.processedRows,
-                totalRows: state.totalRows,
-                percentage: state.percentage,
-            });
-        }
-        onExportStateChange === null || onExportStateChange === void 0 ? void 0 : onExportStateChange(state);
-    }, [onExportStateChange]);
-    const runExportWithPolicy = (0, react_1.useCallback)(async (options) => {
-        const { format, filename, mode, execute } = options;
-        const startExecution = async () => {
-            const controller = new AbortController();
-            setExportProgress({});
-            setExportControllerSafely(controller);
-            try {
-                await execute(controller);
-            }
-            finally {
-                setExportControllerSafely((current) => (current === controller ? null : current));
-            }
-        };
-        if (exportConcurrency === 'queue') {
-            setQueuedExportCount((prev) => prev + 1);
-            const runQueued = async () => {
-                setQueuedExportCount((prev) => Math.max(0, prev - 1));
-                await startExecution();
-            };
-            const queuedPromise = exportQueueRef.current
-                .catch(() => undefined)
-                .then(runQueued);
-            exportQueueRef.current = queuedPromise;
-            return queuedPromise;
-        }
-        const activeController = exportControllerRef.current;
-        if (activeController) {
-            if (exportConcurrency === 'ignoreIfRunning') {
-                handleExportStateChangeInternal({
-                    phase: 'error',
-                    mode,
-                    format,
-                    filename,
-                    message: 'An export is already running',
-                    code: 'EXPORT_IN_PROGRESS',
-                    endedAt: Date.now(),
-                });
-                onExportError === null || onExportError === void 0 ? void 0 : onExportError({
-                    message: 'An export is already running',
-                    code: 'EXPORT_IN_PROGRESS',
-                });
-                return;
-            }
-            if (exportConcurrency === 'cancelAndRestart') {
-                activeController.abort();
-            }
-        }
-        await startExecution();
-    }, [
-        exportConcurrency,
-        handleExportStateChangeInternal,
-        onExportError,
-        setExportControllerSafely,
-    ]);
-    const dataTableApi = (0, react_1.useMemo)(() => {
-        // helpers (avoid repeating boilerplate)
-        const buildInitialOrder = () => enhancedColumns.map((col, index) => {
-            if (col.id)
-                return col.id;
-            const anyCol = col;
-            if (anyCol.accessorKey && typeof anyCol.accessorKey === "string")
-                return anyCol.accessorKey;
-            return `column_${index}`;
-        });
-        const applyColumnOrder = (next) => {
-            // handleColumnOrderChange supports both Updater<ColumnOrderState> and array in your impl
-            handleColumnOrderChange(next);
-        };
-        const applyPinning = (next) => {
-            handleColumnPinningChange(next);
-        };
-        const applyVisibility = (next) => {
-            handleColumnVisibilityChange(next);
-        };
-        const applySizing = (next) => {
-            handleColumnSizingChange(next);
-        };
-        const applyPagination = (next) => {
-            handlePaginationChange(next);
-        };
-        const applySorting = (next) => {
-            handleSortingChange(next);
-        };
-        const applyGlobalFilter = (next) => {
-            handleGlobalFilterChange(next);
-        };
-        const getRowIndexById = (rowsToSearch, rowId) => rowsToSearch.findIndex((row, index) => String((0, utils_1.generateRowId)(row, index, idKey)) === rowId);
-        const clampInsertIndex = (rowsToMutate, insertIndex) => {
-            if (insertIndex === undefined)
-                return rowsToMutate.length;
-            return Math.max(0, Math.min(insertIndex, rowsToMutate.length));
-        };
-        return {
-            table: {
-                getTable: () => table,
-            },
-            // -------------------------------
-            // Column Management
-            // -------------------------------
-            columnVisibility: {
-                showColumn: (columnId) => {
-                    applyVisibility({ ...table.getState().columnVisibility, [columnId]: true });
-                },
-                hideColumn: (columnId) => {
-                    applyVisibility({ ...table.getState().columnVisibility, [columnId]: false });
-                },
-                toggleColumn: (columnId) => {
-                    var _a, _b;
-                    const curr = (_b = (_a = table.getState().columnVisibility) === null || _a === void 0 ? void 0 : _a[columnId]) !== null && _b !== void 0 ? _b : true;
-                    applyVisibility({ ...table.getState().columnVisibility, [columnId]: !curr });
-                },
-                showAllColumns: () => {
-                    // set all known columns true
-                    const all = {};
-                    table.getAllLeafColumns().forEach((c) => (all[c.id] = true));
-                    applyVisibility(all);
-                },
-                hideAllColumns: () => {
-                    const all = {};
-                    table.getAllLeafColumns().forEach((c) => (all[c.id] = false));
-                    applyVisibility(all);
-                },
-                resetColumnVisibility: () => {
-                    const initialVisibility = initialStateConfig.columnVisibility || {};
-                    applyVisibility(initialVisibility);
-                },
-            },
-            // -------------------------------
-            // Column Ordering
-            // -------------------------------
-            columnOrdering: {
-                setColumnOrder: (nextOrder) => {
-                    applyColumnOrder(nextOrder);
-                },
-                moveColumn: (columnId, toIndex) => {
-                    var _a;
-                    const currentOrder = (((_a = table.getState().columnOrder) === null || _a === void 0 ? void 0 : _a.length) ? table.getState().columnOrder : buildInitialOrder()) || [];
-                    const fromIndex = currentOrder.indexOf(columnId);
-                    if (fromIndex === -1)
-                        return;
-                    const next = [...currentOrder];
-                    next.splice(fromIndex, 1);
-                    next.splice(toIndex, 0, columnId);
-                    applyColumnOrder(next);
-                },
-                resetColumnOrder: () => {
-                    applyColumnOrder(buildInitialOrder());
-                },
-            },
-            // -------------------------------
-            // Column Pinning
-            // -------------------------------
-            columnPinning: {
-                pinColumnLeft: (columnId) => {
-                    const current = table.getState().columnPinning || { left: [], right: [] };
-                    const next = {
-                        left: [...(current.left || []).filter((id) => id !== columnId), columnId],
-                        right: (current.right || []).filter((id) => id !== columnId),
-                    };
-                    applyPinning(next);
-                },
-                pinColumnRight: (columnId) => {
-                    const current = table.getState().columnPinning || { left: [], right: [] };
-                    const next = {
-                        left: (current.left || []).filter((id) => id !== columnId),
-                        // keep your "prepend" behavior
-                        right: [columnId, ...(current.right || []).filter((id) => id !== columnId)],
-                    };
-                    applyPinning(next);
-                },
-                unpinColumn: (columnId) => {
-                    const current = table.getState().columnPinning || { left: [], right: [] };
-                    const next = {
-                        left: (current.left || []).filter((id) => id !== columnId),
-                        right: (current.right || []).filter((id) => id !== columnId),
-                    };
-                    applyPinning(next);
-                },
-                setPinning: (pinning) => {
-                    applyPinning(pinning);
-                },
-                resetColumnPinning: () => {
-                    const initialPinning = initialStateConfig.columnPinning || { left: [], right: [] };
-                    applyPinning(initialPinning);
-                },
-            },
-            // -------------------------------
-            // Column Resizing
-            // -------------------------------
-            columnResizing: {
-                resizeColumn: (columnId, width) => {
-                    const currentSizing = table.getState().columnSizing || {};
-                    applySizing({ ...currentSizing, [columnId]: width });
-                },
-                autoSizeColumn: (columnId) => {
-                    // safe to call tanstack helper; it will feed into onColumnSizingChange if wired,
-                    // but since you're controlled, we still prefer to update through handler:
-                    const col = table.getColumn(columnId);
-                    if (!col)
-                        return;
-                    col.resetSize();
-                    // after resetSize, read state and emit via handler so controlled stays synced
-                    applySizing({ ...(table.getState().columnSizing || {}) });
-                },
-                autoSizeAllColumns: () => {
-                    const initialSizing = initialStateConfig.columnSizing || {};
-                    applySizing(initialSizing);
-                },
-                resetColumnSizing: () => {
-                    const initialSizing = initialStateConfig.columnSizing || {};
-                    applySizing(initialSizing);
-                },
-            },
-            // -------------------------------
-            // Filtering
-            // -------------------------------
-            filtering: {
-                setGlobalFilter: (filter) => {
-                    applyGlobalFilter(filter);
-                },
-                clearGlobalFilter: () => {
-                    applyGlobalFilter("");
-                },
-                setColumnFilters: (filters) => {
-                    handleColumnFilterStateChange(filters);
-                },
-                addColumnFilter: (columnId, operator, value) => {
-                    const newFilter = {
-                        id: `filter_${Date.now()}`,
-                        columnId,
-                        operator,
-                        value,
-                    };
-                    const current = table.getState().columnFilter;
-                    const currentFilters = (current === null || current === void 0 ? void 0 : current.filters) || [];
-                    const nextFilters = [...currentFilters, newFilter];
-                    handleColumnFilterStateChange({
-                        filters: nextFilters,
-                        logic: current === null || current === void 0 ? void 0 : current.logic,
-                        pendingFilters: (current === null || current === void 0 ? void 0 : current.pendingFilters) || [],
-                        pendingLogic: (current === null || current === void 0 ? void 0 : current.pendingLogic) || "AND",
-                    });
-                    if (logger.isLevelEnabled("debug")) {
-                        logger.debug(`Adding column filter ${columnId} ${operator} ${value}`, nextFilters);
-                    }
-                },
-                removeColumnFilter: (filterId) => {
-                    const current = table.getState().columnFilter;
-                    const currentFilters = (current === null || current === void 0 ? void 0 : current.filters) || [];
-                    const nextFilters = currentFilters.filter((f) => f.id !== filterId);
-                    handleColumnFilterStateChange({
-                        filters: nextFilters,
-                        logic: current === null || current === void 0 ? void 0 : current.logic,
-                        pendingFilters: (current === null || current === void 0 ? void 0 : current.pendingFilters) || [],
-                        pendingLogic: (current === null || current === void 0 ? void 0 : current.pendingLogic) || "AND",
-                    });
-                    if (logger.isLevelEnabled("debug")) {
-                        logger.debug(`Removing column filter ${filterId}`, nextFilters);
-                    }
-                },
-                clearAllFilters: () => {
-                    applyGlobalFilter("");
-                    handleColumnFilterStateChange({
-                        filters: [],
-                        logic: "AND",
-                        pendingFilters: [],
-                        pendingLogic: "AND",
-                    });
-                },
-                resetFilters: () => {
-                    handleColumnFilterStateChange({
-                        filters: [],
-                        logic: "AND",
-                        pendingFilters: [],
-                        pendingLogic: "AND",
-                    });
-                    if (logger.isLevelEnabled("debug")) {
-                        logger.debug("Resetting filters");
-                    }
-                },
-            },
-            // -------------------------------
-            // Sorting
-            // -------------------------------
-            sorting: {
-                setSorting: (sortingState) => {
-                    applySorting(sortingState);
-                    if (logger.isLevelEnabled("debug"))
-                        logger.debug("Setting sorting", sortingState);
-                },
-                // NOTE: toggleSorting is okay, but can become "one behind" in controlled server mode.
-                // So we implement deterministic sorting through handler.
-                sortColumn: (columnId, direction) => {
-                    const current = table.getState().sorting || [];
-                    const filtered = current.filter((s) => s.id !== columnId);
-                    if (direction === false) {
-                        applySorting(filtered);
-                        return;
-                    }
-                    applySorting([{ id: columnId, desc: direction === "desc" }, ...filtered]);
-                },
-                clearSorting: () => {
-                    applySorting([]);
-                },
-                resetSorting: () => {
-                    const initialSorting = initialStateConfig.sorting || [];
-                    applySorting(initialSorting);
-                },
-            },
-            // -------------------------------
-            // Pagination
-            // -------------------------------
-            pagination: {
-                goToPage: (pageIndex) => {
-                    applyPagination((prev) => ({ ...prev, pageIndex }));
-                    if (logger.isLevelEnabled("debug"))
-                        logger.debug(`Going to page ${pageIndex}`);
-                },
-                nextPage: () => {
-                    applyPagination((prev) => { var _a; return ({ ...prev, pageIndex: ((_a = prev === null || prev === void 0 ? void 0 : prev.pageIndex) !== null && _a !== void 0 ? _a : 0) + 1 }); });
-                    if (logger.isLevelEnabled("debug"))
-                        logger.debug("Next page");
-                },
-                previousPage: () => {
-                    applyPagination((prev) => { var _a; return ({ ...prev, pageIndex: Math.max(0, ((_a = prev === null || prev === void 0 ? void 0 : prev.pageIndex) !== null && _a !== void 0 ? _a : 0) - 1) }); });
-                    if (logger.isLevelEnabled("debug"))
-                        logger.debug("Previous page");
-                },
-                setPageSize: (pageSize) => {
-                    // usually want pageIndex reset
-                    applyPagination(() => ({ pageIndex: 0, pageSize }));
-                    if (logger.isLevelEnabled("debug"))
-                        logger.debug(`Setting page size to ${pageSize}`);
-                },
-                goToFirstPage: () => {
-                    applyPagination((prev) => ({ ...prev, pageIndex: 0 }));
-                    if (logger.isLevelEnabled("debug"))
-                        logger.debug("Going to first page");
-                },
-                goToLastPage: () => {
-                    var _a, _b;
-                    // pageCount can be derived; keep safe fallback
-                    const pageCount = (_b = (_a = table.getPageCount) === null || _a === void 0 ? void 0 : _a.call(table)) !== null && _b !== void 0 ? _b : 0;
-                    if (pageCount > 0) {
-                        applyPagination((prev) => ({ ...prev, pageIndex: pageCount - 1 }));
-                        if (logger.isLevelEnabled("debug"))
-                            logger.debug(`Going to last page ${pageCount - 1}`);
-                    }
-                },
-                resetPagination: () => {
-                    const initialPagination = initialStateConfig.pagination || { pageIndex: 0, pageSize: 10 };
-                    applyPagination(initialPagination);
-                },
-            },
-            // -------------------------------
-            // Selection
-            // -------------------------------
-            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); },
-                toggleRowSelection: (rowId) => { var _a; return (_a = table.toggleRowSelected) === null || _a === void 0 ? void 0 : _a.call(table, rowId); },
-                selectAll: () => { var _a; return (_a = table.selectAll) === null || _a === void 0 ? void 0 : _a.call(table); },
-                deselectAll: () => { var _a; return (_a = table.deselectAll) === null || _a === void 0 ? void 0 : _a.call(table); },
-                toggleSelectAll: () => { var _a; return (_a = table.toggleAllRowsSelected) === null || _a === void 0 ? void 0 : _a.call(table); },
-                getSelectionState: () => { var _a; return ((_a = table.getSelectionState) === null || _a === void 0 ? void 0 : _a.call(table)) || { ids: [], type: "include" }; },
-                getSelectedRows: () => table.getSelectedRows(),
-                getSelectedCount: () => table.getSelectedCount(),
-                isRowSelected: (rowId) => table.getIsRowSelected(rowId) || false,
-            },
-            // -------------------------------
-            // Data Management (kept same, but ensure state changes go through handlers)
-            // -------------------------------
-            data: {
-                refresh: (options) => {
-                    void triggerRefresh(options, 'refresh');
-                },
-                reload: (options = {}) => {
-                    var _a, _b;
-                    void triggerRefresh({
-                        ...options,
-                        resetPagination: (_a = options.resetPagination) !== null && _a !== void 0 ? _a : false,
-                        reason: (_b = options.reason) !== null && _b !== void 0 ? _b : 'reload',
-                    }, 'reload');
-                },
-                resetAll: () => resetAllAndReload(),
-                getAllData: () => [...tableData],
-                getRowData: (rowId) => {
-                    const rowIndex = getRowIndexById(tableData, rowId);
-                    return rowIndex === -1 ? undefined : tableData[rowIndex];
-                },
-                getRowByIndex: (index) => tableData[index],
-                updateRow: (rowId, updates) => {
-                    applyDataMutation('updateRow', (rowsToMutate) => {
-                        const rowIndex = getRowIndexById(rowsToMutate, rowId);
-                        if (rowIndex === -1)
-                            return rowsToMutate;
-                        const nextData = [...rowsToMutate];
-                        nextData[rowIndex] = { ...nextData[rowIndex], ...updates };
-                        return nextData;
-                    }, { rowId });
-                },
-                updateRowByIndex: (index, updates) => {
-                    applyDataMutation('updateRowByIndex', (rowsToMutate) => {
-                        if (!rowsToMutate[index])
-                            return rowsToMutate;
-                        const nextData = [...rowsToMutate];
-                        nextData[index] = { ...nextData[index], ...updates };
-                        return nextData;
-                    }, { index });
-                },
-                insertRow: (newRow, index) => {
-                    applyDataMutation('insertRow', (rowsToMutate) => {
-                        const nextData = [...rowsToMutate];
-                        nextData.splice(clampInsertIndex(nextData, index), 0, newRow);
-                        return nextData;
-                    }, { index });
-                },
-                deleteRow: (rowId) => {
-                    applyDataMutation('deleteRow', (rowsToMutate) => {
-                        const rowIndex = getRowIndexById(rowsToMutate, rowId);
-                        if (rowIndex === -1)
-                            return rowsToMutate;
-                        const nextData = [...rowsToMutate];
-                        nextData.splice(rowIndex, 1);
-                        return nextData;
-                    }, { rowId });
-                },
-                deleteRowByIndex: (index) => {
-                    applyDataMutation('deleteRowByIndex', (rowsToMutate) => {
-                        if (index < 0 || index >= rowsToMutate.length)
-                            return rowsToMutate;
-                        const nextData = [...rowsToMutate];
-                        nextData.splice(index, 1);
-                        return nextData;
-                    }, { index });
-                },
-                deleteSelectedRows: () => {
-                    var _a, _b, _c;
-                    const currentSelection = ((_a = table.getSelectionState) === null || _a === void 0 ? void 0 : _a.call(table)) || selectionState;
-                    const selectedIds = new Set((currentSelection.ids || []).map((id) => String(id)));
-                    const loadedRowIds = tableData.map((row, index) => String((0, utils_1.generateRowId)(row, index, idKey)));
-                    const deletableRowIds = currentSelection.type === 'exclude'
-                        ? loadedRowIds.filter((rowId) => !selectedIds.has(rowId))
-                        : loadedRowIds.filter((rowId) => selectedIds.has(rowId));
-                    if (deletableRowIds.length === 0)
-                        return;
-                    if (currentSelection.type === 'exclude'
-                        && table.getRowCount() > loadedRowIds.length
-                        && logger.isLevelEnabled('info')) {
-                        logger.info('deleteSelectedRows in exclude mode removed currently loaded rows only', {
-                            removedRows: deletableRowIds.length,
-                            totalSelected: (_b = table.getSelectedCount) === null || _b === void 0 ? void 0 : _b.call(table),
-                        });
-                    }
-                    const deletableRowIdSet = new Set(deletableRowIds);
-                    applyDataMutation('deleteSelectedRows', (rowsToMutate) => rowsToMutate.filter((row, index) => !deletableRowIdSet.has(String((0, utils_1.generateRowId)(row, index, idKey)))), { rowIds: deletableRowIds });
-                    (_c = table.deselectAll) === null || _c === void 0 ? void 0 : _c.call(table);
-                },
-                replaceAllData: (newData) => {
-                    applyDataMutation('replaceAllData', () => [...newData]);
-                },
-                updateMultipleRows: (updates) => {
-                    const updateMap = new Map(updates.map((update) => [update.rowId, update.data]));
-                    applyDataMutation('updateMultipleRows', (rowsToMutate) => rowsToMutate.map((row, index) => {
-                        const currentRowId = String((0, utils_1.generateRowId)(row, index, idKey));
-                        const updateData = updateMap.get(currentRowId);
-                        return updateData ? { ...row, ...updateData } : row;
-                    }));
-                },
-                insertMultipleRows: (newRows, startIndex) => {
-                    applyDataMutation('insertMultipleRows', (rowsToMutate) => {
-                        const nextData = [...rowsToMutate];
-                        nextData.splice(clampInsertIndex(nextData, startIndex), 0, ...newRows);
-                        return nextData;
-                    }, { index: startIndex });
-                },
-                deleteMultipleRows: (rowIds) => {
-                    const idsToDelete = new Set(rowIds);
-                    applyDataMutation('deleteMultipleRows', (rowsToMutate) => rowsToMutate.filter((row, index) => !idsToDelete.has(String((0, utils_1.generateRowId)(row, index, idKey)))), { rowIds });
-                },
-                updateField: (rowId, fieldName, value) => {
-                    applyDataMutation('updateField', (rowsToMutate) => {
-                        const rowIndex = getRowIndexById(rowsToMutate, rowId);
-                        if (rowIndex === -1)
-                            return rowsToMutate;
-                        const nextData = [...rowsToMutate];
-                        nextData[rowIndex] = { ...nextData[rowIndex], [fieldName]: value };
-                        return nextData;
-                    }, { rowId });
-                },
-                updateFieldByIndex: (index, fieldName, value) => {
-                    applyDataMutation('updateFieldByIndex', (rowsToMutate) => {
-                        if (!rowsToMutate[index])
-                            return rowsToMutate;
-                        const nextData = [...rowsToMutate];
-                        nextData[index] = { ...nextData[index], [fieldName]: value };
-                        return nextData;
-                    }, { index });
-                },
-                findRows: (predicate) => tableData.filter(predicate),
-                findRowIndex: (predicate) => tableData.findIndex(predicate),
-                getDataCount: () => tableData.length,
-                getFilteredDataCount: () => table.getFilteredRowModel().rows.length,
-            },
-            // -------------------------------
-            // Layout Management
-            // -------------------------------
-            layout: {
-                resetLayout: () => {
-                    var _a;
-                    // go through handlers so controlled state updates + emit works
-                    applySizing(initialStateConfig.columnSizing || {});
-                    applyVisibility(initialStateConfig.columnVisibility || {});
-                    applySorting(initialStateConfig.sorting || []);
-                    applyGlobalFilter((_a = initialStateConfig.globalFilter) !== null && _a !== void 0 ? _a : "");
-                },
-                resetAll: () => resetAllAndReload(),
-                saveLayout: () => ({
-                    columnVisibility: table.getState().columnVisibility,
-                    columnSizing: table.getState().columnSizing,
-                    columnOrder: table.getState().columnOrder,
-                    columnPinning: table.getState().columnPinning,
-                    sorting: table.getState().sorting,
-                    pagination: table.getState().pagination,
-                    globalFilter: table.getState().globalFilter,
-                    columnFilter: table.getState().columnFilter,
-                }),
-                restoreLayout: (layout) => {
-                    if (layout.columnVisibility)
-                        applyVisibility(layout.columnVisibility);
-                    if (layout.columnSizing)
-                        applySizing(layout.columnSizing);
-                    if (layout.columnOrder)
-                        applyColumnOrder(layout.columnOrder);
-                    if (layout.columnPinning)
-                        applyPinning(layout.columnPinning);
-                    if (layout.sorting)
-                        applySorting(layout.sorting);
-                    if (layout.pagination && enablePagination)
-                        applyPagination(layout.pagination);
-                    if (layout.globalFilter !== undefined)
-                        applyGlobalFilter(layout.globalFilter);
-                    if (layout.columnFilter)
-                        handleColumnFilterStateChange(layout.columnFilter);
-                },
-            },
-            // -------------------------------
-            // Table State
-            // -------------------------------
-            state: {
-                getTableState: () => table.getState(),
-                getCurrentFilters: () => table.getState().columnFilter,
-                getCurrentSorting: () => table.getState().sorting,
-                getCurrentPagination: () => table.getState().pagination,
-                getCurrentSelection: () => { var _a; return (_a = table.getSelectionState) === null || _a === void 0 ? void 0 : _a.call(table); },
-            },
-            // -------------------------------
-            // Export (unchanged mostly)
-            // -------------------------------
-            export: {
-                exportCSV: async (options = {}) => {
-                    const { filename = exportFilename, chunkSize = exportChunkSize, strictTotalCheck = exportStrictTotalCheck, sanitizeCSV = exportSanitizeCSV, } = options;
-                    const mode = dataMode === "server" && !!onServerExport ? 'server' : 'client';
-                    await runExportWithPolicy({
-                        format: 'csv',
-                        filename,
-                        mode,
-                        execute: async (controller) => {
-                            var _a;
-                            const toStateChange = (state) => {
-                                const isFinalPhase = state.phase === 'completed' || state.phase === 'cancelled' || state.phase === 'error';
-                                handleExportStateChangeInternal({
-                                    phase: state.phase,
-                                    mode,
-                                    format: 'csv',
-                                    filename,
-                                    processedRows: state.processedRows,
-                                    totalRows: state.totalRows,
-                                    percentage: state.percentage,
-                                    message: state.message,
-                                    code: state.code,
-                                    startedAt: state.phase === 'starting' ? Date.now() : undefined,
-                                    endedAt: isFinalPhase ? Date.now() : undefined,
-                                    queueLength: queuedExportCount,
-                                });
-                                if (state.phase === 'cancelled') {
-                                    onExportCancel === null || onExportCancel === void 0 ? void 0 : onExportCancel();
-                                }
-                            };
-                            if (mode === 'server' && onServerExport) {
-                                const currentFilters = {
-                                    globalFilter: table.getState().globalFilter,
-                                    columnFilter: table.getState().columnFilter,
-                                    sorting: table.getState().sorting,
-                                    pagination: table.getState().pagination,
-                                };
-                                if (logger.isLevelEnabled("debug"))
-                                    logger.debug("Server export CSV", { currentFilters });
-                                await (0, utils_1.exportServerData)(table, {
-                                    format: "csv",
-                                    filename,
-                                    fetchData: (filters, selection, signal) => onServerExport(filters, selection, signal),
-                                    currentFilters,
-                                    selection: (_a = table.getSelectionState) === null || _a === void 0 ? void 0 : _a.call(table),
-                                    onProgress: handleExportProgressInternal,
-                                    onComplete: onExportComplete,
-                                    onError: onExportError,
-                                    onStateChange: toStateChange,
-                                    signal: controller.signal,
-                                    chunkSize,
-                                    strictTotalCheck,
-                                    sanitizeCSV,
-                                });
-                                return;
-                            }
-                            await (0, utils_1.exportClientData)(table, {
-                                format: "csv",
-                                filename,
-                                onProgress: handleExportProgressInternal,
-                                onComplete: onExportComplete,
-                                onError: onExportError,
-                                onStateChange: toStateChange,
-                                signal: controller.signal,
-                                sanitizeCSV,
-                            });
-                            if (logger.isLevelEnabled("debug"))
-                                logger.debug("Client export CSV", filename);
-                        }
-                    });
-                },
-                exportExcel: async (options = {}) => {
-                    const { filename = exportFilename, chunkSize = exportChunkSize, strictTotalCheck = exportStrictTotalCheck, sanitizeCSV = exportSanitizeCSV, } = options;
-                    const mode = dataMode === "server" && !!onServerExport ? 'server' : 'client';
-                    await runExportWithPolicy({
-                        format: 'excel',
-                        filename,
-                        mode,
-                        execute: async (controller) => {
-                            var _a;
-                            const toStateChange = (state) => {
-                                const isFinalPhase = state.phase === 'completed' || state.phase === 'cancelled' || state.phase === 'error';
-                                handleExportStateChangeInternal({
-                                    phase: state.phase,
-                                    mode,
-                                    format: 'excel',
-                                    filename,
-                                    processedRows: state.processedRows,
-                                    totalRows: state.totalRows,
-                                    percentage: state.percentage,
-                                    message: state.message,
-                                    code: state.code,
-                                    startedAt: state.phase === 'starting' ? Date.now() : undefined,
-                                    endedAt: isFinalPhase ? Date.now() : undefined,
-                                    queueLength: queuedExportCount,
-                                });
-                                if (state.phase === 'cancelled') {
-                                    onExportCancel === null || onExportCancel === void 0 ? void 0 : onExportCancel();
-                                }
-                            };
-                            if (mode === 'server' && onServerExport) {
-                                const currentFilters = {
-                                    globalFilter: table.getState().globalFilter,
-                                    columnFilter: table.getState().columnFilter,
-                                    sorting: table.getState().sorting,
-                                    pagination: table.getState().pagination,
-                                };
-                                if (logger.isLevelEnabled("debug"))
-                                    logger.debug("Server export Excel", { currentFilters });
-                                await (0, utils_1.exportServerData)(table, {
-                                    format: "excel",
-                                    filename,
-                                    fetchData: (filters, selection, signal) => onServerExport(filters, selection, signal),
-                                    currentFilters,
-                                    selection: (_a = table.getSelectionState) === null || _a === void 0 ? void 0 : _a.call(table),
-                                    onProgress: handleExportProgressInternal,
-                                    onComplete: onExportComplete,
-                                    onError: onExportError,
-                                    onStateChange: toStateChange,
-                                    signal: controller.signal,
-                                    chunkSize,
-                                    strictTotalCheck,
-                                    sanitizeCSV,
-                                });
-                                return;
-                            }
-                            await (0, utils_1.exportClientData)(table, {
-                                format: "excel",
-                                filename,
-                                onProgress: handleExportProgressInternal,
-                                onComplete: onExportComplete,
-                                onError: onExportError,
-                                onStateChange: toStateChange,
-                                signal: controller.signal,
-                                sanitizeCSV,
-                            });
-                            if (logger.isLevelEnabled("debug"))
-                                logger.debug("Client export Excel", filename);
-                        }
-                    });
-                },
-                exportServerData: async (options) => {
-                    const { format, filename = exportFilename, fetchData: fetchFn = onServerExport, chunkSize = exportChunkSize, strictTotalCheck = exportStrictTotalCheck, sanitizeCSV = exportSanitizeCSV, } = options;
-                    if (!fetchFn) {
-                        onExportError === null || onExportError === void 0 ? void 0 : onExportError({ message: "No server export function provided", code: "NO_SERVER_EXPORT" });
-                        if (logger.isLevelEnabled("debug"))
-                            logger.debug("Server export data failed", "No server export function provided");
-                        return;
-                    }
-                    await runExportWithPolicy({
-                        format,
-                        filename,
-                        mode: 'server',
-                        execute: async (controller) => {
-                            var _a;
-                            const currentFilters = {
-                                globalFilter: table.getState().globalFilter,
-                                columnFilter: table.getState().columnFilter,
-                                sorting: table.getState().sorting,
-                                pagination: table.getState().pagination,
-                            };
-                            if (logger.isLevelEnabled("debug"))
-                                logger.debug("Server export data", { currentFilters });
-                            await (0, utils_1.exportServerData)(table, {
-                                format,
-                                filename,
-                                fetchData: (filters, selection, signal) => fetchFn(filters, selection, signal),
-                                currentFilters,
-                                selection: (_a = table.getSelectionState) === null || _a === void 0 ? void 0 : _a.call(table),
-                                onProgress: handleExportProgressInternal,
-                                onComplete: onExportComplete,
-                                onError: onExportError,
-                                onStateChange: (state) => {
-                                    const isFinalPhase = state.phase === 'completed' || state.phase === 'cancelled' || state.phase === 'error';
-                                    handleExportStateChangeInternal({
-                                        phase: state.phase,
-                                        mode: 'server',
-                                        format,
-                                        filename,
-                                        processedRows: state.processedRows,
-                                        totalRows: state.totalRows,
-                                        percentage: state.percentage,
-                                        message: state.message,
-                                        code: state.code,
-                                        startedAt: state.phase === 'starting' ? Date.now() : undefined,
-                                        endedAt: isFinalPhase ? Date.now() : undefined,
-                                        queueLength: queuedExportCount,
-                                    });
-                                    if (state.phase === 'cancelled') {
-                                        onExportCancel === null || onExportCancel === void 0 ? void 0 : onExportCancel();
-                                    }
-                                },
-                                signal: controller.signal,
-                                chunkSize,
-                                strictTotalCheck,
-                                sanitizeCSV,
-                            });
-                        }
-                    });
-                },
-                isExporting: () => isExporting || false,
-                cancelExport: () => {
-                    const activeController = exportControllerRef.current;
-                    if (!activeController) {
-                        return;
-                    }
-                    activeController.abort();
-                    setExportControllerSafely((current) => (current === activeController ? null : current));
-                    if (logger.isLevelEnabled("debug"))
-                        logger.debug("Export cancelled");
-                },
-            },
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        table,
-        enhancedColumns,
-        handleColumnOrderChange,
-        handleColumnPinningChange,
-        handleColumnVisibilityChange,
-        handleColumnSizingChange,
-        handlePaginationChange,
-        handleSortingChange,
-        handleGlobalFilterChange,
-        handleColumnFilterStateChange,
-        initialStateConfig,
-        enablePagination,
-        idKey,
-        triggerRefresh,
-        applyDataMutation,
-        tableData,
-        selectionState,
-        // export
-        exportFilename,
-        exportChunkSize,
-        exportStrictTotalCheck,
-        exportSanitizeCSV,
-        onExportComplete,
-        onExportError,
-        onExportCancel,
-        onServerExport,
-        queuedExportCount,
-        isExporting,
-        dataMode,
-        handleExportProgressInternal,
-        handleExportStateChangeInternal,
-        runExportWithPolicy,
-        setExportControllerSafely,
-        logger,
-        resetAllAndReload,
-    ]);
-    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, { 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, { colSpan: table.getAllColumns().length, message: emptyMessage, slots: slots, slotProps: slotProps, ...emptyRowProps }));
-        }
-        if (enableVirtualization && !enablePagination && rows.length > 0) {
-            const virtualItems = rowVirtualizer.getVirtualItems();
-            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [virtualItems.length > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: table.getAllColumns().length, style: {
-                                height: `${(_b = (_a = virtualItems[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px`,
-                                padding: 0,
-                                border: 0,
-                            } }) })), virtualItems.map((virtualRow) => {
-                        const row = rows[virtualRow.index];
-                        if (!row)
-                            return null;
-                        return ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, { row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: virtualRow.index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter, onRowClick: onRowClick, selectOnRowClick: selectOnRowClick, slots: slots, slotProps: slotProps }, row.id));
-                    }), virtualItems.length > 0 && ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { colSpan: table.getAllColumns().length, style: {
-                                height: `${rowVirtualizer.getTotalSize() -
-                                    ((_d = (_c = virtualItems[virtualItems.length - 1]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0)}px`,
-                                padding: 0,
-                                border: 0,
-                            } }) }))] }));
-        }
-        return rows.map((row, index) => ((0, jsx_runtime_1.jsx)(rows_1.DataTableRow, { row: row, enableHover: enableHover, enableStripes: enableStripes, isOdd: index % 2 === 1, renderSubComponent: renderSubComponent, disableStickyHeader: enableStickyHeaderOrFooter, onRowClick: onRowClick, selectOnRowClick: selectOnRowClick, slots: slots, slotProps: slotProps }, row.id)));
-    }, [
-        tableLoading,
-        rows,
-        enableVirtualization,
-        enablePagination,
-        pagination.pageSize,
-        skeletonRows,
-        table,
-        slotProps,
-        emptyMessage,
-        rowVirtualizer,
-        enableHover,
-        enableStripes,
-        renderSubComponent,
-        enableStickyHeaderOrFooter,
-        onRowClick,
-        selectOnRowClick,
-        slots,
-    ]);
-    // -------------------------------
-    // Export cancel callback
-    // -------------------------------
-    const handleCancelExport = (0, react_1.useCallback)(() => {
-        const activeController = exportControllerRef.current;
-        if (activeController) {
-            activeController.abort();
-            setExportControllerSafely((current) => (current === activeController ? null : current));
-        }
-    }, [setExportControllerSafely]);
-    // -------------------------------
-    // 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, {});
-    const { component: TableContainerComponent, props: tableContainerSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'tableContainer', material_1.TableContainer, {});
-    const { component: TableComponent, props: tableComponentSlotProps } = (0, slot_helpers_1.getSlotComponentWithProps)(slots, slotProps || {}, 'table', material_1.Table, {});
-    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, exportPhase: exportPhase, exportProgress: exportProgress, 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, enableRefresh: enableRefresh, ...toolbarSlotProps, refreshButtonProps: {
-                        loading: tableLoading, // disable while fetching
-                        showSpinnerWhileLoading: false,
-                        onRefresh: () => { var _a, _b, _c; return (_c = (_b = (_a = internalApiRef.current) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.refresh) === null || _c === void 0 ? void 0 : _c.call(_b, true); },
-                        ...toolbarSlotProps.refreshButtonProps,
-                    } })) : 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,
-                            ...tableProps === null || tableProps === void 0 ? void 0 : tableProps.style,
-                        }, ...(0, slot_helpers_1.mergeSlotProps)(tableProps || {}, tableComponentSlotProps), children: [useFixedLayout ? ((0, jsx_runtime_1.jsx)("colgroup", { children: visibleLeafColumns.map((column) => ((0, jsx_runtime_1.jsx)("col", { style: {
-                                        width: column.getSize(),
-                                        minWidth: column.columnDef.minSize,
-                                        maxWidth: column.columnDef.maxSize,
-                                    } }, column.id))) })) : null, (0, jsx_runtime_1.jsx)(headers_1.TableHeader, { draggable: enableColumnDragging, enableColumnResizing: enableColumnResizing, enableStickyHeader: enableStickyHeaderOrFooter, 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] }) }));
+const use_data_table_engine_1 = require("./hooks/use-data-table-engine");
+const data_table_view_1 = require("./components/data-table-view");
+exports.DataTable = (0, react_1.forwardRef)(function DataTable(props, ref) {
+    const engine = (0, use_data_table_engine_1.useDataTableEngine)(props);
+    (0, react_1.useImperativeHandle)(ref, () => engine.refs.apiRef.current, []);
+    return ((0, jsx_runtime_1.jsx)(data_table_context_1.DataTableProvider, { ...engine.providerProps, children: (0, jsx_runtime_1.jsx)(data_table_view_1.DataTableView, { engine: engine, ...props }) }));
 });