@ackplus/react-tanstack-data-table 1.0.19-beta-0.6

package/lib/hooks/use-data-table-api.js

@@ -0,0 +1,673 @@
+import { useImperativeHandle } from 'react';
+import { exportClientData, exportServerData } from '../utils/export-utils';
+export function useDataTableApi(props, ref) {
+    const { table, data, idKey, globalFilter, customColumnsFilter, sorting, pagination, columnOrder, columnPinning, enhancedColumns, enablePagination, enableColumnPinning, initialPageIndex, initialPageSize, pageSize, 
+    // Selection props
+    selectMode = 'page', onSelectionChange, handleColumnFilterStateChange, onDataStateChange, onFetchData, onDataChange, 
+    // Export props
+    exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, exportController, setExportController, isExporting, dataMode = 'client', } = props;
+    // Note: Custom selection is now handled by TanStack Table CustomSelectionFeature
+    useImperativeHandle(ref, () => ({
+        table: {
+            getTable: () => table,
+        },
+        // Column Management
+        columnVisibility: {
+            showColumn: (columnId) => {
+                table.getColumn(columnId)?.toggleVisibility(true);
+            },
+            hideColumn: (columnId) => {
+                table.getColumn(columnId)?.toggleVisibility(false);
+            },
+            toggleColumn: (columnId) => {
+                table.getColumn(columnId)?.toggleVisibility();
+            },
+            showAllColumns: () => {
+                table.toggleAllColumnsVisible(true);
+            },
+            hideAllColumns: () => {
+                table.toggleAllColumnsVisible(false);
+            },
+            resetColumnVisibility: () => {
+                table.resetColumnVisibility();
+            },
+        },
+        // Column Ordering
+        columnOrdering: {
+            setColumnOrder: (columnOrder) => {
+                table.setColumnOrder(columnOrder);
+            },
+            moveColumn: (columnId, toIndex) => {
+                const currentOrder = table.getState().columnOrder || [];
+                const currentIndex = currentOrder.indexOf(columnId);
+                if (currentIndex === -1)
+                    return;
+                const newOrder = [...currentOrder];
+                newOrder.splice(currentIndex, 1);
+                newOrder.splice(toIndex, 0, columnId);
+                table.setColumnOrder(newOrder);
+            },
+            resetColumnOrder: () => {
+                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}`;
+                });
+                table.setColumnOrder(initialOrder);
+            },
+        },
+        // Column Pinning
+        columnPinning: {
+            pinColumnLeft: (columnId) => {
+                const currentPinning = table.getState().columnPinning;
+                const newPinning = { ...currentPinning };
+                // Remove from right if exists
+                newPinning.right = (newPinning.right || []).filter(id => id !== columnId);
+                // Add to left if not exists
+                newPinning.left = [...(newPinning.left || []).filter(id => id !== columnId), columnId];
+                table.setColumnPinning(newPinning);
+            },
+            pinColumnRight: (columnId) => {
+                const currentPinning = table.getState().columnPinning;
+                const newPinning = { ...currentPinning };
+                // Remove from left if exists
+                newPinning.left = (newPinning.left || []).filter(id => id !== columnId);
+                // Add to right if not exists
+                newPinning.right = [...(newPinning.right || []).filter(id => id !== columnId), columnId];
+                table.setColumnPinning(newPinning);
+            },
+            unpinColumn: (columnId) => {
+                const currentPinning = table.getState().columnPinning;
+                const newPinning = {
+                    left: (currentPinning.left || []).filter(id => id !== columnId),
+                    right: (currentPinning.right || []).filter(id => id !== columnId),
+                };
+                table.setColumnPinning(newPinning);
+            },
+            setPinning: (pinning) => {
+                table.setColumnPinning(pinning);
+            },
+            resetColumnPinning: () => {
+                table.setColumnPinning(table.initialState.columnPinning);
+            },
+        },
+        // Column Resizing
+        columnResizing: {
+            resizeColumn: (columnId, width) => {
+                // Use table's setColumnSizing method
+                const currentSizing = table.getState().columnSizing;
+                table.setColumnSizing({
+                    ...currentSizing,
+                    [columnId]: width,
+                });
+            },
+            autoSizeColumn: (columnId) => {
+                // TanStack doesn't have built-in auto-size, so reset to default
+                table.getColumn(columnId)?.resetSize();
+            },
+            autoSizeAllColumns: () => {
+                table.resetColumnSizing();
+            },
+            resetColumnSizing: () => {
+                table.resetColumnSizing();
+            },
+        },
+        // Filtering
+        filtering: {
+            setGlobalFilter: (filter) => {
+                table.setGlobalFilter(filter);
+            },
+            clearGlobalFilter: () => {
+                table.setGlobalFilter('');
+            },
+            setCustomColumnFilters: (filters) => {
+                handleColumnFilterStateChange(filters);
+            },
+            addColumnFilter: (columnId, operator, value) => {
+                const newFilter = {
+                    id: `filter_${Date.now()}`,
+                    columnId,
+                    operator,
+                    value,
+                };
+                const currentFilters = customColumnsFilter.filters || [];
+                const newFilters = [...currentFilters, newFilter];
+                handleColumnFilterStateChange({
+                    filters: newFilters,
+                    logic: customColumnsFilter.logic,
+                    pendingFilters: customColumnsFilter.pendingFilters || [],
+                    pendingLogic: customColumnsFilter.pendingLogic || 'AND',
+                });
+            },
+            removeColumnFilter: (filterId) => {
+                const currentFilters = customColumnsFilter.filters || [];
+                const newFilters = currentFilters.filter((f) => f.id !== filterId);
+                handleColumnFilterStateChange({
+                    filters: newFilters,
+                    logic: customColumnsFilter.logic,
+                    pendingFilters: customColumnsFilter.pendingFilters || [],
+                    pendingLogic: customColumnsFilter.pendingLogic || 'AND',
+                });
+            },
+            clearAllFilters: () => {
+                table.setGlobalFilter('');
+                handleColumnFilterStateChange({
+                    filters: [],
+                    logic: 'AND',
+                    pendingFilters: [],
+                    pendingLogic: 'AND',
+                });
+            },
+            resetFilters: () => {
+                table.resetGlobalFilter();
+                handleColumnFilterStateChange({
+                    filters: [],
+                    logic: 'AND',
+                    pendingFilters: [],
+                    pendingLogic: 'AND',
+                });
+            },
+        },
+        // Sorting
+        sorting: {
+            setSorting: (sortingState) => {
+                table.setSorting(sortingState);
+            },
+            sortColumn: (columnId, direction) => {
+                const column = table.getColumn(columnId);
+                if (!column)
+                    return;
+                if (direction === false) {
+                    column.clearSorting();
+                }
+                else {
+                    column.toggleSorting(direction === 'desc');
+                }
+            },
+            clearSorting: () => {
+                table.resetSorting();
+            },
+            resetSorting: () => {
+                table.resetSorting();
+            },
+        },
+        // Pagination
+        pagination: {
+            goToPage: (pageIndex) => {
+                table.setPageIndex(pageIndex);
+            },
+            nextPage: () => {
+                table.nextPage();
+            },
+            previousPage: () => {
+                table.previousPage();
+            },
+            setPageSize: (pageSize) => {
+                table.setPageSize(pageSize);
+            },
+            goToFirstPage: () => {
+                table.setPageIndex(0);
+            },
+            goToLastPage: () => {
+                const pageCount = table.getPageCount();
+                if (pageCount > 0) {
+                    table.setPageIndex(pageCount - 1);
+                }
+            },
+        },
+        // Selection methods now use TanStack Table CustomSelectionFeature
+        // Access via table methods: table.selectRow(), table.getIsRowSelected(), etc.
+        selection: {
+            selectRow: (rowId) => table.selectRow?.(rowId),
+            deselectRow: (rowId) => table.deselectRow?.(rowId),
+            toggleRowSelection: (rowId) => table.toggleRowSelected?.(rowId),
+            selectAll: () => table.selectAll?.(),
+            deselectAll: () => table.deselectAll?.(),
+            toggleSelectAll: () => table.toggleAllRowsSelected?.(),
+            getSelectionState: () => table.getSelectionState?.() || { ids: [], type: 'include' },
+            getSelectedRows: () => table.getSelectedRows(),
+            getSelectedCount: () => table.getSelectedCount(),
+            isRowSelected: (rowId) => table.getIsRowSelected(rowId) || false,
+        },
+        // Data Management
+        data: {
+            refresh: () => {
+                // Call external data state change handler to trigger refresh
+                const currentFilters = {
+                    globalFilter,
+                    customColumnsFilter: customColumnsFilter,
+                    sorting,
+                    pagination,
+                };
+                if (onDataStateChange) {
+                    const currentState = {
+                        ...currentFilters,
+                        columnOrder,
+                        columnPinning,
+                    };
+                    onDataStateChange(currentState);
+                }
+                if (onFetchData) {
+                    onFetchData(currentFilters);
+                }
+            },
+            reload: () => {
+                // Same as refresh for now
+                const currentFilters = {
+                    globalFilter,
+                    customColumnsFilter: customColumnsFilter,
+                    sorting,
+                    pagination,
+                };
+                if (onDataStateChange) {
+                    const currentState = {
+                        ...currentFilters,
+                        columnOrder,
+                        columnPinning,
+                    };
+                    onDataStateChange({ ...currentState });
+                }
+                if (onFetchData) {
+                    onFetchData({ ...currentFilters });
+                }
+            },
+            // Data CRUD operations
+            getAllData: () => {
+                return [...data];
+            },
+            getRowData: (rowId) => {
+                return data.find(row => String(row[idKey]) === rowId);
+            },
+            getRowByIndex: (index) => {
+                return data[index];
+            },
+            updateRow: (rowId, updates) => {
+                const newData = data.map(row => String(row[idKey]) === rowId
+                    ? {
+                        ...row,
+                        ...updates,
+                    }
+                    : row);
+                onDataChange?.(newData);
+            },
+            updateRowByIndex: (index, updates) => {
+                const newData = [...data];
+                if (newData[index]) {
+                    newData[index] = {
+                        ...newData[index],
+                        ...updates,
+                    };
+                    onDataChange?.(newData);
+                }
+            },
+            insertRow: (newRow, index) => {
+                const newData = [...data];
+                if (index !== undefined) {
+                    newData.splice(index, 0, newRow);
+                }
+                else {
+                    newData.push(newRow);
+                }
+                onDataChange?.(newData);
+            },
+            deleteRow: (rowId) => {
+                const newData = data.filter(row => String(row[idKey]) !== rowId);
+                onDataChange?.(newData);
+            },
+            deleteRowByIndex: (index) => {
+                const newData = [...data];
+                newData.splice(index, 1);
+                onDataChange?.(newData);
+            },
+            deleteSelectedRows: () => {
+                const selectedRowIds = Object.keys(table.getState().rowSelection)
+                    .filter(key => table.getState().rowSelection[key]);
+                const newData = data.filter(row => !selectedRowIds.includes(String(row[idKey])));
+                onDataChange?.(newData);
+                // Clear selection after deletion
+                table.resetRowSelection();
+            },
+            replaceAllData: (newData) => {
+                onDataChange?.(newData);
+            },
+            // Bulk operations
+            updateMultipleRows: (updates) => {
+                const updateMap = new Map(updates.map(u => [u.rowId, u.data]));
+                const newData = data.map(row => {
+                    const rowId = String(row[idKey]);
+                    const updateData = updateMap.get(rowId);
+                    return updateData ? {
+                        ...row,
+                        ...updateData,
+                    } : row;
+                });
+                onDataChange?.(newData);
+            },
+            insertMultipleRows: (newRows, startIndex) => {
+                const newData = [...data];
+                if (startIndex !== undefined) {
+                    newData.splice(startIndex, 0, ...newRows);
+                }
+                else {
+                    newData.push(...newRows);
+                }
+                onDataChange?.(newData);
+            },
+            deleteMultipleRows: (rowIds) => {
+                const idsToDelete = new Set(rowIds);
+                const newData = data.filter(row => !idsToDelete.has(String(row[idKey])));
+                onDataChange?.(newData);
+            },
+            // Field-specific updates
+            updateField: (rowId, fieldName, value) => {
+                const newData = data.map(row => String(row[idKey]) === rowId
+                    ? {
+                        ...row,
+                        [fieldName]: value,
+                    }
+                    : row);
+                onDataChange?.(newData);
+            },
+            updateFieldByIndex: (index, fieldName, value) => {
+                const newData = [...data];
+                if (newData[index]) {
+                    newData[index] = {
+                        ...newData[index],
+                        [fieldName]: value,
+                    };
+                    onDataChange?.(newData);
+                }
+            },
+            // Data queries
+            findRows: (predicate) => {
+                return data.filter(predicate);
+            },
+            findRowIndex: (predicate) => {
+                return data.findIndex(predicate);
+            },
+            getDataCount: () => {
+                return data.length;
+            },
+            getFilteredDataCount: () => {
+                return table.getFilteredRowModel().rows.length;
+            },
+        },
+        // Layout Management
+        layout: {
+            resetLayout: () => {
+                table.resetColumnSizing();
+                table.resetColumnVisibility();
+                table.resetSorting();
+                table.resetGlobalFilter();
+            },
+            resetAll: () => {
+                // Reset everything to initial state
+                table.resetColumnSizing();
+                table.resetColumnVisibility();
+                table.resetSorting();
+                table.resetGlobalFilter();
+                table.resetColumnOrder();
+                table.resetExpanded();
+                table.resetRowSelection();
+                table.resetColumnPinning();
+                handleColumnFilterStateChange({
+                    filters: [],
+                    logic: 'AND',
+                    pendingFilters: [],
+                    pendingLogic: 'AND',
+                });
+                if (enablePagination) {
+                    table.setPageIndex(initialPageIndex);
+                    table.setPageSize(initialPageSize || pageSize);
+                }
+                if (enableColumnPinning) {
+                    table.setColumnPinning({
+                        left: [],
+                        right: [],
+                    });
+                }
+            },
+            saveLayout: () => {
+                return {
+                    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,
+                    customColumnsFilter: customColumnsFilter,
+                };
+            },
+            restoreLayout: (layout) => {
+                if (layout.columnVisibility) {
+                    table.setColumnVisibility(layout.columnVisibility);
+                }
+                if (layout.columnSizing) {
+                    table.setColumnSizing(layout.columnSizing);
+                }
+                if (layout.columnOrder) {
+                    table.setColumnOrder(layout.columnOrder);
+                }
+                if (layout.columnPinning) {
+                    table.setColumnPinning(layout.columnPinning);
+                }
+                if (layout.sorting) {
+                    table.setSorting(layout.sorting);
+                }
+                if (layout.pagination && enablePagination) {
+                    table.setPagination(layout.pagination);
+                }
+                if (layout.globalFilter !== undefined) {
+                    table.setGlobalFilter(layout.globalFilter);
+                }
+                if (layout.customColumnsFilter) {
+                    handleColumnFilterStateChange(layout.customColumnsFilter);
+                }
+            },
+        },
+        // Table State
+        state: {
+            getTableState: () => {
+                return table.getState();
+            },
+            getCurrentFilters: () => {
+                return customColumnsFilter;
+            },
+            getCurrentSorting: () => {
+                return table.getState().sorting;
+            },
+            getCurrentPagination: () => {
+                return table.getState().pagination;
+            },
+            getCurrentSelection: () => {
+                return Object.keys(table.getState().rowSelection)
+                    .filter(key => table.getState().rowSelection[key]);
+            },
+        },
+        // Simplified Export
+        export: {
+            exportCSV: async (options = {}) => {
+                const { filename = exportFilename, } = options;
+                try {
+                    // Create abort controller for this export
+                    const controller = new AbortController();
+                    setExportController?.(controller);
+                    if (dataMode === 'server' && onServerExport) {
+                        // Server export with selection data
+                        const currentFilters = {
+                            globalFilter,
+                            customColumnsFilter,
+                            sorting,
+                            pagination,
+                            columnOrder,
+                            columnPinning,
+                        };
+                        await exportServerData(table, {
+                            format: 'csv',
+                            filename,
+                            fetchData: (filters, selection) => onServerExport(filters, selection),
+                            currentFilters,
+                            selection: table.getSelectionState?.(),
+                            onProgress: onExportProgress,
+                            onComplete: onExportComplete,
+                            onError: onExportError,
+                        });
+                    }
+                    else {
+                        // Client export - auto-detect selected rows if not specified
+                        await exportClientData(table, {
+                            format: 'csv',
+                            filename,
+                            onProgress: onExportProgress,
+                            onComplete: onExportComplete,
+                            onError: onExportError,
+                        });
+                    }
+                }
+                catch (error) {
+                    onExportError?.({
+                        message: error.message || 'Export failed',
+                        code: 'EXPORT_ERROR',
+                    });
+                }
+                finally {
+                    setExportController?.(null);
+                }
+            },
+            exportExcel: async (options = {}) => {
+                const { filename = exportFilename } = options;
+                try {
+                    // Create abort controller for this export
+                    const controller = new AbortController();
+                    setExportController?.(controller);
+                    if (dataMode === 'server' && onServerExport) {
+                        // Server export with selection data
+                        const currentFilters = {
+                            globalFilter,
+                            customColumnsFilter,
+                            sorting,
+                            pagination,
+                            columnOrder,
+                            columnPinning,
+                        };
+                        await exportServerData(table, {
+                            format: 'excel',
+                            filename,
+                            fetchData: (filters, selection) => onServerExport(filters, selection),
+                            currentFilters,
+                            selection: table.getSelectionState?.(),
+                            onProgress: onExportProgress,
+                            onComplete: onExportComplete,
+                            onError: onExportError,
+                        });
+                    }
+                    else {
+                        // Client export - auto-detect selected rows if not specified
+                        await exportClientData(table, {
+                            format: 'excel',
+                            filename,
+                            onProgress: onExportProgress,
+                            onComplete: onExportComplete,
+                            onError: onExportError,
+                        });
+                    }
+                }
+                catch (error) {
+                    onExportError?.({
+                        message: error.message || 'Export failed',
+                        code: 'EXPORT_ERROR',
+                    });
+                }
+                finally {
+                    setExportController?.(null);
+                }
+            },
+            exportServerData: async (options) => {
+                const { format, filename = exportFilename, fetchData = onServerExport, } = options;
+                if (!fetchData) {
+                    onExportError?.({
+                        message: 'No server export function provided',
+                        code: 'NO_SERVER_EXPORT',
+                    });
+                    return;
+                }
+                try {
+                    // Create abort controller for this export
+                    const controller = new AbortController();
+                    setExportController?.(controller);
+                    const currentFilters = {
+                        globalFilter,
+                        customColumnsFilter,
+                        sorting,
+                        pagination,
+                        columnOrder,
+                        columnPinning,
+                    };
+                    await exportServerData(table, {
+                        format,
+                        filename,
+                        fetchData: (filters, selection) => fetchData(filters, selection),
+                        currentFilters,
+                        selection: table.getSelectionState?.(),
+                        onProgress: onExportProgress,
+                        onComplete: onExportComplete,
+                        onError: onExportError,
+                    });
+                }
+                catch (error) {
+                    onExportError?.({
+                        message: error.message || 'Export failed',
+                        code: 'EXPORT_ERROR',
+                    });
+                }
+                finally {
+                    setExportController?.(null);
+                }
+            },
+            // Export state
+            isExporting: () => isExporting || false,
+            cancelExport: () => {
+                exportController?.abort();
+                setExportController?.(null);
+            },
+        },
+    }), [
+        table,
+        enhancedColumns,
+        handleColumnFilterStateChange,
+        customColumnsFilter,
+        data,
+        idKey,
+        onDataStateChange,
+        onFetchData,
+        globalFilter,
+        sorting,
+        pagination,
+        columnOrder,
+        columnPinning,
+        onDataChange,
+        enableColumnPinning,
+        enablePagination,
+        initialPageIndex,
+        initialPageSize,
+        pageSize,
+        // Export dependencies
+        exportFilename,
+        onExportProgress,
+        onExportComplete,
+        onExportError,
+        onServerExport,
+        exportController,
+        setExportController,
+        isExporting,
+        dataMode,
+        selectMode,
+        onSelectionChange,
+        // Note: custom selection removed from dependency array
+    ]);
+}

package/lib/hooks/use-table-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-table-state.d.ts","sourceRoot":"","sources":["../../../src/lib/hooks/use-table-state.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EACH,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EAClB,MAAM,uBAAuB,CAAC;AAK/B,OAAO,KAAK,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAGjG;;GAEG;AACH,wBAAgB,aAAa,CAAC,OAAO,GAAE,oBAAyB;;;;;;;;;;;EAkF/D"}