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

package/components/data/table/components/EditableCell.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.EditableCell = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _FieldValidationError = require("./FieldValidationError");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+var EditableCell = exports.EditableCell = function EditableCell(_ref) {
+  var _fieldValidationError;
+  var column = _ref.column,
+    rowData = _ref.rowData,
+    rowId = _ref.rowId,
+    fieldName = _ref.fieldName,
+    widgetType = _ref.widgetType,
+    editValue = _ref.editValue,
+    fieldValidationErrorsRef = _ref.fieldValidationErrorsRef,
+    cellUpdateCallbacksRef = _ref.cellUpdateCallbacksRef,
+    fieldRefs = _ref.fieldRefs,
+    renderFormWidget = _ref.renderFormWidget,
+    updateFieldValue = _ref.updateFieldValue,
+    _ref$sessionKey = _ref.sessionKey,
+    sessionKey = _ref$sessionKey === void 0 ? 0 : _ref$sessionKey,
+    onKeyDown = _ref.onKeyDown,
+    _ref$editMode = _ref.editMode,
+    editMode = _ref$editMode === void 0 ? "inline" : _ref$editMode;
+  var cellRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(0),
+    setForceUpdate = _useState[1];
+
+  // Generate a unique field key for validation tracking
+  var fieldKey = "".concat(rowId, "_").concat(fieldName);
+
+  // Create a ref callback to register the cell element for validation
+  var cellRefCallback = function cellRefCallback(element) {
+    cellRef.current = element;
+    if (element && fieldRefs.current) {
+      fieldRefs.current[fieldKey] = element;
+    }
+  };
+
+  // Register a cell update callback to force re-render on validation state changes
+  (0, _react.useEffect)(function () {
+    if (cellUpdateCallbacksRef.current) {
+      cellUpdateCallbacksRef.current[fieldKey] = function () {
+        return setForceUpdate(function (prev) {
+          return prev + 1;
+        });
+      };
+    }
+    return function () {
+      if (cellUpdateCallbacksRef.current) {
+        delete cellUpdateCallbacksRef.current[fieldKey];
+      }
+    };
+  }, [fieldKey, cellUpdateCallbacksRef]);
+
+  // Determine if we should show validation error
+  var showError = ((_fieldValidationError = fieldValidationErrorsRef.current) === null || _fieldValidationError === void 0 ? void 0 : _fieldValidationError[fieldKey]) === true;
+
+  // Handle keyboard events for quick edit mode
+  var handleKeyDown = function handleKeyDown(e) {
+    if (onKeyDown) {
+      // @ts-ignore
+      onKeyDown(e, rowId);
+    }
+  };
+  return __jsx(_material.Box, {
+    ref: cellRefCallback,
+    onKeyDown: editMode === "quickedit" || editMode === "inline" ? handleKeyDown : undefined,
+    "data-field-name": fieldName,
+    "data-row-id": rowId
+  }, renderFormWidget(fieldName, widgetType, editValue, function (newValue) {
+    return updateFieldValue(fieldName, newValue, rowId);
+  }, {
+    required: column.required,
+    disabled: column.disabled,
+    placeholder: column.placeholder,
+    defaultvalue: column.defaultvalue,
+    sessionKey: "".concat(sessionKey, "_").concat(rowId, "_").concat(fieldName),
+    rowData: rowData,
+    column: column
+  }), showError && __jsx(_FieldValidationError.FieldValidationError, {
+    showError: true,
+    title: column.validationmessage ? column.validationmessage : column.required ? "This field is required" : "Field validation failed"
+  }));
+};
+var _default = exports["default"] = EditableCell;

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { FieldValidationErrorProps } from "../props";
+export declare const FieldValidationError: React.FC<FieldValidationErrorProps>;
+export default FieldValidationError;

