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

package/src/lib/components/toolbar/{column-custom-filter-control.js → column-filter-control.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColumnCustomFilterControl = ColumnCustomFilterControl;
+exports.ColumnFilterControl = ColumnFilterControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
@@ -12,51 +12,51 @@ const column_helpers_1 = require("../../utils/column-helpers");
 const slot_helpers_1 = require("../../utils/slot-helpers");
 const filters_1 = require("../filters");
 const filter_value_input_1 = require("../filters/filter-value-input");
-function ColumnCustomFilterControl() {
+function ColumnFilterControl() {
     var _a, _b, _c;
     const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
     const FilterIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'filterIcon', icons_material_1.FilterList);
-    const customFilterState = ((_a = table.getCustomColumnFilterState) === null || _a === void 0 ? void 0 : _a.call(table)) || {
+    const filterState = ((_a = table === null || table === void 0 ? void 0 : table.getColumnFilterState) === null || _a === void 0 ? void 0 : _a.call(table)) || {
         filters: [],
         logic: 'AND',
         pendingFilters: [],
         pendingLogic: 'AND'
     };
-    const filters = customFilterState.pendingFilters;
-    const filterLogic = customFilterState.pendingLogic;
-    const activeFiltersCount = ((_c = (_b = table.getActiveColumnFilters) === null || _b === void 0 ? void 0 : _b.call(table)) === null || _c === void 0 ? void 0 : _c.length) || 0;
+    const filters = filterState.pendingFilters;
+    const filterLogic = filterState.pendingLogic;
+    const activeFiltersCount = ((_c = (_b = table === null || table === void 0 ? void 0 : table.getActiveColumnFilters) === null || _b === void 0 ? void 0 : _b.call(table)) === null || _c === void 0 ? void 0 : _c.length) || 0;
     const filterableColumns = (0, react_1.useMemo)(() => {
-        return table.getAllLeafColumns()
-            .filter(column => (0, column_helpers_1.isColumnFilterable)(column));
+        return table === null || table === void 0 ? void 0 : table.getAllLeafColumns().filter(column => (0, column_helpers_1.isColumnFilterable)(column));
     }, [table]);
     const addFilter = (0, react_1.useCallback)((columnId, operator) => {
         var _a, _b;
         let defaultOperator = operator || '';
+        console.log('addFilter', columnId, operator, filterableColumns);
         if (columnId && !operator) {
-            const column = filterableColumns.find(col => col.id === columnId);
+            const column = filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.find(col => col.id === columnId);
             const columnType = (0, column_helpers_1.getColumnType)(column);
             const operators = filters_1.FILTER_OPERATORS[columnType] || filters_1.FILTER_OPERATORS.text;
             defaultOperator = ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || 'contains';
         }
-        (_b = table.addPendingColumnFilter) === null || _b === void 0 ? void 0 : _b.call(table, columnId || '', defaultOperator, '');
+        (_b = table === null || table === void 0 ? void 0 : table.addPendingColumnFilter) === null || _b === void 0 ? void 0 : _b.call(table, columnId || '', defaultOperator, '');
     }, [table, filterableColumns]);
     const handleAddFilter = (0, react_1.useCallback)(() => {
         addFilter();
     }, [addFilter]);
     const updateFilter = (0, react_1.useCallback)((filterId, updates) => {
         var _a;
-        (_a = table.updatePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId, updates);
+        (_a = table === null || table === void 0 ? void 0 : table.updatePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId, updates);
     }, [table]);
     const removeFilter = (0, react_1.useCallback)((filterId) => {
         var _a;
-        (_a = table.removePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId);
+        (_a = table === null || table === void 0 ? void 0 : table.removePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId);
     }, [table]);
     const clearAllFilters = (0, react_1.useCallback)((closeDialog) => {
         var _a;
-        (_a = table.clearAllPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
+        (_a = table === null || table === void 0 ? void 0 : table.clearAllPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
         setTimeout(() => {
             var _a;
-            (_a = table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
+            (_a = table === null || table === void 0 ? void 0 : table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
             if (closeDialog) {
                 closeDialog();
             }
@@ -64,24 +64,24 @@ function ColumnCustomFilterControl() {
     }, [table]);
     const handleLogicChange = (0, react_1.useCallback)((newLogic) => {
         var _a;
-        (_a = table.setPendingFilterLogic) === null || _a === void 0 ? void 0 : _a.call(table, newLogic);
+        (_a = table === null || table === void 0 ? void 0 : table.setPendingFilterLogic) === null || _a === void 0 ? void 0 : _a.call(table, newLogic);
     }, [table]);
     const applyFilters = (0, react_1.useCallback)(() => {
         var _a;
-        (_a = table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
+        (_a = table === null || table === void 0 ? void 0 : table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
     }, [table]);
     const handleApplyFilters = (0, react_1.useCallback)((closeDialog) => {
         applyFilters();
         closeDialog();
     }, [applyFilters]);
     const getOperatorsForColumn = (0, react_1.useCallback)((columnId) => {
-        const column = filterableColumns.find(col => col.id === columnId);
+        const column = filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.find(col => col.id === columnId);
         const type = (0, column_helpers_1.getColumnType)(column);
         return filters_1.FILTER_OPERATORS[type] || filters_1.FILTER_OPERATORS.text;
     }, [filterableColumns]);
     const handleColumnChange = (0, react_1.useCallback)((filterId, newColumnId, currentFilter) => {
         var _a;
-        const newColumn = filterableColumns.find(col => col.id === newColumnId);
+        const newColumn = filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.find(col => col.id === newColumnId);
         const columnType = (0, column_helpers_1.getColumnType)(newColumn);
         const operators = filters_1.FILTER_OPERATORS[columnType] || filters_1.FILTER_OPERATORS.text;
         const currentOperatorValid = operators.some(op => op.value === currentFilter.operator);
@@ -115,12 +115,14 @@ function ColumnCustomFilterControl() {
     const hasPendingChanges = pendingFiltersCount > 0 || (filters.length === 0 && hasAppliedFilters);
     (0, react_1.useEffect)(() => {
         var _a;
-        if (filters.length === 0 && filterableColumns.length > 0 && activeFiltersCount === 0) {
+        console.log('useEffect', filters.length, filterableColumns, { activeFiltersCount });
+        if (filters.length === 0 && filterableColumns && (filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.length) > 0 && activeFiltersCount === 0) {
             const firstColumn = filterableColumns[0];
             const columnType = (0, column_helpers_1.getColumnType)(firstColumn);
             const operators = filters_1.FILTER_OPERATORS[columnType] || filters_1.FILTER_OPERATORS.text;
             const defaultOperator = ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || 'contains';
-            addFilter(firstColumn.id, defaultOperator);
+            console.log('useEffect', firstColumn, columnType, operators, defaultOperator);
+            addFilter(firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.id, defaultOperator);
         }
     }, [filters.length, filterableColumns, addFilter, activeFiltersCount]);
     return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Badge, { variant: "dot", color: "primary", invisible: activeFiltersCount === 0, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", color: activeFiltersCount > 0 ? 'primary' : 'default', sx: {

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableToolbar = DataTableToolbar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const column_custom_filter_control_1 = require("./column-custom-filter-control");
+const column_filter_control_1 = require("./column-filter-control");
 const column_pinning_control_1 = require("./column-pinning-control");
 const column_reset_control_1 = require("./column-reset-control");
 const column_visibility_control_1 = require("./column-visibility-control");
@@ -17,7 +17,7 @@ function DataTableToolbar({ extraFilter = null, enableGlobalFilter = true, title
     const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'toolbar', material_1.Toolbar);
     const TableSearchControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'searchInput', table_search_control_1.TableSearchControl);
     const TableSizeControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeControl', table_size_control_1.TableSizeControl);
-    const ColumnCustomFilterControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnCustomFilterControl', column_custom_filter_control_1.ColumnCustomFilterControl);
+    const ColumnCustomFilterControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnCustomFilterControl', column_filter_control_1.ColumnFilterControl);
     const ColumnPinningControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnPinningControl', column_pinning_control_1.ColumnPinningControl);
     const ColumnVisibilityControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnVisibilityControl', column_visibility_control_1.ColumnVisibilityControl);
     const ColumnResetControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'resetButton', column_reset_control_1.ColumnResetControl);

package/src/lib/components/toolbar/index.d.ts

@@ -4,5 +4,6 @@ export { ColumnPinningControl } from './column-pinning-control';
 export { ColumnResetControl } from './column-reset-control';
 export { TableExportControl } from './table-export-control';
 export { TableSizeControl } from './table-size-control';
+export { ColumnFilterControl } from './column-filter-control';
 export { BulkActionsToolbar } from './bulk-actions-toolbar';
 export type { BulkActionsToolbarProps } from './bulk-actions-toolbar';

package/src/lib/components/toolbar/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTableToolbar = void 0;
+exports.BulkActionsToolbar = exports.ColumnFilterControl = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTableToolbar = void 0;
 var data_table_toolbar_1 = require("./data-table-toolbar");
 Object.defineProperty(exports, "DataTableToolbar", { enumerable: true, get: function () { return data_table_toolbar_1.DataTableToolbar; } });
 var column_visibility_control_1 = require("./column-visibility-control");
@@ -13,5 +13,7 @@ var table_export_control_1 = require("./table-export-control");
 Object.defineProperty(exports, "TableExportControl", { enumerable: true, get: function () { return table_export_control_1.TableExportControl; } });
 var table_size_control_1 = require("./table-size-control");
 Object.defineProperty(exports, "TableSizeControl", { enumerable: true, get: function () { return table_size_control_1.TableSizeControl; } });
+var column_filter_control_1 = require("./column-filter-control");
+Object.defineProperty(exports, "ColumnFilterControl", { enumerable: true, get: function () { return column_filter_control_1.ColumnFilterControl; } });
 var bulk_actions_toolbar_1 = require("./bulk-actions-toolbar");
 Object.defineProperty(exports, "BulkActionsToolbar", { enumerable: true, get: function () { return bulk_actions_toolbar_1.BulkActionsToolbar; } });

package/src/lib/components/toolbar/table-export-control.d.ts

@@ -1,5 +1,5 @@
 import { TableFilters } from '../../types';
-import { SelectionState } from '../../features/custom-selection.feature';
+import { SelectionState } from '../../features';
 interface TableExportControlProps {
     exportFilename?: string;
     onServerExport?: (filters?: Partial<TableFilters>, selection?: SelectionState) => Promise<{
@@ -7,9 +7,9 @@ interface TableExportControlProps {
         total: number;
     }>;
     onExportProgress?: (progress: {
-        processedRows: number;
-        totalRows: number;
-        percentage: number;
+        processedRows?: number;
+        totalRows?: number;
+        percentage?: number;
     }) => void;
     onExportComplete?: (result: {
         success: boolean;

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/contexts/data-table-context.d.ts

@@ -1,15 +1,15 @@
 import { Table } from '@tanstack/react-table';
 import { ReactNode, RefObject } from 'react';
-import { CustomColumnFilterState, TableSize } from '../types';
+import { ColumnFilterState, TableSize } from '../types';
 import { DataTableApi } from '../types/data-table-api';
 interface DataTableContextValue<T = any> {
     table?: Table<T>;
-    apiRef?: RefObject<DataTableApi<T>>;
+    apiRef?: RefObject<DataTableApi<T> | null>;
     dataMode?: 'client' | 'server';
     tableSize?: TableSize;
     onTableSizeChange?: (size: TableSize) => void;
-    customColumnsFilter?: CustomColumnFilterState;
-    onChangeCustomColumnsFilter?: (filter: CustomColumnFilterState) => void;
+    columnFilter?: ColumnFilterState;
+    onChangeColumnFilter?: (filter: ColumnFilterState) => void;
     slots?: Record<string, any>;
     slotProps?: Record<string, any>;
     isExporting?: boolean;
@@ -17,9 +17,9 @@ interface DataTableContextValue<T = any> {
     onCancelExport?: () => void;
     exportFilename?: string;
     onExportProgress?: (progress: {
-        processedRows: number;
-        totalRows: number;
-        percentage: number;
+        processedRows?: number;
+        totalRows?: number;
+        percentage?: number;
     }) => void;
     onExportComplete?: (result: {
         success: boolean;
@@ -38,6 +38,6 @@ interface DataTableContextValue<T = any> {
 interface DataTableProviderProps<T = any> extends DataTableContextValue<T> {
     children: ReactNode;
 }
-export declare function DataTableProvider<T = any>({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, customColumnsFilter, onChangeCustomColumnsFilter, slots, slotProps, isExporting, exportController, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }: DataTableProviderProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableProvider<T = any>({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, columnFilter, onChangeColumnFilter, slots, slotProps, isExporting, exportController, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }: DataTableProviderProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function useDataTableContext<T = any>(): DataTableContextValue<T>;
 export {};

package/src/lib/contexts/data-table-context.js

@@ -5,15 +5,15 @@ exports.useDataTableContext = useDataTableContext;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const DataTableContext = (0, react_1.createContext)(null);
-function DataTableProvider({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, customColumnsFilter, onChangeCustomColumnsFilter, slots = {}, slotProps = {}, isExporting, exportController, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }) {
+function DataTableProvider({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, columnFilter, onChangeColumnFilter, slots = {}, slotProps = {}, isExporting, exportController, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }) {
     const value = (0, react_1.useMemo)(() => ({
         table,
         apiRef,
         dataMode,
         tableSize,
         onTableSizeChange,
-        customColumnsFilter,
-        onChangeCustomColumnsFilter,
+        columnFilter,
+        onChangeColumnFilter,
         slots,
         slotProps,
         isExporting,
@@ -30,8 +30,8 @@ function DataTableProvider({ children, table, apiRef, dataMode, tableSize, onTab
         dataMode,
         tableSize,
         onTableSizeChange,
-        customColumnsFilter,
-        onChangeCustomColumnsFilter,
+        columnFilter,
+        onChangeColumnFilter,
         slots,
         slotProps,
         isExporting,

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,250 @@
+"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 [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('🔄 Fetching data with filters:', filters);
+        console.log('🔄 Tab:', { tab }, 'Current tab:');
+        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);
+            }
+            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);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        console.log('🔄 Tab changed:', tab);
+        if (tab && tab !== 'all') {
+            (_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',
+            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.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, 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, {})] }) }));
+}