@ackplus/react-tanstack-data-table 1.0.34 → 1.1.1

package/src/lib/components/toolbar/bulk-actions-toolbar.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BulkActionsToolbar = BulkActionsToolbar;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = 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 BulkActionsToolbar(props) {
-    const { selectionState, selectedRowCount, bulkActions, chipProps, containerSx, leftSectionSx, rightSectionSx, fadeProps, sx } = props, otherProps = tslib_1.__rest(props, ["selectionState", "selectedRowCount", "bulkActions", "chipProps", "containerSx", "leftSectionSx", "rightSectionSx", "fadeProps", "sx"]);
-    const { slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
-    const toolbarSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'bulkActionsToolbar');
-    const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'bulkActionsToolbar', material_1.Toolbar);
-    const renderedBulkActions = (0, react_1.useMemo)(() => {
-        if (!bulkActions)
-            return null;
-        return bulkActions(selectionState);
-    }, [bulkActions, selectionState]);
-    const mergedToolbarProps = (0, slot_helpers_1.mergeSlotProps)({
-        sx: Object.assign(Object.assign({ pl: { sm: 2 }, pr: { xs: 1, sm: 1 }, bgcolor: (theme) => (0, material_1.alpha)(theme.palette.primary.main, 0.05), mb: 1, position: 'relative', zIndex: 1 }, sx), containerSx),
-    }, toolbarSlotProps, otherProps);
-    const mergedChipProps = (0, slot_helpers_1.mergeSlotProps)({
-        label: `${selectedRowCount} selected`,
-        size: 'small',
-        color: 'primary',
-        variant: 'outlined',
-    }, chipProps || {});
-    return ((0, jsx_runtime_1.jsx)(material_1.Fade, Object.assign({ in: selectedRowCount > 0 }, fadeProps, { children: (0, jsx_runtime_1.jsxs)(ToolbarSlot, Object.assign({}, mergedToolbarProps, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: Object.assign({ flex: '1 1 100%' }, leftSectionSx), children: (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "inherit", variant: "subtitle1", component: "div", children: (0, jsx_runtime_1.jsx)(material_1.Chip, Object.assign({}, mergedChipProps)) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: Object.assign({ display: 'flex', alignItems: 'center', gap: 1 }, rightSectionSx), children: renderedBulkActions })] })) })));
-}