package/components/data/table/components/FieldValidationError.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FieldValidationError = void 0;
+var _react = _interopRequireDefault(require("react"));
+var __jsx = _react["default"].createElement;
+var FieldValidationError = exports.FieldValidationError = function FieldValidationError(_ref) {
+  var showError = _ref.showError,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "Field validation failed" : _ref$title;
+  if (!showError) {
+    return null;
+  }
+  return __jsx("span", {
+    className: "text-danger wi wi-error",
+    "data-placement": "top",
+    "data-container": "body",
+    title: title
+  });
+};
+var _default = exports["default"] = FieldValidationError;

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

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+export type CustomExpressionRenderBodyProps = {
+    rowData: unknown;
+    render: (rowData: any) => ReactNode;
+};
+/**
+ * Memoized wrapper for WaveMaker custom column markup (`(row) => <WmLabel … />`).
+ * Only re-renders when `rowData` or the parsed `render` function reference changes — safe to use
+ * outside WmTable (lists, cards, etc.).
+ */
+export declare const CustomExpressionRenderBody: import("react").NamedExoticComponent<CustomExpressionRenderBodyProps>;
+export interface MemoizedRowCellsProps {
+    cells: any[];
+    hasExpansion: boolean;
+    expansionInsertIndex: number;
+    renderExpansionCell: (rowId: string, rowData: any) => ReactNode;
+    rowId: string;
+    rowData: any;
+    ColClassSignature?: string;
+    rowsVersion?: number;
+    tableData?: any[];
+    isEditingRow?: boolean;
+    isSelected?: boolean;
+    customExpressionColumns?: Record<string, (rowData: any) => ReactNode>;
+    /** Incremented when custom-expression JSX is re-parsed into new components. */
+    customColumnsRevision?: number;
+    columnsVersion?: number;
+}
+export declare const RowCells: import("react").NamedExoticComponent<MemoizedRowCellsProps>;

package/components/data/table/components/RowCells.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RowCells = exports.CustomExpressionRenderBody = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _material = require("@mui/material");
+var _reactTable = require("@tanstack/react-table");
+var _utils = require("../utils");
+var _excluded = ["className", "textAlign", "backgroundColor"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+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; }
+/**
+ * Memoized wrapper for WaveMaker custom column markup (`(row) => <WmLabel … />`).
+ * Only re-renders when `rowData` or the parsed `render` function reference changes — safe to use
+ * outside WmTable (lists, cards, etc.).
+ */
+var CustomExpressionRenderBody = exports.CustomExpressionRenderBody = /*#__PURE__*/(0, _react.memo)(function CustomExpressionRenderBody(_ref) {
+  var rowData = _ref.rowData,
+    render = _ref.render;
+  return __jsx(_react["default"].Fragment, null, render(rowData));
+}, function (prev, next) {
+  return prev.rowData === next.rowData && prev.render === next.render;
+});
+CustomExpressionRenderBody.displayName = "CustomExpressionRenderBody";
+var RowCells = exports.RowCells = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
+  var cells = _ref2.cells,
+    hasExpansion = _ref2.hasExpansion,
+    expansionInsertIndex = _ref2.expansionInsertIndex,
+    renderExpansionCell = _ref2.renderExpansionCell,
+    rowId = _ref2.rowId,
+    rowData = _ref2.rowData,
+    isEditingRow = _ref2.isEditingRow,
+    customExpressionColumns = _ref2.customExpressionColumns;
+  return __jsx(_react["default"].Fragment, null, cells.map(function (cell, cellIndex) {
+    var _cell$column$columnDe, _cell$column, _cell$column$columnDe2, _cell$id, _cell$column$columnDe3, _cell$column$columnDe4, _cell$column$columnDe5, _cell$column$columnDe6, _cell$column$columnDe7;
+    var colClassExpression = (cell === null || cell === void 0 || (_cell$column$columnDe = cell.column.columnDef.meta) === null || _cell$column$columnDe === void 0 ? void 0 : _cell$column$columnDe.colClass) || "";
+    var columnId = (cell === null || cell === void 0 || (_cell$column = cell.column) === null || _cell$column === void 0 ? void 0 : _cell$column.id) || (cell === null || cell === void 0 || (_cell$column$columnDe2 = cell.column.columnDef) === null || _cell$column$columnDe2 === void 0 ? void 0 : _cell$column$columnDe2.accessorKey) || "";
+    var colClass = (0, _utils.getColClass)(colClassExpression, rowData, columnId);
+    var customRender = customExpressionColumns === null || customExpressionColumns === void 0 ? void 0 : customExpressionColumns[columnId];
+    return __jsx(_react.Fragment, {
+      key: (_cell$id = cell === null || cell === void 0 ? void 0 : cell.id) !== null && _cell$id !== void 0 ? _cell$id : "cell-".concat(columnId, "-").concat(cellIndex)
+    }, hasExpansion && cellIndex === expansionInsertIndex && renderExpansionCell(rowId, rowData), __jsx(_material.TableCell, {
+      key: cell.id,
+      title: cell.getValue() ? String(cell.getValue()) : "",
+      role: "cell",
+      tabIndex: 0,
+      "data-col-id": cellIndex,
+      className: "".concat(_utils.TABLE_CSS_CLASSES.tableCell, " ").concat(colClass || "", "  ").concat(((_cell$column$columnDe3 = cell.column.columnDef.meta) === null || _cell$column$columnDe3 === void 0 ? void 0 : _cell$column$columnDe3.className) || "").trim(),
+      style: _objectSpread(_objectSpread({
+        width: cell.column.getSize(),
+        textAlign: (_cell$column$columnDe4 = cell.column.columnDef.meta) === null || _cell$column$columnDe4 === void 0 ? void 0 : _cell$column$columnDe4.textAlign,
+        backgroundColor: (_cell$column$columnDe5 = cell.column.columnDef.meta) === null || _cell$column$columnDe5 === void 0 ? void 0 : _cell$column$columnDe5.backgroundColor
+      }, function () {
+        var _ref3 = cell.column.columnDef.meta || {},
+          className = _ref3.className,
+          textAlign = _ref3.textAlign,
+          backgroundColor = _ref3.backgroundColor,
+          otherMeta = (0, _objectWithoutProperties2["default"])(_ref3, _excluded);
+        return otherMeta;
+      }()), {}, {
+        fontSize: "inherit",
+        color: "inherit"
+      })
+    }, customRender ? __jsx(CustomExpressionRenderBody, {
+      rowData: rowData,
+      render: customRender
+    }) : (_cell$column$columnDe6 = cell.column.columnDef.meta) !== null && _cell$column$columnDe6 !== void 0 && _cell$column$columnDe6.renderCellContent && !isEditingRow ? (_cell$column$columnDe7 = cell.column.columnDef.meta) === null || _cell$column$columnDe7 === void 0 ? void 0 : _cell$column$columnDe7.renderCellContent(rowData, cell.column.columnDef) : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())));
+  }));
+}, function (prevProps, nextProps) {
+  var skipRender = prevProps.rowData === nextProps.rowData && prevProps.isEditingRow === nextProps.isEditingRow && prevProps.isSelected === nextProps.isSelected && prevProps.ColClassSignature === nextProps.ColClassSignature && prevProps.customExpressionColumns === nextProps.customExpressionColumns && prevProps.customColumnsRevision === nextProps.customColumnsRevision && prevProps.columnsVersion === nextProps.columnsVersion && prevProps.cells === nextProps.cells && prevProps.rowsVersion === nextProps.rowsVersion;
+  return skipRender;
+});
+RowCells.displayName = "RowCells";

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

