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

package/dist/lib/hooks/use-data-table-engine.js

@@ -381,7 +381,10 @@ function useDataTableEngine(props) {
         lastServerKeyRef.current = serverKey;
         const delay = (_a = nextFetchDelayRef.current) !== null && _a !== void 0 ? _a : 0;
         nextFetchDelayRef.current = 0; // reset after using
-        void fetchData({}, { delay, meta: { reason: "stateChange" } });
+        const timeoutId = setTimeout(() => {
+            void fetchData({}, { delay, meta: { reason: "stateChange" } });
+        }, 0);
+        return () => clearTimeout(timeoutId);
     }, [serverKey, fetchData]);
     // columnFilter apply handler stays explicit (button), but you can also auto-fetch on change if needed
     const handleColumnFilterChangeHandler = (0, react_1.useCallback)((updater, isApply = false) => {
@@ -583,21 +586,175 @@ function useDataTableEngine(props) {
             getGlobalFilter: () => tableRef.current.getState().globalFilter,
         };
         // --- data
+        const getBaseData = () => {
+            const sData = serverDataRef.current;
+            return sData !== null ? sData : dataRef.current;
+        };
+        const getRowIndexById = (arr, rowId) => arr.findIndex((row, i) => (0, utils_1.generateRowId)(row, i, idKey) === 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: () => {
-                const sData = serverDataRef.current;
-                const base = sData !== null ? sData : dataRef.current;
-                return [...base];
-            },
-            getDataCount: () => {
-                const sData = serverDataRef.current;
-                const base = sData !== null ? sData : dataRef.current;
-                return base.length;
+            getAllData: () => [...getBaseData()],
+            getRowData: (rowId) => {
+                const rows = tableRef.current.getRowModel().rows;
+                const row = rows.find((r) => r.id === rowId);
+                return row === null || row === void 0 ? void 0 : row.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((0, utils_1.generateRowId)(row, i, idKey)));
+                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((0, utils_1.generateRowId)(row, i, idKey)));
+                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),
+        };
+        // --- layout (save/restore column visibility, order, sizing, pinning)
+        api.layout = {
+            saveLayout: () => {
+                var _a, _b, _c, _d, _e, _f, _g;
+                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: (_g = s.columnFilter) !== null && _g !== void 0 ? _g : [],
+                };
+            },
+            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 = onColumnDragEndRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnDragEndRef, 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: () => {
+                var _a, _b, _c;
+                const vis = initialStateConfig.columnVisibility || {};
+                const order = initialStateConfig.columnOrder || [];
+                const sizing = initialStateConfig.columnSizing || {};
+                const pinning = initialStateConfig.columnPinning || { left: [], right: [] };
+                dispatch({ type: "SET_COLUMN_VISIBILITY", payload: vis });
+                dispatch({ type: "SET_COLUMN_ORDER", payload: order });
+                dispatch({ type: "SET_COLUMN_SIZING", payload: sizing });
+                dispatch({ type: "SET_COLUMN_PINNING", payload: pinning });
+                dispatch({ type: "SET_PAGINATION", payload: { pageIndex: 0, pageSize: 10 } });
+                dispatch({ type: "SET_GLOBAL_FILTER_RESET_PAGE", payload: "" });
+                dispatch({ type: "SET_COLUMN_FILTER", payload: [] });
+                (_a = onColumnDragEndRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnDragEndRef, order);
+                (_b = onColumnSizingChangeRef.current) === null || _b === void 0 ? void 0 : _b.call(onColumnSizingChangeRef, sizing);
+                (_c = onColumnPinningChangeRef.current) === null || _c === void 0 ? void 0 : _c.call(onColumnPinningChangeRef, pinning);
+            },
+            resetAll: () => {
+                api.layout.resetLayout();
+                resetAllAndReload();
+            },
         };
         // --- sorting/pagination/filtering - dispatch + callbacks + server fetch policies
         api.sorting = {
@@ -608,6 +765,13 @@ function useDataTableEngine(props) {
                 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, []);
@@ -631,6 +795,14 @@ function useDataTableEngine(props) {
                 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 };
@@ -638,6 +810,11 @@ function useDataTableEngine(props) {
                 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 });
