@wavemaker/react-runtime 11.14.2-rc.6311 → 12.0.0-next.28533

package/components/data/table/components/TableHeader.js

@@ -7,30 +7,152 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TableHeaderComponent = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _reactTable = require("@tanstack/react-table");
 var _utils = require("../utils");
 var _TableFilters = require("./TableFilters");
+var _groupHeaderUtils = require("../utils/groupHeaderUtils");
+var _excluded = ["header", "enablesort", "rowSpan", "children", "className", "style", "title", "onClick"],
+  _excluded2 = ["rowSpan", "columnwidth"];
 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 TableHeaderComponent = exports.TableHeaderComponent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var table = _ref.table,
+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; }
+// Helper component for rendering a standard table header cell
+var StandardHeaderCell = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var _header$column$column;
+  var header = _ref.header,
     enablesort = _ref.enablesort,
-    _ref$rowClass = _ref.rowClass,
-    rowClass = _ref$rowClass === void 0 ? "" : _ref$rowClass,
-    sorting = _ref.sorting,
-    columnSizing = _ref.columnSizing,
-    rowSelection = _ref.rowSelection,
-    rowExpansionConfig = _ref.rowExpansionConfig,
-    filterMode = _ref.filterMode,
-    columnFilters = _ref.columnFilters,
-    onColumnFilterChange = _ref.onColumnFilterChange,
-    renderFormWidget = _ref.renderFormWidget,
-    listener = _ref.listener;
+    _ref$rowSpan = _ref.rowSpan,
+    rowSpan = _ref$rowSpan === void 0 ? 1 : _ref$rowSpan,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    title = _ref.title,
+    onClick = _ref.onClick,
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var canSort = enablesort && header.column.getCanSort();
+  var isSorted = header.column.getIsSorted();
+
+  // Merge className with meta className if present
+  var metaClassName = ((_header$column$column = header.column.columnDef) === null || _header$column$column === void 0 || (_header$column$column = _header$column$column.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.className) || "";
+  var mergedClassName = "".concat(_utils.TABLE_CSS_CLASSES.headerCell, " ").concat(metaClassName, " ").concat(className || "").trim();
+
+  // Merge default styles with provided styles
+  var mergedStyle = _objectSpread({
+    cursor: canSort ? "pointer" : "default",
+    userSelect: "none",
+    width: header.getSize(),
+    position: "relative"
+  }, style);
+
+  // Get title from header definition or use provided title
+  var headerTitle = header.column.columnDef.header && typeof header.column.columnDef.header !== "function" ? header.column.columnDef.header.toString() : "";
+  return __jsx(_material.TableCell, (0, _extends2["default"])({
+    className: mergedClassName,
+    rowSpan: rowSpan,
+    style: mergedStyle,
+    title: title || headerTitle,
+    onClick: onClick || (canSort ? header.column.getToggleSortingHandler() : undefined)
+  }, rest), children || __jsx(_react["default"].Fragment, null, __jsx(_material.Box, {
+    component: "span"
+  }, header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext())), canSort && __jsx(_material.Box, {
+    style: {
+      zIndex: 90
+    },
+    component: "span",
+    className: "sort-buttons-container ".concat(isSorted ? "active" : "")
+  }, __jsx(_material.Box, {
+    component: "i",
+    className: "sort-icon".concat(isSorted === "asc" ? " ".concat(_utils.TABLE_CSS_CLASSES.ascIcon) : isSorted === "desc" ? " ".concat(_utils.TABLE_CSS_CLASSES.descIcon) : "")
+  })), header.column.getCanResize() && __jsx(_material.Box, {
+    className: "ui-resizable-handle ui-resizable-e",
+    onMouseDown: header.getResizeHandler(),
+    onTouchStart: header.getResizeHandler()
+  })));
+});
+StandardHeaderCell.displayName = "StandardHeaderCell";
+
+// Helper component for rendering a group header cell
+var GroupHeaderCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
+  var headerCell = _ref2.headerCell;
+  var groupClasses = ["app-datagrid-group-header-cell"];
+  if (headerCell["class"]) groupClasses.push(headerCell["class"]);
+  if (headerCell.colClass) groupClasses.push(headerCell.colClass);
+  var groupStyles = _objectSpread({
+    textAlign: headerCell.textAlignment || "center",
+    backgroundColor: headerCell.backgroundColor
+  }, headerCell.styles || {});
+  return __jsx(_material.TableCell, {
+    className: groupClasses.join(" "),
+    colSpan: headerCell.colspan || 1,
+    style: groupStyles,
+    title: headerCell.displayName
+  }, __jsx("span", {
+    className: "header-data"
+  }, headerCell.displayName));
+});
+GroupHeaderCell.displayName = "GroupHeaderCell";
+
+// Helper component for expansion header cell
+var ExpansionHeaderCell = /*#__PURE__*/(0, _react.memo)(function (_ref3) {
+  var _ref3$rowSpan = _ref3.rowSpan,
+    rowSpan = _ref3$rowSpan === void 0 ? 1 : _ref3$rowSpan,
+    columnwidth = _ref3.columnwidth,
+    rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
+  return __jsx(_material.TableCell, (0, _extends2["default"])({}, rest, {
+    className: "".concat(_utils.TABLE_CSS_CLASSES.headerCell, " ").concat(rest.className || "").trim(),
+    rowSpan: rowSpan,
+    style: _objectSpread({
+      width: columnwidth || "50px",
+      padding: "8px",
+      userSelect: "none"
+    }, rest.style)
+  }));
+});
+ExpansionHeaderCell.displayName = "ExpansionHeaderCell";
+var TableHeaderComponent = exports.TableHeaderComponent = /*#__PURE__*/(0, _react.memo)(function (_ref4) {
+  var table = _ref4.table,
+    enablesort = _ref4.enablesort,
+    _ref4$enablecolumnsel = _ref4.enablecolumnselection,
+    enablecolumnselection = _ref4$enablecolumnsel === void 0 ? false : _ref4$enablecolumnsel,
+    _ref4$rowClass = _ref4.rowClass,
+    rowClass = _ref4$rowClass === void 0 ? "" : _ref4$rowClass,
+    rowExpansionConfig = _ref4.rowExpansionConfig,
+    filterMode = _ref4.filterMode,
+    columnFilters = _ref4.columnFilters,
+    onColumnFilterChange = _ref4.onColumnFilterChange,
+    renderFormWidget = _ref4.renderFormWidget,
+    listener = _ref4.listener,
+    tableStructure = _ref4.tableStructure,
+    onColumnSelect = _ref4.onColumnSelect,
+    onColumnDeselect = _ref4.onColumnDeselect,
+    onHeaderclick = _ref4.onHeaderclick,
+    tableName = _ref4.tableName;
   var hasExpansion = rowExpansionConfig && rowExpansionConfig.show;
 
-  // Calculate where to insert the expansion header
+  // Check if we have grouped columns
+  var hasGroups = (0, _react.useMemo)(function () {
+    return tableStructure && (0, _groupHeaderUtils.hasTableGroups)(tableStructure);
+  }, [tableStructure]);
+
+  // Calculate the maximum depth of the header structure
+  var maxHeaderDepth = (0, _react.useMemo)(function () {
+    if (!hasGroups || !tableStructure) return 1;
+    return (0, _groupHeaderUtils.calculateMaxDepth)(tableStructure);
+  }, [hasGroups, tableStructure]);
+
+  // Generate header rows for grouped columns
+  var groupHeaderRows = (0, _react.useMemo)(function () {
+    if (!hasGroups || !tableStructure) return [];
+    return (0, _groupHeaderUtils.generateHeaderRows)(tableStructure, maxHeaderDepth);
+  }, [hasGroups, tableStructure, maxHeaderDepth]);
+
+  // Calculate where to insert the expansion header for non-grouped tables
   var getExpansionInsertIndex = _react["default"].useMemo(function () {
     var _table$getHeaderGroup;
     if (!hasExpansion || !rowExpansionConfig) return -1;
@@ -79,44 +201,190 @@ var TableHeaderComponent = exports.TableHeaderComponent = /*#__PURE__*/(0, _reac
     }
     return 0;
   }, [hasExpansion, rowExpansionConfig, table]);
+
+  // Render grouped headers if we have groups
+  if (hasGroups && groupHeaderRows.length > 0) {
+    return __jsx(_material.TableHead, {
+      className: "table-header thead-sticky"
+    }, table.getHeaderGroups().map(function (headerGroup, groupIndex) {
+      // For grouped tables, we only render the first header group from the table
+      // and replace its content with our grouped structure
+      if (groupIndex > 0) return null;
+      return groupHeaderRows.map(function (headerRow, rowIndex) {
+        return __jsx(_material.TableRow, {
+          key: "header-row-".concat(rowIndex),
+          className: "".concat(_utils.TABLE_CSS_CLASSES.tableRow, " ").concat(rowClass)
+        }, rowIndex === 0 && headerGroup.headers.filter(function (header) {
+          return ["multiSelect", "radioSelect", "rowIndex", "row-index"].includes(header.column.id);
+        }).map(function (header) {
+          return __jsx(StandardHeaderCell, {
+            key: header.id,
+            header: header,
+            enablesort: enablesort,
+            rowSpan: maxHeaderDepth
+          });
+        }), rowIndex === 0 && hasExpansion && __jsx(ExpansionHeaderCell, {
+          key: "expansion-header",
+          rowSpan: maxHeaderDepth,
+          columnwidth: rowExpansionConfig === null || rowExpansionConfig === void 0 ? void 0 : rowExpansionConfig.columnwidth
+        }), headerRow.map(function (headerCell, cellIndex) {
+          if (headerCell.isGroup) {
+            return __jsx(GroupHeaderCell, {
+              key: "group-".concat(cellIndex, "-").concat(headerCell.field),
+              headerCell: headerCell
+            });
+          } else if (headerCell.column) {
+            // Find the corresponding header from the table
+            var header = headerGroup.headers.find(function (h) {
+              return h.column.id === headerCell.field || h.column.columnDef.accessorKey === headerCell.field;
+            });
+            if (header) {
+              return __jsx(StandardHeaderCell, {
+                key: header.id,
+                header: header,
+                enablesort: enablesort,
+                rowSpan: headerCell.rowspan || 1
+              });
+            }
+          }
+          return null;
+        }), rowIndex === 0 && headerGroup.headers.filter(function (header) {
+          return header.column.id === "actions";
+        }).map(function (header) {
+          return __jsx(StandardHeaderCell, {
+            key: header.id,
+            header: header,
+            enablesort: enablesort,
+            rowSpan: maxHeaderDepth
+          });
+        }));
+      });
+    }), filterMode === "multicolumn" && __jsx(_TableFilters.TableFilterRow, {
+      columns: table.getAllFlatColumns().map(function (col) {
+        return col.columnDef;
+      }),
+      columnFilters: columnFilters || {},
+      onColumnFilterChange: onColumnFilterChange || function () {},
+      filterMode: filterMode,
+      renderFormWidget: renderFormWidget,
+      listener: listener
+    }));
+  }
+
+  // Default rendering for non-grouped tables
   return __jsx(_material.TableHead, {
     className: "table-header thead-sticky"
   }, table.getHeaderGroups().map(function (headerGroup) {
     return __jsx(_material.TableRow, {
       key: headerGroup.id,
-      className: "".concat(_utils.TABLE_CSS_CLASSES.tableRow, " ").concat(rowClass)
+      className: "".concat(_utils.TABLE_CSS_CLASSES.tableRow, " ").concat(rowClass),
+      tabIndex: 0,
+      role: "row"
     }, headerGroup.headers.map(function (header, headerIndex) {
-      var _header$column$column;
+      var _header$column$column2;
       var cells = [];
 
       // Insert expansion header before this cell if it's at the calculated position
       if (hasExpansion && headerIndex === getExpansionInsertIndex) {
-        cells.push(__jsx(_material.TableCell, {
+        cells.push(__jsx(ExpansionHeaderCell, {
           key: "expansion-header-".concat(headerIndex),
           className: _utils.TABLE_CSS_CLASSES.headerCell,
           style: {
             width: (rowExpansionConfig === null || rowExpansionConfig === void 0 ? void 0 : rowExpansionConfig.columnwidth) || "50px",
             padding: "8px",
             userSelect: "none"
-          }
+          },
+          role: "columnheader",
+          "data-col-id": headerIndex,
+          tabIndex: 0,
+          "data-col-field": header.column.id,
+          columnwidth: rowExpansionConfig === null || rowExpansionConfig === void 0 ? void 0 : rowExpansionConfig.columnwidth
         }));
       }
 
+      // Column selection feature
+      var columnId = header.column.id;
+
+      // Determine if this is a system column (excluded from column selection)
+      var isSystemColumn = columnId === "multiSelect" || columnId === "radioSelect" || columnId === "row-index" || columnId === "rowIndex" || columnId === "actions";
+
+      // Handle header cell click - column selection takes priority over sorting
+      var handleHeaderClick = function handleHeaderClick(event) {
+        // Call onHeaderclick callback if provided
+        if (onHeaderclick) {
+          var _listener$Widgets;
+          var colDef = header.column.columnDef;
+          var columnData = {
+            field: columnId,
+            caption: colDef.header || columnId,
+            colDef: colDef
+          };
+          onHeaderclick(event, listener === null || listener === void 0 || (_listener$Widgets = listener.Widgets) === null || _listener$Widgets === void 0 ? void 0 : _listener$Widgets[tableName || ""], columnData);
+        }
+
+        // Skip system columns from column selection
+        if (enablecolumnselection && !isSystemColumn) {
+          // Column selection has priority - toggle class directly on the element
+          var target = event.currentTarget;
+          var isCurrentlySelected = target.classList.contains(_utils.TABLE_CSS_CLASSES.selectedColumn);
+
+          // Get current visible rows directly from table at click time
+          // This ensures we get the actual displayed rows based on current page size
+          var currentRows = table.getRowModel().rows.map(function (row) {
+            return row.original;
+          });
+
+          // Extract column data from current visible rows
+          var _colDef = header.column.columnDef;
+          var accessorKey = _colDef.accessorKey || columnId;
+          var _columnData = currentRows.map(function (row) {
+            // Handle nested paths (e.g., "name.location.url")
+            if (accessorKey.includes(".")) {
+              return accessorKey.split(".").reduce(function (obj, key) {
+                return obj === null || obj === void 0 ? void 0 : obj[key];
+              }, row);
+            }
+            return row[accessorKey];
+          });
+          if (isCurrentlySelected) {
+            // Deselect: remove the class and call callback
+            target.classList.remove(_utils.TABLE_CSS_CLASSES.selectedColumn);
+            onColumnDeselect === null || onColumnDeselect === void 0 || onColumnDeselect(event, columnId, header.column.columnDef, _columnData);
+          } else {
+            // Select: add the class and call callback
+            target.classList.add(_utils.TABLE_CSS_CLASSES.selectedColumn);
+            onColumnSelect === null || onColumnSelect === void 0 || onColumnSelect(event, columnId, header.column.columnDef, _columnData);
+          }
+          return; // Don't execute sorting
+        }
+
+        // Fall back to sorting if column selection is not enabled
+        if (enablesort && header.column.getCanSort()) {
+          var _header$column$getTog;
+          (_header$column$getTog = header.column.getToggleSortingHandler()) === null || _header$column$getTog === void 0 || _header$column$getTog(event);
+        }
+      };
+      var isClickable = enablecolumnselection && !isSystemColumn || enablesort && header.column.getCanSort();
+
       // Add the regular header cell
       cells.push(__jsx(_material.TableCell, {
         key: header.id,
-        className: "".concat(_utils.TABLE_CSS_CLASSES.headerCell, " ").concat(((_header$column$column = header.column.columnDef) === null || _header$column$column === void 0 || (_header$column$column = _header$column$column.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.className) || "").trim(),
+        className: "".concat(_utils.TABLE_CSS_CLASSES.headerCell, " ").concat(((_header$column$column2 = header.column.columnDef) === null || _header$column$column2 === void 0 || (_header$column$column2 = _header$column$column2.meta) === null || _header$column$column2 === void 0 ? void 0 : _header$column$column2.className) || "").trim(),
         style: {
-          cursor: enablesort && header.column.getCanSort() ? "pointer" : "default",
+          cursor: isClickable ? "pointer" : "default",
           userSelect: "none",
           width: header.getSize(),
           position: "relative"
         },
         title: header.column.columnDef.header && typeof header.column.columnDef.header !== "function" ? header.column.columnDef.header.toString() : "",
-        onClick: enablesort && header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined
+        onClick: handleHeaderClick,
+        role: "columnheader",
+        "data-col-id": headerIndex,
+        tabIndex: 0,
+        "data-col-field": header.column.id
       }, __jsx(_material.Box, {
         component: "span"
-      }, header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext())), enablesort && header.column.getCanSort() && __jsx(_material.Box, {
+      }, header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext())), enablesort && !enablecolumnselection && header.column.getCanSort() && __jsx(_material.Box, {
         style: {
           zIndex: 90
         },
@@ -173,6 +441,6 @@ var TableHeaderComponent = exports.TableHeaderComponent = /*#__PURE__*/(0, _reac
   var selectionEqual = selectionKeys.size === Object.keys(prevSelection).length && selectionKeys.size === Object.keys(nextSelection).length && Array.from(selectionKeys).every(function (key) {
     return prevSelection[key] === nextSelection[key];
   });
-  return prevProps.enablesort === nextProps.enablesort && prevProps.rowClass === nextProps.rowClass && sortingEqual && sizingEqual && selectionEqual && prevProps.rowExpansionConfig === nextProps.rowExpansionConfig && prevProps.columnsVersion === nextProps.columnsVersion && prevProps.filterMode === nextProps.filterMode && JSON.stringify(prevProps.columnFilters || {}) === JSON.stringify(nextProps.columnFilters || {});
+  return prevProps.enablesort === nextProps.enablesort && prevProps.enablecolumnselection === nextProps.enablecolumnselection && prevProps.rowClass === nextProps.rowClass && sortingEqual && sizingEqual && selectionEqual && prevProps.rowExpansionConfig === nextProps.rowExpansionConfig && prevProps.columnsVersion === nextProps.columnsVersion && prevProps.filterMode === nextProps.filterMode && JSON.stringify(prevProps.columnFilters || {}) === JSON.stringify(nextProps.columnFilters || {});
 });
 TableHeaderComponent.displayName = "TableHeaderComponent";

package/components/data/table/components/TablePanelHeading.js

@@ -1,21 +1,30 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TablePanelHeading = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _tableAction = _interopRequireDefault(require("../table-action"));
 var _utils = require("../utils");
+var _menu = _interopRequireDefault(require("@wavemaker/react-runtime/components/navigation/menu"));
+var _types = require("@wavemaker/react-runtime/components/data/types");
+var _lodash = require("lodash");
+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 TablePanelHeading = exports.TablePanelHeading = function TablePanelHeading(_ref) {
+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 TablePanelHeadingComponent = function TablePanelHeadingComponent(_ref) {
+  var _listener$appLocale;
   var title = _ref.title,
     subheading = _ref.subheading,
     iconclass = _ref.iconclass,
-    _ref$exportOptions = _ref.exportOptions,
-    exportOptions = _ref$exportOptions === void 0 ? [] : _ref$exportOptions,
+    _ref$exportformat = _ref.exportformat,
+    exportformat = _ref$exportformat === void 0 ? [] : _ref$exportformat,
     headerActions = _ref.headerActions,
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? "normal" : _ref$spacing,
@@ -23,7 +32,113 @@ var TablePanelHeading = exports.TablePanelHeading = function TablePanelHeading(_
     isGridEditMode = _ref$isGridEditMode === void 0 ? false : _ref$isGridEditMode,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-    listener = _ref.listener;
+    listener = _ref.listener,
+    datasource = _ref.datasource,
+    _ref$columns = _ref.columns,
+    columns = _ref$columns === void 0 ? [] : _ref$columns,
+    sortInfo = _ref.sortInfo,
+    _ref$filterInfo = _ref.filterInfo,
+    filterInfo = _ref$filterInfo === void 0 ? [] : _ref$filterInfo,
+    exportdatasize = _ref.exportdatasize,
+    onBeforeExport = _ref.onBeforeExport;
+  var ROW_OPS_FIELD = "rowOperations";
+  var exportIconMapping = {
+    EXCEL: "fa fa-file-excel-o",
+    CSV: "fa fa-file-text-o"
+  };
+
+  // Parse exportformat if it's a comma-separated string
+  var exportOptions = (0, _react.useMemo)(function () {
+    if (Array.isArray(exportformat)) {
+      return exportformat;
+    }
+    var formatStr = exportformat;
+    if (typeof formatStr === "string") {
+      return formatStr.split(",").map(function (opt) {
+        return opt.trim();
+      }).filter(Boolean);
+    }
+    return [];
+  }, [exportformat]);
+
+  // Transform export options into dataset format for WmMenu
+  var exportDataset = (0, _react.useMemo)(function () {
+    return exportOptions.map(function (format) {
+      return {
+        label: format,
+        icon: exportIconMapping[format] || "fa fa-file-o",
+        dataValue: format
+      };
+    });
+  }, [exportOptions]);
+  var handleExportSelect = (0, _react.useCallback)(function (event, widget, item) {
+    if (!datasource) {
+      console.warn("No datasource available for export");
+      return;
+    }
+    var sortOptions = (0, _lodash.isEmpty)(sortInfo) ? "" : "".concat(sortInfo.field, " ").concat(sortInfo.direction);
+    var columnsMap = {};
+
+    // Build columns map from fieldDefs (columns)
+    columns.forEach(function (fieldDef) {
+      // Do not add the row operation actions column to the exported file.
+      if (fieldDef.field === ROW_OPS_FIELD || fieldDef.show === false) {
+        return;
+      }
+      var option = {
+        header: fieldDef.displayName || fieldDef.field || ""
+      };
+
+      // If column has exportexpression, then send the expression as required by backend.
+      // otherwise send the field name.
+      if (fieldDef.exportexpression) {
+        option.expression = fieldDef.exportexpression;
+      } else {
+        option.field = fieldDef.field;
+      }
+      if (fieldDef.field) {
+        columnsMap[fieldDef.field] = option;
+      }
+    });
+    var requestData = {
+      matchMode: "anywhereignorecase",
+      filterFields: filterInfo,
+      orderBy: sortOptions,
+      exportType: item.label,
+      logicalOp: "AND",
+      exportSize: exportdatasize,
+      columns: columnsMap
+    };
+
+    // Call beforeexport callback if provided
+    var isValid = true;
+    if (onBeforeExport) {
+      isValid = onBeforeExport({
+        $data: requestData
+      }) !== false;
+    }
+    if (isValid === false) {
+      return;
+    }
+
+    // Convert columns map to fields array
+    var requestDataWithFields = _objectSpread(_objectSpread({}, requestData), {}, {
+      fields: (0, _lodash.values)(requestData.columns)
+    });
+
+    // Execute download operation
+    try {
+      datasource === null || datasource === void 0 || datasource.execute(_types.DataSource.Operation.DOWNLOAD, {
+        data: requestDataWithFields
+      });
+    } catch (error) {
+      var _listener$App;
+      console.error("Error exporting data:", error);
+      if (listener !== null && listener !== void 0 && (_listener$App = listener.App) !== null && _listener$App !== void 0 && _listener$App.notifyApp) {
+        listener.App.notifyApp("Failed to export data", "Error");
+      }
+    }
+  }, [datasource, columns, sortInfo, filterInfo, exportdatasize, onBeforeExport, listener]);
   return __jsx(_material.Box, {
     className: "panel-heading"
   }, __jsx(_material.Box, {
@@ -42,7 +157,7 @@ var TablePanelHeading = exports.TablePanelHeading = function TablePanelHeading(_
   }, title), subheading && __jsx(_material.Box, {
     component: "div",
     className: "description"
-  }, subheading)), ((exportOptions === null || exportOptions === void 0 ? void 0 : exportOptions.length) > 0 || headerActions.length > 0) && __jsx(_material.Box, {
+  }, subheading)), ((exportformat === null || exportformat === void 0 ? void 0 : exportformat.length) > 0 || headerActions.length > 0) && __jsx(_material.Box, {
     className: "panel-actions app-datagrid-actions"
   }, headerActions.map(function (action, index) {
     return __jsx(_tableAction["default"], {
@@ -64,5 +179,21 @@ var TablePanelHeading = exports.TablePanelHeading = function TablePanelHeading(_
       show: action.show,
       styles: action.styles
     }, action.children);
-  }), (exportOptions === null || exportOptions === void 0 ? void 0 : exportOptions.length) > 0 && __jsx(_material.Box, null, "Export Options Available"))));
-};
+  }), exportOptions.length > 0 && __jsx(_menu["default"], {
+    caption: (listener === null || listener === void 0 || (_listener$appLocale = listener.appLocale) === null || _listener$appLocale === void 0 ? void 0 : _listener$appLocale.LABEL_EXPORT) || "Export",
+    dataset: exportDataset,
+    itemlabel: "label",
+    itemicon: "icon",
+    menuposition: "down,left",
+    autoclose: "always",
+    onSelect: handleExportSelect,
+    listener: listener,
+    name: "export-menu",
+    tabindex: 0
+  }))));
+};
+TablePanelHeadingComponent.displayName = "TablePanelHeading";
+var TablePanelHeading = exports.TablePanelHeading = /*#__PURE__*/(0, _react.memo)(TablePanelHeadingComponent, function (prevProps, nextProps) {
+  // Custom comparison function to prevent unnecessary re-renders
+  return prevProps.title === nextProps.title && prevProps.subheading === nextProps.subheading && prevProps.iconclass === nextProps.iconclass && prevProps.exportformat === nextProps.exportformat && prevProps.headerActions === nextProps.headerActions && prevProps.spacing === nextProps.spacing && prevProps.isGridEditMode === nextProps.isGridEditMode && prevProps.isLoading === nextProps.isLoading && prevProps.listener === nextProps.listener && prevProps.datasource === nextProps.datasource && prevProps.columns === nextProps.columns && prevProps.sortInfo === nextProps.sortInfo && prevProps.filterInfo === nextProps.filterInfo && prevProps.exportdatasize === nextProps.exportdatasize && prevProps.onBeforeExport === nextProps.onBeforeExport;
+});

package/components/data/table/components/index.js

@@ -33,6 +33,24 @@ Object.defineProperty(exports, "RowExpansionButton", {
     return _RowExpansionButton.RowExpansionButton;
   }
 });
+Object.defineProperty(exports, "SummaryCell", {
+  enumerable: true,
+  get: function get() {
+    return _SummaryCell.SummaryCell;
+  }
+});
+Object.defineProperty(exports, "SummaryRow", {
+  enumerable: true,
+  get: function get() {
+    return _SummaryRow.SummaryRow;
+  }
+});
+Object.defineProperty(exports, "SummaryRowFooter", {
+  enumerable: true,
+  get: function get() {
+    return _SummaryRowFooter.SummaryRowFooter;
+  }
+});
 Object.defineProperty(exports, "TableBodyComponent", {
   enumerable: true,
   get: function get() {
@@ -71,4 +89,7 @@ var _FieldValidationError = require("./FieldValidationError");
 var _TableBody = require("./TableBody");
 var _TableHeader = require("./TableHeader");
 var _RowExpansionButton = require("./RowExpansionButton");
-var _TableFilters = require("./TableFilters");
+var _TableFilters = require("./TableFilters");
+var _SummaryRowFooter = require("./SummaryRowFooter");
+var _SummaryRow = require("./SummaryRow");
+var _SummaryCell = require("./SummaryCell");