package/src/lib/components/toolbar/column-visibility-control.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColumnVisibilityControl = ColumnVisibilityControl;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const icons_material_1 = require("@mui/icons-material");
-const material_1 = require("@mui/material");
-const react_1 = require("react");
-const menu_dropdown_1 = require("../droupdown/menu-dropdown");
-const data_table_context_1 = require("../../contexts/data-table-context");
-const slot_helpers_1 = require("../../utils/slot-helpers");
-function ColumnVisibilityControl(props = {}) {
-    const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
-    const iconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'columnIcon');
-    const ColumnIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnIcon', icons_material_1.ViewColumnOutlined);
-    const columns = (0, react_1.useMemo)(() => {
-        var _a, _b, _c;
-        if ((_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _a === void 0 ? void 0 : _a.getTogglableColumns) {
-            return (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _b === void 0 ? void 0 : _b.getTogglableColumns((table === null || table === void 0 ? void 0 : table.getAllLeafColumns()) || []);
-        }
-        return ((_c = table === null || table === void 0 ? void 0 : table.getAllLeafColumns()) === null || _c === void 0 ? void 0 : _c.filter(column => column.getCanHide())) || [];
-    }, [slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel, table]);
-    const handleColumnVisibilityChange = ((columnId, visible) => {
-        var _a;
-        (_a = table === null || table === void 0 ? void 0 : table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.toggleVisibility(visible);
-    });
-    const mergedProps = (0, slot_helpers_1.mergeSlotProps)({
-        size: 'small',
-        sx: { flexShrink: 0 },
-    }, (slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnVisibilityControl) || {}, props);
-    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Column visibility", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, mergedProps, { children: (0, jsx_runtime_1.jsx)(ColumnIconSlot, Object.assign({}, iconSlotProps)) })) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ p: 2, minWidth: 200 }, mergedProps.menuSx), children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: Object.assign({ mb: 1 }, mergedProps.titleSx), children: mergedProps.title || 'Show/Hide Columns' }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 1 } }), (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: columns.map((column) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, Object.assign({ control: ((0, jsx_runtime_1.jsx)(material_1.Checkbox, Object.assign({ disabled: !column.getCanHide(), checked: column.getIsVisible(), onChange: (e) => handleColumnVisibilityChange(column.id, e.target.checked), size: "small" }, mergedProps.checkboxProps))), label: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id }, mergedProps.labelProps), column.id))) })] })) }));
-}

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

@@ -1,31 +0,0 @@
-import { IconButtonProps, SxProps } from '@mui/material';
-import { TableFilters } from '../../types';
-import { SelectionState } from '../../features';
-interface TableExportControlProps {
-    exportFilename?: string;
-    onServerExport?: (filters?: Partial<TableFilters>, selection?: SelectionState) => Promise<{
-        data: any[];
-        total: number;
-    }>;
-    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;
-    iconButtonProps?: IconButtonProps;
-    tooltipProps?: any;
-    menuSx?: SxProps;
-    menuItemProps?: any;
-    [key: string]: any;
-}
-export declare function TableExportControl(props?: TableExportControlProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,56 +0,0 @@
-"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 slot_helpers_1 = require("../../utils/slot-helpers");
-function TableExportControl(props = {}) {
-    const { exportFilename: propsExportFilename, onServerExport: propsOnServerExport, onExportProgress: propsOnExportProgress, onExportComplete: propsOnExportComplete, onExportError: propsOnExportError, iconButtonProps, tooltipProps, menuSx, menuItemProps } = props, otherProps = tslib_1.__rest(props, ["exportFilename", "onServerExport", "onExportProgress", "onExportComplete", "onExportError", "iconButtonProps", "tooltipProps", "menuSx", "menuItemProps"]);
-    const { apiRef, slots, slotProps, isExporting, exportFilename: contextExportFilename, } = (0, data_table_context_1.useDataTableContext)();
-    const exportFilename = propsExportFilename || contextExportFilename || 'export';
-    const exportIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'exportIcon');
-    const csvIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'csvIcon');
-    const excelIconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'excelIcon');
-    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* () {
-        if (!(apiRef === null || apiRef === void 0 ? void 0 : apiRef.current))
-            return;
-        try {
-            if (format === 'csv') {
-                yield apiRef.current.export.exportCSV({
-                    filename: exportFilename,
-                });
-            }
-            else {
-                yield apiRef.current.export.exportExcel({
-                    filename: exportFilename,
-                });
-            }
-        }
-        catch (error) {
-            console.error('Export failed:', error);
-        }
-    });
-    const mergedIconButtonProps = (0, slot_helpers_1.mergeSlotProps)({
-        size: 'small',
-        disabled: isExporting,
-        sx: { flexShrink: 0 },
-    }, exportIconSlotProps, iconButtonProps || {});
-    const mergedMenuItemProps = (0, slot_helpers_1.mergeSlotProps)({
-        sx: { minWidth: 150 },
-    }, menuItemProps || {});
-    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: isExporting ? 'Export in progress...' : 'Export data' }, tooltipProps, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, mergedIconButtonProps, { children: (0, jsx_runtime_1.jsx)(ExportIconSlot, Object.assign({}, exportIconSlotProps)) })) }))), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: Object.assign({ minWidth: 200 }, menuSx), children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { p: 2, pb: 1 }, children: "Export Format" }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: () => {
-                        handleExport('csv');
-                        handleClose();
-                    }, disabled: isExporting }, mergedMenuItemProps, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(CsvIconSlot, Object.assign({}, csvIconSlotProps)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "CSV", secondary: "Comma-separated values" })] })), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ onClick: () => {
-                        handleExport('excel');
-                        handleClose();
-                    }, disabled: isExporting }, mergedMenuItemProps, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExcelIconSlot, Object.assign({}, excelIconSlotProps)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Excel", secondary: "Microsoft Excel format" })] })), isExporting && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { p: 2, pt: 1 }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", sx: { display: 'block', textAlign: 'center' }, children: "Export in progress..." }) }))] })) }));
-}

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

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

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

@@ -1,269 +0,0 @@
-"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 types_1 = require("../types");
-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,
-                    },
-                    columnPinning: {
-                        left: [types_1.DEFAULT_SELECTION_COLUMN_NAME],
-                        right: ['actions'],
-                    },
-                    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

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

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

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

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

package/src/lib/examples/custom-column-filter-example.js