@@ -0,0 +1,4 @@
+import React from "react";
+import { RowExpansionButtonProps } from "../props";
+export declare const RowExpansionButton: React.FC<RowExpansionButtonProps>;
+export default RowExpansionButton;

package/components/data/table/components/RowExpansionButton.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.RowExpansionButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _button = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/form/button"));
+var _anchor = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/basic/anchor"));
+var __jsx = _react["default"].createElement;
+var RowExpansionButton = exports.RowExpansionButton = function RowExpansionButton(_ref) {
+  var rowId = _ref.rowId,
+    rowData = _ref.rowData,
+    isExpanded = _ref.isExpanded,
+    onToggle = _ref.onToggle,
+    config = _ref.config;
+  if (!config.show) {
+    return null;
+  }
+  var handleClick = function handleClick(event, widget) {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    if (!config.disabled) {
+      onToggle(rowId, rowData);
+    }
+  };
+
+  // Use the appropriate icon based on expanded state
+  var currentIcon = isExpanded ? config.expandicon : config.collapseicon;
+  var currentTitle = isExpanded ? config.collapsetitle : config.expandtitle;
+  var ariaLabel = config.expandtitle || config["displayName"] || "Toggle row expansion";
+
+  // Build common props with only defined values
+  var commonProps = {
+    name: "".concat(config.name || "row_expansion", "_").concat(rowId),
+    onClick: handleClick,
+    iconclass: currentIcon,
+    "aria-label": ariaLabel,
+    "aria-expanded": isExpanded,
+    "aria-live": "polite",
+    tabIndex: 0
+  };
+
+  // Only add optional props if they have values
+  if (config.listener) {
+    commonProps.listener = config.listener;
+  }
+  if (config["displayName"]) {
+    commonProps.caption = config["displayName"];
+  }
+  if (currentTitle) {
+    commonProps.title = currentTitle;
+  }
+  if (config.className) {
+    commonProps.className = "".concat(config.className, " row-expansion-button");
+  }
+  if (config.disabled) {
+    commonProps.disabled = config.disabled;
+  }
+  if (config.widgetType === "anchor") {
+    return __jsx(_anchor["default"], (0, _extends2["default"])({}, commonProps, {
+      hyperlink: "#",
+      role: "button"
+    }));
+  }
+  return __jsx(_button["default"], (0, _extends2["default"])({}, commonProps, {
+    type: "button"
+  }));
+};
+var _default = exports["default"] = RowExpansionButton;

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { SummaryCellProps } from "../props";
+export declare const SummaryCell: React.NamedExoticComponent<SummaryCellProps>;

