@ackplus/react-tanstack-data-table 1.0.19-beta-0.9 → 1.0.19-beta-0.10

package/README.md

@@ -573,10 +573,10 @@ If you find this package helpful and want to support its development, consider m
 
 <div align="center">
 
-[![PayPal](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://www.paypal.com/paypalme/my/profile)
+[![PayPal](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://www.paypal.com/paypalme/ckhandla94)
 [![Razorpay](https://img.shields.io/badge/Razorpay-02042B?style=for-the-badge&logo=razorpay&logoColor=white)](https://razorpay.me/@ackplus)
 
-**[💳 PayPal](https://www.paypal.com/paypalme/my/profile)** • **[💳 Razorpay](https://razorpay.me/@ackplus)**
+**[💳 PayPal](https://www.paypal.com/paypalme/ckhandla94)** • **[💳 Razorpay](https://razorpay.me/@ackplus)**
 
 </div>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ackplus/react-tanstack-data-table",
   "type": "commonjs",
-  "version": "1.0.19-beta-0.9",
+  "version": "1.0.19-beta-0.10",
   "description": "A powerful React data table component built with MUI and TanStack Table",
   "keywords": [
     "react",

package/src/index.d.ts

@@ -14,6 +14,7 @@ export * from './lib/hooks';
 export * from './lib/types';
 export type { Column, ColumnDef, Row, Table, Header, Cell, SortingState, ColumnFiltersState, VisibilityState, ColumnOrderState, ColumnPinningState, PaginationState, } from '@tanstack/react-table';
 export * from './lib/features';
+export { ServerSideTest } from './lib/examples/server-side-test';
 export { CustomColumnFilterExample } from './lib/examples/custom-column-filter-example';
 export { SimpleLocalExample } from './lib/examples/simple-local-example';
 export { AdvancedFeaturesExample } from './lib/examples/advanced-features-example';

package/src/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdvancedFeaturesExample = exports.SimpleLocalExample = exports.CustomColumnFilterExample = exports.DataTableToolbar = exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTable = void 0;
+exports.AdvancedFeaturesExample = exports.SimpleLocalExample = exports.CustomColumnFilterExample = exports.ServerSideTest = exports.DataTableToolbar = exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTable = void 0;
 const tslib_1 = require("tslib");
 var table_1 = require("./lib/components/table");
 Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return table_1.DataTable; } });
@@ -23,6 +23,8 @@ tslib_1.__exportStar(require("./lib/utils/table-helpers"), exports);
 tslib_1.__exportStar(require("./lib/hooks"), exports);
 tslib_1.__exportStar(require("./lib/types"), exports);
 tslib_1.__exportStar(require("./lib/features"), exports);
+var server_side_test_1 = require("./lib/examples/server-side-test");
+Object.defineProperty(exports, "ServerSideTest", { enumerable: true, get: function () { return server_side_test_1.ServerSideTest; } });
 var custom_column_filter_example_1 = require("./lib/examples/custom-column-filter-example");
 Object.defineProperty(exports, "CustomColumnFilterExample", { enumerable: true, get: function () { return custom_column_filter_example_1.CustomColumnFilterExample; } });
 var simple_local_example_1 = require("./lib/examples/simple-local-example");

package/src/lib/components/table/data-table.js

@@ -181,17 +181,23 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         onDataStateChange,
     ]);
     const handleColumnOrderChange = (0, react_1.useCallback)((updatedColumnOrder) => {
-        setColumnOrder(updatedColumnOrder);
+        const newColumnOrder = typeof updatedColumnOrder === 'function'
+            ? updatedColumnOrder(columnOrder)
+            : updatedColumnOrder;
+        setColumnOrder(newColumnOrder);
         if (onColumnDragEnd) {
-            onColumnDragEnd(updatedColumnOrder);
+            onColumnDragEnd(newColumnOrder);
         }
-    }, [onColumnDragEnd]);
+    }, [onColumnDragEnd, columnOrder]);
     const handleColumnPinningChange = (0, react_1.useCallback)((updatedColumnPinning) => {
-        setColumnPinning(updatedColumnPinning);
+        const newColumnPinning = typeof updatedColumnPinning === 'function'
+            ? updatedColumnPinning(columnPinning)
+            : updatedColumnPinning;
+        setColumnPinning(newColumnPinning);
         if (onColumnPinningChange) {
-            onColumnPinningChange(updatedColumnPinning);
+            onColumnPinningChange(newColumnPinning);
         }
-    }, [onColumnPinningChange]);
+    }, [onColumnPinningChange, columnPinning]);
     const handlePaginationChange = (0, react_1.useCallback)((updater) => {
         setPagination(updater);
         const newPagination = typeof updater === 'function' ? updater(pagination) : updater;
@@ -472,7 +478,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
     const BodySlot = (0, slot_helpers_1.getSlotComponent)(slots, 'body', material_1.TableBody);
     const FooterSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'footer', material_1.Box);
     const PaginationSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'pagination', pagination_1.DataTablePagination);
