@ackplus/react-tanstack-data-table 1.0.19-beta-0.7 → 1.0.19-beta-0.8

package/src/lib/components/toolbar/table-export-control.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableExportControl = TableExportControl;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const menu_dropdown_1 = require("../droupdown/menu-dropdown");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const icons_1 = require("../../icons");
+const export_utils_1 = require("../../utils/export-utils");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function TableExportControl({ exportFilename: propsExportFilename, onServerExport: propsOnServerExport, onExportProgress: propsOnExportProgress, onExportComplete: propsOnExportComplete, onExportError: propsOnExportError, } = {}) {
+    const { table, apiRef, slots, slotProps, dataMode, isExporting, onCancelExport, exportFilename: contextExportFilename, onServerExport: contextOnServerExport, onExportProgress: contextOnExportProgress, onExportComplete: contextOnExportComplete, onExportError: contextOnExportError, } = (0, data_table_context_1.useDataTableContext)();
+    const exportFilename = propsExportFilename || contextExportFilename || 'export';
+    const onServerExport = propsOnServerExport || contextOnServerExport;
+    const onExportProgress = propsOnExportProgress || contextOnExportProgress;
+    const onExportComplete = propsOnExportComplete || contextOnExportComplete;
+    const onExportError = propsOnExportError || contextOnExportError;
+    const ExportIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'exportIcon', icons_material_1.CloudDownloadOutlined);
+    const CsvIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'csvIcon', icons_1.CsvIcon);
+    const ExcelIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'excelIcon', icons_1.ExcelIcon);
+    const handleExport = (format) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+        var _a, _b;
+        try {
+            if (dataMode === 'server' && onServerExport) {
+                const currentState = table.getState();
+                const currentFilters = {
+                    globalFilter: currentState.globalFilter,
+                    sorting: currentState.sorting,
+                    columnFilters: currentState.columnFilters,
+                };
+                const selectionData = (_b = (_a = apiRef === null || apiRef === void 0 ? void 0 : apiRef.current) === null || _a === void 0 ? void 0 : _a.selection) === null || _b === void 0 ? void 0 : _b.getSelectionState();
+                yield (0, export_utils_1.exportServerData)(table, {
+                    format,
+                    filename: exportFilename,
+                    fetchData: (filters, selection) => onServerExport(filters || currentFilters, selection),
+                    currentFilters,
+                    selection: selectionData,
+                    onProgress: onExportProgress,
+                    onComplete: onExportComplete,
+                    onError: onExportError,
+                });
+            }
+            else {
+                yield (0, export_utils_1.exportClientData)(table, {
+                    format,
+                    filename: exportFilename,
+                    onProgress: onExportProgress,
+                    onComplete: onExportComplete,
+                    onError: onExportError,
+                });
+            }
+        }
+        catch (error) {
+            console.error('Export failed:', error);
+            onExportError === null || onExportError === void 0 ? void 0 : onExportError({
+                message: error instanceof Error ? error.message : 'Export failed',
+                code: 'PROCESSING_ERROR',
+            });
+        }
+    });
+    const selectedRowCount = Object.keys(table.getState().rowSelection).filter(key => table.getState().rowSelection[key]).length;
+    const summary = {
+        filteredRows: table.getFilteredRowModel().rows.length,
+        totalColumns: table.getVisibleLeafColumns().filter(col => col.getIsVisible()).length,
+        selectedRows: selectedRowCount,
+        hasSelection: selectedRowCount > 0,
+    };
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Export data", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", disabled: isExporting, sx: {
+                    flexShrink: 0,
+                    color: isExporting ? 'warning.main' : 'text.secondary',
+                }, children: (0, jsx_runtime_1.jsx)(ExportIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.exportIcon)) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                p: 1,
+                minWidth: 280,
+            }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        mb: 2,
+                        p: 1,
+                        bgcolor: 'grey.50',
+                        borderRadius: 1,
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, children: "Export Summary" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: summary.hasSelection
+                                ? `${summary.selectedRows} selected • ${summary.totalColumns} visible columns`
+                                : `${summary.filteredRows} filtered • ${summary.totalColumns} visible columns` }), summary.hasSelection ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "primary.main", sx: { fontWeight: 'medium' }, children: "Will export selected rows only" })) : null] }), isExporting ? ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
+                        onCancelExport === null || onCancelExport === void 0 ? void 0 : onCancelExport();
+                        handleClose();
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExportIconSlot, Object.assign({ fontSize: "small", color: "warning" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.exportIcon)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Cancel Export", secondary: "Stop current export" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                                yield handleExport('csv');
+                                handleClose();
+                            }), disabled: isExporting, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(CsvIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.csvIcon)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Export as CSV", secondary: ".csv format" })] }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                                yield handleExport('excel');
+                                handleClose();
+                            }), disabled: isExporting, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExcelIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.excelIcon)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Export as Excel", secondary: ".xlsx format" })] })] }))] })) }));
+}

