@ackplus/react-tanstack-data-table 1.0.21 → 1.0.23

package/README.md

@@ -2,6 +2,12 @@
 
 A powerful, feature-rich, and highly customizable React data table component built with Material-UI (MUI) and TanStack Table. Perfect for building modern data-intensive applications with advanced table functionality.
 
+## 🚀 Live Demo
+
+**[View Live Demo](https://ack-solutions.github.io/react-tanstack-data-table/)**
+
+Experience all the features in action with our interactive demo showcasing advanced table functionality, filtering, sorting, pagination, and more.
+
 ## ✨ Features
 
 - 🚀 **High Performance**: Built on TanStack Table for excellent performance with large datasets
@@ -18,6 +24,7 @@ A powerful, feature-rich, and highly customizable React data table component bui
 - 🎛️ **Highly Customizable**: Extensive customization through slots and props
 - 📝 **TypeScript**: Full TypeScript support with comprehensive type definitions
 - 🔌 **Extensible**: Plugin architecture with custom components and hooks
+- 🛠️ **Debug Logging**: Configurable console instrumentation with global or per-table controls
 
 ## 📦 Installation
 
@@ -1359,6 +1366,34 @@ const handleClick = useCallback(() => {
 />
 ```
 
+### Logging & Debugging
+
+Use the built-in logger to trace pagination, server calls, and state transitions without sprinkling `console.log` statements throughout your app.
+
+```tsx
+import { DataTable, configureDataTableLogging } from '@ackplus/react-tanstack-data-table';
+
+configureDataTableLogging({
+    enabled: true,
+    level: 'debug',
+    includeTimestamp: true,
+});
+
+<DataTable
+    columns={columns}
+    data={rows}
+    logging={{
+        enabled: true,
+        level: 'info',
+        prefix: 'OrdersTable',
+    }}
+/>
+```
+
+- Call `configureDataTableLogging` once (for example in your app bootstrap) to set global defaults.
+- Use the `logging` prop to override settings per table or disable instrumentation for specific instances.
+- When `logging` is omitted, instances inherit the global configuration.
+
 ### Troubleshooting
 
 #### Common Issues
@@ -1422,6 +1457,7 @@ MIT © [ACK Solutions](https://github.com/ack-solutions)
 
 ## 🆘 Support
 
+- 🚀 [Live Demo](https://ack-solutions.github.io/react-tanstack-data-table/) - Interactive examples and playground
 - 📖 [Documentation](https://github.com/ack-solutions/react-tanstack-data-table)
 - 🐛 [Issue Tracker](https://github.com/ack-solutions/react-tanstack-data-table/issues)
 - 💬 [Discussions](https://github.com/ack-solutions/react-tanstack-data-table/discussions)

package/package.json

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

package/src/index.d.ts

@@ -10,6 +10,7 @@ export type { BulkActionsToolbarProps } from './lib/components/toolbar';
 export * from './lib/utils/styling-helpers';
 export * from './lib/utils/column-helpers';
 export * from './lib/utils/table-helpers';
+export * from './lib/utils/logger';
 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';

package/src/index.js

@@ -20,6 +20,7 @@ Object.defineProperty(exports, "DataTableToolbar", { enumerable: true, get: func
 tslib_1.__exportStar(require("./lib/utils/styling-helpers"), exports);
 tslib_1.__exportStar(require("./lib/utils/column-helpers"), exports);
 tslib_1.__exportStar(require("./lib/utils/table-helpers"), exports);
+tslib_1.__exportStar(require("./lib/utils/logger"), exports);
 tslib_1.__exportStar(require("./lib/hooks"), exports);
 tslib_1.__exportStar(require("./lib/types"), exports);
 tslib_1.__exportStar(require("./lib/features"), exports);

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

@@ -10,8 +10,6 @@ const slot_helpers_1 = require("../../utils/slot-helpers");
 exports.DataTablePagination = (0, react_1.memo)((props) => {
     const { footerFilter = null, pagination, totalRow, containerSx, paginationProps, footerSx, slots, slotProps } = props, otherProps = tslib_1.__rest(props, ["footerFilter", "pagination", "totalRow", "containerSx", "paginationProps", "footerSx", "slots", "slotProps"]);
     const { table } = (0, data_table_context_1.useDataTableContext)();
-    const paginationSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'pagination');
-    const PaginationSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'pagination', material_1.TablePagination);
     const mergedContainerProps = (0, slot_helpers_1.mergeSlotProps)({
         sx: Object.assign({ display: 'flex', alignItems: 'center', gap: 1, justifyContent: 'space-between', px: 2 }, containerSx),
     });
@@ -32,6 +30,6 @@ exports.DataTablePagination = (0, react_1.memo)((props) => {
         showLastButton: true,
         labelRowsPerPage: 'Rows per page:',
         labelDisplayedRows: ({ from, to, count }) => `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`,
-    }, paginationSlotProps, Object.assign(Object.assign({}, paginationProps), otherProps));
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({}, mergedContainerProps, { children: [footerFilter && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: footerSx, children: footerFilter })), (0, jsx_runtime_1.jsx)(PaginationSlot, Object.assign({}, mergedPaginationProps))] })));
+    }, Object.assign(Object.assign({}, paginationProps), otherProps));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({}, mergedContainerProps, { children: [footerFilter && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: footerSx, children: footerFilter })), (0, jsx_runtime_1.jsx)(material_1.TablePagination, Object.assign({}, mergedPaginationProps))] })));
 });

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

@@ -10,7 +10,6 @@ const features_1 = require("../../features");
 const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
 const data_table_context_1 = require("../../contexts/data-table-context");
-const use_data_table_api_1 = require("../../hooks/use-data-table-api");
 const utils_1 = require("../../utils");
 const debounced_fetch_utils_1 = require("../../utils/debounced-fetch.utils");
 const slot_helpers_1 = require("../../utils/slot-helpers");
@@ -40,12 +39,31 @@ const DEFAULT_INITIAL_STATE = {
         pendingLogic: 'AND',
     },
 };
-exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, columns, data = [], totalRow = 0, idKey = 'id', extraFilter = null, footerFilter = null, dataMode = 'client', initialLoadData = true, onFetchData, onDataStateChange, enableRowSelection = false, enableMultiRowSelection = true, selectMode = 'page', isRowSelectable, onSelectionChange, enableBulkActions = false, bulkActions, enableColumnResizing = false, columnResizeMode = 'onChange', enableColumnDragging = false, onColumnDragEnd, enableColumnPinning = false, onColumnPinningChange, enableExpanding = false, getRowCanExpand, renderSubComponent, enablePagination = true, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, enableHover = true, enableStripes = false, tableContainerProps = {}, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, estimateRowHeight = 52, enableColumnVisibility = true, enableTableSizeControl = true, enableExport = true, enableReset = true, loading = false, emptyMessage = 'No data available', skeletonRows = 5, onColumnFiltersChange, onPaginationChange, onGlobalFilterChange, slots = {}, slotProps = {}, }, ref) {
+exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, columns, data = [], totalRow = 0, idKey = 'id', extraFilter = null, footerFilter = null, dataMode = 'client', initialLoadData = true, onFetchData, onDataStateChange, enableRowSelection = false, enableMultiRowSelection = true, selectMode = 'page', isRowSelectable, onSelectionChange, enableBulkActions = false, bulkActions, enableColumnResizing = false, columnResizeMode = 'onChange', enableColumnDragging = false, onColumnDragEnd, enableColumnPinning = false, onColumnPinningChange, enableExpanding = false, getRowCanExpand, renderSubComponent, enablePagination = true, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, enableHover = true, enableStripes = false, tableContainerProps = {}, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, estimateRowHeight = 52, enableColumnVisibility = true, enableTableSizeControl = true, enableExport = true, enableReset = true, loading = false, emptyMessage = 'No data available', skeletonRows = 5, onColumnFiltersChange, onPaginationChange, onGlobalFilterChange, slots = {}, slotProps = {}, logging, }, ref) {
     var _a;
     const isServerMode = dataMode === 'server';
     const isServerPagination = paginationMode === 'server' || isServerMode;
     const isServerFiltering = filterMode === 'server' || isServerMode;
     const isServerSorting = sortingMode === 'server' || isServerMode;
+    const logger = (0, react_1.useMemo)(() => (0, utils_1.createLogger)('DataTable', logging), [logging]);
+    const fetchLogger = (0, react_1.useMemo)(() => logger.child('fetch'), [logger]);
+    const paginationLogger = (0, react_1.useMemo)(() => logger.child('pagination'), [logger]);
+    const stateLogger = (0, react_1.useMemo)(() => logger.child('state'), [logger]);
+    (0, react_1.useEffect)(() => {
+        if (logger.isLevelEnabled('info')) {
+            logger.info('mounted', {
+                dataMode,
+                paginationMode,
+                filterMode,
+                sortingMode,
+            });
+        }
+        return () => {
+            if (logger.isLevelEnabled('info')) {
+                logger.info('unmounted');
+            }
+        };
+    }, [logger, dataMode, paginationMode, filterMode, sortingMode]);
     const initialStateConfig = (0, react_1.useMemo)(() => {
         return Object.assign(Object.assign({}, DEFAULT_INITIAL_STATE), initialState);
     }, [initialState]);
@@ -124,16 +142,40 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         minWidth: '100%',
     }), [tableWidth]);
     const fetchData = (0, react_1.useCallback)((...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (overrides = {}) {
-        if (!onFetchData)
+        var _a, _b;
+        if (!onFetchData) {
+            if (fetchLogger.isLevelEnabled('debug')) {
+                fetchLogger.debug('onFetchData not provided, skipping fetch', { overrides });
+            }
             return;
+        }
         const filters = Object.assign({ globalFilter,
             pagination,
             columnFilter,
             sorting }, overrides);
-        const result = yield debouncedFetch(filters);
-        if ((result === null || result === void 0 ? void 0 : result.data) && (result === null || result === void 0 ? void 0 : result.total) !== undefined) {
-            setServerData(result.data);
-            setServerTotal(result.total);
+        if (fetchLogger.isLevelEnabled('debug')) {
+            fetchLogger.debug('Requesting data', { filters });
+        }
+        try {
+            const result = yield debouncedFetch(filters);
+            if (fetchLogger.isLevelEnabled('debug')) {
+                fetchLogger.debug('Fetch resolved', {
+                    rows: (_b = (_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0,
+                    total: result === null || result === void 0 ? void 0 : result.total,
+                });
+            }
+            if ((result === null || result === void 0 ? void 0 : result.data) && (result === null || result === void 0 ? void 0 : result.total) !== undefined) {
+                setServerData(result.data);
+                setServerTotal(result.total);
+            }
+            else if (fetchLogger.isLevelEnabled('warn')) {
+                fetchLogger.warn('Fetch handler returned unexpected shape', result);
+            }
+            return result;
+        }
+        catch (error) {
+            fetchLogger.error('Fetch failed', error);
+            throw error;
         }
     }), [
         onFetchData,
@@ -142,6 +184,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         columnFilter,
         sorting,
         debouncedFetch,
+        fetchLogger,
     ]);
     const handleSelectionStateChange = (0, react_1.useCallback)((updaterOrValue) => {
         setSelectionState((prevState) => {
@@ -162,15 +205,22 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         }
     }, [onColumnFiltersChange]);
     const tableStateChange = (0, react_1.useCallback)((overrides = {}) => {
-        if (onDataStateChange) {
-            const currentState = Object.assign({ globalFilter,
-                columnFilter,
-                sorting,
-                pagination,
-                columnOrder,
-                columnPinning }, overrides);
-            onDataStateChange(currentState);
+        if (!onDataStateChange) {
+            if (stateLogger.isLevelEnabled('debug')) {
+                stateLogger.debug('No onDataStateChange handler registered; skipping state update notification', { overrides });
+            }
+            return;
         }
+        const currentState = Object.assign({ globalFilter,
+            columnFilter,
+            sorting,
+            pagination,
+            columnOrder,
+            columnPinning }, overrides);
+        if (stateLogger.isLevelEnabled('debug')) {
+            stateLogger.debug('Emitting tableStateChange', currentState);
+        }
+        onDataStateChange(currentState);
     }, [
         onDataStateChange,
         globalFilter,
@@ -179,6 +229,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         pagination,
         columnOrder,
         columnPinning,
+        stateLogger,
     ]);
     const handleSortingChange = (0, react_1.useCallback)((updaterOrValue) => {
         let newSorting = typeof updaterOrValue === 'function'
@@ -187,8 +238,18 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         newSorting = newSorting.filter((sort) => sort.id);
         setSorting(newSorting);
         onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(newSorting);
+        if (stateLogger.isLevelEnabled('debug')) {
+            stateLogger.debug('Sorting change applied', {
+                sorting: newSorting,
+                serverMode: isServerMode,
+                serverSorting: isServerSorting,
+            });
+        }
         if (isServerMode || isServerSorting) {
             const pagination = resetPageToFirst();
+            if (stateLogger.isLevelEnabled('debug')) {
+                stateLogger.debug('Sorting change triggered server fetch', { pagination, sorting: newSorting });
+            }
             tableStateChange({ sorting: newSorting, pagination });
             fetchData({
                 sorting: newSorting,
@@ -198,6 +259,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         else if (onDataStateChange) {
             const pagination = resetPageToFirst();
             setTimeout(() => {
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Sorting change notified client state change', { pagination, sorting: newSorting });
+                }
                 tableStateChange({ sorting: newSorting, pagination });
             }, 0);
         }
@@ -209,6 +273,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         isServerSorting,
         onDataStateChange,
         tableStateChange,
+        stateLogger,
     ]);
     const handleColumnOrderChange = (0, react_1.useCallback)((updatedColumnOrder) => {
         const newColumnOrder = typeof updatedColumnOrder === 'function'
@@ -229,30 +294,67 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         }
     }, [onColumnPinningChange, columnPinning]);
     const handlePaginationChange = (0, react_1.useCallback)((updater) => {
-        setPagination(updater);
         const newPagination = typeof updater === 'function' ? updater(pagination) : updater;
+        if (paginationLogger.isLevelEnabled('debug')) {
+            paginationLogger.debug('Pagination change requested', {
+                previous: pagination,
+                next: newPagination,
+                serverSide: isServerMode || isServerPagination,
+            });
+        }
+        setPagination(newPagination);
+        onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
+        if (paginationLogger.isLevelEnabled('debug')) {
+            paginationLogger.debug('Pagination state updated', newPagination);
+        }
         if (isServerMode || isServerPagination) {
             setTimeout(() => {
+                if (paginationLogger.isLevelEnabled('debug')) {
+                    paginationLogger.debug('Notifying server-side pagination change', newPagination);
+                }
                 tableStateChange({ pagination: newPagination });
                 fetchData({ pagination: newPagination });
             }, 0);
         }
         else if (onDataStateChange) {
             setTimeout(() => {
+                if (paginationLogger.isLevelEnabled('debug')) {
+                    paginationLogger.debug('Notifying client-side pagination change', newPagination);
+                }
                 tableStateChange({ pagination: newPagination });
             }, 0);
         }
-        setPagination(newPagination);
-        onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
-    }, [pagination, isServerMode, isServerPagination, onDataStateChange, fetchData, tableStateChange]);
+    }, [
+        pagination,
+        isServerMode,
+        isServerPagination,
+        onDataStateChange,
+        fetchData,
+        tableStateChange,
+        paginationLogger,
+        onPaginationChange,
+    ]);
     const handleGlobalFilterChange = (0, react_1.useCallback)((updaterOrValue) => {
         const newFilter = typeof updaterOrValue === 'function'
             ? updaterOrValue(globalFilter)
             : updaterOrValue;
         setGlobalFilter(newFilter);
+        if (stateLogger.isLevelEnabled('debug')) {
+            stateLogger.debug('Global filter change applied', {
+                value: newFilter,
+                serverMode: isServerMode,
+                serverFiltering: isServerFiltering,
+            });
+        }
         if (isServerMode || isServerFiltering) {
             const pagination = resetPageToFirst();
             setTimeout(() => {
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Global filter change triggering server fetch', {
+                        pagination,
+                        value: newFilter,
+                    });
+                }
                 tableStateChange({ globalFilter: newFilter, pagination });
                 fetchData({ globalFilter: newFilter, pagination });
             }, 0);
@@ -260,11 +362,17 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         else if (onDataStateChange) {
             const pagination = resetPageToFirst();
             setTimeout(() => {
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Global filter change notifying client listeners', {
+                        pagination,
+                        value: newFilter,
+                    });
+                }
                 tableStateChange({ globalFilter: newFilter, pagination });
             }, 0);
         }
         onGlobalFilterChange === null || onGlobalFilterChange === void 0 ? void 0 : onGlobalFilterChange(newFilter);
-    }, [globalFilter, isServerMode, isServerFiltering, onDataStateChange, fetchData, tableStateChange]);
+    }, [globalFilter, isServerMode, isServerFiltering, onDataStateChange, fetchData, tableStateChange, stateLogger]);
     const onColumnFilterChangeHandler = (0, react_1.useCallback)((updater) => {
         const currentState = columnFilter;
         const newState = typeof updater === 'function'
@@ -312,6 +420,12 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         enabled: enableVirtualization && !enablePagination && rows.length > 0,
     });
     const resetPageToFirst = () => {
+        if (paginationLogger.isLevelEnabled('info')) {
+            paginationLogger.info('Resetting to first page due to state change', {
+                previousPageIndex: pagination.pageIndex,
+                pageSize: pagination.pageSize,
+            });
+        }
         const newPagination = { pageIndex: 0, pageSize: pagination.pageSize };
         setPagination(newPagination);
         onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
@@ -355,29 +469,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             setColumnOrder(initialOrder);
         }
     }, [enableColumnDragging, enhancedColumns, columnOrder.length]);
-    (0, use_data_table_api_1.useDataTableApi)({
-        table,
-        idKey,
-        enhancedColumns,
-        enablePagination,
-        enableColumnPinning,
-        initialStateConfig: Object.assign(Object.assign({}, DEFAULT_INITIAL_STATE), initialState),
-        selectMode,
-        onSelectionChange: handleSelectionStateChange,
-        handleColumnFilterStateChange,
-        onDataStateChange,
-        onFetchData: fetchData,
-        exportFilename,
-        onExportProgress,
-        onExportComplete,
-        onExportError,
-        onServerExport,
-        exportController,
-        setExportController,
-        isExporting,
-        onDataChange: setServerData,
-        dataMode,
-    }, internalApiRef);
     (0, react_1.useImperativeHandle)(ref, () => internalApiRef.current, []);
     (0, react_1.useImperativeHandle)(ref, () => ({
         table: {
@@ -505,6 +596,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                     pendingFilters: columnFilter.pendingFilters || [],
                     pendingLogic: columnFilter.pendingLogic || 'AND',
                 });
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug(`Adding column filter ${columnId} ${operator} ${value}`, newFilters);
+                }
             },
             removeColumnFilter: (filterId) => {
                 const columnFilter = table.getState().columnFilter;
@@ -516,6 +610,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                     pendingFilters: columnFilter.pendingFilters || [],
                     pendingLogic: columnFilter.pendingLogic || 'AND',
                 });
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug(`Removing column filter ${filterId}`, newFilters);
+                }
             },
             clearAllFilters: () => {
                 table.setGlobalFilter('');
@@ -534,11 +631,17 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                     pendingFilters: [],
                     pendingLogic: 'AND',
                 });
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Resetting filters');
+                }
             },
         },
         sorting: {
             setSorting: (sortingState) => {
                 table.setSorting(sortingState);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug(`Setting sorting`, sortingState);
+                }
             },
             sortColumn: (columnId, direction) => {
                 const column = table.getColumn(columnId);
@@ -561,23 +664,41 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         pagination: {
             goToPage: (pageIndex) => {
                 table.setPageIndex(pageIndex);
+                if (paginationLogger.isLevelEnabled('debug')) {
+                    paginationLogger.debug(`Going to page ${pageIndex}`);
+                }
             },
             nextPage: () => {
                 table.nextPage();
+                if (paginationLogger.isLevelEnabled('debug')) {
+                    paginationLogger.debug('Next page');
+                }
             },
             previousPage: () => {
                 table.previousPage();
+                if (paginationLogger.isLevelEnabled('debug')) {
+                    paginationLogger.debug('Previous page');
+                }
             },
             setPageSize: (pageSize) => {
                 table.setPageSize(pageSize);
+                if (paginationLogger.isLevelEnabled('debug')) {
+                    paginationLogger.debug(`Setting page size to ${pageSize}`);
+                }
             },
             goToFirstPage: () => {
                 table.setPageIndex(0);
+                if (paginationLogger.isLevelEnabled('debug')) {
+                    paginationLogger.debug('Going to first page');
+                }
             },
             goToLastPage: () => {
                 const pageCount = table.getPageCount();
                 if (pageCount > 0) {
                     table.setPageIndex(pageCount - 1);
+                    if (paginationLogger.isLevelEnabled('debug')) {
+                        paginationLogger.debug(`Going to last page ${pageCount - 1}`);
+                    }
                 }
             },
         },
@@ -602,13 +723,20 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                     pageSize: ((_a = filters.pagination) === null || _a === void 0 ? void 0 : _a.pageSize) || ((_b = initialStateConfig.pagination) === null || _b === void 0 ? void 0 : _b.pageSize) || 10,
                 };
                 const allState = table.getState();
+                setPagination(pagination);
                 onDataStateChange === null || onDataStateChange === void 0 ? void 0 : onDataStateChange(allState);
                 fetchData === null || fetchData === void 0 ? void 0 : fetchData({ pagination });
+                if (fetchLogger.isLevelEnabled('debug')) {
+                    fetchLogger.debug('Refreshing data', { pagination, allState });
+                }
             },
             reload: () => {
                 const allState = table.getState();
                 onDataStateChange === null || onDataStateChange === void 0 ? void 0 : onDataStateChange(allState);
                 onFetchData === null || onFetchData === void 0 ? void 0 : onFetchData({});
+                if (fetchLogger.isLevelEnabled('debug')) {
+                    fetchLogger.debug('Reloading data', allState);
+                }
             },
             getAllData: () => {
                 var _a;
@@ -627,6 +755,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 const newData = (_a = table.getRowModel().rows) === null || _a === void 0 ? void 0 : _a.map(row => String(row.original[idKey]) === rowId
                     ? Object.assign(Object.assign({}, row.original), updates) : row.original);
                 setServerData === null || setServerData === void 0 ? void 0 : setServerData(newData || []);
+                if (fetchLogger.isLevelEnabled('debug')) {
+                    fetchLogger.debug(`Updating row ${rowId}`, updates);
+                }
             },
             updateRowByIndex: (index, updates) => {
                 var _a;
@@ -634,6 +765,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 if (newData === null || newData === void 0 ? void 0 : newData[index]) {
                     newData[index] = Object.assign(Object.assign({}, newData[index]), updates);
                     setServerData(newData);
+                    if (fetchLogger.isLevelEnabled('debug')) {
+                        fetchLogger.debug(`Updating row by index ${index}`, updates);
+                    }
                 }
             },
             insertRow: (newRow, index) => {
@@ -646,17 +780,26 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                     newData.push(newRow);
                 }
                 setServerData(newData || []);
+                if (fetchLogger.isLevelEnabled('debug')) {
+                    fetchLogger.debug(`Inserting row`, newRow);
+                }
             },
             deleteRow: (rowId) => {
                 var _a;
                 const newData = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.filter(row => String(row.original[idKey]) !== rowId);
                 setServerData === null || setServerData === void 0 ? void 0 : setServerData((newData === null || newData === void 0 ? void 0 : newData.map(row => row.original)) || []);
+                if (fetchLogger.isLevelEnabled('debug')) {
+                    fetchLogger.debug(`Deleting row ${rowId}`);
+                }
             },
             deleteRowByIndex: (index) => {
                 var _a;
                 const newData = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.map(row => row.original);
                 newData.splice(index, 1);
                 setServerData(newData);
+                if (fetchLogger.isLevelEnabled('debug')) {
+                    fetchLogger.debug(`Deleting row by index ${index}`);
+                }
             },
             deleteSelectedRows: () => {
                 var _a;
@@ -665,6 +808,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 const newData = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.filter(row => !selectedRowIds.includes(String(row.original[idKey])));
                 setServerData((newData === null || newData === void 0 ? void 0 : newData.map(row => row.original)) || []);
                 table.resetRowSelection();
+                if (fetchLogger.isLevelEnabled('debug')) {
+                    fetchLogger.debug('Deleting selected rows');
+                }
             },
             replaceAllData: (newData) => {
                 setServerData === null || setServerData === void 0 ? void 0 : setServerData(newData);
@@ -821,6 +967,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                             sorting: table.getState().sorting,
                             pagination: table.getState().pagination,
                         };
+                        if (stateLogger.isLevelEnabled('debug')) {
+                            stateLogger.debug('Server export CSV', { currentFilters });
+                        }
                         yield (0, utils_1.exportServerData)(table, {
                             format: 'csv',
                             filename,
@@ -840,6 +989,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                             onComplete: onExportComplete,
                             onError: onExportError,
                         });
+                        if (stateLogger.isLevelEnabled('debug')) {
+                            stateLogger.debug('Client export CSV', filename);
+                        }
                     }
                 }
                 catch (error) {
@@ -865,6 +1017,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                             sorting: table.getState().sorting,
                             pagination: table.getState().pagination,
                         };
+                        if (stateLogger.isLevelEnabled('debug')) {
+                            stateLogger.debug('Server export Excel', { currentFilters });
+                        }
                         yield (0, utils_1.exportServerData)(table, {
                             format: 'excel',
                             filename,
@@ -884,6 +1039,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                             onComplete: onExportComplete,
                             onError: onExportError,
                         });
+                        if (stateLogger.isLevelEnabled('debug')) {
+                            stateLogger.debug('Client export Excel', filename);
+                        }
                     }
                 }
                 catch (error) {
@@ -891,6 +1049,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                         message: error.message || 'Export failed',
                         code: 'EXPORT_ERROR',
                     });
+                    if (stateLogger.isLevelEnabled('debug')) {
+                        stateLogger.debug('Server export Excel failed', error);
+                    }
                 }
                 finally {
                     setExportController === null || setExportController === void 0 ? void 0 : setExportController(null);
@@ -904,6 +1065,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                         message: 'No server export function provided',
                         code: 'NO_SERVER_EXPORT',
                     });
+                    if (stateLogger.isLevelEnabled('debug')) {
+                        stateLogger.debug('Server export data failed', 'No server export function provided');
+                    }
                     return;
                 }
                 try {
@@ -915,6 +1079,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                         sorting: table.getState().sorting,
                         pagination: table.getState().pagination,
                     };
+                    if (stateLogger.isLevelEnabled('debug')) {
+                        stateLogger.debug('Server export data', { currentFilters });
+                    }
                     yield (0, utils_1.exportServerData)(table, {
                         format,
                         filename,
@@ -931,6 +1098,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                         message: error.message || 'Export failed',
                         code: 'EXPORT_ERROR',
                     });
+                    if (stateLogger.isLevelEnabled('debug')) {
+                        stateLogger.debug('Server export data failed', error);
+                    }
                 }
                 finally {
                     setExportController === null || setExportController === void 0 ? void 0 : setExportController(null);
@@ -940,6 +1110,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             cancelExport: () => {
                 exportController === null || exportController === void 0 ? void 0 : exportController.abort();
                 setExportController === null || setExportController === void 0 ? void 0 : setExportController(null);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Export cancelled');
+                }
             },
         },
     }), [

package/src/lib/components/table/data-table.types.d.ts

@@ -1,17 +1,17 @@
-import { Row, SortingState, ColumnResizeMode, ColumnPinningState, RowData, PaginationState } from '@tanstack/react-table';
+import { Row, SortingState, ColumnResizeMode, ColumnPinningState, RowData, PaginationState, ColumnDef } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 import type { ColumnFilterState, TableFilters, TableState } from '../../types';
-import { DataTableColumn } from '../../types';
 import { DataTableSlots, PartialSlotProps } from '../../types/slots.types';
 import { DataTableSize } from '../../utils/table-helpers';
 import { SelectionState } from '../../features';
+import { DataTableLoggingOptions } from '../../utils/logger';
 export type SelectMode = 'page' | 'all';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
     }
 }
 export interface DataTableProps<T> {
-    columns: DataTableColumn<T>[];
+    columns: ColumnDef<T, any>[];
     data?: T[];
     totalRow?: number;
     idKey?: keyof T;
@@ -95,4 +95,5 @@ export interface DataTableProps<T> {
     onColumnFilterChange?: (columnFilter: ColumnFilterState) => void;
     slots?: Partial<DataTableSlots<T>>;
     slotProps?: PartialSlotProps<T>;
+    logging?: boolean | DataTableLoggingOptions;
 }

package/src/lib/examples/advanced-features-example.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const material_1 = require("@mui/material");
 const icons_material_1 = require("@mui/icons-material");
 const components_1 = require("../components");
+const types_1 = require("../types");
 const generateEmployeeData = () => {
     const departments = [
         { id: 1, name: 'Engineering', color: '#2196F3' },
@@ -218,6 +219,10 @@ function AdvancedFeaturesExample() {
                         pageIndex: 0,
                         pageSize: 10,
                     },
+                    columnPinning: {
+                        left: [types_1.DEFAULT_SELECTION_COLUMN_NAME],
+                        right: ['actions'],
+                    },
                     columnOrder: ['name', 'department.name', 'salary', 'performance.rating', 'skills'],
                 }, tableContainerProps: {
                     sx: {

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

@@ -35,7 +35,7 @@ function ServerSideFetchingExample() {
     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('🔄 handleFetchData', { filters });
         setLoading(true);
         setError(null);
         setLastFetchParams(filters);
@@ -114,13 +114,12 @@ function ServerSideFetchingExample() {
         }
     }), [tab]);
     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') {
+        if (tab) {
+            console.log('🔄 Refreshing data');
             (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.data.refresh();
         }
     }, [tab]);
@@ -233,7 +232,7 @@ function ServerSideFetchingExample() {
                             }, children: "Update Selected" })] })), enableGlobalFilter: true, enableColumnFilter: true, enableSorting: true, enablePagination: true, initialState: {
                     pagination: {
                         pageIndex: 0,
-                        pageSize: 10,
+                        pageSize: 50,
                     },
                     columnPinning: {
                         left: [types_1.DEFAULT_SELECTION_COLUMN_NAME],
@@ -245,5 +244,9 @@ function ServerSideFetchingExample() {
                     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 })] }));
+                }, 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/hooks/use-data-table-api.d.ts

@@ -3,6 +3,7 @@ import { Ref } from 'react';
 import { ColumnFilterState, TableFilters, TableState } from '../types';
 import { DataTableApi } from '../types/data-table-api';
 import { SelectionState } from '../features';
+import { DataTableLoggingOptions } from '../utils/logger';
 interface UseDataTableApiProps<T> {
     table: Table<T>;
     idKey: keyof T;
@@ -39,6 +40,7 @@ interface UseDataTableApiProps<T> {
     setExportController?: (controller: AbortController | null) => void;
     isExporting?: boolean;
     dataMode?: 'client' | 'server';
+    logging?: boolean | DataTableLoggingOptions;
 }
 export declare function useDataTableApi<T extends Record<string, any>>(props: UseDataTableApiProps<T>, ref: Ref<DataTableApi<T>>): void;
 export {};

package/src/lib/hooks/use-data-table-api.js

@@ -4,8 +4,13 @@ exports.useDataTableApi = useDataTableApi;
 const tslib_1 = require("tslib");
 const react_1 = require("react");
 const export_utils_1 = require("../utils/export-utils");
+const logger_1 = require("../utils/logger");
 function useDataTableApi(props, ref) {
-    const { table, idKey, enhancedColumns, enablePagination, enableColumnPinning, initialStateConfig, selectMode = 'page', onSelectionChange, handleColumnFilterStateChange, onDataStateChange, onFetchData, onDataChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, exportController, setExportController, isExporting, dataMode = 'client', } = props;
+    const { table, idKey, enhancedColumns, enablePagination, enableColumnPinning, initialStateConfig, selectMode = 'page', onSelectionChange, handleColumnFilterStateChange, onDataStateChange, onFetchData, onDataChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, exportController, setExportController, isExporting, dataMode = 'client', logging, } = props;
+    const logger = (0, react_1.useMemo)(() => (0, logger_1.createLogger)('DataTableApi', logging), [logging]);
+    const fetchLogger = (0, react_1.useMemo)(() => logger.child('fetch'), [logger]);
+    const paginationLogger = (0, react_1.useMemo)(() => logger.child('pagination'), [logger]);
+    const stateLogger = (0, react_1.useMemo)(() => logger.child('state'), [logger]);
     const getTableFilters = (0, react_1.useCallback)((withAllState = false) => {
         const state = table.getState();
         return Object.assign({ sorting: state.sorting, globalFilter: state.globalFilter, columnFilter: state.columnFilter, pagination: state.pagination }, (withAllState ? {
@@ -55,6 +60,9 @@ function useDataTableApi(props, ref) {
                 newOrder.splice(currentIndex, 1);
                 newOrder.splice(toIndex, 0, columnId);
                 table.setColumnOrder(newOrder);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Column order updated', `${columnId} from ${currentIndex} to ${toIndex}`);
+                }
             },
             resetColumnOrder: () => {
                 const initialOrder = enhancedColumns.map((col, index) => {
@@ -67,6 +75,9 @@ function useDataTableApi(props, ref) {
                     return `column_${index}`;
                 });
                 table.setColumnOrder(initialOrder);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Column order reset', initialOrder);
+                }
             },
         },
         columnPinning: {
@@ -76,6 +87,9 @@ function useDataTableApi(props, ref) {
                 newPinning.right = (newPinning.right || []).filter(id => id !== columnId);
                 newPinning.left = [...(newPinning.left || []).filter(id => id !== columnId), columnId];
                 table.setColumnPinning(newPinning);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Column pinned left', `${columnId}`);
+                }
             },
             pinColumnRight: (columnId) => {
                 const currentPinning = table.getState().columnPinning;
@@ -83,6 +97,9 @@ function useDataTableApi(props, ref) {
                 newPinning.left = (newPinning.left || []).filter(id => id !== columnId);
                 newPinning.right = [...(newPinning.right || []).filter(id => id !== columnId), columnId];
                 table.setColumnPinning(newPinning);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Column pinned right', `${columnId}`);
+                }
             },
             unpinColumn: (columnId) => {
                 const currentPinning = table.getState().columnPinning;
@@ -118,12 +135,21 @@ function useDataTableApi(props, ref) {
         filtering: {
             setGlobalFilter: (filter) => {
                 table.setGlobalFilter(filter);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Global filter set', `${filter}`);
+                }
             },
             clearGlobalFilter: () => {
                 table.setGlobalFilter('');
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Global filter cleared');
+                }
             },
             setColumnFilters: (filters) => {
                 handleColumnFilterStateChange(filters);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Column filters set', `${filters}`);
+                }
             },
             addColumnFilter: (columnId, operator, value) => {
                 const newFilter = {
@@ -141,6 +167,9 @@ function useDataTableApi(props, ref) {
                     pendingFilters: columnFilter.pendingFilters || [],
                     pendingLogic: columnFilter.pendingLogic || 'AND',
                 });
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug(`Column filter added ${columnId} ${operator} ${value}`, newFilters);
+                }
             },
             removeColumnFilter: (filterId) => {
                 const columnFilter = table.getState().columnFilter;
@@ -152,6 +181,9 @@ function useDataTableApi(props, ref) {
                     pendingFilters: columnFilter.pendingFilters || [],
                     pendingLogic: columnFilter.pendingLogic || 'AND',
                 });
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug(`Column filter removed ${filterId}`, newFilters);
+                }
             },
             clearAllFilters: () => {
                 table.setGlobalFilter('');
@@ -161,6 +193,9 @@ function useDataTableApi(props, ref) {
                     pendingFilters: [],
                     pendingLogic: 'AND',
                 });
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Filters reset');
+                }
             },
             resetFilters: () => {
                 table.resetGlobalFilter();
@@ -175,6 +210,9 @@ function useDataTableApi(props, ref) {
         sorting: {
             setSorting: (sortingState) => {
                 table.setSorting(sortingState);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Sorting set', `${sortingState}`);
+                }
             },
             sortColumn: (columnId, direction) => {
                 const column = table.getColumn(columnId);
@@ -197,24 +235,42 @@ function useDataTableApi(props, ref) {
         pagination: {
             goToPage: (pageIndex) => {
                 table.setPageIndex(pageIndex);
+                if (paginationLogger.isLevelEnabled('debug')) {
+                    paginationLogger.debug('Page index set', `${pageIndex}`);
+                }
             },
             nextPage: () => {
                 table.nextPage();
+                if (paginationLogger.isLevelEnabled('debug')) {
+                    paginationLogger.debug('Next page');
+                }
             },
             previousPage: () => {
                 table.previousPage();
+                if (paginationLogger.isLevelEnabled('debug')) {
+                    paginationLogger.debug('Previous page');
+                }
             },
             setPageSize: (pageSize) => {
                 table.setPageSize(pageSize);
+                if (paginationLogger.isLevelEnabled('debug')) {
+                    paginationLogger.debug('Page size set', `${pageSize}`);
+                }
             },
             goToFirstPage: () => {
                 table.setPageIndex(0);
+                if (paginationLogger.isLevelEnabled('debug')) {
+                    paginationLogger.debug('Page index set to 0');
+                }
             },
             goToLastPage: () => {
                 const pageCount = table.getPageCount();
                 if (pageCount > 0) {
                     table.setPageIndex(pageCount - 1);
                 }
+                if (paginationLogger.isLevelEnabled('debug')) {
+                    paginationLogger.debug('Page index set to last page', `${pageCount - 1}`);
+                }
             },
         },
         selection: {
@@ -240,12 +296,18 @@ function useDataTableApi(props, ref) {
                 const allState = getTableFilters(true);
                 onDataStateChange === null || onDataStateChange === void 0 ? void 0 : onDataStateChange(allState);
                 onFetchData === null || onFetchData === void 0 ? void 0 : onFetchData(filters);
+                if (fetchLogger.isLevelEnabled('debug')) {
+                    fetchLogger.debug('Data refreshed', filters);
+                }
             },
             reload: () => {
                 const filters = getTableFilters();
                 const allState = getTableFilters(true);
                 onDataStateChange === null || onDataStateChange === void 0 ? void 0 : onDataStateChange(allState);
                 onFetchData === null || onFetchData === void 0 ? void 0 : onFetchData(filters);
+                if (fetchLogger.isLevelEnabled('debug')) {
+                    fetchLogger.debug('Data reloaded', filters);
+                }
             },
             getAllData: () => {
                 var _a;
@@ -264,6 +326,9 @@ function useDataTableApi(props, ref) {
                 const newData = (_a = table.getRowModel().rows) === null || _a === void 0 ? void 0 : _a.map(row => String(row.original[idKey]) === rowId
                     ? Object.assign(Object.assign({}, row.original), updates) : row.original);
                 onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(newData || []);
+                if (fetchLogger.isLevelEnabled('debug')) {
+                    fetchLogger.debug('Row updated', `${rowId}`, updates);
+                }
             },
             updateRowByIndex: (index, updates) => {
                 var _a;
@@ -283,11 +348,17 @@ function useDataTableApi(props, ref) {
                     newData.push(newRow);
                 }
                 onDataChange(newData || []);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Row inserted', `${newRow}`, index);
+                }
             },
             deleteRow: (rowId) => {
                 var _a;
                 const newData = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.filter(row => String(row.original[idKey]) !== rowId);
                 onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange((newData === null || newData === void 0 ? void 0 : newData.map(row => row.original)) || []);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Row deleted', `${rowId}`);
+                }
             },
             deleteRowByIndex: (index) => {
                 var _a;
@@ -302,6 +373,9 @@ function useDataTableApi(props, ref) {
                 const newData = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.filter(row => !selectedRowIds.includes(String(row.original[idKey])));
                 onDataChange((newData === null || newData === void 0 ? void 0 : newData.map(row => row.original)) || []);
                 table.resetRowSelection();
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Selected rows deleted', selectedRowIds);
+                }
             },
             replaceAllData: (newData) => {
                 onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(newData);
@@ -315,6 +389,9 @@ function useDataTableApi(props, ref) {
                     return updateData ? Object.assign(Object.assign({}, row.original), updateData) : row.original;
                 });
                 onDataChange(newData || []);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Multiple rows updated', updates);
+                }
             },
             insertMultipleRows: (newRows, startIndex) => {
                 var _a;
@@ -326,12 +403,18 @@ function useDataTableApi(props, ref) {
                     newData.push(...newRows);
                 }
                 onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(newData);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Multiple rows inserted', newRows);
+                }
             },
             deleteMultipleRows: (rowIds) => {
                 var _a, _b;
                 const idsToDelete = new Set(rowIds);
                 const newData = (_b = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.filter(row => !idsToDelete.has(String(row.original[idKey])))) === null || _b === void 0 ? void 0 : _b.map(row => row.original);
                 onDataChange(newData);
+                if (stateLogger.isLevelEnabled('debug')) {
+                    stateLogger.debug('Multiple rows deleted', rowIds);
+                }
             },
             updateField: (rowId, fieldName, value) => {
                 var _a;
@@ -458,6 +541,9 @@ function useDataTableApi(props, ref) {
                             sorting: table.getState().sorting,
                             pagination: table.getState().pagination,
                         };
+                        if (stateLogger.isLevelEnabled('debug')) {
+                            stateLogger.debug('Server export CSV', { currentFilters });
+                        }
                         yield (0, export_utils_1.exportServerData)(table, {
                             format: 'csv',
                             filename,

package/src/lib/utils/debounced-fetch.utils.js

@@ -6,21 +6,14 @@ const react_1 = require("react");
 function useDebouncedFetch(onFetchData, delay = 300) {
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const debounceTimer = (0, react_1.useRef)(null);
-    const lastFetchParams = (0, react_1.useRef)('');
     const debouncedFetch = (0, react_1.useCallback)((filters) => tslib_1.__awaiter(this, void 0, void 0, function* () {
         if (!onFetchData)
             return null;
-        const currentParams = JSON.stringify(filters);
         if (debounceTimer.current) {
             clearTimeout(debounceTimer.current);
         }
         return new Promise((resolve) => {
             debounceTimer.current = setTimeout(() => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                if (lastFetchParams.current === currentParams) {
-                    resolve(null);
-                    return;
-                }
-                lastFetchParams.current = currentParams;
                 setIsLoading(true);
                 try {
                     const result = yield onFetchData(filters);

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

@@ -5,3 +5,4 @@ export * from './export-utils';
 export * from './special-columns.utils';
 export * from './debounced-fetch.utils';
 export * from './slot-helpers';
+export * from './logger';

package/src/lib/utils/index.js

@@ -8,3 +8,4 @@ tslib_1.__exportStar(require("./export-utils"), exports);
 tslib_1.__exportStar(require("./special-columns.utils"), exports);
 tslib_1.__exportStar(require("./debounced-fetch.utils"), exports);
 tslib_1.__exportStar(require("./slot-helpers"), exports);
+tslib_1.__exportStar(require("./logger"), exports);

package/src/lib/utils/logger.d.ts

@@ -0,0 +1,34 @@
+export type LogLevel = 'silent' | 'error' | 'warn' | 'info' | 'debug';
+interface ConsoleLike {
+    debug?: (...args: unknown[]) => void;
+    info?: (...args: unknown[]) => void;
+    warn?: (...args: unknown[]) => void;
+    error?: (...args: unknown[]) => void;
+    log?: (...args: unknown[]) => void;
+}
+export interface DataTableLoggingOptions {
+    enabled?: boolean;
+    level?: LogLevel;
+    prefix?: string;
+    scope?: string;
+    includeTimestamp?: boolean;
+    logger?: ConsoleLike;
+}
+type LoggerInput = boolean | DataTableLoggingOptions;
+type ResolvedLoggerConfig = Required<Omit<DataTableLoggingOptions, 'logger'>> & {
+    logger: ConsoleLike;
+};
+type LogMethodLevel = Exclude<LogLevel, 'silent'>;
+export interface LoggerInstance {
+    debug: (...args: unknown[]) => void;
+    info: (...args: unknown[]) => void;
+    warn: (...args: unknown[]) => void;
+    error: (...args: unknown[]) => void;
+    child: (scope: string, overrides?: LoggerInput) => LoggerInstance;
+    isLevelEnabled: (level: LogMethodLevel) => boolean;
+    config: ResolvedLoggerConfig;
+}
+export declare const createLogger: (scope?: string, input?: LoggerInput, parentConfig?: ResolvedLoggerConfig) => LoggerInstance;
+export declare const configureDataTableLogging: (options: DataTableLoggingOptions) => void;
+export declare const getDataTableLoggingConfig: () => ResolvedLoggerConfig;
+export {};

package/src/lib/utils/logger.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDataTableLoggingConfig = exports.configureDataTableLogging = exports.createLogger = void 0;
+const LOG_LEVEL_ORDER = {
+    silent: 0,
+    error: 1,
+    warn: 2,
+    info: 3,
+    debug: 4,
+};
+const defaultConsole = typeof console !== 'undefined'
+    ? console
+    : {
+        log: () => undefined,
+        debug: () => undefined,
+        info: () => undefined,
+        warn: () => undefined,
+        error: () => undefined,
+    };
+let globalConfig = {
+    enabled: false,
+    level: 'warn',
+    prefix: 'DataTable',
+    scope: '',
+    includeTimestamp: false,
+    logger: defaultConsole,
+};
+const isLevelEnabled = (level, config) => {
+    if (!config.enabled) {
+        return false;
+    }
+    return LOG_LEVEL_ORDER[level] <= LOG_LEVEL_ORDER[config.level];
+};
+const formatPrefix = (level, config) => {
+    const segments = [];
+    if (config.prefix) {
+        segments.push(config.prefix);
+    }
+    if (config.scope) {
+        segments.push(config.scope);
+    }
+    const prefix = segments.length > 0 ? `[${segments.join(':')}]` : '';
+    return config.includeTimestamp
+        ? `[${new Date().toISOString()}]${prefix ? ` ${prefix}` : ''} [${level.toUpperCase()}]`
+        : `${prefix ? `${prefix} ` : ''}[${level.toUpperCase()}]`;
+};
+const getConsoleMethod = (level, logger) => {
+    var _a, _b, _c;
+    const methodName = level === 'debug' ? 'debug' : level;
+    return (_c = (_b = (_a = logger[methodName]) !== null && _a !== void 0 ? _a : logger.log) !== null && _b !== void 0 ? _b : defaultConsole.log) !== null && _c !== void 0 ? _c : (() => undefined);
+};
+const normaliseInput = (input) => {
+    if (typeof input === 'boolean') {
+        return { enabled: input };
+    }
+    return input !== null && input !== void 0 ? input : {};
+};
+const resolveConfig = (scope, input, parent) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const overrides = normaliseInput(input);
+    const base = parent !== null && parent !== void 0 ? parent : globalConfig;
+    return {
+        enabled: (_a = overrides.enabled) !== null && _a !== void 0 ? _a : base.enabled,
+        level: (_b = overrides.level) !== null && _b !== void 0 ? _b : base.level,
+        prefix: (_c = overrides.prefix) !== null && _c !== void 0 ? _c : base.prefix,
+        scope: (_f = (_e = (_d = overrides.scope) !== null && _d !== void 0 ? _d : scope) !== null && _e !== void 0 ? _e : base.scope) !== null && _f !== void 0 ? _f : '',
+        includeTimestamp: (_g = overrides.includeTimestamp) !== null && _g !== void 0 ? _g : base.includeTimestamp,
+        logger: (_j = (_h = overrides.logger) !== null && _h !== void 0 ? _h : base.logger) !== null && _j !== void 0 ? _j : defaultConsole,
+    };
+};
+const createLoggerMethods = (config) => {
+    const logWithLevel = (level) => {
+        const consoleMethod = getConsoleMethod(level, config.logger);
+        return (...args) => {
+            if (!isLevelEnabled(level, config)) {
+                return;
+            }
+            const prefix = formatPrefix(level, config);
+            consoleMethod(prefix, ...args);
+        };
+    };
+    return {
+        debug: logWithLevel('debug'),
+        info: logWithLevel('info'),
+        warn: logWithLevel('warn'),
+        error: logWithLevel('error'),
+    };
+};
+const createLogger = (scope, input, parentConfig) => {
+    const resolvedConfig = resolveConfig(scope, input, parentConfig);
+    const methods = createLoggerMethods(resolvedConfig);
+    const child = (childScope, overrides) => {
+        const combinedScope = childScope
+            ? (resolvedConfig.scope ? `${resolvedConfig.scope}.${childScope}` : childScope)
+            : resolvedConfig.scope;
+        return (0, exports.createLogger)(combinedScope, overrides, resolvedConfig);
+    };
+    return Object.assign(Object.assign({}, methods), { child, isLevelEnabled: (level) => isLevelEnabled(level, resolvedConfig), config: resolvedConfig });
+};
+exports.createLogger = createLogger;
+const configureDataTableLogging = (options) => {
+    globalConfig = resolveConfig(options.scope, options, globalConfig);
+};
+exports.configureDataTableLogging = configureDataTableLogging;
+const getDataTableLoggingConfig = () => (Object.assign({}, globalConfig));
+exports.getDataTableLoggingConfig = getDataTableLoggingConfig;