@wavemaker-ai/react-runtime 1.0.0-rc.647502 → 1.0.0-rc.647565

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

@@ -1,360 +1,351 @@
-"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-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"));
-var _excluded = ["action", "index", "rowData", "rowIndex", "rowId", "listener"],
-  _excluded2 = ["onSave", "onCancel", "rowData", "rowIndex", "rowId", "listener", "deleteRowAction"];
-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; }
-/**
- * Handles row selection for action buttons
- * Since action buttons are interactive elements, they bypass normal selection logic
- * This function explicitly triggers the appropriate selection handler
- */
-var handleActionSelection = function handleActionSelection(rowId, rowData, handlers) {
-  var useMultiSelect = handlers.useMultiSelect,
-    handleMultiSelection = handlers.handleMultiSelection,
-    isRowSelected = handlers.isRowSelected,
-    useRadioSelect = handlers.useRadioSelect,
-    handleRadioSelection = handlers.handleRadioSelection;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from "react";
+import { Box } from "@mui/material";
+import { filter, map } from "lodash-es";
+import { getActionButtonClass, parseWidth } from "../utils";
+import { renderDisplayCell } from "../utils/renderDisplayCell";
+import {
+  createRowIndexColumn,
+  createDataColumns,
+  createEditingActionButtons,
+  getActionColumnSize
+} from "../utils/columnBuilder";
+import { distributeColumnWidths } from "../utils/columnWidthDistribution";
+import { useResponsiveColumns } from "./useResponsiveColumns";
+import WmTableRowAction from "../table-row-action";
+const handleActionSelection = (rowId, rowData, handlers) => {
+  const {
+    useMultiSelect,
+    handleMultiSelection,
+    isRowSelected,
+    useRadioSelect,
+    handleRadioSelection
+  } = handlers;
   if (useMultiSelect && handleMultiSelection && isRowSelected) {
-    var currentlySelected = isRowSelected(rowId);
+    const currentlySelected = isRowSelected(rowId);
     handleMultiSelection(rowId, rowData, !currentlySelected);
   } else if (useRadioSelect && handleRadioSelection) {
     handleRadioSelection(rowId, rowData);
   }
 };
-
-/**
- * Creates a unified click handler for action buttons
- * Triggers: onRowclick → selection → action-specific onClick
- */
-var createActionClickHandler = function createActionClickHandler(rowData, rowId, handlers, actionOnClick) {
-  return function (event, widget, newVal) {
-    // 1. Trigger row click handler (includes onRowclick callback)
+const createActionClickHandler = (rowData, rowId, handlers, actionOnClick) => {
+  return (event, widget, newVal) => {
     if (handlers.handleRowClick && event) {
       handlers.handleRowClick(event, rowData, rowId);
     }
-
-    // 2. Explicitly handle selection (bypasses interactive element check)
     handleActionSelection(rowId, rowData, handlers);
-
-    // 3. Trigger action-specific onClick
-    actionOnClick === null || actionOnClick === void 0 || actionOnClick(event, widget, newVal);
+    actionOnClick == null ? void 0 : actionOnClick(event, widget, newVal);
   };
 };
-
-/**
- * Renders a single action button for a table row
- * Memoized to prevent unnecessary 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,
-    selectionHandlers = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var actionKey = action.key || action.name;
-  var btnClass = (0, _utils.getActionButtonClass)(action);
-  var handleClick = createActionClickHandler(rowData, rowId, selectionHandlers, action.onClick);
-  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: handleClick,
-    widgettype: action.widgettype
-  });
+const ActionButton = React.memo((_a) => {
+  var _b = _a, { action, index, rowData, rowIndex, rowId, listener } = _b, selectionHandlers = __objRest(_b, ["action", "index", "rowData", "rowIndex", "rowId", "listener"]);
+  const actionKey = action.key || action.name;
+  const btnClass = getActionButtonClass(action);
+  const handleClick = createActionClickHandler(rowData, rowId, selectionHandlers, action.onClick);
+  return /* @__PURE__ */ jsx(
+    WmTableRowAction,
+    {
+      name: action.name || `table-row-action-${index}-${actionKey}`,
+      className: btnClass,
+      "data-action-key": actionKey,
+      displayName: action.displayName || "",
+      title: action.title,
+      iconclass: action.iconclass,
+      action: action.action,
+      row: rowData,
+      rowIndex,
+      listener,
+      show: action.show,
+      onClick: handleClick,
+      widgettype: action.widgettype
+    },
+    `row-action-${index}-${actionKey}`
+  );
 });
 ActionButton.displayName = "ActionButton";
-
-/**
- * Renders editing mode action buttons (save, cancel, delete)
- * Memoized to prevent unnecessary re-renders
- */
-var EditingActionButtons = /*#__PURE__*/_react["default"].memo(function (_ref2) {
-  var onSave = _ref2.onSave,
-    onCancel = _ref2.onCancel,
-    rowData = _ref2.rowData,
-    rowIndex = _ref2.rowIndex,
-    rowId = _ref2.rowId,
-    listener = _ref2.listener,
-    deleteRowAction = _ref2.deleteRowAction,
-    selectionHandlers = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
-  var buttons = (0, _columnBuilder.createEditingActionButtons)();
-  var handleButtonClick = (0, _react.useCallback)(function (button, event, widget) {
-    var _deleteRowAction$onCl;
-    event === null || event === void 0 || event.preventDefault();
-    event === null || event === void 0 || event.stopPropagation();
-    var isDeleteButton = button.key === "delete-edit";
-
-    // Trigger row click and selection for delete button only
-    if (isDeleteButton && event) {
-      var _selectionHandlers$ha;
-      (_selectionHandlers$ha = selectionHandlers.handleRowClick) === null || _selectionHandlers$ha === void 0 || _selectionHandlers$ha.call(selectionHandlers, event, rowData, rowId);
-      handleActionSelection(rowId, rowData, selectionHandlers);
-    }
-
-    // Execute button-specific action
-    switch (button.key) {
-      case "save-edit":
-        onSave();
-        break;
-      case "delete-edit":
-        deleteRowAction === null || deleteRowAction === void 0 || (_deleteRowAction$onCl = deleteRowAction.onClick) === null || _deleteRowAction$onCl === void 0 || _deleteRowAction$onCl.call(deleteRowAction, event, rowData);
-        break;
-      default:
-        onCancel();
-    }
-  }, [onSave, onCancel, deleteRowAction, rowData, rowId, selectionHandlers]);
-  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) {
-        return handleButtonClick(button, event, widget);
+const EditingActionButtons = React.memo(
+  (_c) => {
+    var _d = _c, {
+      onSave,
+      onCancel,
+      rowData,
+      rowIndex,
+      rowId,
+      listener,
+      deleteRowAction
+    } = _d, selectionHandlers = __objRest(_d, [
+      "onSave",
+      "onCancel",
+      "rowData",
+      "rowIndex",
+      "rowId",
+      "listener",
+      "deleteRowAction"
+    ]);
+    const buttons = createEditingActionButtons();
+    const handleButtonClick = useCallback(
+      (button, event, widget) => {
+        var _a, _b;
+        event == null ? void 0 : event.preventDefault();
+        event == null ? void 0 : event.stopPropagation();
+        const isDeleteButton = button.key === "delete-edit";
+        if (isDeleteButton && event) {
+          (_a = selectionHandlers.handleRowClick) == null ? void 0 : _a.call(selectionHandlers, event, rowData, rowId);
+          handleActionSelection(rowId, rowData, selectionHandlers);
+        }
+        switch (button.key) {
+          case "save-edit":
+            onSave();
+            break;
+          case "delete-edit":
+            (_b = deleteRowAction == null ? void 0 : deleteRowAction.onClick) == null ? void 0 : _b.call(deleteRowAction, event, rowData);
+            break;
+          default:
+            onCancel();
+        }
       },
-      widgettype: button.widgettype
-    });
-  }));
-});
+      [onSave, onCancel, deleteRowAction, rowData, rowId, selectionHandlers]
+    );
+    return /* @__PURE__ */ jsx(Fragment, { children: buttons.map((button) => /* @__PURE__ */ jsx(
+      WmTableRowAction,
+      {
+        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,
+        listener,
+        show: button.show,
+        onClick: (event, widget) => handleButtonClick(button, event, widget),
+        widgettype: button.widgettype
+      },
+      button.key
+    )) });
+  }
+);
 EditingActionButtons.displayName = "EditingActionButtons";
