@wavemaker-ai/react-runtime 1.0.0-next.27766

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

@@ -0,0 +1,134 @@
+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,
+  handleRadioSelection,
+  handleMultiSelection,
+  handleSelectAll,
+  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: RadioSelectCell,
+      meta: { selection },
+      size: 40,
+      minSize: 40,
+      maxSize: 40,
+      enableResizing: false
+    };
+  }
+  if (useMultiSelect) {
+    return {
+      id: "multiSelect",
+      header: MultiSelectHeader,
+      cell: MultiSelectCell,
+      meta: { selection },
+      size: 40,
+      minSize: 40,
+      maxSize: 40,
+      enableResizing: false
+    };
+  }
+  return null;
+};
+export {
+  buildSelectionColumns
+};

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

@@ -0,0 +1,62 @@
+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
+ */
+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, index?: number) => ColumnDef<any>;
+/**
+ * Creates column definitions from table columns
+ */
+export declare const createDataColumns: (wmTableColumns: WmTableColumnProps[], renderCell: (wmColumn: WmTableColumnProps, row: any) => React.ReactNode) => ColumnDef<any>[];
+/**
+ * Creates save/cancel/delete action buttons for editing mode
+ */
+export declare const createEditingActionButtons: () => ActionButtonConfig[];
+/**
+ * Creates a default WmTableColumnProps object for dynamic column generation
+ * @param field - The field name for the column
+ * @param displayName - The display name/caption for the column
+ * @param type - The data type of the column
+ * @param index - The column index
+ * @returns A complete WmTableColumnProps object with sensible defaults
+ */
+export declare const createDefaultColumnProps: (field: string, displayName: string, type: string, index: number) => WmTableColumnProps;
+/**
+ * Get action column size based on edit mode
+ */
+export declare const getActionColumnSize: (editmode: string) => {
+    size: number;
+    minSize: number;
+};

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

