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

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

@@ -216,4 +216,16 @@ Object.keys(_useDynamicColumns).forEach(function (key) {
       return _useDynamicColumns[key];
     }
   });
+});
+var _useCustomExpressionColumns = require("./useCustomExpressionColumns");
+Object.keys(_useCustomExpressionColumns).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useCustomExpressionColumns[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useCustomExpressionColumns[key];
+    }
+  });
 });

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

@@ -0,0 +1,16 @@
+import { type MutableRefObject } from "react";
+import { type CustomExpressionColumnSource, type CustomExpressionComponent } from "@/utils/custom-expression";
+export type UseCustomExpressionColumnsArgs = {
+    columnSource: CustomExpressionColumnSource;
+    listenerRef: MutableRefObject<unknown>;
+};
+/**
+ * Syncs parsed `customExpression` column renderers with the table column proxy:
+ * signature dedupe, stale async-merge guard, revision bumps for memoized cells.
+ */
+export declare function useCustomExpressionColumns({ columnSource, listenerRef, }: UseCustomExpressionColumnsArgs): {
+    customColumns: Record<string, CustomExpressionComponent>;
+    customColumnsRevision: number;
+    customExpressionSignature: string;
+    mergeParsedCustomColumns: () => Promise<void>;
+};

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCustomExpressionColumns = useCustomExpressionColumns;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
+var _customExpression = require("../../../../utils/custom-expression");
+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; }
+/**
+ * Syncs parsed `customExpression` column renderers with the table column proxy:
+ * signature dedupe, stale async-merge guard, revision bumps for memoized cells.
+ */
+function useCustomExpressionColumns(_ref) {
+  var columnSource = _ref.columnSource,
+    listenerRef = _ref.listenerRef;
+  var mergeGenerationRef = (0, _react.useRef)(0);
+  var lastMergedSignatureRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)({}),
+    customColumns = _useState[0],
+    setCustomColumns = _useState[1];
+  var _useState2 = (0, _react.useState)(0),
+    customColumnsRevision = _useState2[0],
+    setCustomColumnsRevision = _useState2[1];
+  var customExpressionSignature = (0, _react.useMemo)(function () {
+    return (0, _customExpression.buildCustomExpressionSignature)(columnSource);
+  }, [columnSource]);
+  var mergeParsedCustomColumns = (0, _react.useCallback)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var customExprKeys, sig, mergeGen, newColumns;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          customExprKeys = Object.keys(columnSource).filter(function (key) {
+            return columnSource[key].customExpression;
+          });
+          if (!(customExprKeys.length === 0)) {
+            _context.next = 4;
+            break;
+          }
+          lastMergedSignatureRef.current = null;
+          return _context.abrupt("return");
+        case 4:
+          sig = customExpressionSignature;
+          if (!(lastMergedSignatureRef.current === sig)) {
+            _context.next = 7;
+            break;
+          }
+          return _context.abrupt("return");
+        case 7:
+          mergeGen = ++mergeGenerationRef.current;
+          _context.next = 10;
+          return (0, _customExpression.buildCustomExpressionComponentsMap)({
+            columnSource: columnSource,
+            listener: listenerRef.current
+          });
+        case 10:
+          newColumns = _context.sent;
+          if (!(mergeGen !== mergeGenerationRef.current)) {
+            _context.next = 13;
+            break;
+          }
+          return _context.abrupt("return");
+        case 13:
+          lastMergedSignatureRef.current = sig;
+          setCustomColumns(function (prev) {
+            return _objectSpread(_objectSpread({}, prev), newColumns);
+          });
+          setCustomColumnsRevision(function (r) {
+            return r + 1;
+          });
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [columnSource, customExpressionSignature, listenerRef]);
+  return {
+    customColumns: customColumns,
+    customColumnsRevision: customColumnsRevision,
+    customExpressionSignature: customExpressionSignature,
+    mergeParsedCustomColumns: mergeParsedCustomColumns
+  };
+}

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