package/src/lib/components/toolbar/table-search-control.d.ts

@@ -0,0 +1 @@
+export declare function TableSearchControl(): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/table-search-control.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableSearchControl = TableSearchControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const material_2 = require("@mui/material");
+const material_3 = require("@mui/material");
+const material_4 = require("@mui/material");
+const material_5 = require("@mui/material");
+const react_1 = require("react");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function TableSearchControl() {
+    const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    const [searchVisible, setSearchVisible] = (0, react_1.useState)(false);
+    const searchInputRef = (0, react_1.useRef)(null);
+    const globalFilter = table.getState().globalFilter || '';
+    const hasSearch = globalFilter.length > 0;
+    const SearchIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'searchIcon', icons_material_1.Search);
+    const ClearIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'clearIcon', icons_material_1.Clear);
+    const handleChange = (0, react_1.useCallback)((e) => {
+        table.setGlobalFilter(e.target.value);
+    }, [table]);
+    const handleSearchToggle = () => {
+        if (searchVisible || hasSearch) {
+            setSearchVisible(false);
+            table.setGlobalFilter('');
+        }
+        else {
+            setSearchVisible(true);
+        }
+    };
+    const handleSearchClear = () => {
+        table.setGlobalFilter('');
+        if (searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    };
+    const handleSearchBlur = () => {
+        if (searchVisible && !hasSearch) {
+            setSearchVisible(false);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (searchVisible && searchInputRef.current) {
+            const timer = setTimeout(() => {
+                var _a;
+                (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 200);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [searchVisible]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+        }, children: [!(searchVisible || hasSearch) && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Search", children: (0, jsx_runtime_1.jsx)(material_2.IconButton, { size: "small", onClick: handleSearchToggle, color: hasSearch ? 'primary' : 'default', sx: {
+                        flexShrink: 0,
+                    }, children: (0, jsx_runtime_1.jsx)(SearchIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.searchIcon)) }) })), (0, jsx_runtime_1.jsx)(material_3.Collapse, { in: searchVisible || hasSearch, orientation: "horizontal", children: (0, jsx_runtime_1.jsx)(material_4.OutlinedInput, { inputRef: searchInputRef, placeholder: "Search...", value: globalFilter, onChange: handleChange, size: "small", onBlur: handleSearchBlur, sx: { minWidth: 200 }, endAdornment: hasSearch ? ((0, jsx_runtime_1.jsx)(material_5.InputAdornment, { position: "end", children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Clear search", children: (0, jsx_runtime_1.jsx)(material_2.IconButton, { size: "small", onClick: handleSearchClear, edge: "end", children: (0, jsx_runtime_1.jsx)(ClearIconSlot, Object.assign({ size: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clearIcon)) }) }) })) : null, startAdornment: searchVisible || hasSearch ? ((0, jsx_runtime_1.jsx)(material_5.InputAdornment, { position: "start", children: (0, jsx_runtime_1.jsx)(SearchIconSlot, Object.assign({ size: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.searchIcon)) })) : null }) })] }));
+}

package/src/lib/components/toolbar/table-size-control.d.ts

@@ -0,0 +1 @@
+export declare function TableSizeControl(): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/table-size-control.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableSizeControl = TableSizeControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const menu_dropdown_1 = require("../droupdown/menu-dropdown");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const icons_1 = require("../../icons");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function TableSizeControl() {
+    const { tableSize, onTableSizeChange, slotProps, slots } = (0, data_table_context_1.useDataTableContext)();
+    const TableSizeIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeIcon', icons_material_1.LineWeightOutlined);
+    const TableSizeSmallIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeSmallIcon', icons_1.ViewCompactIcon);
+    const TableSizeMediumIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeMediumIcon', icons_1.ViewComfortableIcon);
+    const SIZE_OPTIONS = [
+        {
+            value: 'small',
+            label: 'Compact',
+            description: 'Small padding, compact rows',
+            icon: (0, jsx_runtime_1.jsx)(TableSizeSmallIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.tableSizeSmallIcon)),
+        },
+        {
+            value: 'medium',
+            label: 'Standard',
+            description: 'Default padding and spacing',
+            icon: (0, jsx_runtime_1.jsx)(TableSizeMediumIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.tableSizeMediumIcon)),
+        },
+    ];
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Table size", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", sx: {
+                    flexShrink: 0,
+                }, children: (0, jsx_runtime_1.jsx)(TableSizeIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.tableSizeIcon)) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: SIZE_OPTIONS.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { selected: tableSize === option.value, onClick: () => {
+                    onTableSizeChange === null || onTableSizeChange === void 0 ? void 0 : onTableSizeChange(option.value);
+                    handleClose();
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: option.icon }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: option.label, secondary: option.description })] }, option.value))) })) }));
+}

