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

package/lib/examples/crud-api-example.js

@@ -0,0 +1,321 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Stack, Typography, Box, TextField, Dialog, DialogTitle, DialogContent, DialogActions, MenuItem, Select, FormControl, InputLabel, } from '@mui/material';
+import { useRef, useCallback, useState } from 'react';
+import { DataTable } from '../components/table/data-table';
+// Simulate API data
+const initialData = [
+    {
+        id: 1,
+        name: 'John Doe',
+        email: 'john@example.com',
+        status: 'active',
+        role: 'admin',
+        created: '2024-01-01',
+        lastLogin: '2024-01-15',
+    },
+    {
+        id: 2,
+        name: 'Jane Smith',
+        email: 'jane@example.com',
+        status: 'inactive',
+        role: 'user',
+        created: '2024-01-02',
+        lastLogin: '2024-01-10',
+    },
+    {
+        id: 3,
+        name: 'Bob Johnson',
+        email: 'bob@example.com',
+        status: 'active',
+        role: 'manager',
+        created: '2024-01-03',
+        lastLogin: '2024-01-14',
+    },
+    {
+        id: 4,
+        name: 'Alice Brown',
+        email: 'alice@example.com',
+        status: 'pending',
+        role: 'user',
+        created: '2024-01-04',
+    },
+    {
+        id: 5,
+        name: 'Charlie Wilson',
+        email: 'charlie@example.com',
+        status: 'active',
+        role: 'user',
+        created: '2024-01-05',
+        lastLogin: '2024-01-12',
+    },
+];
+const columns = [
+    {
+        id: 'name',
+        accessorKey: 'name',
+        header: 'Name',
+        size: 150,
+    },
+    {
+        id: 'email',
+        accessorKey: 'email',
+        header: 'Email',
+        size: 200,
+    },
+    {
+        id: 'status',
+        accessorKey: 'status',
+        header: 'Status',
+        size: 100,
+        cell: ({ getValue }) => {
+            const status = getValue();
+            const colors = {
+                active: '#4caf50',
+                inactive: '#f44336',
+                pending: '#ff9800',
+            };
+            return (_jsx("span", { style: {
+                    color: colors[status],
+                    fontWeight: 'bold',
+                    textTransform: 'capitalize',
+                }, children: status }));
+        },
+    },
+    {
+        id: 'role',
+        accessorKey: 'role',
+        header: 'Role',
+        size: 100,
+    },
+    {
+        id: 'created',
+        accessorKey: 'created',
+        header: 'Created',
+        size: 120,
+    },
+    {
+        id: 'lastLogin',
+        accessorKey: 'lastLogin',
+        header: 'Last Login',
+        size: 120,
+        cell: ({ getValue }) => getValue() || 'Never',
+    },
+];
+export function CrudApiExample() {
+    const dataTableRef = useRef(null);
+    const [data, setData] = useState(initialData);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editUser, setEditUser] = useState({});
+    // Handle data changes from the table
+    const handleDataChange = useCallback((newData) => {
+        setData(newData);
+        console.log('Data changed:', newData);
+        // Here you would typically sync with your API
+        // await updateUsersAPI(newData);
+    }, []);
+    // CRUD Operations Examples
+    // Get Data Operations
+    const handleGetAllData = useCallback(() => {
+        const allData = dataTableRef.current?.data.getAllData();
+        console.log('All data:', allData);
+        alert(`Total users: ${allData?.length}. Check console for details.`);
+    }, []);
+    const handleGetUserById = useCallback(() => {
+        const userId = prompt('Enter user ID:');
+        if (userId) {
+            const user = dataTableRef.current?.data.getRowData(userId);
+            console.log('User found:', user);
+            alert(user ? `Found: ${user.name} (${user.email})` : 'User not found');
+        }
+    }, []);
+    const handleGetUserByIndex = useCallback(() => {
+        const index = prompt('Enter row index (0-based):');
+        if (index !== null) {
+            const user = dataTableRef.current?.data.getRowByIndex(parseInt(index));
+            console.log('User at index:', user);
+            alert(user ? `User at index ${index}: ${user.name}` : 'No user at that index');
+        }
+    }, []);
+    const handleFindActiveUsers = useCallback(() => {
+        const activeUsers = dataTableRef.current?.data.findRows(user => user.status === 'active');
+        console.log('Active users:', activeUsers);
+        alert(`Found ${activeUsers?.length} active users. Check console for details.`);
+    }, []);
+    // Update Operations
+    const handleUpdateUserStatus = useCallback(() => {
+        const userId = prompt('Enter user ID to update status:');
+        if (userId) {
+            const user = dataTableRef.current?.data.getRowData(userId);
+            if (user) {
+                const newStatus = prompt('Enter new status (active/inactive/pending):');
+                if (newStatus && [
+                    'active',
+                    'inactive',
+                    'pending',
+                ].includes(newStatus)) {
+                    dataTableRef.current?.data.updateField(userId, 'status', newStatus);
+                    // If activating user, update last login
+                    if (newStatus === 'active') {
+                        dataTableRef.current?.data.updateField(userId, 'lastLogin', new Date().toISOString().split('T')[0]);
+                    }
+                }
+            }
+            else {
+                alert('User not found');
+            }
+        }
+    }, []);
+    const handleUpdateUserByIndex = useCallback(() => {
+        const index = prompt('Enter row index to update:');
+        if (index !== null) {
+            const user = dataTableRef.current?.data.getRowByIndex(parseInt(index));
+            if (user) {
+                setEditUser(user);
+                setDialogOpen(true);
+            }
+            else {
+                alert('No user at that index');
+            }
+        }
+    }, []);
+    const handleBulkUpdateStatus = useCallback(() => {
+        const selectionState = dataTableRef.current?.selection.getSelectionState();
+        if (selectionState?.ids.length) {
+            const newStatus = prompt('Enter new status for selected users (active/inactive/pending):');
+            if (newStatus && [
+                'active',
+                'inactive',
+                'pending',
+            ].includes(newStatus)) {
+                // Get the selected user IDs and update them
+                const updates = selectionState.ids.map(id => ({
+                    rowId: id,
+                    data: { status: newStatus },
+                }));
+                dataTableRef.current?.data.updateMultipleRows(updates);
+            }
+        }
+        else {
+            alert('Please select users first');
+        }
+    }, []);
+    // Insert Operations
+    const handleAddNewUser = useCallback(() => {
+        const name = prompt('Enter user name:');
+        const email = prompt('Enter user email:');
+        if (name && email) {
+            const newUser = {
+                id: Math.max(...data.map(u => u.id)) + 1,
+                name,
+                email,
+                status: 'pending',
+                role: 'user',
+                created: new Date().toISOString().split('T')[0],
+            };
+            // Insert at the beginning
+            dataTableRef.current?.data.insertRow(newUser, 0);
+        }
+    }, [data]);
+    const handleInsertMultipleUsers = useCallback(() => {
+        const count = prompt('How many test users to add?');
+        if (count) {
+            const numUsers = parseInt(count);
+            const newUsers = [];
+            const maxId = Math.max(...data.map(u => u.id));
+            for (let i = 1; i <= numUsers; i++) {
+                newUsers.push({
+                    id: maxId + i,
+                    name: `Test User ${i}`,
+                    email: `test${i}@example.com`,
+                    status: 'pending',
+                    role: 'user',
+                    created: new Date().toISOString().split('T')[0],
+                });
+            }
+            dataTableRef.current?.data.insertMultipleRows(newUsers);
+        }
+    }, [data]);
+    // Delete Operations
+    const handleDeleteUser = useCallback(() => {
+        const userId = prompt('Enter user ID to delete:');
+        if (userId) {
+            const user = dataTableRef.current?.data.getRowData(userId);
+            if (user) {
+                const confirmed = window.confirm(`Delete user "${user.name}"?`);
+                if (confirmed) {
+                    dataTableRef.current?.data.deleteRow(userId);
+                }
+            }
+            else {
+                alert('User not found');
+            }
+        }
+    }, []);
+    const handleDeleteSelected = useCallback(() => {
+        const selectionState = dataTableRef.current?.selection.getSelectionState();
+        if (selectionState?.ids.length) {
+            const confirmed = window.confirm(`Delete ${selectionState.ids.length} selected users?`);
+            if (confirmed) {
+                dataTableRef.current?.data.deleteSelectedRows();
+            }
+        }
+        else {
+            alert('Please select users first');
+        }
+    }, []);
+    const handleDeleteInactiveUsers = useCallback(() => {
+        const inactiveUsers = data.filter(user => user.status === 'inactive');
+        if (inactiveUsers.length > 0) {
+            const confirmed = window.confirm(`Delete ${inactiveUsers.length} inactive users?`);
+            if (confirmed) {
+                const inactiveIds = inactiveUsers.map(user => String(user.id));
+                dataTableRef.current?.data.deleteMultipleRows(inactiveIds);
+            }
+        }
+        else {
+            alert('No inactive users to delete');
+        }
+    }, [data]);
+    // Dialog handlers
+    const handleDialogSave = useCallback(() => {
+        if (editUser.id !== undefined) {
+            const index = data.findIndex(user => user.id === editUser.id);
+            if (index !== -1) {
+                dataTableRef.current?.data.updateRowByIndex(index, editUser);
+            }
+        }
+        setDialogOpen(false);
+        setEditUser({});
+    }, [editUser, data]);
+    // Simulate API operations
+    const handleSimulateApiRefresh = useCallback(async () => {
+        // Simulate API call
+        console.log('Simulating API refresh...');
+        // Add some random data changes
+        const updatedData = data.map(user => ({
+            ...user,
+            lastLogin: user.status === 'active' ? new Date().toISOString().split('T')[0] : user.lastLogin,
+        }));
+        // Update data through ref API
+        dataTableRef.current?.data.replaceAllData(updatedData);
+        alert('Data refreshed from "API"');
+    }, [data]);
+    return (_jsxs(Box, { sx: { p: 3 }, children: [_jsx(Typography, { variant: "h4", gutterBottom: true, children: "DataTable CRUD API Example" }), _jsx(Typography, { variant: "body1", sx: { mb: 3 }, children: "This example demonstrates comprehensive CRUD operations using the DataTable ref API. Perfect for real-world scenarios with API integration." }), _jsxs(Stack, { spacing: 2, sx: { mb: 3 }, children: [_jsx(Typography, { variant: "h6", children: "Data Retrieval" }), _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: [_jsx(Button, { variant: "outlined", onClick: handleGetAllData, children: "Get All Data" }), _jsx(Button, { variant: "outlined", onClick: handleGetUserById, children: "Get User by ID" }), _jsx(Button, { variant: "outlined", onClick: handleGetUserByIndex, children: "Get User by Index" }), _jsx(Button, { variant: "outlined", onClick: handleFindActiveUsers, children: "Find Active Users" })] }), _jsx(Typography, { variant: "h6", children: "Data Updates" }), _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: [_jsx(Button, { variant: "outlined", onClick: handleUpdateUserStatus, children: "Update User Status" }), _jsx(Button, { variant: "outlined", onClick: handleUpdateUserByIndex, children: "Edit User by Index" }), _jsx(Button, { variant: "outlined", onClick: handleBulkUpdateStatus, children: "Bulk Update Selected" })] }), _jsx(Typography, { variant: "h6", children: "Data Insertion" }), _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: [_jsx(Button, { variant: "outlined", onClick: handleAddNewUser, children: "Add New User" }), _jsx(Button, { variant: "outlined", onClick: handleInsertMultipleUsers, children: "Insert Multiple Users" })] }), _jsx(Typography, { variant: "h6", children: "Data Deletion" }), _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: [_jsx(Button, { variant: "outlined", color: "error", onClick: handleDeleteUser, children: "Delete User by ID" }), _jsx(Button, { variant: "outlined", color: "error", onClick: handleDeleteSelected, children: "Delete Selected" }), _jsx(Button, { variant: "outlined", color: "error", onClick: handleDeleteInactiveUsers, children: "Delete Inactive Users" })] }), _jsx(Typography, { variant: "h6", children: "API Simulation" }), _jsx(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", children: _jsx(Button, { variant: "contained", onClick: handleSimulateApiRefresh, children: "Simulate API Refresh" }) })] }), _jsx(Box, { sx: {
+                    mb: 2,
+                    p: 2,
+                    bgcolor: 'grey.100',
+                    borderRadius: 1,
+                }, children: _jsxs(Typography, { variant: "body2", children: ["Total Users:", ' ', data.length, ' ', "| Active:", ' ', data.filter(u => u.status === 'active').length, ' ', "| Inactive:", ' ', data.filter(u => u.status === 'inactive').length, ' ', "| Pending:", ' ', data.filter(u => u.status === 'pending').length] }) }), _jsx(DataTable, { ref: dataTableRef, columns: columns, data: data, onDataChange: handleDataChange, enableRowSelection: true, enableColumnResizing: true, draggable: true, enableColumnPinning: true, enableSorting: true, enableGlobalFilter: true, enableColumnFilters: true, enablePagination: true }), _jsxs(Dialog, { open: dialogOpen, onClose: () => setDialogOpen(false), maxWidth: "sm", fullWidth: true, children: [_jsx(DialogTitle, { children: "Edit User" }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 2, sx: { mt: 1 }, children: [_jsx(TextField, { label: "Name", value: editUser.name || '', onChange: (e) => setEditUser(prev => ({
+                                        ...prev,
+                                        name: e.target.value,
+                                    })), fullWidth: true }), _jsx(TextField, { label: "Email", value: editUser.email || '', onChange: (e) => setEditUser(prev => ({
+                                        ...prev,
+                                        email: e.target.value,
+                                    })), fullWidth: true }), _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { children: "Status" }), _jsxs(Select, { value: editUser.status || '', onChange: (e) => setEditUser(prev => ({
+                                                ...prev,
+                                                status: e.target.value,
+                                            })), children: [_jsx(MenuItem, { value: "active", children: "Active" }), _jsx(MenuItem, { value: "inactive", children: "Inactive" }), _jsx(MenuItem, { value: "pending", children: "Pending" })] })] }), _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { children: "Role" }), _jsxs(Select, { value: editUser.role || '', onChange: (e) => setEditUser(prev => ({
+                                                ...prev,
+                                                role: e.target.value,
+                                            })), children: [_jsx(MenuItem, { value: "admin", children: "Admin" }), _jsx(MenuItem, { value: "manager", children: "Manager" }), _jsx(MenuItem, { value: "user", children: "User" })] })] })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => setDialogOpen(false), children: "Cancel" }), _jsx(Button, { onClick: handleDialogSave, variant: "contained", children: "Save" })] })] })] }));
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"custom-column-filter-example.d.ts","sourceRoot":"","sources":["../../../src/lib/examples/custom-column-filter-example.tsx"],"names":[],"mappings":"AAmEA,wBAAgB,yBAAyB,4CA0BxC"}

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

