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

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { cleanRowData } from "../utils";
+import { cleanRowData, getRowExpansionConfig } from "../utils";
 const useRowExpansion = ({
   rowExpansionConfig,
   internalDataset
@@ -8,36 +8,48 @@ const useRowExpansion = ({
   const expandedRowsRef = useRef(expandedRows);
   const rowDefInstancesRef = useRef({});
   const pendingRowExpandRef = useRef(/* @__PURE__ */ new Set());
+  const indexExpandedInstances = useCallback(() => {
+    const instances = rowDefInstancesRef.current;
+    Object.keys(instances).forEach((key) => {
+      if (/^\d+$/.test(key)) delete instances[key];
+    });
+    Array.from(expandedRowsRef.current).forEach((rowId, index) => {
+      if (instances[rowId]) instances[index] = instances[rowId];
+    });
+  }, []);
   useEffect(() => {
     expandedRowsRef.current = expandedRows;
-  }, [expandedRows]);
+    indexExpandedInstances();
+  }, [expandedRows, indexExpandedInstances]);
   useEffect(() => {
-    const instances = rowDefInstancesRef.current;
-    Object.keys(instances).forEach((k) => delete instances[k]);
+    rowDefInstancesRef.current = {};
     pendingRowExpandRef.current = /* @__PURE__ */ new Set();
   }, [internalDataset]);
   const registerRowDefInstance = useCallback(
     (rowId, instance, rowData) => {
       rowDefInstancesRef.current[rowId] = instance;
-      if (pendingRowExpandRef.current.has(rowId) && expandedRowsRef.current.has(rowId)) {
+      indexExpandedInstances();
+      if ((rowExpansionConfig == null ? void 0 : rowExpansionConfig.closeothers) || pendingRowExpandRef.current.has(rowId) && expandedRowsRef.current.has(rowId)) {
         pendingRowExpandRef.current.delete(rowId);
         if (rowExpansionConfig == null ? void 0 : rowExpansionConfig.onRowexpand) {
           setTimeout(() => {
             var _a;
             (_a = rowExpansionConfig.onRowexpand) == null ? void 0 : _a.call(rowExpansionConfig, {}, {}, cleanRowData(rowData), instance);
-          }, 500);
+          }, 0);
         }
       }
     },
-    [rowExpansionConfig]
+    [rowExpansionConfig, indexExpandedInstances]
   );
   const toggleRowExpansion = useCallback(
     (rowId, rowData) => {
       var _a, _b;
-      if (!rowExpansionConfig || !rowExpansionConfig.show) return;
+      if (!rowExpansionConfig) return;
+      const rowConfig = getRowExpansionConfig(rowExpansionConfig, rowId, rowData);
+      if (!(rowConfig == null ? void 0 : rowConfig.show)) return;
       const isCurrentlyExpanded = expandedRowsRef.current.has(rowId);
       if (!isCurrentlyExpanded) {
-        if (rowExpansionConfig.onBeforerowexpand) {
+        if (rowConfig.onBeforerowexpand) {
           let defaultPrevented = false;
           const event = {
             preventDefault: () => {
@@ -47,8 +59,8 @@ const useRowExpansion = ({
               return defaultPrevented;
             }
           };
-          (_a = rowExpansionConfig.onBeforerowexpand) == null ? void 0 : _a.call(
-            rowExpansionConfig,
+          (_a = rowConfig.onBeforerowexpand) == null ? void 0 : _a.call(
+            rowConfig,
             event,
             {},
             cleanRowData(rowData),
@@ -58,33 +70,31 @@ const useRowExpansion = ({
         }
         setExpandedRows((prev) => {
           const newExpandedRows = new Set(prev);
-          if (rowExpansionConfig.closeothers) {
+          if (rowConfig.closeothers) {
             newExpandedRows.forEach((otherId) => {
               pendingRowExpandRef.current.delete(otherId);
             });
             newExpandedRows.clear();
           }
           newExpandedRows.add(rowId);
-          if (rowExpansionConfig.renderPartial) {
+          if (rowConfig.renderPartial) {
             pendingRowExpandRef.current.add(rowId);
-          } else {
-            if (rowExpansionConfig.onRowexpand) {
-              setTimeout(() => {
-                var _a2;
-                (_a2 = rowExpansionConfig.onRowexpand) == null ? void 0 : _a2.call(
-                  rowExpansionConfig,
-                  {},
-                  {},
-                  cleanRowData(rowData),
-                  rowDefInstancesRef.current[rowId] || {}
-                );
-              }, 0);
-            }
+          } else if (rowConfig.onRowexpand) {
+            setTimeout(() => {
+              var _a2;
+              (_a2 = rowConfig.onRowexpand) == null ? void 0 : _a2.call(
+                rowConfig,
+                {},
+                {},
+                cleanRowData(rowData),
+                rowDefInstancesRef.current[rowId] || {}
+              );
+            }, 0);
           }
           return newExpandedRows;
         });
       } else {
-        if (rowExpansionConfig.onBeforerowcollapse) {
+        if (rowConfig.onBeforerowcollapse) {
           let defaultPrevented = false;
           const event = {
             preventDefault: () => {
@@ -94,8 +104,8 @@ const useRowExpansion = ({
               return defaultPrevented;
             }
           };
-          (_b = rowExpansionConfig.onBeforerowcollapse) == null ? void 0 : _b.call(
-            rowExpansionConfig,
+          (_b = rowConfig.onBeforerowcollapse) == null ? void 0 : _b.call(
+            rowConfig,
             event,
             {},
             cleanRowData(rowData),
@@ -107,10 +117,10 @@ const useRowExpansion = ({
           const newExpandedRows = new Set(prev);
           newExpandedRows.delete(rowId);
           pendingRowExpandRef.current.delete(rowId);
-          if (rowExpansionConfig.onRowcollapse) {
+          if (rowConfig.onRowcollapse) {
             setTimeout(() => {
               var _a2;
-              (_a2 = rowExpansionConfig.onRowcollapse) == null ? void 0 : _a2.call(rowExpansionConfig, {}, {}, cleanRowData(rowData));
+              (_a2 = rowConfig.onRowcollapse) == null ? void 0 : _a2.call(rowConfig, {}, {}, cleanRowData(rowData));
             }, 0);
           }
           return newExpandedRows;

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

@@ -46,7 +46,6 @@ const useRowHandlers = ({
       useRadioSelect,
       useMultiSelect,
       isrowselectable,
-      listener,
       name
     ]
   );

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

@@ -70,7 +70,6 @@ const useServerSideSorting = ({
       onError,
       filterFields,
       logicalOp,
-      listener,
       name
     ]
   );

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

@@ -39,7 +39,8 @@ import {
   createRowIndexColumn,
   createDataColumns,
   createEditingActionButtons,
-  getActionColumnSize
+  getActionColumnSize,
+  ActionCell
 } from "../utils/columnBuilder";
 import { distributeColumnWidths } from "../utils/columnWidthDistribution";
 import { useResponsiveColumns } from "./useResponsiveColumns";
@@ -208,13 +209,16 @@ const useTableColumns = ({
       const rowId = ((_a = row == null ? void 0 : row.original) == null ? void 0 : _a._wmTableRowId) || (row == null ? void 0 : row.id);
       const isEditingThisRow = isRowEditing(rowId);
       const shouldRenderEditableCell = (editmode === "inline" || editmode === "quickedit") && isEditingThisRow && !wmColumn.readonly;
-      return /* @__PURE__ */ jsx(Box, { "data-col-identifier": wmColumn.field, children: shouldRenderEditableCell ? renderEditableCell(wmColumn, row.original, rowId) : renderDisplayCell(wmColumn, row.original, listener, cellState) });
+      return /* @__PURE__ */ jsx("span", { "data-col-identifier": wmColumn.field, children: shouldRenderEditableCell ? renderEditableCell(wmColumn, row.original, rowId) : renderDisplayCell(wmColumn, row.original, listener, cellState) });
     },
-    [editmode, editingRowId, isRowEditing, renderEditableCell, cellState, listener]
+    [editmode, isRowEditing, renderEditableCell, cellState]
   );
   const filteredRowActions = useMemo(() => {
     if (editmode === "quickedit") {
-      return filter(rowActions, (action) => action.key === "deleterow" || action.action === "delete");
+      return filter(
+        rowActions,
+        (action) => action.key === "deleterow" || action.action === "delete" || action.key === "updaterow"
+      );
     }
     return rowActions;
   }, [rowActions, editmode]);
@@ -256,7 +260,6 @@ const useTableColumns = ({
       saveEditing,
       cancelEditing,
       deleteRowAction,
-      listener,
       selectionHandlers
     ]
   );
@@ -277,13 +280,15 @@ const useTableColumns = ({
           size: columnSize,
           minSize,
           enableResizing: true,
-          cell: renderActionCell,
+          cell: ActionCell,
           enableSorting: manualActionColumn.sortable !== false,
-          meta: __spreadValues({
+          meta: __spreadProps(__spreadValues({
             textAlign: manualActionColumn.textalignment,
             backgroundColor: manualActionColumn.backgroundcolor,
             className: manualActionColumn.colClass
-          }, manualActionColumn.styles)
+          }, manualActionColumn.styles), {
+            _actions: { renderActionCell }
+          })
         };
       } else if (rowActions.length > 0 && (isDynamicTable || editmode !== "none")) {
         return {
@@ -293,7 +298,10 @@ const useTableColumns = ({
           minSize,
           maxSize: size,
           enableResizing: false,
-          cell: renderActionCell
+          cell: ActionCell,
+          meta: {
+            _actions: { renderActionCell }
+          }
         };
       }
       return null;

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

@@ -1,3 +1,22 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import React, { useState, useCallback, useRef, useMemo, useEffect } from "react";
 import { isEqual } from "lodash-es";
 import { addUniqueRowIds, extractDataArray, TABLE_MESSAGES, INTERNAL_PROPERTIES } from "../utils";
@@ -39,8 +58,18 @@ const useTableData = ({
   listener,
   widgetName
 }) => {
+  const rowIdCacheRef = useRef([]);
   const processedDataset = useMemo(() => {
-    const withIds = addUniqueRowIds(extractDataArray(dataset));
+    const extracted = extractDataArray(dataset);
+    const cachedIds = rowIdCacheRef.current;
+    const prestamped = extracted.map((item, i) => {
+      if (!item || typeof item !== "object" || item._wmTableRowId || item.id || item.ID || item.Id || !cachedIds[i]) {
+        return item;
+      }
+      return __spreadProps(__spreadValues({}, item), { _wmTableRowId: cachedIds[i] });
+    });
+    const withIds = addUniqueRowIds(prestamped);
+    rowIdCacheRef.current = withIds.map((r) => r == null ? void 0 : r._wmTableRowId);
     return removeEmptyRecords(withIds);
   }, [dataset]);
   const [internalDataset, setInternalDataset] = useState(processedDataset);
@@ -89,7 +118,6 @@ const useTableData = ({
     deletemessage,
     errormessage,
     isServerSidePagination,
-    listener,
     widgetName
   ]);
   const handleCancelDelete = useCallback(() => {

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

@@ -586,7 +586,6 @@ const useTableEdit = ({
     cancelEditing,
     resetValidationState,
     incrementSessionKey,
-    listener,
     sessionKey,
     hasRowExpansion,
     expansionPosition

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

@@ -26,6 +26,7 @@ declare const WmTableStandalone: React.ComponentType<{
     title?: string;
     subheading?: string;
     iconclass?: string;
+    iconurl?: string;
     dataset?: any;
     navigation?: import("../list/props").INavigation;
     isdynamictable?: boolean;
@@ -141,6 +142,7 @@ declare const WmTableStandalone: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmTableStandalone as WmTable };
 declare const WmTable: React.ComponentType<{
@@ -167,6 +169,7 @@ declare const WmTable: React.ComponentType<{
     title?: string;
     subheading?: string;
     iconclass?: string;
+    iconurl?: string;
     dataset?: any;
     navigation?: import("../list/props").INavigation;
     isdynamictable?: boolean;
@@ -282,6 +285,7 @@ declare const WmTable: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 /**
  * The WmTable component is used to display data in a tabular format.

package/components/data/table/index.js

@@ -35,6 +35,7 @@ import React, {
   memo,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useState,
   useRef
@@ -42,7 +43,7 @@ import React, {
 import {
   WmSkeleton,
   SKELETON_REGISTRY,
-  shouldShowSkeleton
+  useShouldShowSkeleton
 } from "../../common/wm-skeleton";
 import {
   useReactTable,
@@ -88,9 +89,14 @@ import {
   saveTableState,
   clearTableState,
   addUniqueRowIds,
-  cleanRowData
+  cleanRowData,
+  getDomHiddenColStyle
 } from "./utils";
 import { hasTableGroups } from "./utils/groupHeaderUtils";
+import {
+  buildExpansionColSpec,
+  getExpansionColumnInsertIndex
+} from "./utils/expansionColumn";
 import { handleNewRowNavigation } from "./utils";
 import {
   TablePanelHeading,
@@ -134,6 +140,7 @@ const WmTableComponent = memo(
       title,
       subheading,
       iconclass,
+      iconurl,
       exportOptions = [],
       shownavigation = true,
       onDemandLoad = false,
@@ -214,6 +221,7 @@ const WmTableComponent = memo(
       "title",
       "subheading",
       "iconclass",
+      "iconurl",
       "exportOptions",
       "shownavigation",
       "onDemandLoad",
@@ -470,14 +478,7 @@ const WmTableComponent = memo(
       children,
       listener
     });
-    const {
-      wmTableColumns,
-      tableStructure,
-      rowActions,
-      headerActions,
-      footerActions,
-      rowExpansionConfig
-    } = useMemo(() => {
+    const { wmTableColumns, tableStructure, headerActions, footerActions, rowExpansionConfig } = useMemo(() => {
       const allTableActions = parseTableActions(children);
       const headerActions2 = allTableActions.filter((action) => {
         const position = action.position || "footer";
@@ -495,13 +496,13 @@ const WmTableComponent = memo(
       return {
         wmTableColumns: finalColumns,
         tableStructure: structure,
-        rowActions: parseTableRowActions(children),
         tableActions: allTableActions,
         headerActions: headerActions2,
         footerActions: footerActions2,
         rowExpansionConfig: parseTableRowExpansion(children)
       };
     }, [children, internalDataset, isDynamicTable, dynamicColumns]);
+    const rowActions = useMemo(() => parseTableRowActions(children), [children]);
     const [columnsVersion, setColumnsVersion] = useState(0);
     const [columnOverrides, setColumnOverrides] = useState(
       {}
@@ -555,7 +556,7 @@ const WmTableComponent = memo(
       updatemessage,
       errormessage,
       showToast,
-      hasRowExpansion: rowExpansionConfig ? rowExpansionConfig.show : false,
+      hasRowExpansion: rowExpansionConfig ? true : false,
       expansionPosition: rowExpansionConfig ? parseInt(String(rowExpansionConfig.position || "0"), 10) : 0,
       datasource,
       binddataset,
@@ -683,11 +684,9 @@ const WmTableComponent = memo(
       const selectionColumn = buildSelectionColumns({
         useRadioSelect,
         useMultiSelect,
-        selectedRowIds,
         handleRadioSelection,
         handleMultiSelection,
         handleSelectAll,
-        internalDataset,
         radioselecttitle,
         radioselectarialabel,
         multiselecttitle,
@@ -702,8 +701,6 @@ const WmTableComponent = memo(
       baseColumns,
       useRadioSelect,
       useMultiSelect,
-      selectedRowIds,
-      internalDataset,
       handleRadioSelection,
       handleMultiSelection,
       handleSelectAll,
@@ -758,6 +755,20 @@ const WmTableComponent = memo(
       columnSource: columnsProxy,
       listenerRef
     });
+    const [pendingDatarender, setPendingDatarender] = useState(false);
+    const queueOnDatarenderAfterPaint = useCallback(() => {
+      if (!onDatarender) return;
+      setPendingDatarender(true);
+    }, [onDatarender]);
+    const invokeOnDatarender = useCallback(() => {
+      var _a2;
+      if (!onDatarender) return;
+      if (name && (listener == null ? void 0 : listener.Widgets[name]) && tableContainerRef.current) {
+        listener.Widgets[name].nativeElement = tableContainerRef.current;
+      }
+      const data = internalDataset;
+      onDatarender((_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name], { $data: data, data });
+    }, [onDatarender, name]);
     columnsStateRef.current = columns;
     const columnsForTable = useMemo(() => {
       const base = columnsStateRef.current || [];
@@ -766,7 +777,7 @@ const WmTableComponent = memo(
         const override = field ? columnOverrides[field] || {} : {};
         return __spreadValues(__spreadValues(__spreadValues({}, col), override), Object.keys(override).length > 0 ? { meta: __spreadValues(__spreadValues({}, col.meta), override) } : {});
       });
-    }, [columns, columnOverrides, columnsVersion, editingRowId]);
+    }, [columns, columnOverrides, columnsVersion]);
     const ColClassSignature = useMemo(() => {
       try {
         return (columnsForTable || []).map((col) => {
@@ -943,7 +954,7 @@ const WmTableComponent = memo(
           listener.Widgets[name].dataNavigator = paginationWidget;
         }
       },
-      [name, listener]
+      [name]
     );
     const sortInfoForExport = useMemo(() => {
       if (sorting.length > 0) {
@@ -1086,11 +1097,18 @@ const WmTableComponent = memo(
         prevPageIndexRef.current = currentPageIndex;
         if (!isEqual(prevDatasetRef.current, internalDataset)) {
           prevDatasetRef.current = internalDataset;
+          const data = internalDataset.map((row) => {
+            if (row && typeof row === "object") {
+              const _a3 = row, { _wmTableRowId, getProperty } = _a3, rest2 = __objRest(_a3, ["_wmTableRowId", "getProperty"]);
+              return rest2;
+            }
+            return row;
+          });
           if (onBeforedatarender) {
             onBeforedatarender(
               (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[name],
               // widget reference
-              internalDataset,
+              data,
               // data
               columnsProxy
               // columns (including dynamic ones)
@@ -1099,28 +1117,17 @@ const WmTableComponent = memo(
               (key) => columnsProxy[key].customExpression
             );
             if (customExprKeys.length > 0) {
-              void mergeParsedCustomColumns().finally(() => {
-              });
+              void mergeParsedCustomColumns().finally(queueOnDatarenderAfterPaint);
+            } else {
+              queueOnDatarenderAfterPaint();
             }
             const nextRows = internalDataset.map(
               (r) => typeof r === "object" && r !== null ? __spreadValues({}, r) : r
             );
             setInternalDataset(nextRows);
+          } else if (onDatarender) {
+            queueOnDatarenderAfterPaint();
           }
-          requestAnimationFrame(() => {
-            var _a3;
-            if (onDatarender) {
-              if (name && (listener == null ? void 0 : listener.Widgets[name]) && tableContainerRef.current) {
-                listener.Widgets[name].nativeElement = tableContainerRef.current;
-              }
-              onDatarender(
-                (_a3 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a3[name],
-                // widget reference to match Angular format
-                { $data: internalDataset, data: internalDataset }
-                // match Angular's format with both $data and data
-              );
-            }
-          });
         }
       }
     }, [
@@ -1133,8 +1140,14 @@ const WmTableComponent = memo(
       table.getState().pagination.pageIndex,
       setInternalDataset,
       columnsProxy,
-      mergeParsedCustomColumns
+      mergeParsedCustomColumns,
+      queueOnDatarenderAfterPaint
     ]);
+    useLayoutEffect(() => {
+      if (!onDatarender || !pendingDatarender) return;
+      setPendingDatarender(false);
+      invokeOnDatarender();
+    }, [pendingDatarender, invokeOnDatarender, onDatarender]);
     useEffect(() => {
       if (!onBeforedatarender) return;
       if (internalDataset.length === 0) return;
@@ -1260,7 +1273,7 @@ const WmTableComponent = memo(
         }
         deleteRecord(row, tableRef.current);
       },
-      [deleteRecord, onBeforerowdelete, listener, name, internalDataset]
+      [deleteRecord, onBeforerowdelete, name, internalDataset]
     );
     const refresh = useCallback(
       async (newData = false) => {
@@ -1404,18 +1417,48 @@ const WmTableComponent = memo(
       const headerGroups = table.getHeaderGroups();
       const leafHeaderGroup = headerGroups.length ? headerGroups[headerGroups.length - 1] : void 0;
       const leafHeaders = ((leafHeaderGroup == null ? void 0 : leafHeaderGroup.headers) || []).filter((h) => !h.isPlaceholder);
-      const base = leafHeaders.map((h) => ({
-        key: h.column.id,
-        width: `${h.column.getSize()}px`
-      }));
+      const base = leafHeaders.map((h) => {
+        const meta = h.column.columnDef.meta;
+        const hiddenColStyle = getDomHiddenColStyle(meta);
+        const w = `${h.column.getSize()}px`;
+        return {
+          key: h.column.id,
+          width: hiddenColStyle ? void 0 : w,
+          style: hiddenColStyle != null ? hiddenColStyle : { width: w },
+          domHidden: !!hiddenColStyle
+        };
+      });
+      if (rowExpansionConfig) {
+        const expansionInsertIndex = getExpansionColumnInsertIndex(
+          leafHeaders,
+          rowExpansionConfig,
+          {
+            appendForGroupedTable: !!(tableStructure && hasTableGroups(tableStructure))
+          }
+        );
+        if (expansionInsertIndex >= 0) {
+          base.splice(expansionInsertIndex, 0, __spreadProps(__spreadValues({}, buildExpansionColSpec(rowExpansionConfig.columnwidth)), {
+            domHidden: false
+          }));
+        }
+      }
       return base;
-    }, [table, columnSizing, columnsVersion, showheader, ColClassSignature]);
+    }, [
+      table,
+      columnSizing,
+      columnsVersion,
+      showheader,
+      ColClassSignature,
+      rowExpansionConfig,
+      tableStructure
+    ]);
     return /* @__PURE__ */ jsxs(
       Box,
       __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
         ref: tableContainerRef,
         hidden: props.hidden,
-        className: `app-grid app-panel panel app-datagrid ${className}`.trim()
+        className: `app-grid app-panel panel app-datagrid ${className}`.trim(),
+        "data-widget-id": props["data-widget-id"]
       }, { name }), { editmode }), { navigation }), { title }), {
         currentpage: table.getState().pagination.pageIndex + 1
       }), {
@@ -1427,6 +1470,8 @@ const WmTableComponent = memo(
               title,
               subheading,
               iconclass,
+              iconurl,
+              prefabName: props.prefabName,
               exportformat,
               headerActions,
               spacing,
@@ -1501,9 +1546,9 @@ const WmTableComponent = memo(
                               tableName: name
                             }
                           ),
-                          /* @__PURE__ */ jsx("colgroup", { children: colGroupSpec.map((c) => /* @__PURE__ */ jsx("col", { style: { width: c.width }, width: c.width }, c.key)) })
+                          /* @__PURE__ */ jsx("colgroup", { children: colGroupSpec.map((c) => /* @__PURE__ */ jsx("col", { style: c.style, width: c.width }, c.key)) })
                         ] }),
-                        internalDataset.length > 0 && /* @__PURE__ */ jsx(
+                        (internalDataset.length > 0 || !isTableLoading) && /* @__PURE__ */ jsx(
                           TableBodyComponent,
                           {
                             table,
@@ -1530,7 +1575,8 @@ const WmTableComponent = memo(
                             isAddingNewRow,
                             customExpressionColumns: customColumns,
                             customColumnsRevision,
-                            columnsVersion
+                            columnsVersion,
+                            registerRowDefInstance
                           }
                         ),
                         summaryRowEnabled && summaryRowDefs.length > 0 && /* @__PURE__ */ jsx(
@@ -1664,7 +1710,7 @@ const WmTableComponent = memo(
 );
 WmTableComponent.displayName = "WmTableComponent";
 const WmTableWithProvider = (props) => {
-  if (shouldShowSkeleton(props.loading, props.showSkeleton))
+  if (useShouldShowSkeleton(props.loading, props.showSkeleton))
     return /* @__PURE__ */ jsx(
       WmSkeleton,
       __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmTable"]), {

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

@@ -73,5 +73,6 @@ declare const _default: React.ComponentType<{
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }>;
 export default _default;

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

@@ -34,7 +34,6 @@ import Box from "@mui/material/Box";
 import { useWidgetProxy } from "../../../../context/WidgetProvider";
 import withStandalone from "../../../../higherOrder/withStandalone";
 function isWmTableChildType(displayName) {
-  console.log("displayName", displayName);
   return displayName === "WmTable" || displayName === "WmTableStandalone" || displayName === "withStandalone(WmTable)";
 }
 const WmLiveTable = (props) => {