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

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

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { CloudDownloadOutlined } from '@mui/icons-material';
+import { IconButton, Tooltip, MenuItem, ListItemIcon, ListItemText, Typography, Box, } from '@mui/material';
+import { MenuDropdown } from '../droupdown/menu-dropdown';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { ExcelIcon, CsvIcon } from '../../icons';
+import { exportClientData, exportServerData } from '../../utils/export-utils';
+import { getSlotComponent } from '../../utils/slot-helpers';
+export function TableExportControl({ exportFilename: propsExportFilename, onServerExport: propsOnServerExport, onExportProgress: propsOnExportProgress, onExportComplete: propsOnExportComplete, onExportError: propsOnExportError, } = {}) {
+    const { table, apiRef, slots, slotProps, dataMode, isExporting, onCancelExport, 
+    // Export callbacks from context (DataTable props)
+    exportFilename: contextExportFilename, onServerExport: contextOnServerExport, onExportProgress: contextOnExportProgress, onExportComplete: contextOnExportComplete, onExportError: contextOnExportError, } = useDataTableContext();
+    // Use props if provided, otherwise fall back to context values
+    const exportFilename = propsExportFilename || contextExportFilename || 'export';
+    const onServerExport = propsOnServerExport || contextOnServerExport;
+    const onExportProgress = propsOnExportProgress || contextOnExportProgress;
+    const onExportComplete = propsOnExportComplete || contextOnExportComplete;
+    const onExportError = propsOnExportError || contextOnExportError;
+    const ExportIconSlot = getSlotComponent(slots, 'exportIcon', CloudDownloadOutlined);
+    const CsvIconSlot = getSlotComponent(slots, 'csvIcon', CsvIcon);
+    const ExcelIconSlot = getSlotComponent(slots, 'excelIcon', ExcelIcon);
+    const handleExport = async (format) => {
+        try {
+            if (dataMode === 'server' && onServerExport) {
+                // Server mode export - fetch data with current filters and selection
+                const currentState = table.getState();
+                const currentFilters = {
+                    globalFilter: currentState.globalFilter,
+                    sorting: currentState.sorting,
+                    columnFilters: currentState.columnFilters,
+                };
+                // Get selection data from apiRef if available
+                const selectionData = apiRef?.current?.selection?.getSelectionState();
+                await exportServerData(table, {
+                    format,
+                    filename: exportFilename,
+                    fetchData: (filters, selection) => onServerExport(filters || currentFilters, selection),
+                    currentFilters,
+                    selection: selectionData,
+                    onProgress: onExportProgress,
+                    onComplete: onExportComplete,
+                    onError: onExportError,
+                });
+            }
+            else {
+                // Client mode export - export selected rows if any, otherwise all filtered rows
+                await exportClientData(table, {
+                    format,
+                    filename: exportFilename,
+                    onProgress: onExportProgress,
+                    onComplete: onExportComplete,
+                    onError: onExportError,
+                });
+            }
+        }
+        catch (error) {
+            console.error('Export failed:', error);
+            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 (_jsx(MenuDropdown, { anchor: (_jsx(Tooltip, { title: "Export data", children: _jsx(IconButton, { size: "small", disabled: isExporting, sx: {
+                    flexShrink: 0,
+                    color: isExporting ? 'warning.main' : 'text.secondary',
+                }, children: _jsx(ExportIconSlot, { ...slotProps?.exportIcon }) }) })), children: ({ handleClose }) => (_jsxs(Box, { sx: {
+                p: 1,
+                minWidth: 280,
+            }, children: [_jsxs(Box, { sx: {
+                        mb: 2,
+                        p: 1,
+                        bgcolor: 'grey.50',
+                        borderRadius: 1,
+                    }, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Export Summary" }), _jsx(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 ? (_jsx(Typography, { variant: "caption", color: "primary.main", sx: { fontWeight: 'medium' }, children: "Will export selected rows only" })) : null] }), isExporting ? (_jsxs(MenuItem, { onClick: () => {
+                        onCancelExport?.();
+                        handleClose();
+                    }, children: [_jsx(ListItemIcon, { children: _jsx(ExportIconSlot, { fontSize: "small", color: "warning", ...slotProps?.exportIcon }) }), _jsx(ListItemText, { primary: "Cancel Export", secondary: "Stop current export" })] })) : (_jsxs(_Fragment, { children: [_jsxs(MenuItem, { onClick: async () => {
+                                await handleExport('csv');
+                                handleClose();
+                            }, disabled: isExporting, children: [_jsx(ListItemIcon, { children: _jsx(CsvIconSlot, { fontSize: "small", ...slotProps?.csvIcon }) }), _jsx(ListItemText, { primary: "Export as CSV", secondary: ".csv format" })] }), _jsxs(MenuItem, { onClick: async () => {
+                                await handleExport('excel');
+                                handleClose();
+                            }, disabled: isExporting, children: [_jsx(ListItemIcon, { children: _jsx(ExcelIconSlot, { fontSize: "small", ...slotProps?.excelIcon }) }), _jsx(ListItemText, { primary: "Export as Excel", secondary: ".xlsx format" })] })] }))] })) }));
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-search-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/table-search-control.tsx"],"names":[],"mappings":"AAYA,wBAAgB,kBAAkB,4CAqHjC"}

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

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Clear, Search } from '@mui/icons-material';
+import { Box, Tooltip } from '@mui/material';
+import { IconButton } from '@mui/material';
+import { Collapse } from '@mui/material';
+import { OutlinedInput } from '@mui/material';
+import { InputAdornment } from '@mui/material';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { getSlotComponent } from '../../utils/slot-helpers';
+export function TableSearchControl() {
+    const { table, slots, slotProps } = useDataTableContext();
+    const [searchVisible, setSearchVisible] = useState(false);
+    const searchInputRef = useRef(null);
+    const globalFilter = table.getState().globalFilter || '';
+    const hasSearch = globalFilter.length > 0;
+    const SearchIconSlot = getSlotComponent(slots, 'searchIcon', Search);
+    const ClearIconSlot = getSlotComponent(slots, 'clearIcon', Clear);
+    const handleChange = useCallback((e) => {
+        table.setGlobalFilter(e.target.value);
+    }, [table]);
+    const handleSearchToggle = () => {
+        if (searchVisible || hasSearch) {
+            // If search is visible or has text, hide it and clear
+            setSearchVisible(false);
+            table.setGlobalFilter('');
+        }
+        else {
+            // Show search input
+            setSearchVisible(true);
+        }
+    };
+    const handleSearchClear = () => {
+        table.setGlobalFilter('');
+        if (searchInputRef.current) {
+            searchInputRef.current.focus();
+        }
+    };
+    const handleSearchBlur = () => {
+        // Only auto-hide if search is empty
+        if (searchVisible && !hasSearch) {
+            setSearchVisible(false);
+        }
+    };
+    useEffect(() => {
+        if (searchVisible && searchInputRef.current) {
+            // Add a delay to ensure the Collapse animation completes
+            const timer = setTimeout(() => {
+                searchInputRef.current?.focus();
+            }, 200);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [searchVisible]);
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+        }, children: [!(searchVisible || hasSearch) && (_jsx(Tooltip, { title: "Search", children: _jsx(IconButton, { size: "small", onClick: handleSearchToggle, color: hasSearch ? 'primary' : 'default', sx: {
+                        flexShrink: 0,
+                    }, children: _jsx(SearchIconSlot, { ...slotProps?.searchIcon }) }) })), _jsx(Collapse, { in: searchVisible || hasSearch, orientation: "horizontal", children: _jsx(OutlinedInput, { inputRef: searchInputRef, placeholder: "Search...", value: globalFilter, onChange: handleChange, size: "small", onBlur: handleSearchBlur, sx: { minWidth: 200 }, endAdornment: hasSearch ? (_jsx(InputAdornment, { position: "end", children: _jsx(Tooltip, { title: "Clear search", children: _jsx(IconButton, { size: "small", onClick: handleSearchClear, edge: "end", children: _jsx(ClearIconSlot, { size: "small", ...slotProps?.clearIcon }) }) }) })) : null, startAdornment: searchVisible || hasSearch ? (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIconSlot, { size: "small", ...slotProps?.searchIcon }) })) : null }) })] }));
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"table-size-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/toolbar/table-size-control.tsx"],"names":[],"mappings":"AASA,wBAAgB,gBAAgB,4CA4D/B"}

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { LineWeightOutlined } from '@mui/icons-material';
+import { MenuItem, ListItemIcon, ListItemText, Tooltip, IconButton } from '@mui/material';
+import { MenuDropdown } from '../droupdown/menu-dropdown';
+import { useDataTableContext } from '../../contexts/data-table-context';
+import { ViewComfortableIcon, ViewCompactIcon } from '../../icons';
+import { getSlotComponent } from '../../utils/slot-helpers';
+export function TableSizeControl() {
+    const { tableSize, onTableSizeChange, slotProps, slots } = useDataTableContext();
+    const TableSizeIconSlot = getSlotComponent(slots, 'tableSizeIcon', LineWeightOutlined);
+    const TableSizeSmallIconSlot = getSlotComponent(slots, 'tableSizeSmallIcon', ViewCompactIcon);
+    const TableSizeMediumIconSlot = getSlotComponent(slots, 'tableSizeMediumIcon', ViewComfortableIcon);
+    const SIZE_OPTIONS = [
+        {
+            value: 'small',
+            label: 'Compact',
+            description: 'Small padding, compact rows',
+            icon: _jsx(TableSizeSmallIconSlot, { ...slotProps?.tableSizeSmallIcon }),
+        },
+        {
+            value: 'medium',
+            label: 'Standard',
+            description: 'Default padding and spacing',
+            icon: _jsx(TableSizeMediumIconSlot, { ...slotProps?.tableSizeMediumIcon }),
+        },
+    ];
+    return (_jsx(MenuDropdown, { anchor: (_jsx(Tooltip, { title: "Table size", children: _jsx(IconButton, { size: "small", sx: {
+                    flexShrink: 0,
+                }, children: _jsx(TableSizeIconSlot, { ...slotProps?.tableSizeIcon }) }) })), children: ({ handleClose }) => (_jsx(_Fragment, { children: SIZE_OPTIONS.map((option) => (_jsxs(MenuItem, { selected: tableSize === option.value, onClick: () => {
+                    onTableSizeChange?.(option.value);
+                    handleClose();
+                }, children: [_jsx(ListItemIcon, { children: option.icon }), _jsx(ListItemText, { primary: option.label, secondary: option.description })] }, option.value))) })) }));
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-context.d.ts","sourceRoot":"","sources":["../../../src/lib/contexts/data-table-context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAA6B,SAAS,EAAW,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD;;GAEG;AACH,UAAU,qBAAqB,CAAC,CAAC,GAAG,GAAG;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IAC9C,mBAAmB,CAAC,EAAE,uBAAuB,CAAC;IAC9C,2BAA2B,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAGhC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAC1C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAG5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACxG,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/F,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACnE,cAAc,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC;QAAE,IAAI,EAAE,GAAG,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACxF;AAID,UAAU,sBAAsB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,qBAAqB,CAAC,CAAC,CAAC;IACtE,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,GAAG,EAAE,EACvC,QAAQ,EACR,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,iBAAiB,EACjB,mBAAmB,EACnB,2BAA2B,EAC3B,KAAU,EACV,SAAc,EACd,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,cAAc,GACjB,EAAE,sBAAsB,CAAC,CAAC,CAAC,2CA4C3B;AAED,wBAAgB,mBAAmB,CAAC,CAAC,GAAG,GAAG,KAAK,qBAAqB,CAAC,CAAC,CAAC,CAMvE"}

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

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
+const DataTableContext = createContext(null);
+export function DataTableProvider({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, customColumnsFilter, onChangeCustomColumnsFilter, slots = {}, slotProps = {}, isExporting, exportController, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }) {
+    const value = 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 (_jsx(DataTableContext.Provider, { value: value, children: children }));
+}
+export function useDataTableContext() {
+    const context = useContext(DataTableContext);
+    if (!context) {
+        throw new Error('useDataTableContext must be used within a DataTableProvider');
+    }
+    return context;
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"advanced-features-example.d.ts","sourceRoot":"","sources":["../../../src/lib/examples/advanced-features-example.tsx"],"names":[],"mappings":"AAmHA,wBAAgB,uBAAuB,4CAukBtC"}

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

@@ -0,0 +1,282 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import { Box, Typography, Button, Chip, TextField, Switch, FormControlLabel, Paper, Grid, Divider, IconButton, Tooltip, Badge, Avatar, LinearProgress, Rating, } from '@mui/material';
+import { Edit as EditIcon, Save as SaveIcon, Cancel as CancelIcon, Add as AddIcon, Delete as DeleteIcon, Star as StarIcon, TrendingUp as TrendingUpIcon, TrendingDown as TrendingDownIcon, } from '@mui/icons-material';
+import { DataTable } from '../components';
+// Generate rich sample data
+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),
+            },
+        };
+    });
+};
+export function AdvancedFeaturesExample() {
+    const [employees, setEmployees] = useState(generateEmployeeData());
+    const [editingRows, setEditingRows] = useState(new Set());
+    const [showAdvancedFeatures, setShowAdvancedFeatures] = useState(true);
+    const [showNestedData, setShowNestedData] = useState(false);
+    // Inline editing handlers
+    const handleStartEdit = useCallback((employeeId) => {
+        setEditingRows(prev => new Set([...prev, employeeId]));
+    }, []);
+    const handleSaveEdit = useCallback((employeeId) => {
+        setEditingRows(prev => {
+            const newSet = new Set(prev);
+            newSet.delete(employeeId);
+            return newSet;
+        });
+        // In a real app, you'd save to your data store here
+    }, []);
+    const handleCancelEdit = useCallback((employeeId) => {
+        setEditingRows(prev => {
+            const newSet = new Set(prev);
+            newSet.delete(employeeId);
+            return newSet;
+        });
+        // In a real app, you'd revert changes here
+    }, []);
+    const handleFieldChange = useCallback((employeeId, field, value) => {
+        setEmployees(prev => prev.map(emp => emp.id === employeeId
+            ? { ...emp, [field]: value }
+            : emp));
+    }, []);
+    // Custom cell renderers
+    const NameCell = ({ row }) => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Avatar, { src: row.avatar, sx: { width: 32, height: 32 } }), _jsxs(Box, { children: [_jsx(Typography, { variant: "body2", fontWeight: "medium", children: row.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: row.email })] })] }));
+    const DepartmentCell = ({ row }) => (_jsx(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 (_jsx(TextField, { size: "small", type: "number", value: row.salary, onChange: (e) => handleFieldChange(row.id, 'salary', parseInt(e.target.value)), sx: { width: 120 } }));
+        }
+        return (_jsxs(Typography, { variant: "body2", fontWeight: "medium", children: ["$", row.salary.toLocaleString()] }));
+    };
+    const PerformanceCell = ({ row }) => {
+        const trendIcon = {
+            up: _jsx(TrendingUpIcon, { sx: { color: 'success.main', fontSize: 16 } }),
+            down: _jsx(TrendingDownIcon, { sx: { color: 'error.main', fontSize: 16 } }),
+            stable: _jsx(StarIcon, { sx: { color: 'warning.main', fontSize: 16 } }),
+        };
+        return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Rating, { value: row.performance.rating, size: "small", readOnly: true }), trendIcon[row.performance.trend], _jsxs(Typography, { variant: "caption", children: [row.performance.score, "%"] })] }));
+    };
+    const SkillsCell = ({ row }) => (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5, maxWidth: 200 }, children: [row.skills.slice(0, 3).map((skill, index) => (_jsx(Chip, { label: skill, size: "small", variant: "outlined", sx: { fontSize: '0.7rem', height: 20 } }, index))), row.skills.length > 3 && (_jsx(Chip, { label: `+${row.skills.length - 3}`, size: "small", variant: "filled", sx: { fontSize: '0.7rem', height: 20 } }))] }));
+    const ProjectsCell = ({ row }) => (_jsx(Box, { sx: { minWidth: 150 }, children: row.projects.map((project, index) => (_jsxs(Box, { sx: { mb: 0.5 }, children: [_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' }, children: [_jsx(Typography, { variant: "caption", fontWeight: "medium", children: project.name }), _jsx(Chip, { label: project.priority, size: "small", color: project.priority === 'high' ? 'error' : project.priority === 'medium' ? 'warning' : 'default', sx: { fontSize: '0.6rem', height: 16 } })] }), _jsx(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 (_jsxs(Box, { sx: { display: 'flex', gap: 0.5 }, children: [_jsx(Tooltip, { title: "Save changes", children: _jsx(IconButton, { size: "small", onClick: () => handleSaveEdit(row.id), color: "primary", children: _jsx(SaveIcon, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: "Cancel editing", children: _jsx(IconButton, { size: "small", onClick: () => handleCancelEdit(row.id), color: "secondary", children: _jsx(CancelIcon, { fontSize: "small" }) }) })] }));
+        }
+        return (_jsxs(Box, { sx: { display: 'flex', gap: 0.5 }, children: [_jsx(Tooltip, { title: "Edit employee", children: _jsx(IconButton, { size: "small", onClick: () => handleStartEdit(row.id), color: "primary", children: _jsx(EditIcon, { fontSize: "small" }) }) }), _jsx(Tooltip, { title: "Delete employee", children: _jsx(IconButton, { size: "small", onClick: () => {
+                            setEmployees(prev => prev.filter(emp => emp.id !== row.id));
+                        }, color: "error", children: _jsx(DeleteIcon, { fontSize: "small" }) }) })] }));
+    };
+    // Row expansion content
+    const renderSubComponent = useCallback(({ row }) => (_jsx(Box, { sx: { p: 2, backgroundColor: 'grey.50', borderRadius: 1 }, children: _jsxs(Grid, { container: true, spacing: 2, children: [_jsxs(Grid, { size: { xs: 12, md: 6 }, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Contact Information" }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Email:" }), " ", row.email] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Position:" }), " ", row.position] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Start Date:" }), " ", new Date(row.startDate).toLocaleDateString()] })] }), _jsxs(Grid, { size: { xs: 12, md: 6 }, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Metadata" }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Last Login:" }), " ", new Date(row.metadata.lastLogin).toLocaleDateString()] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Vacation Days:" }), " ", row.metadata.vacationDays] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Certifications:" }), " ", row.metadata.certifications] })] }), _jsxs(Grid, { size: { xs: 12 }, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "All Skills" }), _jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 0.5 }, children: row.skills.map((skill, index) => (_jsx(Chip, { label: skill, size: "small", color: "primary", variant: "outlined" }, index))) })] })] }) })), []);
+    // Dynamic column configuration
+    const columns = useMemo(() => {
+        const baseColumns = [
+            {
+                accessorKey: 'name',
+                header: 'Employee',
+                size: 200,
+                cell: ({ row }) => _jsx(NameCell, { row: row.original }),
+                enableSorting: true,
+                filterable: true,
+                type: 'text',
+            },
+            {
+                accessorKey: 'department.name',
+                header: 'Department',
+                size: 120,
+                cell: ({ row }) => _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 }) => _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 }) => (_jsx(Typography, { variant: "body2", children: new Date(row.original.startDate).toLocaleDateString() })),
+            },
+            {
+                accessorKey: 'performance.rating',
+                header: 'Performance',
+                size: 200,
+                cell: ({ row }) => _jsx(PerformanceCell, { row: row.original }),
+                enableSorting: true,
+            },
+            {
+                accessorKey: 'skills',
+                header: 'Skills',
+                size: 250,
+                cell: ({ row }) => _jsx(SkillsCell, { row: row.original }),
+                enableSorting: false,
+            },
+        ];
+        if (showNestedData) {
+            baseColumns.push({
+                accessorKey: 'projects',
+                header: 'Projects',
+                size: 200,
+                cell: ({ row }) => _jsx(ProjectsCell, { row: row.original }),
+                enableSorting: false,
+            });
+        }
+        if (showAdvancedFeatures) {
+            baseColumns.push({
+                id: 'actions',
+                header: 'Actions',
+                size: 100,
+                cell: ({ row }) => _jsx(ActionsCell, { row: row.original }),
+                enableSorting: false,
+                filterable: false,
+            });
+        }
+        return baseColumns;
+    }, [showAdvancedFeatures, showNestedData, editingRows]);
+    const addNewEmployee = 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 (_jsxs(Box, { sx: { p: 3 }, children: [_jsx(Typography, { variant: "h4", gutterBottom: true, children: "Advanced Features Demo" }), _jsx(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." }), _jsxs(Paper, { sx: { p: 2, mb: 3 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Feature Controls" }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }, children: [_jsx(FormControlLabel, { control: _jsx(Switch, { checked: showAdvancedFeatures, onChange: (e) => setShowAdvancedFeatures(e.target.checked) }), label: "Inline Editing & Actions" }), _jsx(FormControlLabel, { control: _jsx(Switch, { checked: showNestedData, onChange: (e) => setShowNestedData(e.target.checked) }), label: "Show Project Data" }), _jsx(Button, { variant: "contained", startIcon: _jsx(AddIcon, {}), onClick: addNewEmployee, size: "small", children: "Add Employee" }), _jsx(Badge, { badgeContent: editingRows.size, color: "primary", children: _jsx(Typography, { variant: "body2", children: "Editing Rows" }) })] })] }), _jsxs(Paper, { sx: { p: 2, mb: 3 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Statistics" }), _jsxs(Grid, { container: true, spacing: 2, children: [_jsxs(Grid, { size: { xs: 6, sm: 3 }, children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: "Total Employees" }), _jsx(Typography, { variant: "h6", children: employees.length })] }), _jsxs(Grid, { size: { xs: 6, sm: 3 }, children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: "Active Employees" }), _jsx(Typography, { variant: "h6", children: employees.filter(e => e.isActive).length })] }), _jsxs(Grid, { size: { xs: 6, sm: 3 }, children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: "Avg Salary" }), _jsxs(Typography, { variant: "h6", children: ["$", Math.round(employees.reduce((sum, e) => sum + e.salary, 0) / employees.length).toLocaleString()] })] }), _jsxs(Grid, { size: { xs: 6, sm: 3 }, children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: "Currently Editing" }), _jsx(Typography, { variant: "h6", children: editingRows.size })] })] })] }), _jsx(Divider, { sx: { my: 2 } }), _jsx(DataTable, { data: employees, totalRow: employees.length, columns: columns, 
+                // Advanced features
+                enableRowSelection: true, enableMultiRowSelection: true, enableSorting: true, enableGlobalFilter: true, enableColumnFilter: true, enableColumnDragging: true, enableColumnPinning: true, enablePagination: true, 
+                // Row expansion
+                getRowCanExpand: () => true, renderSubComponent: (row) => renderSubComponent({ row: row.original }), 
+                // Initial state
+                initialState: {
+                    pagination: {
+                        pageIndex: 0,
+                        pageSize: 10,
+                    },
+                    columnOrder: ['name', 'department.name', 'salary', 'performance.rating', 'skills'],
+                }, 
+                // Styling
+                tableContainerProps: {
+                    sx: {
+                        '& .MuiTableRow-root:hover': {
+                            backgroundColor: 'action.hover',
+                        },
+                        '& .MuiTableCell-root': {
+                            borderBottom: '1px solid',
+                            borderColor: 'divider',
+                        },
+                    }
+                }, 
+                // Bulk actions
+                enableBulkActions: true, bulkActions: (selectionState) => (_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(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" }), _jsx(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
+                                        ? { ...emp, performance: { ...emp.performance, rating: 5 } }
+                                        : emp;
+                                });
+                                setEmployees(updatedEmployees);
+                            }, children: "\u2B50 Boost Performance" }), _jsx(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" })] })), 
+                // Fit to screen
+                fitToScreen: true }), _jsx(Box, { sx: { mt: 2 }, children: _jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["\uD83D\uDCA1 ", _jsx("strong", { children: "Features demonstrated:" }), _jsx("br", {}), "\u2022 Inline editing with save/cancel actions", _jsx("br", {}), "\u2022 Custom cell renderers with rich content (avatars, ratings, progress bars)", _jsx("br", {}), "\u2022 Row expansion with detailed information", _jsx("br", {}), "\u2022 Dynamic column configuration", _jsx("br", {}), "\u2022 Complex nested data structures", _jsx("br", {}), "\u2022 Real-time statistics and bulk operations", _jsx("br", {}), "\u2022 Advanced styling and theming"] }) })] }));
+}

package/lib/examples/basic-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-example.d.ts","sourceRoot":"","sources":["../../../src/lib/examples/basic-example.tsx"],"names":[],"mappings":"AA6KA,wBAAgB,gBAAgB,4CAoR/B;AAGD,wBAAgB,0BAA0B,4CA2DzC"}