package/src/lib/contexts/data-table-context.d.ts

@@ -0,0 +1,43 @@
+import { Table } from '@tanstack/react-table';
+import { ReactNode, RefObject } from 'react';
+import { CustomColumnFilterState, TableSize } from '../types';
+import { DataTableApi } from '../types/data-table-api';
+interface DataTableContextValue<T = any> {
+    table?: Table<T>;
+    apiRef?: RefObject<DataTableApi<T>>;
+    dataMode?: 'client' | 'server';
+    tableSize?: TableSize;
+    onTableSizeChange?: (size: TableSize) => void;
+    customColumnsFilter?: CustomColumnFilterState;
+    onChangeCustomColumnsFilter?: (filter: CustomColumnFilterState) => void;
+    slots?: Record<string, any>;
+    slotProps?: Record<string, any>;
+    isExporting?: boolean;
+    exportController?: AbortController | null;
+    onCancelExport?: () => void;
+    exportFilename?: string;
+    onExportProgress?: (progress: {
+        processedRows: number;
+        totalRows: number;
+        percentage: number;
+    }) => void;
+    onExportComplete?: (result: {
+        success: boolean;
+        filename: string;
+        totalRows: number;
+    }) => void;
+    onExportError?: (error: {
+        message: string;
+        code: string;
+    }) => void;
+    onServerExport?: (filters?: Partial<any>) => Promise<{
+        data: any[];
+        total: number;
+    }>;
+}
+interface DataTableProviderProps<T = any> extends DataTableContextValue<T> {
+    children: ReactNode;
+}
+export declare function DataTableProvider<T = any>({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, customColumnsFilter, onChangeCustomColumnsFilter, slots, slotProps, isExporting, exportController, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }: DataTableProviderProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function useDataTableContext<T = any>(): DataTableContextValue<T>;
+export {};

package/src/lib/contexts/data-table-context.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableProvider = DataTableProvider;
+exports.useDataTableContext = useDataTableContext;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DataTableContext = (0, react_1.createContext)(null);
+function DataTableProvider({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, customColumnsFilter, onChangeCustomColumnsFilter, slots = {}, slotProps = {}, isExporting, exportController, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }) {
+    const value = (0, react_1.useMemo)(() => ({
+        table,
+        apiRef,
+        dataMode,
+        tableSize,
+        onTableSizeChange,
+        customColumnsFilter,
+        onChangeCustomColumnsFilter,
+        slots,
+        slotProps,
+        isExporting,
+        exportController,
+        onCancelExport,
+        exportFilename,
+        onExportProgress,
+        onExportComplete,
+        onExportError,
+        onServerExport,
+    }), [
+        table,
+        apiRef,
+        dataMode,
+        tableSize,
+        onTableSizeChange,
+        customColumnsFilter,
+        onChangeCustomColumnsFilter,
+        slots,
+        slotProps,
+        isExporting,
+        exportController,
+        onCancelExport,
+        exportFilename,
+        onExportProgress,
+        onExportComplete,
+        onExportError,
+        onServerExport,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(DataTableContext.Provider, { value: value, children: children }));
+}
+function useDataTableContext() {
+    const context = (0, react_1.useContext)(DataTableContext);
+    if (!context) {
+        throw new Error('useDataTableContext must be used within a DataTableProvider');
+    }
+    return context;
+}

package/src/lib/examples/advanced-features-example.d.ts

@@ -0,0 +1 @@
+export declare function AdvancedFeaturesExample(): import("react/jsx-runtime").JSX.Element;

package/src/lib/examples/advanced-features-example.js

@@ -0,0 +1,264 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdvancedFeaturesExample = AdvancedFeaturesExample;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const icons_material_1 = require("@mui/icons-material");
+const components_1 = require("../components");
+const generateEmployeeData = () => {
+    const departments = [
+        { id: 1, name: 'Engineering', color: '#2196F3' },
+        { id: 2, name: 'Design', color: '#9C27B0' },
+        { id: 3, name: 'Marketing', color: '#FF9800' },
+        { id: 4, name: 'Sales', color: '#4CAF50' },
+        { id: 5, name: 'HR', color: '#F44336' },
+    ];
+    const positions = ['Senior', 'Mid-level', 'Junior', 'Lead', 'Manager'];
+    const skills = ['React', 'TypeScript', 'Node.js', 'Python', 'Design', 'Analytics', 'Leadership'];
+    const names = ['Alice Johnson', 'Bob Smith', 'Charlie Brown', 'Diana Prince', 'Eva Garcia', 'Frank Miller', 'Grace Lee', 'Henry Davis'];
+    return Array.from({ length: 20 }, (_, index) => {
+        const dept = departments[index % departments.length];
+        const employeeSkills = skills.sort(() => 0.5 - Math.random()).slice(0, Math.floor(Math.random() * 4) + 2);
+        return {
+            id: index + 1,
+            name: names[index % names.length] || `Employee ${index + 1}`,
+            email: `employee${index + 1}@company.com`,
+            avatar: `https://i.pravatar.cc/40?img=${index + 1}`,
+            department: dept,
+            position: `${positions[index % positions.length]} ${dept.name.slice(0, -3)}er`,
+            salary: 60000 + (index * 5000) + Math.floor(Math.random() * 20000),
+            performance: {
+                rating: Math.floor(Math.random() * 5) + 1,
+                trend: ['up', 'down', 'stable'][Math.floor(Math.random() * 3)],
+                score: Math.floor(Math.random() * 40) + 60,
+            },
+            skills: employeeSkills,
+            startDate: new Date(2020 + Math.floor(Math.random() * 4), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toISOString().split('T')[0],
+            isActive: Math.random() > 0.1,
+            projects: Array.from({ length: Math.floor(Math.random() * 3) + 1 }, (_, projIndex) => ({
+                id: projIndex + 1,
+                name: `Project ${String.fromCharCode(65 + projIndex)}`,
+                progress: Math.floor(Math.random() * 100),
+                priority: ['high', 'medium', 'low'][Math.floor(Math.random() * 3)],
+            })),
+            metadata: {
+                lastLogin: new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000).toISOString(),
+                vacationDays: Math.floor(Math.random() * 25),
+                certifications: Math.floor(Math.random() * 8),
+            },
+        };
+    });
+};
+function AdvancedFeaturesExample() {
+    const [employees, setEmployees] = (0, react_1.useState)(generateEmployeeData());
+    const [editingRows, setEditingRows] = (0, react_1.useState)(new Set());
+    const [showAdvancedFeatures, setShowAdvancedFeatures] = (0, react_1.useState)(true);
+    const [showNestedData, setShowNestedData] = (0, react_1.useState)(false);
+    const handleStartEdit = (0, react_1.useCallback)((employeeId) => {
+        setEditingRows(prev => new Set([...prev, employeeId]));
+    }, []);
+    const handleSaveEdit = (0, react_1.useCallback)((employeeId) => {
+        setEditingRows(prev => {
+            const newSet = new Set(prev);
+            newSet.delete(employeeId);
+            return newSet;
+        });
+    }, []);
+    const handleCancelEdit = (0, react_1.useCallback)((employeeId) => {
+        setEditingRows(prev => {
+            const newSet = new Set(prev);
+            newSet.delete(employeeId);
+            return newSet;
+        });
+    }, []);
+    const handleFieldChange = (0, react_1.useCallback)((employeeId, field, value) => {
+        setEmployees(prev => prev.map(emp => emp.id === employeeId
+            ? Object.assign(Object.assign({}, emp), { [field]: value }) : emp));
+    }, []);
+    const NameCell = ({ row }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { src: row.avatar, sx: { width: 32, height: 32 } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", fontWeight: "medium", children: row.name }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", children: row.email })] })] }));
+    const DepartmentCell = ({ row }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: row.department.name, size: "small", sx: {
+            backgroundColor: row.department.color,
+            color: 'white',
+            fontWeight: 'medium',
+        } }));
+    const SalaryCell = ({ row }) => {
+        const isEditing = editingRows.has(row.id);
+        if (isEditing) {
+            return ((0, jsx_runtime_1.jsx)(material_1.TextField, { size: "small", type: "number", value: row.salary, onChange: (e) => handleFieldChange(row.id, 'salary', parseInt(e.target.value)), sx: { width: 120 } }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", fontWeight: "medium", children: ["$", row.salary.toLocaleString()] }));
+    };
+    const PerformanceCell = ({ row }) => {
+        const trendIcon = {
+            up: (0, jsx_runtime_1.jsx)(icons_material_1.TrendingUp, { sx: { color: 'success.main', fontSize: 16 } }),
+            down: (0, jsx_runtime_1.jsx)(icons_material_1.TrendingDown, { sx: { color: 'error.main', fontSize: 16 } }),
+            stable: (0, jsx_runtime_1.jsx)(icons_material_1.Star, { sx: { color: 'warning.main', fontSize: 16 } }),
+        };
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Rating, { value: row.performance.rating, size: "small", readOnly: true }), trendIcon[row.performance.trend], (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", children: [row.performance.score, "%"] })] }));
+    };
+    const SkillsCell = ({ row }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5, maxWidth: 200 }, children: [row.skills.slice(0, 3).map((skill, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: skill, size: "small", variant: "outlined", sx: { fontSize: '0.7rem', height: 20 } }, index))), row.skills.length > 3 && ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: `+${row.skills.length - 3}`, size: "small", variant: "filled", sx: { fontSize: '0.7rem', height: 20 } }))] }));
+    const ProjectsCell = ({ row }) => ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { minWidth: 150 }, children: row.projects.map((project, index) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 0.5 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", fontWeight: "medium", children: project.name }), (0, jsx_runtime_1.jsx)(material_1.Chip, { label: project.priority, size: "small", color: project.priority === 'high' ? 'error' : project.priority === 'medium' ? 'warning' : 'default', sx: { fontSize: '0.6rem', height: 16 } })] }), (0, jsx_runtime_1.jsx)(material_1.LinearProgress, { variant: "determinate", value: project.progress, sx: { height: 4, borderRadius: 2 }, color: project.priority === 'high' ? 'error' : project.priority === 'medium' ? 'warning' : 'primary' })] }, index))) }));
+    const ActionsCell = ({ row }) => {
+        const isEditing = editingRows.has(row.id);
+        if (isEditing) {
+            return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 0.5 }, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Save changes", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handleSaveEdit(row.id), color: "primary", children: (0, jsx_runtime_1.jsx)(icons_material_1.Save, { fontSize: "small" }) }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Cancel editing", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handleCancelEdit(row.id), color: "secondary", children: (0, jsx_runtime_1.jsx)(icons_material_1.Cancel, { fontSize: "small" }) }) })] }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 0.5 }, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Edit employee", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handleStartEdit(row.id), color: "primary", children: (0, jsx_runtime_1.jsx)(icons_material_1.Edit, { fontSize: "small" }) }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Delete employee", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => {
+                            setEmployees(prev => prev.filter(emp => emp.id !== row.id));
+                        }, color: "error", children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, { fontSize: "small" }) }) })] }));
+    };
+    const renderSubComponent = (0, react_1.useCallback)(({ row }) => ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { p: 2, backgroundColor: 'grey.50', borderRadius: 1 }, children: (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { size: { xs: 12, md: 6 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, children: "Contact Information" }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Email:" }), " ", row.email] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Position:" }), " ", row.position] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Start Date:" }), " ", new Date(row.startDate).toLocaleDateString()] })] }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { size: { xs: 12, md: 6 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, children: "Metadata" }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Last Login:" }), " ", new Date(row.metadata.lastLogin).toLocaleDateString()] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Vacation Days:" }), " ", row.metadata.vacationDays] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Certifications:" }), " ", row.metadata.certifications] })] }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { size: { xs: 12 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, children: "All Skills" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 }, children: row.skills.map((skill, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: skill, size: "small", color: "primary", variant: "outlined" }, index))) })] })] }) })), []);
+    const columns = (0, react_1.useMemo)(() => {
+        const baseColumns = [
+            {
+                accessorKey: 'name',
+                header: 'Employee',
+                size: 200,
+                cell: ({ row }) => (0, jsx_runtime_1.jsx)(NameCell, { row: row.original }),
+                enableSorting: true,
+                filterable: true,
+                type: 'text',
+            },
+            {
+                accessorKey: 'department.name',
+                header: 'Department',
+                size: 120,
+                cell: ({ row }) => (0, jsx_runtime_1.jsx)(DepartmentCell, { row: row.original }),
+                enableSorting: true,
+                filterable: true,
+                type: 'select',
+                options: [
+                    { value: 'Engineering', label: 'Engineering' },
+                    { value: 'Design', label: 'Design' },
+                    { value: 'Marketing', label: 'Marketing' },
+                    { value: 'Sales', label: 'Sales' },
+                    { value: 'HR', label: 'HR' },
+                ],
+            },
+            {
+                accessorKey: 'salary',
+                header: 'Salary',
+                size: 120,
+                cell: ({ row }) => (0, jsx_runtime_1.jsx)(SalaryCell, { row: row.original }),
+                enableSorting: true,
+                filterable: true,
+                type: 'number',
+            },
+            {
+                accessorKey: 'startDate',
+                header: 'Start Date',
+                size: 140,
+                enableSorting: true,
+                filterable: true,
+                type: 'date',
+                cell: ({ row }) => ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: new Date(row.original.startDate).toLocaleDateString() })),
+            },
+            {
+                accessorKey: 'performance.rating',
+                header: 'Performance',
+                size: 200,
+                cell: ({ row }) => (0, jsx_runtime_1.jsx)(PerformanceCell, { row: row.original }),
+                enableSorting: true,
+            },
+            {
+                accessorKey: 'skills',
+                header: 'Skills',
+                size: 250,
+                cell: ({ row }) => (0, jsx_runtime_1.jsx)(SkillsCell, { row: row.original }),
+                enableSorting: false,
+            },
+        ];
+        if (showNestedData) {
+            baseColumns.push({
+                accessorKey: 'projects',
+                header: 'Projects',
+                size: 200,
+                cell: ({ row }) => (0, jsx_runtime_1.jsx)(ProjectsCell, { row: row.original }),
+                enableSorting: false,
+            });
+        }
+        if (showAdvancedFeatures) {
+            baseColumns.push({
+                id: 'actions',
+                header: 'Actions',
+                size: 100,
+                cell: ({ row }) => (0, jsx_runtime_1.jsx)(ActionsCell, { row: row.original }),
+                enableSorting: false,
+                filterable: false,
+            });
+        }
+        return baseColumns;
+    }, [showAdvancedFeatures, showNestedData, editingRows]);
+    const addNewEmployee = (0, react_1.useCallback)(() => {
+        const newEmployee = {
+            id: Math.max(...employees.map(e => e.id)) + 1,
+            name: 'New Employee',
+            email: 'new@company.com',
+            avatar: 'https://i.pravatar.cc/40?img=1',
+            department: { id: 1, name: 'Engineering', color: '#2196F3' },
+            position: 'Junior Developer',
+            salary: 60000,
+            performance: { rating: 3, trend: 'stable', score: 75 },
+            skills: ['React'],
+            startDate: new Date().toISOString().split('T')[0],
+            isActive: true,
+            projects: [],
+            metadata: {
+                lastLogin: new Date().toISOString(),
+                vacationDays: 20,
+                certifications: 0,
+            },
+        };
+        setEmployees(prev => [...prev, newEmployee]);
+        handleStartEdit(newEmployee.id);
+    }, [employees, handleStartEdit]);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { p: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", gutterBottom: true, children: "Advanced Features Demo" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", sx: { mb: 3 }, children: "A comprehensive example showcasing inline editing, custom cell renderers, row expansion, dynamic columns, and complex local data operations." }), (0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: { p: 2, mb: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Feature Controls" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Switch, { checked: showAdvancedFeatures, onChange: (e) => setShowAdvancedFeatures(e.target.checked) }), label: "Inline Editing & Actions" }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Switch, { checked: showNestedData, onChange: (e) => setShowNestedData(e.target.checked) }), label: "Show Project Data" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", startIcon: (0, jsx_runtime_1.jsx)(icons_material_1.Add, {}), onClick: addNewEmployee, size: "small", children: "Add Employee" }), (0, jsx_runtime_1.jsx)(material_1.Badge, { badgeContent: editingRows.size, color: "primary", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: "Editing Rows" }) })] })] }), (0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: { p: 2, mb: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Statistics" }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { container: true, spacing: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Grid, { size: { xs: 6, sm: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: "Total Employees" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: employees.length })] }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { size: { xs: 6, sm: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: "Active Employees" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: employees.filter(e => e.isActive).length })] }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { size: { xs: 6, sm: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: "Avg Salary" }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "h6", children: ["$", Math.round(employees.reduce((sum, e) => sum + e.salary, 0) / employees.length).toLocaleString()] })] }), (0, jsx_runtime_1.jsxs)(material_1.Grid, { size: { xs: 6, sm: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: "Currently Editing" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: editingRows.size })] })] })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { my: 2 } }), (0, jsx_runtime_1.jsx)(components_1.DataTable, { data: employees, totalRow: employees.length, columns: columns, enableRowSelection: true, enableMultiRowSelection: true, enableSorting: true, enableGlobalFilter: true, enableColumnFilter: true, enableColumnDragging: true, enableColumnPinning: true, enablePagination: true, getRowCanExpand: () => true, renderSubComponent: (row) => renderSubComponent({ row: row.original }), initialState: {
+                    pagination: {
+                        pageIndex: 0,
+                        pageSize: 10,
+                    },
+                    columnOrder: ['name', 'department.name', 'salary', 'performance.rating', 'skills'],
+                }, tableContainerProps: {
+                    sx: {
+                        '& .MuiTableRow-root:hover': {
+                            backgroundColor: 'action.hover',
+                        },
+                        '& .MuiTableCell-root': {
+                            borderBottom: '1px solid',
+                            borderColor: 'divider',
+                        },
+                    }
+                }, enableBulkActions: true, bulkActions: (selectionState) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
+                                let selectedEmployees;
+                                if (selectionState.type === 'include') {
+                                    selectedEmployees = employees.filter(emp => selectionState.ids.includes(emp.id.toString()));
+                                }
+                                else {
+                                    selectedEmployees = employees.filter(emp => !selectionState.ids.includes(emp.id.toString()));
+                                }
+                                const avgSalary = selectedEmployees.reduce((sum, emp) => sum + emp.salary, 0) / selectedEmployees.length;
+                                alert(`Average salary of ${selectedEmployees.length} selected employees: $${Math.round(avgSalary).toLocaleString()}`);
+                            }, children: "\uD83D\uDCCA Calculate Avg Salary" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
+                                const updatedEmployees = employees.map(emp => {
+                                    const isSelected = selectionState.type === 'include'
+                                        ? selectionState.ids.includes(emp.id.toString())
+                                        : !selectionState.ids.includes(emp.id.toString());
+                                    return isSelected
+                                        ? Object.assign(Object.assign({}, emp), { performance: Object.assign(Object.assign({}, emp.performance), { rating: 5 }) }) : emp;
+                                });
+                                setEmployees(updatedEmployees);
+                            }, children: "\u2B50 Boost Performance" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", color: "error", onClick: () => {
+                                let selectedEmployees;
+                                if (selectionState.type === 'include') {
+                                    selectedEmployees = employees.filter(emp => selectionState.ids.includes(emp.id.toString()));
+                                }
+                                else {
+                                    selectedEmployees = employees.filter(emp => !selectionState.ids.includes(emp.id.toString()));
+                                }
+                                if (window.confirm(`Delete ${selectedEmployees.length} selected employees?`)) {
+                                    const selectedIds = selectedEmployees.map(emp => emp.id);
+                                    setEmployees(prev => prev.filter(emp => !selectedIds.includes(emp.id)));
+                                }
+                            }, children: "\uD83D\uDDD1\uFE0F Delete Selected" })] })), fitToScreen: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mt: 2 }, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", color: "text.secondary", children: ["\uD83D\uDCA1 ", (0, jsx_runtime_1.jsx)("strong", { children: "Features demonstrated:" }), (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Inline editing with save/cancel actions", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Custom cell renderers with rich content (avatars, ratings, progress bars)", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Row expansion with detailed information", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Dynamic column configuration", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Complex nested data structures", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Real-time statistics and bulk operations", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Advanced styling and theming"] }) })] }));
+}

