@wavemaker-ai/react-runtime 1.0.0-rc.312 → 1.0.0-rc.317

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

@@ -1,450 +1,475 @@
-"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()
-  })));
-});
+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 } 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;
+    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 mergedStyle = __spreadValues({
+      cursor: canSort ? "pointer" : "default",
+      userSelect: "none",
+      width: header.getSize(),
+      position: "relative"
+    }, 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";
-
-// 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"]);
+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);
-  var groupStyles = _objectSpread({
+  const groupStyles = __spreadValues({
     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));
+  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";
-
-// 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)
-  }));
-});
+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";
-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;
-        }
+const TableHeaderComponent = memo(
+  ({
+    table,
+    enablesort,
+    enablecolumnselection = false,
+    rowClass = "",
+    rowExpansionConfig,
+    filterMode,
+    columnFilters,
+    onColumnFilterChange,
+    renderFormWidget,
+    listener,
+    tableStructure,
+    onColumnSelect,
+    onColumnDeselect,
+    onHeaderclick,
+    tableName
+  }) => {
+    const hasExpansion = rowExpansionConfig && rowExpansionConfig.show;
+    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;
       }
-      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;
+      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;
+          }
         }
-        // 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 dataColumnStartIndex + positionNum;
+      }
+      if (typeof position === "string") {
+        const columnIndex = headers.findIndex((header) => {
+          if (header.id === position || header.column.id === position) {
+            return true;
           }
-          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
-        }));
+          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;
       }
-
-      // 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 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; // 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
+        )
+      ] });
+    }
+    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" : "";
+            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: {
+                    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,
+                  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}`);
+          })
         },
-        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;
+        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 || {});
   }
-
-  // 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";
+);
+TableHeaderComponent.displayName = "TableHeaderComponent";
+export {
+  TableHeaderComponent
+};