@wavemaker/react-runtime 11.14.1-rc.236

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowHandlers = void 0;
+var _react = require("react");
+var _utils = require("../utils");
+/**
+ * Hook to consolidate all row click handlers
+ */
+var useRowHandlers = exports.useRowHandlers = function useRowHandlers(_ref) {
+  var editingRowId = _ref.editingRowId,
+    isAddingNewRow = _ref.isAddingNewRow,
+    handleRowSelectionClick = _ref.handleRowSelectionClick,
+    handleTableEditRowClick = _ref.handleTableEditRowClick,
+    handleRowActiveClick = _ref.handleRowActiveClick,
+    onRowclick = _ref.onRowclick;
+  var handleRowClick = (0, _react.useCallback)(function (event, rowData, rowId) {
+    // Handle row selection first
+    var isSelectionHandled = handleRowSelectionClick(event, rowId, rowData);
+    if (onRowclick) {
+      onRowclick(event, {}, (0, _utils.cleanRowData)(rowData));
+    }
+
+    // Handle table edit row click (works for both inline and quickedit)
+    handleTableEditRowClick(rowData, rowId);
+
+    // Don't change active row if currently editing or adding new row
+    var isEditingOrAdding = editingRowId !== null || isAddingNewRow;
+
+    // Handle active row state
+    handleRowActiveClick(rowId, isSelectionHandled, isEditingOrAdding);
+  }, [editingRowId, isAddingNewRow, handleRowSelectionClick, handleTableEditRowClick, handleRowActiveClick]);
+  return {
+    handleRowClick: handleRowClick
+  };
+};

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