package/src/lib/examples/bulk-actions-test.d.ts

@@ -0,0 +1 @@
+export declare function BulkActionsTest(): import("react/jsx-runtime").JSX.Element;

package/src/lib/examples/bulk-actions-test.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkActionsTest = BulkActionsTest;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const components_1 = require("../components");
+const testData = [
+    { id: 1, name: 'Item 1', value: 100 },
+    { id: 2, name: 'Item 2', value: 200 },
+    { id: 3, name: 'Item 3', value: 300 },
+    { id: 4, name: 'Item 4', value: 400 },
+    { id: 5, name: 'Item 5', value: 500 },
+];
+const columns = [
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        size: 150,
+    },
+    {
+        accessorKey: 'value',
+        header: 'Value',
+        size: 100,
+    },
+];
+function BulkActionsTest() {
+    const [selectionInfo, setSelectionInfo] = (0, react_1.useState)('No selection');
+    const handleSelectionChange = (selection) => {
+        const count = selection.type === 'include'
+            ? selection.ids.length
+            : testData.length - selection.ids.length;
+        setSelectionInfo(`Selected: ${count} items (${selection.type} mode) - IDs: [${selection.ids.join(', ')}]`);
+    };
+    const bulkActions = (0, react_1.useCallback)((selectionState) => {
+        const selectedCount = selectionState.type === 'include'
+            ? selectionState.ids.length
+            : testData.length - selectionState.ids.length;
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: 'flex', gap: 1 }, children: (0, jsx_runtime_1.jsxs)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
+                    alert(`Action on ${selectedCount} items. Selection state: ${JSON.stringify(selectionState, null, 2)}`);
+                }, children: ["Test Action (", selectedCount, ")"] }) }));
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { p: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", gutterBottom: true, children: "Bulk Actions Test" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", sx: { mb: 2 }, children: "This example tests that bulk actions work without infinite loops." }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", sx: { mb: 3, p: 2, backgroundColor: 'grey.100', borderRadius: 1 }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "Current Selection:" }), " ", selectionInfo] }), (0, jsx_runtime_1.jsx)(components_1.DataTable, { data: testData, totalRow: testData.length, columns: columns, enableRowSelection: true, enableMultiRowSelection: true, enableBulkActions: true, bulkActions: bulkActions, onSelectionChange: handleSelectionChange, enablePagination: false, enableSorting: true, enableGlobalFilter: false, fitToScreen: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mt: 2, p: 2, backgroundColor: 'success.light', borderRadius: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "success.dark", children: "\u2705 If you can see this and select rows without the page freezing, the infinite loop issue is fixed!" }) })] }));
+}

package/src/lib/examples/custom-column-filter-example.d.ts

@@ -0,0 +1 @@
+export declare function CustomColumnFilterExample(): import("react/jsx-runtime").JSX.Element;