-    return ((0, jsx_runtime_1.jsx)(data_table_context_1.DataTableProvider, { table: table, children: (0, jsx_runtime_1.jsxs)(RootSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { children: [(enableGlobalFilter || extraFilter) ? ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({ extraFilter: extraFilter, enableGlobalFilter: enableGlobalFilter, enableColumnVisibility: enableColumnVisibility, enableColumnFilter: enableColumnFilter, enableExport: enableExport, enableReset: enableReset, enableTableSizeControl: enableTableSizeControl, enableColumnPinning: enableColumnPinning }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar))) : null, enableBulkActions && enableRowSelection && isSomeRowsSelected ? ((0, jsx_runtime_1.jsx)(BulkActionsSlot, Object.assign({ selectionState: selectionState, selectedRowCount: selectedRowCount, bulkActions: bulkActions, sx: {
+    return ((0, jsx_runtime_1.jsx)(data_table_context_1.DataTableProvider, { table: table, apiRef: internalApiRef, dataMode: dataMode, tableSize: tableSize, onTableSizeChange: (size) => {
+            setTableSize(size);
+        }, customColumnsFilter: customColumnsFilter, onChangeCustomColumnsFilter: handleColumnFilterStateChange, slots: slots, slotProps: slotProps, isExporting: isExporting, exportController: exportController, onCancelExport: handleCancelExport, exportFilename: exportFilename, onExportProgress: onExportProgress, onExportComplete: onExportComplete, onExportError: onExportError, onServerExport: onServerExport, children: (0, jsx_runtime_1.jsxs)(RootSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { children: [(enableGlobalFilter || extraFilter) ? ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({ extraFilter: extraFilter, enableGlobalFilter: enableGlobalFilter, enableColumnVisibility: enableColumnVisibility, enableColumnFilter: enableColumnFilter, enableExport: enableExport, enableReset: enableReset, enableTableSizeControl: enableTableSizeControl, enableColumnPinning: enableColumnPinning }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar))) : null, enableBulkActions && enableRowSelection && isSomeRowsSelected ? ((0, jsx_runtime_1.jsx)(BulkActionsSlot, Object.assign({ selectionState: selectionState, selectedRowCount: selectedRowCount, bulkActions: bulkActions, sx: {
                         position: 'relative',
                         zIndex: 2,
                     } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.bulkActionsToolbar))) : null, (0, jsx_runtime_1.jsx)(TableContainerSlot, Object.assign({ component: material_1.Paper, ref: tableContainerRef, sx: Object.assign(Object.assign(Object.assign({ width: '100%', overflowX: 'auto' }, (enableStickyHeaderOrFooter && {

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

@@ -23,6 +23,7 @@ function TableExportControl({ exportFilename: propsExportFilename, onServerExpor
     const handleExport = (format) => tslib_1.__awaiter(this, void 0, void 0, function* () {
         var _a, _b;
         try {
+            console.log('handleExport', dataMode, onServerExport);
             if (dataMode === 'server' && onServerExport) {
                 const currentState = table.getState();
                 const currentFilters = {
@@ -60,12 +61,23 @@ function TableExportControl({ exportFilename: propsExportFilename, onServerExpor
             });
         }
     });
-    const selectedRowCount = Object.keys(table.getState().rowSelection).filter(key => table.getState().rowSelection[key]).length;
+    const selectedRowCount = table.getSelectedCount ? table.getSelectedCount() : 0;
+    const hasSelection = table.getIsSomeRowsSelected ? table.getIsSomeRowsSelected() : false;
+    const visibleColumns = table.getVisibleLeafColumns().filter(col => col.getIsVisible());
+    const exportableColumns = visibleColumns.filter(col => {
+        const columnDef = col.columnDef;
+        return columnDef.hideInExport !== true;
+    });
+    const hiddenFromExportColumns = visibleColumns.filter(col => {
+        const columnDef = col.columnDef;
+        return columnDef.hideInExport === true;
+    });
     const summary = {
         filteredRows: table.getFilteredRowModel().rows.length,
-        totalColumns: table.getVisibleLeafColumns().filter(col => col.getIsVisible()).length,
+        totalColumns: exportableColumns.length,
+        hiddenColumns: hiddenFromExportColumns.length,
         selectedRows: selectedRowCount,
-        hasSelection: selectedRowCount > 0,
+        hasSelection: hasSelection,
     };
     return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Export data", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", disabled: isExporting, sx: {
                     flexShrink: 0,
@@ -78,9 +90,9 @@ function TableExportControl({ exportFilename: propsExportFilename, onServerExpor
                         p: 1,
                         bgcolor: 'grey.50',
                         borderRadius: 1,
-                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, children: "Export Summary" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: summary.hasSelection
-                                ? `${summary.selectedRows} selected • ${summary.totalColumns} visible columns`
-                                : `${summary.filteredRows} filtered • ${summary.totalColumns} visible columns` }), summary.hasSelection ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "primary.main", sx: { fontWeight: 'medium' }, children: "Will export selected rows only" })) : null] }), isExporting ? ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", gutterBottom: true, children: "Export Summary" }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", color: "text.secondary", children: [summary.hasSelection
+                                    ? `${summary.selectedRows} selected • ${summary.totalColumns} exportable columns`
+                                    : `${summary.filteredRows} filtered • ${summary.totalColumns} exportable columns`, summary.hiddenColumns > 0 && ((0, jsx_runtime_1.jsxs)("span", { style: { color: 'orange' }, children: [' ', "\u2022 ", summary.hiddenColumns, " hidden from export"] }))] }), summary.hasSelection ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "primary.main", sx: { fontWeight: 'medium' }, children: "Will export selected rows only" })) : null] }), isExporting ? ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => {
                         onCancelExport === null || onCancelExport === void 0 ? void 0 : onCancelExport();
                         handleClose();
                     }, children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(ExportIconSlot, Object.assign({ fontSize: "small", color: "warning" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.exportIcon)) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Cancel Export", secondary: "Stop current export" })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { onClick: () => tslib_1.__awaiter(this, void 0, void 0, function* () {

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

@@ -3,3 +3,4 @@ export { SelectionTestExample } from './selection-test-example';
 export { AdvancedFeaturesExample } from './advanced-features-example';
 export { SimpleLocalExample } from './simple-local-example';
 export { BulkActionsTest } from './bulk-actions-test';
+export { ServerSideFetchingExample } from './server-side-fetching-example';

package/src/lib/examples/index.js

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

package/src/lib/examples/server-side-fetching-example.d.ts

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

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

@@ -0,0 +1,241 @@
+"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 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 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('🔄 Fetching data with filters:', 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.customColumnsFilter) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.length) {
+                filteredData = filteredData.filter(employee => {
+                    return filters.customColumnsFilter.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);
+            }
+            console.log('✅ Data fetched successfully:', {
+                total,
+                pageSize: pageData.length,
+                filters: filters.pagination
+            });
+            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);
+        }
+    }), []);
+    const handleSelectionChange = (0, react_1.useCallback)((selection) => {
+        console.log('🔄 Selection changed:', selection);
+        setSelectionInfo(selection);
+    }, []);
+    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',
+            size: 200,
+            enableGlobalFilter: true,
+        },
+        {
+            id: 'email',
+            accessorKey: 'email',
+            header: 'Email',
+            size: 250,
+            enableGlobalFilter: true,
+        },
+        {
+            id: 'department',
+            accessorKey: 'department',
+            header: 'Department',
+            size: 150,
+            enableGlobalFilter: true,
+        },
+        {
+            id: 'role',
+            accessorKey: 'role',
+            header: 'Role',
+            size: 120,
+            enableGlobalFilter: true,
+        },
+        {
+            id: 'salary',
+            accessorKey: 'salary',
+            header: 'Salary',
+            size: 120,
+            accessorFn: (row) => `$${row.salary.toLocaleString()}`,
+            hideInExport: true,
+        },
+        {
+            id: 'isActive',
+            accessorKey: 'isActive',
+            header: 'Status',
+            size: 100,
+            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',
+            size: 120,
+            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.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, 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: 10,
+                    },
+                }, 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 })] }));
+}

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

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

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