package/components/data/table/components/SummaryCell.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SummaryCell = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _utils = require("../utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+/**
+ * SummaryCell Component
+ * Renders a single cell in the summary row footer.
+ * Supports HTML content, custom styling, and Promise loading states.
+ */
+var SummaryCellBase = function SummaryCellBase(_ref) {
+  var columnKey = _ref.columnKey,
+    column = _ref.column,
+    rowDef = _ref.rowDef,
+    rowDefObject = _ref.rowDefObject,
+    colIndex = _ref.colIndex,
+    show = _ref.show;
+  // Get the value for this cell
+  var columnValue = rowDef[columnKey];
+  var columnValueObject = rowDefObject[columnKey];
+
+  // Extract styling from the value object
+  var cellStyling = (0, _react.useMemo)(function () {
+    if (columnValueObject && (0, _typeof2["default"])(columnValueObject) === "object" && "class" in columnValueObject) {
+      return columnValueObject["class"] || "";
+    }
+    return "";
+  }, [columnValueObject]);
+
+  // Check if value is a Promise (loading state)
+  var isLoading = columnValue instanceof Promise;
+
+  // Get text alignment from column configuration
+  var textAlign = (0, _react.useMemo)(function () {
+    return (column === null || column === void 0 ? void 0 : column.textalignment) || "left";
+  }, [column]);
+
+  // Render loading spinner for Promise values
+  if (isLoading) {
+    return __jsx(_material.TableCell, {
+      className: "".concat(_utils.TABLE_CSS_CLASSES.tableCell, " app-datagrid-cell summary-cell ").concat(cellStyling).trim(),
+      "data-col-id": colIndex,
+      role: "cell",
+      tabIndex: 0,
+      style: {
+        textAlign: textAlign
+      }
+    }, __jsx(_material.Box, {
+      className: "overlay",
+      sx: {
+        display: "flex",
+        justifyContent: "center"
+      }
+    }, __jsx(_material.CircularProgress, {
+      size: 16
+    })));
+  }
+
+  // Get display value - handle various formats
+  var displayValue = (0, _react.useMemo)(function () {
+    if (columnValue === undefined || columnValue === null) {
+      return "";
+    }
+
+    // If columnValue is an object, extract the value property (safeguard in case setSummaryRowDef didn't extract it)
+    if ((0, _typeof2["default"])(columnValue) === "object" && !(columnValue instanceof Promise)) {
+      // Check if it's a SummaryRowValue object with a 'value' property
+      if ("value" in columnValue) {
+        return columnValue.value;
+      }
+      // If it's an object without 'value', try to stringify it (fallback)
+      return String(columnValue);
+    }
+    return columnValue;
+  }, [columnValue]);
+
+  // Check if value contains HTML (for rendering dangerously)
+  var isHtmlContent = (0, _react.useMemo)(function () {
+    if (typeof displayValue === "string") {
+      return /<[^>]+>/.test(displayValue);
+    }
+    return false;
+  }, [displayValue]);
+  return __jsx(_material.TableCell, {
+    className: "".concat(_utils.TABLE_CSS_CLASSES.tableCell, " app-datagrid-cell summary-cell ").concat(cellStyling).trim(),
+    "data-col-id": colIndex,
+    role: "cell",
+    tabIndex: 0,
+    style: {
+      textAlign: textAlign,
+      backgroundColor: column === null || column === void 0 ? void 0 : column.backgroundcolor,
+      position: "relative",
+      display: show ? "" : "none"
+    }
+  }, isHtmlContent ? __jsx("span", {
+    dangerouslySetInnerHTML: {
+      __html: displayValue
+    }
+  }) : displayValue);
+};
+var SummaryCell = exports.SummaryCell = /*#__PURE__*/(0, _react.memo)(SummaryCellBase);
+SummaryCell.displayName = "SummaryCell";

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { SummaryRowProps } from "../props";
+export declare const SummaryRow: React.NamedExoticComponent<SummaryRowProps>;

package/components/data/table/components/SummaryRow.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SummaryRow = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _SummaryCell = require("./SummaryCell");
+var _utils = require("../utils");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+/**
+ * SummaryRow Component
+ * Renders a single row in the summary row footer.
+ * Maps over columns to render SummaryCell components.
+ */
+var SummaryRowBase = function SummaryRowBase(_ref) {
+  var rowDef = _ref.rowDef,
+    rowDefObject = _ref.rowDefObject,
+    rowIndex = _ref.rowIndex,
+    columns = _ref.columns,
+    summaryRowColumnShow = _ref.summaryRowColumnShow;
+  return __jsx(_material.TableRow, {
+    role: "row",
+    tabIndex: 0,
+    className: "".concat(_utils.TABLE_CSS_CLASSES.tableRow, " app-datagrid-row summary-row"),
+    "data-row-id": "summary-".concat(rowIndex)
+  }, columns.map(function (column, colIndex) {
+    var _summaryRowColumnShow;
+    var columnKey = column.field || column.binding;
+
+    // Skip columns without a binding/field
+    if (!columnKey) {
+      return null;
+    }
+
+    // Check if column should be shown based on stored show property or column's show property
+    // Priority: summaryRowColumnShow > column.show > true (default)
+    var columnShow = (summaryRowColumnShow === null || summaryRowColumnShow === void 0 || (_summaryRowColumnShow = summaryRowColumnShow[rowIndex]) === null || _summaryRowColumnShow === void 0 ? void 0 : _summaryRowColumnShow[columnKey]) !== undefined ? summaryRowColumnShow[rowIndex][columnKey] : column.show !== undefined ? column.show : true;
+    return __jsx(_SummaryCell.SummaryCell, {
+      key: "summary-cell-".concat(rowIndex, "-").concat(columnKey),
+      columnKey: columnKey,
+      column: column,
+      rowDef: rowDef,
+      rowDefObject: rowDefObject,
+      colIndex: colIndex,
+      show: columnShow
+    });
+  }));
+};
+var SummaryRow = exports.SummaryRow = /*#__PURE__*/(0, _react.memo)(SummaryRowBase);
+SummaryRow.displayName = "SummaryRow";

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { SummaryRowFooterProps } from "../props";
+export declare const SummaryRowFooter: React.NamedExoticComponent<SummaryRowFooterProps>;

package/components/data/table/components/SummaryRowFooter.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SummaryRowFooter = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _SummaryRow = require("./SummaryRow");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement;
+/**
+ * SummaryRowFooter Component
+ * Renders the table footer section containing summary rows.
+ * Displays aggregated data like totals, averages, etc.
+ */
+var SummaryRowFooterBase = function SummaryRowFooterBase(_ref) {
+  var summaryRowDefs = _ref.summaryRowDefs,
+    summaryRowDefObjects = _ref.summaryRowDefObjects,
+    columns = _ref.columns,
+    tableName = _ref.tableName,
+    summaryRowColumnShow = _ref.summaryRowColumnShow;
+  // Don't render if no summary rows
+  if (!summaryRowDefs || summaryRowDefs.length === 0) {
+    return null;
+  }
+  return __jsx(_material.TableFooter, {
+    className: "app-datagrid-footer",
+    style: {
+      borderTop: "3px solid #eee"
+    },
+    "data-table-name": tableName
+  }, summaryRowDefs.map(function (rowDef, rowIndex) {
+    return __jsx(_SummaryRow.SummaryRow, {
+      key: "summary-row-".concat(rowIndex),
+      rowDef: rowDef,
+      rowDefObject: summaryRowDefObjects[rowIndex] || {},
+      rowIndex: rowIndex,
+      columns: columns,
+      summaryRowColumnShow: summaryRowColumnShow
+    });
+  }));
+};
+var SummaryRowFooter = exports.SummaryRowFooter = /*#__PURE__*/(0, _react.memo)(SummaryRowFooterBase);
+SummaryRowFooter.displayName = "SummaryRowFooter";

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { TableBodyProps } from "../props";
+export declare const TableBodyComponent: React.NamedExoticComponent<TableBodyProps>;