@@ -0,0 +1,200 @@
+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 { 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.",
+  size: 70,
+  minSize: 70,
+  maxSize: 70,
+  enableResizing: false,
+  cell: RowIndexCell,
+  enableSorting: false
+});
+const createDataColumn = (wmColumn, renderCell, index = 0) => {
+  var _a, _b;
+  const colClassProp = (_a = wmColumn.colClass) != null ? _a : wmColumn["col-class"];
+  let columnSize;
+  if (wmColumn.width) {
+    columnSize = parseInt(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,
+    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,
+    header: wmColumn.caption,
+    size: isDomHidden ? 0 : columnSize,
+    minSize: isDomHidden ? 0 : 50
+  }, isDomHidden ? { maxSize: 0 } : columnSize ? {} : { maxSize: 500 }), {
+    enableResizing: true,
+    cell: DataCell,
+    enableSorting: wmColumn.sortable,
+    // Pass column styles and properties through meta for TableCell styling and filtering
+    meta: __spreadProps(__spreadValues({
+      textAlign: wmColumn.textalignment,
+      backgroundColor: wmColumn.backgroundcolor,
+      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,
+      editinputtype: wmColumn.editinputtype,
+      // Include column type for filtering
+      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,
+      // 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) => {
+    columns.push(createDataColumn(wmColumn, renderCell, index));
+  });
+  return columns;
+};
+const createEditingActionButtons = () => [
+  {
+    key: "save-edit",
+    name: "save-edit-row",
+    className: "save row-action-button btn app-button btn-transparent save-edit-row-button",
+    dataActionKey: "saveEdit",
+    displayName: "",
+    title: "Save",
+    iconclass: "wi wi-done",
+    action: "save",
+    show: true,
+    widgettype: "button"
+  },
+  {
+    key: "cancel-edit",
+    name: "cancel-edit-row",
+    className: "cancel row-action-button btn app-button btn-transparent cancel-edit-row-button",
+    dataActionKey: "cancelEdit",
+    displayName: "",
+    title: "Cancel",
+    iconclass: "wi wi-cancel",
+    action: "cancel",
+    show: true,
+    widgettype: "button"
+  },
+  {
+    key: "delete-edit",
+    name: "delete-row",
+    className: "delete row-action-button btn app-button btn-transparent delete-row-button",
+    dataActionKey: "deleteRow",
+    displayName: "",
+    title: "Delete",
+    iconclass: "wi wi-trash",
+    action: "delete",
+    show: true,
+    widgettype: "button"
+  }
+];
+const createDefaultColumnProps = (field, displayName, type, index) => ({
+  // Core properties
+  field,
+  binding: field,
+  caption: displayName,
+  displayName,
+  widgetType: "dynamic-text",
+  // Special type for dynamic columns to render raw text
+  editWidgetType: "WmText",
+  // Display settings
+  show: true,
+  pcdisplay: true,
+  mobiledisplay: true,
+  tabletdisplay: true,
+  // Positioning
+  index,
+  headerindex: index.toString(),
+  // Sorting and searching
+  sortable: true,
+  searchable: true,
+  showinfilter: true,
+  // Styling
+  textalignment: "left",
+  // width: "150px", // Fixed width to disable resizing for dynamic columns
+  // Data type properties
+  type,
+  columntype: type,
+  // Form field properties
+  required: false,
+  disabled: false,
+  readonly: false,
+  // Required props for compatibility
+  listener: null,
+  // Will be set by the component
+  name: field
+});
+const getActionColumnSize = (editmode) => {
+  return editmode === "quickedit" ? { size: 80, minSize: 60 } : { size: 100, minSize: 80 };
+};
+export {
+  ActionCell,
+  createDataColumn,
+  createDataColumns,
+  createDefaultColumnProps,
+  createEditingActionButtons,
+  createRowIndexColumn,
+  getActionColumnSize
+};

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

@@ -0,0 +1,21 @@
+export declare const keyMap: {
+    [key: string]: string;
+};
+export interface SummaryRowValue {
+    value?: any;
+    class?: string;
+}
+export type SummaryRowData = string | number | SummaryRowValue | Promise<any>;
+export interface ColumnAggregate {
+    sum: () => number;
+    average: (precision?: number) => number;
+    count: () => number;
+    minimum: () => number;
+    maximum: () => number;
+    percent: (total: number, precision?: number) => number;
+}
+export interface EnhancedColumnProxy {
+    aggregate: ColumnAggregate;
+    setSummaryRowData: (data: SummaryRowData | SummaryRowData[]) => void;
+}
+export declare function createColumnsProxy(wmTableColumns: any[], applyOverride: (field: string, key: string, value: any) => void, setColumnsVersion?: (updater: (v: number) => number) => void, setSummaryRowDef?: (columnKey: string, data: any, rowIndex: number, refresh: boolean, show?: boolean) => void): Record<string, any>;

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

@@ -0,0 +1,99 @@
+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));
+const keyMap = {
+  caption: "header",
+  name: "accessorKey",
+  columnSize: "size",
+  sortable: "enableSorting",
+  textalignment: "meta.textAlign",
+  backgroundcolor: "meta.backgroundColor",
+  colClass: "meta.className",
+  // WaveMaker scripts often use kebab-case; normalize like colClass → TanStack meta.className via applyOverride
+  "col-class": "meta.className",
+  style: "meta"
+};
+function createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef) {
+  const proxy = {};
+  wmTableColumns.forEach((col, idx) => {
+    const key = col.field;
+    if (key) {
+      const columnShow = col.show !== void 0 ? col.show : true;
+      const setSummaryRowData = (data) => {
+        const newData = Array.isArray(data) ? data : [data];
+        invokeSummaryRowData(key, newData, setSummaryRowDef, columnShow);
+      };
+      proxy[key] = new Proxy(col, {
+        get(target, prop) {
+          if (prop === "setSummaryRowData") {
+            return setSummaryRowData;
+          }
+          return target[prop];
+        },
+        set(target, prop, value) {
+          if (target[prop] !== value) {
+            let mapped = keyMap[prop];
+            if (mapped && mapped.includes(".")) {
+              mapped = mapped.split(".")[1];
+            }
+            const finalKey = mapped || prop;
+            applyOverride(key, finalKey, value);
+            target[prop] = value;
+            if (setColumnsVersion) {
+              setColumnsVersion((v) => v + 1);
+            }
+          }
+          return true;
+        }
+      });
+    }
+  });
+  return proxy;
+}
+function invokeSummaryRowData(columnKey, data, setSummaryRowDef, show) {
+  if (!setSummaryRowDef) return;
+  data.forEach((item, index) => {
+    if (item instanceof Promise) {
+      item.then((resolvedValue) => {
+        setSummaryRowDef(columnKey, resolvedValue, index, true, show);
+      }).catch((error) => {
+        console.error(`Error resolving summary row data for column ${columnKey}:`, error);
+        setSummaryRowDef(columnKey, "", index, true, show);
+      });
+    } else if (item && typeof item === "object" && "value" in item) {
+      const itemObj = item;
+      if (itemObj.value instanceof Promise) {
+        itemObj.value.then((resolvedValue) => {
+          setSummaryRowDef(columnKey, __spreadProps(__spreadValues({}, itemObj), { value: resolvedValue }), index, true, show);
+        }).catch((error) => {
+          console.error(`Error resolving summary row data for column ${columnKey}:`, error);
+          setSummaryRowDef(columnKey, __spreadProps(__spreadValues({}, itemObj), { value: "" }), index, true, show);
+        });
+      } else {
+        setSummaryRowDef(columnKey, item, index, false, show);
+      }
+    } else {
+      setSummaryRowDef(columnKey, item, index, false, show);
+    }
+  });
+}
+export {
+  createColumnsProxy,
+  keyMap
+};

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

