@wavemaker/react-runtime 11.14.3-rc.6401 → 11.15.0-2.247

package/components/data/table/live-table/index.js

@@ -14,6 +14,7 @@ var _withBaseWrapper = _interopRequireDefault(require("../../../../higherOrder/w
 var _dialog = _interopRequireDefault(require("../../../dialogs/dialog"));
 var _dialogBody = require("@wavemaker/react-runtime/components/dialogs/dialog-body");
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _WidgetProvider = require("@wavemaker/react-runtime/context/WidgetProvider");
 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; }
@@ -28,6 +29,9 @@ var WmLiveTable = function WmLiveTable(props) {
   var _useState3 = (0, _react.useState)(false),
     isAddingNewRow = _useState3[0],
     setIsAddingNewRow = _useState3[1];
+  var _useState4 = (0, _react.useState)(0),
+    formKey = _useState4[0],
+    setFormKey = _useState4[1]; // Key to force form re-creation
   var isDialogLayout = props.formlayout === "dialog";
   var _props$formlayout = props.formlayout,
     formlayout = _props$formlayout === void 0 ? "form" : _props$formlayout,
@@ -60,6 +64,8 @@ var WmLiveTable = function WmLiveTable(props) {
     }, [props.children]),
     tableChild = _useMemo.tableChild,
     formChild = _useMemo.formChild;
+  var tableWidget = (0, _WidgetProvider.useWidgetProxy)((tableChild === null || tableChild === void 0 ? void 0 : tableChild.props.name) || "");
+  var formWidget = (0, _WidgetProvider.useWidgetProxy)((formChild === null || formChild === void 0 ? void 0 : formChild.props.name) || "");
   var handleOpenDialog = (0, _react.useCallback)(function () {
     setIsDialogOpen(true);
   }, []);
@@ -71,18 +77,16 @@ var WmLiveTable = function WmLiveTable(props) {
 
   // Helper to get form widget - always get fresh value from listener
   var getFormWidget = (0, _react.useCallback)(function () {
-    var _listener$Widgets;
     // Always get fresh value from listener to ensure we have the latest registered methods
-    return listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[formChild === null || formChild === void 0 ? void 0 : formChild.props.name];
+    return formWidget;
   }, [formChild === null || formChild === void 0 ? void 0 : formChild.props.name]);
   var getTableWidget = (0, _react.useCallback)(function () {
-    var _listener$Widgets2;
-    return listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[tableChild === null || tableChild === void 0 ? void 0 : tableChild.props.name];
-  }, [tableChild === null || tableChild === void 0 ? void 0 : tableChild.props.name]);
+    return tableWidget;
+  }, [tableWidget]);
 
   // Expose LiveTable methods through its own listener
   (0, _react.useEffect)(function () {
-    if (!(listener !== null && listener !== void 0 && listener.onChange) || !(formChild !== null && formChild !== void 0 && formChild.props.name)) return;
+    if (!(listener !== null && listener !== void 0 && listener.onChange) || !(formChild !== null && formChild !== void 0 && formChild.props.name) || !tableWidget) return;
     var liveTableContext = {
       addNewRow: function addNewRow(event, widget, row) {
         var formWidget = getFormWidget();
@@ -91,11 +95,35 @@ var WmLiveTable = function WmLiveTable(props) {
         // Set flag to indicate we're adding a new row
         setIsAddingNewRow(true);
         if (isDialogLayout) {
-          // Clear form data for new row
+          var _listener$Widgets;
+          // Clear form data for new row and increment key to force form re-creation
           setFormData({});
+          setFormKey(function (prev) {
+            return prev + 1;
+          }); // Force new form instance
+          // Clear the global widget registry to prevent stale form values
+          if (formChild !== null && formChild !== void 0 && formChild.props.name && listener !== null && listener !== void 0 && (_listener$Widgets = listener.Widgets) !== null && _listener$Widgets !== void 0 && _listener$Widgets[formChild.props.name]) {
+            listener.Widgets[formChild.props.name].formdata = {};
+            // Clear formfields to reset individual field values
+            if (listener.Widgets[formChild.props.name].formfields) {
+              Object.keys(listener.Widgets[formChild.props.name].formfields).forEach(function (key) {
+                var field = listener.Widgets[formChild.props.name].formfields[key];
+                if (field) {
+                  field.datavalue = field.defaultvalue || "";
+                  field.value = field.defaultvalue || "";
+                }
+              });
+            }
+          }
           handleOpenDialog();
         } else if (formlayout === "form") {
-          // For non-dialog mode, just reset the form
+          // For non-dialog mode, clear form data by setting empty object
+          setFormData({});
+          // Also update the form widget's formdata in context
+          if (formWidget && formChild !== null && formChild !== void 0 && formChild.props.name && listener !== null && listener !== void 0 && listener.Widgets) {
+            listener.Widgets[formChild.props.name].formdata = {};
+          }
+          // Reset the form
           formWidget === null || formWidget === void 0 || formWidget["new"]();
         } else if (formlayout === "inline" || formlayout === "quickedit") {
           tableWidget === null || tableWidget === void 0 || tableWidget.addNewRow();
@@ -111,8 +139,8 @@ var WmLiveTable = function WmLiveTable(props) {
           setFormData(row);
           handleOpenDialog();
         } else if (formlayout === "form") {
-          var formWidget = getFormWidget();
-          formWidget === null || formWidget === void 0 || formWidget.edit(row);
+          var _formWidget = getFormWidget();
+          _formWidget === null || _formWidget === void 0 || _formWidget.edit(row);
         } else if (formlayout === "inline" || formlayout === "quickedit") {
           tableWidget === null || tableWidget === void 0 || tableWidget.editRow(event, widget, row);
         }
@@ -129,7 +157,7 @@ var WmLiveTable = function WmLiveTable(props) {
   // Create stable callbacks for form handlers
   var handleFormSuccess = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
     var _formChild$props, _formChild$props$onSu;
-    var _formWidget$setShowVi, formWidget, tableWidget;
+    var _formWidget2$setShowV, _formWidget2, tableWidget;
     return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -137,8 +165,8 @@ var WmLiveTable = function WmLiveTable(props) {
             handleCloseDialog();
           } else {
             // Set form to view mode after successful submission
-            formWidget = getFormWidget();
-            formWidget === null || formWidget === void 0 || (_formWidget$setShowVi = formWidget.setShowViewMode) === null || _formWidget$setShowVi === void 0 || _formWidget$setShowVi.call(formWidget, true);
+            _formWidget2 = getFormWidget();
+            _formWidget2 === null || _formWidget2 === void 0 || (_formWidget2$setShowV = _formWidget2.setShowViewMode) === null || _formWidget2$setShowV === void 0 || _formWidget2$setShowV.call(_formWidget2, true);
           }
           tableWidget = getTableWidget();
           if (!(tableWidget && tableWidget.datasource)) {
@@ -179,10 +207,10 @@ var WmLiveTable = function WmLiveTable(props) {
     // Call original cancel if it exists
     formChild === null || formChild === void 0 || (_formChild$props2 = formChild.props) === null || _formChild$props2 === void 0 || (_formChild$props2$can = _formChild$props2.cancel) === null || _formChild$props2$can === void 0 || _formChild$props2$can.call(_formChild$props2);
     if (formlayout === "form") {
-      var _formWidget$setShowVi2;
+      var _formWidget3$setShowV;
       // Set form to view mode after successful submission
-      var formWidget = getFormWidget();
-      formWidget === null || formWidget === void 0 || (_formWidget$setShowVi2 = formWidget.setShowViewMode) === null || _formWidget$setShowVi2 === void 0 || _formWidget$setShowVi2.call(formWidget, true);
+      var _formWidget3 = getFormWidget();
+      _formWidget3 === null || _formWidget3 === void 0 || (_formWidget3$setShowV = _formWidget3.setShowViewMode) === null || _formWidget3$setShowV === void 0 || _formWidget3$setShowV.call(_formWidget3, true);
     }
   }, [handleCloseDialog, formChild === null || formChild === void 0 ? void 0 : formChild.props, formlayout, getFormWidget]);
 
@@ -193,17 +221,18 @@ var WmLiveTable = function WmLiveTable(props) {
       isLayoutDialog: isDialogLayout,
       onSuccess: handleFormSuccess,
       cancel: handleFormCancel
-    }, isDialogLayout && formData !== null && {
+    }, formData !== null && {
       formdata: formData
     });
     return /*#__PURE__*/(0, _react.cloneElement)(formChild, newProps);
-  }, [formChild, isDialogLayout, handleFormSuccess, handleFormCancel, formData]);
+  }, [formChild, isDialogLayout, handleFormSuccess, handleFormCancel, formData, formKey]);
   var enhancedTableChild = (0, _react.useMemo)(function () {
     if (!tableChild || ! /*#__PURE__*/(0, _react.isValidElement)(tableChild)) return tableChild;
     return /*#__PURE__*/(0, _react.cloneElement)(tableChild, _objectSpread(_objectSpread({}, tableChild.props), {}, {
-      formName: formChild === null || formChild === void 0 ? void 0 : formChild.props.name
+      formName: formChild === null || formChild === void 0 ? void 0 : formChild.props.name,
+      hidden: props.hidden
     }));
-  }, [tableChild]);
+  }, [tableChild, props.hidden]);
 
   // Render based on formlayout
   if (isDialogLayout) {
@@ -220,13 +249,16 @@ var WmLiveTable = function WmLiveTable(props) {
     }, __jsx(_dialogBody.WmDialogBody, {
       name: "popup-body",
       listener: {}
-    }, enhancedFormChild)));
+    }, __jsx("div", {
+      key: "form-wrapper-".concat(formKey)
+    }, enhancedFormChild))));
   }
 
   // Default: render as form
   return __jsx(_Box["default"], {
     component: "div",
-    className: "app-livegrid"
+    className: "app-livegrid",
+    hidden: props.hidden
   }, enhancedTableChild, enhancedFormChild);
 };
 var _default = exports["default"] = (0, _withBaseWrapper["default"])(WmLiveTable);