@@ -0,0 +1,9 @@
+"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/features/custom-selection.feature.js

@@ -116,7 +116,7 @@ exports.CustomSelectionFeature = {
             const selectMode = table.options.selectMode || 'page';
             if (selectMode === 'all' && state.type === 'exclude') {
                 const totalCount = table.getRowCount();
-                return state.ids.length < totalCount;
+                return state.ids.length < totalCount && totalCount > 0;
             }
             else {
                 return state.ids.length > 0;
@@ -134,7 +134,7 @@ exports.CustomSelectionFeature = {
             const selectMode = table.options.selectMode || 'page';
             if (selectMode === 'all' && state.type === 'exclude') {
                 const totalCount = table.getRowCount();
-                return totalCount - state.ids.length;
+                return Math.max(0, totalCount - state.ids.length);
             }
             else {
                 return state.ids.length;

package/src/lib/utils/export-utils.js

@@ -19,9 +19,11 @@ function exportClientData(table, options) {
                 });
                 const rowData = {};
                 row.getVisibleCells().forEach(cell => {
-                    const header = typeof cell.column.columnDef.header === 'string'
-                        ? cell.column.columnDef.header
-                        : cell.column.id;
+                    const columnDef = cell.column.columnDef;
+                    if (columnDef.hideInExport === true) {
+                        return;
+                    }
+                    const header = typeof columnDef.header === 'string' ? columnDef.header : cell.column.id;
                     rowData[header] = cell.getValue() || '';
                 });
                 return rowData;
@@ -55,7 +57,10 @@ function exportServerData(table, options) {
             if (!data || !Array.isArray(data)) {
                 throw new Error('Invalid data received from server');
             }
-            const visibleColumns = table.getVisibleLeafColumns().filter(col => col.getIsVisible());
+            const visibleColumns = table.getVisibleLeafColumns().filter(col => {
+                const columnDef = col.columnDef;
+                return col.getIsVisible() && columnDef.hideInExport !== true;
+            });
             const exportData = data.map((rowData, index) => {
                 onProgress === null || onProgress === void 0 ? void 0 : onProgress({
                     processedRows: index + 1,
@@ -64,14 +69,15 @@ function exportServerData(table, options) {
                 });
                 const exportRow = {};
                 visibleColumns.forEach(column => {
+                    var _a;
                     const columnId = column.id;
-                    const header = typeof column.columnDef.header === 'string'
-                        ? column.columnDef.header
+                    const columnDef = column.columnDef;
+                    const header = typeof columnDef.header === 'string'
+                        ? columnDef.header
                         : columnId;
                     let value = rowData[columnId];
-                    const columnDef = column.columnDef;
-                    if (columnDef.accessorFn && typeof columnDef.accessorFn === 'function') {
-                        value = columnDef.accessorFn(rowData);
+                    if (column.accessorFn && typeof column.accessorFn === 'function') {
+                        value = ((_a = (column.accessorFn(rowData, index) || '')) === null || _a === void 0 ? void 0 : _a.toString()) || '';
                     }
                     if (value === null || value === undefined) {
                         value = '';