@@ -0,0 +1,213 @@
+"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 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;
+  // Keep a ref to always have the latest dataset
+  var datasetRef = (0, _react.useRef)(internalDataset);
+  (0, _react.useEffect)(function () {
+    datasetRef.current = internalDataset;
+  }, [internalDataset]);
+
+  // State only for forcing updates when needed
+  var _useState = (0, _react.useState)({}),
+    forceUpdate = _useState[1];
+
+  // Priority rule: If both radioselect and multiselect are true, multiselect takes precedence
+  var useMultiSelect = multiselect;
+  var useRadioSelect = radioselect && !multiselect;
+
+  // 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
+    // If not multiselect, treat as radio select (single selection)
+    var selectedIds = useMultiSelect ? _selectionUtils.selectionStateHelpers.getMultiSelection(cellState) : _selectionUtils.selectionStateHelpers.getRadioSelection(cellState) ? [_selectionUtils.selectionStateHelpers.getRadioSelection(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 or default mode (when neither multi nor radio is explicitly enabled),
+      // don't merge - just replace with current selection
+      if (useRadioSelect || !useMultiSelect) {
+        // Radio select or default mode should only have one item selected at a time
+        stateToSave.selectedItem = selectedItemsWithPage;
+      } else {
+        // 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]);
+
+  // Handle radio selection changes
+  var handleRadioSelection = (0, _react.useCallback)(function (rowId, rowData) {
+    _selectionUtils.selectionStateHelpers.setRadioSelection(cellState, rowId);
+    forceUpdate({});
+    saveStateImmediate(); // Save state immediately
+  }, [cellState, saveStateImmediate]);
+
+  // Handle multiselect checkbox changes
+  var handleMultiSelection = (0, _react.useCallback)(function (rowId, rowData, isSelected) {
+    if (isSelected) {
+      _selectionUtils.selectionStateHelpers.addToMultiSelection(cellState, rowId);
+    } else {
+      _selectionUtils.selectionStateHelpers.removeFromMultiSelection(cellState, rowId);
+    }
+    forceUpdate({});
+    saveStateImmediate(); // Save state immediately
+  }, [cellState, saveStateImmediate]);
+
+  // Toggle all rows selection for multiselect
+  var handleSelectAll = (0, _react.useCallback)(function (isSelected) {
+    if (isSelected) {
+      // Use ref to ensure we always have the latest dataset
+      var allRowIds = (0, _selectionUtils.getRowIdsFromDataset)(datasetRef.current);
+      _selectionUtils.selectionStateHelpers.setAllMultiSelection(cellState, allRowIds);
+    } else {
+      _selectionUtils.selectionStateHelpers.clearMultiSelection(cellState);
+    }
+    forceUpdate({});
+    saveStateImmediate(); // Save state immediately
+  }, [cellState, saveStateImmediate]);
+
+  // Handle row selection on click
+  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 multiselect if enabled
+    if (useMultiSelect) {
+      _selectionUtils.selectionStateHelpers.toggleMultiSelection(cellState, rowId);
+      saveStateImmediate(); // Save state immediately
+      return true;
+    }
+    // Handle radio selection if enabled (and multiselect is not)
+    else {
+      handleRadioSelection(rowId, rowData);
+      // No need to call saveStateImmediate here as handleRadioSelection already does it
+      return true;
+    }
+  }, [useMultiSelect, useRadioSelect, handleRadioSelection, cellState, saveStateImmediate]);
+
+  // First row selection logic
+  (0, _react.useEffect)(function () {
+    // 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);
+      if (useMultiSelect) {
+        // For multiselect, only add to selection if no rows are currently selected
+        var selectedIds = _selectionUtils.selectionStateHelpers.getMultiSelection(cellState);
+        if (selectedIds.length === 0) {
+          _selectionUtils.selectionStateHelpers.addToMultiSelection(cellState, firstRowId);
+        }
+      } else {
+        // For radio select or default mode (when neither is explicitly enabled),
+        // only select the first row if no row is currently selected
+        // or if the currently selected row no longer exists in the dataset
+        var currentSelectedId = _selectionUtils.selectionStateHelpers.getRadioSelection(cellState);
+        if (!currentSelectedId || !(0, _selectionUtils.rowExistsInDataset)(currentSelectedId, internalDataset)) {
+          handleRadioSelection(firstRowId, firstRowData);
+        }
+      }
+    }
+  }, [gridfirstrowselect, internalDataset, useMultiSelect, useRadioSelect, handleRadioSelection, cellState]);
+
+  // Check if a row is selected - memoized
+  var isRowSelected = (0, _react.useCallback)(function (rowId) {
+    return _selectionUtils.selectionStateHelpers.isRowSelected(cellState, rowId, useMultiSelect, useRadioSelect);
+  }, [useMultiSelect, useRadioSelect, cellState]);
+
+  // Get selected values without forcing re-renders
+  var selectedRowId = useRadioSelect ? _selectionUtils.selectionStateHelpers.getRadioSelection(cellState) : null;
+  var selectedRowIds = useMultiSelect ? _selectionUtils.selectionStateHelpers.getMultiSelection(cellState) : [];
+  return {
+    selectedRowId: selectedRowId,
+    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.js

@@ -0,0 +1,165 @@
+"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");
+/**
+ * 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,
+    filterFields = _ref.filterFields,
+    logicalOp = _ref.logicalOp,
+    setLoading = _ref.setLoading;
+  var prevSortingRef = (0, _react.useRef)(sorting);
+  var prevPageRef = (0, _react.useRef)(pageIndex);
+  var prevFilterRef = (0, _react.useRef)("");
+  var isMountedRef = (0, _react.useRef)(false);
+  var isFetchingRef = (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 fetchSortedData = (0, _react.useCallback)(/*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(forcePage) {
+      var orderBy, currentPage, response, responseData, dataWithIds;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(!datasource || !isServerSideSorting || isFetchingRef.current)) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            // Prevent duplicate fetches
+            isFetchingRef.current = true;
+            setLoading(true);
+            _context.prev = 4;
+            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 = 9;
+            return (0, _crudHandlers.refreshDataSource)(datasource, {
+              orderBy: orderBy,
+              page: currentPage || 1,
+              filterFields: filterFields || {},
+              condition: logicalOp || ""
+            });
+          case 9:
+            response = _context.sent;
+            if (response) {
+              responseData = []; // Handle different response formats
+              if (response.data) {
+                responseData = response.data;
+              }
+              // Add unique row IDs to the server response data
+              dataWithIds = (0, _utils.addUniqueRowIds)(responseData);
+              setInternalDataset(dataWithIds);
+            }
+            _context.next = 18;
+            break;
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](4);
+            console.error("Error fetching sorted data:", _context.t0);
+            if (showToast) {
+              showToast("Failed to sort data", "Error");
+            }
+            if (onError) {
+              onError("sort", _context.t0);
+            }
+          case 18:
+            _context.prev = 18;
+            isFetchingRef.current = false;
+            setLoading(false);
+            return _context.finish(18);
+          case 22:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[4, 13, 18, 22]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [datasource, isServerSideSorting, sorting, pageIndex, convertSortingToOrderBy, setInternalDataset, showToast, onError, filterFields, logicalOp]);
+
+  // 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) {
+      // 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]);
+
+  // 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.js

@@ -0,0 +1,263 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableColumns = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _lodashEs = require("lodash-es");
+var _utils = require("../utils");
+var _renderDisplayCell = require("../utils/renderDisplayCell");
+var _columnBuilder = require("../utils/columnBuilder");
+var _columnWidthDistribution = require("../utils/columnWidthDistribution");
+var _useResponsiveColumns = require("./useResponsiveColumns");
+var _tableRowAction = _interopRequireDefault(require("../table-row-action"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+// Extract action button rendering to reduce re-renders
+var ActionButton = /*#__PURE__*/_react["default"].memo(function (_ref) {
+  var action = _ref.action,
+    index = _ref.index,
+    rowData = _ref.rowData,
+    rowIndex = _ref.rowIndex,
+    rowId = _ref.rowId,
+    listener = _ref.listener;
+  var actionKey = action.key || action.name;
+  var btnClass = (0, _utils.getActionButtonClass)(action);
+  return __jsx(_tableRowAction["default"], {
+    key: "row-action-".concat(index, "-").concat(actionKey),
+    name: action.name || "table-row-action-".concat(index, "-").concat(actionKey),
+    className: btnClass,
+    "data-action-key": actionKey,
+    displayName: action["displayName"] || "",
+    title: action.title,
+    iconclass: action.iconclass,
+    action: action.action,
+    row: rowData,
+    rowIndex: rowIndex,
+    listener: listener,
+    show: action.show,
+    onClick: action.onClick,
+    widgettype: action.widgettype
+  });
+});
+ActionButton.displayName = "ActionButton";
+
+// Extract editing action buttons
+var EditingActionButtons = /*#__PURE__*/_react["default"].memo(function (_ref2) {
+  var onSave = _ref2.onSave,
+    onCancel = _ref2.onCancel,
+    rowData = _ref2.rowData,
+    rowIndex = _ref2.rowIndex,
+    listener = _ref2.listener;
+  var buttons = (0, _columnBuilder.createEditingActionButtons)();
+  return __jsx(_react["default"].Fragment, null, buttons.map(function (button) {
+    return __jsx(_tableRowAction["default"], {
+      key: button.key,
+      name: button.name,
+      className: button.className,
+      "data-action-key": button.dataActionKey,
+      displayName: button.displayName,
+      title: button.title,
+      iconclass: button.iconclass,
+      action: button.action,
+      row: rowData,
+      rowIndex: rowIndex,
+      listener: listener,
+      show: button.show,
+      onClick: function onClick(event, widget) {
+        event === null || event === void 0 || event.preventDefault();
+        event === null || event === void 0 || event.stopPropagation();
+        button.key === "save-edit" ? onSave() : onCancel();
+      },
+      widgettype: button.widgettype
+    });
+  }));
+});
+EditingActionButtons.displayName = "EditingActionButtons";
+var useTableColumns = exports.useTableColumns = function useTableColumns(_ref3) {
+  var wmTableColumns = _ref3.wmTableColumns,
+    rowActions = _ref3.rowActions,
+    listener = _ref3.listener,
+    deleteRecord = _ref3.deleteRecord,
+    showrowindex = _ref3.showrowindex,
+    editmode = _ref3.editmode,
+    renderEditableCell = _ref3.renderEditableCell,
+    isRowEditing = _ref3.isRowEditing,
+    startEditing = _ref3.startEditing,
+    cancelEditing = _ref3.cancelEditing,
+    saveEditing = _ref3.saveEditing,
+    cellState = _ref3.cellState,
+    isResizing = _ref3.isResizing;
+  // Filter columns based on viewport
+  var visibleColumns = (0, _useResponsiveColumns.useResponsiveColumns)(wmTableColumns);
+
+  // Memoize the cell render function to prevent re-renders
+  var renderCell = (0, _react.useCallback)(function (wmColumn, row) {
+    var rowId = row.original._wmTableRowId || row.id;
+    return __jsx(_material.Box, {
+      "data-col-identifier": wmColumn.field
+    }, (editmode === "inline" || editmode === "quickedit") && isRowEditing(rowId) && !wmColumn.readonly ? renderEditableCell(wmColumn, row.original, rowId) : (0, _renderDisplayCell.renderDisplayCell)(wmColumn, row.original, listener, cellState));
+  }, [editmode, isRowEditing, renderEditableCell, cellState, listener]);
+
+  // Filter row actions once
+  var filteredRowActions = (0, _react.useMemo)(function () {
+    if (editmode === "quickedit") {
+      return (0, _lodashEs.filter)(rowActions, function (action) {
+        return action.key === "deleterow" || action.action === "delete";
+      });
+    }
+    return rowActions;
+  }, [rowActions, editmode]);
+
+  // Create action column cell renderer
+  var renderActionCell = (0, _react.useCallback)(function (_ref4) {
+    var row = _ref4.row;
+    var rowId = row.original._wmTableRowId || row.id;
+    var isEditing = isRowEditing(rowId);
+    return __jsx(_material.Box, {
+      component: "span",
+      className: "actions-column",
+      "data-identifier": "actionButtons"
+    }, isEditing && editmode !== "quickedit" ? __jsx(EditingActionButtons, {
+      onSave: saveEditing,
+      onCancel: cancelEditing,
+      rowData: row.original,
+      rowIndex: row.index,
+      listener: listener
+    }) : (0, _lodashEs.map)(filteredRowActions, function (action, index) {
+      return __jsx(ActionButton, {
+        key: "".concat(row.id, "-").concat(index),
+        action: action,
+        index: index,
+        rowData: row.original,
+        rowIndex: row.index,
+        rowId: rowId,
+        listener: listener
+      });
+    }));
+  }, [isRowEditing, editmode, filteredRowActions, saveEditing, cancelEditing, listener]);
+
+  // Create TanStack table column definitions
+  var columns = (0, _react.useMemo)(function () {
+    var columnDefs = [];
+
+    // Separate manual action column (binding="rowOperations") from regular columns
+    var manualActionColumn = visibleColumns.find(function (col) {
+      return col.binding === "rowOperations";
+    });
+    var dataColumns = visibleColumns.filter(function (col) {
+      return col.binding !== "rowOperations";
+    });
+
+    // Add row index column if showrowindex is true
+    if (showrowindex) {
+      columnDefs.push((0, _columnBuilder.createRowIndexColumn)());
+    }
+
+    // Determine where to insert the actions column
+    var insertActionColumn = function insertActionColumn() {
+      // If we have a manual action column, create a custom action column with its properties
+      if (manualActionColumn) {
+        var _manualActionColumn$s;
+        var _getActionColumnSize = (0, _columnBuilder.getActionColumnSize)(editmode),
+          size = _getActionColumnSize.size,
+          minSize = _getActionColumnSize.minSize;
+
+        // Extract width from manual action column styles or width prop
+        var columnSize = size;
+        if (manualActionColumn.width) {
+          columnSize = parseInt(manualActionColumn.width);
+        } else if ((_manualActionColumn$s = manualActionColumn.styles) !== null && _manualActionColumn$s !== void 0 && _manualActionColumn$s.width) {
+          columnSize = (0, _utils.parseWidth)(manualActionColumn.styles.width);
+        }
+        columnDefs.push({
+          id: "actions",
+          header: manualActionColumn.caption || "Actions",
+          size: columnSize,
+          minSize: minSize,
+          enableResizing: true,
+          cell: renderActionCell,
+          enableSorting: manualActionColumn.sortable !== false,
+          meta: _objectSpread({
+            textAlign: manualActionColumn.textalignment,
+            backgroundColor: manualActionColumn.backgroundcolor,
+            className: manualActionColumn.colClass
+          }, manualActionColumn.styles)
+        });
+      }
+      // If no manual action column but we have row actions and editmode is not 'none'
+      else if (rowActions.length > 0 && editmode !== "none") {
+        var _getActionColumnSize2 = (0, _columnBuilder.getActionColumnSize)(editmode),
+          _size = _getActionColumnSize2.size,
+          _minSize = _getActionColumnSize2.minSize;
+        columnDefs.push({
+          id: "actions",
+          header: "Actions",
+          size: _size,
+          minSize: _minSize,
+          maxSize: _size,
+          // Fix the width for default action columns
+          enableResizing: false,
+          // Disable resizing for default action columns
+          cell: renderActionCell
+        });
+      }
+    };
+
+    // Handle action column positioning
+    if (manualActionColumn || rowActions.length > 0 && editmode !== "none") {
+      // For manual action column, use its rowactionsposition property
+      var position = (manualActionColumn === null || manualActionColumn === void 0 ? void 0 : manualActionColumn.rowactionsposition) !== undefined ? Number(manualActionColumn.rowactionsposition) : -1;
+
+      // Position 0 means right after system columns (row index, selection) but before data columns
+      if (position === 0) {
+        // Insert action column immediately after system columns
+        insertActionColumn();
+        // Then add all data columns
+        columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns, renderCell)));
+      }
+      // Positive position means insert at specific index among data columns
+      else if (position > 0 && position <= dataColumns.length) {
+        // Add data columns before position
+        var columnsBeforePosition = dataColumns.slice(0, position);
+        columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(columnsBeforePosition, renderCell)));
+
+        // Insert action column
+        insertActionColumn();
+
+        // Add remaining data columns
+        var columnsAfterPosition = dataColumns.slice(position);
+        columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(columnsAfterPosition, renderCell)));
+      }
+      // Default or -1: add action column at the end
+      else {
+        // Add all data columns first
+        columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns, renderCell)));
+        // Then add action column
+        insertActionColumn();
+      }
+    } else {
+      // No actions column needed, just add data columns
+      columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns, renderCell)));
+    }
+
+    // Apply equal width distribution for data columns without explicit widths
+    // This ensures non-data columns (S.No, Actions, MultiSelect, RadioSelect) take minimum space
+    // while data columns without explicit widths share the remaining space equally
+    // Skip width distribution during active resizing to prevent infinite loops
+    return isResizing ? columnDefs : (0, _columnWidthDistribution.distributeColumnWidths)(columnDefs);
+  }, [visibleColumns, rowActions, showrowindex, editmode, renderCell, renderActionCell, isResizing]);
+  return {
+    columns: columns,
+    wmTableColumns: wmTableColumns,
+    rowActions: rowActions
+  };
+};