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

package/components/data/table/index.js

@@ -82,6 +82,7 @@ import {
   parseTableRowActions,
   parseTableActions,
   parseTableRowExpansion,
+  isRowExpansionVisible,
   getSpacingClasses,
   TABLE_CSS_CLASSES,
   TABLE_MESSAGES,
@@ -89,9 +90,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,
@@ -196,7 +202,8 @@ const WmTableComponent = memo(
       exportdatasize,
       onBeforeexport,
       onAfterexport,
-      styles
+      styles,
+      viewParent
     } = _c, rest = __objRest(_c, [
       "name",
       "dataset",
@@ -277,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}` : ""),
@@ -456,6 +464,8 @@ const WmTableComponent = memo(
       onRowdeselect,
       listener,
       navigation,
+      viewParent,
+      widgetRegistrationKey,
       onSyncSelectedItems
     });
     const { activeRowIds, setActiveRow, handleRowActiveClick, isRowActive } = useTableState({
@@ -473,14 +483,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,16 +498,21 @@ 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,
-        rowActions: parseTableRowActions(children),
         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(
       {}
@@ -558,8 +566,8 @@ const WmTableComponent = memo(
       updatemessage,
       errormessage,
       showToast,
-      hasRowExpansion: rowExpansionConfig ? rowExpansionConfig.show : 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,
@@ -582,7 +590,9 @@ const WmTableComponent = memo(
       useMultiSelect,
       isrowselectable,
       listener,
-      name
+      viewParent,
+      name,
+      widgetRegistrationKey
     });
     useEffect(() => {
       const currentPage = paginationState.pageIndex;
@@ -956,7 +966,7 @@ const WmTableComponent = memo(
           listener.Widgets[name].dataNavigator = paginationWidget;
         }
       },
-      [name, listener]
+      [name]
     );
     const sortInfoForExport = useMemo(() => {
       if (sorting.length > 0) {
@@ -1275,7 +1285,7 @@ const WmTableComponent = memo(
         }
         deleteRecord(row, tableRef.current);
       },
-      [deleteRecord, onBeforerowdelete, listener, name, internalDataset]
+      [deleteRecord, onBeforerowdelete, name, internalDataset]
     );
     const refresh = useCallback(
       async (newData = false) => {
@@ -1346,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])) {
@@ -1386,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]);
@@ -1420,17 +1422,47 @@ const WmTableComponent = memo(
       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) => {
+        const meta = h.column.columnDef.meta;
+        const hiddenColStyle = getDomHiddenColStyle(meta);
         const w = `${h.column.getSize()}px`;
-        return { key: h.column.id, width: w, style: { width: w } };
+        return {
+          key: h.column.id,
+          width: hiddenColStyle ? void 0 : w,
+          style: hiddenColStyle != null ? hiddenColStyle : { width: w },
+          domHidden: !!hiddenColStyle
+        };
       });
+      if (visibleRowExpansionConfig) {
+        const expansionInsertIndex = getExpansionColumnInsertIndex(
+          leafHeaders,
+          visibleRowExpansionConfig,
+          {
+            appendForGroupedTable: !!(tableStructure && hasTableGroups(tableStructure))
+          }
+        );
+        if (expansionInsertIndex >= 0) {
+          base.splice(expansionInsertIndex, 0, __spreadProps(__spreadValues({}, buildExpansionColSpec(visibleRowExpansionConfig.columnwidth)), {
+            domHidden: false
+          }));
+        }
+      }
       return base;
-    }, [table, columnSizing, columnsVersion, showheader, ColClassSignature]);
+    }, [
+      table,
+      columnSizing,
+      columnsVersion,
+      showheader,
+      ColClassSignature,
+      visibleRowExpansionConfig,
+      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
       }), {
@@ -1504,7 +1536,7 @@ const WmTableComponent = memo(
                               sorting,
                               columnSizing,
                               rowSelection,
-                              rowExpansionConfig,
+                              rowExpansionConfig: visibleRowExpansionConfig,
                               columnsVersion,
                               filterMode: filtermode,
                               columnFilters,
@@ -1520,7 +1552,7 @@ const WmTableComponent = memo(
                           ),
                           /* @__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,
@@ -1534,7 +1566,7 @@ const WmTableComponent = memo(
                             nodatamessage,
                             loadingdatamsg,
                             isLoading: datasource == null ? void 0 : datasource.loading,
-                            rowExpansionConfig,
+                            rowExpansionConfig: visibleRowExpansionConfig,
                             expandedRows,
                             toggleRowExpansion: handleToggleRowExpansion,
                             isRowExpanded,
@@ -1547,7 +1579,8 @@ const WmTableComponent = memo(
                             isAddingNewRow,
                             customExpressionColumns: customColumns,
                             customColumnsRevision,
-                            columnsVersion
+                            columnsVersion,
+                            registerRowDefInstance
                           }
                         ),
                         summaryRowEnabled && summaryRowDefs.length > 0 && /* @__PURE__ */ jsx(

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) => {

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

@@ -752,6 +752,10 @@ export interface TableRowProps {
      * Rendering function for content.
      */
     renderPartial?: (props: Record<string, any>, onLoad: () => void, currentItem: any) => ReactNode;
+    /**
+     * Per-row callback from codegen for row-bound attrs (e.g. show, disabled).
+     */
+    tableRowProps?: (rowData: any) => Partial<TableRowProps>;
     /**
      * Children components.
      */
@@ -1109,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 {
@@ -1257,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,
       {
@@ -64,13 +64,11 @@ 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(
+  return /* @__PURE__ */ jsx(Box, { sx: { display: "flex", 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: {

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { ColumnDef } from "@tanstack/react-table";
+import React, { type ReactElement } from "react";
+import { ColumnDef, CellContext } from "@tanstack/react-table";
 import { WmTableColumnProps, ActionButtonConfig } from "../props";
 /**
  * Per-column render config stored in `meta._cell`.
@@ -14,6 +14,20 @@ export interface DataCellMeta {
     wmColumn: WmTableColumnProps;
     renderCell: (wmColumn: WmTableColumnProps, row: any) => React.ReactNode;
 }
+/** Actions-column render config stored in `meta._actions` (namespaced like `_cell`). */
+export interface ActionCellMeta {
+    renderActionCell: (ctx: CellContext<any, unknown>) => React.ReactNode;
+}
+/**
+ * Stable cell renderer for the actions column. Same motivation as DataCell: flexRender
+ * uses `cell` as the component TYPE, so a changing renderActionCell identity would
+ * unmount/remount the row action buttons. Read the renderer from `meta._actions` instead.
+ */
+declare function ActionCell(ctx: CellContext<any, unknown>): ReactElement;
+declare namespace ActionCell {
+    var displayName: string;
+}
+export { ActionCell };
 /**
  * Creates row index column definition
  */

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

@@ -41,6 +41,12 @@ function DataCell(ctx) {
   return /* @__PURE__ */ jsx(Fragment, { children: renderCell(wmColumn, ctx.row) });
 }
 DataCell.displayName = "DataCell";
+function ActionCell(ctx) {
+  var _a;
+  const { renderActionCell } = (_a = ctx.column.columnDef.meta) == null ? void 0 : _a._actions;
+  return /* @__PURE__ */ jsx(Fragment, { children: renderActionCell(ctx) });
+}
+ActionCell.displayName = "ActionCell";
 const createRowIndexColumn = () => ({
   id: "rowIndex",
   header: "S. No.",
@@ -56,11 +62,12 @@ 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);
   }
   const accessorKey = wmColumn.field || wmColumn.name;
+  const isDomHidden = wmColumn.show === false;
   const columnId = (accessorKey == null ? void 0 : accessorKey.replace(/\./g, "_")) || (typeof wmColumn.caption === "string" && wmColumn.caption ? wmColumn.caption : void 0) || `column_${index}`;
   return __spreadProps(__spreadValues({
     id: columnId,
@@ -69,12 +76,10 @@ const createDataColumn = (wmColumn, renderCell, index = 0) => {
     // Supports nested properties like "department.store.employee"
     accessorFn: wmColumn.sortby ? (row) => get(row, wmColumn.sortby || "") : void 0,
     header: wmColumn.caption,
-    size: columnSize,
-    minSize: 50
-  }, columnSize ? {} : { maxSize: 500 }), {
-    // Only set maxSize for auto-sized columns
+    size: isDomHidden ? 0 : columnSize,
+    minSize: isDomHidden ? 0 : 50
+  }, isDomHidden ? { maxSize: 0 } : columnSize ? {} : { maxSize: 500 }), {
     enableResizing: true,
-    // Enable resizing for all data columns
     cell: DataCell,
     enableSorting: wmColumn.sortable,
     // Pass column styles and properties through meta for TableCell styling and filtering
@@ -84,6 +89,7 @@ const createDataColumn = (wmColumn, renderCell, index = 0) => {
       className: wmColumn == null ? void 0 : wmColumn.className,
       colClass: colClassProp
     }, wmColumn.styles), {
+      domHidden: isDomHidden,
       // Include widget types for filter rendering
       widgetType: wmColumn.widgetType,
       editWidgetType: wmColumn.editWidgetType,
@@ -102,9 +108,7 @@ const createDataColumn = (wmColumn, renderCell, index = 0) => {
 const createDataColumns = (wmTableColumns, renderCell) => {
   const columns = [];
   wmTableColumns.forEach((wmColumn, index) => {
-    if (wmColumn.show) {
-      columns.push(createDataColumn(wmColumn, renderCell, index));
-    }
+    columns.push(createDataColumn(wmColumn, renderCell, index));
   });
   return columns;
 };
@@ -186,6 +190,7 @@ const getActionColumnSize = (editmode) => {
   return editmode === "quickedit" ? { size: 80, minSize: 60 } : { size: 100, minSize: 80 };
 };
 export {
+  ActionCell,
   createDataColumn,
   createDataColumns,
   createDefaultColumnProps,

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

@@ -18,7 +18,14 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 const NON_DATA_COLUMN_IDS = ["radioSelect", "multiSelect", "rowIndex", "actions"];
+const isDomHiddenColumn = (column) => {
+  var _a;
+  return !!((_a = column.meta) == null ? void 0 : _a.domHidden);
+};
 const isDataColumn = (column) => {
+  if (isDomHiddenColumn(column)) {
+    return false;
+  }
   return !NON_DATA_COLUMN_IDS.includes(column.id || "");
 };
 const hasExplicitWidth = (column) => {
@@ -31,6 +38,9 @@ const distributeColumnWidths = (columns, tableWidth) => {
   let usedWidth = 0;
   let dataColumnsNeedingWidth = 0;
   columns.forEach((column) => {
+    if (isDomHiddenColumn(column)) {
+      return;
+    }
     if (!isDataColumn(column)) {
       const size = column.size || getDefaultColumnSize(column.id || "");
       usedWidth += size;

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

@@ -45,8 +45,4 @@ export declare const INTERACTIVE_CLASSES: readonly ["MuiInputBase", "MuiSelect",
 export declare const INTERACTIVE_ROLES: readonly ["button", "textbox", "combobox", "listbox"];
 export declare const INTERACTIVE_DATA_ROLES: readonly ["input", "select", "date", "time", "color", "editor", "checkbox", "radio", "slider", "chips", "rating"];
 export declare const INTERACTIVE_TAG_NAMES: readonly ["INPUT", "BUTTON", "SELECT", "TEXTAREA", "A", "LABEL"];
-export declare const DYNAMIC_COLUMNS_CONFIG: {
-    readonly maxColumns: 20;
-    readonly sampleSize: 3;
-};
 export declare const UNSUPPORTED_STATE_PERSISTENCE_TYPES: readonly string[];

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

@@ -112,19 +112,12 @@ const INTERACTIVE_TAG_NAMES = [
   "A",
   "LABEL"
 ];
-const DYNAMIC_COLUMNS_CONFIG = {
-  maxColumns: 20,
-  // Maximum number of columns to generate from data (matching Angular behavior)
-  sampleSize: 3
-  // Number of rows to sample for column detection
-};
 const UNSUPPORTED_STATE_PERSISTENCE_TYPES = [
   "Scroll",
   "On-Demand",
   "Inline"
 ];
 export {
-  DYNAMIC_COLUMNS_CONFIG,
   INTERACTIVE_CLASSES,
   INTERACTIVE_DATA_ROLES,
   INTERACTIVE_ROLES,

package/components/data/table/utils/dynamic-columns.d.ts

@@ -25,7 +25,7 @@ export interface PreparedFieldTerminal {
  *
  * Uses lodash `pickBy` to drop internal keys in one pass per object; recursion stays shallow.
  */
-export declare const prepareFieldsFromMergedRow: (mergedRow: Record<string, any>, upperBound?: number) => PreparedFieldTerminal[];
+export declare const prepareFieldsFromMergedRow: (mergedRow: Record<string, any>) => PreparedFieldTerminal[];
 /**
  * Generate column definitions from data array.
  * Uses Angular-style nested flattening (prepareFieldDefs) so dynamic tables and

package/components/data/table/utils/dynamic-columns.js

@@ -21,7 +21,6 @@ import isArray from "lodash-es/isArray";
 import pickBy from "lodash-es/pickBy";
 import startCase from "lodash-es/startCase";
 import { createDefaultColumnProps } from "./columnBuilder";
-import { DYNAMIC_COLUMNS_CONFIG } from "./constants";
 import { INTERNAL_PROPERTIES } from "./index";
 const INTERNAL_FIELD_PATTERNS = [
   "_wm",
@@ -93,11 +92,9 @@ function relatedFieldsFromKey(rawKey) {
 function isLeafColumnValue(value) {
   return value === null || value === void 0 || typeof value !== "object" || value instanceof Date || isArray(value) && !value[0];
 }
-const prepareFieldsFromMergedRow = (mergedRow, upperBound = DYNAMIC_COLUMNS_CONFIG.maxColumns) => {
+const prepareFieldsFromMergedRow = (mergedRow) => {
   const terminals = [];
-  let columnCount = 0;
   const pushTerminal = (fieldPath, relatedTable, relatedField) => {
-    if (columnCount >= upperBound) return;
     const displayName = displayNameForFieldPath(fieldPath);
     terminals.push({
       displayName,
@@ -106,14 +103,12 @@ const prepareFieldsFromMergedRow = (mergedRow, upperBound = DYNAMIC_COLUMNS_CONF
       relatedTable,
       relatedField: relatedField != null ? relatedField : displayName
     });
-    columnCount += 1;
   };
   const pushFieldDef = (node, prefix, depth) => {
-    if (columnCount >= upperBound || depth > MAX_FIELD_DEPTH || node == null) return;
+    if (depth > MAX_FIELD_DEPTH || node == null) return;
     if (!isPlainRecord(node)) return;
     const visible = pickBy(node, (_v, k) => !isInternalField(String(k)));
     forEach(visible, (value, rawKey) => {
-      if (columnCount >= upperBound) return;
       const path = prefix ? `${prefix}.${rawKey}` : rawKey;
       const rel = relatedFieldsFromKey(rawKey);
       if (isLeafColumnValue(value)) {
@@ -155,7 +150,7 @@ const generateColumnsFromData = (data) => {
   if (!merged) {
     return [];
   }
-  const terminals = prepareFieldsFromMergedRow(merged, DYNAMIC_COLUMNS_CONFIG.maxColumns);
+  const terminals = prepareFieldsFromMergedRow(merged);
   if (terminals.length === 0) {
     return [];
   }

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

@@ -0,0 +1,23 @@
+import type { CSSProperties } from "react";
+/** Minimal header shape for expansion insert-index calculation (TanStack Header-compatible). */
+export type ExpansionColumnHeaderLike = {
+    id: string;
+    column: {
+        id: string;
+        columnDef?: unknown;
+    };
+};
+/**
+ * Index at which the row-expansion `<th>` / `<td>` / `<col>` is inserted.
+ * Mirrors Angular datatable.js preparedHeaderData row-expansion placement.
+ */
+export declare function getExpansionColumnInsertIndex(headers: ReadonlyArray<ExpansionColumnHeaderLike>, rowExpansionConfig: {
+    position?: string | number;
+} | null | undefined, options?: {
+    appendForGroupedTable?: boolean;
+}): number;
+export declare function buildExpansionColSpec(columnwidth?: string): {
+    key: string;
+    width: string;
+    style: CSSProperties;
+};

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

@@ -0,0 +1,56 @@
+const SYSTEM_HEADER_IDS = /* @__PURE__ */ new Set([
+  "multiSelect",
+  "radioSelect",
+  "row-index",
+  "rowIndex",
+  "actions"
+]);
+function findFirstDataColumnIndex(headers) {
+  for (let i = 0; i < headers.length; i++) {
+    if (!SYSTEM_HEADER_IDS.has(headers[i].id)) {
+      return i;
+    }
+  }
+  return 0;
+}
+function getExpansionColumnInsertIndex(headers, rowExpansionConfig, options) {
+  if (!rowExpansionConfig) return -1;
+  if (options == null ? void 0 : options.appendForGroupedTable) {
+    return headers.length;
+  }
+  const position = rowExpansionConfig.position;
+  if (position === "-1" || position === -1) {
+    return Math.max(0, headers.length - 1);
+  }
+  if (typeof position === "number" || typeof position === "string" && !isNaN(Number(position))) {
+    return findFirstDataColumnIndex([...headers]) + Number(position);
+  }
+  if (typeof position === "string") {
+    const columnIndex = headers.findIndex((header) => {
+      var _a;
+      if (header.id === position || header.column.id === position) {
+        return true;
+      }
+      const accessorKey = (_a = header.column.columnDef) == null ? void 0 : _a.accessorKey;
+      if (accessorKey === position) {
+        return true;
+      }
+      const normalizedPosition = position.replace(/\./g, "_");
+      return header.id === normalizedPosition || header.column.id === normalizedPosition;
+    });
+    return columnIndex >= 0 ? columnIndex + 1 : 0;
+  }
+  return 0;
+}
+function buildExpansionColSpec(columnwidth) {
+  const w = columnwidth || "50px";
+  return {
+    key: "row-expansion",
+    width: w,
+    style: { width: w }
+  };
+}
+export {
+  buildExpansionColSpec,
+  getExpansionColumnInsertIndex
+};