@wavemaker-ai/react-runtime 1.0.0-rc.309

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

@@ -0,0 +1,161 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildSelectionColumns = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _index = require("./index");
+var __jsx = _react["default"].createElement;
+var buildSelectionColumns = exports.buildSelectionColumns = function buildSelectionColumns(_ref) {
+  var useRadioSelect = _ref.useRadioSelect,
+    useMultiSelect = _ref.useMultiSelect,
+    selectedRowIds = _ref.selectedRowIds,
+    handleRadioSelection = _ref.handleRadioSelection,
+    handleMultiSelection = _ref.handleMultiSelection,
+    handleSelectAll = _ref.handleSelectAll,
+    internalDataset = _ref.internalDataset,
+    _ref$radioselecttitle = _ref.radioselecttitle,
+    radioselecttitle = _ref$radioselecttitle === void 0 ? "" : _ref$radioselecttitle,
+    _ref$radioselectarial = _ref.radioselectarialabel,
+    radioselectarialabel = _ref$radioselectarial === void 0 ? _index.TABLE_MESSAGES.radioSelectAriaLabel : _ref$radioselectarial,
+    _ref$multiselecttitle = _ref.multiselecttitle,
+    multiselecttitle = _ref$multiselecttitle === void 0 ? "" : _ref$multiselecttitle,
+    _ref$multiselectarial = _ref.multiselectarialabel,
+    multiselectarialabel = _ref$multiselectarial === void 0 ? _index.TABLE_MESSAGES.multiSelectAriaLabel : _ref$multiselectarial,
+    _ref$tableName = _ref.tableName,
+    tableName = _ref$tableName === void 0 ? "table" : _ref$tableName;
+  // Radio select column
+  if (useRadioSelect) {
+    return {
+      id: "radioSelect",
+      header: function header() {
+        return __jsx(_material.Box, {
+          sx: {
+            display: "flex",
+            justifyContent: "center"
+          }
+        });
+      },
+      cell: function cell(_ref2) {
+        var row = _ref2.row;
+        var rowId = row.id;
+        // Use TanStack Table's built-in selection state for reactive cell updates
+        var isSelected = row.getIsSelected();
+        return __jsx(_material.Box, {
+          sx: {
+            display: "flex",
+            justifyContent: "center"
+          }
+        }, __jsx(_material.Tooltip, {
+          title: radioselecttitle,
+          placement: "top"
+        }, __jsx(_material.Box, {
+          className: "radio app-radio"
+        }, __jsx(_material.FormControlLabel, {
+          control: __jsx(_material.Radio, {
+            checked: isSelected,
+            onChange: function onChange() {
+              return handleRadioSelection(rowId, row.original);
+            },
+            value: rowId,
+            name: "wmRadioselect-".concat(tableName),
+            inputProps: {
+              "aria-label": radioselectarialabel
+            }
+            // @ts-ignore - Custom attribute for WaveMaker specific functionality
+            ,
+            rowselectinput: "",
+            size: "small"
+          }),
+          label: "",
+          className: "caption"
+        }))));
+      },
+      size: 40,
+      minSize: 40,
+      maxSize: 40,
+      enableResizing: false
+    };
+  }
+
+  // Multiselect column
+  if (useMultiSelect) {
+    return {
+      id: "multiSelect",
+      header: function header() {
+        // Use selectedRowIds and internalDataset directly for reliable state
+        var selectedCount = selectedRowIds.length;
+        var isAllSelected = selectedCount > 0 && selectedCount === internalDataset.length;
+        return __jsx(_material.Box, {
+          sx: {
+            display: "flex",
+            justifyContent: "center",
+            width: "100%"
+          }
+        }, __jsx(_material.Box, {
+          className: "app-checkbox checkbox"
+        }, __jsx(_material.Checkbox, {
+          checked: isAllSelected,
+          indeterminate: false,
+          onChange: function onChange(e) {
+            return handleSelectAll(e.target.checked);
+          },
+          size: "small",
+          inputProps: {
+            "aria-label": "Select all rows"
+          },
+          sx: {
+            padding: 0
+          }
+        })));
+      },
+      cell: function cell(_ref3) {
+        var row = _ref3.row;
+        var rowId = row.id;
+        // Use TanStack Table's built-in selection state for reactive cell updates
+        var isSelected = row.getIsSelected();
+        return __jsx(_material.Box, {
+          sx: {
+            display: "flex",
+            justifyContent: "center"
+          }
+        }, __jsx(_material.Tooltip, {
+          title: multiselecttitle,
+          placement: "top"
+        }, __jsx(_material.Box, {
+          className: "app-checkbox checkbox"
+        }, __jsx(_material.Checkbox, {
+          checked: isSelected,
+          onChange: function onChange(e) {
+            return 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 ? __jsx("span", {
+          className: "sr-only",
+          "aria-live": "assertive"
+        }, "Row Selected") : __jsx("span", {
+          className: "sr-only",
+          "aria-live": "assertive"
+        }, "Row Deselected"));
+      },
+      size: 40,
+      minSize: 40,
+      maxSize: 40,
+      enableResizing: false
+    };
+  }
+  return null;
+};

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { ColumnDef } from "@tanstack/react-table";
+import { WmTableColumnProps, ActionButtonConfig } from "../props";
+/**
+ * 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) => 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,225 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActionColumnSize = exports.createRowIndexColumn = exports.createEditingActionButtons = exports.createDefaultColumnProps = exports.createDataColumns = exports.createDataColumn = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _lodashEs = require("lodash-es");
+var _ = require(".");
+var __jsx = _react["default"].createElement;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Creates row index column definition
+ */
+var createRowIndexColumn = exports.createRowIndexColumn = function createRowIndexColumn() {
+  return {
+    id: "rowIndex",
+    header: "S. No.",
+    size: 70,
+    minSize: 70,
+    maxSize: 70,
+    enableResizing: false,
+    cell: function cell(_ref) {
+      var row = _ref.row,
+        table = _ref.table;
+      // Get current page information for continuous numbering across pages
+      var pageIndex = table.getState().pagination.pageIndex;
+      var pageSize = table.getState().pagination.pageSize;
+
+      // Check if we're using manual pagination (server-side)
+      var isManualPagination = table.options.manualPagination;
+      var rowPositionOnPage;
+      if (isManualPagination) {
+        // For server-side pagination, use the row's index in the current data
+        rowPositionOnPage = row.index;
+      } else {
+        // For client-side pagination, find position within paginated rows
+        var paginationModel = table.getPaginationRowModel();
+        var currentPageRows = paginationModel.rows;
+        rowPositionOnPage = currentPageRows.findIndex(function (pageRow) {
+          return pageRow.id === row.id;
+        });
+      }
+
+      // Calculate continuous row number across pages
+      var rowNumber = pageIndex * pageSize + rowPositionOnPage + 1;
+      return __jsx(_material.Box, {
+        "data-col-identifier": "rowIndex"
+      }, rowNumber);
+    },
+    enableSorting: false
+  };
+};
+
+/**
+ * Creates data column definition from WmTableColumnProps
+ */
+var createDataColumn = exports.createDataColumn = function createDataColumn(wmColumn, renderCell) {
+  var _wmColumn$colClass, _wmColumn$styles;
+  var colClassProp = (_wmColumn$colClass = wmColumn.colClass) !== null && _wmColumn$colClass !== void 0 ? _wmColumn$colClass : wmColumn["col-class"];
+  // Extract width from either width prop or styles prop
+  var columnSize;
+  if (wmColumn.width) {
+    columnSize = parseInt(wmColumn.width);
+  } else if ((_wmColumn$styles = wmColumn.styles) !== null && _wmColumn$styles !== void 0 && _wmColumn$styles.width) {
+    columnSize = (0, _.parseWidth)(wmColumn.styles.width);
+  }
+  return _objectSpread(_objectSpread({
+    accessorKey: wmColumn.field || wmColumn.name,
+    // Use sortby field for sorting if provided, otherwise use the display field
+    // Supports nested properties like "department.store.employee"
+    accessorFn: wmColumn.sortby ? function (row) {
+      return (0, _lodashEs.get)(row, wmColumn.sortby || "");
+    } : undefined,
+    header: wmColumn.caption,
+    size: columnSize,
+    minSize: 50
+  }, columnSize ? {} : {
+    maxSize: 500
+  }), {}, {
+    // Only set maxSize for auto-sized columns
+    enableResizing: true,
+    // Enable resizing for all data columns
+    cell: function cell(_ref2) {
+      var row = _ref2.row;
+      return renderCell(wmColumn, row);
+    },
+    enableSorting: wmColumn.sortable,
+    // Pass column styles and properties through meta for TableCell styling and filtering
+    meta: _objectSpread(_objectSpread({
+      textAlign: wmColumn.textalignment,
+      backgroundColor: wmColumn.backgroundcolor,
+      className: wmColumn === null || wmColumn === void 0 ? void 0 : wmColumn.className,
+      colClass: colClassProp
+    }, wmColumn.styles), {}, {
+      // 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 || wmColumn === void 0 ? void 0 : wmColumn.renderCellContent
+    })
+  });
+};
+
+/**
+ * Creates column definitions from table columns
+ */
+var createDataColumns = exports.createDataColumns = function createDataColumns(wmTableColumns, renderCell) {
+  var columns = [];
+  wmTableColumns.forEach(function (wmColumn) {
+    if (wmColumn.show) {
+      columns.push(createDataColumn(wmColumn, renderCell));
+    }
+  });
+  return columns;
+};
+
+/**
+ * Creates save/cancel/delete action buttons for editing mode
+ */
+var createEditingActionButtons = exports.createEditingActionButtons = function createEditingActionButtons() {
+  return [{
+    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"
+  }];
+};
+
+/**
+ * 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
+ */
+var createDefaultColumnProps = exports.createDefaultColumnProps = function createDefaultColumnProps(field, displayName, type, index) {
+  return {
+    // Core properties
+    field: field,
+    binding: field,
+    caption: displayName,
+    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: 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: 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
+  };
+};
+
+/**
+ * Get action column size based on edit mode
+ */
+var getActionColumnSize = exports.getActionColumnSize = function getActionColumnSize(editmode) {
+  return editmode === "quickedit" ? {
+    size: 80,
+    minSize: 60
+  } : {
+    size: 100,
+    minSize: 80
+  };
+};

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,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createColumnsProxy = createColumnsProxy;
+exports.keyMap = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var keyMap = exports.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"
+};
+
+// Types for summary row data
+
+// Interface for aggregate methods
+
+// Interface for enhanced column with aggregate and summary methods
+
+// Function to create aggregate methods for a column
+
+function createColumnsProxy(wmTableColumns, applyOverride, setColumnsVersion, setSummaryRowDef) {
+  var proxy = {};
+  wmTableColumns.forEach(function (col, idx) {
+    var key = col.field;
+    if (key) {
+      // Get column's show property (default to true if not specified)
+      var columnShow = col.show !== undefined ? col.show : true;
+
+      // Create setSummaryRowData method
+      var setSummaryRowData = function setSummaryRowData(data) {
+        var newData = Array.isArray(data) ? data : [data];
+        invokeSummaryRowData(key, newData, setSummaryRowDef, columnShow);
+      };
+
+      // Create the proxy for this column
+      proxy[key] = new Proxy(col, {
+        get: function get(target, prop) {
+          // Return setSummaryRowData method
+          if (prop === "setSummaryRowData") {
+            return setSummaryRowData;
+          }
+          return target[prop];
+        },
+        set: function set(target, prop, value) {
+          if (target[prop] !== value) {
+            var mapped = keyMap[prop];
+            if (mapped && mapped.includes(".")) {
+              mapped = mapped.split(".")[1];
+            }
+            var finalKey = mapped || prop;
+            applyOverride(key, finalKey, value);
+            target[prop] = value;
+            if (setColumnsVersion) {
+              setColumnsVersion(function (v) {
+                return v + 1;
+              });
+            }
+          }
+          return true;
+        }
+      });
+    }
+  });
+  return proxy;
+}
+
+// Helper function to invoke summary row data with Promise handling
+function invokeSummaryRowData(columnKey, data, setSummaryRowDef, show) {
+  if (!setSummaryRowDef) return;
+  data.forEach(function (item, index) {
+    // Handle Promise values directly
+    if (item instanceof Promise) {
+      item.then(function (resolvedValue) {
+        setSummaryRowDef(columnKey, resolvedValue, index, true, show);
+      })["catch"](function (error) {
+        console.error("Error resolving summary row data for column ".concat(columnKey, ":"), error);
+        setSummaryRowDef(columnKey, "", index, true, show);
+      });
+    }
+    // Handle objects with Promise values
+    else if (item && (0, _typeof2["default"])(item) === "object" && "value" in item) {
+      var itemObj = item;
+      if (itemObj.value instanceof Promise) {
+        itemObj.value.then(function (resolvedValue) {
+          setSummaryRowDef(columnKey, _objectSpread(_objectSpread({}, itemObj), {}, {
+            value: resolvedValue
+          }), index, true, show);
+        })["catch"](function (error) {
+          console.error("Error resolving summary row data for column ".concat(columnKey, ":"), error);
+          setSummaryRowDef(columnKey, _objectSpread(_objectSpread({}, itemObj), {}, {
+            value: ""
+          }), index, true, show);
+        });
+      } else {
+        // Object with non-Promise value
+        setSummaryRowDef(columnKey, item, index, false, show);
+      }
+    }
+    // Handle regular values (string, number, etc.)
+    else {
+      setSummaryRowDef(columnKey, item, index, false, show);
+    }
+  });
+}

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 (default: 1200px for calculations)
+ * @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,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDataColumn = exports.hasExplicitWidth = exports.distributeColumnWidths = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Column types that should not participate in equal width distribution
+ * These columns have specific functional purposes and should use their default/fixed sizes
+ */
+var NON_DATA_COLUMN_IDS = ["radioSelect", "multiSelect", "rowIndex", "actions"];
+
+/**
+ * Determines if a column is a data column that should participate in equal width distribution
+ */
+var isDataColumn = exports.isDataColumn = function isDataColumn(column) {
+  return !NON_DATA_COLUMN_IDS.includes(column.id || "");
+};
+
+/**
+ * Determines if a column has an explicit width defined
+ */
+var hasExplicitWidth = exports.hasExplicitWidth = function hasExplicitWidth(column) {
+  return typeof column.size === "number" && column.size > 0;
+};
+
+/**
+ * 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 (default: 1200px for calculations)
+ * @returns Modified column definitions with auto-sized data columns
+ */
+var distributeColumnWidths = exports.distributeColumnWidths = function distributeColumnWidths(columns) {
+  var tableWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1200;
+  // Calculate total width used by non-data columns and data columns with explicit widths
+  var usedWidth = 0;
+  var dataColumnsNeedingWidth = 0;
+  columns.forEach(function (column) {
+    if (!isDataColumn(column)) {
+      // Non-data column - use its default size
+      var size = column.size || getDefaultColumnSize(column.id || "");
+      usedWidth += size;
+    } else if (hasExplicitWidth(column)) {
+      // Data column with explicit width
+      usedWidth += column.size;
+    } else {
+      // Data column needing auto-sizing
+      dataColumnsNeedingWidth++;
+    }
+  });
+
+  // Calculate width for auto-sized data columns
+  var autoColumnWidth = 150; // Default fallback width
+  if (dataColumnsNeedingWidth > 0) {
+    var remainingWidth = Math.max(tableWidth - usedWidth, dataColumnsNeedingWidth * 100);
+    autoColumnWidth = Math.floor(remainingWidth / dataColumnsNeedingWidth);
+    // Ensure minimum width
+    autoColumnWidth = Math.max(autoColumnWidth, 100);
+  }
+
+  // Apply calculated widths to columns
+  return columns.map(function (column) {
+    if (isDataColumn(column) && !hasExplicitWidth(column)) {
+      return _objectSpread(_objectSpread({}, column), {}, {
+        size: autoColumnWidth,
+        minSize: 100,
+        // Ensure reasonable minimum for data columns
+        enableResizing: true // Allow resizing for auto-sized columns
+      });
+    }
+    return column;
+  });
+};
+
+/**
+ * Get default size for non-data columns
+ */
+var getDefaultColumnSize = function getDefaultColumnSize(columnId) {
+  switch (columnId) {
+    case "radioSelect":
+    case "multiSelect":
+    case "rowIndex":
+    case "actions":
+      return 60;
+    default:
+      return 150;
+  }
+};