@@ -660,10 +837,24 @@ function useDataTableEngine(props) {
                 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) => dispatch({ type: "SET_COLUMN_VISIBILITY", payload: { ...uiRef.current.columnVisibility, [id]: !uiRef.current.columnVisibility[id] } }),
+            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 = {
@@ -672,9 +863,45 @@ function useDataTableEngine(props) {
                 dispatch({ type: "SET_COLUMN_ORDER", payload: next });
                 (_a = onColumnDragEndRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnDragEndRef, 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 = onColumnDragEndRef.current) === null || _a === void 0 ? void 0 : _a.call(onColumnDragEndRef, 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 });
@@ -683,16 +910,27 @@ function useDataTableEngine(props) {
             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: (columnId) => { void columnId; /* no-op: would require measure; use reset for default */ },
+            autoSizeAllColumns: () => { },
             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,
-            // keep using your table extension methods if you have them:
-            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); },
         };
         // --- export API (use your existing exportClientData/exportServerData)
         api.export = {
@@ -796,10 +1034,36 @@ function useDataTableEngine(props) {
                     },
                 });
             },
+            exportServerData: async (options) => {
+                const { format, filename: fn = exportFilename, fetchData: customFetchData, chunkSize: cs = exportChunkSize, strictTotalCheck: st = exportStrictTotalCheck, sanitizeCSV: san = exportSanitizeCSV } = options;
+                await runExportWithPolicy({
+                    format,
+                    filename: fn,
+                    mode: "server",
+                    execute: async (controller) => {
+                        var _a, _b;
+                        await (0, utils_1.exportServerData)(tableRef.current, {
+                            format,
+                            filename: fn,
+                            fetchData: customFetchData,
+                            currentFilters: { globalFilter: tableRef.current.getState().globalFilter, columnFilter: tableRef.current.getState().columnFilter, sorting: tableRef.current.getState().sorting, pagination: tableRef.current.getState().pagination },
+                            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, queueLength: queuedExportCount }),
+                            signal: controller.signal,
+                            chunkSize: cs,
+                            strictTotalCheck: st,
+                            sanitizeCSV: san,
+                        });
+                    },
+                });
+            },
             isExporting: () => exportControllerRef.current != null,
             cancelExport: () => handleCancelExport(),
         };
-    }, [dataMode, exportChunkSize, exportFilename, exportSanitizeCSV, exportStrictTotalCheck, fetchData, handleCancelExport, handleColumnFilterChangeHandler, handleExportProgressInternal, handleExportStateChangeInternal, initialStateConfig, isServerMode, isServerPagination, isServerSorting, resetAllAndReload, resetPageToFirst, runExportWithPolicy, triggerRefresh, queuedExportCount, tableRef, uiRef, serverDataRef, dataRef, onSortingChangeRef, onPaginationChangeRef, onGlobalFilterChangeRef, onColumnDragEndRef, onColumnPinningChangeRef, onServerExportRef, onExportCompleteRef, onExportErrorRef]);
+    }, [dataMode, exportChunkSize, exportFilename, exportSanitizeCSV, exportStrictTotalCheck, fetchData, handleCancelExport, handleColumnFilterChangeHandler, handleExportProgressInternal, handleExportStateChangeInternal, initialStateConfig, isServerMode, isServerPagination, isServerSorting, resetAllAndReload, resetPageToFirst, runExportWithPolicy, triggerRefresh, queuedExportCount, tableTotalRow, idKey, tableRef, uiRef, serverDataRef, dataRef, onSortingChangeRef, onPaginationChangeRef, onGlobalFilterChangeRef, onColumnDragEndRef, onColumnPinningChangeRef, onColumnSizingChangeRef, onServerExportRef, onExportCompleteRef, onExportErrorRef]);
     // --- imperative handlers (used by TanStack callbacks above or view)
     const handleSortingChange = (0, react_1.useCallback)((updaterOrValue) => {
         var _a;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ackplus/react-tanstack-data-table",
   "type": "commonjs",
-  "version": "1.1.17",
+  "version": "1.1.19",
   "description": "A powerful React data table component built with MUI and TanStack Table",
   "keywords": [
     "react",