@@ -0,0 +1,60 @@
+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';
+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',
+    },
+];
+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) => {
+                    console.log('Custom Column Filter State Changed:', filterState);
+                } })] }));
+}

package/lib/examples/custom-selection-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-selection-example.d.ts","sourceRoot":"","sources":["../../../src/lib/examples/custom-selection-example.tsx"],"names":[],"mappings":"AAgCA,wBAAgB,sBAAsB,4CA8SrC"}

package/lib/examples/custom-selection-example.js

@@ -0,0 +1,184 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Example demonstrating the Custom Selection Feature with isRowSelectable
+ *
+ * This shows how to use the simple isRowSelectable prop to control which rows can be selected,
+ * similar to MUI DataGrid's approach.
+ */
+import { useState, useCallback, useMemo, createElement } from 'react';
+import { DataTable } from '../components/table/data-table';
+import { CustomSelectionManager } from '../features';
+import { Checkbox } from '@mui/material';
+const mockUsers = [
+    { id: 1, name: 'John Doe', email: 'john@example.com', role: 'admin', usage: 75000 },
+    { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'user', usage: 45000, isLocked: true },
+    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'viewer', usage: 25000 },
+    { id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'user', usage: 85000 },
+    { id: 5, name: 'Charlie Wilson', email: 'charlie@example.com', role: 'admin', usage: 35000, isLocked: true },
+    { id: 6, name: 'Diana Prince', email: 'diana@example.com', role: 'user', usage: 95000 },
+    { id: 7, name: 'Bruce Wayne', email: 'bruce@example.com', role: 'admin', usage: 65000 },
+    { id: 8, name: 'Clark Kent', email: 'clark@example.com', role: 'viewer', usage: 15000 },
+];
+export function CustomSelectionExample() {
+    const [users] = useState(mockUsers);
+    const [mode, setMode] = useState('page');
+    const [currentSelection, setCurrentSelection] = useState({
+        ids: [],
+        idsSet: new Set(),
+        type: 'include'
+    });
+    // Row disable modes demonstration
+    const [disableMode, setDisableMode] = useState('none');
+    // Create isRowSelectable function based on mode (like MUI DataGrid)
+    const isRowSelectable = useMemo(() => {
+        switch (disableMode) {
+            case 'locked-users':
+                return ({ row }) => !row.isLocked;
+            case 'viewers':
+                return ({ row }) => row.role !== 'viewer';
+            case 'low-usage':
+                return ({ row }) => row.usage > 50000;
+            default:
+                return undefined; // All rows selectable
+        }
+    }, [disableMode]);
+    // Initialize custom selection manager
+    const selectionManager = useMemo(() => {
+        const manager = new CustomSelectionManager({ ids: [], type: 'include' }, mode, undefined, // Table ref will be set automatically by special columns
+        isRowSelectable // Pass isRowSelectable to constructor
+        );
+        // Enhanced callback with Set for performance
+        manager.onChange((state, tableRef) => {
+            console.log('Selection changed (with Set):', {
+                selectedIds: state.ids,
+                selectedSet: state.idsSet,
+                type: state.type,
+                totalSelected: state.idsSet.size,
+                tableRef: !!tableRef
+            });
+            setCurrentSelection(state);
+        });
+        return manager;
+    }, [mode, isRowSelectable]);
+    // Update manager when mode or isRowSelectable changes
+    useMemo(() => {
+        selectionManager.setSelectionMode(mode);
+        selectionManager.setIsRowSelectable(isRowSelectable);
+    }, [selectionManager, mode, isRowSelectable]);
+    // Define columns with custom selection column
+    const columns = useMemo(() => [
+        // Custom selection column
+        {
+            id: 'selection',
+            header: () => {
+                const allSelected = selectionManager.isAllSelected();
+                const someSelected = selectionManager.isSomeSelected();
+                return createElement(Checkbox, {
+                    checked: allSelected,
+                    indeterminate: someSelected && !allSelected,
+                    onChange: () => selectionManager.toggleSelectAll(),
+                    size: 'small',
+                    sx: { p: 0 },
+                    title: 'Select/Deselect All'
+                });
+            },
+            cell: ({ row }) => {
+                const rowId = String(row.original.id);
+                const checked = selectionManager.isRowSelected(rowId);
+                const canSelect = isRowSelectable
+                    ? isRowSelectable({ row: row.original, id: rowId })
+                    : true;
+                return createElement(Checkbox, {
+                    checked,
+                    disabled: !canSelect,
+                    onChange: () => {
+                        if (canSelect) {
+                            selectionManager.toggleRowSelection(rowId);
+                        }
+                    },
+                    size: 'small',
+                    sx: {
+                        p: 0,
+                        opacity: canSelect ? 1 : 0.5
+                    },
+                    title: canSelect ? 'Click to toggle selection' : 'This row cannot be selected'
+                });
+            },
+            size: 50,
+        },
+        {
+            accessorKey: 'id',
+            header: 'ID',
+            size: 80,
+        },
+        {
+            accessorKey: 'name',
+            header: 'Name',
+            size: 150,
+            cell: ({ getValue, row }) => {
+                const name = getValue();
+                const user = row.original;
+                return (_jsxs("span", { children: [name, " ", user.isLocked && '🔒'] }));
+            },
+        },
+        {
+            accessorKey: 'email',
+            header: 'Email',
+            size: 200,
+        },
+        {
+            accessorKey: 'role',
+            header: 'Role',
+            size: 100,
+            cell: ({ getValue }) => {
+                const role = getValue();
+                const colors = {
+                    admin: '#9c27b0',
+                    user: '#2196f3',
+                    viewer: '#757575',
+                };
+                return (_jsx("span", { style: { color: colors[role], fontWeight: 'bold' }, children: role }));
+            },
+        },
+        {
+            accessorKey: 'usage',
+            header: 'Usage',
+            size: 120,
+            cell: ({ getValue }) => {
+                const usage = getValue();
+                const color = usage > 50000 ? '#4caf50' : '#ff9800';
+                return (_jsx("span", { style: { color, fontWeight: 'bold' }, children: usage.toLocaleString() }));
+            },
+        },
+    ], [selectionManager, isRowSelectable]);
+    const handleSelectionChange = useCallback((selection) => {
+        console.log('Selection state changed:', selection);
+    }, []);
+    return (_jsxs("div", { style: { padding: '20px', maxWidth: '1200px', margin: '0 auto' }, children: [_jsx("h2", { children: "Custom Selection Example with isRowSelectable" }), _jsxs("p", { children: ["This example demonstrates the simple ", _jsx("code", { children: "isRowSelectable" }), " prop that works like MUI DataGrid to control which rows can be selected."] }), _jsxs("div", { style: {
+                    display: 'flex',
+                    gap: '20px',
+                    marginBottom: '20px',
+                    padding: '15px',
+                    backgroundColor: '#f5f5f5',
+                    borderRadius: '8px'
+                }, children: [_jsx("div", { children: _jsxs("label", { children: [_jsx("strong", { children: "Selection Mode:" }), _jsxs("select", { value: mode, onChange: (e) => setMode(e.target.value), style: { marginLeft: '8px', padding: '4px' }, children: [_jsx("option", { value: "page", children: "Page Mode" }), _jsx("option", { value: "all", children: "All Mode" })] })] }) }), _jsx("div", { children: _jsxs("label", { children: [_jsx("strong", { children: "Row Selection Rules:" }), _jsxs("select", { value: disableMode, onChange: (e) => setDisableMode(e.target.value), style: { marginLeft: '8px', padding: '4px' }, children: [_jsx("option", { value: "none", children: "All Selectable \u2705" }), _jsx("option", { value: "locked-users", children: "Disable Locked Users \uD83D\uDD12" }), _jsx("option", { value: "viewers", children: "Disable Viewers \uD83D\uDC41\uFE0F" }), _jsx("option", { value: "low-usage", children: "Disable Low Usage (<50k) \uD83D\uDCC9" })] })] }) })] }), _jsxs("div", { style: {
+                    display: 'flex',
+                    gap: '15px',
+                    marginBottom: '20px',
+                    flexWrap: 'wrap'
+                }, children: [_jsx("button", { onClick: () => selectionManager.selectAll(), style: { padding: '8px 16px', backgroundColor: '#2196f3', color: 'white', border: 'none', borderRadius: '4px' }, children: "Select All" }), _jsx("button", { onClick: () => selectionManager.deselectAll(), style: { padding: '8px 16px', backgroundColor: '#f44336', color: 'white', border: 'none', borderRadius: '4px' }, children: "Deselect All" }), _jsx("button", { onClick: () => {
+                            console.time('Bulk Select All (Set-based)');
+                            selectionManager.selectAll();
+                            console.timeEnd('Bulk Select All (Set-based)');
+                            console.log('Selected all selectable rows automatically!');
+                        }, style: { padding: '8px 16px', backgroundColor: '#ff9800', color: 'white', border: 'none', borderRadius: '4px' }, children: "\uD83D\uDE80 Select All Selectable (Performance Test)" })] }), _jsx("div", { style: { marginBottom: '20px', height: '400px' }, children: _jsx(DataTable, { ref: (tableRef) => {
+                        if (tableRef) {
+                            selectionManager.setTableRef(tableRef);
+                        }
+                    }, data: users, columns: columns, idKey: "id", loading: false, enableRowSelection: false, tableSize: "small", onSelectionChange: handleSelectionChange }) }), _jsxs("div", { style: {
+                    padding: '15px',
+                    backgroundColor: '#f9f9f9',
+                    borderRadius: '8px',
+                    border: '1px solid #ddd'
+                }, children: [_jsx("h3", { children: "Selection State (Real-time)" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }, children: [_jsxs("div", { children: [_jsx("h4", { children: "Current Selection:" }), _jsxs("p", { children: [_jsx("strong", { children: "Count:" }), " ", currentSelection.idsSet.size] }), _jsxs("p", { children: [_jsx("strong", { children: "Type:" }), " ", currentSelection.type] }), _jsxs("p", { children: [_jsx("strong", { children: "IDs:" }), " [", currentSelection.ids.join(', '), "]"] })] }), _jsxs("div", { children: [_jsx("strong", { children: "Selection Rules:" }), _jsxs("p", { children: [disableMode === 'none' && 'All rows are selectable ✅', disableMode === 'locked-users' && 'Locked users 🔒 cannot be selected', disableMode === 'viewers' && 'Viewer role 👁️ users cannot be selected', disableMode === 'low-usage' && 'Users with usage < 50k 📉 cannot be selected'] }), isRowSelectable && (_jsxs("small", { style: { color: '#666' }, children: ["Selectable rows: ", users.filter(user => isRowSelectable({ row: user, id: String(user.id) })).length, " / ", users.length] }))] })] }), _jsx("h4", { children: "Performance Features:" }), _jsxs("ul", { style: { margin: 0 }, children: [_jsx("li", { children: "\u2705 Set-based operations for O(1) lookups" }), _jsxs("li", { children: ["\u2705 Bulk operations with ", _jsx("code", { children: "selectRows()" })] }), _jsxs("li", { children: ["\u2705 Simple row disable with ", _jsx("code", { children: "isRowSelectable" })] }), _jsx("li", { children: "\u2705 Compatible with both 'page' and 'all' selection modes" }), _jsx("li", { children: "\u2705 Clean API similar to MUI DataGrid" })] })] })] }));
+}

package/lib/examples/export-callbacks-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"export-callbacks-example.d.ts","sourceRoot":"","sources":["../../../src/lib/examples/export-callbacks-example.tsx"],"names":[],"mappings":"AA4DA,wBAAgB,sBAAsB,4CAqTrC"}