@wavemaker-ai/react-runtime 1.0.0-rc.309

package/components/data/table/hooks/useRowSelection.js

@@ -0,0 +1,428 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowSelection = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+var _selectionUtils = require("../utils/selectionUtils");
+var _tableHelpers = require("../utils/table-helpers");
+var _utils = require("../utils");
+var useRowSelection = exports.useRowSelection = function useRowSelection(_ref) {
+  var _ref$radioselect = _ref.radioselect,
+    radioselect = _ref$radioselect === void 0 ? false : _ref$radioselect,
+    _ref$multiselect = _ref.multiselect,
+    multiselect = _ref$multiselect === void 0 ? false : _ref$multiselect,
+    _ref$gridfirstrowsele = _ref.gridfirstrowselect,
+    gridfirstrowselect = _ref$gridfirstrowsele === void 0 ? false : _ref$gridfirstrowsele,
+    internalDataset = _ref.internalDataset,
+    cellState = _ref.cellState,
+    name = _ref.name,
+    statehandler = _ref.statehandler,
+    initialActualPageSize = _ref.initialActualPageSize,
+    getTableCurrentState = _ref.getTableState,
+    onRowselect = _ref.onRowselect,
+    onRowdeselect = _ref.onRowdeselect,
+    listener = _ref.listener,
+    _ref$navigation = _ref.navigation,
+    navigation = _ref$navigation === void 0 ? "Basic" : _ref$navigation,
+    onSyncSelectedItems = _ref.onSyncSelectedItems;
+  // Keep a ref to always have the latest dataset
+  var datasetRef = (0, _react.useRef)(internalDataset);
+  (0, _react.useEffect)(function () {
+    datasetRef.current = internalDataset;
+  }, [internalDataset]);
+
+  // Track if initial first row selection has been done (for gridfirstrowselect)
+  var initialSelectionDoneRef = (0, _react.useRef)(false);
+
+  // State only for forcing updates when needed
+  var _useState = (0, _react.useState)({}),
+    updateTrigger = _useState[0],
+    forceUpdate = _useState[1];
+
+  // Priority rule: If both radioselect and multiselect are true, multiselect takes precedence
+  var useMultiSelect = multiselect;
+  var useRadioSelect = radioselect && !multiselect;
+
+  // Determine if any selection mode is active
+  var hasSelectionMode = useRadioSelect || useMultiSelect;
+
+  // Helper function to save state immediately
+  var saveStateImmediate = (0, _react.useCallback)(function () {
+    if (!statehandler || !getTableCurrentState) {
+      return;
+    }
+    var _getTableCurrentState = getTableCurrentState(),
+      currentPage = _getTableCurrentState.currentPage,
+      currentPageSize = _getTableCurrentState.currentPageSize;
+
+    // Get current selections from the unified array
+    var selectedIds = _selectionUtils.selectionStateHelpers.getSelection(cellState);
+
+    // Find selected indices in current dataset
+    var selectedIndices = [];
+    selectedIds.forEach(function (rowId) {
+      var index = internalDataset.findIndex(function (row) {
+        return row._wmTableRowId === rowId || row.id === rowId;
+      });
+      if (index >= 0) {
+        selectedIndices.push(index);
+      }
+    });
+
+    // Build selected items with page info
+    var selectedItemsWithPage = selectedIndices.map(function (idx) {
+      return {
+        page: currentPage,
+        index: idx
+      };
+    });
+    var stateToSave = {
+      pagination: currentPage,
+      selectedItem: selectedItemsWithPage
+    };
+
+    // Include actualPageSize if available
+    if (initialActualPageSize !== undefined) {
+      stateToSave.actualpagesize = initialActualPageSize;
+    }
+
+    // Check if this is default state
+    var isDefaultState = currentPage === 1 && selectedIds.length === 0;
+    if (isDefaultState) {
+      // Clear state if returning to default
+      (0, _tableHelpers.saveTableState)(name, statehandler, {});
+    } else {
+      // Get existing state
+      var existingState = (0, _tableHelpers.getTableState)(name, statehandler);
+
+      // For radio select, don't merge - just replace with current selection
+      if (useRadioSelect) {
+        stateToSave.selectedItem = selectedItemsWithPage;
+      } else if (useMultiSelect) {
+        // For multi-select, merge selected items from different pages
+        if (existingState && existingState.selectedItem) {
+          var otherPageSelections = existingState.selectedItem.filter(function (item) {
+            return item.page !== currentPage;
+          });
+          stateToSave.selectedItem = [].concat((0, _toConsumableArray2["default"])(otherPageSelections), (0, _toConsumableArray2["default"])(selectedItemsWithPage));
+        }
+      }
+
+      // Preserve pagesize if exists
+      if (existingState !== null && existingState !== void 0 && existingState.pagesize) {
+        stateToSave.pagesize = existingState.pagesize;
+      }
+
+      // Preserve actualpagesize if exists and not in new state
+      if (!stateToSave.actualpagesize && existingState !== null && existingState !== void 0 && existingState.actualpagesize) {
+        stateToSave.actualpagesize = existingState.actualpagesize;
+      }
+      (0, _tableHelpers.saveTableState)(name, statehandler, stateToSave);
+    }
+  }, [statehandler, getTableCurrentState, name, useMultiSelect, useRadioSelect, cellState, internalDataset, initialActualPageSize]);
+
+  // Helper to get widget reference
+  var getWidgetRef = (0, _react.useCallback)(function () {
+    var _listener$Widgets;
+    return listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name];
+  }, [name]);
+
+  // Helper to trigger selection callbacks
+  var triggerSelectionCallback = (0, _react.useCallback)(function (event, rowData, callback) {
+    if (callback && rowData) {
+      // Sync selectedItems into the widget proxy BEFORE firing the user callback so
+      // that Page.Widgets.<table>.selectedItems is up-to-date when the handler runs.
+      onSyncSelectedItems === null || onSyncSelectedItems === void 0 || onSyncSelectedItems(_selectionUtils.selectionStateHelpers.getSelection(cellState));
+      var cleanedRow = (0, _utils.cleanRowData)([rowData])[0];
+      callback(event, getWidgetRef(), cleanedRow);
+    }
+  }, [getWidgetRef, onSyncSelectedItems, cellState]);
+
+  // Handle selection for radio mode (replaces previous selection)
+  var handleRadioSelection = (0, _react.useCallback)(function (rowId, rowData) {
+    // Get the currently selected row (if any) before changing selection
+    var previousSelection = _selectionUtils.selectionStateHelpers.getSelection(cellState);
+    var previousRowId = previousSelection.length > 0 ? previousSelection[0] : null;
+
+    // Find the previously selected row data if it exists and is different
+    var previousRowData = null;
+    if (previousRowId && previousRowId !== rowId && onRowdeselect) {
+      previousRowData = internalDataset.find(function (row) {
+        return row._wmTableRowId === previousRowId || row.id === previousRowId;
+      });
+    }
+
+    // Set the new selection
+    _selectionUtils.selectionStateHelpers.setSelection(cellState, rowId);
+    forceUpdate({});
+    saveStateImmediate();
+
+    // Trigger callbacks in order: deselect previous, then select new
+    if (previousRowData) {
+      triggerSelectionCallback(null, previousRowData, onRowdeselect);
+    }
+    triggerSelectionCallback(null, rowData, onRowselect);
+  }, [cellState, saveStateImmediate, onRowselect, onRowdeselect, internalDataset, triggerSelectionCallback]);
+
+  // Handle selection for multiselect mode (add/remove from selection)
+  var handleMultiSelection = (0, _react.useCallback)(function (rowId, rowData, isSelected) {
+    if (isSelected) {
+      _selectionUtils.selectionStateHelpers.addToSelection(cellState, rowId);
+    } else {
+      _selectionUtils.selectionStateHelpers.removeFromSelection(cellState, rowId);
+    }
+    forceUpdate({});
+    saveStateImmediate();
+
+    // Trigger appropriate callback
+    triggerSelectionCallback(null, rowData, isSelected ? onRowselect : onRowdeselect);
+  }, [cellState, saveStateImmediate, onRowselect, onRowdeselect, triggerSelectionCallback]);
+
+  // Toggle all rows selection for multiselect
+  var handleSelectAll = (0, _react.useCallback)(function (isSelected) {
+    var newIds = [];
+    if (isSelected) {
+      // Use ref to ensure we always have the latest dataset
+      newIds = (0, _selectionUtils.getRowIdsFromDataset)(datasetRef.current);
+      _selectionUtils.selectionStateHelpers.setAllSelection(cellState, newIds);
+    } else {
+      _selectionUtils.selectionStateHelpers.clearSelection(cellState);
+    }
+    forceUpdate({});
+    saveStateImmediate();
+
+    // Sync selectedItems to proxy once (so Page.Widgets.<table>.selectedItems is up-to-date
+    // for any onRowselect/onRowdeselect callbacks that fire below).
+    onSyncSelectedItems === null || onSyncSelectedItems === void 0 || onSyncSelectedItems(newIds);
+
+    // Fire per-row callbacks so user scripts (e.g. onRowselect updating a label) are triggered.
+    // onSyncSelectedItems is intentionally NOT called inside each iteration — we already synced
+    // the full selection above, avoiding O(N) redundant proxy writes.
+    var rows = datasetRef.current;
+    var callback = isSelected ? onRowselect : onRowdeselect;
+    if (callback && rows.length > 0) {
+      rows.forEach(function (row) {
+        var cleanedRow = (0, _utils.cleanRowData)([row])[0];
+        callback(null, getWidgetRef(), cleanedRow);
+      });
+    }
+  }, [cellState, saveStateImmediate, onSyncSelectedItems, onRowselect, onRowdeselect, getWidgetRef]);
+
+  // Handle row selection on click - unified handler
+  var handleRowSelectionClick = (0, _react.useCallback)(function (event, rowId, rowData) {
+    // If clicking on an interactive element, don't handle row selection
+    if ((0, _selectionUtils.isInteractiveElement)(event)) {
+      return false;
+    }
+
+    // Handle based on selection mode
+    if (useMultiSelect) {
+      // Check if row is currently selected and toggle
+      var isCurrentlySelected = _selectionUtils.selectionStateHelpers.isRowSelected(cellState, rowId);
+      var willBeSelected = !isCurrentlySelected;
+      _selectionUtils.selectionStateHelpers.toggleSelection(cellState, rowId);
+      forceUpdate({});
+      saveStateImmediate();
+
+      // Trigger appropriate callback based on new selection state
+      triggerSelectionCallback(event, rowData, willBeSelected ? onRowselect : onRowdeselect);
+      return true;
+    } else {
+      // Replace selection for radio select (or default mode)
+      handleRadioSelection(rowId, rowData);
+      return true;
+    }
+  }, [useMultiSelect, handleRadioSelection, cellState, saveStateImmediate, triggerSelectionCallback, onRowselect, onRowdeselect]);
+
+  // First row selection logic - only runs once on initial render
+  (0, _react.useEffect)(function () {
+    // Skip if initial selection has already been done
+    if (initialSelectionDoneRef.current) {
+      return;
+    }
+
+    // Only proceed if gridfirstrowselect is true and we have data
+    if (gridfirstrowselect && internalDataset.length > 0) {
+      var firstRowData = internalDataset[0];
+      var firstRowId = firstRowData._wmTableRowId || String(firstRowData.id) || String(0);
+
+      // Check if any row is currently selected
+      var currentSelection = _selectionUtils.selectionStateHelpers.getSelection(cellState);
+      if (currentSelection.length === 0) {
+        // No selection - select the first row
+        if (useMultiSelect) {
+          _selectionUtils.selectionStateHelpers.addToSelection(cellState, firstRowId);
+        } else {
+          _selectionUtils.selectionStateHelpers.setSelection(cellState, firstRowId);
+        }
+        forceUpdate({});
+        initialSelectionDoneRef.current = true;
+      } else if (!useMultiSelect) {
+        // For radio select, check if the selected row still exists
+        var selectedId = currentSelection[0];
+        if (!(0, _selectionUtils.rowExistsInDataset)(selectedId, internalDataset)) {
+          _selectionUtils.selectionStateHelpers.setSelection(cellState, firstRowId);
+          forceUpdate({});
+          initialSelectionDoneRef.current = true;
+        }
+      }
+    }
+  }, [gridfirstrowselect, internalDataset, useMultiSelect, cellState]);
+
+  // Page change selection logic - runs when page changes
+  (0, _react.useEffect)(function () {
+    var _savedState$selectedI;
+    // Only proceed if gridfirstrowselect is true and we have data
+    if (!gridfirstrowselect || internalDataset.length === 0 || !initialSelectionDoneRef.current) {
+      return;
+    }
+
+    // Get current page number
+    var currentPage = (getTableCurrentState === null || getTableCurrentState === void 0 ? void 0 : getTableCurrentState().currentPage) || 1;
+
+    // Check if there are already selected items on the current page
+    var savedState = (0, _tableHelpers.getTableState)(name, statehandler);
+    var selectedIdsInCurrentPage = (savedState === null || savedState === void 0 || (_savedState$selectedI = savedState.selectedItem) === null || _savedState$selectedI === void 0 ? void 0 : _savedState$selectedI.filter(function (item) {
+      return item.page === currentPage;
+    }).map(function (item) {
+      return item.index;
+    })) || [];
+    if (selectedIdsInCurrentPage.length > 0) {
+      return;
+    }
+
+    // Check if there's a selection for this page in current dataset
+    var currentSelection = _selectionUtils.selectionStateHelpers.getSelection(cellState);
+    var hasSelectionInCurrentPage = currentSelection.some(function (selectedId) {
+      return (0, _selectionUtils.rowExistsInDataset)(selectedId, internalDataset);
+    });
+
+    // Select first row if no selection exists on this page
+    if (!hasSelectionInCurrentPage) {
+      var firstRowData = internalDataset[0];
+      var firstRowId = firstRowData._wmTableRowId || String(firstRowData.id) || String(0);
+      if (useMultiSelect) {
+        _selectionUtils.selectionStateHelpers.addToSelection(cellState, firstRowId);
+      } else {
+        _selectionUtils.selectionStateHelpers.setSelection(cellState, firstRowId);
+      }
+      forceUpdate({});
+
+      // Trigger onRowselect callback for the first row
+      if (onRowselect) {
+        triggerSelectionCallback(null, firstRowData, onRowselect);
+      }
+    }
+  }, [gridfirstrowselect, internalDataset, useMultiSelect, cellState, getTableCurrentState, name, statehandler, onRowselect, triggerSelectionCallback]);
+
+  // Check if a row is selected - memoized
+  var isRowSelected = (0, _react.useCallback)(function (rowId) {
+    return _selectionUtils.selectionStateHelpers.isRowSelected(cellState, rowId);
+  }, [cellState]);
+
+  // Get selected row IDs - unified array that works for both modes
+  // For radio select: contains at most 1 item
+  // For multiselect: can contain multiple items
+  // Always track selections regardless of selection mode for state persistence purposes
+  // (internally treat as radioselect if no mode is specified)
+  var selectedRowIds = (0, _react.useMemo)(function () {
+    return _selectionUtils.selectionStateHelpers.getSelection(cellState);
+  }, [cellState, updateTrigger]);
+
+  // Restore selections when page changes (after initial restoration)
+  (0, _react.useEffect)(function () {
+    // Skip if no state handler or unsupported navigation
+    if (!statehandler || _utils.UNSUPPORTED_STATE_PERSISTENCE_TYPES.includes(navigation)) {
+      return;
+    }
+
+    // Skip if not yet initialized (wait for initial selection logic to complete)
+    if (!initialSelectionDoneRef.current) {
+      return;
+    }
+
+    // Get current page
+    var currentPage = (getTableCurrentState === null || getTableCurrentState === void 0 ? void 0 : getTableCurrentState().currentPage) || 1;
+
+    // Get saved state
+    var savedState = (0, _tableHelpers.getTableState)(name, statehandler);
+    if (!savedState || !savedState.selectedItem || savedState.selectedItem.length === 0) {
+      return;
+    }
+
+    // Check if there's an active filter - don't restore if filtering
+    var hasActiveFilter = savedState.search && savedState.search.length > 0;
+    if (hasActiveFilter) {
+      return;
+    }
+
+    // Get selections for current page from saved state
+    var currentPageSelections = savedState.selectedItem.filter(function (item) {
+      return item.page === currentPage;
+    }).map(function (item) {
+      return item.index;
+    });
+
+    // If there are selections for this page, restore them
+    if (currentPageSelections.length > 0 && internalDataset.length > 0) {
+      // Check if these selections are already applied
+      var currentSelection = _selectionUtils.selectionStateHelpers.getSelection(cellState);
+
+      // Build expected row IDs from indices
+      var expectedRowIds = [];
+      currentPageSelections.forEach(function (index) {
+        if (index >= 0 && index < internalDataset.length) {
+          var row = internalDataset[index];
+          if (row && row._wmTableRowId) {
+            expectedRowIds.push(row._wmTableRowId);
+          }
+        }
+      });
+
+      // Check if current selection matches expected
+      var isAlreadyRestored = expectedRowIds.length === currentSelection.length && expectedRowIds.every(function (id) {
+        return currentSelection.includes(id);
+      });
+      if (!isAlreadyRestored && expectedRowIds.length > 0) {
+        // Apply restored selections
+        if (useMultiSelect) {
+          // For multiselect, clear and add all restored items
+          _selectionUtils.selectionStateHelpers.clearSelection(cellState);
+          currentPageSelections.forEach(function (index) {
+            if (index >= 0 && index < internalDataset.length) {
+              var row = internalDataset[index];
+              if (row && row._wmTableRowId) {
+                _selectionUtils.selectionStateHelpers.addToSelection(cellState, row._wmTableRowId);
+              }
+            }
+          });
+        } else {
+          // For radio select, only restore the first selection
+          var firstIndex = currentPageSelections[0];
+          if (firstIndex >= 0 && firstIndex < internalDataset.length) {
+            var row = internalDataset[firstIndex];
+            if (row && row._wmTableRowId) {
+              _selectionUtils.selectionStateHelpers.setSelection(cellState, row._wmTableRowId);
+            }
+          }
+        }
+        forceUpdate({});
+      }
+    }
+  }, [getTableCurrentState, name, statehandler, navigation, internalDataset, cellState, useMultiSelect]);
+  return {
+    selectedRowIds: selectedRowIds,
+    useMultiSelect: useMultiSelect,
+    useRadioSelect: useRadioSelect,
+    handleRadioSelection: handleRadioSelection,
+    handleMultiSelection: handleMultiSelection,
+    handleSelectAll: handleSelectAll,
+    handleRowSelectionClick: handleRowSelectionClick,
+    isRowSelected: isRowSelected,
+    isInteractiveElement: _selectionUtils.isInteractiveElement
+  };
+};

