@wavemaker-ai/react-runtime 1.0.0-rc.314 → 1.0.0-rc.319

package/components/data/form/form-field/index.js

@@ -18,42 +18,129 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { Fragment, jsx } from "react/jsx-runtime";
-import { memo, useEffect } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import clsx from "clsx";
 import isEqual from "lodash-es/isEqual";
 import get from "lodash-es/get";
-import withBaseWrapper from "../../../../higherOrder/withBaseWrapper";
 import BaseField from "./base-field";
 import { WmComposite } from "../../../input/composite";
+import { useWidgetProxy } from "../../../../context/WidgetProvider";
+import { createFormFieldProxy } from "../../../../core/proxy-service";
 const DEFAULT_CLASS = "ng-pristine ng-invalid ng-touched";
 const DEFAULT_COMPOSITE_CLASS = "app-composite-widget caption-left clearfix form-group live-field";
+const DATASET_SYNC_KEYS = [
+  "dataset",
+  "datafield",
+  "displayfield",
+  "displaylabel",
+  "searchkey"
+];
 const WmFormField = memo(
   (props) => {
-    var _a;
+    var _a, _b;
+    const { show = true, deferload } = props;
+    const [proxyProps, setProxyProps] = useState(__spreadProps(__spreadValues({}, props), {
+      show: show == null ? void 0 : show.toString(),
+      deferload: deferload == null ? void 0 : deferload.toString(),
+      datavalue: props.defaultvalue
+    }));
+    const fieldProxyRef = useRef(null);
+    const formProxy = useWidgetProxy(`${props.formName}`);
+    const overriddenItemsRef = useRef({});
+    const fieldKey = props.formKey || props.name;
+    const defaultValueRegisteredRef = useRef(false);
+    const formReady = (formProxy == null ? void 0 : formProxy.listener) !== void 0;
+    const reset = useCallback(
+      (value) => {
+        const field = fieldProxyRef.current;
+        if (field.readonly || field.disabled) return;
+        fieldProxyRef.current.datavalue = value != null ? value : "";
+        fieldProxyRef.current.value = value != null ? value : "";
+      },
+      [fieldKey]
+    );
+    const isNumber = useMemo(
+      () => props.type === "integer" || props.type === "number",
+      [props.type]
+    );
+    const onChangeHandler = useCallback(
+      (name, data) => {
+        Object.keys(data).forEach((key) => {
+          fieldProxyRef.current[key] = key === "datavalue" && isNumber ? Number(data[key]) : data[key];
+        });
+        setProxyProps((prev) => {
+          return __spreadValues(__spreadValues({}, prev), isNumber ? __spreadProps(__spreadValues({}, data), { datavalue: Number(data.datavalue) }) : data);
+        });
+      },
+      [isNumber]
+    );
     useEffect(() => {
-      if (props.name && props.destroy) {
-        props.destroy([props.name]);
+      if (!fieldKey || !formReady) return;
+      if (!formProxy.formWidgets) {
+        formProxy.formWidgets = {};
+        formProxy.formfields = {};
       }
-    }, []);
+      const mutableTarget = __spreadProps(__spreadValues({}, props), { reset, show, deferload });
+      const fieldProxy = createFormFieldProxy(
+        mutableTarget,
+        setProxyProps,
+        overriddenItemsRef,
+        formProxy
+      );
+      fieldProxyRef.current = fieldProxy;
+    }, [formReady]);
+    useEffect(() => {
+      if (!formReady || !fieldProxyRef.current) return;
+      if (defaultValueRegisteredRef.current) return;
+      defaultValueRegisteredRef.current = true;
+      fieldProxyRef.current.datavalue = props.defaultvalue;
+      fieldProxyRef.current.value = props.defaultvalue;
+      fieldProxyRef.current.defaultvalue = props.defaultvalue;
+    }, [props.defaultvalue]);
+    useEffect(() => {
+      var _a2;
+      const fieldProxy = fieldProxyRef.current;
+      if (!fieldProxy || !((_a2 = props.dataset) == null ? void 0 : _a2.length)) return;
+      DATASET_SYNC_KEYS.forEach((key) => {
+        const value = props[key];
+        if (value != null && fieldProxy[key] !== value) {
+          fieldProxy[key] = value;
+        }
+      });
+    }, [props.dataset, props.datafield, props.displayfield, props.displaylabel, props.searchkey]);
     function renderFormFields() {
-      var _a2, _b, _c;
+      var _a2, _b2, _c;
       if (props.formRef) {
         const errors = (_a2 = props.formRef) == null ? void 0 : _a2.errors;
-        const formKey = (_b = props.formKey) != null ? _b : props.name;
+        const formKey = (_b2 = props.formKey) != null ? _b2 : props.name;
         const fieldError = formKey && errors ? get(errors, formKey) : void 0;
         const invalid = Boolean(fieldError);
         const invalidCls = invalid ? " text-danger " : "";
-        return /* @__PURE__ */ jsx(Fragment, { children: (_c = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _c.call(props, __spreadProps(__spreadValues({}, props), {
+        return /* @__PURE__ */ jsx(Fragment, { children: (_c = props == null ? void 0 : props.renderFormFields) == null ? void 0 : _c.call(props, __spreadProps(__spreadValues(__spreadValues({}, proxyProps), overriddenItemsRef.current), {
           fieldError,
+          validators: props.validators,
+          asyncValidators: props.asyncValidators,
+          observe: props.observe,
           invalid,
-          invalidCls
+          invalidCls,
+          iswidget: "false",
+          onChangeHandler
         })) });
       } else {
         return null;
       }
     }
     const itemsPerRow = ((_a = props == null ? void 0 : props.formRef) == null ? void 0 : _a.itemsPerRow) || "";
-    if (props.hidden) {
+    if (!fieldProxyRef.current) {
+      return null;
+    }
+    const isDeferLoad = deferload === true;
+    const showValue = ((_b = proxyProps == null ? void 0 : proxyProps.show) == null ? void 0 : _b.toString()) !== "false";
+    if (!showValue && isDeferLoad) {
+      return null;
+    }
+    const shouldHide = !showValue && !isDeferLoad;
+    if (shouldHide) {
       return null;
     }
     return /* @__PURE__ */ jsx(
@@ -68,7 +155,6 @@ const WmFormField = memo(
         name: props.name,
         displayname: props.displayname,
         placeholder: props.placeholder,
-        hidden: props.hidden,
         "data-role": props.role || "form-field",
         children: /* @__PURE__ */ jsx(
           WmComposite,
@@ -89,7 +175,7 @@ const WmFormField = memo(
 );
 WmFormField.displayName = "WmFormField";
 const WmFormFieldStandalone = BaseField(WmFormField);
-var form_field_default = BaseField(withBaseWrapper(WmFormField));
+var form_field_default = BaseField(WmFormField);
 export {
   WmFormFieldStandalone as WmFormField,
   form_field_default as default

package/components/data/form/form-field/props.d.ts

@@ -1,5 +1,6 @@
 import { BaseProps, Prettify } from "@wavemaker-ai/react-runtime/higherOrder/props";
 export interface FormFieldProps {
+    name: string;
     /**
      * Whether the field is read-only.
      */
@@ -197,6 +198,13 @@ export interface FormFieldProps {
     formName: string;
     parentForm?: string;
     destroy?: (names: string[]) => void;
+    asyncValidators?: any[];
+    setValidators?: (validators: any[]) => void;
+    setAsyncValidators?: (asyncValidators: any[]) => void;
+    observe?: any[];
+    observeOn?: any[];
+    reset?: () => void;
+    setValidationMessage?: (message: string) => void;
 }
 /**
  * Combined props for the WmFormField component, including base WaveMaker props.

package/components/data/form/index.js

@@ -25,8 +25,21 @@ import WmFormHeader from "./form-header";
 import FormDynamicFieldsSection from "./form-dynamic-section";
 import { removeInvalidAttributes } from "../../../utils/attr";
 import withStandalone from "../../../higherOrder/withStandalone";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  shouldShowSkeleton
+} from "../../common/wm-skeleton";
 const WmForm = (props) => {
   var _a, _b, _c, _d;
+  if (shouldShowSkeleton(props.loading, props.showSkeleton))
+    return /* @__PURE__ */ jsx(
+      WmSkeleton,
+      __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmForm"]), {
+        className: props.className,
+        styles: props.styles
+      })
+    );
   const shouldHideHeader = props.isLayoutDialog || props.isInsideWizard;
   const shouldInjectDynamicFields = Array.isArray(props.metadata) && props.metadata.length > 0;
   return /* @__PURE__ */ jsxs(

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

@@ -19,6 +19,7 @@ declare const WmListStandalone: React.ComponentType<{
     columnalign?: import("./props").IColumnAlignment;
     multiselect?: boolean;
     loadingdatamsg?: string;
+    skeletonRows?: number;
     loadingicon?: string;
     maxsize?: number;
     statehandler?: StorageType;
@@ -67,9 +68,12 @@ declare const WmListStandalone: React.ComponentType<{
     gap?: string;
     columngap?: string;
     standalone?: boolean;
+    layoutWidth?: string;
+    layoutHeight?: string;
     hidden?: boolean;
     prefabName?: string;
     key?: string;
+    loading?: boolean;
     name?: string;
     id?: string;
     children?: React.ReactNode;
@@ -110,6 +114,7 @@ declare const WmListStandalone: React.ComponentType<{
     outbound?: Record<string, any>;
     formfield?: boolean;
     updateon?: string;
+    showSkeleton?: boolean;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmListStandalone as WmList };
 /**
@@ -171,5 +176,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

package/components/data/list/index.js

@@ -34,6 +34,11 @@ import { useWidgetProxy } from "../../../context/WidgetProvider";
 import { InlineNavigation } from "../pagination/components";
 import { NoDataMessage, useDragAndDrop } from "./components";
 import { AppSpinner } from "../../common";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  shouldShowSkeleton
+} from "../../common/wm-skeleton";
 import {
   useListData,
   useListState,
@@ -68,6 +73,7 @@ import { DataSource } from "../types";
 import isEqual from "lodash-es/isEqual";
 import { filterAutoLayoutClasses } from "../../../utils/style-utils";
 import withStandalone from "../../../higherOrder/withStandalone";
+import { useLayoutSize } from "../../../hooks/useLayoutSize";
 const WmList = (props) => {
   var _a, _b, _c, _d, _e;
   const {
@@ -155,6 +161,7 @@ const WmList = (props) => {
   } = props;
   const datasetHashRef = useRef([]);
   const [currentDataset, setCurrentDataset] = useState(null);
+  const ListWrapperRef = useRef(null);
   const Widgets = useWidgetProxy(void 0, standalone);
   const widgetInstance = Widgets[name];
   const effectiveStateHandlerForSubscription = navigation === LIST_NAVIGATION_TYPES.ON_DEMAND || navigation === LIST_NAVIGATION_TYPES.SCROLL ? "none" : statehandler;
@@ -458,6 +465,7 @@ const WmList = (props) => {
       }
     })();
   }, [datasource]);
+  useLayoutSize(ListWrapperRef, props.layoutWidth, props.layoutHeight);
   const showHorizontalScrollSentinel = showNavigation && navigation === LIST_NAVIGATION_TYPES.SCROLL && (direction === LIST_DIRECTION.HORIZONTAL || direction === "row");
   const hostAutoLayoutPrefixes = ["pos-", ...INSETION_POSITION, "zi-", "w-", "h-"];
   const wrapper_autoLayout_Classes = useMemo(
@@ -482,6 +490,15 @@ const WmList = (props) => {
     }),
     [direction, wrap, alignment, gap, columngap]
   );
+  if (shouldShowSkeleton(props.loading, props.showSkeleton))
+    return /* @__PURE__ */ jsx(
+      WmSkeleton,
+      __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmList"]), {
+        rows: props.skeletonRows,
+        className,
+        styles
+      })
+    );
   return /* @__PURE__ */ jsxs(
     Box,
     __spreadProps(__spreadValues({
@@ -496,6 +513,7 @@ const WmList = (props) => {
       "data-name": name
     }, { name }), {
       "data-navigation": navigation,
+      ref: ListWrapperRef,
       children: [
         /* @__PURE__ */ jsx(ListHeader, { title, subheading, iconclass }),
         /* @__PURE__ */ jsx(AppSpinner, { show: (_e = datasource == null ? void 0 : datasource.loading) != null ? _e : false, spinnermessages: [loadingdatamsg] }),

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

@@ -107,6 +107,11 @@ export interface ListProps<T = ListItemData> {
      * Message to display while loading data.
      */
     loadingdatamsg?: string;
+    /**
+     * Number of skeleton list items shown while loading.
+     * @default 5
+     */
+    skeletonRows?: number;
     /**
      * CSS class for the loading icon.
      */
@@ -285,6 +290,8 @@ export interface ListProps<T = ListItemData> {
      * Whether this is a standalone list.
      */
     standalone?: boolean;
+    layoutWidth?: string;
+    layoutHeight?: string;
 }
 /**
  * Props specific to the WmListItem component.

package/components/data/pagination/hooks/usePagination.js

@@ -165,7 +165,6 @@ const usePagination = ({
             return response;
           }).catch((error) => {
             isFetchingRef.current = false;
-            console.error("Error fetching page data:", error);
             setPaginationState((prev) => __spreadProps(__spreadValues({}, prev), {
               error: error.message || "Failed to fetch page data"
             }));

package/components/data/table/components/RowCells.js

@@ -58,12 +58,15 @@ const RowCells = memo(
       const columnId = ((_b = cell == null ? void 0 : cell.column) == null ? void 0 : _b.id) || ((_c = cell == null ? void 0 : cell.column.columnDef) == null ? void 0 : _c.accessorKey) || "";
       const colClass = getColClass(colClassExpression, rowData, columnId);
       const customRender = customExpressionColumns == null ? void 0 : customExpressionColumns[columnId];
+      const hasCustomCellContent = !!customRender;
+      const cellValue = cell.getValue();
+      const cellTitle = hasCustomCellContent ? void 0 : cellValue != null && cellValue !== "" ? String(cellValue) : "";
       return /* @__PURE__ */ jsxs(Fragment2, { children: [
         hasExpansion && cellIndex === expansionInsertIndex && renderExpansionCell(rowId, rowData),
         /* @__PURE__ */ jsx(
           TableCell,
           {
-            title: cell.getValue() ? String(cell.getValue()) : "",
+            title: cellTitle,
             role: "cell",
             tabIndex: 0,
             "data-col-id": cellIndex,

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

@@ -19,12 +19,14 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import React, { useMemo } from "react";
 import { generateColumnsFromData, isValidDataForColumns } from "../utils/dynamic-columns";
+import { getChildComponentDisplayName } from "../utils";
 const hasTableColumnsInChildren = (children) => {
   let found = false;
   React.Children.forEach(children, (child) => {
     if (!(child == null ? void 0 : child.props)) return;
     const name = child.props.name || "";
-    if (name.includes("wm_table_column") || name.includes("col_")) {
+    const displayName = getChildComponentDisplayName(child);
+    if (name.includes("wm_table_column") || name.includes("col_") || displayName.includes("WmTableColumn")) {
       found = true;
     } else if (name.includes("group")) {
       if (hasTableColumnsInChildren(child.props.children)) {

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

@@ -81,4 +81,6 @@ export declare const useResponsiveColumns: (columns: WmTableColumnProps[]) => {
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }[];

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

@@ -53,6 +53,8 @@ declare const WmTableStandalone: React.ComponentType<{
     errormessage?: string;
     nodatamessage?: string;
     loadingdatamsg?: string;
+    skeletonRows?: number;
+    skeletonColumns?: number;
     insertmessage?: string;
     updatemessage?: string;
     deletemessage?: string;
@@ -137,6 +139,8 @@ declare const WmTableStandalone: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 } & import("@wavemaker-ai/react-runtime/higherOrder/withStandalone").WithStandaloneProps>;
 export { WmTableStandalone as WmTable };
 declare const WmTable: React.ComponentType<{
@@ -190,6 +194,8 @@ declare const WmTable: React.ComponentType<{
     errormessage?: string;
     nodatamessage?: string;
     loadingdatamsg?: string;
+    skeletonRows?: number;
+    skeletonColumns?: number;
     insertmessage?: string;
     updatemessage?: string;
     deletemessage?: string;
@@ -274,6 +280,8 @@ declare const WmTable: React.ComponentType<{
     formfield?: boolean;
     updateon?: string;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 /**
  * The WmTable component is used to display data in a tabular format.

package/components/data/table/index.js

@@ -39,6 +39,11 @@ import React, {
   useState,
   useRef
 } from "react";
+import {
+  WmSkeleton,
+  SKELETON_REGISTRY,
+  shouldShowSkeleton
+} from "../../common/wm-skeleton";
 import {
   useReactTable,
   getCoreRowModel,
@@ -396,7 +401,7 @@ const WmTableComponent = memo(
           initialSortState: persisted.sort || void 0
         };
       }
-      const initialPageSize2 = defaultPageSizeFromOptions !== void 0 ? defaultPageSizeFromOptions : actualPageSize || pagesize;
+      const initialPageSize2 = allowpagesizechange ? defaultPageSizeFromOptions != null ? defaultPageSizeFromOptions : actualPageSize : pagesize;
       return {
         initialPage: 1,
         initialPageSize: initialPageSize2,
@@ -1392,6 +1397,9 @@ const WmTableComponent = memo(
     useEffect(() => {
       updateSelectedItem();
     }, [activeRowIds, selectedRowIds, useRadioSelect, useMultiSelect, internalDataset, name]);
+    const isTableLoading = useMemo(() => {
+      return loading && navigation !== "On-Demand" && internalDataset.length === 0;
+    }, [loading, navigation, internalDataset.length]);
     const colGroupSpec = useMemo(() => {
       const headerGroups = table.getHeaderGroups();
       const leafHeaderGroup = headerGroups.length ? headerGroups[headerGroups.length - 1] : void 0;
@@ -1454,7 +1462,7 @@ const WmTableComponent = memo(
                 className: "app-grid-header-inner",
                 style: __spreadValues({ height: "100%", overflow: "auto", position: "relative" }, styles),
                 children: [
-                  loading && navigation !== "On-Demand" && /* @__PURE__ */ jsx(LoadingComponent, { message: loadingdatamsg }),
+                  isTableLoading && /* @__PURE__ */ jsx(LoadingComponent, { message: loadingdatamsg }),
                   /* @__PURE__ */ jsxs(
                     Table,
                     __spreadProps(__spreadValues({
@@ -1656,6 +1664,16 @@ const WmTableComponent = memo(
 );
 WmTableComponent.displayName = "WmTableComponent";
 const WmTableWithProvider = (props) => {
+  if (shouldShowSkeleton(props.loading, props.showSkeleton))
+    return /* @__PURE__ */ jsx(
+      WmSkeleton,
+      __spreadProps(__spreadValues({}, SKELETON_REGISTRY["WmTable"]), {
+        rows: props.skeletonRows,
+        columns: props.skeletonColumns,
+        className: props.className,
+        styles: props.styles
+      })
+    );
   return /* @__PURE__ */ jsx(EditedRowsProvider, { children: /* @__PURE__ */ jsx(WmTableComponent, __spreadValues({}, props)) });
 };
 WmTableWithProvider.displayName = "WmTable";

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

@@ -71,5 +71,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

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

@@ -230,6 +230,16 @@ export interface TableProps {
      * Message to display while loading data.
      */
     loadingdatamsg?: string;
+    /**
+     * Number of skeleton body rows shown while loading.
+     * @default 5
+     */
+    skeletonRows?: number;
+    /**
+     * Number of skeleton columns shown while loading.
+     * @default 4
+     */
+    skeletonColumns?: number;
     /**
      * Message to display after successful record insertion.
      */

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

@@ -61,5 +61,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

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

@@ -61,5 +61,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

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

@@ -61,5 +61,7 @@ declare const _default: React.ComponentType<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default _default;

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

@@ -65,5 +65,7 @@ export declare const WmTableRowAction: React.FC<{
     updateon?: string;
     dataset?: any;
     prefabName?: string;
+    loading?: boolean;
+    showSkeleton?: boolean;
 }>;
 export default WmTableRowAction;

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

@@ -8,7 +8,7 @@ export declare const createRowIndexColumn: () => ColumnDef<any>;
 /**
  * Creates data column definition from WmTableColumnProps
  */
-export declare const createDataColumn: (wmColumn: WmTableColumnProps, renderCell: (wmColumn: WmTableColumnProps, row: any) => React.ReactNode) => ColumnDef<any>;
+export declare const createDataColumn: (wmColumn: WmTableColumnProps, renderCell: (wmColumn: WmTableColumnProps, row: any) => React.ReactNode, index?: number) => ColumnDef<any>;
 /**
  * Creates column definitions from table columns
  */

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

@@ -45,7 +45,7 @@ const createRowIndexColumn = () => ({
   },
   enableSorting: false
 });
-const createDataColumn = (wmColumn, renderCell) => {
+const createDataColumn = (wmColumn, renderCell, index = 0) => {
   var _a, _b;
   const colClassProp = (_a = wmColumn.colClass) != null ? _a : wmColumn["col-class"];
   let columnSize;
@@ -54,8 +54,11 @@ const createDataColumn = (wmColumn, renderCell) => {
   } else if ((_b = wmColumn.styles) == null ? void 0 : _b.width) {
     columnSize = parseWidth(wmColumn.styles.width);
   }
+  const accessorKey = wmColumn.field || wmColumn.name;
+  const columnId = (accessorKey == null ? void 0 : accessorKey.replace(/\./g, "_")) || (typeof wmColumn.caption === "string" && wmColumn.caption ? wmColumn.caption : void 0) || `column_${index}`;
   return __spreadProps(__spreadValues({
-    accessorKey: wmColumn.field || wmColumn.name,
+    id: columnId,
+    accessorKey,
     // Use sortby field for sorting if provided, otherwise use the display field
     // Supports nested properties like "department.store.employee"
     accessorFn: wmColumn.sortby ? (row) => get(row, wmColumn.sortby || "") : void 0,
@@ -89,9 +92,9 @@ const createDataColumn = (wmColumn, renderCell) => {
 };
 const createDataColumns = (wmTableColumns, renderCell) => {
   const columns = [];
-  wmTableColumns.forEach((wmColumn) => {
+  wmTableColumns.forEach((wmColumn, index) => {
     if (wmColumn.show) {
-      columns.push(createDataColumn(wmColumn, renderCell));
+      columns.push(createDataColumn(wmColumn, renderCell, index));
     }
   });
   return columns;

package/components/data/table/utils/crud-handlers.js

@@ -27,8 +27,8 @@ import { DataSource } from "../../types";
 const getDatasourceInfo = async (datasource) => {
   var _a, _b;
   const [supportsCrud, isApiAware] = await Promise.all([
-    datasource.execute(DataSource.Operation.SUPPORTS_CRUD),
-    datasource.execute(DataSource.Operation.IS_API_AWARE)
+    datasource == null ? void 0 : datasource.execute(DataSource.Operation.SUPPORTS_CRUD),
+    datasource == null ? void 0 : datasource.execute(DataSource.Operation.IS_API_AWARE)
   ]);
   const currentPageNum = ((_b = (_a = datasource.pagination) == null ? void 0 : _a.number) != null ? _b : 0) + 1;
   const shouldUseServer = supportsCrud || !isApiAware || datasource.category === "wm.CrudVariable";
@@ -151,7 +151,7 @@ const handleNonApiAwareOperation = async (datasource, binddataset, formData, ope
   const path = binddataset.split(".");
   const parentIndex = parseInt(path[path.length - 1]);
   const parentPath = path.slice(0, -1).join(".");
-  return datasource.execute(DataSource.Operation[operation], {
+  return datasource == null ? void 0 : datasource.execute(DataSource.Operation[operation], {
     item: formData,
     path: parentPath,
     parentIndex
@@ -159,7 +159,7 @@ const handleNonApiAwareOperation = async (datasource, binddataset, formData, ope
 };
 const refreshDataSource = async (datasource, options) => {
   if (!datasource) throw new Error("Datasource is required");
-  return datasource.execute(DataSource.Operation.LIST_RECORDS, {
+  return datasource == null ? void 0 : datasource.execute(DataSource.Operation.LIST_RECORDS, {
     filterFields: options.filterFields || {},
     orderBy: options.orderBy,
     page: options.page || 1,
@@ -206,10 +206,10 @@ const handleServerOperation = async (options) => {
             isNewRow ? "ADD_ITEM" : "SET_ITEM"
           );
         } else {
-          response = await datasource.execute(
+          response = await (datasource == null ? void 0 : datasource.execute(
             isNewRow ? DataSource.Operation.INSERT_RECORD : DataSource.Operation.UPDATE_RECORD,
             { row: formData, skipNotification: true }
-          );
+          ));
           if (response.error) throw response.error;
           if (isNewRow && isServerSidePagination && datasource.pagination) {
             const { totalElements, size = 10 } = datasource.pagination;
@@ -292,10 +292,10 @@ const handleDeleteOperation = async (options) => {
         if (!isApiAware && binddataset) {
           await handleNonApiAwareOperation(datasource, binddataset, rowData, "REMOVE_ITEM");
         } else {
-          response = await datasource.execute(DataSource.Operation.DELETE_RECORD, {
+          response = await (datasource == null ? void 0 : datasource.execute(DataSource.Operation.DELETE_RECORD, {
             row: rowData,
             skipNotification: true
-          });
+          }));
           if (response.error) throw response.error;
         }
       }
@@ -312,10 +312,10 @@ const handleDeleteOperation = async (options) => {
       isServerSidePagination || false
     );
     if (isServerSidePagination && paginationResult.shouldRefresh && datasource) {
-      await datasource.invoke({
+      await (datasource == null ? void 0 : datasource.invoke({
         page: paginationResult.targetPage,
         pagesize: ((_b = datasource.pagination) == null ? void 0 : _b.size) || 10
-      });
+      }));
     }
     onRowDelete == null ? void 0 : onRowDelete(rowData, rowIndex, newDataset);
     return handleOperationResult("delete", response, null, {