@ackplus/react-tanstack-data-table 1.0.19-beta-0.13 → 1.0.19-beta-0.15

package/package.json

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

package/src/lib/components/headers/draggable-header.d.ts

@@ -7,6 +7,7 @@ interface DraggableHeaderProps<T> {
     onColumnReorder?: (draggedColumnId: string, targetColumnId: string) => void;
     slots?: Record<string, any>;
     slotProps?: Record<string, any>;
+    alignment?: 'left' | 'center' | 'right';
 }
-export declare function DraggableHeader<T>({ header, enableSorting, draggable, onColumnReorder, slots, slotProps, }: DraggableHeaderProps<T>): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | import("react/jsx-runtime").JSX.Element;
+export declare function DraggableHeader<T>({ header, enableSorting, draggable, onColumnReorder, slots, slotProps, alignment, }: DraggableHeaderProps<T>): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | import("react/jsx-runtime").JSX.Element;
 export {};

package/src/lib/components/headers/draggable-header.js

@@ -7,7 +7,7 @@ const material_1 = require("@mui/material");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
 const slot_helpers_1 = require("../../utils/slot-helpers");
-function DraggableHeader({ header, enableSorting = true, draggable = false, onColumnReorder, slots, slotProps, }) {
+function DraggableHeader({ header, enableSorting = true, draggable = false, onColumnReorder, slots, slotProps, alignment, }) {
     const [isDragging, setIsDragging] = (0, react_1.useState)(false);
     const [dragOver, setDragOver] = (0, react_1.useState)(false);
     const autoScrollIntervalRef = (0, react_1.useRef)(null);
@@ -18,6 +18,9 @@ function DraggableHeader({ header, enableSorting = true, draggable = false, onCo
     const AUTO_SCROLL_THRESHOLD = 50;
     const AUTO_SCROLL_SPEED = 10;
     const AUTO_SCROLL_INTERVAL = 16;
+    const justifyContent = (0, react_1.useMemo)(() => {
+        return alignment === 'left' ? 'flex-start' : alignment === 'right' ? 'flex-end' : 'center';
+    }, [alignment]);
     const findScrollableContainer = (0, react_1.useCallback)((element) => {
         let searchElement = element;
         if (!searchElement) {
@@ -191,6 +194,7 @@ function DraggableHeader({ header, enableSorting = true, draggable = false, onCo
     return ((0, jsx_runtime_1.jsx)(material_1.Box, { ref: headerElementRef, sx: {
             display: 'flex',
             alignItems: 'center',
+            justifyContent: justifyContent,
             gap: 1,
             cursor: getCursor(),
             userSelect: 'none',
@@ -203,10 +207,8 @@ function DraggableHeader({ header, enableSorting = true, draggable = false, onCo
             '&:active': {
                 cursor: draggable ? 'grabbing' : 'pointer',
             },
-        }, draggable: draggable, onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: enableSorting ? handleSort : undefined, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
-                flex: 1,
-                display: 'flex',
-                alignItems: 'center',
+        }, draggable: draggable, onDragStart: handleDragStart, onDrag: handleDrag, onDragEnd: handleDragEnd, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: enableSorting ? handleSort : undefined, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { component: "span", sx: {
+                display: 'inline-flex',
                 gap: 1,
             }, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), getSortIcon()] }) }));
 }

package/src/lib/components/headers/table-header.js

@@ -28,7 +28,7 @@ function TableHeader({ draggable = false, enableColumnResizing = false, enableSt
                 pinnedRightPosition,
                 zIndex: isPinned ? 10 : 1,
                 disableStickyHeader: enableStickyHeader,
-            })) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerCell, { children: [(0, jsx_runtime_1.jsx)(draggable_header_1.DraggableHeader, { header: header, enableSorting: enableSorting, draggable: !!(draggable && !isPinned), onColumnReorder: onColumnReorder, slots: slots, slotProps: slotProps }), enableColumnResizing && header.column.getCanResize() ? ((0, jsx_runtime_1.jsx)(material_1.Box, { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: {
+            })) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerCell, { children: [(0, jsx_runtime_1.jsx)(draggable_header_1.DraggableHeader, { header: header, enableSorting: enableSorting, draggable: !!(draggable && !isPinned), onColumnReorder: onColumnReorder, slots: slots, slotProps: slotProps, alignment: alignment }), enableColumnResizing && header.column.getCanResize() ? ((0, jsx_runtime_1.jsx)(material_1.Box, { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: {
                         position: 'absolute',
                         right: 0,
                         top: '25%',

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

@@ -40,7 +40,7 @@ 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, 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 = {}, }, ref) {
     var _a;
     const isServerMode = dataMode === 'server';
     const isServerPagination = paginationMode === 'server' || isServerMode;
@@ -68,14 +68,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
     const initialStateConfig = (0, react_1.useMemo)(() => {
         return Object.assign(Object.assign({}, DEFAULT_INITIAL_STATE), initialState);
     }, [initialState]);
-    (0, react_1.useEffect)(() => {
-        setSorting(initialStateConfig.sorting);
-        setPagination(initialStateConfig.pagination);
-        setGlobalFilter(initialStateConfig.globalFilter);
-        setExpanded(initialStateConfig.expanded);
-        setColumnOrder(initialStateConfig.columnOrder);
-        setColumnPinning(initialStateConfig.columnPinning);
-    }, [initialStateConfig]);
     const { debouncedFetch, isLoading: fetchLoading } = (0, debounced_fetch_utils_1.useDebouncedFetch)(onFetchData);
     const tableData = (0, react_1.useMemo)(() => serverData ? serverData : data, [onFetchData, serverData, data]);
     const tableTotalRow = (0, react_1.useMemo)(() => serverData ? serverTotal : totalRow, [onFetchData, serverTotal, totalRow]);
@@ -156,8 +148,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         sorting,
         debouncedFetch,
     ]);
-    const fetchDataRef = (0, react_1.useRef)(fetchData);
-    fetchDataRef.current = fetchData;
     const handleSelectionStateChange = (0, react_1.useCallback)((updaterOrValue) => {
         setSelectionState((prevState) => {
             const newSelectionState = typeof updaterOrValue === 'function'
@@ -174,14 +164,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
     const handleColumnFilterStateChange = (0, react_1.useCallback)((filterState) => {
         if (filterState && typeof filterState === 'object') {
             setColumnFilter(filterState);
-            setTimeout(() => {
-                if (onColumnFiltersChange) {
-                    onColumnFiltersChange(filterState);
-                }
-            }, 0);
         }
     }, [onColumnFiltersChange]);
-    const notifyDataStateChange = (0, react_1.useCallback)((overrides = {}) => {
+    const tableStateChange = (0, react_1.useCallback)((overrides = {}) => {
         if (onDataStateChange) {
             const currentState = Object.assign({ globalFilter,
                 columnFilter,
@@ -200,35 +185,35 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         columnOrder,
         columnPinning,
     ]);
-    const stateChangeRef = (0, react_1.useRef)(notifyDataStateChange);
-    stateChangeRef.current = notifyDataStateChange;
     const handleSortingChange = (0, react_1.useCallback)((updaterOrValue) => {
         let newSorting = typeof updaterOrValue === 'function'
             ? updaterOrValue(sorting)
             : updaterOrValue;
-        console.log('handleSortingChange', newSorting);
         newSorting = newSorting.filter((sort) => sort.id);
         setSorting(newSorting);
-        if (onSortingChange) {
-            onSortingChange(newSorting);
-        }
+        onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(newSorting);
         if (isServerMode || isServerSorting) {
-            stateChangeRef.current({ sorting: newSorting });
-            fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({
+            const pagination = resetPageToFirst();
+            tableStateChange({ sorting: newSorting, pagination });
+            fetchData({
                 sorting: newSorting,
+                pagination,
             });
         }
         else if (onDataStateChange) {
+            const pagination = resetPageToFirst();
             setTimeout(() => {
-                stateChangeRef.current({ sorting: newSorting });
+                tableStateChange({ sorting: newSorting, pagination });
             }, 0);
         }
     }, [
         sorting,
         onSortingChange,
+        fetchData,
         isServerMode,
         isServerSorting,
         onDataStateChange,
+        tableStateChange,
     ]);
     const handleColumnOrderChange = (0, react_1.useCallback)((updatedColumnOrder) => {
         const newColumnOrder = typeof updatedColumnOrder === 'function'
@@ -253,33 +238,38 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         const newPagination = typeof updater === 'function' ? updater(pagination) : updater;
         if (isServerMode || isServerPagination) {
             setTimeout(() => {
-                stateChangeRef.current({ pagination: newPagination });
-                fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({ pagination: newPagination });
+                tableStateChange({ pagination: newPagination });
+                fetchData({ pagination: newPagination });
             }, 0);
         }
         else if (onDataStateChange) {
             setTimeout(() => {
-                stateChangeRef.current({ pagination: newPagination });
+                tableStateChange({ pagination: newPagination });
             }, 0);
         }
-    }, [pagination, isServerMode, isServerPagination, onDataStateChange]);
+        setPagination(newPagination);
+        onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
+    }, [pagination, isServerMode, isServerPagination, onDataStateChange, fetchData, tableStateChange]);
     const handleGlobalFilterChange = (0, react_1.useCallback)((updaterOrValue) => {
         const newFilter = typeof updaterOrValue === 'function'
             ? updaterOrValue(globalFilter)
             : updaterOrValue;
         setGlobalFilter(newFilter);
         if (isServerMode || isServerFiltering) {
+            const pagination = resetPageToFirst();
             setTimeout(() => {
-                stateChangeRef.current({ globalFilter: newFilter });
-                fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({ globalFilter: newFilter });
+                tableStateChange({ globalFilter: newFilter, pagination });
+                fetchData({ globalFilter: newFilter, pagination });
             }, 0);
         }
         else if (onDataStateChange) {
+            const pagination = resetPageToFirst();
             setTimeout(() => {
-                stateChangeRef.current({ globalFilter: newFilter });
+                tableStateChange({ globalFilter: newFilter, pagination });
             }, 0);
         }
-    }, [globalFilter, isServerMode, isServerFiltering, onDataStateChange]);
+        onGlobalFilterChange === null || onGlobalFilterChange === void 0 ? void 0 : onGlobalFilterChange(newFilter);
+    }, [globalFilter, isServerMode, isServerFiltering, onDataStateChange, fetchData, tableStateChange]);
     const onColumnFilterChangeHandler = (0, react_1.useCallback)((updater) => {
         const currentState = columnFilter;
         const newState = typeof updater === 'function'
@@ -294,6 +284,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         handleColumnFilterStateChange(legacyFilterState);
     }, [columnFilter, handleColumnFilterStateChange]);
     const onColumnFilterApplyHandler = (0, react_1.useCallback)((appliedState) => {
+        const pagination = resetPageToFirst();
         if (isServerFiltering) {
             const serverFilterState = {
                 filters: appliedState.filters,
@@ -301,51 +292,22 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 pendingFilters: appliedState.pendingFilters,
                 pendingLogic: appliedState.pendingLogic,
             };
-            stateChangeRef.current({
+            tableStateChange({
                 columnFilter: serverFilterState,
+                pagination,
             });
-            fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({
+            fetchData({
                 columnFilter: serverFilterState,
+                pagination,
             });
         }
-    }, [isServerFiltering]);
-    const table = (0, react_table_1.useReactTable)({
-        _features: [column_filter_feature_1.ColumnFilterFeature, features_1.SelectionFeature],
-        data: tableData,
-        columns: enhancedColumns,
-        initialState: Object.assign({}, initialStateConfig),
-        state: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sorting }, (enablePagination ? { pagination } : {})), (enableGlobalFilter ? { globalFilter } : {})), (enableExpanding ? { expanded } : {})), (enableColumnDragging ? { columnOrder } : {})), (enableColumnPinning ? { columnPinning } : {})), (enableColumnFilter ? { columnFilter } : {})), (enableRowSelection ? { selectionState } : {})),
-        selectMode: selectMode,
-        enableAdvanceSelection: !!enableRowSelection,
-        isRowSelectable: isRowSelectable,
-        onSelectionStateChange: enableRowSelection ? handleSelectionStateChange : undefined,
-        enableAdvanceColumnFilter: enableColumnFilter,
-        onColumnFilterChange: onColumnFilterChangeHandler,
-        onColumnFilterApply: onColumnFilterApplyHandler,
-        onSortingChange: enableSorting ? handleSortingChange : undefined,
-        onPaginationChange: enablePagination ? handlePaginationChange : undefined,
-        onRowSelectionChange: enableRowSelection ? handleSelectionStateChange : undefined,
-        onGlobalFilterChange: enableGlobalFilter ? handleGlobalFilterChange : undefined,
-        onExpandedChange: enableExpanding ? setExpanded : undefined,
-        onColumnOrderChange: enableColumnDragging ? handleColumnOrderChange : undefined,
-        onColumnPinningChange: enableColumnPinning ? handleColumnPinningChange : undefined,
-        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
-        getSortedRowModel: (enableSorting && !isServerSorting) ? (0, react_table_1.getSortedRowModel)() : undefined,
-        getFilteredRowModel: (enableColumnFilter && !isServerFiltering) ? (0, column_filter_feature_1.getCombinedFilteredRowModel)() : undefined,
-        getPaginationRowModel: (enablePagination && !isServerPagination) ? (0, react_table_1.getPaginationRowModel)() : undefined,
-        enableSorting: enableSorting,
-        manualSorting: isServerSorting,
-        manualFiltering: isServerFiltering,
-        enableColumnResizing: enableColumnResizing,
-        columnResizeMode: columnResizeMode,
-        enableColumnPinning: enableColumnPinning,
-        getRowCanExpand: enableExpanding ? getRowCanExpand : undefined,
-        manualPagination: isServerPagination,
-        autoResetPageIndex: false,
-        rowCount: tableTotalRow,
-        getRowId: (row, index) => (0, utils_1.generateRowId)(row, index, idKey),
-        debugAll: false,
-    });
+        setTimeout(() => {
+            if (onColumnFiltersChange) {
+                onColumnFiltersChange(appliedState);
+            }
+        }, 0);
+    }, [isServerFiltering, fetchData, tableStateChange]);
+    const table = (0, react_table_1.useReactTable)(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ _features: [column_filter_feature_1.ColumnFilterFeature, features_1.SelectionFeature], data: tableData, columns: enhancedColumns, initialState: Object.assign({}, initialStateConfig), state: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (enableSorting ? { sorting } : {})), (enablePagination ? { pagination } : {})), (enableGlobalFilter ? { globalFilter } : {})), (enableExpanding ? { expanded } : {})), (enableColumnDragging ? { columnOrder } : {})), (enableColumnPinning ? { columnPinning } : {})), (enableColumnFilter ? { columnFilter } : {})), (enableRowSelection ? { selectionState } : {})), selectMode: selectMode, enableAdvanceSelection: !!enableRowSelection, isRowSelectable: isRowSelectable }, (enableRowSelection ? { onSelectionStateChange: handleSelectionStateChange } : {})), { enableAdvanceColumnFilter: enableColumnFilter, onColumnFilterChange: onColumnFilterChangeHandler, onColumnFilterApply: onColumnFilterApplyHandler }), (enableSorting ? { onSortingChange: handleSortingChange } : {})), (enablePagination ? { onPaginationChange: handlePaginationChange } : {})), (enableRowSelection ? { onRowSelectionChange: handleSelectionStateChange } : {})), (enableGlobalFilter ? { onGlobalFilterChange: handleGlobalFilterChange } : {})), (enableExpanding ? { onExpandedChange: setExpanded } : {})), (enableColumnDragging ? { onColumnOrderChange: handleColumnOrderChange } : {})), (enableColumnPinning ? { onColumnPinningChange: handleColumnPinningChange } : {})), { getCoreRowModel: (0, react_table_1.getCoreRowModel)() }), (enableSorting ? { getSortedRowModel: (0, react_table_1.getSortedRowModel)() } : {})), (enableColumnFilter ? { getFilteredRowModel: (0, column_filter_feature_1.getCombinedFilteredRowModel)() } : {})), (enablePagination ? { getPaginationRowModel: (0, react_table_1.getPaginationRowModel)() } : {})), { enableSorting: enableSorting, manualSorting: isServerSorting, manualFiltering: isServerFiltering, enableColumnResizing: enableColumnResizing, columnResizeMode: columnResizeMode, enableColumnPinning: enableColumnPinning }), (enableExpanding ? { getRowCanExpand: getRowCanExpand } : {})), { manualPagination: isServerPagination, autoResetPageIndex: false, rowCount: tableTotalRow, getRowId: (row, index) => (0, utils_1.generateRowId)(row, index, idKey), debugAll: false }));
     const rows = ((_a = table.getRowModel()) === null || _a === void 0 ? void 0 : _a.rows) || [];
     const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
         count: rows.length,