package/components/data/table/table-action/index.js

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
-var _withBaseWrapper = _interopRequireDefault(require("../../../../higherOrder/withBaseWrapper"));
+var _withBaseWrapper = _interopRequireDefault(require("@wavemaker/react-runtime/higherOrder/withBaseWrapper"));
 var _excluded = ["widgetType", "displayName", "iconclass", "action", "position", "shortcutkey", "listener", "children", "variant", "color", "onClick"];
 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; }

package/components/data/table/table-group/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var __jsx = _react["default"].createElement;
+/**
+ * WmTableGroup component for grouping table columns under a common header.
+ * Supports nested groups to create multi-level headers.
+ *
+ * @example
+ * <WmTableGroup name="personalInfo" caption="Personal Information">
+ *   <WmTableColumn binding="firstName" caption="First Name" />
+ *   <WmTableColumn binding="lastName" caption="Last Name" />
+ * </WmTableGroup>
+ */
+function WmTableGroup(_ref) {
+  var children = _ref.children;
+  // This component is just a marker component for defining table structure
+  // The actual rendering logic is handled by the table header component
+  return __jsx(_react["default"].Fragment, null, children);
+}
+var _default = exports["default"] = WmTableGroup;

package/components/data/table/table-row-action/index.js

@@ -5,16 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WmTableRowAction = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _material = require("@mui/material");
 var _anchor = require("@wavemaker/react-runtime/components/basic/anchor");
