@wavemaker-ai/react-runtime 1.0.0-rc.326 → 1.0.0-rc.328

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

@@ -3,10 +3,19 @@ import {
   isInteractiveElement,
   getRowIdsFromDataset,
   rowExistsInDataset,
-  selectionStateHelpers
+  selectionStateHelpers,
+  getWidgetForCallback
 } from "../utils/selectionUtils";
 import { saveTableState, getTableState } from "../utils/table-helpers";
 import { cleanRowData, UNSUPPORTED_STATE_PERSISTENCE_TYPES } from "../utils";
+const getRowFallbackId = (row) => row._wmTableRowId || String(row.id) || String(0);
+const getSelectedIndices = (selectedIds, dataset) => selectedIds.reduce((indices, rowId) => {
+  const index = dataset.findIndex((row) => row._wmTableRowId === rowId || row.id === rowId);
+  if (index >= 0) {
+    indices.push(index);
+  }
+  return indices;
+}, []);
 const useRowSelection = ({
   radioselect = false,
   multiselect = false,
@@ -21,6 +30,8 @@ const useRowSelection = ({
   onRowdeselect,
   listener,
   navigation = "Basic",
+  viewParent,
+  widgetRegistrationKey,
   onSyncSelectedItems
 }) => {
   const datasetRef = useRef(internalDataset);
@@ -31,22 +42,36 @@ const useRowSelection = ({
   const [updateTrigger, forceUpdate] = useState({});
   const useMultiSelect = multiselect;
   const useRadioSelect = radioselect && !multiselect;
-  const hasSelectionMode = useRadioSelect || useMultiSelect;
+  const prevMultiselectRef = useRef(multiselect);
+  useEffect(() => {
+    const prev = prevMultiselectRef.current;
+    prevMultiselectRef.current = multiselect;
+    if (prev === multiselect) return;
+    selectionStateHelpers.clearSelection(cellState);
+    forceUpdate({});
+    onSyncSelectedItems == null ? void 0 : onSyncSelectedItems([]);
+    if (statehandler && getTableCurrentState) {
+      saveTableState(name, statehandler, {});
+    }
+  }, [multiselect, cellState, onSyncSelectedItems, statehandler, name, getTableCurrentState]);
+  const applySelectionForMode = useCallback(
+    (rowIds) => {
+      if (rowIds.length === 0) return;
+      if (useMultiSelect) {
+        rowIds.forEach((rowId) => selectionStateHelpers.addToSelection(cellState, rowId));
+      } else {
+        selectionStateHelpers.setSelection(cellState, rowIds[0]);
+      }
+    },
+    [useMultiSelect, cellState]
+  );
   const saveStateImmediate = useCallback(() => {
     if (!statehandler || !getTableCurrentState) {
       return;
     }
     const { currentPage, currentPageSize } = getTableCurrentState();
     const selectedIds = selectionStateHelpers.getSelection(cellState);
-    const selectedIndices = [];
-    selectedIds.forEach((rowId) => {
-      const index = internalDataset.findIndex(
-        (row) => row._wmTableRowId === rowId || row.id === rowId
-      );
-      if (index >= 0) {
-        selectedIndices.push(index);
-      }
-    });
+    const selectedIndices = getSelectedIndices(selectedIds, internalDataset);
     const selectedItemsWithPage = selectedIndices.map((idx) => ({
       page: currentPage,
       index: idx
@@ -91,19 +116,35 @@ const useRowSelection = ({
     internalDataset,
     initialActualPageSize
   ]);
-  const getWidgetRef = useCallback(() => {
-    var _a;
-    return (_a = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a[name];
-  }, [name]);
+  const widgetKey = widgetRegistrationKey != null ? widgetRegistrationKey : name;
+  const getWidgetRef = useCallback(
+    () => getWidgetForCallback(listener, viewParent, widgetKey),
+    [viewParent, widgetKey]
+  );
+  const syncSelectionToWidget = useCallback(
+    (selectedIds) => {
+      const ids = selectedIds != null ? selectedIds : selectionStateHelpers.getSelection(cellState);
+      onSyncSelectedItems == null ? void 0 : onSyncSelectedItems(ids);
+    },
+    [onSyncSelectedItems, cellState]
+  );
+  const commitSelectionChange = useCallback(
+    (syncIds) => {
+      forceUpdate({});
+      saveStateImmediate();
+      syncSelectionToWidget(syncIds);
+    },
+    [saveStateImmediate, syncSelectionToWidget]
+  );
   const triggerSelectionCallback = useCallback(
     (event, rowData, callback) => {
       if (callback && rowData) {
-        onSyncSelectedItems == null ? void 0 : onSyncSelectedItems(selectionStateHelpers.getSelection(cellState));
+        const widget = getWidgetRef();
         const cleanedRow = cleanRowData([rowData])[0];
-        callback(event, getWidgetRef(), cleanedRow);
+        callback(event, widget, cleanedRow);
       }
     },
-    [getWidgetRef, onSyncSelectedItems, cellState]
+    [getWidgetRef]
   );
   const handleRadioSelection = useCallback(
     (rowId, rowData) => {
@@ -116,8 +157,7 @@ const useRowSelection = ({
         );
       }
       selectionStateHelpers.setSelection(cellState, rowId);
-      forceUpdate({});
-      saveStateImmediate();
+      commitSelectionChange();
       if (previousRowData) {
         triggerSelectionCallback(null, previousRowData, onRowdeselect);
       }
@@ -125,7 +165,7 @@ const useRowSelection = ({
     },
     [
       cellState,
-      saveStateImmediate,
+      commitSelectionChange,
       onRowselect,
       onRowdeselect,
       internalDataset,
@@ -139,11 +179,10 @@ const useRowSelection = ({
       } else {
         selectionStateHelpers.removeFromSelection(cellState, rowId);
       }
-      forceUpdate({});
-      saveStateImmediate();
+      commitSelectionChange();
       triggerSelectionCallback(null, rowData, isSelected ? onRowselect : onRowdeselect);
     },
-    [cellState, saveStateImmediate, onRowselect, onRowdeselect, triggerSelectionCallback]
+    [cellState, commitSelectionChange, onRowselect, onRowdeselect, triggerSelectionCallback]
   );
   const handleSelectAll = useCallback(
     (isSelected) => {
@@ -154,9 +193,7 @@ const useRowSelection = ({
       } else {
         selectionStateHelpers.clearSelection(cellState);
       }
-      forceUpdate({});
-      saveStateImmediate();
-      onSyncSelectedItems == null ? void 0 : onSyncSelectedItems(newIds);
+      commitSelectionChange(newIds);
       const rows = datasetRef.current;
       const callback = isSelected ? onRowselect : onRowdeselect;
       if (callback && rows.length > 0) {
@@ -166,7 +203,7 @@ const useRowSelection = ({
         });
       }
     },
-    [cellState, saveStateImmediate, onSyncSelectedItems, onRowselect, onRowdeselect, getWidgetRef]
+    [cellState, commitSelectionChange, onRowselect, onRowdeselect, getWidgetRef]
   );
   const handleRowSelectionClick = useCallback(
     (event, rowId, rowData) => {
@@ -177,20 +214,18 @@ const useRowSelection = ({
         const isCurrentlySelected = selectionStateHelpers.isRowSelected(cellState, rowId);
         const willBeSelected = !isCurrentlySelected;
         selectionStateHelpers.toggleSelection(cellState, rowId);
-        forceUpdate({});
-        saveStateImmediate();
+        commitSelectionChange();
         triggerSelectionCallback(event, rowData, willBeSelected ? onRowselect : onRowdeselect);
         return true;
-      } else {
-        handleRadioSelection(rowId, rowData);
-        return true;
       }
+      handleRadioSelection(rowId, rowData);
+      return true;
     },
     [
       useMultiSelect,
       handleRadioSelection,
       cellState,
-      saveStateImmediate,
+      commitSelectionChange,
       triggerSelectionCallback,
       onRowselect,
       onRowdeselect
@@ -202,26 +237,22 @@ const useRowSelection = ({
     }
     if (gridfirstrowselect && internalDataset.length > 0) {
       const firstRowData = internalDataset[0];
-      const firstRowId = firstRowData._wmTableRowId || String(firstRowData.id) || String(0);
+      const firstRowId = getRowFallbackId(firstRowData);
       const currentSelection = selectionStateHelpers.getSelection(cellState);
       if (currentSelection.length === 0) {
-        if (useMultiSelect) {
-          selectionStateHelpers.addToSelection(cellState, firstRowId);
-        } else {
-          selectionStateHelpers.setSelection(cellState, firstRowId);
-        }
+        applySelectionForMode([firstRowId]);
         forceUpdate({});
         initialSelectionDoneRef.current = true;
       } else if (!useMultiSelect) {
         const selectedId = currentSelection[0];
         if (!rowExistsInDataset(selectedId, internalDataset)) {
-          selectionStateHelpers.setSelection(cellState, firstRowId);
+          applySelectionForMode([firstRowId]);
           forceUpdate({});
           initialSelectionDoneRef.current = true;
         }
       }
     }
-  }, [gridfirstrowselect, internalDataset, useMultiSelect, cellState]);
+  }, [gridfirstrowselect, internalDataset, useMultiSelect, cellState, applySelectionForMode]);
   useEffect(() => {
     var _a;
     if (!gridfirstrowselect || internalDataset.length === 0 || !initialSelectionDoneRef.current) {
@@ -239,12 +270,8 @@ const useRowSelection = ({
     );
     if (!hasSelectionInCurrentPage) {
       const firstRowData = internalDataset[0];
-      const firstRowId = firstRowData._wmTableRowId || String(firstRowData.id) || String(0);
-      if (useMultiSelect) {
-        selectionStateHelpers.addToSelection(cellState, firstRowId);
-      } else {
-        selectionStateHelpers.setSelection(cellState, firstRowId);
-      }
+      const firstRowId = getRowFallbackId(firstRowData);
+      applySelectionForMode([firstRowId]);
       forceUpdate({});
       if (onRowselect) {
         triggerSelectionCallback(null, firstRowData, onRowselect);
@@ -259,7 +286,8 @@ const useRowSelection = ({
     name,
     statehandler,
     onRowselect,
-    triggerSelectionCallback
+    triggerSelectionCallback,
+    applySelectionForMode
   ]);
   const isRowSelected = useCallback(
     (rowId) => {
@@ -302,23 +330,8 @@ const useRowSelection = ({
       if (!isAlreadyRestored && expectedRowIds.length > 0) {
         if (useMultiSelect) {
           selectionStateHelpers.clearSelection(cellState);
-          currentPageSelections.forEach((index) => {
-            if (index >= 0 && index < internalDataset.length) {
-              const row = internalDataset[index];
-              if (row && row._wmTableRowId) {
-                selectionStateHelpers.addToSelection(cellState, row._wmTableRowId);
-              }
-            }
-          });
-        } else {
-          const firstIndex = currentPageSelections[0];
-          if (firstIndex >= 0 && firstIndex < internalDataset.length) {
-            const row = internalDataset[firstIndex];
-            if (row && row._wmTableRowId) {
-              selectionStateHelpers.setSelection(cellState, row._wmTableRowId);
-            }
-          }
         }
+        applySelectionForMode(expectedRowIds);
         forceUpdate({});
       }
     }
@@ -329,7 +342,8 @@ const useRowSelection = ({
     navigation,
     internalDataset,
     cellState,
-    useMultiSelect
+    useMultiSelect,
+    applySelectionForMode
   ]);
   return {
     selectedRowIds,

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

@@ -1,10 +1,23 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 const useTableState = ({
   editMode = "none",
   radioselect = false,
   multiselect = false
 }) => {
   const [activeRowIds, setActiveRowIds] = useState([]);
+  const prevMultiselectRef = useRef(multiselect);
+  const prevRadioselectRef = useRef(radioselect);
+  useEffect(() => {
+    const prevMultiselect = prevMultiselectRef.current;
+    const prevRadioselect = prevRadioselectRef.current;
+    prevMultiselectRef.current = multiselect;
+    prevRadioselectRef.current = radioselect;
+    if (prevMultiselect && !multiselect) {
+      setActiveRowIds([]);
+    } else if (prevRadioselect && !radioselect && !multiselect) {
+      setActiveRowIds([]);
+    }
+  }, [multiselect, radioselect]);
   const handleRowActiveClick = useCallback(
     (rowId, isSelectionHandled, isEditingOrAdding) => {
       if (isEditingOrAdding) {
@@ -39,7 +52,6 @@ const useTableState = ({
       setActiveRowIds([]);
     }
   }, []);
-  const activeRowId = activeRowIds && activeRowIds.length > 0 ? activeRowIds[0] : null;
   return {
     activeRowIds,
     setActiveRow,

package/components/data/table/index.js

@@ -82,6 +82,7 @@ import {
   parseTableRowActions,
   parseTableActions,
   parseTableRowExpansion,
+  isRowExpansionVisible,
   getSpacingClasses,
   TABLE_CSS_CLASSES,
   TABLE_MESSAGES,
@@ -201,7 +202,8 @@ const WmTableComponent = memo(
       exportdatasize,
       onBeforeexport,
       onAfterexport,
-      styles
+      styles,
+      viewParent
     } = _c, rest = __objRest(_c, [
       "name",
       "dataset",
@@ -282,7 +284,8 @@ const WmTableComponent = memo(
       "exportdatasize",
       "onBeforeexport",
       "onAfterexport",
-      "styles"
+      "styles",
+      "viewParent"
     ]);
     const effectiveStorageKey = useMemo(
       () => name + ((listener == null ? void 0 : listener.partialName) ? `__${listener == null ? void 0 : listener.partialName}` : ""),
@@ -461,6 +464,8 @@ const WmTableComponent = memo(
       onRowdeselect,
       listener,
       navigation,
+      viewParent,
+      widgetRegistrationKey,
       onSyncSelectedItems
     });
     const { activeRowIds, setActiveRow, handleRowActiveClick, isRowActive } = useTableState({
@@ -493,15 +498,20 @@ const WmTableComponent = memo(
       const staticColumns = parseTableColumns(children, internalDataset);
       const hasGroups = structure.some((item) => "isGroup" in item && item.isGroup);
       const finalColumns = hasGroups && flatColumns.length > 0 ? flatColumns : staticColumns.length > 0 ? staticColumns : isDynamicTable && dynamicColumns.length > 0 ? dynamicColumns : flatColumns;
+      const parsedExpansion = parseTableRowExpansion(children);
       return {
         wmTableColumns: finalColumns,
         tableStructure: structure,
         tableActions: allTableActions,
         headerActions: headerActions2,
         footerActions: footerActions2,
-        rowExpansionConfig: parseTableRowExpansion(children)
+        rowExpansionConfig: parsedExpansion
       };
     }, [children, internalDataset, isDynamicTable, dynamicColumns]);
+    const visibleRowExpansionConfig = useMemo(
+      () => isRowExpansionVisible(rowExpansionConfig, internalDataset) ? rowExpansionConfig : null,
+      [rowExpansionConfig, internalDataset]
+    );
     const rowActions = useMemo(() => parseTableRowActions(children), [children]);
     const [columnsVersion, setColumnsVersion] = useState(0);
     const [columnOverrides, setColumnOverrides] = useState(
@@ -556,8 +566,8 @@ const WmTableComponent = memo(
       updatemessage,
       errormessage,
       showToast,
-      hasRowExpansion: rowExpansionConfig ? true : false,
-      expansionPosition: rowExpansionConfig ? parseInt(String(rowExpansionConfig.position || "0"), 10) : 0,
+      hasRowExpansion: visibleRowExpansionConfig ? true : false,
+      expansionPosition: visibleRowExpansionConfig ? parseInt(String(visibleRowExpansionConfig.position || "0"), 10) : 0,
       datasource,
       binddataset,
       onSuccess,
@@ -580,7 +590,9 @@ const WmTableComponent = memo(
       useMultiSelect,
       isrowselectable,
       listener,
-      name
+      viewParent,
+      name,
+      widgetRegistrationKey
     });
     useEffect(() => {
       const currentPage = paginationState.pageIndex;
@@ -1344,23 +1356,33 @@ const WmTableComponent = memo(
       selectPageSize,
       rowDefInstances
     };
-    syncSelectedItemsImplRef.current = (newSelectedIds) => {
+    const getRowId = (row) => row._wmTableRowId || String(row.id);
+    const pushSelectedItemsToWidget = (selectedIds) => {
       if (!(listener == null ? void 0 : listener.onChange)) return;
-      const getRowId = (row) => row._wmTableRowId || String(row.id);
       const selectedRows = internalDataset.filter(
-        (row) => newSelectedIds.includes(getRowId(row))
+        (row) => selectedIds.includes(getRowId(row))
       );
       const selectedItems = cleanRowData(selectedRows);
-      if (!isEqual(prevSelectedRow.current, selectedItems)) {
-        prevSelectedRow.current = selectedItems;
-        if (tableApisRegistered.current) {
-          listener.onChange(widgetRegistrationKey, { selectedItems });
-        } else {
-          tableApisRegistered.current = true;
-          listener.onChange(widgetRegistrationKey, __spreadProps(__spreadValues({}, tableApis), { selectedItems }));
-        }
+      if (selectedIds.length === 0) {
+        prevSelectedRow.current = null;
       }
+      if (isEqual(prevSelectedRow.current, selectedItems)) {
+        return;
+      }
+      prevSelectedRow.current = selectedItems;
+      const selectionPayload = {
+        selectedItems,
+        selecteditem: selectedItems,
+        selectedItem: selectedItems.length === 1 ? selectedItems[0] : selectedItems
+      };
+      if (tableApisRegistered.current) {
+        listener.onChange(widgetRegistrationKey, selectionPayload);
+        return;
+      }
+      tableApisRegistered.current = true;
+      listener.onChange(widgetRegistrationKey, __spreadValues(__spreadValues({}, tableApis), selectionPayload));
     };
+    syncSelectedItemsImplRef.current = pushSelectedItemsToWidget;
     useEffect(() => {
       var _a2, _b2, _c2;
       if (parentForm && name && ((_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[parentForm])) {
@@ -1384,32 +1406,14 @@ const WmTableComponent = memo(
         }
       }
     }, [parentForm, parentFormColumns]);
-    const updateSelectedItem = () => {
-      if (!(listener == null ? void 0 : listener.onChange)) return;
-      const getRowId = (row) => row._wmTableRowId || String(row.id);
-      let selectedRows = [];
-      if ((useRadioSelect || useMultiSelect) && selectedRowIds.length > 0) {
-        selectedRows = internalDataset.filter((row) => selectedRowIds.includes(getRowId(row)));
-      } else if (activeRowIds.length > 0) {
-        selectedRows = internalDataset.filter(
-          (row) => activeRowIds.includes(getRowId(row))
-        );
-      }
-      const cleanedRows = cleanRowData(selectedRows);
-      const selectedItems = cleanedRows.length > 0 ? cleanedRows : [];
-      if (!isEqual(prevSelectedRow.current, selectedItems)) {
-        prevSelectedRow.current = selectedItems;
-        if (tableApisRegistered.current) {
-          listener.onChange(widgetRegistrationKey, { selectedItems });
-          return;
-        }
-        tableApisRegistered.current = true;
-        listener.onChange(widgetRegistrationKey, __spreadProps(__spreadValues({}, tableApis), { selectedItems }));
-      }
-    };
     useEffect(() => {
-      updateSelectedItem();
-    }, [activeRowIds, selectedRowIds, useRadioSelect, useMultiSelect, internalDataset, name]);
+      if (!useRadioSelect && !useMultiSelect) return;
+      pushSelectedItemsToWidget(selectedRowIds);
+    }, [internalDataset, selectedRowIds, useRadioSelect, useMultiSelect]);
+    useEffect(() => {
+      if (useRadioSelect || useMultiSelect) return;
+      pushSelectedItemsToWidget(activeRowIds != null ? activeRowIds : []);
+    }, [activeRowIds, useRadioSelect, useMultiSelect]);
     const isTableLoading = useMemo(() => {
       return loading && navigation !== "On-Demand" && internalDataset.length === 0;
     }, [loading, navigation, internalDataset.length]);
@@ -1428,16 +1432,16 @@ const WmTableComponent = memo(
           domHidden: !!hiddenColStyle
         };
       });
-      if (rowExpansionConfig) {
+      if (visibleRowExpansionConfig) {
         const expansionInsertIndex = getExpansionColumnInsertIndex(
           leafHeaders,
-          rowExpansionConfig,
+          visibleRowExpansionConfig,
           {
             appendForGroupedTable: !!(tableStructure && hasTableGroups(tableStructure))
           }
         );
         if (expansionInsertIndex >= 0) {
-          base.splice(expansionInsertIndex, 0, __spreadProps(__spreadValues({}, buildExpansionColSpec(rowExpansionConfig.columnwidth)), {
+          base.splice(expansionInsertIndex, 0, __spreadProps(__spreadValues({}, buildExpansionColSpec(visibleRowExpansionConfig.columnwidth)), {
             domHidden: false
           }));
         }
@@ -1449,7 +1453,7 @@ const WmTableComponent = memo(
       columnsVersion,
       showheader,
       ColClassSignature,
-      rowExpansionConfig,
+      visibleRowExpansionConfig,
       tableStructure
     ]);
     return /* @__PURE__ */ jsxs(
@@ -1532,7 +1536,7 @@ const WmTableComponent = memo(
                               sorting,
                               columnSizing,
                               rowSelection,
-                              rowExpansionConfig,
+                              rowExpansionConfig: visibleRowExpansionConfig,
                               columnsVersion,
                               filterMode: filtermode,
                               columnFilters,
@@ -1562,7 +1566,7 @@ const WmTableComponent = memo(
                             nodatamessage,
                             loadingdatamsg,
                             isLoading: datasource == null ? void 0 : datasource.loading,
-                            rowExpansionConfig,
+                            rowExpansionConfig: visibleRowExpansionConfig,
                             expandedRows,
                             toggleRowExpansion: handleToggleRowExpansion,
                             isRowExpanded,

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

@@ -1113,6 +1113,8 @@ export interface UseRowSelectionProps {
     onRowdeselect?: (event: any, widget: any, row: any) => void;
     listener?: any;
     navigation?: string;
+    viewParent?: any;
+    widgetRegistrationKey?: string;
     onSyncSelectedItems?: (selectedIds: string[]) => void;
 }
 export interface UseRowSelectionReturn {
@@ -1261,7 +1263,9 @@ export interface UseRowHandlersProps {
     useMultiSelect?: boolean;
     isrowselectable?: boolean;
     listener?: any;
+    viewParent?: any;
     name: string;
+    widgetRegistrationKey?: string;
 }
 export interface UseRowHandlersReturn {
     handleRowClick: (event: MouseEvent, rowData: any, rowId: string) => void;

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

@@ -38,7 +38,7 @@ function MultiSelectCell(ctx) {
   const rowId = row.id;
   const isSelected = row.getIsSelected();
   const { handleMultiSelection, multiselecttitle, multiselectarialabel } = getSelectionMeta(ctx);
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "center" }, children: [
+  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex" }, children: [
     /* @__PURE__ */ jsx(Tooltip, { title: multiselecttitle != null ? multiselecttitle : "", placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsx(
       Checkbox,
       {
@@ -65,7 +65,7 @@ function MultiSelectHeader({ table, column }) {
   var _a, _b;
   const isAllSelected = table.getIsAllRowsSelected();
   const { handleSelectAll } = (_b = (_a = column.columnDef.meta) == null ? void 0 : _a.selection) != null ? _b : {};
-  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", width: "100%" }, children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsx(
     Checkbox,
     {
       checked: isAllSelected,

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

@@ -62,7 +62,7 @@ const createDataColumn = (wmColumn, renderCell, index = 0) => {
   const colClassProp = (_a = wmColumn.colClass) != null ? _a : wmColumn["col-class"];
   let columnSize;
   if (wmColumn.width) {
-    columnSize = parseInt(wmColumn.width);
+    columnSize = parseWidth(wmColumn.width);
   } else if ((_b = wmColumn.styles) == null ? void 0 : _b.width) {
     columnSize = parseWidth(wmColumn.styles.width);
   }

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

@@ -7,7 +7,8 @@ export type EditWidgetType = FormWidgetType;
  * Angular behavior: when a dataset is a non-array object (e.g. a REST API response
  * like { users: [...], total: 100 }), return the first array-valued property as the
  * actual row data.  If the value is already an array it is returned as-is; if no
- * array property is found (e.g. a params snapshot) an empty array is returned.
+ * array property is found, the object itself is a single record (e.g. a get-by-id
+ * service response) and is wrapped as a one-row array.
  */
 export declare const extractDataArray: (dataset: any) => any[];
 /**
@@ -48,6 +49,13 @@ export declare const parseTableRowActions: (children: React.ReactNode) => WmTabl
 export declare const parseTableActions: (children: React.ReactNode) => WmTableActionProps[];
 /** Resolve row-bound expansion props. Uses precomputed map first, then tableRowProps(rowData) fallback. */
 export declare const getRowExpansionConfig: (config: WmTableRowProps | null, rowId: string, rowData?: any) => WmTableRowProps | null;
+/**
+ * Whether the expansion column should be reserved in the table layout.
+ * When tableRowProps gates show per row (e.g. hierarchy children.length), hide the
+ * column entirely if no current row would show an expand control — avoids empty
+ * row-expansion-cell spacers for leaf-only datasets.
+ */
+export declare const isRowExpansionVisible: (config: WmTableRowProps | null | undefined, dataset: any[] | undefined) => boolean;
 export declare const parseTableRowExpansion: (children: React.ReactNode) => WmTableRowProps | null;
 export declare const isEditAction: (actionKey: string) => boolean;
 export declare const isDeleteAction: (actionKey: string) => boolean;

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

@@ -86,7 +86,7 @@ const extractDataArray = (dataset) => {
   if (isArray(dataset)) return dataset;
   if (dataset !== null && dataset !== void 0 && typeof dataset === "object") {
     const firstArray = Object.values(dataset).find((v) => isArray(v));
-    return firstArray != null ? firstArray : [];
+    return firstArray != null ? firstArray : [dataset];
   }
   return [];
 };
@@ -351,6 +351,19 @@ const getRowExpansionConfig = (config, rowId, rowData) => {
   const overrides = typeof config.tableRowProps === "function" && rowData !== void 0 ? config.tableRowProps(rowData) : {};
   return __spreadValues(__spreadValues({}, config), overrides);
 };
+const isRowExpansionVisible = (config, dataset) => {
+  if (!config) return false;
+  if (typeof config.tableRowProps === "function") {
+    if (!Array.isArray(dataset) || dataset.length === 0) return false;
+    return dataset.some((row) => {
+      var _a;
+      const overrides = ((_a = config.tableRowProps) == null ? void 0 : _a.call(config, row)) || {};
+      const show = overrides.show !== void 0 ? overrides.show : config.show;
+      return show !== false;
+    });
+  }
+  return config.show !== false;
+};
 const parseTableRowExpansion = (children) => {
   let rowExpansionConfig = null;
   React.Children.forEach(children, (child) => {
@@ -714,6 +727,7 @@ export {
   isDeleteAction,
   isEditAction,
   isInteractiveElement,
+  isRowExpansionVisible,
   parseTableActions,
   parseTableColumns,
   parseTableRowActions,

package/components/data/table/utils/selectionUtils.d.ts

@@ -11,6 +11,11 @@ export declare const hasInteractiveAttributes: (element: HTMLElement) => boolean
  * Check if element or its ancestors are interactive
  */
 export declare const isInteractiveElement: (event: React.MouseEvent) => boolean;
+/**
+ * Widget passed to user callbacks must come from the page proxy (viewParent), which
+ * listener.onChange updates synchronously. listener.Widgets lags one React commit behind.
+ */
+export declare const getWidgetForCallback: (listener: any | undefined, viewParent: any | undefined, widgetKey: string) => any;
 /**
  * Get row IDs from dataset
  */

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

@@ -47,6 +47,10 @@ const isInteractiveElement = (event) => {
   }
   return false;
 };
+const getWidgetForCallback = (listener, viewParent, widgetKey) => {
+  var _a, _b, _c;
+  return (_c = (_a = viewParent == null ? void 0 : viewParent.Widgets) == null ? void 0 : _a[widgetKey]) != null ? _c : (_b = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _b[widgetKey];
+};
 const getRowIdsFromDataset = (dataset) => {
   return dataset.map((row) => row._wmTableRowId || String(row.id));
 };
@@ -103,6 +107,7 @@ const selectionStateHelpers = {
 };
 export {
   getRowIdsFromDataset,
+  getWidgetForCallback,
   hasInteractiveAttributes,
   hasInteractiveClass,
   isInteractiveElement,