@@ -354,6 +316,12 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         overscan: 10,
         enabled: enableVirtualization && !enablePagination && rows.length > 0,
     });
+    const resetPageToFirst = () => {
+        const newPagination = { pageIndex: 0, pageSize: pagination.pageSize };
+        setPagination(newPagination);
+        onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
+        return newPagination;
+    };
     const handleColumnReorder = (0, react_1.useCallback)((draggedColumnId, targetColumnId) => {
         const currentOrder = columnOrder.length > 0 ? columnOrder : enhancedColumns.map((col, index) => {
             if (col.id)
@@ -375,9 +343,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
     }, [columnOrder, enhancedColumns, handleColumnOrderChange]);
     (0, react_1.useEffect)(() => {
         if (initialLoadData && onFetchData) {
-            fetchDataRef.current();
+            fetchData();
         }
-    }, [initialLoadData, onFetchData]);
+    }, [initialLoadData]);
     (0, react_1.useEffect)(() => {
         if (enableColumnDragging && columnOrder.length === 0) {
             const initialOrder = enhancedColumns.map((col, index) => {
@@ -392,6 +360,614 @@ 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,
+        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: {
+            getTable: () => table,
+        },
+        columnVisibility: {
+            showColumn: (columnId) => {
+                var _a;
+                (_a = table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.toggleVisibility(true);
+            },
+            hideColumn: (columnId) => {
+                var _a;
+                (_a = table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.toggleVisibility(false);
+            },
+            toggleColumn: (columnId) => {
+                var _a;
+                (_a = table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.toggleVisibility();
+            },
+            showAllColumns: () => {
+                table.toggleAllColumnsVisible(true);
+            },
+            hideAllColumns: () => {
+                table.toggleAllColumnsVisible(false);
+            },
+            resetColumnVisibility: () => {
+                table.resetColumnVisibility();
+            },
+        },
+        columnOrdering: {
+            setColumnOrder: (columnOrder) => {
+                table.setColumnOrder(columnOrder);
+            },
+            moveColumn: (columnId, toIndex) => {
+                const currentOrder = table.getState().columnOrder || [];
+                const currentIndex = currentOrder.indexOf(columnId);
+                if (currentIndex === -1)
+                    return;
+                const newOrder = [...currentOrder];
+                newOrder.splice(currentIndex, 1);
+                newOrder.splice(toIndex, 0, columnId);
+                table.setColumnOrder(newOrder);
+            },
+            resetColumnOrder: () => {
+                const initialOrder = enhancedColumns.map((col, index) => {
+                    if (col.id)
+                        return col.id;
+                    const anyCol = col;
+                    if (anyCol.accessorKey && typeof anyCol.accessorKey === 'string') {
+                        return anyCol.accessorKey;
+                    }
+                    return `column_${index}`;
+                });
+                table.setColumnOrder(initialOrder);
+            },
+        },
+        columnPinning: {
+            pinColumnLeft: (columnId) => {
+                const currentPinning = table.getState().columnPinning;
+                const newPinning = Object.assign({}, currentPinning);
+                newPinning.right = (newPinning.right || []).filter(id => id !== columnId);
+                newPinning.left = [...(newPinning.left || []).filter(id => id !== columnId), columnId];
+                table.setColumnPinning(newPinning);
+            },
+            pinColumnRight: (columnId) => {
+                const currentPinning = table.getState().columnPinning;
+                const newPinning = Object.assign({}, currentPinning);
+                newPinning.left = (newPinning.left || []).filter(id => id !== columnId);
+                newPinning.right = [...(newPinning.right || []).filter(id => id !== columnId), columnId];
+                table.setColumnPinning(newPinning);
+            },
+            unpinColumn: (columnId) => {
+                const currentPinning = table.getState().columnPinning;
+                const newPinning = {
+                    left: (currentPinning.left || []).filter(id => id !== columnId),
+                    right: (currentPinning.right || []).filter(id => id !== columnId),
+                };
+                table.setColumnPinning(newPinning);
+            },
+            setPinning: (pinning) => {
+                table.setColumnPinning(pinning);
+            },
+            resetColumnPinning: () => {
+                table.setColumnPinning(table.initialState.columnPinning);
+            },
+        },
+        columnResizing: {
+            resizeColumn: (columnId, width) => {
+                const currentSizing = table.getState().columnSizing;
+                table.setColumnSizing(Object.assign(Object.assign({}, currentSizing), { [columnId]: width }));
+            },
+            autoSizeColumn: (columnId) => {
+                var _a;
+                (_a = table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.resetSize();
+            },
+            autoSizeAllColumns: () => {
+                table.resetColumnSizing();
+            },
+            resetColumnSizing: () => {
+                table.resetColumnSizing();
+            },
+        },
+        filtering: {
+            setGlobalFilter: (filter) => {
+                table.setGlobalFilter(filter);
+            },
+            clearGlobalFilter: () => {
+                table.setGlobalFilter('');
+            },
+            setColumnFilters: (filters) => {
+                handleColumnFilterStateChange(filters);
+            },
+            addColumnFilter: (columnId, operator, value) => {
+                const newFilter = {
+                    id: `filter_${Date.now()}`,
+                    columnId,
+                    operator,
+                    value,
+                };
+                const columnFilter = table.getState().columnFilter;
+                const currentFilters = columnFilter.filters || [];
+                const newFilters = [...currentFilters, newFilter];
+                handleColumnFilterStateChange({
+                    filters: newFilters,
+                    logic: columnFilter.logic,
+                    pendingFilters: columnFilter.pendingFilters || [],
+                    pendingLogic: columnFilter.pendingLogic || 'AND',
+                });
+            },
+            removeColumnFilter: (filterId) => {
+                const columnFilter = table.getState().columnFilter;
+                const currentFilters = columnFilter.filters || [];
+                const newFilters = currentFilters.filter((f) => f.id !== filterId);
+                handleColumnFilterStateChange({
+                    filters: newFilters,
+                    logic: columnFilter.logic,
+                    pendingFilters: columnFilter.pendingFilters || [],
+                    pendingLogic: columnFilter.pendingLogic || 'AND',
+                });
+            },
+            clearAllFilters: () => {
+                table.setGlobalFilter('');
+                handleColumnFilterStateChange({
+                    filters: [],
+                    logic: 'AND',
+                    pendingFilters: [],
+                    pendingLogic: 'AND',
+                });
+            },
+            resetFilters: () => {
+                table.resetGlobalFilter();
+                handleColumnFilterStateChange({
+                    filters: [],
+                    logic: 'AND',
+                    pendingFilters: [],
+                    pendingLogic: 'AND',
+                });
+            },
+        },
+        sorting: {
+            setSorting: (sortingState) => {
+                table.setSorting(sortingState);
+            },
+            sortColumn: (columnId, direction) => {
+                const column = table.getColumn(columnId);
+                if (!column)
+                    return;
+                if (direction === false) {
+                    column.clearSorting();
+                }
+                else {
+                    column.toggleSorting(direction === 'desc');
+                }
+            },
+            clearSorting: () => {
+                table.resetSorting();
+            },
+            resetSorting: () => {
+                table.resetSorting();
+            },
+        },
+        pagination: {
+            goToPage: (pageIndex) => {
+                table.setPageIndex(pageIndex);
+            },
+            nextPage: () => {
+                table.nextPage();
+            },
+            previousPage: () => {
+                table.previousPage();
+            },
+            setPageSize: (pageSize) => {
+                table.setPageSize(pageSize);
+            },
+            goToFirstPage: () => {
+                table.setPageIndex(0);
+            },
+            goToLastPage: () => {
+                const pageCount = table.getPageCount();
+                if (pageCount > 0) {
+                    table.setPageIndex(pageCount - 1);
+                }
+            },
+        },
+        selection: {
+            selectRow: (rowId) => { var _a; return (_a = table.selectRow) === null || _a === void 0 ? void 0 : _a.call(table, rowId); },
+            deselectRow: (rowId) => { var _a; return (_a = table.deselectRow) === null || _a === void 0 ? void 0 : _a.call(table, rowId); },
+            toggleRowSelection: (rowId) => { var _a; return (_a = table.toggleRowSelected) === null || _a === void 0 ? void 0 : _a.call(table, rowId); },
+            selectAll: () => { var _a; return (_a = table.selectAll) === null || _a === void 0 ? void 0 : _a.call(table); },
+            deselectAll: () => { var _a; return (_a = table.deselectAll) === null || _a === void 0 ? void 0 : _a.call(table); },
+            toggleSelectAll: () => { var _a; return (_a = table.toggleAllRowsSelected) === null || _a === void 0 ? void 0 : _a.call(table); },
+            getSelectionState: () => { var _a; return ((_a = table.getSelectionState) === null || _a === void 0 ? void 0 : _a.call(table)) || { ids: [], type: 'include' }; },
+            getSelectedRows: () => table.getSelectedRows(),
+            getSelectedCount: () => table.getSelectedCount(),
+            isRowSelected: (rowId) => table.getIsRowSelected(rowId) || false,
+        },
+        data: {
+            refresh: () => {
+                var _a, _b;
+                const filters = table.getState();
+                const pagination = {
+                    pageIndex: 0,
+                    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();
+                onDataStateChange === null || onDataStateChange === void 0 ? void 0 : onDataStateChange(allState);
+                fetchData === null || fetchData === void 0 ? void 0 : fetchData({ pagination });
+            },
+            reload: () => {
+                const allState = table.getState();
+                onDataStateChange === null || onDataStateChange === void 0 ? void 0 : onDataStateChange(allState);
+                onFetchData === null || onFetchData === void 0 ? void 0 : onFetchData({});
+            },
+            getAllData: () => {
+                var _a;
+                return ((_a = table.getRowModel().rows) === null || _a === void 0 ? void 0 : _a.map(row => row.original)) || [];
+            },
+            getRowData: (rowId) => {
+                var _a, _b;
+                return (_b = (_a = table.getRowModel().rows) === null || _a === void 0 ? void 0 : _a.find(row => String(row.original[idKey]) === rowId)) === null || _b === void 0 ? void 0 : _b.original;
+            },
+            getRowByIndex: (index) => {
+                var _a, _b;
+                return (_b = (_a = table.getRowModel().rows) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.original;
+            },
+            updateRow: (rowId, updates) => {
+                var _a;
+                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 || []);
+            },
+            updateRowByIndex: (index, updates) => {
+                var _a;
+                const newData = (_a = table.getRowModel().rows) === null || _a === void 0 ? void 0 : _a.map(row => row.original);
+                if (newData === null || newData === void 0 ? void 0 : newData[index]) {
+                    newData[index] = Object.assign(Object.assign({}, newData[index]), updates);
+                    setServerData(newData);
+                }
+            },
+            insertRow: (newRow, index) => {
+                var _a;
+                const newData = ((_a = table.getRowModel().rows) === null || _a === void 0 ? void 0 : _a.map(row => row.original)) || [];
+                if (index !== undefined) {
+                    newData.splice(index, 0, newRow);
+                }
+                else {
+                    newData.push(newRow);
+                }
+                setServerData(newData || []);
+            },
+            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)) || []);
+            },
+            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);
+            },
+            deleteSelectedRows: () => {
+                var _a;
+                const selectedRowIds = Object.keys(table.getState().rowSelection)
+                    .filter(key => table.getState().rowSelection[key]);
+                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();
+            },
+            replaceAllData: (newData) => {
+                setServerData === null || setServerData === void 0 ? void 0 : setServerData(newData);
+            },
+            updateMultipleRows: (updates) => {
+                var _a;
+                const updateMap = new Map(updates.map(u => [u.rowId, u.data]));
+                const newData = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.map(row => {
+                    const rowId = String(row.original[idKey]);
+                    const updateData = updateMap.get(rowId);
+                    return updateData ? Object.assign(Object.assign({}, row.original), updateData) : row.original;
+                });
+                setServerData(newData || []);
+            },
+            insertMultipleRows: (newRows, startIndex) => {
+                var _a;
+                const newData = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.map(row => row.original);
+                if (startIndex !== undefined) {
+                    newData.splice(startIndex, 0, ...newRows);
+                }
+                else {
+                    newData.push(...newRows);
+                }
+                setServerData === null || setServerData === void 0 ? void 0 : setServerData(newData);
+            },
+            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);
+                setServerData(newData);
+            },
+            updateField: (rowId, fieldName, value) => {
+                var _a;
+                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), { [fieldName]: value }) : row.original);
+                setServerData === null || setServerData === void 0 ? void 0 : setServerData(newData);
+            },
+            updateFieldByIndex: (index, fieldName, value) => {
+                var _a;
+                const newData = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.map(row => row.original);
+                if (newData[index]) {
+                    newData[index] = Object.assign(Object.assign({}, newData[index]), { [fieldName]: value });
+                    setServerData === null || setServerData === void 0 ? void 0 : setServerData(newData);
+                }
+            },
+            findRows: (predicate) => {
+                var _a, _b;
+                return (_b = (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.filter(row => predicate(row.original))) === null || _b === void 0 ? void 0 : _b.map(row => row.original);
+            },
+            findRowIndex: (predicate) => {
+                var _a;
+                return (_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.findIndex(row => predicate(row.original));
+            },
+            getDataCount: () => {
+                var _a;
+                return ((_a = (table.getRowModel().rows || [])) === null || _a === void 0 ? void 0 : _a.length) || 0;
+            },
+            getFilteredDataCount: () => {
+                return table.getFilteredRowModel().rows.length;
+            },
+        },
+        layout: {
+            resetLayout: () => {
+                table.resetColumnSizing();
+                table.resetColumnVisibility();
+                table.resetSorting();
+                table.resetGlobalFilter();
+            },
+            resetAll: () => {
+                table.resetColumnSizing();
+                table.resetColumnVisibility();
+                table.resetSorting();
+                table.resetGlobalFilter();
+                table.resetColumnOrder();
+                table.resetExpanded();
+                table.resetRowSelection();
+                table.resetColumnPinning();
+                handleColumnFilterStateChange(initialStateConfig.columnFilter || { filters: [], logic: 'AND', pendingFilters: [], pendingLogic: 'AND' });
+                if (enablePagination) {
+                    table.setPagination(initialStateConfig.pagination || { pageIndex: 0, pageSize: 10 });
+                }
+                if (enableColumnPinning) {
+                    table.setColumnPinning(initialStateConfig.columnPinning || { left: [], right: [] });
+                }
+            },
+            saveLayout: () => {
+                return {
+                    columnVisibility: table.getState().columnVisibility,
+                    columnSizing: table.getState().columnSizing,
+                    columnOrder: table.getState().columnOrder,
+                    columnPinning: table.getState().columnPinning,
+                    sorting: table.getState().sorting,
+                    pagination: table.getState().pagination,
+                    globalFilter: table.getState().globalFilter,
+                    columnFilter: table.getState().columnFilter,
+                };
+            },
+            restoreLayout: (layout) => {
+                if (layout.columnVisibility) {
+                    table.setColumnVisibility(layout.columnVisibility);
+                }
+                if (layout.columnSizing) {
+                    table.setColumnSizing(layout.columnSizing);
+                }
+                if (layout.columnOrder) {
+                    table.setColumnOrder(layout.columnOrder);
+                }
+                if (layout.columnPinning) {
+                    table.setColumnPinning(layout.columnPinning);
+                }
+                if (layout.sorting) {
+                    table.setSorting(layout.sorting);
+                }
+                if (layout.pagination && enablePagination) {
+                    table.setPagination(layout.pagination);
+                }
+                if (layout.globalFilter !== undefined) {
+                    table.setGlobalFilter(layout.globalFilter);
+                }
+                if (layout.columnFilter) {
+                    handleColumnFilterStateChange(layout.columnFilter);
+                }
+            },
+        },
+        state: {
+            getTableState: () => {
+                return table.getState();
+            },
+            getCurrentFilters: () => {
+                return table.getState().columnFilter;
+            },
+            getCurrentSorting: () => {
+                return table.getState().sorting;
+            },
+            getCurrentPagination: () => {
+                return table.getState().pagination;
+            },
+            getCurrentSelection: () => {
+                return Object.keys(table.getState().rowSelection)
+                    .filter(key => table.getState().rowSelection[key]);
+            },
+        },
+        export: {
+            exportCSV: (...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (options = {}) {
+                var _a;
+                const { filename = exportFilename, } = options;
+                try {
+                    const controller = new AbortController();
+                    setExportController === null || setExportController === void 0 ? void 0 : setExportController(controller);
+                    if (dataMode === 'server' && onServerExport) {
+                        const currentFilters = {
+                            globalFilter: table.getState().globalFilter,
+                            columnFilter: table.getState().columnFilter,
+                            sorting: table.getState().sorting,
+                            pagination: table.getState().pagination,
+                        };
+                        yield (0, utils_1.exportServerData)(table, {
+                            format: 'csv',
+                            filename,
+                            fetchData: (filters, selection) => onServerExport(filters, selection),
+                            currentFilters,
+                            selection: (_a = table.getSelectionState) === null || _a === void 0 ? void 0 : _a.call(table),
+                            onProgress: onExportProgress,
+                            onComplete: onExportComplete,
+                            onError: onExportError,
+                        });
+                    }
+                    else {
+                        yield (0, utils_1.exportClientData)(table, {
+                            format: 'csv',
+                            filename,
+                            onProgress: onExportProgress,
+                            onComplete: onExportComplete,
+                            onError: onExportError,
+                        });
+                    }
+                }
+                catch (error) {
+                    onExportError === null || onExportError === void 0 ? void 0 : onExportError({
+                        message: error.message || 'Export failed',
+                        code: 'EXPORT_ERROR',
+                    });
+                }
+                finally {
+                    setExportController === null || setExportController === void 0 ? void 0 : setExportController(null);
+                }
+            }),
+            exportExcel: (...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (options = {}) {
+                var _a;
+                const { filename = exportFilename } = options;
+                try {
+                    const controller = new AbortController();
+                    setExportController === null || setExportController === void 0 ? void 0 : setExportController(controller);
+                    if (dataMode === 'server' && onServerExport) {
+                        const currentFilters = {
+                            globalFilter: table.getState().globalFilter,
+                            columnFilter: table.getState().columnFilter,
+                            sorting: table.getState().sorting,
+                            pagination: table.getState().pagination,
+                        };
+                        yield (0, utils_1.exportServerData)(table, {
+                            format: 'excel',
+                            filename,
+                            fetchData: (filters, selection) => onServerExport(filters, selection),
+                            currentFilters,
+                            selection: (_a = table.getSelectionState) === null || _a === void 0 ? void 0 : _a.call(table),
+                            onProgress: onExportProgress,
+                            onComplete: onExportComplete,
+                            onError: onExportError,
+                        });
+                    }
+                    else {
+                        yield (0, utils_1.exportClientData)(table, {
+                            format: 'excel',
+                            filename,
+                            onProgress: onExportProgress,
+                            onComplete: onExportComplete,
+                            onError: onExportError,
+                        });
+                    }
+                }
+                catch (error) {
+                    onExportError === null || onExportError === void 0 ? void 0 : onExportError({
+                        message: error.message || 'Export failed',
+                        code: 'EXPORT_ERROR',
+                    });
+                }
+                finally {
+                    setExportController === null || setExportController === void 0 ? void 0 : setExportController(null);
+                }
+            }),
+            exportServerData: (options) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                var _a;
+                const { format, filename = exportFilename, fetchData = onServerExport, } = options;
+                if (!fetchData) {
+                    onExportError === null || onExportError === void 0 ? void 0 : onExportError({
+                        message: 'No server export function provided',
+                        code: 'NO_SERVER_EXPORT',
+                    });
+                    return;
+                }
+                try {
+                    const controller = new AbortController();
+                    setExportController === null || setExportController === void 0 ? void 0 : setExportController(controller);
+                    const currentFilters = {
+                        globalFilter: table.getState().globalFilter,
+                        columnFilter: table.getState().columnFilter,
+                        sorting: table.getState().sorting,
+                        pagination: table.getState().pagination,
+                    };
+                    yield (0, utils_1.exportServerData)(table, {
+                        format,
+                        filename,
+                        fetchData: (filters, selection) => fetchData(filters, selection),
+                        currentFilters,
+                        selection: (_a = table.getSelectionState) === null || _a === void 0 ? void 0 : _a.call(table),
+                        onProgress: onExportProgress,
+                        onComplete: onExportComplete,
+                        onError: onExportError,
+                    });
+                }
+                catch (error) {
+                    onExportError === null || onExportError === void 0 ? void 0 : onExportError({
+                        message: error.message || 'Export failed',
+                        code: 'EXPORT_ERROR',
+                    });
+                }
+                finally {
+                    setExportController === null || setExportController === void 0 ? void 0 : setExportController(null);
+                }
+            }),
+            isExporting: () => isExporting || false,
+            cancelExport: () => {
+                exportController === null || exportController === void 0 ? void 0 : exportController.abort();
+                setExportController === null || setExportController === void 0 ? void 0 : setExportController(null);
+            },
+        },
+    }), [
+        table,
+        enhancedColumns,
+        handleColumnFilterStateChange,
+        idKey,
+        onDataStateChange,
+        onFetchData,
+        enableColumnPinning,
+        enablePagination,
+        exportFilename,
+        onExportProgress,
+        onExportComplete,
+        onExportError,
+        onServerExport,
+        exportController,
+        setExportController,
+        isExporting,
+        dataMode,
+        selectMode,
+        onSelectionChange,
+    ]);
     const LoadingRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'loadingRow', rows_1.LoadingRows);
     const EmptyRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'emptyRow', rows_1.EmptyDataRow);
     const renderTableRows = (0, react_1.useCallback)(() => {
@@ -449,30 +1025,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             }
         }
     }, [exportController, onExportCancel]);
