@ackplus/react-tanstack-data-table 1.1.11 → 1.1.13

package/dist/lib/utils/export-utils.js

@@ -36,6 +36,135 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.exportClientData = exportClientData;
 exports.exportServerData = exportServerData;
 const XLSX = __importStar(require("xlsx"));
+const EXPORT_CANCELLED_CODE = 'CANCELLED';
+const DEFAULT_CHUNK_SIZE = 1000;
+const MAX_SERVER_EXPORT_PAGES = 10000;
+function createCancelledExportError() {
+    const error = new Error('Export cancelled');
+    error.name = 'AbortError';
+    error.code = EXPORT_CANCELLED_CODE;
+    return error;
+}
+function isCancelledError(error) {
+    if (!(error instanceof Error))
+        return false;
+    return error.name === 'AbortError' || error.code === EXPORT_CANCELLED_CODE;
+}
+function throwIfExportCancelled(signal) {
+    if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+        throw createCancelledExportError();
+    }
+}
+function waitWithAbort(ms, signal) {
+    if (!signal) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+    return new Promise((resolve, reject) => {
+        const timer = setTimeout(() => {
+            signal.removeEventListener('abort', onAbort);
+            resolve();
+        }, ms);
+        const onAbort = () => {
+            clearTimeout(timer);
+            signal.removeEventListener('abort', onAbort);
+            reject(createCancelledExportError());
+        };
+        signal.addEventListener('abort', onAbort, { once: true });
+    });
+}
+function notifyState(onStateChange, state) {
+    onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(state);
+}
+function isServerExportDataResult(result) {
+    return (!!result
+        && typeof result === 'object'
+        && 'data' in result
+        && Array.isArray(result.data));
+}
+function isServerExportBlobResult(result) {
+    return (!!result
+        && typeof result === 'object'
+        && 'blob' in result
+        && result.blob instanceof Blob);
+}
+function isServerExportFileUrlResult(result) {
+    return (!!result
+        && typeof result === 'object'
+        && typeof result.fileUrl === 'string');
+}
+function resolveExportHeader(columnDef, columnId) {
+    var _a;
+    const defaultHeader = typeof (columnDef === null || columnDef === void 0 ? void 0 : columnDef.header) === 'string' ? columnDef.header : columnId;
+    if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.exportHeader) === undefined || (columnDef === null || columnDef === void 0 ? void 0 : columnDef.exportHeader) === null) {
+        return defaultHeader;
+    }
+    if (typeof columnDef.exportHeader === 'function') {
+        return String((_a = columnDef.exportHeader({
+            columnId,
+            defaultHeader,
+            columnDef,
+        })) !== null && _a !== void 0 ? _a : defaultHeader);
+    }
+    return String(columnDef.exportHeader);
+}
+function applyExportValueTransform(columnDef, value, row, rowIndex, columnId) {
+    if (typeof (columnDef === null || columnDef === void 0 ? void 0 : columnDef.exportValue) === 'function') {
+        return columnDef.exportValue({
+            value,
+            row,
+            rowIndex,
+            columnId,
+            columnDef,
+        });
+    }
+    return value;
+}
+function applyExportFormatTransform(columnDef, value, row, rowIndex, columnId) {
+    const format = columnDef === null || columnDef === void 0 ? void 0 : columnDef.exportFormat;
+    if (!format || format === 'auto') {
+        return value;
+    }
+    if (typeof format === 'function') {
+        return format({
+            value,
+            row,
+            rowIndex,
+            columnId,
+            columnDef,
+        });
+    }
+    if (value === null || value === undefined) {
+        return '';
+    }
+    switch (format) {
+        case 'string':
+            return String(value);
+        case 'number':
+            return Number(value);
+        case 'boolean':
+            return Boolean(value);
+        case 'json':
+            return JSON.stringify(value);
+        case 'date':
+            if (value instanceof Date)
+                return value.toISOString();
+            return String(value);
+        default:
+            return value;
+    }
+}
+function normalizeExportValue(value) {
+    if (value === null || value === undefined) {
+        return '';
+    }
+    if (value instanceof Date) {
+        return value.toISOString();
+    }
+    if (typeof value === 'object') {
+        return JSON.stringify(value);
+    }
+    return value;
+}
 /**
  * Export data for client-side tables
  * - If rows are selected, export only selected rows
@@ -43,8 +172,11 @@ const XLSX = __importStar(require("xlsx"));
  * - Only export visible columns
  */
 async function exportClientData(table, options) {
-    const { format, filename, onProgress, onComplete, onError } = options;
+    var _a;
+    const { format, filename, onProgress, onComplete, onError, onStateChange, signal, sanitizeCSV = true } = options;
     try {
+        throwIfExportCancelled(signal);
+        notifyState(onStateChange, { phase: 'starting' });
         // Get selected rows if any are selected
         // const selectedRowIds = Object.keys(table.getState().rowSelection).filter(
         //     key => table.getState().rowSelection[key]
@@ -56,36 +188,64 @@ async function exportClientData(table, options) {
         const hasSelectedRows = selectedRows.length > 0;
         const rowsToExport = hasSelectedRows ? selectedRows : table.getFilteredRowModel().rows;
         // Prepare data for export - get all visible columns and their values, excluding hideInExport columns
-        const exportData = rowsToExport.map((row, index) => {
+        const exportData = [];
+        const visibleColumns = table.getVisibleLeafColumns().filter((col) => col.columnDef.hideInExport !== true);
+        for (let index = 0; index < rowsToExport.length; index++) {
+            throwIfExportCancelled(signal);
+            const row = rowsToExport[index];
             onProgress === null || onProgress === void 0 ? void 0 : onProgress({
                 processedRows: index + 1,
                 totalRows: rowsToExport.length,
                 percentage: Math.round(((index + 1) / rowsToExport.length) * 100),
             });
-            const rowData = {};
-            // Get all visible cells for this row, excluding columns marked as hideInExport
-            row.getVisibleCells().forEach(cell => {
-                const columnDef = cell.column.columnDef;
-                // Skip columns marked as hideInExport
-                if (columnDef.hideInExport === true) {
-                    return;
-                }
-                const header = typeof columnDef.header === 'string' ? columnDef.header : cell.column.id;
-                // Use getValue() - it already handles all formatting
-                rowData[header] = cell.getValue() || '';
+            notifyState(onStateChange, {
+                phase: 'processing',
+                processedRows: index + 1,
+                totalRows: rowsToExport.length,
+                percentage: Math.round(((index + 1) / rowsToExport.length) * 100),
             });
-            return rowData;
-        });
+            const rowData = {};
+            for (const column of visibleColumns) {
+                const columnDef = column.columnDef;
+                const header = resolveExportHeader(columnDef, column.id);
+                const cell = row.getVisibleCells().find((visibleCell) => visibleCell.column.id === column.id);
+                const baseValue = cell ? cell.getValue() : (_a = row === null || row === void 0 ? void 0 : row.original) === null || _a === void 0 ? void 0 : _a[column.id];
+                const transformedValue = applyExportFormatTransform(columnDef, applyExportValueTransform(columnDef, baseValue, row.original, index, column.id), row.original, index, column.id);
+                rowData[header] = normalizeExportValue(transformedValue);
+            }
+            exportData.push(rowData);
+        }
         // Export the data
-        await exportToFile(exportData, format, filename);
+        notifyState(onStateChange, {
+            phase: 'downloading',
+            processedRows: exportData.length,
+            totalRows: exportData.length,
+            percentage: 100,
+        });
+        await exportToFile(exportData, format, filename, signal, sanitizeCSV);
         onComplete === null || onComplete === void 0 ? void 0 : onComplete({
             success: true,
             filename: `${filename}.${format === 'excel' ? 'xlsx' : 'csv'}`,
             totalRows: exportData.length,
         });
+        notifyState(onStateChange, {
+            phase: 'completed',
+            processedRows: exportData.length,
+            totalRows: exportData.length,
+            percentage: 100,
+        });
     }
     catch (error) {
+        if (isCancelledError(error)) {
+            notifyState(onStateChange, { phase: 'cancelled', code: EXPORT_CANCELLED_CODE });
+            return;
+        }
         console.error('Client export failed:', error);
+        notifyState(onStateChange, {
+            phase: 'error',
+            message: error instanceof Error ? error.message : 'Export failed',
+            code: 'CLIENT_EXPORT_ERROR',
+        });
         onError === null || onError === void 0 ? void 0 : onError({
             message: error instanceof Error ? error.message : 'Export failed',
             code: 'CLIENT_EXPORT_ERROR',
@@ -99,49 +259,126 @@ async function exportClientData(table, options) {
  * - Export all returned data (server handles selection/filtering)
  */
 async function exportServerData(table, options) {
-    const { format, filename, fetchData, currentFilters, selection, onProgress, onComplete, onError } = options;
+    var _a, _b, _c, _d;
+    const { format, filename, fetchData, currentFilters, selection, onProgress, onComplete, onError, onStateChange, signal, chunkSize = DEFAULT_CHUNK_SIZE, strictTotalCheck = false, sanitizeCSV = true, } = options;
     try {
+        throwIfExportCancelled(signal);
+        notifyState(onStateChange, { phase: 'starting' });
         // Initial progress
         onProgress === null || onProgress === void 0 ? void 0 : onProgress({});
+        notifyState(onStateChange, { phase: 'fetching' });
         // First, get total count to determine if we need chunking
         const initialResponse = await fetchData({
             ...currentFilters,
             pagination: { pageIndex: 0, pageSize: 1 }
-        }, selection);
-        if (!initialResponse || !initialResponse.data || !Array.isArray(initialResponse.data)) {
+        }, selection, signal);
+        if (isServerExportBlobResult(initialResponse)) {
+            throwIfExportCancelled(signal);
+            const resolvedName = initialResponse.filename || `${filename}.${format === 'excel' ? 'xlsx' : 'csv'}`;
+            notifyState(onStateChange, { phase: 'downloading' });
+            downloadFile(initialResponse.blob, resolvedName, initialResponse.mimeType || initialResponse.blob.type || 'application/octet-stream');
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete({
+                success: true,
+                filename: resolvedName,
+                totalRows: (_a = initialResponse.total) !== null && _a !== void 0 ? _a : 0,
+            });
+            notifyState(onStateChange, { phase: 'completed' });
+            return;
+        }
+        if (isServerExportFileUrlResult(initialResponse)) {
+            throwIfExportCancelled(signal);
+            const resolvedName = initialResponse.filename || `${filename}.${format === 'excel' ? 'xlsx' : 'csv'}`;
+            notifyState(onStateChange, { phase: 'downloading' });
+            await downloadFromUrl(initialResponse.fileUrl, resolvedName, initialResponse.mimeType || 'application/octet-stream', signal);
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete({
+                success: true,
+                filename: resolvedName,
+                totalRows: (_b = initialResponse.total) !== null && _b !== void 0 ? _b : 0,
+            });
+            notifyState(onStateChange, { phase: 'completed' });
+            return;
+        }
+        if (!isServerExportDataResult(initialResponse)) {
             throw new Error('Invalid data received from server');
         }
-        const totalRows = initialResponse.total || initialResponse.data.length;
-        const CHUNK_SIZE = 1000; // Fetch 1000 rows per request
-        const needsChunking = totalRows > CHUNK_SIZE;
+        const totalRows = typeof initialResponse.total === 'number' ? initialResponse.total : initialResponse.data.length;
         let allData = [];
-        if (needsChunking) {
-            // Fetch data in chunks (no progress events during fetching)
-            const totalPages = Math.ceil(totalRows / CHUNK_SIZE);
-            for (let page = 1; page <= totalPages; page++) {
-                // Fetch current chunk
-                const chunkFilters = {
-                    ...currentFilters,
-                    pagination: {
-                        pageIndex: page - 1,
-                        pageSize: CHUNK_SIZE,
-                    },
-                };
-                const chunkResponse = await fetchData(chunkFilters, selection);
-                if (!chunkResponse || !chunkResponse.data || !Array.isArray(chunkResponse.data)) {
-                    throw new Error(`Failed to fetch chunk ${page}`);
-                }
-                allData = [...allData, ...chunkResponse.data];
-                // Small delay to prevent overwhelming the server
-                if (page < totalPages) {
-                    await new Promise(resolve => setTimeout(resolve, 100));
+        const hasTotal = typeof totalRows === 'number' && totalRows >= 0;
+        for (let page = 0; page < MAX_SERVER_EXPORT_PAGES; page++) {
+            throwIfExportCancelled(signal);
+            const chunkFilters = {
+                ...currentFilters,
+                pagination: {
+                    pageIndex: page,
+                    pageSize: chunkSize,
+                },
+            };
+            const chunkResponse = await fetchData(chunkFilters, selection, signal);
+            if (isServerExportBlobResult(chunkResponse)) {
+                throwIfExportCancelled(signal);
+                const resolvedName = chunkResponse.filename || `${filename}.${format === 'excel' ? 'xlsx' : 'csv'}`;
+                notifyState(onStateChange, { phase: 'downloading' });
+                downloadFile(chunkResponse.blob, resolvedName, chunkResponse.mimeType || chunkResponse.blob.type || 'application/octet-stream');
+                onComplete === null || onComplete === void 0 ? void 0 : onComplete({
+                    success: true,
+                    filename: resolvedName,
+                    totalRows: (_c = chunkResponse.total) !== null && _c !== void 0 ? _c : allData.length,
+                });
+                notifyState(onStateChange, { phase: 'completed' });
+                return;
+            }
+            if (isServerExportFileUrlResult(chunkResponse)) {
+                throwIfExportCancelled(signal);
+                const resolvedName = chunkResponse.filename || `${filename}.${format === 'excel' ? 'xlsx' : 'csv'}`;
+                notifyState(onStateChange, { phase: 'downloading' });
+                await downloadFromUrl(chunkResponse.fileUrl, resolvedName, chunkResponse.mimeType || 'application/octet-stream', signal);
+                onComplete === null || onComplete === void 0 ? void 0 : onComplete({
+                    success: true,
+                    filename: resolvedName,
+                    totalRows: (_d = chunkResponse.total) !== null && _d !== void 0 ? _d : allData.length,
+                });
+                notifyState(onStateChange, { phase: 'completed' });
+                return;
+            }
+            if (!isServerExportDataResult(chunkResponse)) {
+                throw new Error(`Failed to fetch chunk ${page + 1}`);
+            }
+            const chunkData = chunkResponse.data;
+            if (chunkData.length === 0) {
+                break;
+            }
+            allData.push(...chunkData);
+            const percentage = hasTotal && totalRows > 0
+                ? Math.min(100, Math.round((allData.length / totalRows) * 100))
+                : undefined;
+            onProgress === null || onProgress === void 0 ? void 0 : onProgress({
+                processedRows: allData.length,
+                totalRows: hasTotal ? totalRows : undefined,
+                percentage,
+            });
+            notifyState(onStateChange, {
+                phase: 'fetching',
+                processedRows: allData.length,
+                totalRows: hasTotal ? totalRows : undefined,
+                percentage,
+            });
+            if (hasTotal) {
+                if (allData.length >= totalRows) {
+                    break;
                 }
             }
+            else if (chunkData.length < chunkSize) {
+                break;
+            }
+            await waitWithAbort(100, signal);
+        }
+        if (hasTotal && allData.length > totalRows) {
+            allData = allData.slice(0, totalRows);
         }
-        else {
-            // Small dataset, use single request
-            allData = initialResponse.data;
+        if (hasTotal && strictTotalCheck && allData.length < totalRows) {
+            throw new Error(`Expected ${totalRows} rows for export but received ${allData.length}`);
         }
+        throwIfExportCancelled(signal);
         // Get visible columns for proper headers and data processing, excluding hideInExport columns
         const visibleColumns = table.getVisibleLeafColumns().filter(col => {
             const columnDef = col.columnDef;
@@ -150,44 +387,59 @@ async function exportServerData(table, options) {
         // Prepare data for export with proper column processing
         const exportData = [];
         for (let index = 0; index < allData.length; index++) {
+            throwIfExportCancelled(signal);
             const rowData = allData[index];
             const exportRow = {};
             visibleColumns.forEach(column => {
-                var _a;
                 const columnId = column.id;
                 const columnDef = column.columnDef;
-                const header = typeof columnDef.header === 'string'
-                    ? columnDef.header
-                    : columnId;
+                const header = resolveExportHeader(columnDef, columnId);
                 // Get value from raw data
                 let value = rowData[columnId];
                 // Apply accessorFn if defined
                 if (column.accessorFn && typeof column.accessorFn === 'function') {
-                    value = ((_a = (column.accessorFn(rowData, index) || '')) === null || _a === void 0 ? void 0 : _a.toString()) || '';
-                }
-                // Convert to string for export
-                if (value === null || value === undefined) {
-                    value = '';
-                }
-                else if (typeof value === 'object') {
-                    value = JSON.stringify(value);
-                }
-                else {
-                    value = String(value);
+                    value = column.accessorFn(rowData, index);
                 }
+                value = applyExportValueTransform(columnDef, value, rowData, index, columnId);
+                value = applyExportFormatTransform(columnDef, value, rowData, index, columnId);
+                value = normalizeExportValue(value);
                 exportRow[header] = value;
             });
             exportData.push(exportRow);
+            if (allData.length > 0) {
+                notifyState(onStateChange, {
+                    phase: 'processing',
+                    processedRows: index + 1,
+                    totalRows: allData.length,
+                    percentage: Math.round(((index + 1) / allData.length) * 100),
+                });
+            }
         }
-        await exportToFile(exportData, format, filename);
+        notifyState(onStateChange, { phase: 'downloading' });
+        await exportToFile(exportData, format, filename, signal, sanitizeCSV);
         onComplete === null || onComplete === void 0 ? void 0 : onComplete({
             success: true,
             filename: `${filename}.${format === 'excel' ? 'xlsx' : 'csv'}`,
             totalRows: exportData.length,
         });
+        notifyState(onStateChange, {
+            phase: 'completed',
+            processedRows: exportData.length,
+            totalRows: exportData.length,
+            percentage: 100,
+        });
     }
     catch (error) {
+        if (isCancelledError(error)) {
+            notifyState(onStateChange, { phase: 'cancelled', code: EXPORT_CANCELLED_CODE });
+            return;
+        }
         console.error('Server export failed:', error);
+        notifyState(onStateChange, {
+            phase: 'error',
+            message: error instanceof Error ? error.message : 'Export failed',
+            code: 'SERVER_EXPORT_ERROR',
+        });
         onError === null || onError === void 0 ? void 0 : onError({
             message: error instanceof Error ? error.message : 'Export failed',
             code: 'SERVER_EXPORT_ERROR',
@@ -197,12 +449,14 @@ async function exportServerData(table, options) {
 /**
  * Export data to file (CSV or Excel)
  */
-async function exportToFile(data, format, filename) {
+async function exportToFile(data, format, filename, signal, sanitizeCSV = true) {
+    throwIfExportCancelled(signal);
     if (data.length === 0) {
         throw new Error('No data to export');
     }
     if (format === 'csv') {
-        const csv = convertToCSV(data);
+        const csv = convertToCSV(data, sanitizeCSV);
+        throwIfExportCancelled(signal);
         downloadFile(csv, `${filename}.csv`, 'text/csv');
     }
     else {
@@ -211,22 +465,28 @@ async function exportToFile(data, format, filename) {
         XLSX.utils.book_append_sheet(workbook, worksheet, 'Data');
         const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
         const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+        throwIfExportCancelled(signal);
         downloadFile(blob, `${filename}.xlsx`, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
     }
 }
 /**
  * Convert data to CSV format
  */
-function convertToCSV(data) {
+function convertToCSV(data, sanitizeCSV) {
     if (data.length === 0)
         return '';
     const headers = Object.keys(data[0]);
     const csvRows = [headers.join(',')];
     for (const row of data) {
         const values = headers.map(header => {
-            const value = row[header] || '';
+            var _a;
+            const rawValue = (_a = row[header]) !== null && _a !== void 0 ? _a : '';
+            const normalizedValue = sanitizeCSV ? sanitizeCSVCellValue(rawValue) : rawValue;
+            const value = normalizedValue === null || normalizedValue === undefined
+                ? ''
+                : String(normalizedValue);
             // Escape quotes and wrap in quotes if contains comma or quote
-            if (typeof value === 'string' && (value.includes(',') || value.includes('"') || value.includes('\n'))) {
+            if (value.includes(',') || value.includes('"') || value.includes('\n')) {
                 return `"${value.replace(/"/g, '""')}"`;
             }
             return value;
@@ -235,6 +495,42 @@ function convertToCSV(data) {
     }
     return csvRows.join('\n');
 }
+function sanitizeCSVCellValue(value) {
+    if (typeof value !== 'string' || value.length === 0) {
+        return value;
+    }
+    const firstCharacter = value[0];
+    if (firstCharacter === '=' || firstCharacter === '+' || firstCharacter === '-' || firstCharacter === '@') {
+        return `'${value}`;
+    }
+    return value;
+}
+async function downloadFromUrl(url, filename, mimeType, signal) {
+    throwIfExportCancelled(signal);
+    try {
+        const response = await fetch(url, { signal });
+        if (!response.ok) {
+            throw new Error(`Failed to download export file from URL (${response.status})`);
+        }
+        const blob = await response.blob();
+        throwIfExportCancelled(signal);
+        downloadFile(blob, filename, mimeType || blob.type || 'application/octet-stream');
+        return;
+    }
+    catch (error) {
+        if (isCancelledError(error)) {
+            throw error;
+        }
+        // Fallback for URLs that block fetch due to CORS - browser handles URL directly.
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        link.style.display = 'none';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+}
 /**
  * Download file to user's device
  */

package/dist/lib/utils/slot-helpers.d.ts

@@ -45,7 +45,7 @@ export declare function validateSlotProps<T, K extends keyof DataTableSlots<T>>(
 /**
  * Helper to create slot props with proper typing
  */
-export declare function createSlotProps<T>(table: any, additionalProps?: Record<string, any>): Record<string, any>;
+export declare function createSlotProps(table: any, additionalProps?: Record<string, any>): Record<string, any>;
 /**
  * Enhanced slot component wrapper that handles all prop merging automatically
  */

package/dist/lib/utils/slot-helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slot-helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/slot-helpers.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"slot-helpers.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/slot-helpers.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,aAAa,EAAiB,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,EACjE,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,EAC7C,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,aAAa,CAAC,GAAG,CAAC,GAC7B,aAAa,CAAC,GAAG,CAAC,CAEpB;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAC1B,YAAY,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACtC,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACnC,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,GACpC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CA2CrB;AAED;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,EAC1E,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,EAC7C,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACnC,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,aAAa,CAAC,GAAG,CAAC,EAC5B,YAAY,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,GACvC;IACC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC9B,CASA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,EACjE,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,EAC7C,QAAQ,EAAE,CAAC,GACZ,OAAO,CAET;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAChC,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,GAC9C,KAAK,CAAC,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC,CAGhC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,EACjE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,EAC1C,QAAQ,EAAE,CAAC,GACZ,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAErB;AAED;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,EAC5E,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,EAC7C,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,aAAa,CAAC,GAAG,CAAC,EAC5B,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,GACpC,aAAa,CAAC,GAAG,CAAC,CAOpB;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,EAClE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,GAAG,EACV,aAAa,GAAE,MAAM,EAAO,GAC7B,OAAO,CAST;AAED;;GAEG;AACH,wBAAgB,eAAe,CAC3B,KAAK,EAAE,GAAG,EACV,eAAe,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,GAC1C,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAKrB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,EAC9D,KAAK,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,EAC7C,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACnC,QAAQ,EAAE,CAAC,EACX,QAAQ,EAAE,aAAa,CAAC,GAAG,CAAC,IAEA,OAAO,GAAG,SAUzC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ackplus/react-tanstack-data-table",
   "type": "commonjs",
-  "version": "1.1.11",
+  "version": "1.1.13",
   "description": "A powerful React data table component built with MUI and TanStack Table",
   "keywords": [
     "react",
@@ -42,7 +42,9 @@
     "src"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json"
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "tsc -p tsconfig.build.json --noEmit",
+    "test": "pnpm run build && node --test tests/column-filter.feature.test.cjs"
   },
   "dependencies": {
     "lodash": "^4.17.21",

package/src/lib/components/droupdown/menu-dropdown.tsx

@@ -36,10 +36,10 @@ export function MenuDropdown({
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
     const isOpen = useMemo(() => Boolean(anchorEl), [anchorEl]);
     const handleClick = useCallback(
-        (event: React.MouseEvent<HTMLButtonElement>) => {
+        (event: React.MouseEvent<HTMLElement>) => {
             event.preventDefault();
             event.stopPropagation();
-            setAnchorEl(event.currentTarget);
+            setAnchorEl(event.currentTarget as HTMLElement);
         },
         [],
     );
@@ -54,8 +54,14 @@ export function MenuDropdown({
             if (typeof anchor === 'function') {
                 node = anchor({ isOpen: isOpen });
             }
+            const existingOnClick = (node as ReactElement<any>).props?.onClick;
             return cloneElement(node as ReactElement<any>, {
-                onClick: handleClick,
+                onClick: (event: React.MouseEvent<HTMLElement>) => {
+                    existingOnClick?.(event);
+                    if (!event.defaultPrevented) {
+                        handleClick(event);
+                    }
+                },
             });
         }
         return <Button onClick={handleClick}>{label as any}</Button>;

package/src/lib/components/filters/filter-value-input.tsx

@@ -100,8 +100,8 @@ export function FilterValueInput<T>(props: FilterValueInputProps<T>): ReactEleme
 
     // Select type with options
     if (options && options.length > 0) {
-        // Multi-select for 'in' operator
-        if (operator === 'in') {
+        // Multi-select for set operators
+        if (operator === 'in' || operator === 'notIn') {
             const currentValue = Array.isArray(filter.value) ? filter.value : [];
             
             return (