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

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.
      */
@@ -748,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.
      */
@@ -885,6 +893,8 @@ export interface TablePanelHeadingProps {
     title?: string;
     subheading?: string;
     iconclass?: string;
+    iconurl?: string;
+    prefabName?: string;
     exportformat?: any[];
     headerActions: any[];
     spacing?: TablePanelSpacing;
@@ -930,11 +940,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 +1080,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,114 @@
 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 { 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,
+      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 +118,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,33 @@
-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`.
+ *
+ * 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;
+}
+/** 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

@@ -17,10 +17,36 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { Box } from "@mui/material";
 import { get } from "lodash-es";
 import { parseWidth } from ".";
+function RowIndexCell({ row, table }) {
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const isManualPagination = table.options.manualPagination;
+  let rowPositionOnPage;
+  if (isManualPagination) {
+    rowPositionOnPage = row.index;
+  } else {
+    const currentPageRows = table.getPaginationRowModel().rows;
+    rowPositionOnPage = currentPageRows.findIndex((pageRow) => pageRow.id === row.id);
+  }
+  const rowNumber = pageIndex * pageSize + rowPositionOnPage + 1;
+  return /* @__PURE__ */ jsx(Box, { "data-col-identifier": "rowIndex", children: rowNumber });
+}
+RowIndexCell.displayName = "RowIndexCell";
+function DataCell(ctx) {
+  var _a;
+  const { wmColumn, renderCell } = (_a = ctx.column.columnDef.meta) == null ? void 0 : _a._cell;
+  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.",
@@ -28,21 +54,7 @@ const createRowIndexColumn = () => ({
   minSize: 70,
   maxSize: 70,
   enableResizing: false,
-  cell: ({ row, table }) => {
-    const pageIndex = table.getState().pagination.pageIndex;
-    const pageSize = table.getState().pagination.pageSize;
-    const isManualPagination = table.options.manualPagination;
-    let rowPositionOnPage;
-    if (isManualPagination) {
-      rowPositionOnPage = row.index;
-    } else {
-      const paginationModel = table.getPaginationRowModel();
-      const currentPageRows = paginationModel.rows;
-      rowPositionOnPage = currentPageRows.findIndex((pageRow) => pageRow.id === row.id);
-    }
-    const rowNumber = pageIndex * pageSize + rowPositionOnPage + 1;
-    return /* @__PURE__ */ jsx(Box, { "data-col-identifier": "rowIndex", children: rowNumber });
-  },
+  cell: RowIndexCell,
   enableSorting: false
 });
 const createDataColumn = (wmColumn, renderCell, index = 0) => {
@@ -55,6 +67,7 @@ const createDataColumn = (wmColumn, renderCell, index = 0) => {
     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,
@@ -63,13 +76,11 @@ 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: ({ row }) => renderCell(wmColumn, row),
+    cell: DataCell,
     enableSorting: wmColumn.sortable,
     // Pass column styles and properties through meta for TableCell styling and filtering
     meta: __spreadProps(__spreadValues({
@@ -78,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,
@@ -86,16 +98,17 @@ const createDataColumn = (wmColumn, renderCell, index = 0) => {
       type: wmColumn.type || wmColumn.columntype || "string",
       searchable: wmColumn.searchable !== false,
       // Custom cell renderer for optimized rendering in MemoizedRowCells
-      renderCellContent: wmColumn == null ? void 0 : wmColumn.renderCellContent
+      renderCellContent: wmColumn == null ? void 0 : wmColumn.renderCellContent,
+      // DataCell reads renderCell + wmColumn from here at render time.
+      // Namespaced under _cell so RowCells can exclude it from the style spread.
+      _cell: { wmColumn, renderCell }
     })
   });
 };
 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;
 };
@@ -177,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.d.ts

@@ -16,7 +16,7 @@ export declare const hasExplicitWidth: (column: ColumnDef<any>) => boolean;
  * 3. Data columns with explicit widths (via column.width or column.styles.width) maintain their specified size
  *
  * @param columns - Array of column definitions
- * @param tableWidth - Total available table width (default: 1200px for calculations)
+ * @param tableWidth - Total available table width in pixels (must be > 0 to distribute)
  * @returns Modified column definitions with auto-sized data columns
  */
 export declare const distributeColumnWidths: (columns: ColumnDef<any>[], tableWidth?: number) => ColumnDef<any>[];

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

@@ -18,16 +18,29 @@ 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) => {
   return typeof column.size === "number" && column.size > 0;
 };
-const distributeColumnWidths = (columns, tableWidth = 1200) => {
+const distributeColumnWidths = (columns, tableWidth) => {
+  if (!tableWidth || tableWidth <= 0) {
+    return columns;
+  }
   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: 10;
-    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: 10,
-  // 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
+};