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

package/lib/examples/export-callbacks-example.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Alert, LinearProgress, Typography, Card, CardContent } from '@mui/material';
+import { useState, useRef } from 'react';
+import { DataTable } from '../components/table/data-table';
+// Sample data
+const sampleData = Array.from({ length: 1000 }, (_, i) => ({
+    id: i + 1,
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    age: Math.floor(Math.random() * 50) + 20,
+    city: [
+        'New York',
+        'London',
+        'Tokyo',
+        'Paris',
+        'Berlin',
+    ][Math.floor(Math.random() * 5)],
+    status: [
+        'Active',
+        'Inactive',
+        'Pending',
+    ][Math.floor(Math.random() * 3)],
+}));
+const columns = [
+    {
+        accessorKey: 'id',
+        header: 'ID',
+        size: 80,
+    },
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        size: 150,
+    },
+    {
+        accessorKey: 'email',
+        header: 'Email',
+        size: 200,
+    },
+    {
+        accessorKey: 'age',
+        header: 'Age',
+        size: 80,
+    },
+    {
+        accessorKey: 'city',
+        header: 'City',
+        size: 120,
+    },
+    {
+        accessorKey: 'status',
+        header: 'Status',
+        size: 100,
+    },
+];
+export function ExportCallbacksExample() {
+    const [exportProgress, setExportProgress] = useState(null);
+    const [exportStatus, setExportStatus] = useState('');
+    const [isExporting, setIsExporting] = useState(false);
+    const [exportResult, setExportResult] = useState(null);
+    const tableRef = useRef(null);
+    const handleExportProgress = (progress) => {
+        setExportProgress(progress);
+        setExportStatus(`Exporting... ${progress.percentage.toFixed(1)}%`);
+    };
+    const handleExportComplete = (result) => {
+        setExportProgress(null);
+        setExportResult(result);
+        setIsExporting(false);
+        setExportStatus(result.success
+            ? `✅ Export completed! ${result.totalRows} rows exported to ${result.filename}`
+            : '❌ Export failed');
+    };
+    const handleExportError = (error) => {
+        setExportProgress(null);
+        setIsExporting(false);
+        setExportStatus(`❌ Export error: ${error.message} (${error.code})`);
+    };
+    const handleExportCancel = () => {
+        setExportProgress(null);
+        setIsExporting(false);
+        setExportStatus('🚫 Export cancelled by user');
+    };
+    // Server export simulation
+    const handleServerExport = async (filters) => {
+        // Simulate server delay and chunked processing
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        // Return filtered data based on current filters
+        let filteredData = [...sampleData];
+        // Apply global filter if exists
+        if (filters?.globalFilter) {
+            const search = filters.globalFilter.toLowerCase();
+            filteredData = filteredData.filter(item => Object.values(item).some(value => String(value).toLowerCase().includes(search)));
+        }
+        // Apply sorting if exists
+        if (filters?.sorting?.length > 0) {
+            const sort = filters.sorting[0];
+            filteredData.sort((a, b) => {
+                const aVal = a[sort.id];
+                const bVal = b[sort.id];
+                if (aVal < bVal)
+                    return sort.desc ? 1 : -1;
+                if (aVal > bVal)
+                    return sort.desc ? -1 : 1;
+                return 0;
+            });
+        }
+        return {
+            data: filteredData,
+            total: filteredData.length,
+        };
+    };
+    const programmaticExport = async (format) => {
+        if (!tableRef.current)
+            return;
+        try {
+            setIsExporting(true);
+            setExportStatus(`Starting ${format.toUpperCase()} export...`);
+            if (format === 'csv') {
+                await tableRef.current.export.exportCSV({
+                    filename: 'programmatic-export',
+                    onlyVisibleColumns: true,
+                });
+            }
+            else {
+                await tableRef.current.export.exportExcel({
+                    filename: 'programmatic-export',
+                    onlyVisibleColumns: true,
+                });
+            }
+        }
+        catch (error) {
+            console.error('Programmatic export failed:', error);
+        }
+    };
+    return (_jsxs(Box, { sx: { p: 3 }, children: [_jsx(Typography, { variant: "h4", gutterBottom: true, children: "Export with Callbacks Example" }), _jsx(Typography, { variant: "body1", paragraph: true, children: "This example demonstrates:" }), _jsxs("ul", { children: [_jsx("li", { children: "Export progress callbacks" }), _jsx("li", { children: "Export completion/error handling" }), _jsx("li", { children: "Export cancellation" }), _jsx("li", { children: "Programmatic exports via ref API" }), _jsx("li", { children: "Background export processing (doesn't block UI)" }), _jsx("li", { children: "Server-side export with filters" })] }), _jsx(Card, { sx: { mb: 3 }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Export Status" }), exportProgress ? (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Typography, { variant: "body2", gutterBottom: true, children: ["Progress:", ' ', exportProgress.processedRows, ' ', "/", ' ', exportProgress.totalRows, ' ', "rows"] }), _jsx(LinearProgress, { variant: "determinate", value: exportProgress.percentage, sx: {
+                                        height: 8,
+                                        borderRadius: 4,
+                                    } })] })) : null, exportStatus ? (_jsx(Alert, { severity: exportStatus.includes('❌') ? 'error' :
+                                exportStatus.includes('🚫') ? 'warning' :
+                                    exportStatus.includes('✅') ? 'success' : 'info', sx: { mb: 2 }, children: exportStatus })) : null, exportResult ? (_jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["Last export:", ' ', exportResult.filename, ' ', "(", exportResult.totalRows, ' ', "rows)"] })) : null] }) }), _jsx(Card, { sx: { mb: 3 }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Programmatic Export (via Ref API)" }), _jsxs(Box, { sx: {
+                                display: 'flex',
+                                gap: 2,
+                            }, children: [_jsx(Button, { variant: "contained", onClick: () => programmaticExport('csv'), disabled: isExporting, children: "Export CSV (Ref API)" }), _jsx(Button, { variant: "contained", onClick: () => programmaticExport('excel'), disabled: isExporting, children: "Export Excel (Ref API)" }), _jsx(Button, { variant: "outlined", color: "warning", onClick: () => tableRef.current?.export.cancelExport(), disabled: !isExporting, children: "Cancel Export" })] })] }) }), _jsx(Card, { sx: { mb: 3 }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Client Mode Export (1000 rows in memory)" }), _jsx(DataTable, { ref: tableRef, data: sampleData, columns: columns, dataMode: "client", enableGlobalFilter: true, enableSorting: true, exportFilename: "client-export", onExportProgress: handleExportProgress, onExportComplete: handleExportComplete, onExportError: handleExportError, onExportCancel: handleExportCancel, enablePagination: true, initialState: {
+                                pagination: {
+                                    pageIndex: 0,
+                                    pageSize: 10,
+                                },
+                            } })] }) }), _jsx(Card, { children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Server Mode Export (simulated server data)" }), _jsx(DataTable, { data: sampleData.slice(0, 10), totalRow: sampleData.length, columns: columns, dataMode: "server", enableGlobalFilter: true, enableSorting: true, exportFilename: "server-export", onExportProgress: handleExportProgress, onExportComplete: handleExportComplete, onExportError: handleExportError, onExportCancel: handleExportCancel, onServerExport: handleServerExport, enablePagination: true, initialState: {
+                                pagination: {
+                                    pageIndex: 0,
+                                    pageSize: 10,
+                                },
+                            } })] }) }), _jsx(Alert, { severity: "info", sx: { mt: 3 }, children: _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Note:" }), ' ', "Export functionality works in the background. You can continue using the table, changing filters, or navigating pages during export. The export captures the current state when started and won't be affected by subsequent changes."] }) })] }));
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"improved-export-example.d.ts","sourceRoot":"","sources":["../../../src/lib/examples/improved-export-example.tsx"],"names":[],"mappings":"AAuHA,wBAAgB,qBAAqB,4CAgMpC"}

package/lib/examples/improved-export-example.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Alert, Typography, Card, CardContent, Button, Chip } from '@mui/material';
+import { useState, useRef } from 'react';
+import { DataTable } from '../components/table/data-table';
+// Sample data with complex values
+const sampleData = Array.from({ length: 100 }, (_, i) => ({
+    id: i + 1,
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    age: Math.floor(Math.random() * 50) + 20,
+    salary: Math.floor(Math.random() * 100000) + 30000,
+    joinDate: new Date(2020 + Math.floor(Math.random() * 4), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28)),
+    status: [
+        'Active',
+        'Inactive',
+        'Pending',
+    ][Math.floor(Math.random() * 3)],
+    metadata: {
+        department: [
+            'Engineering',
+            'Sales',
+            'Marketing',
+            'HR',
+        ][Math.floor(Math.random() * 4)],
+        skills: Math.floor(Math.random() * 10) + 1,
+    },
+}));
+// Columns using TanStack Table's built-in methods
+const columns = [
+    {
+        accessorKey: 'id',
+        header: 'ID',
+        size: 80,
+        exportHeader: 'User ID', // Custom export header
+    },
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        size: 150,
+    },
+    {
+        accessorKey: 'email',
+        header: 'Email',
+        size: 200,
+    },
+    {
+        accessorKey: 'age',
+        header: 'Age',
+        size: 80,
+        // Use cell for custom display formatting
+        cell: ({ getValue }) => `${getValue()} years`,
+    },
+    {
+        accessorKey: 'salary',
+        header: 'Salary',
+        size: 120,
+        accessorFn: (row) => new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: 'USD',
+        }).format(row.salary),
+        exportHeader: 'Annual Salary', // Different header for export
+    },
+    {
+        accessorKey: 'joinDate',
+        header: 'Join Date',
+        size: 120,
+        // Use cell for custom display formatting
+        cell: ({ getValue }) => {
+            return new Date(getValue()).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+            });
+        },
+    },
+    {
+        accessorKey: 'status',
+        header: 'Status',
+        size: 100,
+        cell: ({ getValue }) => {
+            const status = getValue();
+            return (_jsx(Chip, { label: status, color: status === 'Active' ? 'success' : status === 'Inactive' ? 'error' : 'warning', size: "small" }));
+        },
+        // Export will show the raw status value, not the Chip component
+    },
+    {
+        id: 'department',
+        header: 'Department',
+        size: 120,
+        // Use accessorFn for custom data extraction
+        accessorFn: (row) => row.metadata?.department || 'N/A',
+        exportHeader: 'Employee Department',
+    },
+    {
+        id: 'skillLevel',
+        header: 'Skill Level',
+        size: 100,
+        // Use accessorFn for custom data extraction and cell for display formatting
+        cell: ({ getValue }) => {
+            const value = getValue();
+            if (value >= 8)
+                return 'Expert';
+            if (value >= 6)
+                return 'Advanced';
+            if (value >= 4)
+                return 'Intermediate';
+            return 'Beginner';
+        },
+        exportHeader: 'Skill Level Rating',
+    },
+];
+export function ImprovedExportExample() {
+    const [exportStatus, setExportStatus] = useState('');
+    const tableRef = useRef(null);
+    const handleExportComplete = (result) => {
+        setExportStatus(result.success
+            ? `✅ Export completed! ${result.totalRows} rows exported to ${result.filename}`
+            : '❌ Export failed');
+    };
+    const handleExportError = (error) => {
+        setExportStatus(`❌ Export error: ${error.message} (${error.code})`);
+    };
+    const programmaticExport = async (format) => {
+        if (!tableRef.current)
+            return;
+        try {
+            setExportStatus(`Starting ${format.toUpperCase()} export...`);
+            if (format === 'csv') {
+                await tableRef.current.export.exportCSV({
+                    filename: 'programmatic-export',
+                });
+            }
+            else {
+                await tableRef.current.export.exportExcel({
+                    filename: 'programmatic-export',
+                });
+            }
+        }
+        catch (error) {
+            console.error('Programmatic export failed:', error);
+        }
+    };
+    return (_jsxs(Box, { sx: { p: 3 }, children: [_jsx(Typography, { variant: "h4", gutterBottom: true, children: "Improved Export Example" }), _jsx(Typography, { variant: "body1", paragraph: true, children: "This example demonstrates the corrected export functionality that:" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Uses TanStack Table Logic:" }), ' ', "Uses accessorFn and cell rendering for data processing"] }), _jsxs("li", { children: [_jsx("strong", { children: "Only Visible Columns:" }), ' ', "Exports only visible columns"] }), _jsxs("li", { children: [_jsx("strong", { children: "Auto-Selected Rows:" }), ' ', "If rows are selected, exports only selected rows"] }), _jsxs("li", { children: [_jsx("strong", { children: "Custom Export Headers:" }), ' ', "Uses exportHeader property if defined"] }), _jsxs("li", { children: [_jsx("strong", { children: "Raw Data Export:" }), ' ', "Exports raw data values, not formatted display values"] })] }), _jsx(Alert, { severity: "info", sx: { mb: 3 }, children: _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Try this:" }), ' ', "Select some rows and then export. The export will automatically include only the selected rows. If no rows are selected, it exports all filtered rows."] }) }), exportStatus ? (_jsx(Alert, { severity: exportStatus.includes('❌') ? 'error' :
+                    exportStatus.includes('✅') ? 'success' : 'info', sx: { mb: 3 }, children: exportStatus })) : null, _jsx(Card, { sx: { mb: 3 }, children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Programmatic Export (via Ref API)" }), _jsxs(Box, { sx: {
+                                display: 'flex',
+                                gap: 2,
+                            }, children: [_jsx(Button, { variant: "contained", onClick: () => programmaticExport('csv'), children: "Export CSV (Ref API)" }), _jsx(Button, { variant: "contained", onClick: () => programmaticExport('excel'), children: "Export Excel (Ref API)" })] })] }) }), _jsx(Card, { children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "DataTable with Column-Based Export" }), _jsx(DataTable, { ref: tableRef, data: sampleData, totalRow: sampleData.length, columns: columns, dataMode: "client", enableGlobalFilter: true, enableSorting: true, enableRowSelection: true, enableMultiRowSelection: true, enableExport: true, exportFilename: "improved-export", onExportComplete: handleExportComplete, onExportError: handleExportError, enablePagination: true, initialState: {
+                                pagination: {
+                                    pageIndex: 0,
+                                    pageSize: 10,
+                                },
+                            } })] }) }), _jsx(Alert, { severity: "success", sx: { mt: 3 }, children: _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Export Features:" }), _jsx("br", {}), "\u2022 Salary exports as formatted currency (e.g., \"$65,000.00\")", _jsx("br", {}), "\u2022 Age exports with \"years\" suffix (e.g., \"25 years\")", _jsx("br", {}), "\u2022 Join Date exports as formatted date (e.g., \"Jan 15, 2022\")", _jsx("br", {}), "\u2022 Department extracts from nested metadata object", _jsx("br", {}), "\u2022 Skill Level converts numbers to text levels", _jsx("br", {}), "\u2022 Custom export headers replace display headers", _jsx("br", {}), "\u2022 Status shows raw value (not Chip component)"] }) })] }));
+}

