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

package/components/data/table/components/TablePanelHeading.js

@@ -25,10 +25,13 @@ import { getButtonClasses } from "../utils";
 import WmMenu from "../../../navigation/menu";
 import { DataSource } from "../../types";
 import { isEmpty, values } from "lodash";
+import { WmAppIcon } from "../../../common/WmAppIcon";
 const TablePanelHeadingComponent = ({
   title,
   subheading,
   iconclass,
+  iconurl,
+  prefabName,
   exportformat = [],
   headerActions,
   spacing = "normal",
@@ -121,7 +124,16 @@ const TablePanelHeadingComponent = ({
     [datasource, columns, sortInfo, filterInfo, exportdatasize, onBeforeExport, listener]
   );
   return /* @__PURE__ */ jsx(Box, { className: "panel-heading", children: /* @__PURE__ */ jsxs(Box, { component: "h3", className: "panel-title", children: [
-    /* @__PURE__ */ jsx(Box, { className: "pull-left", children: iconclass && /* @__PURE__ */ jsx(Box, { component: "i", className: `app-icon panel-icon ${iconclass}` }) }),
+    /* @__PURE__ */ jsx(Box, { className: "pull-left", children: /* @__PURE__ */ jsx(
+      WmAppIcon,
+      {
+        iconclass,
+        iconurl,
+        prefabName,
+        defaultClasses: iconurl ? "panel-image-icon" : "panel-icon",
+        alt: "Table icon"
+      }
+    ) }),
     /* @__PURE__ */ jsxs(Box, { className: "pull-left", children: [
       title && /* @__PURE__ */ jsx(Box, { component: "div", className: "heading", children: title }),
       subheading && /* @__PURE__ */ jsx(Box, { component: "div", className: "description", children: subheading })
@@ -171,7 +183,7 @@ const TablePanelHeadingComponent = ({
 };
 TablePanelHeadingComponent.displayName = "TablePanelHeading";
 const TablePanelHeading = memo(TablePanelHeadingComponent, (prevProps, nextProps) => {
-  return prevProps.title === nextProps.title && prevProps.subheading === nextProps.subheading && prevProps.iconclass === nextProps.iconclass && prevProps.exportformat === nextProps.exportformat && prevProps.headerActions === nextProps.headerActions && prevProps.spacing === nextProps.spacing && prevProps.isGridEditMode === nextProps.isGridEditMode && prevProps.isLoading === nextProps.isLoading && prevProps.listener === nextProps.listener && prevProps.datasource === nextProps.datasource && prevProps.columns === nextProps.columns && prevProps.sortInfo === nextProps.sortInfo && prevProps.filterInfo === nextProps.filterInfo && prevProps.exportdatasize === nextProps.exportdatasize && prevProps.onBeforeExport === nextProps.onBeforeExport;
+  return prevProps.title === nextProps.title && prevProps.subheading === nextProps.subheading && prevProps.iconclass === nextProps.iconclass && prevProps.iconurl === nextProps.iconurl && prevProps.exportformat === nextProps.exportformat && prevProps.headerActions === nextProps.headerActions && prevProps.spacing === nextProps.spacing && prevProps.isGridEditMode === nextProps.isGridEditMode && prevProps.isLoading === nextProps.isLoading && prevProps.listener === nextProps.listener && prevProps.datasource === nextProps.datasource && prevProps.columns === nextProps.columns && prevProps.sortInfo === nextProps.sortInfo && prevProps.filterInfo === nextProps.filterInfo && prevProps.exportdatasize === nextProps.exportdatasize && prevProps.onBeforeExport === nextProps.onBeforeExport;
 });
 export {
   TablePanelHeading

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

@@ -83,4 +83,5 @@ export declare const useResponsiveColumns: (columns: WmTableColumnProps[]) => {
     prefabName?: string;
     loading?: boolean;
     showSkeleton?: boolean;
+    widget?: string;
 }[];

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

@@ -208,9 +208,9 @@ 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, listener]
   );
   const filteredRowActions = useMemo(() => {
     if (editmode === "quickedit") {

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);

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,
@@ -134,6 +135,7 @@ const WmTableComponent = memo(
       title,
       subheading,
       iconclass,
+      iconurl,
       exportOptions = [],
       shownavigation = true,
       onDemandLoad = false,
@@ -214,6 +216,7 @@ const WmTableComponent = memo(
       "title",
       "subheading",
       "iconclass",
+      "iconurl",
       "exportOptions",
       "shownavigation",
       "onDemandLoad",
@@ -683,11 +686,9 @@ const WmTableComponent = memo(
       const selectionColumn = buildSelectionColumns({
         useRadioSelect,
         useMultiSelect,
-        selectedRowIds,
         handleRadioSelection,
         handleMultiSelection,
         handleSelectAll,
-        internalDataset,
         radioselecttitle,
         radioselectarialabel,
         multiselecttitle,
@@ -702,8 +703,6 @@ const WmTableComponent = memo(
       baseColumns,
       useRadioSelect,
       useMultiSelect,
-      selectedRowIds,
-      internalDataset,
       handleRadioSelection,
       handleMultiSelection,
       handleSelectAll,
@@ -758,6 +757,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 +779,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) => {
@@ -1086,11 +1099,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 +1119,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 +1142,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;
@@ -1404,10 +1419,10 @@ 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 w = `${h.column.getSize()}px`;
+        return { key: h.column.id, width: w, style: { width: w } };
+      });
       return base;
     }, [table, columnSizing, columnsVersion, showheader, ColClassSignature]);
     return /* @__PURE__ */ jsxs(
@@ -1427,6 +1442,8 @@ const WmTableComponent = memo(
               title,
               subheading,
               iconclass,
+              iconurl,
+              prefabName: props.prefabName,
               exportformat,
               headerActions,
               spacing,
@@ -1501,7 +1518,7 @@ 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(
                           TableBodyComponent,
@@ -1664,7 +1681,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/props.d.ts

@@ -121,6 +121,10 @@ export interface TableProps {
      * CSS class for the table icon.
      */
     iconclass?: string;
+    /**
+     * URL for the table icon (.svg renders inline, other URLs as image).
+     */
+    iconurl?: string;
     /**
      * The collection of data items to display in the table.
      */
@@ -885,6 +889,8 @@ export interface TablePanelHeadingProps {
     title?: string;
     subheading?: string;
     iconclass?: string;
+    iconurl?: string;
+    prefabName?: string;
     exportformat?: any[];
     headerActions: any[];
     spacing?: TablePanelSpacing;
@@ -930,11 +936,13 @@ export interface ActionButtonConfig {
 export interface BuildSelectionColumnsProps {
     useRadioSelect: boolean;
     useMultiSelect: boolean;
-    selectedRowIds: string[];
+    /** @deprecated Header now reads from table.getIsAllRowsSelected() — no longer used internally. */
+    selectedRowIds?: string[];
     handleRadioSelection: (rowId: string, rowData?: any) => void;
     handleMultiSelection: (rowId: string, rowData: any, isSelected: boolean) => void;
     handleSelectAll: (isSelected: boolean) => void;
-    internalDataset: any[];
+    /** @deprecated Header now reads from table.getIsAllRowsSelected() — no longer used internally. */
+    internalDataset?: any[];
     radioselecttitle?: string;
     radioselectarialabel?: string;
     multiselecttitle?: string;
@@ -1068,6 +1076,7 @@ export interface UsePanelStructureProps {
     title?: string;
     subheading?: string;
     iconclass?: string;
+    iconurl?: string;
     exportformat?: any[];
     headerActions: any[];
     footerActions: any[];

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

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

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

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

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

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

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

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

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

@@ -1,3 +1,3 @@
 import { ColumnDef } from "@tanstack/react-table";
 import { BuildSelectionColumnsProps } from "../props";
-export declare const buildSelectionColumns: ({ useRadioSelect, useMultiSelect, selectedRowIds, handleRadioSelection, handleMultiSelection, handleSelectAll, internalDataset, radioselecttitle, radioselectarialabel, multiselecttitle, multiselectarialabel, tableName, }: BuildSelectionColumnsProps) => ColumnDef<any> | null;
+export declare const buildSelectionColumns: ({ useRadioSelect, useMultiSelect, handleRadioSelection, handleMultiSelection, handleSelectAll, radioselecttitle, radioselectarialabel, multiselecttitle, multiselectarialabel, tableName, }: BuildSelectionColumnsProps) => ColumnDef<any> | null;

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

@@ -1,49 +1,116 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Box, Radio, Checkbox, FormControlLabel, Tooltip } from "@mui/material";
 import { TABLE_MESSAGES } from "./constants";
+const getSelectionMeta = (ctx) => {
+  var _a, _b, _c, _d;
+  return (_d = (_c = (_b = (_a = ctx.column) == null ? void 0 : _a.columnDef) == null ? void 0 : _b.meta) == null ? void 0 : _c.selection) != null ? _d : {};
+};
+function RadioSelectCell(ctx) {
+  const { row } = ctx;
+  const rowId = row.id;
+  const isSelected = row.getIsSelected();
+  const { handleRadioSelection, radioselecttitle, radioselectarialabel, tableName } = getSelectionMeta(ctx);
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Tooltip, { title: radioselecttitle != null ? radioselecttitle : "", placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "radio app-radio", children: /* @__PURE__ */ jsx(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ jsx(
+        Radio,
+        {
+          checked: isSelected,
+          onChange: () => handleRadioSelection == null ? void 0 : handleRadioSelection(rowId, row.original),
+          value: rowId,
+          name: `wmRadioselect-${tableName != null ? tableName : "table"}`,
+          inputProps: {
+            "aria-label": radioselectarialabel
+          },
+          rowselectinput: "",
+          size: "small"
+        }
+      ),
+      label: "",
+      className: "caption"
+    }
+  ) }) }) });
+}
+RadioSelectCell.displayName = "RadioSelectCell";
+function MultiSelectCell(ctx) {
+  const { row } = 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: [
+    /* @__PURE__ */ jsx(Tooltip, { title: multiselecttitle != null ? multiselecttitle : "", placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: isSelected,
+        onChange: (e) => handleMultiSelection == null ? void 0 : handleMultiSelection(rowId, row.original, e.target.checked),
+        value: rowId,
+        name: "gridMultiSelect",
+        inputProps: {
+          "aria-label": multiselectarialabel,
+          role: "checkbox",
+          "aria-live": "assertive"
+        },
+        size: "small",
+        sx: {
+          padding: 0
+        }
+      }
+    ) }) }),
+    isSelected ? /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "assertive", children: "Row Selected" }) : /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "assertive", children: "Row Deselected" })
+  ] });
+}
+MultiSelectCell.displayName = "MultiSelectCell";
+function MultiSelectHeader({ table, column }) {
+  var _a, _b;
+  const isAllSelected = table.getIsAllRowsSelected();
+  const isSomeSelected = table.getIsSomeRowsSelected();
+  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(
+    Checkbox,
+    {
+      checked: isAllSelected,
+      indeterminate: isSomeSelected && !isAllSelected,
+      onChange: (e) => handleSelectAll == null ? void 0 : handleSelectAll(e.target.checked),
+      size: "small",
+      inputProps: {
+        "aria-label": "Select all rows"
+      },
+      sx: {
+        padding: 0
+      }
+    }
+  ) }) });
+}
+MultiSelectHeader.displayName = "MultiSelectHeader";
 const buildSelectionColumns = ({
   useRadioSelect,
   useMultiSelect,
-  selectedRowIds,
   handleRadioSelection,
   handleMultiSelection,
   handleSelectAll,
-  internalDataset,
   radioselecttitle = "",
   radioselectarialabel = TABLE_MESSAGES.radioSelectAriaLabel,
   multiselecttitle = "",
   multiselectarialabel = TABLE_MESSAGES.multiSelectAriaLabel,
   tableName = "table"
 }) => {
+  const selection = {
+    handleRadioSelection,
+    handleMultiSelection,
+    handleSelectAll,
+    radioselecttitle,
+    radioselectarialabel,
+    multiselecttitle,
+    multiselectarialabel,
+    tableName
+  };
   if (useRadioSelect) {
     return {
       id: "radioSelect",
       header: () => /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center" } }),
-      cell: ({ row }) => {
-        const rowId = row.id;
-        const isSelected = row.getIsSelected();
-        return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Tooltip, { title: radioselecttitle, placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "radio app-radio", children: /* @__PURE__ */ jsx(
-          FormControlLabel,
-          {
-            control: /* @__PURE__ */ jsx(
-              Radio,
-              {
-                checked: isSelected,
-                onChange: () => handleRadioSelection(rowId, row.original),
-                value: rowId,
-                name: `wmRadioselect-${tableName}`,
-                inputProps: {
-                  "aria-label": radioselectarialabel
-                },
-                rowselectinput: "",
-                size: "small"
-              }
-            ),
-            label: "",
-            className: "caption"
-          }
-        ) }) }) });
-      },
+      cell: RadioSelectCell,
+      meta: { selection },
       size: 40,
       minSize: 40,
       maxSize: 40,