+var _button = require("@wavemaker/react-runtime/components/form/button");
 var _excluded = ["displayName", "title", "iconclass", "action", "row", "rowIndex", "listener", "children", "onClick", "widgettype", "show"];
 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; }
 var WmTableRowActionComponent = function WmTableRowActionComponent(_ref) {
   var displayName = _ref.displayName,
     title = _ref.title,
@@ -29,11 +26,29 @@ var WmTableRowActionComponent = function WmTableRowActionComponent(_ref) {
     _ref$show = _ref.show,
     show = _ref$show === void 0 ? true : _ref$show,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var handleClick = function handleClick(event) {
+  // Track if mousedown already triggered the action to prevent double-firing
+  var actionTriggeredRef = _react["default"].useRef(false);
+
+  // Use onMouseDown to trigger action BEFORE blur event fires
+  // This prevents the click from being lost when input has focus
+  var handleMouseDown = function handleMouseDown(event) {
     event.preventDefault();
     event.stopPropagation();
-    if (onClick) {
-      // Pass rowData as part of widget parameter
+    if (onClick && !actionTriggeredRef.current) {
+      actionTriggeredRef.current = true;
+      onClick(event, {}, row);
+      // Reset the flag after a short delay to allow subsequent clicks
+      setTimeout(function () {
+        actionTriggeredRef.current = false;
+      }, 100);
+    }
+  };
+  var handleClick = function handleClick(event, widget, newVal, oldVal) {
+    event === null || event === void 0 || event.preventDefault();
+    event === null || event === void 0 || event.stopPropagation();
+
+    // Only trigger if mousedown didn't already trigger (fallback for edge cases)
+    if (onClick && !actionTriggeredRef.current) {
       onClick(event, {}, row);
     }
   };
@@ -47,26 +62,25 @@ var WmTableRowActionComponent = function WmTableRowActionComponent(_ref) {
       name: props.name || displayName,
       listener: listener,
       onClick: handleClick,
+      onMouseDown: handleMouseDown,
       iconclass: iconclass,
       show: show.toString(),
       className: "wm-table-row-action ".concat(props.className || "")
     }));
   }
-  return __jsx(_material.Button, {
+  return __jsx(_button.WmButton, {
     variant: "text",
     size: "small",
     className: "wm-table-row-action ".concat(props.className || ""),
     onClick: handleClick,
-    title: title,
-    startIcon: iconclass ? __jsx("i", {
-      className: iconclass
-    }) : undefined,
-    sx: _objectSpread(_objectSpread({}, props.styles), {}, {
-      padding: "0.25rem 0.5rem",
-      marginRight: "0.25rem",
-      minWidth: "auto",
-      textTransform: "none"
-    })
+    onMouseDown: handleMouseDown,
+    title: title
+    // startIcon={iconclass ? <i className={iconclass} /> : undefined}
+    ,
+    styles: props.styles,
+    name: props.name,
+    listener: props.listener,
+    iconclass: iconclass
   }, displayName);
 };
 WmTableRowActionComponent.displayName = "WmTableRowAction";

package/components/data/table/utils/buildSelectionColumns.js

@@ -8,12 +8,10 @@ exports.buildSelectionColumns = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
 var _index = require("./index");
-var _lodashEs = require("lodash-es");
 var __jsx = _react["default"].createElement;
 var buildSelectionColumns = exports.buildSelectionColumns = function buildSelectionColumns(_ref) {
   var useRadioSelect = _ref.useRadioSelect,
     useMultiSelect = _ref.useMultiSelect,
-    selectedRowId = _ref.selectedRowId,
     selectedRowIds = _ref.selectedRowIds,
     handleRadioSelection = _ref.handleRadioSelection,
     handleMultiSelection = _ref.handleMultiSelection,
@@ -42,12 +40,10 @@ var buildSelectionColumns = exports.buildSelectionColumns = function buildSelect
         });
       },
       cell: function cell(_ref2) {
-        var _table$getState$rowSe;
-        var row = _ref2.row,
-          table = _ref2.table;
+        var row = _ref2.row;
         var rowId = row.id;
-        // Get selection state from table's rowSelection state
-        var isSelected = ((_table$getState$rowSe = table.getState().rowSelection) === null || _table$getState$rowSe === void 0 ? void 0 : _table$getState$rowSe[rowId]) || false;
+        // Use TanStack Table's built-in selection state for reactive cell updates
+        var isSelected = row.getIsSelected();
         return __jsx(_material.Box, {
           sx: {
             display: "flex",
@@ -89,14 +85,11 @@ var buildSelectionColumns = exports.buildSelectionColumns = function buildSelect
   if (useMultiSelect) {
     return {
       id: "multiSelect",
-      header: function header(_ref3) {
-        var table = _ref3.table;
-        // Get the current data and selection state from the table instance
-        var currentData = table.options.data || [];
-        var rowSelection = table.getState().rowSelection || {};
-        var selectedCount = (0, _lodashEs.size)((0, _lodashEs.pickBy)(rowSelection));
-        var isAllSelected = selectedCount > 0 && selectedCount === currentData.length;
-        var isIndeterminate = selectedCount > 0 && selectedCount < currentData.length;
+      header: function header() {
+        // Use selectedRowIds and internalDataset directly for reliable state
+        var selectedCount = selectedRowIds.length;
+        var isAllSelected = selectedCount > 0 && selectedCount === internalDataset.length;
+        var isIndeterminate = selectedCount > 0 && selectedCount < internalDataset.length;
         return __jsx(_material.Box, {
           sx: {
             display: "flex",
@@ -121,13 +114,11 @@ var buildSelectionColumns = exports.buildSelectionColumns = function buildSelect
           className: "caption"
         })));
       },
-      cell: function cell(_ref4) {
-        var _table$getState$rowSe2;
-        var row = _ref4.row,
-          table = _ref4.table;
+      cell: function cell(_ref3) {
+        var row = _ref3.row;
         var rowId = row.id;
-        // Get selection state from table's rowSelection state
-        var isSelected = ((_table$getState$rowSe2 = table.getState().rowSelection) === null || _table$getState$rowSe2 === void 0 ? void 0 : _table$getState$rowSe2[rowId]) || false;
+        // Use TanStack Table's built-in selection state for reactive cell updates
+        var isSelected = row.getIsSelected();
         return __jsx(_material.Box, {
           sx: {
             display: "flex",

package/components/data/table/utils/columnBuilder.js

@@ -20,9 +20,9 @@ var createRowIndexColumn = exports.createRowIndexColumn = function createRowInde
   return {
     id: "rowIndex",
     header: "S. No.",
-    size: 60,
-    minSize: 60,
-    maxSize: 60,
+    size: 70,
+    minSize: 70,
+    maxSize: 70,
     enableResizing: false,
     cell: function cell(_ref) {
       var row = _ref.row,
@@ -68,7 +68,7 @@ var createDataColumn = exports.createDataColumn = function createDataColumn(wmCo
   } else if ((_wmColumn$styles = wmColumn.styles) !== null && _wmColumn$styles !== void 0 && _wmColumn$styles.width) {
     columnSize = (0, _.parseWidth)(wmColumn.styles.width);
   }
-  return {
+  return _objectSpread(_objectSpread({
     accessorKey: wmColumn.field,
     // Use sortby field for sorting if provided, otherwise use the display field
     // Supports nested properties like "department.store.employee"
@@ -77,12 +77,13 @@ var createDataColumn = exports.createDataColumn = function createDataColumn(wmCo
     } : undefined,
     header: wmColumn.caption,
     size: columnSize,
-    minSize: 50,
-    // Minimum column width in pixels
-    maxSize: columnSize,
-    // Set maxSize if we have a specific width to maintain the width
-    enableResizing: !columnSize,
-    // Disable resizing if width is specified
+    minSize: 50
+  }, columnSize ? {} : {
+    maxSize: 500
+  }), {}, {
+    // Only set maxSize for auto-sized columns
+    enableResizing: true,
+    // Enable resizing for all data columns
     cell: function cell(_ref2) {
       var row = _ref2.row;
       return renderCell(wmColumn, row);
@@ -92,7 +93,8 @@ var createDataColumn = exports.createDataColumn = function createDataColumn(wmCo
     meta: _objectSpread(_objectSpread({
       textAlign: wmColumn.textalignment,
       backgroundColor: wmColumn.backgroundcolor,
-      className: wmColumn.colClass
+      className: wmColumn === null || wmColumn === void 0 ? void 0 : wmColumn.className,
+      colClass: wmColumn.colClass
     }, wmColumn.styles), {}, {
       // Include widget types for filter rendering
       widgetType: wmColumn.widgetType,
@@ -100,9 +102,11 @@ var createDataColumn = exports.createDataColumn = function createDataColumn(wmCo
       editinputtype: wmColumn.editinputtype,
       // Include column type for filtering
       type: wmColumn.type || wmColumn.columntype || "string",
-      searchable: wmColumn.searchable !== false
+      searchable: wmColumn.searchable !== false,
+      // Custom cell renderer for optimized rendering in MemoizedRowCells
+      renderCellContent: wmColumn === null || wmColumn === void 0 ? void 0 : wmColumn.renderCellContent
     })
-  };
+  });
 };
 
 /**
@@ -119,7 +123,7 @@ var createDataColumns = exports.createDataColumns = function createDataColumns(w
 };
 
 /**
- * Creates save/cancel action buttons for editing mode
+ * Creates save/cancel/delete action buttons for editing mode
  */
 var createEditingActionButtons = exports.createEditingActionButtons = function createEditingActionButtons() {
   return [{
@@ -144,6 +148,17 @@ var createEditingActionButtons = exports.createEditingActionButtons = function c
     action: "cancel",
     show: true,
     widgettype: "button"
+  }, {
+    key: "delete-edit",
+    name: "delete-row",
+    className: "delete row-action-button btn app-button btn-transparent delete-row-button",
+    dataActionKey: "deleteRow",
+    displayName: "",
+    title: "Delete",
+    iconclass: "wi wi-trash",
+    action: "delete",
+    show: true,
+    widgettype: "button"
   }];
 };
 

package/components/data/table/utils/columnProxy.js

@@ -1,10 +1,15 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createColumnsProxy = createColumnsProxy;
 exports.keyMap = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+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; }
 var keyMap = exports.keyMap = {
   caption: "header",
   name: "accessorKey",
@@ -15,13 +20,36 @@ var keyMap = exports.keyMap = {
   colClass: "meta.className",
   style: "meta"
 };
-function createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion) {
+
+// Types for summary row data
+
+// Interface for aggregate methods
+
+// Interface for enhanced column with aggregate and summary methods
+
+// Function to create aggregate methods for a column
+
+function createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef) {
   var proxy = {};
   wmTableColumns.forEach(function (col, idx) {
     var key = col.field;
     if (key) {
+      // Get column's show property (default to true if not specified)
+      var columnShow = col.show !== undefined ? col.show : true;
+
+      // Create setSummaryRowData method
+      var setSummaryRowData = function setSummaryRowData(data) {
+        var newData = Array.isArray(data) ? data : [data];
+        invokeSummaryRowData(key, newData, setSummaryRowDef, columnShow);
+      };
+
+      // Create the proxy for this column
       proxy[key] = new Proxy(col, {
         get: function get(target, prop) {
+          // Return setSummaryRowData method
+          if (prop === "setSummaryRowData") {
+            return setSummaryRowData;
+          }
           return target[prop];
         },
         set: function set(target, prop, value) {
@@ -45,4 +73,43 @@ function createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion) {
     }
   });
   return proxy;
+}
+
+// Helper function to invoke summary row data with Promise handling
+function invokeSummaryRowData(columnKey, data, setSummaryRowDef, show) {
+  if (!setSummaryRowDef) return;
+  data.forEach(function (item, index) {
+    // Handle Promise values directly
+    if (item instanceof Promise) {
+      item.then(function (resolvedValue) {
+        setSummaryRowDef(columnKey, resolvedValue, index, true, show);
+      })["catch"](function (error) {
+        console.error("Error resolving summary row data for column ".concat(columnKey, ":"), error);
+        setSummaryRowDef(columnKey, "", index, true, show);
+      });
+    }
+    // Handle objects with Promise values
+    else if (item && (0, _typeof2["default"])(item) === "object" && "value" in item) {
+      var itemObj = item;
+      if (itemObj.value instanceof Promise) {
+        itemObj.value.then(function (resolvedValue) {
+          setSummaryRowDef(columnKey, _objectSpread(_objectSpread({}, itemObj), {}, {
+            value: resolvedValue
+          }), index, true, show);
+        })["catch"](function (error) {
+          console.error("Error resolving summary row data for column ".concat(columnKey, ":"), error);
+          setSummaryRowDef(columnKey, _objectSpread(_objectSpread({}, itemObj), {}, {
+            value: ""
+          }), index, true, show);
+        });
+      } else {
+        // Object with non-Promise value
+        setSummaryRowDef(columnKey, item, index, false, show);
+      }
+    }
+    // Handle regular values (string, number, etc.)
+    else {
+      setSummaryRowDef(columnKey, item, index, false, show);
+    }
+  });
 }

package/components/data/table/utils/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TABLE_MESSAGES = exports.TABLE_DATA_STATES = exports.TABLE_CSS_CLASSES = exports.INTERACTIVE_TAG_NAMES = exports.INTERACTIVE_ROLES = exports.INTERACTIVE_DATA_ROLES = exports.INTERACTIVE_CLASSES = exports.DYNAMIC_COLUMNS_CONFIG = void 0;
+exports.UNSUPPORTED_STATE_PERSISTENCE_TYPES = exports.TABLE_MESSAGES = exports.TABLE_DATA_STATES = exports.TABLE_CSS_CLASSES = exports.INTERACTIVE_TAG_NAMES = exports.INTERACTIVE_ROLES = exports.INTERACTIVE_DATA_ROLES = exports.INTERACTIVE_CLASSES = exports.DYNAMIC_COLUMNS_CONFIG = void 0;
 // CSS Class Names Constants
 var TABLE_CSS_CLASSES = exports.TABLE_CSS_CLASSES = {
   tableRow: "app-datagrid-row",
@@ -77,4 +77,8 @@ var DYNAMIC_COLUMNS_CONFIG = exports.DYNAMIC_COLUMNS_CONFIG = {
   maxColumns: 10,
   // Maximum number of columns to generate from data (matching Angular behavior)
   sampleSize: 3 // Number of rows to sample for column detection
-};
+};
+
+// Navigation types that don't support state persistence
+// These navigation types accumulate data and don't maintain traditional pagination state
+var UNSUPPORTED_STATE_PERSISTENCE_TYPES = exports.UNSUPPORTED_STATE_PERSISTENCE_TYPES = ["Scroll", "On-Demand", "Inline"];