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

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

@@ -1,94 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,61 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,33 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/examples/advanced-features-example.d.ts.map

@@ -1 +0,0 @@
-{"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

@@ -1,282 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}