@wavemaker-ai/react-runtime 1.0.0-next.27766

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

@@ -0,0 +1,477 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { memo, useMemo } from "react";
+import { TableHead, TableRow, TableCell, Box } from "@mui/material";
+import { flexRender } from "@tanstack/react-table";
+import { TABLE_CSS_CLASSES, getDomHiddenCellStyle } from "../utils";
+import { TableFilterRow } from "./TableFilters";
+import { calculateMaxDepth, generateHeaderRows, hasTableGroups } from "../utils/groupHeaderUtils";
+const StandardHeaderCell = memo(
+  (_a) => {
+    var _b = _a, {
+      header,
+      enablesort,
+      rowSpan = 1,
+      children,
+      className,
+      style,
+      title,
+      onClick
+    } = _b, rest = __objRest(_b, [
+      "header",
+      "enablesort",
+      "rowSpan",
+      "children",
+      "className",
+      "style",
+      "title",
+      "onClick"
+    ]);
+    var _a2, _b2, _c;
+    const canSort = enablesort && header.column.getCanSort();
+    const isSorted = header.column.getIsSorted();
+    const metaClassName = ((_b2 = (_a2 = header.column.columnDef) == null ? void 0 : _a2.meta) == null ? void 0 : _b2.className) || "";
+    const resizableClass = header.column.getCanResize() ? " ui-resizable" : "";
+    const mergedClassName = `${TABLE_CSS_CLASSES.headerCell} ${metaClassName} ${className || ""} ${resizableClass}`.trim();
+    const headerMeta = (_c = header.column.columnDef) == null ? void 0 : _c.meta;
+    const mergedStyle = __spreadValues(__spreadValues({
+      cursor: canSort ? "pointer" : "default",
+      userSelect: "none",
+      width: header.getSize(),
+      position: "relative"
+    }, getDomHiddenCellStyle(headerMeta)), style);
+    const headerTitle = header.column.columnDef.header && typeof header.column.columnDef.header !== "function" ? header.column.columnDef.header.toString() : "";
+    return /* @__PURE__ */ jsx(
+      TableCell,
+      __spreadProps(__spreadValues({
+        className: mergedClassName,
+        rowSpan,
+        style: mergedStyle,
+        title: title || headerTitle,
+        onClick: onClick || (canSort ? header.column.getToggleSortingHandler() : void 0)
+      }, rest), {
+        children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Box, { component: "span", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
+          canSort && /* @__PURE__ */ jsx(
+            Box,
+            {
+              style: { zIndex: 90 },
+              component: "span",
+              className: `sort-buttons-container ${isSorted ? "active" : ""}`,
+              children: /* @__PURE__ */ jsx(
+                Box,
+                {
+                  component: "i",
+                  className: `sort-icon${isSorted === "asc" ? ` ${TABLE_CSS_CLASSES.ascIcon}` : isSorted === "desc" ? ` ${TABLE_CSS_CLASSES.descIcon}` : ""}`
+                }
+              )
+            }
+          ),
+          header.column.getCanResize() && /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: "ui-resizable-handle ui-resizable-e",
+              onMouseDown: header.getResizeHandler(),
+              onTouchStart: header.getResizeHandler()
+            }
+          )
+        ] })
+      })
+    );
+  }
+);
+StandardHeaderCell.displayName = "StandardHeaderCell";
+const GroupHeaderCell = memo(({ headerCell }) => {
+  const groupClasses = ["app-datagrid-group-header-cell"];
+  if (headerCell.class) groupClasses.push(headerCell.class);
+  if (headerCell.colClass) groupClasses.push(headerCell.colClass);
+  const groupStyles = __spreadValues({
+    textAlign: headerCell.textAlignment || "center",
+    backgroundColor: headerCell.backgroundColor
+  }, headerCell.styles || {});
+  return /* @__PURE__ */ jsx(
+    TableCell,
+    {
+      className: groupClasses.join(" "),
+      colSpan: headerCell.colspan || 1,
+      style: groupStyles,
+      title: headerCell.displayName,
+      children: /* @__PURE__ */ jsx("span", { className: "header-data", children: headerCell.displayName })
+    }
+  );
+});
+GroupHeaderCell.displayName = "GroupHeaderCell";
+const ExpansionHeaderCell = memo(
+  (_c) => {
+    var _d = _c, {
+      rowSpan = 1,
+      columnwidth
+    } = _d, rest = __objRest(_d, [
+      "rowSpan",
+      "columnwidth"
+    ]);
+    return /* @__PURE__ */ jsx(
+      TableCell,
+      __spreadProps(__spreadValues({}, rest), {
+        className: `${TABLE_CSS_CLASSES.headerCell} ${rest.className || ""}`.trim(),
+        rowSpan,
+        style: __spreadValues({
+          width: columnwidth || "50px",
+          padding: "8px",
+          userSelect: "none"
+        }, rest.style)
+      })
+    );
+  }
+);
+ExpansionHeaderCell.displayName = "ExpansionHeaderCell";
+const TableHeaderComponent = memo(
+  ({
+    table,
+    enablesort,
+    enablecolumnselection = false,
+    rowClass = "",
+    rowExpansionConfig,
+    filterMode,
+    columnFilters,
+    onColumnFilterChange,
+    renderFormWidget,
+    listener,
+    tableStructure,
+    onColumnSelect,
+    onColumnDeselect,
+    onHeaderclick,
+    tableName
+  }) => {
+    const hasExpansion = rowExpansionConfig ? true : false;
+    const hasGroups = useMemo(() => {
+      return tableStructure && hasTableGroups(tableStructure);
+    }, [tableStructure]);
+    const maxHeaderDepth = useMemo(() => {
+      if (!hasGroups || !tableStructure) return 1;
+      return calculateMaxDepth(tableStructure);
+    }, [hasGroups, tableStructure]);
+    const groupHeaderRows = useMemo(() => {
+      if (!hasGroups || !tableStructure) return [];
+      return generateHeaderRows(tableStructure, maxHeaderDepth);
+    }, [hasGroups, tableStructure, maxHeaderDepth]);
+    const getExpansionInsertIndex = React.useMemo(() => {
+      var _a;
+      if (!hasExpansion || !rowExpansionConfig) return -1;
+      const position = rowExpansionConfig.position;
+      const headers = ((_a = table.getHeaderGroups()[0]) == null ? void 0 : _a.headers) || [];
+      if (position === "-1" || position === -1) {
+        return headers.length - 1;
+      }
+      if (typeof position === "number" || typeof position === "string" && !isNaN(Number(position))) {
+        const positionNum = Number(position);
+        let dataColumnStartIndex = 0;
+        for (let i = 0; i < headers.length; i++) {
+          const header = headers[i];
+          if (header.id !== "multiSelect" && header.id !== "radioSelect" && header.id !== "row-index" && header.id !== "actions") {
+            dataColumnStartIndex = i;
+            break;
+          }
+        }
+        return dataColumnStartIndex + positionNum;
+      }
+      if (typeof position === "string") {
+        const columnIndex = headers.findIndex((header) => {
+          if (header.id === position || header.column.id === position) {
+            return true;
+          }
+          const column = header.column.columnDef;
+          if (column.accessorKey === position) {
+            return true;
+          }
+          const normalizedPosition = position.replace(/\./g, "_");
+          return header.id === normalizedPosition || header.column.id === normalizedPosition;
+        });
+        return columnIndex >= 0 ? columnIndex + 1 : 0;
+      }
+      return 0;
+    }, [hasExpansion, rowExpansionConfig, table]);
+    if (hasGroups && groupHeaderRows.length > 0) {
+      return /* @__PURE__ */ jsxs(TableHead, { className: "table-header thead-sticky", children: [
+        table.getHeaderGroups().map((headerGroup, groupIndex) => {
+          if (groupIndex > 0) return null;
+          return groupHeaderRows.map((headerRow, rowIndex) => /* @__PURE__ */ jsxs(
+            TableRow,
+            {
+              className: `${TABLE_CSS_CLASSES.tableRow} ${rowClass}`,
+              children: [
+                rowIndex === 0 && headerGroup.headers.filter(
+                  (header) => ["multiSelect", "radioSelect", "rowIndex", "row-index"].includes(
+                    header.column.id
+                  )
+                ).map((header) => /* @__PURE__ */ jsx(
+                  StandardHeaderCell,
+                  {
+                    header,
+                    enablesort,
+                    rowSpan: maxHeaderDepth
+                  },
+                  header.id
+                )),
+                rowIndex === 0 && hasExpansion && /* @__PURE__ */ jsx(
+                  ExpansionHeaderCell,
+                  {
+                    rowSpan: maxHeaderDepth,
+                    columnwidth: rowExpansionConfig == null ? void 0 : rowExpansionConfig.columnwidth
+                  },
+                  "expansion-header"
+                ),
+                headerRow.map((headerCell, cellIndex) => {
+                  if (headerCell.isGroup) {
+                    return /* @__PURE__ */ jsx(
+                      GroupHeaderCell,
+                      {
+                        headerCell
+                      },
+                      `group-${cellIndex}-${headerCell.field}`
+                    );
+                  } else if (headerCell.column) {
+                    const header = headerGroup.headers.find(
+                      (h) => h.column.id === headerCell.field || h.column.columnDef.accessorKey === headerCell.field
+                    );
+                    if (header) {
+                      return /* @__PURE__ */ jsx(
+                        StandardHeaderCell,
+                        {
+                          header,
+                          enablesort,
+                          rowSpan: headerCell.rowspan || 1
+                        },
+                        header.id
+                      );
+                    }
+                  }
+                  return null;
+                }),
+                rowIndex === 0 && headerGroup.headers.filter((header) => header.column.id === "actions").map((header) => /* @__PURE__ */ jsx(
+                  StandardHeaderCell,
+                  {
+                    header,
+                    enablesort,
+                    rowSpan: maxHeaderDepth
+                  },
+                  header.id
+                ))
+              ]
+            },
+            `header-row-${rowIndex}`
+          ));
+        }),
+        filterMode === "multicolumn" && /* @__PURE__ */ jsx(
+          TableFilterRow,
+          {
+            columns: table.getAllFlatColumns().map((col) => col.columnDef),
+            columnFilters: columnFilters || {},
+            onColumnFilterChange: onColumnFilterChange || (() => {
+            }),
+            filterMode,
+            renderFormWidget,
+            listener
+          }
+        )
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(TableHead, { className: "table-header thead-sticky", children: [
+      table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
+        TableRow,
+        {
+          className: `${TABLE_CSS_CLASSES.tableRow} ${rowClass}`,
+          tabIndex: 0,
+          role: "row",
+          children: headerGroup.headers.map((header, headerIndex) => {
+            var _a, _b;
+            const cells = [];
+            if (hasExpansion && headerIndex === getExpansionInsertIndex) {
+              cells.push(
+                /* @__PURE__ */ jsx(
+                  ExpansionHeaderCell,
+                  {
+                    className: TABLE_CSS_CLASSES.headerCell,
+                    style: {
+                      width: (rowExpansionConfig == null ? 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 ? void 0 : rowExpansionConfig.columnwidth
+                  },
+                  `expansion-header-${headerIndex}`
+                )
+              );
+            }
+            const columnId = header.column.id;
+            const isSystemColumn = columnId === "multiSelect" || columnId === "radioSelect" || columnId === "row-index" || columnId === "rowIndex" || columnId === "actions";
+            const handleHeaderClick = (event) => {
+              var _a2, _b2;
+              if (onHeaderclick) {
+                const colDef = header.column.columnDef;
+                const columnData = {
+                  field: columnId,
+                  caption: colDef.header || columnId,
+                  colDef
+                };
+                onHeaderclick(event, (_a2 = listener == null ? void 0 : listener.Widgets) == null ? void 0 : _a2[tableName || ""], columnData);
+              }
+              if (enablecolumnselection && !isSystemColumn) {
+                const target = event.currentTarget;
+                const isCurrentlySelected = target.classList.contains(
+                  TABLE_CSS_CLASSES.selectedColumn
+                );
+                const currentRows = table.getRowModel().rows.map((row) => row.original);
+                const colDef = header.column.columnDef;
+                const accessorKey = colDef.accessorKey || columnId;
+                const columnData = currentRows.map((row) => {
+                  if (accessorKey.includes(".")) {
+                    return accessorKey.split(".").reduce((obj, key) => obj == null ? void 0 : obj[key], row);
+                  }
+                  return row[accessorKey];
+                });
+                if (isCurrentlySelected) {
+                  target.classList.remove(TABLE_CSS_CLASSES.selectedColumn);
+                  onColumnDeselect == null ? void 0 : onColumnDeselect(event, columnId, header.column.columnDef, columnData);
+                } else {
+                  target.classList.add(TABLE_CSS_CLASSES.selectedColumn);
+                  onColumnSelect == null ? void 0 : onColumnSelect(event, columnId, header.column.columnDef, columnData);
+                }
+                return;
+              }
+              if (enablesort && header.column.getCanSort()) {
+                (_b2 = header.column.getToggleSortingHandler()) == null ? void 0 : _b2(event);
+              }
+            };
+            const isClickable = enablecolumnselection && !isSystemColumn || enablesort && header.column.getCanSort();
+            const headerCellResizableClass = header.column.getCanResize() ? " ui-resizable" : "";
+            const headerMeta = header.column.columnDef.meta;
+            cells.push(
+              /* @__PURE__ */ jsxs(
+                TableCell,
+                {
+                  className: `${TABLE_CSS_CLASSES.headerCell} ${((_b = (_a = header.column.columnDef) == null ? void 0 : _a.meta) == null ? void 0 : _b.className) || ""} ${headerCellResizableClass}`.trim(),
+                  style: __spreadValues({
+                    cursor: isClickable ? "pointer" : "default",
+                    userSelect: "none",
+                    width: header.getSize(),
+                    position: "relative",
+                    fontSize: "inherit",
+                    color: "inherit",
+                    fontWeight: "bold",
+                    lineHeight: "inherit"
+                  }, getDomHiddenCellStyle(headerMeta)),
+                  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,
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "header-data", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
+                    enablesort && !enablecolumnselection && header.column.getCanSort() && /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        style: { zIndex: 90 },
+                        component: "span",
+                        className: `sort-buttons-container ${header.column.getIsSorted() ? "active" : ""}`,
+                        children: /* @__PURE__ */ jsx(
+                          Box,
+                          {
+                            component: "i",
+                            className: `sort-icon${header.column.getIsSorted() === "asc" ? ` ${TABLE_CSS_CLASSES.ascIcon}` : header.column.getIsSorted() === "desc" ? ` ${TABLE_CSS_CLASSES.descIcon}` : ""}`
+                          }
+                        )
+                      }
+                    ),
+                    header.column.getCanResize() && /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        className: "ui-resizable-handle ui-resizable-e",
+                        onMouseDown: header.getResizeHandler(),
+                        onTouchStart: header.getResizeHandler()
+                      }
+                    )
+                  ]
+                },
+                header.id
+              )
+            );
+            return /* @__PURE__ */ jsx(React.Fragment, { children: cells }, `header-group-${headerIndex}`);
+          })
+        },
+        headerGroup.id
+      )),
+      filterMode === "multicolumn" && /* @__PURE__ */ jsx(
+        TableFilterRow,
+        {
+          columns: table.getAllFlatColumns().map((col) => col.columnDef),
+          columnFilters: columnFilters || {},
+          onColumnFilterChange: onColumnFilterChange || (() => {
+          }),
+          filterMode,
+          renderFormWidget,
+          listener
+        }
+      )
+    ] });
+  },
+  (prevProps, nextProps) => {
+    const prevSorting = prevProps.sorting || [];
+    const nextSorting = nextProps.sorting || [];
+    if (prevProps.ColClassSignature !== nextProps.ColClassSignature) {
+      return false;
+    }
+    const sortingEqual = prevSorting.length === nextSorting.length && prevSorting.every((prevSort, index) => {
+      const nextSort = nextSorting[index];
+      return prevSort.id === nextSort.id && prevSort.desc === nextSort.desc;
+    });
+    const prevSizing = prevProps.columnSizing || {};
+    const nextSizing = nextProps.columnSizing || {};
+    const sizingKeys = /* @__PURE__ */ new Set([...Object.keys(prevSizing), ...Object.keys(nextSizing)]);
+    const sizingEqual = Array.from(sizingKeys).every((key) => prevSizing[key] === nextSizing[key]);
+    const prevSelection = prevProps.rowSelection || {};
+    const nextSelection = nextProps.rowSelection || {};
+    const selectionKeys = /* @__PURE__ */ new Set([...Object.keys(prevSelection), ...Object.keys(nextSelection)]);
+    const selectionEqual = selectionKeys.size === Object.keys(prevSelection).length && selectionKeys.size === Object.keys(nextSelection).length && Array.from(selectionKeys).every((key) => 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";
+export {
+  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,190 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, memo } from "react";
+import { Box } from "@mui/material";
+import { WmTableAction } from "../table-action";
+import { getButtonClasses } from "../utils";
+import WmMenu from "../../../navigation/menu";
+import { DataSource } from "../../types";
+import { isEmpty, values } from "lodash";
+import { WmAppIcon } from "../../../common/WmAppIcon";
+const TablePanelHeadingComponent = ({
+  title,
+  subheading,
+  iconclass,
+  iconurl,
+  prefabName,
+  exportformat = [],
+  headerActions,
+  spacing = "normal",
+  isGridEditMode = false,
+  isLoading = false,
+  listener,
+  datasource,
+  columns = [],
+  sortInfo,
+  filterInfo = [],
+  exportdatasize,
+  onBeforeExport
+}) => {
+  var _a;
+  const ROW_OPS_FIELD = "rowOperations";
+  const exportIconMapping = {
+    EXCEL: "fa fa-file-excel-o",
+    CSV: "fa fa-file-text-o"
+  };
+  const exportOptions = useMemo(() => {
+    if (Array.isArray(exportformat)) {
+      return exportformat;
+    }
+    const formatStr = exportformat;
+    if (typeof formatStr === "string") {
+      return formatStr.split(",").map((opt) => opt.trim()).filter(Boolean);
+    }
+    return [];
+  }, [exportformat]);
+  const exportDataset = useMemo(() => {
+    return exportOptions.map((format) => ({
+      label: format,
+      icon: exportIconMapping[format] || "fa fa-file-o",
+      dataValue: format
+    }));
+  }, [exportOptions]);
+  const handleExportSelect = useCallback(
+    (event, widget, item) => {
+      var _a2;
+      if (!datasource) {
+        console.warn("No datasource available for export");
+        return;
+      }
+      const sortOptions = isEmpty(sortInfo) ? "" : `${sortInfo.field} ${sortInfo.direction}`;
+      const columnsMap = {};
+      columns.forEach((fieldDef) => {
+        if (fieldDef.field === ROW_OPS_FIELD || fieldDef.show === false) {
+          return;
+        }
+        const option = {
+          header: fieldDef.displayName || fieldDef.field || ""
+        };
+        if (fieldDef.exportexpression) {
+          option.expression = fieldDef.exportexpression;
+        } else {
+          option.field = fieldDef.field;
+        }
+        if (fieldDef.field) {
+          columnsMap[fieldDef.field] = option;
+        }
+      });
+      const requestData = {
+        matchMode: "anywhereignorecase",
+        filterFields: filterInfo,
+        orderBy: sortOptions,
+        exportType: item.label,
+        logicalOp: "AND",
+        exportSize: exportdatasize,
+        columns: columnsMap
+      };
+      let isValid = true;
+      if (onBeforeExport) {
+        isValid = onBeforeExport({ $data: requestData }) !== false;
+      }
+      if (isValid === false) {
+        return;
+      }
+      const requestDataWithFields = __spreadProps(__spreadValues({}, requestData), {
+        fields: values(requestData.columns)
+      });
+      try {
+        datasource == null ? void 0 : datasource.execute(DataSource.Operation.DOWNLOAD, { data: requestDataWithFields });
+      } catch (error) {
+        console.error("Error exporting data:", error);
+        if ((_a2 = listener == null ? void 0 : listener.App) == null ? void 0 : _a2.notifyApp) {
+          listener.App.notifyApp("Failed to export data", "Error");
+        }
+      }
+    },
+    [datasource, columns, sortInfo, filterInfo, exportdatasize, onBeforeExport]
+  );
+  return /* @__PURE__ */ jsx(Box, { className: "panel-heading", children: /* @__PURE__ */ jsxs(Box, { component: "h3", className: "panel-title", children: [
+    /* @__PURE__ */ jsx(Box, { className: "pull-left", children: /* @__PURE__ */ jsx(
+      WmAppIcon,
+      {
+        iconclass,
+        iconurl,
+        prefabName,
+        defaultClasses: iconurl ? "panel-image-icon" : "panel-icon",
+        alt: "Table icon"
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(Box, { className: "pull-left", children: [
+      title && /* @__PURE__ */ jsx(Box, { component: "div", className: "heading", children: title }),
+      subheading && /* @__PURE__ */ jsx(Box, { component: "div", className: "description", children: subheading })
+    ] }),
+    ((exportformat == null ? void 0 : exportformat.length) > 0 || headerActions.length > 0) && /* @__PURE__ */ jsxs(Box, { className: "panel-actions app-datagrid-actions", children: [
+      headerActions.map((action, index) => /* @__PURE__ */ jsx(
+        WmTableAction,
+        {
+          className: getButtonClasses(action, spacing, isGridEditMode, isLoading),
+          "data-action-key": action.key,
+          onClick: action.onClick,
+          name: action["displayName"] || action.name || "Action",
+          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,
+          disabled: action.disabled || action.key === "addNewRow" && (isGridEditMode || isLoading),
+          show: action.show,
+          styles: action.styles,
+          children: action.children
+        },
+        `header-action-${index}-${action.key || action.name}`
+      )),
+      exportOptions.length > 0 && /* @__PURE__ */ jsx(
+        WmMenu,
+        {
+          className: "btn-table-menu",
+          caption: ((_a = listener == null ? void 0 : listener.appLocale) == null ? void 0 : _a.LABEL_EXPORT) || "Export",
+          dataset: exportDataset,
+          itemlabel: "label",
+          itemicon: "icon",
+          menuposition: "down,left",
+          autoclose: "always",
+          onSelect: handleExportSelect,
+          listener,
+          name: "export-menu",
+          tabindex: 0
+        }
+      )
+    ] })
+  ] }) });
+};
+TablePanelHeadingComponent.displayName = "TablePanelHeading";
+const TablePanelHeading = memo(TablePanelHeadingComponent, (prevProps, nextProps) => {
+  return prevProps.title === nextProps.title && prevProps.subheading === nextProps.subheading && prevProps.iconclass === nextProps.iconclass && prevProps.iconurl === nextProps.iconurl && 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;
+});
+export {
+  TablePanelHeading
+};

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