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

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

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

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

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

package/{lib → src/lib}/contexts/data-table-context.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Example: Custom Column Filter Feature Usage
- */
-import { useState } from 'react';
-import { Box, Typography } from '@mui/material';
-import { DataTable } from '../components/table/data-table';
+"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 },
@@ -52,9 +52,9 @@ const columns = [
         type: 'boolean',
     },
 ];
-export function CustomColumnFilterExample() {
-    const [data] = useState(sampleData);
-    return (_jsxs(Box, { sx: { p: 3 }, children: [_jsx(Typography, { variant: "h4", gutterBottom: true, children: "Custom Column Filter Feature Example" }), _jsx(Typography, { variant: "body1", sx: { mb: 3 }, children: "Click the filter icon in the toolbar to test the custom column filter feature." }), _jsx(DataTable, { data: data, columns: columns, enableColumnFilter: true, enableGlobalFilter: true, enablePagination: true, enableSorting: true, onColumnFiltersChange: (filterState) => {
+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.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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; } });

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

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

package/src/lib/examples/selection-test-example.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionTestExample = SelectionTestExample;
+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 generateSampleData = () => {
+    const departments = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'];
+    const firstNames = ['John', 'Jane', 'Bob', 'Alice', 'Charlie', 'Diana', 'Eva', 'Frank', 'Grace', 'Henry'];
+    const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez'];
+    return Array.from({ length: 25 }, (_, index) => ({
+        id: index + 1,
+        name: `${firstNames[index % firstNames.length]} ${lastNames[index % lastNames.length]}`,
+        email: `user${index + 1}@example.com`,
+        department: departments[index % departments.length],
+        salary: 50000 + (index * 5000),
+        isActive: Math.random() > 0.3,
+    }));
+};
+const sampleData = generateSampleData();
+const columns = [
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        size: 150,
+    },
+    {
+        accessorKey: 'email',
+        header: 'Email',
+        size: 200,
+    },
+    {
+        accessorKey: 'department',
+        header: 'Department',
+        size: 120,
+    },
+    {
+        accessorKey: 'salary',
+        header: 'Salary',
+        size: 100,
+        cell: ({ getValue }) => `$${getValue().toLocaleString()}`,
+    },
+    {
+        accessorKey: 'isActive',
+        header: 'Status',
+        size: 100,
+        cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue() ? 'Active' : 'Inactive', color: getValue() ? 'success' : 'default', size: "small" })),
+    },
+];
+function SelectionTestExample() {
+    const [selectMode, setSelectMode] = (0, react_1.useState)('page');
+    const [selectionState, setSelectionState] = (0, react_1.useState)({
+        ids: [],
+        type: 'include',
+    });
+    const tableRef = (0, react_1.useRef)(null);
+    const handleSelectionChange = (0, react_1.useCallback)((newSelectionState) => {
+        setSelectionState(newSelectionState);
+    }, []);
+    const handleSelectAll = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.selection.selectAll();
+    }, []);
+    const handleDeselectAll = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.selection.deselectAll();
+    }, []);
+    const handleSelectFirst5 = (0, react_1.useCallback)(() => {
+        const firstFiveIds = sampleData.slice(0, 5).map(user => user.id.toString());
+        firstFiveIds.forEach(id => {
+            var _a;
+            (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.selection.selectRow(id);
+        });
+    }, []);
+    const handleToggleRow = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.selection.toggleRowSelection('3');
+    }, []);
+    const isRowSelectable = (0, react_1.useCallback)(({ row }) => {
+        return row.salary <= 100000;
+    }, []);
+    const selectedCount = selectionState.ids.length;
+    const selectedType = selectionState.type;
+    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: "Selection Test Example" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", sx: { mb: 3 }, children: "Test the custom selection feature with different modes and operations. Users with salary > $100,000 are disabled for selection." }), (0, jsx_runtime_1.jsx)(material_1.Paper, { sx: { p: 2, mb: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Selection Mode" }), (0, jsx_runtime_1.jsxs)(material_1.Select, { value: selectMode, label: "Selection Mode", onChange: (e) => setSelectMode(e.target.value), children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "page", children: "Page Mode" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "all", children: "All Mode" })] })] }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleSelectAll, children: "Select All" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleDeselectAll, children: "Deselect All" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleSelectFirst5, children: "Select First 5" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleToggleRow, children: "Toggle User #3" })] }) }), (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: "Current Selection State" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 2 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Mode:" }), " ", selectMode] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Type:" }), " ", selectedType] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Count:" }), " ", selectedCount] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", sx: { gridColumn: '1 / -1' }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "IDs:" }), " ", selectionState.ids.join(', ') || 'None'] })] })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { my: 2 } }), (0, jsx_runtime_1.jsx)(components_1.DataTable, { ref: tableRef, data: sampleData, totalRow: sampleData.length, columns: columns, enableRowSelection: true, enableMultiRowSelection: true, selectMode: selectMode, isRowSelectable: isRowSelectable, onSelectionChange: handleSelectionChange, enablePagination: true, initialState: {
+                    pagination: {
+                        pageIndex: 0,
+                        pageSize: 10,
+                    },
+                }, 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: () => {
+                                const count = selectionState.type === 'include'
+                                    ? selectionState.ids.length
+                                    : sampleData.length - selectionState.ids.length;
+                                alert(`Exporting ${count} selected users (${selectionState.type} mode)`);
+                            }, children: "\uD83D\uDCE4 Export Selected" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", color: "error", onClick: () => {
+                                const count = selectionState.type === 'include'
+                                    ? selectionState.ids.length
+                                    : sampleData.length - selectionState.ids.length;
+                                alert(`Would delete ${count} selected users (${selectionState.type} mode)`);
+                            }, children: "\uD83D\uDDD1\uFE0F Delete Selected" })] })), enableSorting: true, enableGlobalFilter: true, 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: "Test Instructions:" }), (0, jsx_runtime_1.jsx)("br", {}), "1. Try selecting rows in \"Page\" mode, then switch pages - selections should be page-specific", (0, jsx_runtime_1.jsx)("br", {}), "2. Try \"All\" mode and select rows - this works across all pages", (0, jsx_runtime_1.jsx)("br", {}), "3. Note that users with salary > $100k are disabled (grayed out checkboxes)", (0, jsx_runtime_1.jsx)("br", {}), "4. Use the control buttons to test programmatic selection", (0, jsx_runtime_1.jsx)("br", {}), "5. Watch the \"Current Selection State\" panel to see how the selection data changes"] }) })] }));
+}

package/src/lib/examples/simple-local-example.d.ts

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