package/lib/examples/improved-server-selection-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"improved-server-selection-example.d.ts","sourceRoot":"","sources":["../../../src/lib/examples/improved-server-selection-example.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,8BAA8B,+CAgM1C,CAAC"}

package/lib/examples/improved-server-selection-example.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from 'react';
+import { DataTable } from '../components/table/data-table';
+const MOCK_USERS = Array.from({ length: 500 }, (_, i) => ({
+    id: String(i + 1),
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    role: i % 3 === 0 ? 'Admin' : i % 3 === 1 ? 'Editor' : 'Viewer',
+    status: i % 4 === 0 ? 'inactive' : 'active',
+}));
+export const ImprovedServerSelectionExample = () => {
+    const [data, setData] = useState([]);
+    const [total, setTotal] = useState(500);
+    const [loading, setLoading] = useState(false);
+    const [selectionInfo, setSelectionInfo] = useState(null);
+    const apiRef = useRef(null);
+    const columns = [
+        {
+            id: 'name',
+            header: 'Name',
+            accessorKey: 'name',
+            enableGlobalFilter: true,
+        },
+        {
+            id: 'email',
+            header: 'Email',
+            accessorKey: 'email',
+            enableGlobalFilter: true,
+        },
+        {
+            id: 'role',
+            header: 'Role',
+            accessorKey: 'role',
+            enableGlobalFilter: true,
+        },
+        {
+            id: 'status',
+            header: 'Status',
+            accessorKey: 'status',
+            enableGlobalFilter: true,
+        },
+    ];
+    const fetchData = useCallback(async (filters) => {
+        console.log('Fetching data with filters:', filters);
+        setLoading(true);
+        // Simulate API call delay
+        await new Promise(resolve => setTimeout(resolve, 500));
+        const { pagination } = filters;
+        const pageIndex = pagination?.pageIndex || 0;
+        const pageSize = pagination?.pageSize || 50;
+        const startIndex = pageIndex * pageSize;
+        const endIndex = startIndex + pageSize;
+        const pageData = MOCK_USERS.slice(startIndex, endIndex);
+        setData(pageData);
+        setTotal(MOCK_USERS.length);
+        setLoading(false);
+        return {
+            data: pageData,
+            total: MOCK_USERS.length,
+        };
+    }, []);
+    // Server export function that handles selection
+    const fetchExportData = useCallback(async (filters, selection) => {
+        console.log('Exporting data with filters:', filters);
+        console.log('Export selection data:', selection);
+        // Simulate API call delay
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        let dataToExport = [...MOCK_USERS];
+        // Apply selection filtering
+        if (selection?.hasSelection) {
+            if (selection.selectAllMatching) {
+                // Export all except excluded
+                dataToExport = MOCK_USERS.filter(user => !selection.excludedIds.includes(user.id));
+            }
+            else {
+                // Export only selected
+                dataToExport = MOCK_USERS.filter(user => selection.selectedIds.includes(user.id));
+            }
+        }
+        return {
+            data: dataToExport,
+            total: dataToExport.length,
+        };
+    }, []);
+    const handleServerSelectionChange = useCallback((selection) => {
+        console.log('Server selection changed:', selection);
+        // Convert new selection state to old format for display compatibility
+        const legacyFormat = {
+            selectAllMatching: selection.type === 'exclude' && selection.ids.length === 0,
+            excludedIds: selection.type === 'exclude' ? selection.ids : [],
+            selectedIds: selection.type === 'include' ? selection.ids : [],
+            totalSelected: selection.type === 'exclude' ? (total - selection.ids.length) : selection.ids.length,
+        };
+        setSelectionInfo(legacyFormat);
+    }, [total]);
+    const handleRowSelectionChange = useCallback((selectedRows) => {
+        console.log('Row selection changed:', selectedRows.length, 'rows selected');
+        console.log('Selected row IDs:', selectedRows.map(row => row.id));
+    }, []);
+    const handleExportProgress = (progress) => {
+    };
+    const handleExportComplete = (result) => {
+        console.log('Export completed:', result);
+    };
+    const handleExportError = (error) => {
+        console.error('Export error:', error);
+    };
+    return (_jsxs("div", { className: "p-6", children: [_jsx("h2", { className: "text-2xl font-bold mb-4", children: "Improved Server Selection Example" }), selectionInfo && (_jsxs("div", { className: "mb-4 p-4 bg-blue-50 rounded-lg", children: [_jsx("h3", { className: "font-semibold mb-2", children: "Selection Info:" }), _jsxs("div", { className: "grid grid-cols-2 gap-2 text-sm", children: [_jsxs("div", { children: ["Select All Matching: ", selectionInfo.selectAllMatching ? 'Yes' : 'No'] }), _jsxs("div", { children: ["Total Selected: ", selectionInfo.totalSelected] }), _jsxs("div", { children: ["Selected IDs: ", selectionInfo.selectedIds.length] }), _jsxs("div", { children: ["Excluded IDs: ", selectionInfo.excludedIds.length] })] })] })), _jsxs("div", { className: "mb-4 space-x-2", children: [_jsx("button", { onClick: () => {
+                            const payload = apiRef.current?.selection.getSelectionState();
+                            console.log('Selection State:', payload);
+                        }, className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", children: "Get Selection Payload" }), _jsx("button", { onClick: () => {
+                            const selectionState = apiRef.current?.selection.getSelectionState();
+                            console.log('Selection State:', selectionState);
+                        }, className: "px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600", children: "Get Selection State" }), _jsx("button", { onClick: () => {
+                            const selectedCount = apiRef.current?.selection.getSelectedCount();
+                            console.log('Selected Count:', selectedCount);
+                        }, className: "px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600", children: "Get Selected Count" })] }), _jsx(DataTable, { ref: apiRef, columns: columns, data: data, totalRow: total, loading: loading, dataMode: "server", selectMode: "all", enableGlobalFilter: true, enableRowSelection: true, enableMultiRowSelection: true, onFetchData: fetchData, onRowSelectionChange: handleRowSelectionChange, onSelectionChange: handleServerSelectionChange, onServerExport: fetchExportData, exportFilename: "selected-users", onExportProgress: handleExportProgress, onExportComplete: handleExportComplete, onExportError: handleExportError, enableExport: true, enableBulkActions: true })] }));
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/examples/index.js