@@ -53,50 +120,9 @@ const buildSelectionColumns = ({
   if (useMultiSelect) {
     return {
       id: "multiSelect",
-      header: () => {
-        const selectedCount = selectedRowIds.length;
-        const isAllSelected = selectedCount > 0 && selectedCount === internalDataset.length;
-        return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", justifyContent: "center", width: "100%" }, children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            checked: isAllSelected,
-            indeterminate: false,
-            onChange: (e) => handleSelectAll(e.target.checked),
-            size: "small",
-            inputProps: {
-              "aria-label": "Select all rows"
-            },
-            sx: {
-              padding: 0
-            }
-          }
-        ) }) });
-      },
-      cell: ({ row }) => {
-        const rowId = row.id;
-        const isSelected = row.getIsSelected();
-        return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "center" }, children: [
-          /* @__PURE__ */ jsx(Tooltip, { title: multiselecttitle, placement: "top", children: /* @__PURE__ */ jsx(Box, { className: "app-checkbox checkbox", children: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              checked: isSelected,
-              onChange: (e) => handleMultiSelection(rowId, row.original, e.target.checked),
-              value: rowId,
-              name: "gridMultiSelect",
-              inputProps: {
-                "aria-label": multiselectarialabel,
-                role: "checkbox",
-                "aria-live": "assertive"
-              },
-              size: "small",
-              sx: {
-                padding: 0
-              }
-            }
-          ) }) }),
-          isSelected ? /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "assertive", children: "Row Selected" }) : /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "assertive", children: "Row Deselected" })
-        ] });
-      },
+      header: MultiSelectHeader,
+      cell: MultiSelectCell,
+      meta: { selection },
       size: 40,
       minSize: 40,
       maxSize: 40,

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

@@ -1,6 +1,19 @@
 import React from "react";
 import { ColumnDef } from "@tanstack/react-table";
 import { WmTableColumnProps, ActionButtonConfig } from "../props";
+/**
+ * Per-column render config stored in `meta._cell`.
+ *
+ * Why nested under `_cell` instead of flat in `meta`:
+ * RowCells spreads `...otherMeta` into the TableCell `style` prop for WaveMaker style
+ * passthrough. Storing a function (`renderCell`) or a complex object (`wmColumn`) flat
+ * in meta would spread them into the DOM `style` attribute, producing React warnings.
+ * A single `_cell` key is destructured out in RowCells before the spread.
+ */
+export interface DataCellMeta {
+    wmColumn: WmTableColumnProps;
+    renderCell: (wmColumn: WmTableColumnProps, row: any) => React.ReactNode;
+}
 /**
  * Creates row index column definition
  */