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

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

@@ -0,0 +1,450 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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;
+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$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 resizableClass = header.column.getCanResize() ? " ui-resizable" : "";
+  var mergedClassName = "".concat(_utils.TABLE_CSS_CLASSES.headerCell, " ").concat(metaClassName, " ").concat(className || "", " ").concat(resizableClass).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;
+
+  // 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;
+    var position = rowExpansionConfig.position;
+    var headers = ((_table$getHeaderGroup = table.getHeaderGroups()[0]) === null || _table$getHeaderGroup === void 0 ? void 0 : _table$getHeaderGroup.headers) || [];
+
+    // If position is -1, insert before last column
+    if (position === "-1" || position === -1) {
+      return headers.length - 1;
+    }
+
+    // If position is a number, use it as index for data columns
+    if (typeof position === "number" || typeof position === "string" && !isNaN(Number(position))) {
+      var positionNum = Number(position);
+      // Find the index of the first data column
+      var dataColumnStartIndex = 0;
+      for (var i = 0; i < headers.length; i++) {
+        var header = headers[i];
+        // Skip system columns (multiSelect, radioSelect, row-index, actions)
+        if (header.id !== "multiSelect" && header.id !== "radioSelect" && header.id !== "row-index" && header.id !== "actions") {
+          dataColumnStartIndex = i;
+          break;
+        }
+      }
+      return dataColumnStartIndex + positionNum;
+    }
+
+    // If position is a string (column name), find the column
+    if (typeof position === "string") {
+      var columnIndex = headers.findIndex(function (header) {
+        // Check direct match with id
+        if (header.id === position || header.column.id === position) {
+          return true;
+        }
+        // Check accessorKey for nested paths
+        var column = header.column.columnDef;
+        if (column.accessorKey === position) {
+          return true;
+        }
+        // For nested paths like "name.location.url", TanStack converts dots to underscores in id
+        var normalizedPosition = position.replace(/\./g, "_");
+        return header.id === normalizedPosition || header.column.id === normalizedPosition;
+      });
+      // Return index + 1 to place AFTER the named column
+      return columnIndex >= 0 ? columnIndex + 1 : 0;
+    }
+    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),
+      tabIndex: 0,
+      role: "row"
+    }, headerGroup.headers.map(function (header, headerIndex) {
+      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(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 (ui-resizable when column can resize, match Angular)
+      var headerCellResizableClass = header.column.getCanResize() ? " ui-resizable" : "";
+      cells.push(__jsx(_material.TableCell, {
+        key: header.id,
+        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) || "", " ").concat(headerCellResizableClass).trim(),
+        style: {
+          cursor: isClickable ? "pointer" : "default",
+          userSelect: "none",
+          width: header.getSize(),
+          position: "relative",
+          fontSize: "inherit",
+          color: "inherit",
+          fontWeight: "bold",
+          lineHeight: "inherit"
+        },
+        title: header.column.columnDef.header && typeof header.column.columnDef.header !== "function" ? header.column.columnDef.header.toString() : "",
+        onClick: handleHeaderClick,
+        role: "columnheader",
+        "data-col-id": headerIndex,
+        tabIndex: 0,
+        "data-col-field": header.column.id
+      }, header.isPlaceholder ? null : (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext()), enablesort && !enablecolumnselection && header.column.getCanSort() && __jsx(_material.Box, {
+        style: {
+          zIndex: 90
+        },
+        component: "span",
+        className: "sort-buttons-container ".concat(header.column.getIsSorted() ? "active" : "")
+      }, __jsx(_material.Box, {
+        component: "i",
+        className: "sort-icon".concat(header.column.getIsSorted() === "asc" ? " ".concat(_utils.TABLE_CSS_CLASSES.ascIcon) : header.column.getIsSorted() === "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()
+      })));
+      return __jsx(_react["default"].Fragment, {
+        key: "header-group-".concat(headerIndex)
+      }, cells);
+    }));
+  }), 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
+  }));
+}, function (prevProps, nextProps) {
+  // Compare props including the sorting state
+  var prevSorting = prevProps.sorting || [];
+  var nextSorting = nextProps.sorting || [];
+  if (prevProps.ColClassSignature !== nextProps.ColClassSignature) {
+    return false;
+  }
+
+  // Deep compare sorting arrays
+  var sortingEqual = prevSorting.length === nextSorting.length && prevSorting.every(function (prevSort, index) {
+    var nextSort = nextSorting[index];
+    return prevSort.id === nextSort.id && prevSort.desc === nextSort.desc;
+  });
+
+  // Compare column sizing
+  var prevSizing = prevProps.columnSizing || {};
+  var nextSizing = nextProps.columnSizing || {};
+  var sizingKeys = new Set([].concat((0, _toConsumableArray2["default"])(Object.keys(prevSizing)), (0, _toConsumableArray2["default"])(Object.keys(nextSizing))));
+  var sizingEqual = Array.from(sizingKeys).every(function (key) {
+    return prevSizing[key] === nextSizing[key];
+  });
+
+  // Compare row selection
+  var prevSelection = prevProps.rowSelection || {};
+  var nextSelection = nextProps.rowSelection || {};
+  var selectionKeys = new Set([].concat((0, _toConsumableArray2["default"])(Object.keys(prevSelection)), (0, _toConsumableArray2["default"])(Object.keys(nextSelection))));
+  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.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.d.ts

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

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

@@ -0,0 +1,202 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _tableAction = require("../table-action");
+var _utils = require("../utils");
+var _menu = _interopRequireDefault(require("@wavemaker-ai/react-runtime/components/navigation/menu"));
+var _types = require("@wavemaker-ai/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;
+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$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,
+    _ref$isGridEditMode = _ref.isGridEditMode,
+    isGridEditMode = _ref$isGridEditMode === void 0 ? false : _ref$isGridEditMode,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    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, {
+    component: "h3",
+    className: "panel-title"
+  }, __jsx(_material.Box, {
+    className: "pull-left"
+  }, iconclass && __jsx(_material.Box, {
+    component: "i",
+    className: "app-icon panel-icon ".concat(iconclass)
+  })), __jsx(_material.Box, {
+    className: "pull-left"
+  }, title && __jsx(_material.Box, {
+    component: "div",
+    className: "heading"
+  }, title), subheading && __jsx(_material.Box, {
+    component: "div",
+    className: "description"
+  }, 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.WmTableAction, {
+      key: "header-action-".concat(index, "-").concat(action.key || action.name),
+      className: (0, _utils.getButtonClasses)(action, spacing, isGridEditMode, isLoading),
+      "data-action-key": action.key,
+      onClick: action.onClick,
+      name: action["displayName"] || action.name || "Action"
+      // @ts-ignore
+      ,
+      displayName: action["displayName"],
+      title: action.title,
+      iconclass: action.iconclass,
+      action: action.action,
+      position: action.position,
+      shortcutkey: action.shortcutkey,
+      tabindex: typeof action.tabindex === "string" ? parseInt(action.tabindex, 10) : action.tabindex,
+      widgetType: action.widgetType,
+      listener: listener,
+      disabled: action.disabled || action.key === "addNewRow" && (isGridEditMode || isLoading),
+      show: action.show,
+      styles: action.styles
+    }, action.children);
+  }), exportOptions.length > 0 && __jsx(_menu["default"], {
+    className: "btn-table-menu",
+    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.d.ts

@@ -0,0 +1,12 @@
+export { TablePanelHeading } from "./TablePanelHeading";
+export { TableFooterActions } from "./TableFooterActions";
+export { AddNewRow } from "./AddNewRow";
+export { EditableCell } from "./EditableCell";
+export { FieldValidationError } from "./FieldValidationError";
+export { TableBodyComponent } from "./TableBody";
+export { TableHeaderComponent } from "./TableHeader";
+export { RowExpansionButton } from "./RowExpansionButton";
+export { GlobalSearchFilter, TableFilterRow } from "./TableFilters";
+export { SummaryRowFooter } from "./SummaryRowFooter";
+export { SummaryRow } from "./SummaryRow";
+export { SummaryCell } from "./SummaryCell";