@@ -0,0 +1,5 @@
+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';

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

@@ -0,0 +1 @@
+{"version":3,"file":"selection-test-example.d.ts","sourceRoot":"","sources":["../../../src/lib/examples/selection-test-example.tsx"],"names":[],"mappings":"AAmFA,wBAAgB,oBAAoB,4CA+LnC"}

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

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from 'react';
+import { Box, Typography, Button, FormControl, InputLabel, Select, MenuItem, Chip, Paper, Divider, } from '@mui/material';
+import { DataTable } from '../components';
+// Generate sample data (25+ users for pagination testing)
+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, // 70% active
+    }));
+};
+const sampleData = generateSampleData();
+// Column definitions
+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 }) => (_jsx(Chip, { label: getValue() ? 'Active' : 'Inactive', color: getValue() ? 'success' : 'default', size: "small" })),
+    },
+];
+export function SelectionTestExample() {
+    const [selectMode, setSelectMode] = useState('page');
+    const [selectionState, setSelectionState] = useState({
+        ids: [],
+        type: 'include',
+    });
+    const tableRef = useRef(null);
+    // Handle selection state changes
+    const handleSelectionChange = useCallback((newSelectionState) => {
+        setSelectionState(newSelectionState);
+    }, []);
+    // Test selection operations
+    const handleSelectAll = useCallback(() => {
+        tableRef.current?.selection.selectAll();
+    }, []);
+    const handleDeselectAll = useCallback(() => {
+        tableRef.current?.selection.deselectAll();
+    }, []);
+    const handleSelectFirst5 = useCallback(() => {
+        // Select first 5 users manually
+        const firstFiveIds = sampleData.slice(0, 5).map(user => user.id.toString());
+        firstFiveIds.forEach(id => {
+            tableRef.current?.selection.selectRow(id);
+        });
+    }, []);
+    const handleToggleRow = useCallback(() => {
+        // Toggle selection of user with id 3
+        tableRef.current?.selection.toggleRowSelection('3');
+    }, []);
+    // Row selectability function - disable users with salary > 100000
+    // ⚠️ IMPORTANT: This must be memoized to prevent infinite re-renders
+    const isRowSelectable = useCallback(({ row }) => {
+        return row.salary <= 100000;
+    }, []);
+    // Get selection info for display
+    const selectedCount = selectionState.ids.length;
+    const selectedType = selectionState.type;
+    return (_jsxs(Box, { sx: { p: 3 }, children: [_jsx(Typography, { variant: "h4", gutterBottom: true, children: "Selection Test Example" }), _jsx(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." }), _jsx(Paper, { sx: { p: 2, mb: 3 }, children: _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }, children: [_jsxs(FormControl, { size: "small", sx: { minWidth: 120 }, children: [_jsx(InputLabel, { children: "Selection Mode" }), _jsxs(Select, { value: selectMode, label: "Selection Mode", onChange: (e) => setSelectMode(e.target.value), children: [_jsx(MenuItem, { value: "page", children: "Page Mode" }), _jsx(MenuItem, { value: "all", children: "All Mode" })] })] }), _jsx(Button, { variant: "outlined", onClick: handleSelectAll, children: "Select All" }), _jsx(Button, { variant: "outlined", onClick: handleDeselectAll, children: "Deselect All" }), _jsx(Button, { variant: "outlined", onClick: handleSelectFirst5, children: "Select First 5" }), _jsx(Button, { variant: "outlined", onClick: handleToggleRow, children: "Toggle User #3" })] }) }), _jsxs(Paper, { sx: { p: 2, mb: 3 }, children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Current Selection State" }), _jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 2 }, children: [_jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Mode:" }), " ", selectMode] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Type:" }), " ", selectedType] }), _jsxs(Typography, { variant: "body2", children: [_jsx("strong", { children: "Count:" }), " ", selectedCount] }), _jsxs(Typography, { variant: "body2", sx: { gridColumn: '1 / -1' }, children: [_jsx("strong", { children: "IDs:" }), " ", selectionState.ids.join(', ') || 'None'] })] })] }), _jsx(Divider, { sx: { my: 2 } }), _jsx(DataTable, { ref: tableRef, data: sampleData, totalRow: sampleData.length, columns: columns, 
+                // Enable selection
+                enableRowSelection: true, enableMultiRowSelection: true, selectMode: selectMode, isRowSelectable: isRowSelectable, onSelectionChange: handleSelectionChange, 
+                // Enable pagination to test page vs all modes
+                enablePagination: true, initialState: {
+                    pagination: {
+                        pageIndex: 0,
+                        pageSize: 10, // Show 10 rows per page
+                    },
+                }, 
+                // Enable bulk actions to test selection
+                enableBulkActions: true, bulkActions: (selectionState) => (_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(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" }), _jsx(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" })] })), 
+                // Table settings
+                enableSorting: true, enableGlobalFilter: true, fitToScreen: true }), _jsx(Box, { sx: { mt: 2 }, children: _jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["\uD83D\uDCA1 ", _jsx("strong", { children: "Test Instructions:" }), _jsx("br", {}), "1. Try selecting rows in \"Page\" mode, then switch pages - selections should be page-specific", _jsx("br", {}), "2. Try \"All\" mode and select rows - this works across all pages", _jsx("br", {}), "3. Note that users with salary > $100k are disabled (grayed out checkboxes)", _jsx("br", {}), "4. Use the control buttons to test programmatic selection", _jsx("br", {}), "5. Watch the \"Current Selection State\" panel to see how the selection data changes"] }) })] }));
+}

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

@@ -0,0 +1 @@
+{"version":3,"file":"simple-local-example.d.ts","sourceRoot":"","sources":["../../../src/lib/examples/simple-local-example.tsx"],"names":[],"mappings":"AAmFA,wBAAgB,kBAAkB,4CAqGjC"}