@@ -0,0 +1,22 @@
+import { ColumnDef } from "@tanstack/react-table";
+/**
+ * Determines if a column is a data column that should participate in equal width distribution
+ */
+export declare const isDataColumn: (column: ColumnDef<any>) => boolean;
+/**
+ * Determines if a column has an explicit width defined
+ */
+export declare const hasExplicitWidth: (column: ColumnDef<any>) => boolean;
+/**
+ * Calculates equal width distribution for data columns without explicit widths.
+ *
+ * This function implements the logic to ensure that:
+ * 1. Non-data columns (S.No, Actions, MultiSelect, RadioSelect) take only minimum necessary width
+ * 2. Data columns without explicit widths automatically share remaining space equally
+ * 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 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

@@ -0,0 +1,87 @@
+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));
+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) => {
+  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;
+    } else if (hasExplicitWidth(column)) {
+      usedWidth += column.size;
+    } else {
+      dataColumnsNeedingWidth++;
+    }
+  });
+  let autoColumnWidth = 150;
+  if (dataColumnsNeedingWidth > 0) {
+    const remainingWidth = Math.max(tableWidth - usedWidth, dataColumnsNeedingWidth * 100);
+    autoColumnWidth = Math.floor(remainingWidth / dataColumnsNeedingWidth);
+    autoColumnWidth = Math.max(autoColumnWidth, 100);
+  }
+  return columns.map((column) => {
+    if (isDataColumn(column) && !hasExplicitWidth(column)) {
+      return __spreadProps(__spreadValues({}, column), {
+        size: autoColumnWidth,
+        minSize: 100,
+        // Ensure reasonable minimum for data columns
+        enableResizing: true
+        // Allow resizing for auto-sized columns
+      });
+    }
+    return column;
+  });
+};
+const getDefaultColumnSize = (columnId) => {
+  switch (columnId) {
+    case "radioSelect":
+    case "multiSelect":
+    case "rowIndex":
+    case "actions":
+      return 60;
+    default:
+      return 150;
+  }
+};
+export {
+  distributeColumnWidths,
+  hasExplicitWidth,
+  isDataColumn
+};

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

@@ -0,0 +1,48 @@
+export declare const TABLE_CSS_CLASSES: {
+    readonly tableRow: "app-datagrid-row";
+    readonly headerCell: "app-datagrid-header-cell";
+    readonly groupHeaderCell: "app-datagrid-group-header-cell";
+    readonly tableCell: "app-datagrid-cell";
+    readonly grid: "";
+    readonly gridDefault: "table";
+    readonly gridBody: "app-datagrid-body";
+    readonly gridFooter: "app-datagrid-footer";
+    readonly deleteRow: "danger";
+    readonly ascIcon: "asc wi wi-long-arrow-up";
+    readonly descIcon: "desc wi wi-long-arrow-down";
+    readonly selectedColumn: "selected-column";
+    readonly rowExpandIcon: "wi wi-minus-square";
+    readonly rowCollapseIcon: "wi wi-plus-square";
+    readonly gridRowExpansionClass: "table-row-expansion";
+    readonly expandedRowClass: "expanded";
+};
+export declare const TABLE_DATA_STATES: {
+    readonly loading: "Loading...";
+    readonly ready: "";
+    readonly error: "An error occurred in loading the data.";
+    readonly nodata: "No data found.";
+};
+export declare const TABLE_MESSAGES: {
+    readonly deleteConfirmTitle: "Delete Record";
+    readonly deleteConfirmMessage: "Are you sure you want to delete this record?";
+    readonly deleteOkText: "Ok";
+    readonly deleteCancelText: "Cancel";
+    readonly deleteSuccess: "Record deleted successfully";
+    readonly deleteError: "Failed to delete record";
+    readonly insertSuccess: "Record added successfully";
+    readonly updateSuccess: "Record updated successfully";
+    readonly operationError: "An error occurred";
+    readonly noDataMessage: "No data found";
+    readonly loadingMessage: "Loading...";
+    readonly errorStateMessage: "An error occurred";
+    readonly radioSelectAriaLabel: "Select row";
+    readonly multiSelectAriaLabel: "Select all rows";
+};
+/**
+ * Interactive element classes and attributes that should prevent row selection
+ */
+export declare const INTERACTIVE_CLASSES: readonly ["MuiInputBase", "MuiSelect", "MuiButton", "MuiCheckbox", "MuiRadio", "MuiSlider", "MuiSwitch", "MuiTextField", "MuiAutocomplete", "MuiChip", "MuiRating", "MuiToggleButton", "MuiPickersDay", "MuiDatePicker", "MuiTimePicker", "MuiDateTimePicker", "MuiCalendarPicker", "MuiClockPicker", "MuiColorPicker", "MuiFormControl", "MuiFormGroup", "MuiFormControlLabel", "app-text", "app-textarea", "app-checkbox", "app-slider", "app-currency", "app-switch", "app-select", "app-checkboxset", "app-radioset", "app-date", "app-time", "app-timestamp", "app-rating", "app-datetime", "app-search", "app-chips", "app-colorpicker", "app-calendar", "app-editor"];
+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 UNSUPPORTED_STATE_PERSISTENCE_TYPES: readonly string[];