@wavemaker/react-runtime 11.14.2-rc.6311 → 11.15.0-1.246

package/components/data/pagination/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -51,7 +52,13 @@ var WmPagination = /*#__PURE__*/(0, _react.memo)(function (props) {
     isLoadingMore = props.isLoadingMore,
     setIsLoadingMore = props.setIsLoadingMore,
     isServerSidePagination = props.isServerSidePagination,
-    onDataUpdate = props.onDataUpdate;
+    onDataUpdate = props.onDataUpdate,
+    _props$ondemandmessag = props.ondemandmessage,
+    ondemandmessage = _props$ondemandmessag === void 0 ? "Load More" : _props$ondemandmessag,
+    _props$viewlessmessag = props.viewlessmessage,
+    viewlessmessage = _props$viewlessmessag === void 0 ? "View Less" : _props$viewlessmessag,
+    _props$showviewlessbu = props.showviewlessbutton,
+    showviewlessbutton = _props$showviewlessbu === void 0 ? false : _props$showviewlessbu;
 
   // Custom hooks for pagination logic and navigation sizing
   var pagination = (0, _hooks.usePagination)({
@@ -73,10 +80,11 @@ var WmPagination = /*#__PURE__*/(0, _react.memo)(function (props) {
     datasourceInvokeOptions: props.datasourceInvokeOptions
   });
 
-  // Notify parent component when data changes in Scroll mode
+  // Notify parent component when data changes in Scroll or On-Demand mode
   var prevResultLengthRef = _react["default"].useRef(0);
   _react["default"].useEffect(function () {
-    if (navigation === "Scroll" && onDataUpdate && pagination.result) {
+    var isAccumulatingMode = navigation === "Scroll" || navigation === "On-Demand";
+    if (isAccumulatingMode && onDataUpdate && pagination.result) {
       // Only update if the result length has changed (new data added)
       if (pagination.result.length !== prevResultLengthRef.current) {
         prevResultLengthRef.current = pagination.result.length;
@@ -90,6 +98,36 @@ var WmPagination = /*#__PURE__*/(0, _react.memo)(function (props) {
     }),
     navigationClass = _useNavigationSize.navigationClass;
 
+  // Attach dataNavigator API to pagination widget proxy (like Angular's @ViewChild)
+  // Update properties every render so they stay current (like Angular component instance)
+  (0, _react.useEffect)(function () {
+    var _listener$Widgets, _listener$Widgets2, _props$onPaginationWi;
+    if (!name || !(listener !== null && listener !== void 0 && (_listener$Widgets = listener.Widgets) !== null && _listener$Widgets !== void 0 && _listener$Widgets[name])) return;
+    var paginationWidget = listener === null || listener === void 0 || (_listener$Widgets2 = listener.Widgets) === null || _listener$Widgets2 === void 0 ? void 0 : _listener$Widgets2[name];
+
+    // Spread entire pagination object to avoid manual property copying
+    // This includes: currentPage, pageCount, dataSize, result, navigatePage, etc.
+    Object.assign(paginationWidget, pagination, {
+      // Add convenience navigation methods
+      goToFirstPage: function goToFirstPage() {
+        return pagination.navigatePage("first");
+      },
+      goToLastPage: function goToLastPage() {
+        return pagination.navigatePage("last");
+      },
+      goToNextPage: function goToNextPage() {
+        return pagination.navigatePage("next");
+      },
+      goToPreviousPage: function goToPreviousPage() {
+        return pagination.navigatePage("prev");
+      },
+      actualPageSize: pagination.currentMaxResults
+    });
+
+    // Notify parent once on mount
+    props === null || props === void 0 || (_props$onPaginationWi = props.onPaginationWidgetReady) === null || _props$onPaginationWi === void 0 || _props$onPaginationWi.call(props, paginationWidget);
+  }, [name, pagination, props === null || props === void 0 ? void 0 : props.onPaginationWidgetReady]);
+
   // Memoized flex container styles for better performance
   var flexContainerStyles = (0, _react.useMemo)(function () {
     var baseStyles = {
@@ -113,7 +151,25 @@ var WmPagination = /*#__PURE__*/(0, _react.memo)(function (props) {
 
   // Memoized common page size selector
   var pageSizeSelector = (0, _react.useMemo)(function () {
+    var _props$paginationMeta;
     if (!allowpagesizechange) return null;
+
+    // Parse page size options to get the minimum value
+    var parsedOptions = pagesizeoptions.split(",").map(function (opt) {
+      return parseInt(opt.trim(), 10);
+    }).filter(function (opt) {
+      return !isNaN(opt);
+    });
+
+    // Include paginationMeta.size if available
+    if ((_props$paginationMeta = props.paginationMeta) !== null && _props$paginationMeta !== void 0 && _props$paginationMeta.size && !parsedOptions.includes(props.paginationMeta.size)) {
+      parsedOptions.push(props.paginationMeta.size);
+    }
+    var minPageSize = parsedOptions.length > 0 ? Math.min.apply(Math, (0, _toConsumableArray2["default"])(parsedOptions)) : 0;
+
+    // Hide page size selector if total records is less than or equal to the minimum page size
+    // since all records are already visible
+    if (pagination.dataSize < minPageSize) return null;
     return __jsx(_components.PageSizeSelector, {
       pagesizeoptions: pagesizeoptions,
       maxResults: pagination.currentMaxResults,
@@ -225,11 +281,6 @@ var WmPagination = /*#__PURE__*/(0, _react.memo)(function (props) {
           isDisableNext: pagination.isDisableNext,
           onNavigate: pagination.navigatePage
         }) : null;
-      case "Scroll":
-        // For scroll navigation, render a sentinel element for intersection observer
-        return null;
-      // Navigation controls not needed for infinite scroll
-
       default:
         return null;
     }
@@ -237,6 +288,9 @@ var WmPagination = /*#__PURE__*/(0, _react.memo)(function (props) {
 
   // Simple render function - avoid over-optimization that causes re-renders
   var renderPaginationContent = function renderPaginationContent() {
+    if (navigation === "None" || navigation === "Scroll") {
+      return null;
+    }
     var navigationComponent = renderNavigation();
     var content = __jsx(_react["default"].Fragment, null, pageSizeSelector, navigationComponent);
 
@@ -250,8 +304,78 @@ var WmPagination = /*#__PURE__*/(0, _react.memo)(function (props) {
     return renderWithLayout(content, recordCountVariant);
   };
 
+  // Render On-Demand navigation content
+  if (pagination.navcontrols === "On-Demand") {
+    // Check if there's data to show and it's more than one page worth
+    // Don't show navigation if data is empty or already shows all items
+    var hasEnoughData = pagination.dataSize > 0 && pagination.dataSize > pagination.currentMaxResults;
+
+    // Determine if we should show Load More button
+    // Only show when there's more data AND accumulated data is less than total
+    var shouldShowLoadMore = hasEnoughData && pagination.hasMoreData && pagination.accumulatedDataCount < pagination.dataSize;
+
+    // Determine if we should show View Less button
+    // Show when all data is loaded, showviewlessbutton is true, and more than first page is loaded
+    var shouldShowViewLess = hasEnoughData && !pagination.hasMoreData && showviewlessbutton && pagination.accumulatedDataCount > pagination.currentMaxResults;
+
+    // Determine which button to show (if any)
+    var showButton = shouldShowLoadMore || shouldShowViewLess;
+
+    // If nothing to show and not loading, return null
+    if (!showButton && !pagination.isLoadingMore) {
+      return null;
+    }
+
+    // Determine button properties based on state
+    var buttonText = shouldShowViewLess ? viewlessmessage : ondemandmessage;
+    var buttonAction = shouldShowViewLess ? pagination.resetAccumulatedData : pagination.loadMoreData;
+    return __jsx(_Box["default"], {
+      component: "div",
+      className: (0, _clsx["default"])("on-demand-datagrid", className),
+      sx: _objectSpread({}, styles),
+      id: name
+    }, pagination.isLoadingMore && __jsx(_Box["default"], {
+      component: "div",
+      className: "loading-data-msg spin-icon-in-center",
+      sx: {
+        textAlign: "center",
+        padding: "16px"
+      }
+    }, __jsx(_Box["default"], {
+      component: "span"
+    }, __jsx(_Box["default"], {
+      component: "i",
+      className: "app-icon panel-icon fa-spin fa fa-circle-o-notch",
+      "aria-hidden": "true"
+    }), __jsx(_Box["default"], {
+      component: "span",
+      className: "sr-only"
+    }, "Loading"), __jsx(_Box["default"], {
+      component: "span",
+      className: "loading-text",
+      sx: {
+        marginLeft: 1
+      }
+    }, "Loading..."))), showButton && !pagination.isLoadingMore && __jsx(_Box["default"], {
+      component: "a",
+      className: "app-button btn btn-block on-demand-load-btn",
+      onClick: buttonAction,
+      sx: {
+        cursor: "pointer",
+        display: "block",
+        textAlign: "center",
+        padding: "10px",
+        "&:hover": {
+          textDecoration: "none"
+        }
+      }
+    }, buttonText));
+  }
+
   // Render infinite scroll content
   if (pagination.navcontrols === "Scroll") {
+    var _hasEnoughData = pagination.dataSize > 0 && pagination.dataSize > pagination.currentMaxResults;
+    var shouldShowViewLessInScroll = _hasEnoughData && !pagination.hasMoreData && showviewlessbutton && pagination.accumulatedDataCount > pagination.currentMaxResults;
     return __jsx(_Box["default"], {
       className: (0, _clsx["default"])("app-datanavigator clearfix", className),
       sx: _objectSpread(_objectSpread({}, styles), {}, {
@@ -278,17 +402,11 @@ var WmPagination = /*#__PURE__*/(0, _react.memo)(function (props) {
       sx: {
         marginLeft: 1
       }
-    }, "Loading..."))), !pagination.hasMoreData && pagination.dataSize > 0 && __jsx(_Box["default"], {
-      sx: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        padding: 2,
-        width: "100%",
-        textAlign: "center",
-        color: "text.secondary"
-      }
-    }, __jsx("span", null, "No more data to load")), __jsx(_Box["default"], {
+    }, "Loading..."))), shouldShowViewLessInScroll && __jsx(_Box["default"], {
+      component: "a",
+      className: "app-button btn btn-block on-demand-load-btn",
+      onClick: pagination.resetAccumulatedData
+    }, viewlessmessage), __jsx(_Box["default"], {
       ref: function ref(el) {
         if (pagination.sentinelRef) {
           pagination.sentinelRef.current = el;

package/components/data/table/components/AddNewRow.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.AddNewRow = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _material = require("@mui/material");
+var _clsx = _interopRequireDefault(require("clsx"));
 var _lodashEs = require("lodash-es");
 var _tableRowAction = _interopRequireDefault(require("../table-row-action"));
 var __jsx = _react["default"].createElement;
@@ -165,7 +166,10 @@ var AddNewRow = exports.AddNewRow = function AddNewRow(_ref) {
     var widgetType = String(column.editWidgetType || "WmText");
     var editValue = (_ref2 = (_editingRowData$field = editingRowData[fieldName]) !== null && _editingRowData$field !== void 0 ? _editingRowData$field : column.defaultvalue) !== null && _ref2 !== void 0 ? _ref2 : "";
     totalCells.push(__jsx(_material.TableCell, {
-      key: "new-row-".concat(fieldName)
+      key: "new-row-".concat(fieldName),
+      className: (0, _clsx["default"])("app-datagrid-cell cell-editing form-group", {
+        "required-field": column.required
+      })
     }, column.readonly ? __jsx(_react["default"].Fragment, null) : renderEditableCell(column, fieldName, widgetType, editValue, "new-row")));
   }
 

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

@@ -70,7 +70,7 @@ var EditableCell = exports.EditableCell = function EditableCell(_ref) {
   };
   return __jsx(_material.Box, {
     ref: cellRefCallback,
-    onKeyDown: editMode === "quickedit" ? handleKeyDown : undefined,
+    onKeyDown: editMode === "quickedit" || editMode === "inline" ? handleKeyDown : undefined,
     "data-field-name": fieldName,
     "data-row-id": rowId
   }, renderFormWidget(fieldName, widgetType, editValue, function (newValue) {
@@ -85,7 +85,7 @@ var EditableCell = exports.EditableCell = function EditableCell(_ref) {
     column: column
   }), showError && __jsx(_FieldValidationError.FieldValidationError, {
     showError: true,
-    title: column.required ? "This field is required" : "Field validation failed"
+    title: column.validationmessage ? column.validationmessage : column.required ? "This field is required" : "Field validation failed"
   }));
 };
 var _default = exports["default"] = EditableCell;

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

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RowCells = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+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 cell content component to prevent re-renders when activeRowIds changes
+
+var RowCells = exports.RowCells = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var cells = _ref.cells,
+    hasExpansion = _ref.hasExpansion,
+    expansionInsertIndex = _ref.expansionInsertIndex,
+    renderExpansionCell = _ref.renderExpansionCell,
+    rowId = _ref.rowId,
+    rowData = _ref.rowData,
+    isEditingRow = _ref.isEditingRow;
+  return __jsx(_react["default"].Fragment, null, cells.map(function (cell, cellIndex) {
+    var _cell$column$columnDe, _cell$column, _cell$column$columnDe2, _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);
+    return __jsx(_react.Fragment, {
+      key: "cell-".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({
+        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 _ref2 = cell.column.columnDef.meta || {},
+          className = _ref2.className,
+          textAlign = _ref2.textAlign,
+          backgroundColor = _ref2.backgroundColor,
+          otherMeta = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+        return otherMeta;
+      }())
+    }, (_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) {
+  // Compare rowData, isEditingRow, and isSelected for rendering updates
+  // Note: cells comparison removed to avoid conflicts with external DOM manipulation
+  // isSelected is compared to trigger re-renders when selection state changes
+  return prevProps.rowData === nextProps.rowData && prevProps.isEditingRow === nextProps.isEditingRow && prevProps.isSelected === nextProps.isSelected;
+});
+RowCells.displayName = "RowCells";

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

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.RowExpansionButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
-var _button = _interopRequireDefault(require("../../../form/button"));
-var _anchor = _interopRequireDefault(require("../../../basic/anchor"));
+var _button = _interopRequireDefault(require("@wavemaker/react-runtime/components/form/button"));
+var _anchor = _interopRequireDefault(require("@wavemaker/react-runtime/components/basic/anchor"));
 var __jsx = _react["default"].createElement;
 var RowExpansionButton = exports.RowExpansionButton = function RowExpansionButton(_ref) {
   var rowId = _ref.rowId,

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.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.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";