-var useTableColumns = exports.useTableColumns = function useTableColumns(_ref3) {
-  var wmTableColumns = _ref3.wmTableColumns,
-    _ref3$columnsVersion = _ref3.columnsVersion,
-    columnsVersion = _ref3$columnsVersion === void 0 ? 0 : _ref3$columnsVersion,
-    rowActions = _ref3.rowActions,
-    listener = _ref3.listener,
-    deleteRecord = _ref3.deleteRecord,
-    showrowindex = _ref3.showrowindex,
-    editmode = _ref3.editmode,
-    _ref3$isDynamicTable = _ref3.isDynamicTable,
-    isDynamicTable = _ref3$isDynamicTable === void 0 ? false : _ref3$isDynamicTable,
-    renderEditableCell = _ref3.renderEditableCell,
-    isRowEditing = _ref3.isRowEditing,
-    editingRowId = _ref3.editingRowId,
-    startEditing = _ref3.startEditing,
-    cancelEditing = _ref3.cancelEditing,
-    saveEditing = _ref3.saveEditing,
-    cellState = _ref3.cellState,
-    isResizing = _ref3.isResizing,
-    handleRowClick = _ref3.handleRowClick,
-    handleRadioSelection = _ref3.handleRadioSelection,
-    handleMultiSelection = _ref3.handleMultiSelection,
-    useRadioSelect = _ref3.useRadioSelect,
-    useMultiSelect = _ref3.useMultiSelect,
-    isRowSelected = _ref3.isRowSelected;
-  // Filter columns based on viewport
-  var visibleColumns = (0, _useResponsiveColumns.useResponsiveColumns)(wmTableColumns);
-
-  // Group selection handlers for easier prop passing
-  var selectionHandlers = (0, _react.useMemo)(function () {
-    return {
-      handleRowClick: handleRowClick,
-      handleRadioSelection: handleRadioSelection,
-      handleMultiSelection: handleMultiSelection,
-      useRadioSelect: useRadioSelect,
-      useMultiSelect: useMultiSelect,
-      isRowSelected: isRowSelected
-    };
-  }, [handleRowClick, handleRadioSelection, handleMultiSelection, useRadioSelect, useMultiSelect, isRowSelected]);
-
-  // Memoize the cell render function to prevent re-renders
-  var renderCell = (0, _react.useCallback)(function (wmColumn, row) {
-    var _row$original;
-    var rowId = (row === null || row === void 0 || (_row$original = row.original) === null || _row$original === void 0 ? void 0 : _row$original._wmTableRowId) || (row === null || row === void 0 ? void 0 : row.id);
-    var isEditingThisRow = isRowEditing(rowId);
-    var shouldRenderEditableCell = (editmode === "inline" || editmode === "quickedit") && isEditingThisRow && !wmColumn.readonly;
-    return __jsx(_material.Box, {
-      "data-col-identifier": wmColumn.field
-    }, shouldRenderEditableCell ? renderEditableCell(wmColumn, row.original, rowId) : (0, _renderDisplayCell.renderDisplayCell)(wmColumn, row.original, listener, cellState));
-  }, [editmode, editingRowId, isRowEditing, renderEditableCell, cellState, listener]);
-
-  // Filter row actions based on edit mode
-  var filteredRowActions = (0, _react.useMemo)(function () {
+const useTableColumns = ({
+  wmTableColumns,
+  columnsVersion = 0,
+  rowActions,
+  listener,
+  deleteRecord,
+  showrowindex,
+  editmode,
+  isDynamicTable = false,
+  renderEditableCell,
+  isRowEditing,
+  editingRowId,
+  startEditing,
+  cancelEditing,
+  saveEditing,
+  cellState,
+  isResizing,
+  handleRowClick,
+  handleRadioSelection,
+  handleMultiSelection,
+  useRadioSelect,
+  useMultiSelect,
+  isRowSelected
+}) => {
+  const visibleColumns = useResponsiveColumns(wmTableColumns);
+  const selectionHandlers = useMemo(
+    () => ({
+      handleRowClick,
+      handleRadioSelection,
+      handleMultiSelection,
+      useRadioSelect,
+      useMultiSelect,
+      isRowSelected
+    }),
+    [
+      handleRowClick,
+      handleRadioSelection,
+      handleMultiSelection,
+      useRadioSelect,
+      useMultiSelect,
+      isRowSelected
+    ]
+  );
+  const renderCell = useCallback(
+    (wmColumn, row) => {
+      var _a;
+      const rowId = ((_a = row == null ? void 0 : row.original) == null ? void 0 : _a._wmTableRowId) || (row == null ? void 0 : row.id);
+      const isEditingThisRow = isRowEditing(rowId);
+      const shouldRenderEditableCell = (editmode === "inline" || editmode === "quickedit") && isEditingThisRow && !wmColumn.readonly;
+      return /* @__PURE__ */ jsx(Box, { "data-col-identifier": wmColumn.field, children: shouldRenderEditableCell ? renderEditableCell(wmColumn, row.original, rowId) : renderDisplayCell(wmColumn, row.original, listener, cellState) });
+    },
+    [editmode, editingRowId, isRowEditing, renderEditableCell, cellState, listener]
+  );
+  const filteredRowActions = useMemo(() => {
     if (editmode === "quickedit") {
-      return (0, _lodashEs.filter)(rowActions, function (action) {
-        return action.key === "deleterow" || action.action === "delete";
-      });
+      return filter(rowActions, (action) => action.key === "deleterow" || action.action === "delete");
     }
     return rowActions;
   }, [rowActions, editmode]);
-
-  // Find delete action once (used in editing mode)
-  var deleteRowAction = (0, _react.useMemo)(function () {
-    return filteredRowActions.find(function (action) {
-      return action.key === "deleterow" || action.action === "delete";
-    });
-  }, [filteredRowActions]);
-
-  // Create action column cell renderer
-  var renderActionCell = (0, _react.useCallback)(function (_ref4) {
-    var _row$original$_wmTabl, _row$original2;
-    var row = _ref4.row;
-    var rowId = (_row$original$_wmTabl = row === null || row === void 0 || (_row$original2 = row.original) === null || _row$original2 === void 0 ? void 0 : _row$original2._wmTableRowId) !== null && _row$original$_wmTabl !== void 0 ? _row$original$_wmTabl : row === null || row === void 0 ? void 0 : row.id;
-    var isEditing = isRowEditing(rowId);
-    var commonProps = _objectSpread({
-      rowData: row.original,
-      rowIndex: row.index,
-      rowId: rowId,
-      listener: listener
-    }, selectionHandlers);
-    return __jsx(_material.Box, {
-      component: "span",
-      className: "actions-column",
-      "data-identifier": "actionButtons"
-    }, isEditing && editmode !== "quickedit" ? __jsx(EditingActionButtons, (0, _extends2["default"])({}, commonProps, {
-      onSave: saveEditing,
-      onCancel: cancelEditing,
-      deleteRowAction: deleteRowAction
-    })) : (0, _lodashEs.map)(filteredRowActions, function (action, index) {
-      return __jsx(ActionButton, (0, _extends2["default"])({
-        key: "".concat(row.id, "-").concat(index)
-      }, commonProps, {
-        action: action,
-        index: index
-      }));
-    }));
-  }, [isRowEditing, editmode, filteredRowActions, saveEditing, cancelEditing, deleteRowAction, listener, selectionHandlers]);
-
-  /**
-   * Creates the action column definition based on configuration
-   */
-  var createActionColumnDef = (0, _react.useCallback)(function (manualActionColumn) {
-    var _getActionColumnSize = (0, _columnBuilder.getActionColumnSize)(editmode),
-      size = _getActionColumnSize.size,
-      minSize = _getActionColumnSize.minSize;
-    if (manualActionColumn) {
-      var _manualActionColumn$s;
-      // Custom action column with manual configuration
-      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);
+  const deleteRowAction = useMemo(
+    () => filteredRowActions.find((action) => action.key === "deleterow" || action.action === "delete"),
+    [filteredRowActions]
+  );
+  const renderActionCell = useCallback(
+    ({ row }) => {
+      var _a, _b;
+      const rowId = (_b = (_a = row == null ? void 0 : row.original) == null ? void 0 : _a._wmTableRowId) != null ? _b : row == null ? void 0 : row.id;
+      const isEditing = isRowEditing(rowId);
+      const commonProps = __spreadValues({
+        rowData: row.original,
+        rowIndex: row.index,
+        rowId,
+        listener
+      }, selectionHandlers);
+      return /* @__PURE__ */ jsx(Box, { component: "span", className: "actions-column", "data-identifier": "actionButtons", children: isEditing && editmode !== "quickedit" ? /* @__PURE__ */ jsx(
+        EditingActionButtons,
+        __spreadProps(__spreadValues({}, commonProps), {
+          onSave: saveEditing,
+          onCancel: cancelEditing,
+          deleteRowAction
+        })
+      ) : map(filteredRowActions, (action, index) => /* @__PURE__ */ jsx(
+        ActionButton,
+        __spreadProps(__spreadValues({}, commonProps), {
+          action,
+          index
+        }),
+        `${row.id}-${index}`
+      )) });
+    },
+    [
+      isRowEditing,
+      editmode,
+      filteredRowActions,
+      saveEditing,
+      cancelEditing,
+      deleteRowAction,
+      listener,
+      selectionHandlers
+    ]
+  );
+  const createActionColumnDef = useCallback(
+    (manualActionColumn) => {
+      var _a;
+      const { size, minSize } = getActionColumnSize(editmode);
+      if (manualActionColumn) {
+        let columnSize = size;
+        if (manualActionColumn.width) {
+          columnSize = parseInt(manualActionColumn.width);
+        } else if ((_a = manualActionColumn.styles) == null ? void 0 : _a.width) {
+          columnSize = parseWidth(manualActionColumn.styles.width);
+        }
+        return {
+          id: "actions",
+          header: manualActionColumn.caption || "Actions",
+          size: columnSize,
+          minSize,
+          enableResizing: true,
+          cell: renderActionCell,
+          enableSorting: manualActionColumn.sortable !== false,
+          meta: __spreadValues({
+            textAlign: manualActionColumn.textalignment,
+            backgroundColor: manualActionColumn.backgroundcolor,
+            className: manualActionColumn.colClass
+          }, manualActionColumn.styles)
+        };
+      } else if (rowActions.length > 0 && (isDynamicTable || editmode !== "none")) {
+        return {
+          id: "actions",
+          header: "Actions",
+          size,
+          minSize,
+          maxSize: size,
+          enableResizing: false,
+          cell: renderActionCell
+        };
       }
-      return {
-        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)
-      };
-    } else if (rowActions.length > 0 && (isDynamicTable || editmode !== "none")) {
-      // Default action column: show when dynamic table OR editmode allows; hide when editmode="none" and static table
-      return {
-        id: "actions",
-        header: "Actions",
-        size: size,
-        minSize: minSize,
-        maxSize: size,
-        enableResizing: false,
-        cell: renderActionCell
-      };
-    }
-    return null;
-  }, [editmode, isDynamicTable, rowActions.length, renderActionCell]);
-
-  /**
-   * Inserts action column at the specified position among data columns
-   */
-  var insertActionColumnAtPosition = (0, _react.useCallback)(function (columnDefs, dataColumns, actionColumnDef, position) {
-    if (position === 0) {
-      // Right after system columns, before data columns
-      columnDefs.push(actionColumnDef);
-      columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns, renderCell)));
-    } else if (position > 0 && position <= dataColumns.length) {
-      // At specific index among data columns
-      columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns.slice(0, position), renderCell)));
-      columnDefs.push(actionColumnDef);
-      columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns.slice(position), renderCell)));
-    } else {
-      // Default: at the end
-      columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns, renderCell)));
-      columnDefs.push(actionColumnDef);
-    }
-  }, [renderCell]);
-
-  // Create TanStack table column definitions
-  var columns = (0, _react.useMemo)(function () {
-    var columnDefs = [];
-
-    // Separate manual action column from regular data 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 enabled
+      return null;
+    },
+    [editmode, isDynamicTable, rowActions.length, renderActionCell]
+  );
+  const insertActionColumnAtPosition = useCallback(
+    (columnDefs, dataColumns, actionColumnDef, position) => {
+      if (position === 0) {
+        columnDefs.push(actionColumnDef);
+        columnDefs.push(...createDataColumns(dataColumns, renderCell));
+      } else if (position > 0 && position <= dataColumns.length) {
+        columnDefs.push(...createDataColumns(dataColumns.slice(0, position), renderCell));
+        columnDefs.push(actionColumnDef);
+        columnDefs.push(...createDataColumns(dataColumns.slice(position), renderCell));
+      } else {
+        columnDefs.push(...createDataColumns(dataColumns, renderCell));
+        columnDefs.push(actionColumnDef);
+      }
+    },
+    [renderCell]
+  );
+  const columns = useMemo(() => {
+    const columnDefs = [];
+    const manualActionColumn = visibleColumns.find((col) => col.binding === "rowOperations");
+    const dataColumns = visibleColumns.filter((col) => col.binding !== "rowOperations");
     if (showrowindex) {
-      columnDefs.push((0, _columnBuilder.createRowIndexColumn)());
+      columnDefs.push(createRowIndexColumn());
     }
-
-    // Create action column definition
-    var actionColumnDef = createActionColumnDef(manualActionColumn);
+    const actionColumnDef = createActionColumnDef(manualActionColumn);
     if (actionColumnDef) {
-      // Determine position for action column
-      var position = (manualActionColumn === null || manualActionColumn === void 0 ? void 0 : manualActionColumn.rowactionsposition) !== undefined ? Number(manualActionColumn.rowactionsposition) : -1;
+      const position = (manualActionColumn == null ? void 0 : manualActionColumn.rowactionsposition) !== void 0 ? Number(manualActionColumn.rowactionsposition) : -1;
       insertActionColumnAtPosition(columnDefs, dataColumns, actionColumnDef, position);
     } else {
-      // No action column, just add data columns
-      columnDefs.push.apply(columnDefs, (0, _toConsumableArray2["default"])((0, _columnBuilder.createDataColumns)(dataColumns, renderCell)));
+      columnDefs.push(...createDataColumns(dataColumns, renderCell));
     }
-
-    // Apply width distribution (skip during active resizing to prevent loops)
-    return isResizing ? columnDefs : (0, _columnWidthDistribution.distributeColumnWidths)(columnDefs);
-  }, [visibleColumns, columnsVersion, showrowindex, createActionColumnDef, insertActionColumnAtPosition, renderCell, isResizing]);
+    return isResizing ? columnDefs : distributeColumnWidths(columnDefs);
+  }, [
+    visibleColumns,
+    columnsVersion,
+    showrowindex,
+    createActionColumnDef,
+    insertActionColumnAtPosition,
+    renderCell,
+    isResizing
+  ]);
   return {
-    columns: columns,
-    wmTableColumns: wmTableColumns,
-    rowActions: rowActions
+    columns,
+    wmTableColumns,
+    rowActions
   };
-};
+};
+export {
+  useTableColumns
+};