@@ -29,7 +29,7 @@ var _hasTableColumnsInChildren = function hasTableColumnsInChildren(children) {
   _react["default"].Children.forEach(children, function (child) {
     if (!(child !== null && child !== void 0 && child.props)) return;
     var name = child.props.name || "";
-    if (name.includes("wm_table_column")) {
+    if (name.includes("wm_table_column") || name.includes("col_")) {
       found = true;
     } else if (name.includes("group")) {
       if (_hasTableColumnsInChildren(child.props.children)) {

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

@@ -61,6 +61,7 @@ export declare const useResponsiveColumns: (columns: WmTableColumnProps[]) => {
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

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

@@ -1,2 +1,2 @@
 import { UseRowSelectionProps, UseRowSelectionReturn } from "../props";
-export declare const useRowSelection: ({ radioselect, multiselect, gridfirstrowselect, internalDataset, cellState, name, statehandler, initialActualPageSize, getTableState: getTableCurrentState, onRowselect, onRowdeselect, listener, navigation, }: UseRowSelectionProps) => UseRowSelectionReturn;
+export declare const useRowSelection: ({ radioselect, multiselect, gridfirstrowselect, internalDataset, cellState, name, statehandler, initialActualPageSize, getTableState: getTableCurrentState, onRowselect, onRowdeselect, listener, navigation, onSyncSelectedItems, }: UseRowSelectionProps) => UseRowSelectionReturn;

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

@@ -27,7 +27,8 @@ var useRowSelection = exports.useRowSelection = function useRowSelection(_ref) {
     onRowdeselect = _ref.onRowdeselect,
     listener = _ref.listener,
     _ref$navigation = _ref.navigation,
-    navigation = _ref$navigation === void 0 ? "Basic" : _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 () {
@@ -133,10 +134,13 @@ var useRowSelection = exports.useRowSelection = function useRowSelection(_ref) {
   // 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]);
+  }, [getWidgetRef, onSyncSelectedItems, cellState]);
 
   // Handle selection for radio mode (replaces previous selection)
   var handleRadioSelection = (0, _react.useCallback)(function (rowId, rowData) {
@@ -180,16 +184,33 @@ var useRowSelection = exports.useRowSelection = function useRowSelection(_ref) {
 
   // 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
-      var allRowIds = (0, _selectionUtils.getRowIdsFromDataset)(datasetRef.current);
-      _selectionUtils.selectionStateHelpers.setAllSelection(cellState, allRowIds);
+      newIds = (0, _selectionUtils.getRowIdsFromDataset)(datasetRef.current);
+      _selectionUtils.selectionStateHelpers.setAllSelection(cellState, newIds);
     } else {
       _selectionUtils.selectionStateHelpers.clearSelection(cellState);
     }
     forceUpdate({});
     saveStateImmediate();
-  }, [cellState, 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) {

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

@@ -95,7 +95,8 @@ var useTableInitialization = exports.useTableInitialization = function useTableI
             // Only update form data, preserve current view/edit mode
             formWidget === null || formWidget === void 0 || (_formWidget$setFormDa2 = formWidget.setFormData) === null || _formWidget$setFormDa2 === void 0 || _formWidget$setFormDa2.call(formWidget, getRow);
           } else {
-            formWidget === null || formWidget === void 0 || formWidget.edit(getRow);
+            var _formWidget$edit;
+            formWidget === null || formWidget === void 0 || (_formWidget$edit = formWidget.edit) === null || _formWidget$edit === void 0 || _formWidget$edit.call(formWidget, getRow);
           }
         }, 10);
       }

package/components/data/table/index.d.ts

@@ -89,6 +89,7 @@ declare const WmTableStandalone: React.ComponentType<{
     binddataset?: string;
     onSuccess?: (operation: string, data: any) => void;
     onError?: (event: any, widget: any, data: any, operation: string) => void;
+    customExpressionColumns?: Record<string, (rowData: any) => React.ReactNode>;
     standalone?: boolean;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;
@@ -115,6 +116,7 @@ declare const WmTableStandalone: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;
@@ -224,6 +226,7 @@ declare const WmTable: React.ComponentType<{
     binddataset?: string;
     onSuccess?: (operation: string, data: any) => void;
     onError?: (event: any, widget: any, data: any, operation: string) => void;
+    customExpressionColumns?: Record<string, (rowData: any) => React.ReactNode>;
     standalone?: boolean;
     ref?: React.RefObject<HTMLElement> | React.RefObject<null>;
     animation?: string;
@@ -250,6 +253,7 @@ declare const WmTable: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/data/table/index.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof3 = require("@babel/runtime/helpers/typeof");
@@ -32,7 +33,7 @@ var _types = require("@wavemaker-ai/react-runtime/components/data/types");
 var _useEditedRows = require("./hooks/use-edited-rows");
 var _scriptPageSizeBroadcast = require("./utils/script-page-size-broadcast");
 var _withStandalone = _interopRequireDefault(require("@wavemaker-ai/react-runtime/higherOrder/withStandalone"));
-var _excluded = ["name", "dataset", "navigation", "children", "listener", "pagesize", "navigationalign", "showrecordcount", "maxsize", "boundarylinks", "allowpagesizechange", "pagesizeoptions", "formposition", "editmode", "spacing", "title", "subheading", "iconclass", "exportOptions", "shownavigation", "onDemandLoad", "showrowindex", "showheader", "enablesort", "enablecolumnselection", "onColumnselect", "onColumndeselect", "radioselect", "radioselecttitle", "radioselectarialabel", "multiselect", "multiselecttitle", "multiselectarialabel", "gridfirstrowselect", "isrowselectable", "rowClass", "deleteoktext", "deletecanceltext", "confirmdelete", "errormessage", "nodatamessage", "loadingdatamsg", "insertmessage", "updatemessage", "deletemessage", "ondemandmessage", "viewlessmessage", "showviewlessbutton", "onRowDelete", "onRowUpdate", "datasource", "binddataset", "onSuccess", "onError", "onRowinsert", "onRowupdate", "onRowdelete", "onRowclick", "onSort", "onBeforerowdelete", "onBeforefilter", "onHeaderclick", "onRowselect", "onRowdeselect", "onSetrecord", "statehandler", "formName", "parentForm", "filtermode", "filteronkeypress", "searchlabel", "onBeforedatarender", "onDatarender", "className", "exportformat", "exportdatasize", "onBeforeexport", "onAfterexport"];
+var _excluded = ["name", "dataset", "navigation", "children", "listener", "pagesize", "navigationalign", "showrecordcount", "maxsize", "boundarylinks", "allowpagesizechange", "pagesizeoptions", "formposition", "editmode", "spacing", "title", "subheading", "iconclass", "exportOptions", "shownavigation", "onDemandLoad", "showrowindex", "showheader", "enablesort", "enablecolumnselection", "onColumnselect", "onColumndeselect", "radioselect", "radioselecttitle", "radioselectarialabel", "multiselect", "multiselecttitle", "multiselectarialabel", "gridfirstrowselect", "isrowselectable", "rowClass", "deleteoktext", "deletecanceltext", "confirmdelete", "errormessage", "nodatamessage", "loadingdatamsg", "insertmessage", "updatemessage", "deletemessage", "ondemandmessage", "viewlessmessage", "showviewlessbutton", "onRowDelete", "onRowUpdate", "datasource", "binddataset", "onSuccess", "onError", "onRowinsert", "onRowupdate", "onRowdelete", "onRowclick", "onSort", "onBeforerowdelete", "onBeforefilter", "onHeaderclick", "onRowselect", "onRowdeselect", "onSetrecord", "statehandler", "formName", "parentForm", "filtermode", "filteronkeypress", "searchlabel", "onBeforedatarender", "onDatarender", "className", "exportformat", "exportdatasize", "onBeforeexport", "onAfterexport", "styles"];
 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" != _typeof3(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; }
@@ -159,12 +160,15 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     exportdatasize = props.exportdatasize,
     onBeforeexport = props.onBeforeexport,
     onAfterexport = props.onAfterexport,
+    styles = props.styles,
     rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
   // When same partial is used multiple times (e.g. in tabs), use unique storage key to prevent state collision
   var effectiveStorageKey = (0, _react.useMemo)(function () {
     return name + (listener !== null && listener !== void 0 && listener.partialName ? "__".concat(listener === null || listener === void 0 ? void 0 : listener.partialName) : "");
   }, [name, listener === null || listener === void 0 ? void 0 : listener.partialName]);
   var widgetRegistrationKey = props["item-id"] || name;
+  var listenerRef = (0, _react.useRef)(listener);
+  listenerRef.current = listener;
   var loading = (datasource === null || datasource === void 0 ? void 0 : datasource.loading) || false;
   var prevDatasetRef = (0, _react.useRef)(dataset);
   var prevSelectedRow = (0, _react.useRef)(null);
@@ -260,6 +264,15 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
   // Use the table name as unique ID to prevent collisions between multiple tables
   var cellState = (0, _hooks.useCellState)(name);
 
+  // Ref holding the "sync selectedItems" implementation, assigned each render after
+  // tableApis is defined.  A stable wrapper is passed to useRowSelection so it can
+  // call the latest version without being in its dependency array.
+  var syncSelectedItemsImplRef = (0, _react.useRef)(null);
+  var onSyncSelectedItems = (0, _react.useCallback)(function (ids) {
+    var _syncSelectedItemsImp;
+    return (_syncSelectedItemsImp = syncSelectedItemsImplRef.current) === null || _syncSelectedItemsImp === void 0 ? void 0 : _syncSelectedItemsImp.call(syncSelectedItemsImplRef, ids);
+  }, []);
+
   // ==================== STATE PERSISTENCE ====================
   // Restore persisted state before initializing table
   var _useMemo = (0, _react.useMemo)(function () {
@@ -384,7 +397,8 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
       onRowselect: onRowselect,
       onRowdeselect: onRowdeselect,
       listener: listener,
-      navigation: navigation
+      navigation: navigation,
+      onSyncSelectedItems: onSyncSelectedItems
     }),
     selectedRowIds = _useRowSelection.selectedRowIds,
     useMultiSelect = _useRowSelection.useMultiSelect,
@@ -752,6 +766,14 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
   var columnsProxy = (0, _react.useMemo)(function () {
     return (0, _columnProxy.createColumnsProxy)(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef);
   }, [wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef]);
+  var _useCustomExpressionC = (0, _hooks.useCustomExpressionColumns)({
+      columnSource: columnsProxy,
+      listenerRef: listenerRef
+    }),
+    customColumns = _useCustomExpressionC.customColumns,
+    customColumnsRevision = _useCustomExpressionC.customColumnsRevision,
+    customExpressionSignature = _useCustomExpressionC.customExpressionSignature,
+    mergeParsedCustomColumns = _useCustomExpressionC.mergeParsedCustomColumns;
   columnsStateRef.current = columns;
   var columnsForTable = (0, _react.useMemo)(function () {
     var base = columnsStateRef.current || [];
@@ -1155,6 +1177,12 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
           // data
           columnsProxy // columns (including dynamic ones)
           );
+          var customExprKeys = Object.keys(columnsProxy).filter(function (key) {
+            return columnsProxy[key].customExpression;
+          });
+          if (customExprKeys.length > 0) {
+            void mergeParsedCustomColumns()["finally"](function () {});
+          }
           var nextRows = internalDataset.map(function (r) {
             return (0, _typeof2["default"])(r) === "object" && r !== null ? _objectSpread({}, r) : r;
           });
@@ -1180,7 +1208,14 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
         });
       }
     }
-  }, [internalDataset, wmTableColumns, onBeforedatarender, onDatarender, name, isDynamicTable, table.getState().pagination.pageIndex, setInternalDataset]);
+  }, [internalDataset, wmTableColumns, onBeforedatarender, onDatarender, name, isDynamicTable, table.getState().pagination.pageIndex, setInternalDataset, columnsProxy, mergeParsedCustomColumns]);
+
+  // Re-parse when custom-expression markup signature changes, or when rows appear after empty dataset.
+  (0, _react.useEffect)(function () {
+    if (!onBeforedatarender) return;
+    if (internalDataset.length === 0) return;
+    void mergeParsedCustomColumns();
+  }, [customExpressionSignature, mergeParsedCustomColumns, onBeforedatarender, internalDataset.length]);
   // Use table initialization hook
   (0, _hooks.useTableInitialization)({
     internalDataset: internalDataset,
@@ -1456,6 +1491,33 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     rowDefInstances: rowDefInstances
   };
 
+  // Keep the sync-selected-items implementation up-to-date every render so that
+  // the stable onSyncSelectedItems callback (passed to useRowSelection) always has
+  // access to the latest tableApis / internalDataset / listener values.
+  syncSelectedItemsImplRef.current = function (newSelectedIds) {
+    if (!(listener !== null && listener !== void 0 && listener.onChange)) return;
+    var getRowId = function getRowId(row) {
+      return row._wmTableRowId || String(row.id);
+    };
+    var selectedRows = internalDataset.filter(function (row) {
+      return newSelectedIds.includes(getRowId(row));
+    });
+    var selectedItems = (0, _utils.cleanRowData)(selectedRows);
+    if (!(0, _lodashEs.isEqual)(prevSelectedRow.current, selectedItems)) {
+      prevSelectedRow.current = selectedItems;
+      if (tableApisRegistered.current) {
+        listener.onChange(widgetRegistrationKey, {
+          selectedItems: selectedItems
+        });
+      } else {
+        tableApisRegistered.current = true;
+        listener.onChange(widgetRegistrationKey, _objectSpread(_objectSpread({}, tableApis), {}, {
+          selectedItems: selectedItems
+        }));
+      }
+    }
+  };
+
   // Register table with parent form's formWidgets when parentForm is present
   (0, _react.useEffect)(function () {
     var _listener$Widgets8;
@@ -1504,21 +1566,21 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     // Clean and format selecteditem - always return as array
     var cleanedRows = (0, _utils.cleanRowData)(selectedRows);
 
-    // Always return selecteditem as an array (empty array if nothing selected)
-    var selecteditem = cleanedRows.length > 0 ? cleanedRows : [];
+    // Always return selectedItems as an array (empty array if nothing selected)
+    var selectedItems = cleanedRows.length > 0 ? cleanedRows : [];
 
     // Update only if changed
-    if (!(0, _lodashEs.isEqual)(prevSelectedRow.current, selecteditem)) {
-      prevSelectedRow.current = selecteditem;
+    if (!(0, _lodashEs.isEqual)(prevSelectedRow.current, selectedItems)) {
+      prevSelectedRow.current = selectedItems;
       if (tableApisRegistered.current) {
         listener.onChange(widgetRegistrationKey, {
-          selecteditem: selecteditem
+          selectedItems: selectedItems
         });
         return;
       }
       tableApisRegistered.current = true;
       listener.onChange(widgetRegistrationKey, _objectSpread(_objectSpread({}, tableApis), {}, {
-        selecteditem: selecteditem
+        selectedItems: selectedItems
       }));
     }
   };
@@ -1593,11 +1655,11 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     className: "app-grid-header"
   }, __jsx(_material.Box, {
     className: "app-grid-header-inner",
-    style: {
+    style: _objectSpread({
       height: "100%",
       overflow: "auto",
       position: "relative"
-    }
+    }, styles)
   }, loading && navigation !== "On-Demand" && __jsx(_LoadingComponent["default"], {
     message: loadingdatamsg
   }), __jsx(_material.Table, {
@@ -1662,7 +1724,10 @@ var WmTableComponent = exports.WmTableComponent = /*#__PURE__*/(0, _react.memo)(
     editingRowId: editingRowId,
     activeRowIds: activeRowIds,
     selectedRowIds: selectedRowIds,
-    isAddingNewRow: isAddingNewRow
+    isAddingNewRow: isAddingNewRow,
+    customExpressionColumns: customColumns,
+    customColumnsRevision: customColumnsRevision,
+    columnsVersion: columnsVersion
   }), summaryRowEnabled && summaryRowDefs.length > 0 && __jsx(_components.SummaryRowFooter, {
     summaryRowDefs: summaryRowDefs,
     summaryRowDefObjects: summaryRowDefObjects,

package/components/data/table/live-table/index.d.ts

@@ -52,6 +52,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/data/table/props.d.ts

@@ -350,6 +350,7 @@ export interface TableProps {
      * Callback fired on operation error.
      */
     onError?: (event: any, widget: any, data: any, operation: string) => void;
+    customExpressionColumns?: Record<string, (rowData: any) => ReactNode>;
 }
 /**
  * Combined props for the WmTable component, including base WaveMaker props.
@@ -786,6 +787,11 @@ export interface TableBodyProps {
     selectedRowIds?: string[];
     isAddingNewRow?: boolean;
     registerRowDefInstance?: (rowId: string, instance: any, rowData?: any) => void;
+    customExpressionColumns?: Record<string, (rowData: any) => ReactNode>;
+    /** Bumps when custom-expression components are re-parsed (forces body cells to refresh). */
+    customColumnsRevision?: number;
+    /** Column proxy / table column definition generation counter. */
+    columnsVersion?: number;
 }
 export interface TableHeaderProps {
     table: Table<any>;
@@ -1084,6 +1090,7 @@ export interface UseRowSelectionProps {
     onRowdeselect?: (event: any, widget: any, row: any) => void;
     listener?: any;
     navigation?: string;
+    onSyncSelectedItems?: (selectedIds: string[]) => void;
 }
 export interface UseRowSelectionReturn {
     selectedRowIds: string[];

package/components/data/table/table-action/index.d.ts

@@ -38,6 +38,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/data/table/table-column/index.d.ts

@@ -38,6 +38,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/data/table/table-row/index.d.ts

@@ -38,6 +38,7 @@ declare const _default: React.ComponentType<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

package/components/data/table/table-row-action/index.d.ts

@@ -46,6 +46,7 @@ export declare const WmTableRowAction: React.FC<{
     eventCallback?: (eventName: string, data: any) => void;
     forwardedRef?: React.ForwardedRef<any>;
     viewParent?: any;
+    destroy?: ((names: string[]) => void) | ((formName?: string) => void);
     hint?: string;
     arialabel?: string;
     tabindex?: number;

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

@@ -106,6 +106,9 @@ var buildSelectionColumns = exports.buildSelectionColumns = function buildSelect
           size: "small",
           inputProps: {
             "aria-label": "Select all rows"
+          },
+          sx: {
+            padding: 0
           }
         })));
       },
@@ -136,7 +139,10 @@ var buildSelectionColumns = exports.buildSelectionColumns = function buildSelect
             role: "checkbox",
             "aria-live": "assertive"
           },
-          size: "small"
+          size: "small",
+          sx: {
+            padding: 0
+          }
         }))), isSelected ? __jsx("span", {
           className: "sr-only",
           "aria-live": "assertive"

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

@@ -70,7 +70,7 @@ var createDataColumn = exports.createDataColumn = function createDataColumn(wmCo
     columnSize = (0, _.parseWidth)(wmColumn.styles.width);
   }
   return _objectSpread(_objectSpread({
-    accessorKey: wmColumn.field,
+    accessorKey: wmColumn.field || wmColumn.name,
     // Use sortby field for sorting if provided, otherwise use the display field
     // Supports nested properties like "department.store.employee"
     accessorFn: wmColumn.sortby ? function (row) {

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

@@ -319,7 +319,7 @@ function transformExpression(exp) {
 var parseTableColumns = exports.parseTableColumns = function parseTableColumns(children, dataset) {
   var columns = [];
   _react["default"].Children.forEach(children, function (child) {
-    if (child && child.props && child.props.name && child.props.name.includes("wm_table_column")) {
+    if (child && child.props && child.props.name && (child.props.name.includes("wm_table_column") || child.props.name.includes("col_"))) {
       var props = (0, _lodashEs.get)(child, "props", {});
       var binding = (0, _lodashEs.get)(props, "binding");
       var aggregate = getAggregateFunctions(dataset, binding);
@@ -400,7 +400,7 @@ var _parseTableStructureWithGroups = exports.parseTableStructureWithGroups = fun
       structure.push(group);
     }
     // Handle WmTableColumn
-    else if (childName.includes("wm_table_column")) {
+    else if (childName.includes("wm_table_column") || childName.includes("col_")) {
       var _props = (0, _lodashEs.get)(child, "props", {});
       var column = _objectSpread({
         field: (0, _lodashEs.get)(_props, "binding"),

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

@@ -170,7 +170,7 @@ var widgetRenderers = {
  */
 var renderDisplayCell = exports.renderDisplayCell = function renderDisplayCell(column, rowData, listener, cellState) {
   var widgetType = (0, _lodashEs.get)(column, "widgetType", "label");
-  var mappedWidgetType = (0, _index2.getWidgetMappingForType)(widgetType);
+  var mappedWidgetType = column.field ? (0, _index2.getWidgetMappingForType)(widgetType) : "dynamic-text";
 
   // Get the appropriate renderer, defaulting to WmLabel
   var renderer = (0, _lodashEs.get)(widgetRenderers, mappedWidgetType) || widgetRenderers.WmLabel;

package/components/dialogs/alert-dialog/index.d.ts

@@ -46,6 +46,7 @@ declare const WmAlertDialogStandalone: {
         eventCallback?: (eventName: string, data: any) => void;
         forwardedRef?: React.ForwardedRef<any>;
         viewParent?: any;
+        destroy?: ((names: string[]) => void) | ((formName?: string) => void);
         hint?: string;
         arialabel?: string;
         tabindex?: number;
@@ -128,6 +129,7 @@ declare const _default: {
         eventCallback?: (eventName: string, data: any) => void;
         forwardedRef?: React.ForwardedRef<any>;
         viewParent?: any;
+        destroy?: ((names: string[]) => void) | ((formName?: string) => void);
         hint?: string;
         arialabel?: string;
         tabindex?: number;

package/components/dialogs/confirm-dialog/index.d.ts

@@ -47,6 +47,7 @@ declare const WmConfirmDialogStandalone: {
         eventCallback?: (eventName: string, data: any) => void;
         forwardedRef?: React.ForwardedRef<any>;
         viewParent?: any;
+        destroy?: ((names: string[]) => void) | ((formName?: string) => void);
         hint?: string;
         arialabel?: string;
         tabindex?: number;
@@ -130,6 +131,7 @@ declare const _default: {
         eventCallback?: (eventName: string, data: any) => void;
         forwardedRef?: React.ForwardedRef<any>;
         viewParent?: any;
+        destroy?: ((names: string[]) => void) | ((formName?: string) => void);
         hint?: string;
         arialabel?: string;
         tabindex?: number;

package/components/dialogs/dialog/index.d.ts

@@ -51,6 +51,7 @@ declare const WmDialogStandalone: {
         eventCallback?: (eventName: string, data: any) => void;
         forwardedRef?: React.ForwardedRef<any>;
         viewParent?: any;
+        destroy?: ((names: string[]) => void) | ((formName?: string) => void);
         hint?: string;
         arialabel?: string;
         tabindex?: number;
@@ -140,6 +141,7 @@ declare const _default: {
         eventCallback?: (eventName: string, data: any) => void;
         forwardedRef?: React.ForwardedRef<any>;
         viewParent?: any;
+        destroy?: ((names: string[]) => void) | ((formName?: string) => void);
         hint?: string;
         arialabel?: string;
         tabindex?: number;