package/components/data/table/hooks/useServerSideSorting.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import { SortingState } from "@tanstack/react-table";
+import { ToastType } from "../props";
+import { LiveVariableConfig } from "@wavemaker-ai/react-runtime/variables/live-variable";
+export interface UseServerSideSortingProps {
+    datasource?: LiveVariableConfig;
+    sorting: SortingState;
+    setInternalDataset: React.Dispatch<React.SetStateAction<any[]>>;
+    showToast?: (message: string, type: ToastType) => void;
+    isServerSidePagination: boolean;
+    pageIndex: number;
+    onError?: (event: any, widget: any, data: any, operation: string) => void;
+    onBeforefilter?: (widget: any, filterFields: any) => void | boolean | Promise<void | boolean>;
+    filterFields?: Record<string, any>;
+    logicalOp?: string;
+    listener?: any;
+    name?: string;
+}
+export interface UseServerSideSortingReturn {
+    handleSortingChange: (updaterOrValue: React.SetStateAction<SortingState>) => void;
+    isServerSideSorting: boolean;
+}
+/**
+ * Hook to handle server-side sorting for table data
+ */
+export declare const useServerSideSorting: ({ datasource, sorting, setInternalDataset, showToast, isServerSidePagination, pageIndex, onError, onBeforefilter, filterFields, logicalOp, listener, name, }: UseServerSideSortingProps) => UseServerSideSortingReturn;

