@ackplus/mui-tanstack-data-grid 1.0.0

package/dist/core/use-data-table.js

@@ -0,0 +1,1081 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDataTable = useDataTable;
+/**
+ * useDataTable — the headless engine.
+ *
+ * Owns all table logic (data, sorting, filtering, pagination, selection, column
+ * state, server fetch, export, the imperative API). No DOM — the render layer
+ * consumes the result. Ported from v1 `use-data-table-engine.ts` with:
+ *  - deprecated prop aliases resolved (enableColumnDragging→enableColumnReordering, …)
+ *  - `console.log` debug noise replaced by the gated logger
+ *  - real `getRowId` support (stable row identity across pages)
+ *  - the obsolete MUI-`<table>` layout math removed (the div/grid layer sizes columns)
+ */
+const react_table_1 = require("@tanstack/react-table");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const styles_1 = require("@mui/material/styles");
+const react_1 = require("react");
+const features_1 = require("../features");
+const utils_1 = require("../utils");
+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',
+    },
+};
+function uiReducer(state, action) {
+    switch (action.type) {
+        case 'SET_SORTING_RESET_PAGE':
+            return { ...state, sorting: action.payload, pagination: { pageIndex: 0, pageSize: state.pagination.pageSize } };
+        case 'SET_PAGINATION':
+            return { ...state, pagination: action.payload };
+        case 'SET_GLOBAL_FILTER_RESET_PAGE':
+            return { ...state, globalFilter: action.payload, pagination: { pageIndex: 0, pageSize: state.pagination.pageSize } };
+        case 'SET_SELECTION':
+            return { ...state, selectionState: action.payload };
+        case 'SET_COLUMN_FILTER':
+            return { ...state, columnFilter: action.payload };
+        case 'SET_COLUMN_FILTER_RESET_PAGE':
+            return { ...state, columnFilter: action.payload, pagination: { pageIndex: 0, pageSize: state.pagination.pageSize } };
+        case 'SET_EXPANDED':
+            return { ...state, expanded: action.payload };
+        case 'SET_DENSITY':
+            return { ...state, density: action.payload };
+        case 'SET_COLUMN_ORDER':
+            return { ...state, columnOrder: action.payload };
+        case 'SET_COLUMN_PINNING':
+            return { ...state, columnPinning: action.payload };
+        case 'SET_COLUMN_VISIBILITY':
+            return { ...state, columnVisibility: action.payload };
+        case 'SET_COLUMN_SIZING':
+            return { ...state, columnSizing: action.payload };
+        case 'RESTORE_LAYOUT':
+        case 'RESET_ALL':
+            return { ...state, ...action.payload };
+        default:
+            return state;
+    }
+}
+function useLatestRef(value) {
+    const ref = (0, react_1.useRef)(value);
+    (0, react_1.useEffect)(() => {
+        ref.current = value;
+    }, [value]);
+    return ref;
+}
+function useEvent(fn) {
+    const fnRef = useLatestRef(fn);
+    return (0, react_1.useCallback)(((...args) => fnRef.current(...args)), [fnRef]);
+}
+/** Curated filter payload for server export — matches v1's shape (not the full table state). */
+function curateExportFilters(s) {
+    return { globalFilter: s.globalFilter, columnFilter: s.columnFilter, sorting: s.sorting, pagination: s.pagination };
+}
+function useDataTable(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const { initialState, columns, data = [], idKey = 'id', getRowId: getRowIdProp, dataMode = 'client', initialLoadData = true, onFetchData, onFetchStateChange, onDataStateChange, enableRowSelection = false, enableMultiRowSelection = true, selectMode = 'page', isRowSelectable, onSelectionChange, enableBulkActions = false, enableColumnResizing = false, columnResizeMode = 'onChange', onColumnSizingChange, enableColumnPinning = false, onColumnPinningChange, onColumnVisibilityChange, enableColumnVisibility = true, getRowCanExpand, enablePagination = false, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', exportConcurrency = 'cancelAndRestart', exportChunkSize = 1000, exportStrictTotalCheck = false, exportSanitizeCSV = true, onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, onExportStateChange, fitToScreen = true, enableVirtualization = false, loading = false, onPaginationChange, onGlobalFilterChange, slots = {}, slotProps = {}, logging, } = props;
+    // --- resolve deprecated aliases (v1 names still accepted)
+    const rowCount = (_b = (_a = props.rowCount) !== null && _a !== void 0 ? _a : props.totalRow) !== null && _b !== void 0 ? _b : 0;
+    const enableColumnReordering = (_d = (_c = props.enableColumnReordering) !== null && _c !== void 0 ? _c : props.enableColumnDragging) !== null && _d !== void 0 ? _d : false;
+    const onColumnOrderChange = (_e = props.onColumnOrderChange) !== null && _e !== void 0 ? _e : props.onColumnDragEnd;
+    const enableExpanding = (_g = (_f = props.enableRowExpansion) !== null && _f !== void 0 ? _f : props.enableExpanding) !== null && _g !== void 0 ? _g : false;
+    const onColumnFilterChange = (_h = props.onColumnFilterChange) !== null && _h !== void 0 ? _h : props.onColumnFiltersChange;
+    // Density is controlled when `density` (or the deprecated `tableSize`) is passed;
+    // otherwise it's uncontrolled (driven by the toolbar's density selector → ui.density).
+    const controlledDensity = (_j = props.density) !== null && _j !== void 0 ? _j : (props.tableSize === 'small' ? 'compact' : props.tableSize === 'medium' ? 'standard' : undefined);
+    const initialDensity = controlledDensity !== null && controlledDensity !== void 0 ? controlledDensity : 'standard';
+    const estimateRowHeight = (_l = (_k = props.estimatedRowHeight) !== null && _k !== void 0 ? _k : props.estimateRowHeight) !== null && _l !== void 0 ? _l : 52;
+    const theme = (0, styles_1.useTheme)();
+    const log = (0, react_1.useMemo)(() => (0, utils_1.createLogger)('engine', logging), [logging]);
+    const isServerMode = dataMode === 'server';
+    const isServerPagination = paginationMode === 'server' || isServerMode;
+    const isServerFiltering = filterMode === 'server' || isServerMode;
+    const isServerSorting = sortingMode === 'server' || isServerMode;
+    const initialStateConfig = (0, react_1.useMemo)(() => ({ ...DEFAULT_INITIAL_STATE, ...initialState }), [initialState]);
+    const initialUIState = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return ({
+            sorting: (_a = initialStateConfig.sorting) !== null && _a !== void 0 ? _a : DEFAULT_INITIAL_STATE.sorting,
+            pagination: (_b = initialStateConfig.pagination) !== null && _b !== void 0 ? _b : DEFAULT_INITIAL_STATE.pagination,
+            globalFilter: (_c = initialStateConfig.globalFilter) !== null && _c !== void 0 ? _c : DEFAULT_INITIAL_STATE.globalFilter,
+            selectionState: (_d = initialStateConfig.selectionState) !== null && _d !== void 0 ? _d : DEFAULT_INITIAL_STATE.selectionState,
+            columnFilter: (_e = initialStateConfig.columnFilter) !== null && _e !== void 0 ? _e : DEFAULT_INITIAL_STATE.columnFilter,
+            expanded: (_f = initialStateConfig.expanded) !== null && _f !== void 0 ? _f : {},
+            density: initialDensity,
+            columnOrder: (_g = initialStateConfig.columnOrder) !== null && _g !== void 0 ? _g : DEFAULT_INITIAL_STATE.columnOrder,
+            columnPinning: (_h = initialStateConfig.columnPinning) !== null && _h !== void 0 ? _h : DEFAULT_INITIAL_STATE.columnPinning,
+            columnVisibility: (_j = initialStateConfig.columnVisibility) !== null && _j !== void 0 ? _j : DEFAULT_INITIAL_STATE.columnVisibility,
+            columnSizing: (_k = initialStateConfig.columnSizing) !== null && _k !== void 0 ? _k : DEFAULT_INITIAL_STATE.columnSizing,
+        });
+    }, [initialStateConfig, initialDensity]);
+    const [ui, dispatch] = (0, react_1.useReducer)(uiReducer, initialUIState);
+    const [serverData, setServerData] = (0, react_1.useState)(null);
+    const [serverTotal, setServerTotal] = (0, react_1.useState)(0);
+    const [exportPhase, setExportPhase] = (0, react_1.useState)(null);
+    const [exportProgress, setExportProgress] = (0, react_1.useState)({});
+    const [exportController, setExportController] = (0, react_1.useState)(null);
+    const [queuedExportCount, setQueuedExportCount] = (0, react_1.useState)(0);
+    const tableContainerRef = (0, react_1.useRef)(null);
+    const apiRef = (0, react_1.useRef)(null);
+    const exportControllerRef = (0, react_1.useRef)(null);
+    const exportQueueRef = (0, react_1.useRef)(Promise.resolve());
+    const lastSentRef = (0, react_1.useRef)('');
+    const uiRef = useLatestRef(ui);
+    const dataRef = useLatestRef(data);
+    const serverDataRef = useLatestRef(serverData);
+    const nextFetchDelayRef = (0, react_1.useRef)(0);
+    const onFetchDataRef = useLatestRef(onFetchData);
+    const onFetchStateChangeRef = useLatestRef(onFetchStateChange);
+    const onDataStateChangeRef = useLatestRef(onDataStateChange);
+    const onSortingChangeRef = useLatestRef(onSortingChange);
+    const onPaginationChangeRef = useLatestRef(onPaginationChange);
+    const onGlobalFilterChangeRef = useLatestRef(onGlobalFilterChange);
+    const onColumnFilterChangeRef = useLatestRef(onColumnFilterChange);
+    const onColumnOrderChangeRef = useLatestRef(onColumnOrderChange);
+    const onColumnPinningChangeRef = useLatestRef(onColumnPinningChange);
+    const onColumnVisibilityChangeRef = useLatestRef(onColumnVisibilityChange);
+    const onColumnSizingChangeRef = useLatestRef(onColumnSizingChange);
+    const onSelectionChangeRef = useLatestRef(onSelectionChange);
+    const onExportProgressRef = useLatestRef(onExportProgress);
+    const onExportCompleteRef = useLatestRef(onExportComplete);
+    const onExportErrorRef = useLatestRef(onExportError);
+    const onExportCancelRef = useLatestRef(onExportCancel);
+    const onExportStateChangeRef = useLatestRef(onExportStateChange);
+    const onServerExportRef = useLatestRef(onServerExport);
+    const fetchHandler = useEvent((filters, opts) => { var _a; return (_a = onFetchDataRef.current) === null || _a === void 0 ? void 0 : _a.call(onFetchDataRef, filters, opts); });
+    const { debouncedFetch, isLoading: fetchLoading } = (0, utils_1.useDebouncedFetch)(fetchHandler);
+    const tableData = (0, react_1.useMemo)(() => (serverData !== null ? serverData : data), [serverData, data]);
+    const tableTotalRow = (0, react_1.useMemo)(() => (serverData !== null ? serverTotal : rowCount || data.length), [serverData, serverTotal, rowCount, data]);
+    const tableLoading = (0, react_1.useMemo)(() => (onFetchData ? loading || fetchLoading : loading), [onFetchData, loading, fetchLoading]);
+    const getRowId = (0, react_1.useCallback)((row, index) => (getRowIdProp ? getRowIdProp(row, index) : (0, utils_1.generateRowId)(row, index, idKey)), [getRowIdProp, idKey]);
+    const enhancedColumns = (0, react_1.useMemo)(() => {
+        let cols = [...columns];
+        if (enableExpanding) {
+            cols = [
+                (0, utils_1.createExpandingColumn)((slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn) && typeof slotProps.expandColumn === 'object' ? slotProps.expandColumn : {}),
+                ...cols,
+            ];
+        }
+        if (enableRowSelection) {
+            cols = [
+                (0, utils_1.createSelectionColumn)({
+                    ...((slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn) && typeof slotProps.selectionColumn === 'object'
+                        ? slotProps.selectionColumn
+                        : {}),
+                    multiSelect: enableMultiRowSelection,
+                }),
+                ...cols,
+            ];
+        }
+        return (0, utils_1.withIdsDeep)(cols);
+    }, [columns, enableExpanding, enableRowSelection, enableMultiRowSelection, slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn, slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn]);
+    const fetchData = useEvent(async (overrides = {}, options) => {
+        var _a, _b;
+        const s = uiRef.current;
+        const filters = {
+            globalFilter: s.globalFilter,
+            pagination: s.pagination,
+            columnFilter: s.columnFilter,
+            sorting: s.sorting,
+            ...overrides,
+        };
+        (_a = onFetchStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onFetchStateChangeRef, filters, options === null || options === void 0 ? void 0 : options.meta);
+        const handler = onFetchDataRef.current;
+        if (!handler)
+            return;
+        const delay = (_b = options === null || options === void 0 ? void 0 : options.delay) !== null && _b !== void 0 ? _b : 0;
+        const result = await debouncedFetch(filters, { debounceDelay: delay, meta: options === null || options === void 0 ? void 0 : options.meta });
+        if (result && Array.isArray(result.data) && result.total !== undefined) {
+            setServerData(result.data);
+            setServerTotal(result.total);
+        }
+        return result;
+    });
+    const isSomeRowsSelected = (0, react_1.useMemo)(() => {
+        if (!enableBulkActions || !enableRowSelection)
+            return false;
+        if (ui.selectionState.type === 'exclude')
+            return ui.selectionState.ids.length < tableTotalRow;
+        return ui.selectionState.ids.length > 0;
+    }, [enableBulkActions, enableRowSelection, ui.selectionState, tableTotalRow]);
+    const selectedRowCount = (0, react_1.useMemo)(() => {
+        if (!enableBulkActions || !enableRowSelection)
+            return 0;
+        if (ui.selectionState.type === 'exclude')
+            return tableTotalRow - ui.selectionState.ids.length;
+        return ui.selectionState.ids.length;
+    }, [enableBulkActions, enableRowSelection, ui.selectionState, tableTotalRow]);
+    const table = (0, react_table_1.useReactTable)({
+        _features: [features_1.ColumnFilterFeature, features_1.SelectionFeature],
+        data: tableData,
+        columns: enhancedColumns,
+        initialState: initialStateConfig,
+        state: {
+            ...(enableSorting ? { sorting: ui.sorting } : {}),
+            ...(enablePagination ? { pagination: ui.pagination } : {}),
+            ...(enableGlobalFilter ? { globalFilter: ui.globalFilter } : {}),
+            ...(enableExpanding ? { expanded: ui.expanded } : {}),
+            ...(enableColumnReordering ? { columnOrder: ui.columnOrder } : {}),
+            ...(enableColumnPinning ? { columnPinning: ui.columnPinning } : {}),
+            ...(enableColumnVisibility ? { columnVisibility: ui.columnVisibility } : {}),
+            ...(enableColumnResizing ? { columnSizing: ui.columnSizing } : {}),
+            ...(enableColumnFilter ? { columnFilter: ui.columnFilter } : {}),
+            ...(enableRowSelection ? { selectionState: ui.selectionState } : {}),
+        },
+        selectMode,
+        enableAdvanceSelection: !!enableRowSelection,
+        isRowSelectable: isRowSelectable,
+        ...(enableRowSelection
+            ? {
+                onSelectionStateChange: (updaterOrValue) => {
+                    dispatch({
+                        type: 'SET_SELECTION',
+                        payload: typeof updaterOrValue === 'function'
+                            ? updaterOrValue(uiRef.current.selectionState)
+                            : updaterOrValue,
+                    });
+                },
+            }
+            : {}),
+        enableAdvanceColumnFilter: enableColumnFilter,
+        onColumnFilterChange: (updater) => {
+            const next = typeof updater === 'function' ? updater(uiRef.current.columnFilter) : updater;
+            dispatch({ type: 'SET_COLUMN_FILTER', payload: next });
+        },
+        onColumnFilterApply: (state) => {
+            dispatch({ type: 'SET_COLUMN_FILTER_RESET_PAGE', payload: state });
+        },
+        ...(enableSorting
+            ? {
+                onSortingChange: (updaterOrValue) => {
+                    var _a;
+                    const prev = uiRef.current.sorting;
+                    const next = typeof updaterOrValue === 'function' ? updaterOrValue(prev) : updaterOrValue;
+                    const cleaned = (next || []).filter((s) => s === null || s === void 0 ? void 0 : s.id);
+                    (_a = onSortingChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onSortingChangeRef, cleaned);
+                    dispatch({ type: 'SET_SORTING_RESET_PAGE', payload: cleaned });
+                },
+            }
+            : {}),
+        ...(enablePagination
+            ? {
+                onPaginationChange: (updater) => {
+                    var _a;
+                    const prev = uiRef.current.pagination;
+                    const next = typeof updater === 'function' ? updater(prev) : updater;
+                    (_a = onPaginationChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationChangeRef, next);
+                    dispatch({ type: 'SET_PAGINATION', payload: next });
+                },
+            }
+            : {}),
+        ...(enableGlobalFilter
+            ? {
+                onGlobalFilterChange: (updaterOrValue) => {
+                    var _a;
+                    const prev = uiRef.current.globalFilter;
+                    const next = typeof updaterOrValue === 'function' ? updaterOrValue(prev) : updaterOrValue;
+                    (_a = onGlobalFilterChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onGlobalFilterChangeRef, next);
+                    nextFetchDelayRef.current = 400;
+                    dispatch({ type: 'SET_GLOBAL_FILTER_RESET_PAGE', payload: next });
+                },
+            }
+            : {}),
+        ...(enableExpanding
+            ? {
+                onExpandedChange: (u) => {
+                    const prev = uiRef.current.expanded;
+                    const next = typeof u === 'function' ? u(prev) : u;
+                    dispatch({ type: 'SET_EXPANDED', payload: next });
+                },
+            }
+            : {}),
+        ...(enableColumnReordering
+            ? {
+                onColumnOrderChange: (u) => {
+                    var _a;
+                    const prev = uiRef.current.columnOrder;
+                    const next = typeof u === 'function' ? u(prev) : u;
+                    (_a = onColumnOrderChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnOrderChangeRef, next);
+                    dispatch({ type: 'SET_COLUMN_ORDER', payload: next });
+                },
+            }
+            : {}),
+        ...(enableColumnPinning
+            ? {
+                onColumnPinningChange: (u) => {
+                    var _a;
+                    const prev = uiRef.current.columnPinning;
+                    const next = typeof u === 'function' ? u(prev) : u;
+                    (_a = onColumnPinningChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnPinningChangeRef, next);
+                    dispatch({ type: 'SET_COLUMN_PINNING', payload: next });
+                },
+            }
+            : {}),
+        ...(enableColumnVisibility
+            ? {
+                onColumnVisibilityChange: (u) => {
+                    var _a;
+                    const prev = uiRef.current.columnVisibility;
+                    const next = typeof u === 'function' ? u(prev) : u;
+                    (_a = onColumnVisibilityChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnVisibilityChangeRef, next);
+                    dispatch({ type: 'SET_COLUMN_VISIBILITY', payload: next });
+                },
+            }
+            : {}),
+        ...(enableColumnResizing
+            ? {
+                onColumnSizingChange: (u) => {
+                    var _a;
+                    const prev = uiRef.current.columnSizing;
+                    const next = typeof u === 'function' ? u(prev) : u;
+                    (_a = onColumnSizingChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnSizingChangeRef, next);
+                    dispatch({ type: 'SET_COLUMN_SIZING', payload: next });
+                },
+            }
+            : {}),
+        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
+        ...(enableSorting ? { getSortedRowModel: (0, react_table_1.getSortedRowModel)() } : {}),
+        ...(enableColumnFilter || enableGlobalFilter ? { getFilteredRowModel: (0, features_1.getCombinedFilteredRowModel)() } : {}),
+        ...(enablePagination && !isServerPagination ? { getPaginationRowModel: (0, react_table_1.getPaginationRowModel)() } : {}),
+        enableSorting,
+        manualSorting: isServerSorting,
+        manualFiltering: isServerFiltering,
+        enableColumnResizing,
+        columnResizeMode,
+        columnResizeDirection: theme.direction,
+        enableColumnPinning,
+        ...(enableExpanding ? { getRowCanExpand: getRowCanExpand } : {}),
+        manualPagination: isServerPagination,
+        autoResetPageIndex: false,
+        rowCount: enablePagination ? tableTotalRow !== null && tableTotalRow !== void 0 ? tableTotalRow : tableData.length : tableData.length,
+        getRowId,
+    });
+    const rows = table.getRowModel().rows;
+    const shouldVirtualize = enableVirtualization && rows.length > 0;
+    const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
+        count: rows.length,
+        getScrollElement: () => tableContainerRef.current,
+        estimateSize: () => estimateRowHeight,
+        overscan: 8,
+        enabled: shouldVirtualize,
+    });
+    const serverKey = (0, react_1.useMemo)(() => {
+        if (!(isServerMode || isServerPagination || isServerFiltering || isServerSorting))
+            return null;
+        return JSON.stringify({
+            sorting: ui.sorting,
+            pagination: ui.pagination,
+            globalFilter: ui.globalFilter,
+            columnFilter: { filters: ui.columnFilter.filters, logic: ui.columnFilter.logic },
+        });
+    }, [isServerMode, isServerPagination, isServerFiltering, isServerSorting, ui.sorting, ui.pagination, ui.globalFilter, ui.columnFilter]);
+    const serverKeyRef = useLatestRef(serverKey);
+    const lastServerKeyRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!initialLoadData)
+            return;
+        if (serverKeyRef.current)
+            lastServerKeyRef.current = serverKeyRef.current;
+        if (onFetchData || onFetchStateChange) {
+            void fetchData({}, { delay: 0, meta: { reason: 'initial' } });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!serverKey)
+            return;
+        if (serverKey === lastServerKeyRef.current)
+            return;
+        lastServerKeyRef.current = serverKey;
+        const delay = (_a = nextFetchDelayRef.current) !== null && _a !== void 0 ? _a : 0;
+        nextFetchDelayRef.current = 0;
+        const timeoutId = setTimeout(() => {
+            log.debug('stateChange fetch', delay);
+            void fetchData({}, { delay, meta: { reason: 'state-change' } });
+        }, 0);
+        return () => clearTimeout(timeoutId);
+    }, [serverKey, fetchData, log]);
+    const handleColumnFilterChangeHandler = (0, react_1.useCallback)((updater, isApply = false) => {
+        var _a;
+        const prev = uiRef.current.columnFilter;
+        const next = typeof updater === 'function' ? updater(prev) : updater;
+        if (isApply) {
+            nextFetchDelayRef.current = 0;
+            dispatch({ type: 'SET_COLUMN_FILTER_RESET_PAGE', payload: next });
+        }
+        else {
+            dispatch({ type: 'SET_COLUMN_FILTER', payload: next });
+        }
+        (_a = onColumnFilterChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnFilterChangeRef, next, isApply);
+    }, [onColumnFilterChangeRef, uiRef]);
+    (0, react_1.useEffect)(() => {
+        const cb = onDataStateChangeRef.current;
+        if (!cb)
+            return;
+        const live = table.getState();
+        const payload = {
+            sorting: live.sorting,
+            pagination: live.pagination,
+            globalFilter: live.globalFilter,
+            columnFilter: live.columnFilter,
+            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;
+        cb(payload);
+    }, [table, ui.sorting, ui.pagination, ui.globalFilter, ui.columnFilter, ui.columnVisibility, ui.columnSizing, ui.columnOrder, ui.columnPinning, onDataStateChangeRef]);
+    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 triggerRefresh = (0, react_1.useCallback)(async (options, fallbackReason = 'refresh') => {
+        var _a;
+        const n = normalizeRefreshOptions(options, fallbackReason);
+        const current = uiRef.current.pagination;
+        const nextPagination = enablePagination
+            ? { pageIndex: n.resetPagination ? 0 : current.pageIndex, pageSize: current.pageSize }
+            : undefined;
+        if (nextPagination) {
+            nextFetchDelayRef.current = 0;
+            dispatch({ type: 'SET_PAGINATION', payload: nextPagination });
+            (_a = onPaginationChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationChangeRef, nextPagination);
+        }
+        const paginationChanged = !!nextPagination &&
+            (nextPagination.pageIndex !== current.pageIndex || nextPagination.pageSize !== current.pageSize);
+        if (!paginationChanged) {
+            await fetchData({}, { delay: 0, meta: { reason: n.reason, force: n.force } });
+        }
+    }, [enablePagination, fetchData, normalizeRefreshOptions, onPaginationChangeRef, uiRef]);
+    const getResetPayload = (0, react_1.useCallback)(() => {
+        var _a, _b, _c;
+        const resetPagination = enablePagination
+            ? initialStateConfig.pagination || { pageIndex: 0, pageSize: 10 }
+            : uiRef.current.pagination;
+        return {
+            sorting: initialStateConfig.sorting || [],
+            globalFilter: (_a = initialStateConfig.globalFilter) !== null && _a !== void 0 ? _a : '',
+            columnFilter: ((_b = initialStateConfig.columnFilter) !== null && _b !== void 0 ? _b : DEFAULT_INITIAL_STATE.columnFilter),
+            ...(enablePagination ? { pagination: resetPagination } : {}),
+            selectionState: (_c = initialStateConfig.selectionState) !== null && _c !== void 0 ? _c : DEFAULT_INITIAL_STATE.selectionState,
+            expanded: {},
+            columnVisibility: initialStateConfig.columnVisibility || {},
+            columnSizing: initialStateConfig.columnSizing || {},
+            columnOrder: initialStateConfig.columnOrder || [],
+            columnPinning: initialStateConfig.columnPinning || { left: [], right: [] },
+        };
+    }, [enablePagination, initialStateConfig, uiRef]);
+    const resetAllAndReload = (0, react_1.useCallback)(() => {
+        const payload = getResetPayload();
+        dispatch({ type: 'RESET_ALL', payload });
+        void fetchData({
+            sorting: payload.sorting,
+            globalFilter: payload.globalFilter,
+            columnFilter: payload.columnFilter,
+            ...(enablePagination ? { pagination: payload.pagination } : {}),
+        }, { delay: 0, meta: { reason: 'reset', force: true } });
+    }, [enablePagination, fetchData, getResetPayload]);
+    // --- export policy
+    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)((p) => {
+        var _a;
+        setExportProgress(p || {});
+        (_a = onExportProgressRef.current) === null || _a === void 0 ? void 0 : _a.call(onExportProgressRef, p);
+    }, [onExportProgressRef]);
+    const handleExportStateChangeInternal = (0, react_1.useCallback)((s) => {
+        var _a;
+        setExportPhase(s.phase);
+        if (s.processedRows !== undefined || s.totalRows !== undefined || s.percentage !== undefined) {
+            setExportProgress({ processedRows: s.processedRows, totalRows: s.totalRows, percentage: s.percentage });
+        }
+        (_a = onExportStateChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onExportStateChangeRef, s);
+    }, [onExportStateChangeRef]);
+    const runExportWithPolicy = (0, react_1.useCallback)(async (options) => {
+        var _a;
+        const { format, filename, mode, execute } = options;
+        const startExecution = async () => {
+            const controller = new AbortController();
+            setExportProgress({});
+            setExportControllerSafely(controller);
+            try {
+                await execute(controller);
+            }
+            finally {
+                setExportControllerSafely((cur) => (cur === controller ? null : cur));
+            }
+        };
+        if (exportConcurrency === 'queue') {
+            setQueuedExportCount((p) => p + 1);
+            const runQueued = async () => {
+                setQueuedExportCount((p) => Math.max(0, p - 1));
+                await startExecution();
+            };
+            const queuedPromise = exportQueueRef.current.catch(() => undefined).then(runQueued);
+            exportQueueRef.current = queuedPromise;
+            return queuedPromise;
+        }
+        const active = exportControllerRef.current;
+        if (active) {
+            if (exportConcurrency === 'ignoreIfRunning') {
+                handleExportStateChangeInternal({
+                    phase: 'error',
+                    mode,
+                    format,
+                    filename,
+                    message: 'An export is already running',
+                    code: 'EXPORT_IN_PROGRESS',
+                });
+                (_a = onExportErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onExportErrorRef, { message: 'An export is already running', code: 'EXPORT_IN_PROGRESS' });
+                return;
+            }
+            if (exportConcurrency === 'cancelAndRestart')
+                active.abort();
+        }
+        await startExecution();
+    }, [exportConcurrency, handleExportStateChangeInternal, onExportErrorRef, setExportControllerSafely]);
+    const handleCancelExport = (0, react_1.useCallback)(() => {
+        var _a;
+        const active = exportControllerRef.current;
+        if (!active)
+            return;
+        active.abort();
+        setExportControllerSafely((cur) => (cur === active ? null : cur));
+        (_a = onExportCancelRef.current) === null || _a === void 0 ? void 0 : _a.call(onExportCancelRef);
+    }, [onExportCancelRef, setExportControllerSafely]);
+    const isExporting = exportController !== null;
+    // --- stable API (created once, methods read latest via refs)
+    if (!apiRef.current) {
+        apiRef.current = {};
+    }
+    const tableRef = useLatestRef(table);
+    (0, react_1.useEffect)(() => {
+        const api = apiRef.current;
+        api.table = { getTable: () => tableRef.current };
+        api.state = {
+            getTableState: () => tableRef.current.getState(),
+            getCurrentFilters: () => tableRef.current.getState().columnFilter,
+            getCurrentSorting: () => tableRef.current.getState().sorting,
+            getCurrentPagination: () => tableRef.current.getState().pagination,
+            getCurrentSelection: () => uiRef.current.selectionState,
+            getGlobalFilter: () => tableRef.current.getState().globalFilter,
+        };
+        const getBaseData = () => {
+            const sData = serverDataRef.current;
+            return sData !== null ? sData : dataRef.current;
+        };
+        const getRowIndexById = (arr, rowId) => arr.findIndex((row, i) => getRowId(row, i) === rowId);
+        api.data = {
+            refresh: (options) => void triggerRefresh(options, 'refresh'),
+            reload: (options = {}) => { var _a; return void triggerRefresh({ ...options, reason: (_a = options.reason) !== null && _a !== void 0 ? _a : 'reload' }, 'reload'); },
+            resetAll: () => resetAllAndReload(),
+            getAllData: () => [...getBaseData()],
+            getRowData: (rowId) => { var _a; return (_a = tableRef.current.getRowModel().rows.find((r) => r.id === rowId)) === null || _a === void 0 ? void 0 : _a.original; },
+            getRowByIndex: (index) => { var _a; return (_a = tableRef.current.getRowModel().rows[index]) === null || _a === void 0 ? void 0 : _a.original; },
+            getDataCount: () => getBaseData().length,
+            getFilteredDataCount: () => tableRef.current.getFilteredRowModel().rows.length,
+            updateRow: (rowId, updates) => {
+                const base = getBaseData();
+                const idx = getRowIndexById(base, rowId);
+                if (idx === -1)
+                    return;
+                const next = [...base];
+                next[idx] = { ...next[idx], ...updates };
+                setServerData(next);
+                setServerTotal(next.length);
+            },
+            updateRowByIndex: (index, updates) => {
+                const base = getBaseData();
+                if (index < 0 || index >= base.length)
+                    return;
+                const next = [...base];
+                next[index] = { ...next[index], ...updates };
+                setServerData(next);
+                setServerTotal(next.length);
+            },
+            insertRow: (newRow, index) => {
+                const base = getBaseData();
+                const next = index == null ? [...base, newRow] : [...base.slice(0, index), newRow, ...base.slice(index)];
+                setServerData(next);
+                setServerTotal(next.length);
+            },
+            deleteRow: (rowId) => {
+                const base = getBaseData();
+                const idx = getRowIndexById(base, rowId);
+                if (idx === -1)
+                    return;
+                const next = base.filter((_, i) => i !== idx);
+                setServerData(next);
+                setServerTotal(next.length);
+            },
+            deleteRowByIndex: (index) => {
+                const base = getBaseData();
+                if (index < 0 || index >= base.length)
+                    return;
+                const next = base.filter((_, i) => i !== index);
+                setServerData(next);
+                setServerTotal(next.length);
+            },
+            deleteSelectedRows: () => {
+                var _a, _b, _c, _d;
+                const state = (_b = (_a = tableRef.current).getSelectionState) === null || _b === void 0 ? void 0 : _b.call(_a);
+                if (!state || state.type !== 'include' || !state.ids.length)
+                    return;
+                const base = getBaseData();
+                const ids = new Set(state.ids);
+                const next = base.filter((row, i) => !ids.has(getRowId(row, i)));
+                setServerData(next);
+                setServerTotal(next.length);
+                (_d = (_c = tableRef.current).deselectAll) === null || _d === void 0 ? void 0 : _d.call(_c);
+            },
+            replaceAllData: (newData) => {
+                setServerData(newData);
+                setServerTotal(newData.length);
+            },
+            updateMultipleRows: (updates) => {
+                const base = getBaseData();
+                const next = [...base];
+                for (const { rowId, data: u } of updates) {
+                    const idx = getRowIndexById(next, rowId);
+                    if (idx !== -1)
+                        next[idx] = { ...next[idx], ...u };
+                }
+                setServerData(next);
+                setServerTotal(next.length);
+            },
+            insertMultipleRows: (newRows, startIndex) => {
+                const base = getBaseData();
+                const idx = startIndex !== null && startIndex !== void 0 ? startIndex : base.length;
+                const next = [...base.slice(0, idx), ...newRows, ...base.slice(idx)];
+                setServerData(next);
+                setServerTotal(next.length);
+            },
+            deleteMultipleRows: (rowIds) => {
+                const ids = new Set(rowIds);
+                const base = getBaseData();
+                const next = base.filter((row, i) => !ids.has(getRowId(row, i)));
+                setServerData(next);
+                setServerTotal(next.length);
+            },
+            updateField: (rowId, fieldName, value) => api.data.updateRow(rowId, { [fieldName]: value }),
+            updateFieldByIndex: (index, fieldName, value) => api.data.updateRowByIndex(index, { [fieldName]: value }),
+            findRows: (predicate) => getBaseData().filter(predicate),
+            findRowIndex: (predicate) => getBaseData().findIndex(predicate),
+        };
+        api.layout = {
+            saveLayout: () => {
+                var _a, _b, _c, _d, _e, _f;
+                const s = tableRef.current.getState();
+                return {
+                    columnVisibility: (_a = s.columnVisibility) !== null && _a !== void 0 ? _a : {},
+                    columnOrder: (_b = s.columnOrder) !== null && _b !== void 0 ? _b : [],
+                    columnSizing: (_c = s.columnSizing) !== null && _c !== void 0 ? _c : {},
+                    columnPinning: (_d = s.columnPinning) !== null && _d !== void 0 ? _d : { left: [], right: [] },
+                    pagination: (_e = s.pagination) !== null && _e !== void 0 ? _e : { pageIndex: 0, pageSize: 10 },
+                    globalFilter: (_f = s.globalFilter) !== null && _f !== void 0 ? _f : '',
+                    columnFilter: s.columnFilter,
+                };
+            },
+            restoreLayout: (layout) => {
+                var _a, _b, _c;
+                if (layout.columnVisibility)
+                    dispatch({ type: 'SET_COLUMN_VISIBILITY', payload: layout.columnVisibility });
+                if (layout.columnOrder) {
+                    dispatch({ type: 'SET_COLUMN_ORDER', payload: layout.columnOrder });
+                    (_a = onColumnOrderChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnOrderChangeRef, layout.columnOrder);
+                }
+                if (layout.columnSizing) {
+                    dispatch({ type: 'SET_COLUMN_SIZING', payload: layout.columnSizing });
+                    (_b = onColumnSizingChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onColumnSizingChangeRef, layout.columnSizing);
+                }
+                if (layout.columnPinning) {
+                    dispatch({ type: 'SET_COLUMN_PINNING', payload: layout.columnPinning });
+                    (_c = onColumnPinningChangeRef.current) === null || _c === void 0 ? void 0 : _c.call(onColumnPinningChangeRef, layout.columnPinning);
+                }
+                if (layout.pagination && enablePagination)
+                    dispatch({ type: 'SET_PAGINATION', payload: layout.pagination });
+                if (layout.globalFilter !== undefined)
+                    dispatch({ type: 'SET_GLOBAL_FILTER_RESET_PAGE', payload: layout.globalFilter });
+                if (layout.columnFilter)
+                    dispatch({ type: 'SET_COLUMN_FILTER', payload: layout.columnFilter });
+            },
+            resetLayout: () => {
+                dispatch({ type: 'SET_COLUMN_VISIBILITY', payload: initialStateConfig.columnVisibility || {} });
+                dispatch({ type: 'SET_COLUMN_ORDER', payload: initialStateConfig.columnOrder || [] });
+                dispatch({ type: 'SET_COLUMN_SIZING', payload: initialStateConfig.columnSizing || {} });
+                dispatch({ type: 'SET_COLUMN_PINNING', payload: initialStateConfig.columnPinning || { left: [], right: [] } });
+                dispatch({ type: 'SET_GLOBAL_FILTER_RESET_PAGE', payload: '' });
+                dispatch({ type: 'SET_COLUMN_FILTER', payload: (initialStateConfig.columnFilter || DEFAULT_INITIAL_STATE.columnFilter) });
+                dispatch({ type: 'SET_SORTING_RESET_PAGE', payload: initialStateConfig.sorting || [] });
+                dispatch({ type: 'SET_PAGINATION', payload: initialStateConfig.pagination || { pageIndex: 0, pageSize: 10 } });
+            },
+            resetAll: () => {
+                api.layout.resetLayout();
+                resetAllAndReload();
+            },
+        };
+        api.sorting = {
+            setSorting: (next) => {
+                var _a;
+                const cleaned = (next || []).filter((s) => s === null || s === void 0 ? void 0 : s.id);
+                (_a = onSortingChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onSortingChangeRef, cleaned);
+                nextFetchDelayRef.current = 0;
+                dispatch({ type: 'SET_SORTING_RESET_PAGE', payload: cleaned });
+            },
+            sortColumn: (columnId, direction) => {
+                var _a;
+                const next = direction === false ? [] : [{ id: columnId, desc: direction === 'desc' }];
+                (_a = onSortingChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onSortingChangeRef, next);
+                nextFetchDelayRef.current = 0;
+                dispatch({ type: 'SET_SORTING_RESET_PAGE', payload: next });
+            },
+            clearSorting: () => {
+                var _a;
+                (_a = onSortingChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onSortingChangeRef, []);
+                nextFetchDelayRef.current = 0;
+                dispatch({ type: 'SET_SORTING_RESET_PAGE', payload: [] });
+            },
+            resetSorting: () => {
+                var _a;
+                const next = (initialStateConfig.sorting || []);
+                (_a = onSortingChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onSortingChangeRef, next);
+                nextFetchDelayRef.current = 0;
+                dispatch({ type: 'SET_SORTING_RESET_PAGE', payload: next });
+            },
+        };
+        api.pagination = {
+            goToPage: (pageIndex) => {
+                var _a;
+                const prev = uiRef.current.pagination;
+                const next = { ...prev, pageIndex };
+                (_a = onPaginationChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationChangeRef, next);
+                nextFetchDelayRef.current = 0;
+                dispatch({ type: 'SET_PAGINATION', payload: next });
+            },
+            nextPage: () => {
+                const prev = uiRef.current.pagination;
+                api.pagination.goToPage(Math.min(prev.pageIndex + 1, Math.max(0, Math.ceil((tableTotalRow !== null && tableTotalRow !== void 0 ? tableTotalRow : 0) / prev.pageSize) - 1)));
+            },
+            previousPage: () => {
+                const prev = uiRef.current.pagination;
+                api.pagination.goToPage(Math.max(0, prev.pageIndex - 1));
+            },
+            setPageSize: (pageSize) => {
+                var _a;
+                const next = { pageIndex: 0, pageSize };
+                (_a = onPaginationChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationChangeRef, next);
+                nextFetchDelayRef.current = 0;
+                dispatch({ type: 'SET_PAGINATION', payload: next });
+            },
+            goToFirstPage: () => api.pagination.goToPage(0),
+            goToLastPage: () => {
+                const prev = uiRef.current.pagination;
+                api.pagination.goToPage(Math.max(0, Math.ceil((tableTotalRow !== null && tableTotalRow !== void 0 ? tableTotalRow : 0) / prev.pageSize) - 1));
+            },
+            resetPagination: () => {
+                var _a;
+                const next = (initialStateConfig.pagination || { pageIndex: 0, pageSize: 10 });
+                (_a = onPaginationChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onPaginationChangeRef, next);
+                nextFetchDelayRef.current = 0;
+                dispatch({ type: 'SET_PAGINATION', payload: next });
+            },
+        };
+        api.filtering = {
+            setGlobalFilter: (filter) => {
+                var _a;
+                (_a = onGlobalFilterChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onGlobalFilterChangeRef, filter);
+                nextFetchDelayRef.current = 400;
+                dispatch({ type: 'SET_GLOBAL_FILTER_RESET_PAGE', payload: filter });
+            },
+            clearGlobalFilter: () => {
+                var _a;
+                (_a = onGlobalFilterChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onGlobalFilterChangeRef, '');
+                nextFetchDelayRef.current = 400;
+                dispatch({ type: 'SET_GLOBAL_FILTER_RESET_PAGE', payload: '' });
+            },
+            setColumnFilters: (filters, isApply = false) => handleColumnFilterChangeHandler(filters, isApply),
+            addColumnFilter: (columnId, operator, value) => { var _a, _b; return (_b = (_a = tableRef.current).addColumnFilter) === null || _b === void 0 ? void 0 : _b.call(_a, columnId, operator, value); },
+            removeColumnFilter: (filterId) => { var _a, _b; return (_b = (_a = tableRef.current).removeColumnFilter) === null || _b === void 0 ? void 0 : _b.call(_a, filterId); },
+            clearAllFilters: () => { var _a, _b; return (_b = (_a = tableRef.current).resetColumnFilter) === null || _b === void 0 ? void 0 : _b.call(_a); },
+            resetFilters: () => {
+                var _a;
+                const reset = ((_a = initialStateConfig.columnFilter) !== null && _a !== void 0 ? _a : DEFAULT_INITIAL_STATE.columnFilter);
+                handleColumnFilterChangeHandler(reset, true);
+            },
+        };
+        api.columnVisibility = {
+            showColumn: (id) => dispatch({ type: 'SET_COLUMN_VISIBILITY', payload: { ...uiRef.current.columnVisibility, [id]: true } }),
+            hideColumn: (id) => dispatch({ type: 'SET_COLUMN_VISIBILITY', payload: { ...uiRef.current.columnVisibility, [id]: false } }),
+            toggleColumn: (id) => {
+                var _a, _b;
+                // Read actual visibility (absent in the map = visible) so the first
+                // toggle on a default-visible column correctly hides it.
+                const isVisible = (_b = (_a = tableRef.current.getColumn(id)) === null || _a === void 0 ? void 0 : _a.getIsVisible()) !== null && _b !== void 0 ? _b : true;
+                dispatch({ type: 'SET_COLUMN_VISIBILITY', payload: { ...uiRef.current.columnVisibility, [id]: !isVisible } });
+            },
+            showAllColumns: () => dispatch({ type: 'SET_COLUMN_VISIBILITY', payload: {} }),
+            hideAllColumns: () => {
+                const all = tableRef.current.getAllLeafColumns().reduce((acc, col) => ({ ...acc, [col.id]: false }), {});
+                dispatch({ type: 'SET_COLUMN_VISIBILITY', payload: all });
+            },
+            resetColumnVisibility: () => dispatch({ type: 'SET_COLUMN_VISIBILITY', payload: initialStateConfig.columnVisibility || {} }),
+        };
+        api.columnOrdering = {
+            setColumnOrder: (next) => {
+                var _a;
+                dispatch({ type: 'SET_COLUMN_ORDER', payload: next });
+                (_a = onColumnOrderChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnOrderChangeRef, next);
+            },
+            moveColumn: (columnId, toIndex) => {
+                var _a;
+                const order = uiRef.current.columnOrder.length ? uiRef.current.columnOrder : tableRef.current.getAllLeafColumns().map((c) => c.id);
+                const from = order.indexOf(columnId);
+                if (from === -1 || toIndex < 0 || toIndex >= order.length)
+                    return;
+                const next = [...order];
+                next.splice(from, 1);
+                next.splice(toIndex, 0, columnId);
+                dispatch({ type: 'SET_COLUMN_ORDER', payload: next });
+                (_a = onColumnOrderChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnOrderChangeRef, next);
+            },
+            resetColumnOrder: () => dispatch({ type: 'SET_COLUMN_ORDER', payload: initialStateConfig.columnOrder || [] }),
+        };
+        api.columnPinning = {
+            pinColumnLeft: (columnId) => {
+                var _a;
+                const cur = uiRef.current.columnPinning;
+                const left = cur.left.includes(columnId) ? cur.left : [...cur.left.filter((id) => id !== columnId), columnId];
+                const right = cur.right.filter((id) => id !== columnId);
+                dispatch({ type: 'SET_COLUMN_PINNING', payload: { left, right } });
+                (_a = onColumnPinningChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnPinningChangeRef, { left, right });
+            },
+            pinColumnRight: (columnId) => {
+                var _a;
+                const cur = uiRef.current.columnPinning;
+                const left = cur.left.filter((id) => id !== columnId);
+                const right = cur.right.includes(columnId) ? cur.right : [...cur.right.filter((id) => id !== columnId), columnId];
+                dispatch({ type: 'SET_COLUMN_PINNING', payload: { left, right } });
+                (_a = onColumnPinningChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnPinningChangeRef, { left, right });
+            },
+            unpinColumn: (columnId) => {
+                var _a;
+                const cur = uiRef.current.columnPinning;
+                const left = cur.left.filter((id) => id !== columnId);
+                const right = cur.right.filter((id) => id !== columnId);
+                dispatch({ type: 'SET_COLUMN_PINNING', payload: { left, right } });
+                (_a = onColumnPinningChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnPinningChangeRef, { left, right });
+            },
+            setPinning: (next) => {
+                var _a;
+                dispatch({ type: 'SET_COLUMN_PINNING', payload: next });
+                (_a = onColumnPinningChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnPinningChangeRef, next);
+            },
+            resetColumnPinning: () => dispatch({ type: 'SET_COLUMN_PINNING', payload: initialStateConfig.columnPinning || { left: [], right: [] } }),
+        };
+        api.columnResizing = {
+            resizeColumn: (columnId, width) => {
+                var _a;
+                const cur = uiRef.current.columnSizing;
+                dispatch({ type: 'SET_COLUMN_SIZING', payload: { ...cur, [columnId]: width } });
+                (_a = onColumnSizingChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnSizingChangeRef, { ...cur, [columnId]: width });
+            },
+            autoSizeColumn: () => undefined,
+            autoSizeAllColumns: () => undefined,
+            resetColumnSizing: () => dispatch({ type: 'SET_COLUMN_SIZING', payload: initialStateConfig.columnSizing || {} }),
+        };
+        api.selection = {
+            selectRow: (rowId) => { var _a, _b; return (_b = (_a = tableRef.current).selectRow) === null || _b === void 0 ? void 0 : _b.call(_a, rowId); },
+            deselectRow: (rowId) => { var _a, _b; return (_b = (_a = tableRef.current).deselectRow) === null || _b === void 0 ? void 0 : _b.call(_a, rowId); },
+            toggleRowSelection: (rowId) => { var _a, _b; return (_b = (_a = tableRef.current).toggleRowSelected) === null || _b === void 0 ? void 0 : _b.call(_a, rowId); },
+            selectAll: () => { var _a, _b; return (_b = (_a = tableRef.current).selectAll) === null || _b === void 0 ? void 0 : _b.call(_a); },
+            deselectAll: () => { var _a, _b; return (_b = (_a = tableRef.current).deselectAll) === null || _b === void 0 ? void 0 : _b.call(_a); },
+            toggleSelectAll: () => { var _a, _b; return (_b = (_a = tableRef.current).toggleAllRowsSelected) === null || _b === void 0 ? void 0 : _b.call(_a); },
+            getSelectionState: () => { var _a, _b; return ((_b = (_a = tableRef.current).getSelectionState) === null || _b === void 0 ? void 0 : _b.call(_a)) || { ids: [], type: 'include' }; },
+            getSelectedRows: () => tableRef.current.getSelectedRows(),
+            getSelectedCount: () => tableRef.current.getSelectedCount(),
+            isRowSelected: (rowId) => tableRef.current.getIsRowSelected(rowId) || false,
+        };
+        api.export = {
+            exportCSV: async (options = {}) => {
+                var _a;
+                const fn = (_a = options.filename) !== null && _a !== void 0 ? _a : exportFilename;
+                const mode = dataMode === 'server' && !!onServerExportRef.current ? 'server' : 'client';
+                await runExportWithPolicy({
+                    format: 'csv',
+                    filename: fn,
+                    mode,
+                    execute: async (controller) => {
+                        var _a, _b, _c, _d, _e;
+                        const common = {
+                            format: 'csv',
+                            filename: fn,
+                            onProgress: handleExportProgressInternal,
+                            onComplete: onExportCompleteRef.current,
+                            onError: onExportErrorRef.current,
+                            onStateChange: (s) => handleExportStateChangeInternal({ ...s, mode, format: 'csv', filename: fn }),
+                            signal: controller.signal,
+                            sanitizeCSV: (_a = options.sanitizeCSV) !== null && _a !== void 0 ? _a : exportSanitizeCSV,
+                        };
+                        if (mode === 'server' && onServerExportRef.current) {
+                            await (0, utils_1.exportServerData)(tableRef.current, {
+                                ...common,
+                                fetchData: (filters, selection, signal) => { var _a; return (_a = onServerExportRef.current) === null || _a === void 0 ? void 0 : _a.call(onServerExportRef, filters, selection, signal); },
+                                currentFilters: curateExportFilters(tableRef.current.getState()),
+                                selection: (_c = (_b = tableRef.current).getSelectionState) === null || _c === void 0 ? void 0 : _c.call(_b),
+                                chunkSize: (_d = options.chunkSize) !== null && _d !== void 0 ? _d : exportChunkSize,
+                                strictTotalCheck: (_e = options.strictTotalCheck) !== null && _e !== void 0 ? _e : exportStrictTotalCheck,
+                            });
+                            return;
+                        }
+                        await (0, utils_1.exportClientData)(tableRef.current, common);
+                    },
+                });
+            },
+            exportExcel: async (options = {}) => {
+                var _a;
+                const fn = (_a = options.filename) !== null && _a !== void 0 ? _a : exportFilename;
+                const mode = dataMode === 'server' && !!onServerExportRef.current ? 'server' : 'client';
+                await runExportWithPolicy({
+                    format: 'excel',
+                    filename: fn,
+                    mode,
+                    execute: async (controller) => {
+                        var _a, _b, _c, _d, _e;
+                        const common = {
+                            format: 'excel',
+                            filename: fn,
+                            onProgress: handleExportProgressInternal,
+                            onComplete: onExportCompleteRef.current,
+                            onError: onExportErrorRef.current,
+                            onStateChange: (s) => handleExportStateChangeInternal({ ...s, mode, format: 'excel', filename: fn }),
+                            signal: controller.signal,
+                            sanitizeCSV: (_a = options.sanitizeCSV) !== null && _a !== void 0 ? _a : exportSanitizeCSV,
+                        };
+                        if (mode === 'server' && onServerExportRef.current) {
+                            await (0, utils_1.exportServerData)(tableRef.current, {
+                                ...common,
+                                fetchData: (filters, selection, signal) => { var _a; return (_a = onServerExportRef.current) === null || _a === void 0 ? void 0 : _a.call(onServerExportRef, filters, selection, signal); },
+                                currentFilters: curateExportFilters(tableRef.current.getState()),
+                                selection: (_c = (_b = tableRef.current).getSelectionState) === null || _c === void 0 ? void 0 : _c.call(_b),
+                                chunkSize: (_d = options.chunkSize) !== null && _d !== void 0 ? _d : exportChunkSize,
+                                strictTotalCheck: (_e = options.strictTotalCheck) !== null && _e !== void 0 ? _e : exportStrictTotalCheck,
+                            });
+                            return;
+                        }
+                        await (0, utils_1.exportClientData)(tableRef.current, common);
+                    },
+                });
+            },
+            exportServerData: async (options) => {
+                const { format, filename: fn = exportFilename, fetchData: customFetchData } = options;
+                await runExportWithPolicy({
+                    format,
+                    filename: fn,
+                    mode: 'server',
+                    execute: async (controller) => {
+                        var _a, _b, _c, _d, _e;
+                        await (0, utils_1.exportServerData)(tableRef.current, {
+                            format,
+                            filename: fn,
+                            fetchData: customFetchData,
+                            currentFilters: curateExportFilters(tableRef.current.getState()),
+                            selection: (_b = (_a = tableRef.current).getSelectionState) === null || _b === void 0 ? void 0 : _b.call(_a),
+                            onProgress: handleExportProgressInternal,
+                            onComplete: onExportCompleteRef.current,
+                            onError: onExportErrorRef.current,
+                            onStateChange: (s) => handleExportStateChangeInternal({ ...s, mode: 'server', format, filename: fn }),
+                            signal: controller.signal,
+                            chunkSize: (_c = options.chunkSize) !== null && _c !== void 0 ? _c : exportChunkSize,
+                            strictTotalCheck: (_d = options.strictTotalCheck) !== null && _d !== void 0 ? _d : exportStrictTotalCheck,
+                            sanitizeCSV: (_e = options.sanitizeCSV) !== null && _e !== void 0 ? _e : exportSanitizeCSV,
+                        });
+                    },
+                });
+            },
+            isExporting: () => exportControllerRef.current != null,
+            cancelExport: () => handleCancelExport(),
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dataMode, exportChunkSize, exportFilename, exportSanitizeCSV, exportStrictTotalCheck, fetchData, handleCancelExport, handleColumnFilterChangeHandler, handleExportProgressInternal, handleExportStateChangeInternal, initialStateConfig, resetAllAndReload, runExportWithPolicy, triggerRefresh, tableTotalRow, getRowId, tableRef, uiRef, serverDataRef, dataRef, enablePagination]);
+    const handleColumnReorder = (0, react_1.useCallback)((draggedId, targetId) => {
+        var _a;
+        const currentOrder = uiRef.current.columnOrder.length > 0
+            ? uiRef.current.columnOrder
+            : enhancedColumns.map((c, idx) => { var _a, _b; return (_b = (_a = c.id) !== null && _a !== void 0 ? _a : c.accessorKey) !== null && _b !== void 0 ? _b : `column_${idx}`; });
+        const from = currentOrder.indexOf(draggedId);
+        const to = currentOrder.indexOf(targetId);
+        if (from === -1 || to === -1)
+            return;
+        const next = [...currentOrder];
+        next.splice(from, 1);
+        next.splice(to, 0, draggedId);
+        dispatch({ type: 'SET_COLUMN_ORDER', payload: next });
+        (_a = onColumnOrderChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnOrderChangeRef, next);
+    }, [enhancedColumns, onColumnOrderChangeRef, uiRef]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = onSelectionChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onSelectionChangeRef, ui.selectionState);
+    }, [onSelectionChangeRef, ui.selectionState]);
+    return {
+        table,
+        refs: { tableContainerRef, apiRef, exportControllerRef },
+        derived: {
+            isServerMode,
+            isServerPagination,
+            isServerFiltering,
+            isServerSorting,
+            tableData,
+            tableTotalRow,
+            tableLoading,
+            rows,
+            visibleLeafColumns: table.getVisibleLeafColumns,
+            fitToScreen,
+            density: controlledDensity !== null && controlledDensity !== void 0 ? controlledDensity : ui.density,
+            isExporting,
+            exportPhase,
+            exportProgress,
+            isSomeRowsSelected,
+            selectedRowCount,
+        },
+        state: ui,
+        actions: {
+            fetchData,
+            handleColumnFilterChangeHandler,
+            handleColumnReorder,
+            resetAllAndReload,
+            triggerRefresh,
+            setDensity: (density) => dispatch({ type: 'SET_DENSITY', payload: density }),
+            handleCancelExport,
+            renderRowModel: { rowVirtualizer },
+        },
+        api: apiRef.current,
+    };
+}