@ackplus/react-tanstack-data-table 1.0.35 → 1.1.3

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

@@ -1,101 +0,0 @@
-"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/server-side-fetching-example.d.ts

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

package/src/lib/examples/server-side-fetching-example.js

@@ -1,245 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServerSideFetchingExample = ServerSideFetchingExample;
-const tslib_1 = require("tslib");
-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 types_1 = require("../types");
-const MOCK_EMPLOYEES = Array.from({ length: 1000 }, (_, index) => {
-    const departments = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Operations'];
-    const roles = ['Manager', 'Senior', 'Junior', 'Lead', 'Director', 'Specialist'];
-    const firstNames = ['John', 'Jane', 'Bob', 'Alice', 'Charlie', 'Diana', 'Eve', 'Frank', 'Grace', 'Henry'];
-    const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez'];
-    const firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
-    const lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
-    return {
-        id: index + 1,
-        name: `${firstName} ${lastName}`,
-        email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}@company.com`,
-        department: departments[Math.floor(Math.random() * departments.length)],
-        role: roles[Math.floor(Math.random() * roles.length)],
-        salary: Math.floor(Math.random() * 80000) + 40000,
-        isActive: Math.random() > 0.15,
-        joinDate: new Date(2020 + Math.floor(Math.random() * 4), Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toISOString().split('T')[0],
-    };
-});
-function ServerSideFetchingExample() {
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
-    const [selectionInfo, setSelectionInfo] = (0, react_1.useState)(null);
-    const [lastFetchParams, setLastFetchParams] = (0, react_1.useState)(null);
-    const [fetchCount, setFetchCount] = (0, react_1.useState)(0);
-    const [tab, setTab] = (0, react_1.useState)('all');
-    const apiRef = (0, react_1.useRef)(null);
-    const handleFetchData = (0, react_1.useCallback)((filters) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-        var _a, _b, _c;
-        console.log('🔄 handleFetchData', { filters });
-        setLoading(true);
-        setError(null);
-        setLastFetchParams(filters);
-        setFetchCount(prev => prev + 1);
-        try {
-            yield new Promise(resolve => setTimeout(resolve, 300 + Math.random() * 500));
-            let filteredData = [...MOCK_EMPLOYEES];
-            if (filters.globalFilter) {
-                const searchTerm = filters.globalFilter.toLowerCase();
-                filteredData = filteredData.filter(employee => employee.name.toLowerCase().includes(searchTerm) ||
-                    employee.email.toLowerCase().includes(searchTerm) ||
-                    employee.department.toLowerCase().includes(searchTerm) ||
-                    employee.role.toLowerCase().includes(searchTerm));
-            }
-            if ((_b = (_a = filters.columnFilter) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.length) {
-                filteredData = filteredData.filter(employee => {
-                    return filters.columnFilter.filters.every((filter) => {
-                        const value = employee[filter.columnId];
-                        const filterValue = filter.value;
-                        switch (filter.operator) {
-                            case 'equals':
-                                return value === filterValue;
-                            case 'contains':
-                                return String(value).toLowerCase().includes(String(filterValue).toLowerCase());
-                            case 'startsWith':
-                                return String(value).toLowerCase().startsWith(String(filterValue).toLowerCase());
-                            case 'endsWith':
-                                return String(value).toLowerCase().endsWith(String(filterValue).toLowerCase());
-                            case 'greaterThan':
-                                return Number(value) > Number(filterValue);
-                            case 'lessThan':
-                                return Number(value) < Number(filterValue);
-                            default:
-                                return true;
-                        }
-                    });
-                });
-            }
-            if ((_c = filters.sorting) === null || _c === void 0 ? void 0 : _c.length) {
-                filteredData.sort((a, b) => {
-                    for (const sort of filters.sorting) {
-                        const aValue = a[sort.id];
-                        const bValue = b[sort.id];
-                        let comparison = 0;
-                        if (aValue < bValue)
-                            comparison = -1;
-                        else if (aValue > bValue)
-                            comparison = 1;
-                        if (comparison !== 0) {
-                            return sort.desc ? -comparison : comparison;
-                        }
-                    }
-                    return 0;
-                });
-            }
-            const total = filteredData.length;
-            let pageData = filteredData;
-            if (filters.pagination) {
-                const { pageIndex = 0, pageSize = 10 } = filters.pagination;
-                const start = pageIndex * pageSize;
-                const end = start + pageSize;
-                pageData = filteredData.slice(start, end);
-            }
-            return {
-                data: pageData,
-                total: total,
-            };
-        }
-        catch (err) {
-            console.error('❌ Error fetching data:', err);
-            setError('Failed to fetch data. Please try again.');
-            throw err;
-        }
-        finally {
-            setLoading(false);
-        }
-    }), [tab]);
-    const handleSelectionChange = (0, react_1.useCallback)((selection) => {
-        setSelectionInfo(selection);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        var _a;
-        if (tab) {
-            console.log('🔄 Refreshing data');
-            (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.data.refresh();
-        }
-    }, [tab]);
-    const handleServerExport = (0, react_1.useCallback)((filters, selection) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-        console.log('📤 Exporting data with filters:', filters);
-        console.log('📤 Export selection:', selection);
-        yield new Promise(resolve => setTimeout(resolve, 1000));
-        let exportData = [...MOCK_EMPLOYEES];
-        if (filters === null || filters === void 0 ? void 0 : filters.globalFilter) {
-            const searchTerm = filters.globalFilter.toLowerCase();
-            exportData = exportData.filter(employee => employee.name.toLowerCase().includes(searchTerm) ||
-                employee.email.toLowerCase().includes(searchTerm) ||
-                employee.department.toLowerCase().includes(searchTerm) ||
-                employee.role.toLowerCase().includes(searchTerm));
-        }
-        if (selection.type === 'include' && selection.ids.length > 0) {
-            exportData = exportData.filter(employee => selection.ids.includes(employee.id.toString()));
-        }
-        else if (selection.type === 'exclude' && selection.ids.length > 0) {
-            exportData = exportData.filter(employee => !selection.ids.includes(employee.id.toString()));
-        }
-        return {
-            data: exportData,
-            total: exportData.length,
-        };
-    }), []);
-    const columns = [
-        {
-            id: 'name',
-            accessorKey: 'name',
-            header: 'Name',
-            enableGlobalFilter: true,
-        },
-        {
-            id: 'email',
-            accessorKey: 'email',
-            header: 'Email',
-            enableGlobalFilter: true,
-        },
-        {
-            id: 'department',
-            accessorKey: 'department',
-            header: 'Department',
-            enableGlobalFilter: true,
-        },
-        {
-            id: 'role',
-            accessorKey: 'role',
-            header: 'Role',
-            enableGlobalFilter: true,
-        },
-        {
-            id: 'salary',
-            accessorKey: 'salary',
-            header: 'Salary',
-            accessorFn: (row) => `$${row.salary.toLocaleString()}`,
-            hideInExport: true,
-        },
-        {
-            id: 'isActive',
-            accessorKey: 'isActive',
-            header: 'Status',
-            accessorFn: (row) => row.isActive ? 'Active' : 'Inactive',
-            cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue() ? 'Active' : 'Inactive', color: getValue() ? 'success' : 'default', size: "small" })),
-        },
-        {
-            id: 'joinDate',
-            accessorKey: 'joinDate',
-            header: 'Join Date',
-            accessorFn: (row) => new Date(row.joinDate).toLocaleDateString(),
-        },
-    ];
-    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: "Server-Side Data Fetching Example" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", paragraph: true, children: "Demonstrates server-side data fetching with proper API ref state management and page-based selection. The Salary column has `hideInExport: true` so it will be excluded from exports." }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => setTab('all'), children: "All" }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => setTab('active'), children: "Active" }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => setTab('inactive'), children: "Inactive" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, sx: { mb: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Card, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { sx: { pb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "primary", children: fetchCount }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: "API Calls Made" })] }) }), (0, jsx_runtime_1.jsx)(material_1.Card, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { sx: { pb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "secondary", children: (selectionInfo === null || selectionInfo === void 0 ? void 0 : selectionInfo.ids.length) || 0 }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: "Selected Items" })] }) }), (0, jsx_runtime_1.jsx)(material_1.Card, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { sx: { pb: 2 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: loading ? 'warning.main' : 'success.main', children: loading ? 'Loading...' : 'Ready' }), loading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 16 })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: "Server Status" })] }) })] }), error && ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", sx: { mb: 3 }, children: error })), (0, jsx_runtime_1.jsx)(material_1.Card, { sx: { mb: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "API Controls (via apiRef)" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
-                                        var _a;
-                                        const state = (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.selection.getSelectionState();
-                                        console.log('Current Selection State:', state);
-                                        alert(`Selection: ${JSON.stringify(state, null, 2)}`);
-                                    }, children: "Get Selection State" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
-                                        var _a;
-                                        const count = (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.selection.getSelectedCount();
-                                        console.log('Selected Count:', count);
-                                        alert(`Selected Count: ${count}`);
-                                    }, children: "Get Selected Count" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
-                                        var _a;
-                                        (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.selection.selectAll();
-                                        console.log('Selected all rows on current page');
-                                    }, children: "Select All (Page)" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
-                                        var _a;
-                                        (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.selection.deselectAll();
-                                        console.log('Deselected all rows');
-                                    }, children: "Deselect All" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
-                                        var _a;
-                                        (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.data.refresh();
-                                        console.log('Refreshed data');
-                                    }, children: "Refresh Data" })] })] }) }), selectionInfo && ((0, jsx_runtime_1.jsx)(material_1.Card, { sx: { mb: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Current Selection Info" }), (0, jsx_runtime_1.jsx)(material_1.Paper, { sx: { p: 2, bgcolor: 'grey.50' }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 1, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Selection Type:" }), " ", selectionInfo.type] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Selected IDs:" }), " [", selectionInfo.ids.join(', '), "]"] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Count:" }), " ", selectionInfo.ids.length] })] }) })] }) })), (0, jsx_runtime_1.jsx)(material_1.Card, { sx: { mb: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Export & Column Configuration" }), (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "info", sx: { mb: 2 }, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "hideInExport Demo:" }), " The Salary column has `hideInExport: true` so it will be excluded from CSV/Excel exports. Try exporting to see the difference!"] }) }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 1, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Exportable columns:" }), " Name, Email, Department, Role, Status, Join Date"] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", color: "warning.main", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Hidden from export:" }), " Salary (contains sensitive data)"] })] })] }) }), lastFetchParams && ((0, jsx_runtime_1.jsx)(material_1.Card, { sx: { mb: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Last Fetch Parameters" }), (0, jsx_runtime_1.jsx)(material_1.Paper, { sx: { p: 2, bgcolor: 'grey.50' }, children: (0, jsx_runtime_1.jsx)("pre", { style: { fontSize: '12px', margin: 0, overflow: 'auto' }, children: JSON.stringify(lastFetchParams, null, 2) }) })] }) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 3 } }), (0, jsx_runtime_1.jsx)(data_table_1.DataTable, { ref: apiRef, columns: columns, dataMode: "server", initialLoadData: true, onFetchData: handleFetchData, loading: loading, enableRowSelection: true, enableMultiRowSelection: true, selectMode: "page", onSelectionChange: handleSelectionChange, enableColumnPinning: true, enableColumnResizing: true, enableColumnDragging: true, enableBulkActions: true, bulkActions: (selectionState) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, children: [(0, jsx_runtime_1.jsxs)(material_1.Button, { variant: "contained", size: "small", color: "error", onClick: () => {
-                                console.log('Bulk delete action triggered');
-                                console.log('Selection state:', selectionState);
-                                alert(`Would delete ${selectionState.ids.length} items`);
-                            }, children: ["Delete Selected (", selectionState.ids.length, ")"] }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
-                                console.log('Bulk update action triggered');
-                                console.log('Selection state:', selectionState);
-                                alert(`Would update ${selectionState.ids.length} items`);
-                            }, children: "Update Selected" })] })), enableGlobalFilter: true, enableColumnFilter: true, enableSorting: true, enablePagination: true, initialState: {
-                    pagination: {
-                        pageIndex: 0,
-                        pageSize: 50,
-                    },
-                    columnPinning: {
-                        left: [types_1.DEFAULT_SELECTION_COLUMN_NAME],
-                        right: [],
-                    },
-                }, enableExport: true, exportFilename: "employees", onServerExport: handleServerExport, onExportProgress: (progress) => {
-                    console.log('Export progress:', progress);
-                }, onExportComplete: (result) => {
-                    console.log('Export completed:', result);
-                }, onExportError: (error) => {
-                    console.error('Export error:', error);
-                }, enableHover: true, enableStripes: true, tableSize: "medium", enableColumnVisibility: true, enableTableSizeControl: true, enableReset: true, emptyMessage: "No employees found matching your criteria", skeletonRows: 10, slotProps: {
-                    pagination: {
-                        rowsPerPageOptions: [5, 10, 20, 50, 100, 200],
-                    },
-                } })] }));
-}

package/src/lib/examples/server-side-test.d.ts

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

package/src/lib/examples/server-side-test.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServerSideTest = ServerSideTest;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const server_side_fetching_example_1 = require("./server-side-fetching-example");
-function ServerSideTest() {
-    return ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { p: 2 }, children: (0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: { p: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h5", gutterBottom: true, children: "Server-Side Data Fetching Test" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", paragraph: true, children: "This example demonstrates how to use the DataTable component with server-side data fetching. The onFetchData callback handles all server operations including filtering, sorting, and pagination." }), (0, jsx_runtime_1.jsx)(server_side_fetching_example_1.ServerSideFetchingExample, {})] }) }));
-}

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

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

package/src/lib/examples/simple-local-example.js

@@ -1,95 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SimpleLocalExample = SimpleLocalExample;
-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 products = [
-    { id: 1, name: 'Laptop Pro', category: 'Electronics', price: 1299, inStock: true, rating: 4.5 },
-    { id: 2, name: 'Wireless Mouse', category: 'Electronics', price: 29, inStock: true, rating: 4.2 },
-    { id: 3, name: 'Coffee Mug', category: 'Kitchen', price: 12, inStock: false, rating: 4.8 },
-    { id: 4, name: 'Desk Chair', category: 'Furniture', price: 189, inStock: true, rating: 4.0 },
-    { id: 5, name: 'Notebook Set', category: 'Office', price: 15, inStock: true, rating: 4.3 },
-    { id: 6, name: 'Water Bottle', category: 'Kitchen', price: 22, inStock: true, rating: 4.7 },
-    { id: 7, name: 'Monitor Stand', category: 'Electronics', price: 45, inStock: false, rating: 4.1 },
-    { id: 8, name: 'Pen Set', category: 'Office', price: 8, inStock: true, rating: 3.9 },
-    { id: 9, name: 'Table Lamp', category: 'Furniture', price: 67, inStock: true, rating: 4.4 },
-    { id: 10, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
-    { id: 11, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
-    { id: 12, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
-    { id: 13, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
-    { id: 14, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
-    { id: 15, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
-    { id: 16, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
-    { id: 17, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
-];
-const columns = [
-    {
-        accessorKey: 'name',
-        header: 'Product Name',
-    },
-    {
-        accessorKey: 'category',
-        header: 'Category',
-        cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue(), size: "small", variant: "outlined", color: "primary" })),
-    },
-    {
-        accessorKey: 'price',
-        header: 'Price',
-        cell: ({ getValue }) => `$${getValue().toFixed(2)}`,
-    },
-    {
-        accessorKey: 'inStock',
-        header: 'In Stock',
-        cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue() ? 'Yes' : 'No', color: getValue() ? 'success' : 'error', size: "small" })),
-    },
-    {
-        accessorKey: 'rating',
-        header: 'Rating',
-        size: 100,
-        minSize: 100,
-        maxSize: 100,
-        cell: ({ getValue }) => `⭐ ${getValue().toFixed(1)}`,
-    },
-];
-function SimpleLocalExample() {
-    const bulkActions = (0, react_1.useCallback)((selectionState) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 1 }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                    const count = selectionState.type === 'include'
-                        ? selectionState.ids.length
-                        : products.length - selectionState.ids.length;
-                    alert(`Selected ${count} products (${selectionState.type} mode)`);
-                }, style: {
-                    padding: '8px 16px',
-                    borderRadius: '4px',
-                    border: '1px solid #ccc',
-                    background: '#f5f5f5',
-                    cursor: 'pointer'
-                }, children: "\uD83D\uDCCA Show Count" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
-                    let selectedProducts;
-                    if (selectionState.type === 'include') {
-                        selectedProducts = products.filter(p => selectionState.ids.includes(p.id.toString()));
-                    }
-                    else {
-                        selectedProducts = products.filter(p => !selectionState.ids.includes(p.id.toString()));
-                    }
-                    const total = selectedProducts.reduce((sum, product) => sum + product.price, 0);
-                    alert(`Total value: $${total.toFixed(2)}`);
-                }, style: {
-                    padding: '8px 16px',
-                    borderRadius: '4px',
-                    border: '1px solid #ccc',
-                    background: '#f5f5f5',
-                    cursor: 'pointer'
-                }, children: "\uD83D\uDCB0 Calculate Total" })] })), []);
-    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: "Simple Local Data Example" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", sx: { mb: 3 }, children: "A basic example using static local data with no API calls. Demonstrates essential DataTable features with minimal setup." }), (0, jsx_runtime_1.jsx)(components_1.DataTable, { data: products, totalRow: products.length, columns: columns, enableSorting: true, enableGlobalFilter: true, enableColumnFilter: true, enableColumnResizing: true, enableRowSelection: true, enableBulkActions: true, bulkActions: bulkActions, fitToScreen: true, initialState: {
-                    pagination: {
-                        pageIndex: 0,
-                        pageSize: 5,
-                    },
-                }, slotProps: {
-                    pagination: {
-                        rowsPerPageOptions: [5, 10, 20, 30, 40, 50],
-                    },
-                } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mt: 2, p: 2, backgroundColor: 'grey.50', borderRadius: 1 }, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", color: "text.secondary", children: ["\uD83D\uDCA1 ", (0, jsx_runtime_1.jsx)("strong", { children: "This example demonstrates:" }), (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Basic table with static local data", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Simple column definitions with custom cell renderers", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Sorting, filtering, and pagination", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Row selection with bulk actions", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Minimal setup - perfect for getting started"] }) })] }));
-}

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

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

package/src/lib/examples/simple-slots-example.js

@@ -1,115 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SimpleEnhancedSlotsExample = SimpleEnhancedSlotsExample;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
-const icons_material_1 = require("@mui/icons-material");
-const data_table_1 = require("../components/table/data-table");
-const sampleData = [
-    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'active' },
-    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'active' },
-    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'inactive' },
-];
-const columns = [
-    { id: 'name', accessorKey: 'name', header: 'Name' },
-    { id: 'email', accessorKey: 'email', header: 'Email' },
-    {
-        id: 'status',
-        accessorKey: 'status',
-        header: 'Status',
-        cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue(), color: getValue() === 'active' ? 'success' : 'default', size: "small" }))
-    },
-];
-const CustomSearchIcon = (props) => ((0, jsx_runtime_1.jsx)(icons_material_1.Star, Object.assign({}, props, { sx: Object.assign({ color: 'warning.main' }, props.sx) })));
-const CustomFilterIcon = (props) => ((0, jsx_runtime_1.jsx)(icons_material_1.Favorite, Object.assign({}, props, { sx: Object.assign({ color: 'error.main' }, props.sx) })));
-function SimpleEnhancedSlotsExample() {
-    const theme = (0, material_1.useTheme)();
-    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: "Enhanced Slots System" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", paragraph: true, children: "This example demonstrates the key improvements in the enhanced slot system:" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Key Improvements:" }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Better Prop Merging:" }), " Special handling for sx, style, and className props"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Full Customization:" }), " Override any component without limitations"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Enhanced Type Safety:" }), " Better TypeScript support with proper typing"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Flexible Props:" }), " Pass any props to slot components"] }), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Priority System:" }), " User props override slot props override defaults"] })] })] }), (0, jsx_runtime_1.jsx)(data_table_1.DataTable, { data: sampleData, columns: columns, enableGlobalFilter: true, enableColumnVisibility: true, enableColumnFilter: true, slots: {
-                    searchIcon: CustomSearchIcon,
-                    filterIcon: CustomFilterIcon,
-                }, slotProps: {
-                    searchIcon: {
-                        fontSize: 'large',
-                        sx: {
-                            animation: 'pulse 2s infinite',
-                            '@keyframes pulse': {
-                                '0%': { transform: 'scale(1)' },
-                                '50%': { transform: 'scale(1.1)' },
-                                '100%': { transform: 'scale(1)' },
-                            },
-                        },
-                    },
-                    filterIcon: {
-                        fontSize: 'medium',
-                        sx: {
-                            transform: 'rotate(0deg)',
-                            transition: 'transform 0.3s ease',
-                            '&:hover': {
-                                transform: 'rotate(180deg)',
-                            },
-                        },
-                    },
-                    tableContainer: {
-                        sx: {
-                            maxHeight: '400px',
-                            '&::-webkit-scrollbar': {
-                                width: '8px',
-                            },
-                            '&::-webkit-scrollbar-track': {
-                                backgroundColor: (0, material_1.alpha)(theme.palette.grey[300], 0.5),
-                                borderRadius: '4px',
-                            },
-                            '&::-webkit-scrollbar-thumb': {
-                                backgroundColor: theme.palette.primary.main,
-                                borderRadius: '4px',
-                                '&:hover': {
-                                    backgroundColor: theme.palette.primary.dark,
-                                },
-                            },
-                        },
-                    },
-                    toolbar: {
-                        sx: {
-                            background: `linear-gradient(135deg, ${(0, material_1.alpha)(theme.palette.primary.main, 0.1)} 0%, ${(0, material_1.alpha)(theme.palette.secondary.main, 0.1)} 100%)`,
-                            border: `1px solid ${(0, material_1.alpha)(theme.palette.primary.main, 0.2)}`,
-                            borderRadius: 2,
-                            padding: 2,
-                            margin: '0 0 16px 0',
-                        },
-                    },
-                } }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mt: 4 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Enhanced Slot Helper Functions:" }), (0, jsx_runtime_1.jsx)(material_1.Box, { component: "pre", sx: {
-                            backgroundColor: 'grey.100',
-                            p: 2,
-                            borderRadius: 1,
-                            fontSize: '0.875rem',
-                            overflow: 'auto',
-                        }, children: `// Enhanced prop merging with special handling
-export function mergeSlotProps(
-    defaultProps = {},
-    slotProps = {},
-    userProps = {}
-) {
-    // Handles sx, style, and className merging
-    // User props have highest priority
-}
-
-// Enhanced slot component retrieval
-export function getSlotComponentWithProps(
-    slots,
-    slotProps,
-    slotName,
-    fallback,
-    defaultProps = {}
-) {
-    return {
-        component: getSlotComponent(slots, slotName, fallback),
-        props: mergeSlotProps(defaultProps, slotProps[slotName], {})
-    };
-}
-
-// Usage in components:
-const { component: IconSlot, props: iconProps } = 
-    getSlotComponentWithProps(slots, slotProps, 'searchIcon', DefaultIcon);
-
-return <IconSlot {...iconProps} />;` })] })] }));
-}