package/components/data/table/hooks/useServerSideSorting.js

@@ -0,0 +1,203 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useServerSideSorting = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _crudHandlers = require("../utils/crud-handlers");
+var _utils = require("../utils");
+var _useDebounce = require("@wavemaker-ai/react-runtime/hooks/useDebounce");
+/**
+ * Hook to handle server-side sorting for table data
+ */
+var useServerSideSorting = exports.useServerSideSorting = function useServerSideSorting(_ref) {
+  var datasource = _ref.datasource,
+    sorting = _ref.sorting,
+    setInternalDataset = _ref.setInternalDataset,
+    showToast = _ref.showToast,
+    isServerSidePagination = _ref.isServerSidePagination,
+    pageIndex = _ref.pageIndex,
+    onError = _ref.onError,
+    onBeforefilter = _ref.onBeforefilter,
+    filterFields = _ref.filterFields,
+    logicalOp = _ref.logicalOp,
+    listener = _ref.listener,
+    name = _ref.name;
+  var prevSortingRef = (0, _react.useRef)(sorting);
+  var prevPageRef = (0, _react.useRef)(pageIndex);
+  var prevFilterRef = (0, _react.useRef)("");
+  var isMountedRef = (0, _react.useRef)(false);
+
+  // Determine if we should use server-side sorting
+  var isServerSideSorting = !!(datasource && isServerSidePagination);
+
+  // Convert TanStack sorting state to orderBy string
+  var convertSortingToOrderBy = (0, _react.useCallback)(function (sortingState) {
+    if (!sortingState || sortingState.length === 0) {
+      return "";
+    }
+
+    // Map sorting state to orderBy format (e.g., "name asc, age desc")
+    return sortingState.map(function (sort) {
+      return "".concat(sort.id, " ").concat(sort.desc ? "desc" : "asc");
+    }).join(", ");
+  }, []);
+
+  // Fetch data with sorting
+  var fetchSortedDataImpl = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(forcePage) {
+      var orderBy, currentPage, response, responseData, dataWithIds, _listener$Widgets, widget;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!datasource || !isServerSideSorting)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            _context.prev = 2;
+            orderBy = convertSortingToOrderBy(sorting); // Use forcePage if provided (for sorting changes), otherwise use current page
+            currentPage = forcePage !== undefined ? forcePage : pageIndex + 1; // Convert 0-based to 1-based
+            _context.next = 7;
+            return (0, _crudHandlers.refreshDataSource)(datasource, {
+              orderBy: orderBy,
+              page: currentPage || 1,
+              filterFields: filterFields || {},
+              condition: logicalOp || ""
+            });
+          case 7:
+            response = _context.sent;
+            // Handle response data - always update dataset even if empty
+            responseData = []; // Handle different response formats
+            if (response && response.data) {
+              responseData = Array.isArray(response.data) ? response.data : [];
+            }
+
+            // Add unique row IDs to the server response data
+            dataWithIds = (0, _utils.addUniqueRowIds)(responseData);
+            setInternalDataset(dataWithIds);
+            _context.next = 19;
+            break;
+          case 14:
+            _context.prev = 14;
+            _context.t0 = _context["catch"](2);
+            console.error("Error fetching sorted data:", _context.t0);
+            if (showToast) {
+              showToast("Failed to sort data", "Error");
+            }
+            if (onError) {
+              widget = name ? listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[name] : undefined;
+              onError(null, widget, _context.t0, "sort");
+            }
+          case 19:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[2, 14]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [datasource, isServerSideSorting, sorting, pageIndex, convertSortingToOrderBy, setInternalDataset, showToast, onError, filterFields, logicalOp, listener, name]);
+
+  // Debounced version to handle rapid successive calls
+  var fetchSortedData = (0, _useDebounce.useDebounceCallback)(fetchSortedDataImpl, 100);
+
+  // Combined effect to handle sorting, pagination, and filter changes
+  (0, _react.useEffect)(function () {
+    // Skip if not server-side sorting
+    if (!isServerSideSorting) {
+      return;
+    }
+
+    // Skip initial mount
+    if (!isMountedRef.current) {
+      isMountedRef.current = true;
+      prevSortingRef.current = sorting;
+      prevPageRef.current = pageIndex;
+      prevFilterRef.current = JSON.stringify({
+        filterFields: filterFields,
+        logicalOp: logicalOp
+      });
+      return;
+    }
+
+    // Check what changed
+    var sortingString = JSON.stringify(sorting);
+    var prevSortingString = JSON.stringify(prevSortingRef.current);
+    var filterString = JSON.stringify({
+      filterFields: filterFields,
+      logicalOp: logicalOp
+    });
+    var sortingChanged = sortingString !== prevSortingString;
+    // const pageChanged = pageIndex !== prevPageRef.current;
+    var filterChanged = filterString !== prevFilterRef.current;
+
+    // Only fetch if something actually changed
+    if (sortingChanged || filterChanged) {
+      // If filter changed, call onBeforefilter callback
+      if (filterChanged && onBeforefilter) {
+        var handleFilterChange = /*#__PURE__*/function () {
+          var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+            var _listener$Widgets2;
+            var widget, result;
+            return _regenerator["default"].wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                  widget = name ? listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name] : undefined;
+                  _context2.next = 3;
+                  return onBeforefilter(widget, filterFields);
+                case 3:
+                  result = _context2.sent;
+                  if (!(result === false)) {
+                    _context2.next = 6;
+                    break;
+                  }
+                  return _context2.abrupt("return");
+                case 6:
+                  // Update refs before fetching to prevent duplicate calls
+                  prevSortingRef.current = sorting;
+                  prevPageRef.current = pageIndex;
+                  prevFilterRef.current = filterString;
+
+                  // When sorting or filter changes, fetch from page 1
+                  fetchSortedData(1);
+                case 10:
+                case "end":
+                  return _context2.stop();
+              }
+            }, _callee2);
+          }));
+          return function handleFilterChange() {
+            return _ref3.apply(this, arguments);
+          };
+        }();
+        handleFilterChange();
+      } else {
+        // Update refs before fetching to prevent duplicate calls
+        prevSortingRef.current = sorting;
+        prevPageRef.current = pageIndex;
+        prevFilterRef.current = filterString;
+
+        // When sorting or filter changes, fetch from page 1
+        fetchSortedData(1);
+      }
+    }
+  }, [sorting, pageIndex, filterFields, logicalOp, isServerSideSorting, fetchSortedData, onBeforefilter, listener, name]);
+
+  // Custom sorting change handler
+  var handleSortingChange = (0, _react.useCallback)(function (updaterOrValue) {
+    // This will be called instead of the default setSorting
+    // We'll still update the sorting state, but also trigger server-side fetch
+    return updaterOrValue;
+  }, []);
+  return {
+    handleSortingChange: handleSortingChange,
+    isServerSideSorting: isServerSideSorting
+  };
+};

package/components/data/table/hooks/useTableColumns.d.ts

@@ -0,0 +1,2 @@
+import { UseTableColumnsProps, UseTableColumnsReturn } from "../props";
+export declare const useTableColumns: ({ wmTableColumns, columnsVersion, rowActions, listener, deleteRecord, showrowindex, editmode, isDynamicTable, renderEditableCell, isRowEditing, editingRowId, startEditing, cancelEditing, saveEditing, cellState, isResizing, handleRowClick, handleRadioSelection, handleMultiSelection, useRadioSelect, useMultiSelect, isRowSelected, }: UseTableColumnsProps) => UseTableColumnsReturn;