-    (0, use_data_table_api_1.useDataTableApi)({
-        table,
-        idKey,
-        enhancedColumns,
-        enablePagination,
-        enableColumnPinning,
-        initialStateConfig,
-        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, []);
     const RootSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'root', material_1.Box);
     const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'toolbar', toolbar_1.DataTableToolbar);
     const BulkActionsSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'bulkActionsToolbar', toolbar_1.BulkActionsToolbar);

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

@@ -1,4 +1,4 @@
-import { Row, SortingState, ColumnResizeMode, ColumnPinningState, RowData } from '@tanstack/react-table';
+import { Row, SortingState, ColumnResizeMode, ColumnPinningState, RowData, PaginationState } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 import type { ColumnFilterState, TableFilters, TableState } from '../../types';
 import { DataTableColumn } from '../../types';
@@ -91,7 +91,9 @@ export interface DataTableProps<T> {
     emptyMessage?: string;
     skeletonRows?: number;
     onColumnFiltersChange?: (filterState: ColumnFilterState) => void;
-    onDataChange?: (data: T[]) => void;
+    onPaginationChange?: (pagination: PaginationState) => void;
+    onGlobalFilterChange?: (globalFilter: string) => void;
+    onColumnFilterChange?: (columnFilter: ColumnFilterState) => void;
     selectionColumn?: {
         width?: number;
         pinLeft?: boolean;

package/src/lib/components/toolbar/column-filter-control.js

@@ -31,7 +31,6 @@ function ColumnFilterControl() {
     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 === null || filterableColumns === void 0 ? void 0 : filterableColumns.find(col => col.id === columnId);
             const columnType = (0, column_helpers_1.getColumnType)(column);
@@ -115,13 +114,11 @@ function ColumnFilterControl() {
     const hasPendingChanges = pendingFiltersCount > 0 || (filters.length === 0 && hasAppliedFilters);
     (0, react_1.useEffect)(() => {
         var _a;
-        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';
-            console.log('useEffect', firstColumn, columnType, operators, defaultOperator);
             addFilter(firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.id, defaultOperator);
         }
     }, [filters.length, filterableColumns, addFilter, activeFiltersCount]);

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

@@ -22,5 +22,5 @@ function DataTableToolbar({ extraFilter = null, enableGlobalFilter = true, title
     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);
     const TableExportControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'exportButton', table_export_control_1.TableExportControl);
-    return ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({ table: table }, slotProps.toolbar, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, children: [(title || subtitle) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [title ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", children: title })) : null, subtitle ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: subtitle })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { flex: 1 }, children: [enableGlobalFilter ? (0, jsx_runtime_1.jsx)(TableSearchControlSlot, Object.assign({}, slotProps.searchInput)) : null, enableTableSizeControl ? (0, jsx_runtime_1.jsx)(TableSizeControlSlot, Object.assign({}, slotProps.tableSizeControl)) : null, enableColumnFilter ? (0, jsx_runtime_1.jsx)(ColumnCustomFilterControlSlot, Object.assign({}, slotProps.columnCustomFilterControl)) : null, enableColumnPinning ? (0, jsx_runtime_1.jsx)(ColumnPinningControlSlot, Object.assign({}, slotProps.columnPinningControl)) : null, enableColumnVisibility ? (0, jsx_runtime_1.jsx)(ColumnVisibilityControlSlot, Object.assign({}, slotProps.columnVisibilityControl)) : null, enableReset ? (0, jsx_runtime_1.jsx)(ColumnResetControlSlot, Object.assign({}, slotProps.resetButton)) : null, enableExport ? (0, jsx_runtime_1.jsx)(TableExportControlSlot, Object.assign({}, slotProps.exportButton)) : null] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: extraFilter })] })] }) })));
+    return ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({ table: table }, slotProps.toolbar, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, children: [(title || subtitle) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [title ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", children: title })) : null, subtitle ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: subtitle })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { flex: 1 }, children: [enableTableSizeControl ? (0, jsx_runtime_1.jsx)(TableSizeControlSlot, Object.assign({}, slotProps.tableSizeControl)) : null, enableColumnFilter ? (0, jsx_runtime_1.jsx)(ColumnCustomFilterControlSlot, Object.assign({}, slotProps.columnCustomFilterControl)) : null, enableColumnPinning ? (0, jsx_runtime_1.jsx)(ColumnPinningControlSlot, Object.assign({}, slotProps.columnPinningControl)) : null, enableColumnVisibility ? (0, jsx_runtime_1.jsx)(ColumnVisibilityControlSlot, Object.assign({}, slotProps.columnVisibilityControl)) : null, enableReset ? (0, jsx_runtime_1.jsx)(ColumnResetControlSlot, Object.assign({}, slotProps.resetButton)) : null, enableExport ? (0, jsx_runtime_1.jsx)(TableExportControlSlot, Object.assign({}, slotProps.exportButton)) : null, enableGlobalFilter ? (0, jsx_runtime_1.jsx)(TableSearchControlSlot, Object.assign({}, slotProps.searchInput)) : null] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: extraFilter })] })] }) })));
 }

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

@@ -23,7 +23,6 @@ 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 = {

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

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const material_1 = require("@mui/material");
 const data_table_1 = require("../components/table/data-table");
+const types_1 = require("../types");
 const MOCK_EMPLOYEES = Array.from({ length: 1000 }, (_, index) => {
     const departments = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance', 'Operations'];
     const roles = ['Manager', 'Senior', 'Junior', 'Lead', 'Director', 'Specialist'];
@@ -35,7 +36,6 @@ function ServerSideFetchingExample() {
     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);
@@ -99,11 +99,6 @@ function ServerSideFetchingExample() {
                 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,
@@ -117,7 +112,7 @@ function ServerSideFetchingExample() {
         finally {
             setLoading(false);
         }
-    }), []);
+    }), [tab]);
     const handleSelectionChange = (0, react_1.useCallback)((selection) => {
         console.log('🔄 Selection changed:', selection);
         setSelectionInfo(selection);
@@ -227,7 +222,7 @@ function ServerSideFetchingExample() {
                                         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: () => {
+                                    }, children: "Refresh Data" })] })] }) }), selectionInfo && ((0, jsx_runtime_1.jsx)(material_1.Card, { sx: { mb: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Current Selection Info" }), (0, jsx_runtime_1.jsx)(material_1.Paper, { sx: { p: 2, bgcolor: 'grey.50' }, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 1, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Selection Type:" }), " ", selectionInfo.type] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Selected IDs:" }), " [", selectionInfo.ids.join(', '), "]"] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Count:" }), " ", selectionInfo.ids.length] })] }) })] }) })), (0, jsx_runtime_1.jsx)(material_1.Card, { sx: { mb: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Export & Column Configuration" }), (0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "info", sx: { mb: 2 }, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "hideInExport Demo:" }), " The Salary column has `hideInExport: true` so it will be excluded from CSV/Excel exports. Try exporting to see the difference!"] }) }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 1, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Exportable columns:" }), " Name, Email, Department, Role, Status, Join Date"] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", color: "warning.main", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Hidden from export:" }), " Salary (contains sensitive data)"] })] })] }) }), lastFetchParams && ((0, jsx_runtime_1.jsx)(material_1.Card, { sx: { mb: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Last Fetch Parameters" }), (0, jsx_runtime_1.jsx)(material_1.Paper, { sx: { p: 2, bgcolor: 'grey.50' }, children: (0, jsx_runtime_1.jsx)("pre", { style: { fontSize: '12px', margin: 0, overflow: 'auto' }, children: JSON.stringify(lastFetchParams, null, 2) }) })] }) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 3 } }), (0, jsx_runtime_1.jsx)(data_table_1.DataTable, { ref: apiRef, columns: columns, dataMode: "server", initialLoadData: true, onFetchData: handleFetchData, loading: loading, enableRowSelection: true, enableMultiRowSelection: true, selectMode: "page", onSelectionChange: handleSelectionChange, enableColumnPinning: true, enableColumnResizing: true, enableColumnDragging: true, enableBulkActions: true, bulkActions: (selectionState) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, children: [(0, jsx_runtime_1.jsxs)(material_1.Button, { variant: "contained", size: "small", color: "error", onClick: () => {
                                 console.log('Bulk delete action triggered');
                                 console.log('Selection state:', selectionState);
                                 alert(`Would delete ${selectionState.ids.length} items`);
@@ -240,6 +235,10 @@ function ServerSideFetchingExample() {
                         pageIndex: 0,
                         pageSize: 10,
                     },
+                    columnPinning: {
+                        left: [types_1.DEFAULT_SELECTION_COLUMN_NAME],
+                        right: [],
+                    },
                 }, enableExport: true, exportFilename: "employees", onServerExport: handleServerExport, onExportProgress: (progress) => {
                     console.log('Export progress:', progress);
                 }, onExportComplete: (result) => {

package/src/lib/features/column-filter.feature.js

@@ -36,7 +36,6 @@ exports.ColumnFilterFeature = {
         table.addPendingColumnFilter = (columnId, operator, value) => {
             if (!table.options.enableAdvanceColumnFilter)
                 return;
-            console.log('addPendingColumnFilter', columnId, operator, value);
             table.setColumnFilterState((old) => {
                 const newFilter = {
                     id: `filter_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,

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

@@ -6,6 +6,15 @@ const react_1 = require("react");
 const export_utils_1 = require("../utils/export-utils");
 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 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 ? {
+            columnOrder: state.columnOrder,
+            columnPinning: state.columnPinning,
+            columnVisibility: state.columnVisibility,
+            columnSizing: state.columnSizing,
+        } : {}));
+    }, [table]);
     (0, react_1.useImperativeHandle)(ref, () => ({
         table: {
             getTable: () => table,
@@ -222,22 +231,21 @@ function useDataTableApi(props, ref) {
         },
         data: {
             refresh: () => {
-                const pagination = table.getState().pagination;
-                if (onDataStateChange) {
-                    onDataStateChange({ pagination: { pageIndex: 0, pageSize: pagination.pageSize } });
-                }
-                if (onFetchData) {
-                    onFetchData({ pagination: { pageIndex: 0, pageSize: pagination.pageSize } });
-                }
+                var _a, _b;
+                const filters = getTableFilters();
+                filters.pagination = {
+                    pageIndex: 0,
+                    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 = getTableFilters(true);
+                onDataStateChange === null || onDataStateChange === void 0 ? void 0 : onDataStateChange(allState);
+                onFetchData === null || onFetchData === void 0 ? void 0 : onFetchData(filters);
             },
             reload: () => {
-                const pagination = table.getState().pagination;
-                if (onDataStateChange) {
-                    onDataStateChange({ pagination: { pageIndex: 0, pageSize: pagination.pageSize } });
-                }
-                if (onFetchData) {
-                    onFetchData({ pagination: { pageIndex: 0, pageSize: pagination.pageSize } });
-                }
+                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);
             },
             getAllData: () => {
                 var _a;