@@ -1,60 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomColumnFilterExample = CustomColumnFilterExample;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const material_1 = require("@mui/material");
-const data_table_1 = require("../components/table/data-table");
-const sampleData = [
-    { id: 1, name: 'John Doe', age: 30, department: 'Engineering', salary: 75000, isActive: true },
-    { id: 2, name: 'Jane Smith', age: 25, department: 'Marketing', salary: 60000, isActive: true },
-    { id: 3, name: 'Bob Johnson', age: 35, department: 'Engineering', salary: 85000, isActive: false },
-    { id: 4, name: 'Alice Brown', age: 28, department: 'HR', salary: 55000, isActive: true },
-    { id: 5, name: 'Charlie Wilson', age: 42, department: 'Sales', salary: 70000, isActive: true },
-];
-const columns = [
-    {
-        accessorKey: 'name',
-        header: 'Name',
-        type: 'text',
-    },
-    {
-        accessorKey: 'age',
-        header: 'Age',
-        type: 'number',
-    },
-    {
-        accessorKey: 'department',
-        header: 'Department',
-        type: 'select',
-        options: [
-            { label: 'Engineering', value: 'Engineering' },
-            { label: 'Marketing', value: 'Marketing' },
-            { label: 'HR', value: 'HR' },
-            { label: 'Sales', value: 'Sales' },
-        ],
-    },
-    {
-        accessorKey: 'salary',
-        header: 'Salary',
-        type: 'number',
-        cell: ({ getValue }) => {
-            const value = getValue();
-            return new Intl.NumberFormat('en-US', {
-                style: 'currency',
-                currency: 'USD',
-            }).format(value);
-        },
-    },
-    {
-        accessorKey: 'isActive',
-        header: 'Active',
-        type: 'boolean',
-    },
-];
-function CustomColumnFilterExample() {
-    const [data] = (0, react_1.useState)(sampleData);
-    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: "Custom Column Filter Feature Example" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", sx: { mb: 3 }, children: "Click the filter icon in the toolbar to test the custom column filter feature." }), (0, jsx_runtime_1.jsx)(data_table_1.DataTable, { data: data, columns: columns, enableColumnFilter: true, enableGlobalFilter: true, enablePagination: true, enableSorting: true, onColumnFiltersChange: (filterState) => {
-                    console.log('Custom Column Filter State Changed:', filterState);
-                } })] }));
-}

package/src/lib/examples/index.d.ts

@@ -1,8 +0,0 @@
-export { CustomColumnFilterExample } from './custom-column-filter-example';
-export { SelectionTestExample } from './selection-test-example';
-export { AdvancedFeaturesExample } from './advanced-features-example';
-export { SimpleLocalExample } from './simple-local-example';
-export { BulkActionsTest } from './bulk-actions-test';
-export { ServerSideFetchingExample } from './server-side-fetching-example';
-export { SimpleEnhancedSlotsExample } from './simple-slots-example';
-export { ServerSideTest } from './server-side-test';

package/src/lib/examples/index.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServerSideTest = exports.SimpleEnhancedSlotsExample = exports.ServerSideFetchingExample = exports.BulkActionsTest = exports.SimpleLocalExample = exports.AdvancedFeaturesExample = exports.SelectionTestExample = exports.CustomColumnFilterExample = void 0;
-var custom_column_filter_example_1 = require("./custom-column-filter-example");
-Object.defineProperty(exports, "CustomColumnFilterExample", { enumerable: true, get: function () { return custom_column_filter_example_1.CustomColumnFilterExample; } });
-var selection_test_example_1 = require("./selection-test-example");
-Object.defineProperty(exports, "SelectionTestExample", { enumerable: true, get: function () { return selection_test_example_1.SelectionTestExample; } });
-var advanced_features_example_1 = require("./advanced-features-example");
-Object.defineProperty(exports, "AdvancedFeaturesExample", { enumerable: true, get: function () { return advanced_features_example_1.AdvancedFeaturesExample; } });
-var simple_local_example_1 = require("./simple-local-example");
-Object.defineProperty(exports, "SimpleLocalExample", { enumerable: true, get: function () { return simple_local_example_1.SimpleLocalExample; } });
-var bulk_actions_test_1 = require("./bulk-actions-test");
-Object.defineProperty(exports, "BulkActionsTest", { enumerable: true, get: function () { return bulk_actions_test_1.BulkActionsTest; } });
-var server_side_fetching_example_1 = require("./server-side-fetching-example");
-Object.defineProperty(exports, "ServerSideFetchingExample", { enumerable: true, get: function () { return server_side_fetching_example_1.ServerSideFetchingExample; } });
-var simple_slots_example_1 = require("./simple-slots-example");
-Object.defineProperty(exports, "SimpleEnhancedSlotsExample", { enumerable: true, get: function () { return simple_slots_example_1.SimpleEnhancedSlotsExample; } });
-var server_side_test_1 = require("./server-side-test");
-Object.defineProperty(exports, "ServerSideTest", { enumerable: true, get: function () { return server_side_test_1.ServerSideTest; } });

package/src/lib/examples/selection-test-example.d.ts

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