@appius-fr/apx 2.7.0 → 2.7.1

package/dist/APX.standalone.js

@@ -194,67 +194,74 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `/* APX Scrollable Table: scrollable tbody with fixed thead/tfoot and aligned columns (CSS Grid + subgrid) */
+___CSS_LOADER_EXPORT___.push([module.id, `/* APX Scrollable Table: scrollable tbody with fixed thead/tfoot and aligned columns (CSS Grid + subgrid)
+   Use !important so page styles (e.g. display: table) do not override the grid layout. */
 
+/* --apx-scrollable-template-columns: set by JS (measured widths + gutter); fallback = equal columns + gutter */
+/* --apx-scrollable-gutter-width: space for vertical scrollbar so it does not overlap the last column (set to 0 to allow overlap) */
+/* --apx-scrollable-body-height: when class apx-scrollable-table--body-height is set, tbody row uses fixed height instead of max-height */
 .apx-scrollable-table {
-    display: grid;
-    grid-template-columns: repeat(var(--apx-scrollable-cols, 3), minmax(0, 1fr));
-    grid-template-rows: auto fit-content(var(--apx-scrollable-body-max-height, 200px)) auto;
+    display: grid !important;
+    grid-template-columns: var(--apx-scrollable-template-columns, repeat(var(--apx-scrollable-cols, 3), minmax(0, 1fr)) minmax(var(--apx-scrollable-gutter-width, 17px), var(--apx-scrollable-gutter-width, 17px)));
+    grid-template-rows: auto var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px))) auto;
     width: 100%;
+    table-layout: unset !important;
+}
+
+.apx-scrollable-table--body-height {
+    --apx-scrollable-body-row-size: var(--apx-scrollable-body-max-height, 200px);
 }
 
 /* Table with no tfoot: thead + tbody only */
 .apx-scrollable-table:not(.apx-scrollable-table--has-tfoot) {
-    grid-template-rows: auto fit-content(var(--apx-scrollable-body-max-height, 200px));
+    grid-template-rows: auto var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px)));
 }
 
 /* Table with no thead: tbody + tfoot only */
 .apx-scrollable-table.apx-scrollable-table--no-thead {
-    grid-template-rows: fit-content(var(--apx-scrollable-body-max-height, 200px)) auto;
+    grid-template-rows: var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px))) auto;
 }
 
 /* Table with neither thead nor tfoot: tbody only */
 .apx-scrollable-table.apx-scrollable-table--no-thead:not(.apx-scrollable-table--has-tfoot) {
-    grid-template-rows: fit-content(var(--apx-scrollable-body-max-height, 200px));
+    grid-template-rows: var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px)));
 }
 
+/* --apx-scrollable-*-template-rows: set by JS (measured heights) or override in CSS / via options */
 .apx-scrollable-table > thead,
 .apx-scrollable-table > tbody,
 .apx-scrollable-table > tfoot {
-    display: grid;
+    display: grid !important;
     grid-template-columns: subgrid;
     grid-column: 1 / -1;
-    grid-template-rows: repeat(var(--apx-scrollable-thead-rows, 1), auto);
     min-height: 0;
 }
 
 .apx-scrollable-table > thead {
-    grid-template-rows: repeat(var(--apx-scrollable-thead-rows, 1), auto);
+    grid-template-rows: var(--apx-scrollable-thead-template-rows, repeat(var(--apx-scrollable-thead-rows, 1), auto));
 }
 
 .apx-scrollable-table > tbody {
-    grid-template-rows: repeat(var(--apx-scrollable-tbody-rows, 1), auto);
+    grid-template-rows: var(--apx-scrollable-tbody-template-rows, repeat(var(--apx-scrollable-tbody-rows, 1), auto));
     overflow: auto;
-    /* Reserve space for the vertical scrollbar so it doesn't shrink content width and trigger a horizontal scrollbar */
-    scrollbar-gutter: stable;
 }
 
 .apx-scrollable-table > tfoot {
-    grid-template-rows: repeat(var(--apx-scrollable-tfoot-rows, 1), auto);
+    grid-template-rows: var(--apx-scrollable-tfoot-template-rows, repeat(var(--apx-scrollable-tfoot-rows, 1), auto));
 }
 
 .apx-scrollable-table > thead > tr,
 .apx-scrollable-table > tbody > tr,
 .apx-scrollable-table > tfoot > tr {
-    display: contents;
+    display: contents !important;
 }
 
 .apx-scrollable-table th,
 .apx-scrollable-table td {
-    /* Grid placement set by JS (grid-row, grid-column) for colspan/rowspan */
     min-width: 0;
+    box-sizing: border-box;
 }
-`, "",{"version":3,"sources":["webpack://./modules/scrollableTable/css/scrollableTable.css"],"names":[],"mappings":"AAAA,2GAA2G;;AAE3G;IACI,aAAa;IACb,4EAA4E;IAC5E,uFAAuF;IACvF,WAAW;AACf;;AAEA,4CAA4C;AAC5C;IACI,kFAAkF;AACtF;;AAEA,4CAA4C;AAC5C;IACI,kFAAkF;AACtF;;AAEA,mDAAmD;AACnD;IACI,6EAA6E;AACjF;;AAEA;;;IAGI,aAAa;IACb,8BAA8B;IAC9B,mBAAmB;IACnB,qEAAqE;IACrE,aAAa;AACjB;;AAEA;IACI,qEAAqE;AACzE;;AAEA;IACI,qEAAqE;IACrE,cAAc;IACd,mHAAmH;IACnH,wBAAwB;AAC5B;;AAEA;IACI,qEAAqE;AACzE;;AAEA;;;IAGI,iBAAiB;AACrB;;AAEA;;IAEI,yEAAyE;IACzE,YAAY;AAChB","sourcesContent":["/* APX Scrollable Table: scrollable tbody with fixed thead/tfoot and aligned columns (CSS Grid + subgrid) */\r\n\r\n.apx-scrollable-table {\r\n    display: grid;\r\n    grid-template-columns: repeat(var(--apx-scrollable-cols, 3), minmax(0, 1fr));\r\n    grid-template-rows: auto fit-content(var(--apx-scrollable-body-max-height, 200px)) auto;\r\n    width: 100%;\r\n}\r\n\r\n/* Table with no tfoot: thead + tbody only */\r\n.apx-scrollable-table:not(.apx-scrollable-table--has-tfoot) {\r\n    grid-template-rows: auto fit-content(var(--apx-scrollable-body-max-height, 200px));\r\n}\r\n\r\n/* Table with no thead: tbody + tfoot only */\r\n.apx-scrollable-table.apx-scrollable-table--no-thead {\r\n    grid-template-rows: fit-content(var(--apx-scrollable-body-max-height, 200px)) auto;\r\n}\r\n\r\n/* Table with neither thead nor tfoot: tbody only */\r\n.apx-scrollable-table.apx-scrollable-table--no-thead:not(.apx-scrollable-table--has-tfoot) {\r\n    grid-template-rows: fit-content(var(--apx-scrollable-body-max-height, 200px));\r\n}\r\n\r\n.apx-scrollable-table > thead,\r\n.apx-scrollable-table > tbody,\r\n.apx-scrollable-table > tfoot {\r\n    display: grid;\r\n    grid-template-columns: subgrid;\r\n    grid-column: 1 / -1;\r\n    grid-template-rows: repeat(var(--apx-scrollable-thead-rows, 1), auto);\r\n    min-height: 0;\r\n}\r\n\r\n.apx-scrollable-table > thead {\r\n    grid-template-rows: repeat(var(--apx-scrollable-thead-rows, 1), auto);\r\n}\r\n\r\n.apx-scrollable-table > tbody {\r\n    grid-template-rows: repeat(var(--apx-scrollable-tbody-rows, 1), auto);\r\n    overflow: auto;\r\n    /* Reserve space for the vertical scrollbar so it doesn't shrink content width and trigger a horizontal scrollbar */\r\n    scrollbar-gutter: stable;\r\n}\r\n\r\n.apx-scrollable-table > tfoot {\r\n    grid-template-rows: repeat(var(--apx-scrollable-tfoot-rows, 1), auto);\r\n}\r\n\r\n.apx-scrollable-table > thead > tr,\r\n.apx-scrollable-table > tbody > tr,\r\n.apx-scrollable-table > tfoot > tr {\r\n    display: contents;\r\n}\r\n\r\n.apx-scrollable-table th,\r\n.apx-scrollable-table td {\r\n    /* Grid placement set by JS (grid-row, grid-column) for colspan/rowspan */\r\n    min-width: 0;\r\n}\r\n"],"sourceRoot":""}]);
+`, "",{"version":3,"sources":["webpack://./modules/scrollableTable/css/scrollableTable.css"],"names":[],"mappings":"AAAA;yFACyF;;AAEzF,+GAA+G;AAC/G,mIAAmI;AACnI,yIAAyI;AACzI;IACI,wBAAwB;IACxB,+MAA+M;IAC/M,4HAA4H;IAC5H,WAAW;IACX,8BAA8B;AAClC;;AAEA;IACI,4EAA4E;AAChF;;AAEA,4CAA4C;AAC5C;IACI,uHAAuH;AAC3H;;AAEA,4CAA4C;AAC5C;IACI,uHAAuH;AAC3H;;AAEA,mDAAmD;AACnD;IACI,kHAAkH;AACtH;;AAEA,oGAAoG;AACpG;;;IAGI,wBAAwB;IACxB,8BAA8B;IAC9B,mBAAmB;IACnB,aAAa;AACjB;;AAEA;IACI,gHAAgH;AACpH;;AAEA;IACI,gHAAgH;IAChH,cAAc;AAClB;;AAEA;IACI,gHAAgH;AACpH;;AAEA;;;IAGI,4BAA4B;AAChC;;AAEA;;IAEI,YAAY;IACZ,sBAAsB;AAC1B","sourcesContent":["/* APX Scrollable Table: scrollable tbody with fixed thead/tfoot and aligned columns (CSS Grid + subgrid)\r\n   Use !important so page styles (e.g. display: table) do not override the grid layout. */\r\n\r\n/* --apx-scrollable-template-columns: set by JS (measured widths + gutter); fallback = equal columns + gutter */\r\n/* --apx-scrollable-gutter-width: space for vertical scrollbar so it does not overlap the last column (set to 0 to allow overlap) */\r\n/* --apx-scrollable-body-height: when class apx-scrollable-table--body-height is set, tbody row uses fixed height instead of max-height */\r\n.apx-scrollable-table {\r\n    display: grid !important;\r\n    grid-template-columns: var(--apx-scrollable-template-columns, repeat(var(--apx-scrollable-cols, 3), minmax(0, 1fr)) minmax(var(--apx-scrollable-gutter-width, 17px), var(--apx-scrollable-gutter-width, 17px)));\r\n    grid-template-rows: auto var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px))) auto;\r\n    width: 100%;\r\n    table-layout: unset !important;\r\n}\r\n\r\n.apx-scrollable-table--body-height {\r\n    --apx-scrollable-body-row-size: var(--apx-scrollable-body-max-height, 200px);\r\n}\r\n\r\n/* Table with no tfoot: thead + tbody only */\r\n.apx-scrollable-table:not(.apx-scrollable-table--has-tfoot) {\r\n    grid-template-rows: auto var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px)));\r\n}\r\n\r\n/* Table with no thead: tbody + tfoot only */\r\n.apx-scrollable-table.apx-scrollable-table--no-thead {\r\n    grid-template-rows: var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px))) auto;\r\n}\r\n\r\n/* Table with neither thead nor tfoot: tbody only */\r\n.apx-scrollable-table.apx-scrollable-table--no-thead:not(.apx-scrollable-table--has-tfoot) {\r\n    grid-template-rows: var(--apx-scrollable-body-row-size, fit-content(var(--apx-scrollable-body-max-height, 200px)));\r\n}\r\n\r\n/* --apx-scrollable-*-template-rows: set by JS (measured heights) or override in CSS / via options */\r\n.apx-scrollable-table > thead,\r\n.apx-scrollable-table > tbody,\r\n.apx-scrollable-table > tfoot {\r\n    display: grid !important;\r\n    grid-template-columns: subgrid;\r\n    grid-column: 1 / -1;\r\n    min-height: 0;\r\n}\r\n\r\n.apx-scrollable-table > thead {\r\n    grid-template-rows: var(--apx-scrollable-thead-template-rows, repeat(var(--apx-scrollable-thead-rows, 1), auto));\r\n}\r\n\r\n.apx-scrollable-table > tbody {\r\n    grid-template-rows: var(--apx-scrollable-tbody-template-rows, repeat(var(--apx-scrollable-tbody-rows, 1), auto));\r\n    overflow: auto;\r\n}\r\n\r\n.apx-scrollable-table > tfoot {\r\n    grid-template-rows: var(--apx-scrollable-tfoot-template-rows, repeat(var(--apx-scrollable-tfoot-rows, 1), auto));\r\n}\r\n\r\n.apx-scrollable-table > thead > tr,\r\n.apx-scrollable-table > tbody > tr,\r\n.apx-scrollable-table > tfoot > tr {\r\n    display: contents !important;\r\n}\r\n\r\n.apx-scrollable-table th,\r\n.apx-scrollable-table td {\r\n    min-width: 0;\r\n    box-sizing: border-box;\r\n}\r\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -1920,6 +1927,10 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
@@ -1927,33 +1938,145 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 var DATA_KEY = '_apxScrollableTable';
 var CLASS_TABLE = 'apx-scrollable-table';
 var DEFAULT_MAX_HEIGHT = '200px';
+var THROTTLE_MS = 16;
+
+/** @type {Set<HTMLTableElement>} */
+var dynamicTables = new Set();
+/** @type {Map<Element, Set<HTMLTableElement>>} */
+var scrollSourceToTables = new Map();
+/** @type {Map<Element, Set<HTMLTableElement>>} */
+var resizeSourceToTables = new Map();
+/** @type {boolean} */
+var resizeWindowAttached = false;
+/** @type {ResizeObserver|null} */
+var resizeObserver = null;
+/** @type {number} */
+var throttleLast = 0;
+/** @type {number|null} */
+var throttleRaf = null;
 
 /**
- * Get number of columns from the first row that has cells (sum of colspan).
- * @param {HTMLTableSectionElement} section - thead, tbody, or tfoot
+ * Sum of colspans for one row (direct th/td children of tr).
+ * @param {HTMLTableRowElement} tr
  * @returns {number}
  */
-function getColumnCountFromSection(section) {
-  var firstRow = section === null || section === void 0 ? void 0 : section.querySelector(':scope > tr');
-  if (!firstRow) return 0;
+function getRowColumnCount(tr) {
   var cols = 0;
-  firstRow.querySelectorAll(':scope > th, :scope > td').forEach(function (cell) {
+  tr.querySelectorAll(':scope > th, :scope > td').forEach(function (cell) {
     cols += parseInt(cell.getAttribute('colspan'), 10) || 1;
   });
   return cols;
 }
 
 /**
- * Get total column count for the table (from thead or tbody first row).
+ * Get maximum column count in a section (max sum of colspans across all rows).
+ * @param {HTMLTableSectionElement} section - thead, tbody, or tfoot
+ * @returns {number}
+ */
+function getColumnCountFromSection(section) {
+  if (!section) return 0;
+  var rows = section.querySelectorAll(':scope > tr');
+  var maxCols = 0;
+  rows.forEach(function (tr) {
+    var sum = getRowColumnCount(tr);
+    if (sum > maxCols) maxCols = sum;
+  });
+  return maxCols;
+}
+
+/**
+ * Get total column count for the table (max across thead, tbody, tfoot).
  * @param {HTMLTableElement} table
  * @returns {number}
  */
 function getTableColumnCount(table) {
   var thead = table.querySelector('thead');
   var tbody = table.querySelector('tbody');
-  var countFromThead = thead ? getColumnCountFromSection(thead) : 0;
-  var countFromTbody = tbody ? getColumnCountFromSection(tbody) : 0;
-  return countFromThead || countFromTbody || 1;
+  var tfoot = table.querySelector('tfoot');
+  var countThead = thead ? getColumnCountFromSection(thead) : 0;
+  var countTbody = tbody ? getColumnCountFromSection(tbody) : 0;
+  var countTfoot = tfoot ? getColumnCountFromSection(tfoot) : 0;
+  return Math.max(countThead, countTbody, countTfoot, 1);
+}
+
+/**
+ * Measure current column widths from the table in its natural layout (before applying scrollable class).
+ * Prefers a row where each cell has colspan 1 so we get one width per column; otherwise splits cell widths by colspan.
+ * @param {HTMLTableElement} table - table not yet with scrollable class
+ * @param {number} numCols
+ * @returns {number[]} pixel widths per column
+ */
+function measureColumnWidths(table, numCols) {
+  var thead = table.querySelector('thead');
+  var tbody = table.querySelector('tbody');
+  var sections = [thead, tbody].filter(Boolean);
+  /** @type {HTMLTableRowElement|null} */
+  var bestRow = null;
+  var _iterator = _createForOfIteratorHelper(sections),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var section = _step.value;
+      var rows = section.querySelectorAll(':scope > tr');
+      var _iterator3 = _createForOfIteratorHelper(rows),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var tr = _step3.value;
+          var _cells = tr.querySelectorAll(':scope > th, :scope > td');
+          if (getRowColumnCount(tr) !== numCols) continue;
+          var allSingle = Array.from(_cells).every(function (c) {
+            return (parseInt(c.getAttribute('colspan'), 10) || 1) === 1;
+          });
+          if (allSingle && _cells.length === numCols) {
+            bestRow = tr;
+            break;
+          }
+          if (!bestRow) bestRow = tr;
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      if (bestRow && Array.from(bestRow.querySelectorAll(':scope > th, :scope > td')).every(function (c) {
+        return (parseInt(c.getAttribute('colspan'), 10) || 1) === 1;
+      })) break;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  if (!bestRow) return [];
+  var widths = new Array(numCols).fill(0);
+  var cells = bestRow.querySelectorAll(':scope > th, :scope > td');
+  var col = 0;
+  var _iterator2 = _createForOfIteratorHelper(cells),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var cell = _step2.value;
+      var span = Math.min(parseInt(cell.getAttribute('colspan'), 10) || 1, numCols - col);
+      if (span <= 0) break;
+      var w = cell.getBoundingClientRect().width;
+      var perCol = w / span;
+      for (var _i = 0; _i < span; _i++) widths[col + _i] = perCol;
+      col += span;
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  if (col === 0) return [];
+  var fallback = widths.some(function (w) {
+    return w > 0;
+  }) ? Math.max.apply(Math, [80].concat(_toConsumableArray(widths.filter(function (w) {
+    return w > 0;
+  })))) / 2 : 80;
+  for (var i = 0; i < numCols; i++) if (widths[i] <= 0) widths[i] = fallback;
+  return widths.slice(0, numCols);
 }
 
 /**
@@ -1986,11 +2109,11 @@ function computeCellPlacements(section, numRows, numCols) {
   for (var r = 0; r < rows.length; r++) {
     var tr = rows[r];
     var cells = tr.querySelectorAll(':scope > th, :scope > td');
-    var _iterator = _createForOfIteratorHelper(cells),
-      _step;
+    var _iterator4 = _createForOfIteratorHelper(cells),
+      _step4;
     try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var cell = _step.value;
+      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+        var cell = _step4.value;
         var colspan = Math.min(parseInt(cell.getAttribute('colspan'), 10) || 1, numCols);
         var rowspan = Math.min(parseInt(cell.getAttribute('rowspan'), 10) || 1, numRows - r);
         var col = 0;
@@ -2020,9 +2143,9 @@ function computeCellPlacements(section, numRows, numCols) {
         });
       }
     } catch (err) {
-      _iterator.e(err);
+      _iterator4.e(err);
     } finally {
-      _iterator.f();
+      _iterator4.f();
     }
   }
   return placements;
@@ -2055,56 +2178,367 @@ function clearPlacements(table) {
 }
 
 /**
- * Normalize maxHeight option to a CSS length string.
+ * Normalize height/maxHeight option to a CSS length string.
  * @param {number|string} value
  * @returns {string}
  */
-function normalizeMaxHeight(value) {
+function normalizeHeight(value) {
   if (value == null) return DEFAULT_MAX_HEIGHT;
   if (typeof value === 'number') return "".concat(value, "px");
   return String(value);
 }
 
+/**
+ * Resolve current body height from options: either bodyHeightDynamic.get(table) or static height/maxHeight.
+ * @param {Object} options - scrollableTable options (may include bodyHeightDynamic, height, maxHeight)
+ * @param {HTMLTableElement} table
+ * @returns {{ bodySize: string, useFixedHeight: boolean }}
+ */
+function resolveBodyHeight(options, table) {
+  var dyn = options.bodyHeightDynamic;
+  if (dyn && typeof dyn.get === 'function') {
+    var value = dyn.get(table);
+    var _bodySize = normalizeHeight(value);
+    var _useFixedHeight = dyn.useAs === 'height';
+    return {
+      bodySize: _bodySize,
+      useFixedHeight: _useFixedHeight
+    };
+  }
+  var useFixedHeight = options.height != null;
+  var raw = useFixedHeight ? options.height : options.maxHeight;
+  var bodySize = normalizeHeight(raw);
+  return {
+    bodySize: bodySize,
+    useFixedHeight: useFixedHeight
+  };
+}
+
+/**
+ * Update only the tbody height CSS variable and class (used on scroll/resize for dynamic height).
+ * @param {HTMLTableElement} table
+ * @param {Object} options - full scrollableTable options (with ref.options when called from throttle)
+ */
+function updateTableBodyHeight(table, options) {
+  var _resolveBodyHeight = resolveBodyHeight(options, table),
+    bodySize = _resolveBodyHeight.bodySize,
+    useFixedHeight = _resolveBodyHeight.useFixedHeight;
+  table.style.setProperty('--apx-scrollable-body-max-height', bodySize);
+  table.classList.toggle('apx-scrollable-table--body-height', useFixedHeight);
+}
+
+/**
+ * Run lazy cleanup then updateTableBodyHeight for all tables still in dynamicTables. (Called by throttled entry point or RAF.)
+ */
+function flushDynamicHeightUpdate() {
+  var toRemove = [];
+  dynamicTables.forEach(function (table) {
+    if (!table.isConnected) toRemove.push(table);
+  });
+  toRemove.forEach(function (table) {
+    return removeTableFromDynamicSources(table);
+  });
+  dynamicTables.forEach(function (table) {
+    var ref = table[DATA_KEY];
+    if (ref !== null && ref !== void 0 && ref.options) updateTableBodyHeight(table, ref.options);
+  });
+}
+
+/**
+ * Throttled entry: run flushDynamicHeightUpdate now or schedule with RAF.
+ */
+function runDynamicHeightUpdate() {
+  var now = Date.now();
+  if (now - throttleLast < THROTTLE_MS) {
+    if (!throttleRaf) {
+      throttleRaf = requestAnimationFrame(function () {
+        throttleRaf = null;
+        throttleLast = Date.now();
+        flushDynamicHeightUpdate();
+      });
+    }
+    return;
+  }
+  throttleLast = now;
+  flushDynamicHeightUpdate();
+}
+
+/**
+ * Resolve updateOn into scroll targets (Element[]) and resize: { window: boolean, elements: Element[] }.
+ * @param {Object} options - options.bodyHeightDynamic.updateOn
+ * @returns {{ scrollTargets: Element[], resizeWindow: boolean, resizeElements: Element[] }}
+ */
+function resolveUpdateOn(options) {
+  var _options$bodyHeightDy;
+  var u = options === null || options === void 0 || (_options$bodyHeightDy = options.bodyHeightDynamic) === null || _options$bodyHeightDy === void 0 ? void 0 : _options$bodyHeightDy.updateOn;
+  var scrollOn = u === null || u === void 0 ? void 0 : u.scrollOn;
+  var resizeOn = u === null || u === void 0 ? void 0 : u.resizeOn;
+  var scrollTargets = [];
+  if (scrollOn != null && Array.isArray(scrollOn) && scrollOn.length > 0) {
+    scrollOn.forEach(function (x) {
+      if (x === 'document') scrollTargets.push(document.documentElement);else if (x && typeof x.addEventListener === 'function') scrollTargets.push(x);
+    });
+  } else if ((u === null || u === void 0 ? void 0 : u.scroll) === true) {
+    scrollTargets.push(document.documentElement);
+    scrollTargets.push(typeof window !== 'undefined' ? window : document.documentElement);
+  }
+  var resizeWindow = false;
+  var resizeElements = [];
+  if (resizeOn != null && Array.isArray(resizeOn) && resizeOn.length > 0) {
+    resizeOn.forEach(function (x) {
+      if (x === 'window') resizeWindow = true;else if (x && typeof x.addEventListener === 'function') resizeElements.push(x);
+    });
+  } else if ((u === null || u === void 0 ? void 0 : u.resize) !== false) {
+    resizeWindow = true;
+    resizeElements.push(document.documentElement);
+  }
+  return {
+    scrollTargets: scrollTargets,
+    resizeWindow: resizeWindow,
+    resizeElements: resizeElements
+  };
+}
+
+/**
+ * Remove table from dynamicTables and from all scroll/resize Maps; detach listeners if Set becomes empty.
+ * @param {HTMLTableElement} table
+ */
+function removeTableFromDynamicSources(table) {
+  dynamicTables["delete"](table);
+  scrollSourceToTables.forEach(function (set, el) {
+    set["delete"](table);
+    if (set.size === 0) {
+      scrollSourceToTables["delete"](el);
+      el.removeEventListener('scroll', onScrollThrottled);
+    }
+  });
+  resizeSourceToTables.forEach(function (set, el) {
+    set["delete"](table);
+    if (set.size === 0) {
+      resizeSourceToTables["delete"](el);
+      if (resizeObserver) resizeObserver.unobserve(el);
+    }
+  });
+  if (resizeWindowAttached && dynamicTables.size === 0) {
+    window.removeEventListener('resize', onResizeThrottled);
+    resizeWindowAttached = false;
+  }
+}
+function onScrollThrottled() {
+  runDynamicHeightUpdate();
+}
+function onResizeThrottled() {
+  runDynamicHeightUpdate();
+}
+
+/**
+ * Register a table with bodyHeightDynamic: add to Set and attach scroll/resize listeners per updateOn.
+ * @param {HTMLTableElement} table
+ * @param {Object} options - full options (ref.options)
+ */
+function registerDynamicTable(table, options) {
+  var _resolveUpdateOn = resolveUpdateOn(options),
+    scrollTargets = _resolveUpdateOn.scrollTargets,
+    resizeWindow = _resolveUpdateOn.resizeWindow,
+    resizeElements = _resolveUpdateOn.resizeElements;
+  dynamicTables.add(table);
+  scrollTargets.forEach(function (el) {
+    var set = scrollSourceToTables.get(el);
+    if (!set) {
+      set = new Set();
+      scrollSourceToTables.set(el, set);
+      el.addEventListener('scroll', onScrollThrottled, {
+        passive: true
+      });
+    }
+    set.add(table);
+  });
+  if (resizeWindow) {
+    if (!resizeWindowAttached) {
+      resizeWindowAttached = true;
+      window.addEventListener('resize', onResizeThrottled, {
+        passive: true
+      });
+    }
+  }
+  resizeElements.forEach(function (el) {
+    var set = resizeSourceToTables.get(el);
+    if (!set) {
+      set = new Set();
+      resizeSourceToTables.set(el, set);
+      if (!resizeObserver) resizeObserver = new ResizeObserver(onResizeThrottled);
+      resizeObserver.observe(el);
+    }
+    set.add(table);
+  });
+}
+
+/**
+ * Build grid-template-columns from measured widths and optional overrides per column.
+ * @param {number} numCols
+ * @param {number[]} columnWidths
+ * @param {Object<number, string>|(string|null)[]} columnOverrides - map column index → CSS value (e.g. '2fr'), or array; null/empty = use measured
+ * @returns {string}
+ */
+function buildTemplateColumns(numCols, columnWidths, columnOverrides) {
+  if (!columnWidths || columnWidths.length !== numCols) return '';
+  var get = function get(i) {
+    return Array.isArray(columnOverrides) ? columnOverrides[i] : columnOverrides[i];
+  };
+  var parts = [];
+  for (var i = 0; i < numCols; i++) {
+    var ov = get(i);
+    if (ov != null && typeof ov === 'string' && ov.trim() !== '') {
+      parts.push(ov.trim());
+    } else {
+      parts.push("".concat(Math.round(columnWidths[i]), "fr"));
+    }
+  }
+  return parts.join(' ');
+}
+
+/**
+ * Build grid-template-rows from measured heights and optional overrides per row.
+ * @param {number} numRows
+ * @param {number[]} rowHeights
+ * @param {Object<number, string>|(string|null)[]} rowOverrides - map row index → CSS value (e.g. '48px', '2fr'), or array; null/empty = use measured
+ * @returns {string}
+ */
+function buildTemplateRows(numRows, rowHeights, rowOverrides) {
+  if (!rowHeights || rowHeights.length < numRows) return '';
+  var get = function get(i) {
+    return Array.isArray(rowOverrides) ? rowOverrides[i] : rowOverrides === null || rowOverrides === void 0 ? void 0 : rowOverrides[i];
+  };
+  var parts = [];
+  for (var i = 0; i < numRows; i++) {
+    var ov = get(i);
+    if (ov != null && typeof ov === 'string' && ov.trim() !== '') {
+      parts.push(ov.trim());
+    } else {
+      var _rowHeights$i;
+      parts.push("".concat(Math.round((_rowHeights$i = rowHeights[i]) !== null && _rowHeights$i !== void 0 ? _rowHeights$i : 0), "px"));
+    }
+  }
+  return parts.join(' ');
+}
+
+/**
+ * Measure each tr height in a section (table must not yet have scrollable class).
+ * @param {HTMLTableSectionElement|null} section
+ * @returns {number[]}
+ */
+function measureRowHeights(section) {
+  if (!section) return [];
+  var rows = section.querySelectorAll(':scope > tr');
+  return Array.from(rows).map(function (tr) {
+    return tr.getBoundingClientRect().height;
+  });
+}
+
 /**
  * Apply scrollable table layout to a single table.
  * @param {HTMLTableElement} table
- * @param {{ maxHeight?: number|string }} options
+ * @param {Object} options - scrollableTable options
+ * @param {number|string} [options.maxHeight] - Max height of tbody (default '200px'). Ignored when height or bodyHeightDynamic is set.
+ * @param {number|string} [options.height] - Fixed height of tbody. Ignored when bodyHeightDynamic is set.
+ * @param {{ get: (function(HTMLTableElement): number|string), useAs: 'height'|'maxHeight', updateOn?: { scroll?: boolean, resize?: boolean, scrollOn?: ('document'|Element)[], resizeOn?: ('window'|Element)[] } }} [options.bodyHeightDynamic] - When set, body size is computed by get(table) and re-applied when scroll/resize sources fire. updateOn: scrollOn/resizeOn list elements (sentinels 'document'/'window'); or use scroll (default false) / resize (default true) booleans.
+ * @param {string} [options.gridTemplateColumns]
+ * @param {{ thead?: string, tbody?: string, tfoot?: string }} [options.gridTemplateRows]
+ * @param {{ thead?: Object<number, string>|(string|null)[], tbody?: Object<number, string>|(string|null)[], tfoot?: Object<number, string>|(string|null)[] }} [options.rowOverrides]
+ * @param {Object<number, string>|(string|null)[]} [options.columnOverrides]
+ * @param {{ columnWidths?: number[], rowHeights?: { thead?: number[], tbody?: number[], tfoot?: number[] } } | undefined} ref - existing ref when refreshing
  */
-function applyScrollableTable(table, options) {
+function applyScrollableTable(table, options, ref) {
+  var _ref$columnWidths, _ref$rowHeights;
   var thead = table.querySelector('thead');
   var tbody = table.querySelector('tbody');
   var tfoot = table.querySelector('tfoot');
   var numCols = getTableColumnCount(table);
   if (numCols === 0) return;
+  var alreadyScrollable = table.classList.contains(CLASS_TABLE);
+  var customTemplate = typeof options.gridTemplateColumns === 'string' && options.gridTemplateColumns.trim().length > 0;
+  var columnWidths = customTemplate ? null : (_ref$columnWidths = ref === null || ref === void 0 ? void 0 : ref.columnWidths) !== null && _ref$columnWidths !== void 0 ? _ref$columnWidths : alreadyScrollable ? null : measureColumnWidths(table, numCols);
   var theadRows = getRowCount(thead);
   var tbodyRows = getRowCount(tbody);
   var tfootRows = getRowCount(tfoot);
+  var rowHeights = (_ref$rowHeights = ref === null || ref === void 0 ? void 0 : ref.rowHeights) !== null && _ref$rowHeights !== void 0 ? _ref$rowHeights : alreadyScrollable ? null : {
+    thead: measureRowHeights(thead),
+    tbody: measureRowHeights(tbody),
+    tfoot: measureRowHeights(tfoot)
+  };
   table.style.setProperty('--apx-scrollable-cols', String(numCols));
   table.style.setProperty('--apx-scrollable-thead-rows', String(Math.max(1, theadRows)));
   table.style.setProperty('--apx-scrollable-tbody-rows', String(Math.max(1, tbodyRows)));
   table.style.setProperty('--apx-scrollable-tfoot-rows', String(Math.max(1, tfootRows)));
-  table.style.setProperty('--apx-scrollable-body-max-height', normalizeMaxHeight(options.maxHeight));
+  var _resolveBodyHeight2 = resolveBodyHeight(options, table),
+    bodySize = _resolveBodyHeight2.bodySize,
+    useFixedHeight = _resolveBodyHeight2.useFixedHeight;
+  table.style.setProperty('--apx-scrollable-body-max-height', bodySize);
+  table.classList.toggle('apx-scrollable-table--body-height', useFixedHeight);
   table.classList.add(CLASS_TABLE);
   table.classList.toggle('apx-scrollable-table--has-tfoot', !!(tfoot && tfootRows > 0));
   table.classList.toggle('apx-scrollable-table--no-thead', !(thead && theadRows > 0));
+
+  // Force reflow so the grid layout is established before setting measured template-columns.
+  // Without this, the browser batches class + template into one pass and the tbody overflows horizontally.
+  table.offsetHeight; // eslint-disable-line no-unused-expressions
+
+  var gutterSuffix = ' minmax(var(--apx-scrollable-gutter-width, 17px), var(--apx-scrollable-gutter-width, 17px))';
+  if (customTemplate) {
+    table.style.setProperty('--apx-scrollable-template-columns', options.gridTemplateColumns.trim() + gutterSuffix);
+  } else if (columnWidths && columnWidths.length === numCols) {
+    var template = options.columnOverrides != null ? buildTemplateColumns(numCols, columnWidths, options.columnOverrides) : columnWidths.map(function (w) {
+      return "".concat(Math.round(w), "fr");
+    }).join(' ');
+    table.style.setProperty('--apx-scrollable-template-columns', template + gutterSuffix);
+  } else {
+    table.style.removeProperty('--apx-scrollable-template-columns');
+  }
   clearPlacements(table);
   var sections = [{
     section: thead,
-    rows: Math.max(1, theadRows)
+    rows: Math.max(1, theadRows),
+    heights: rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.thead,
+    key: 'thead'
   }, {
     section: tbody,
-    rows: Math.max(1, tbodyRows)
+    rows: Math.max(1, tbodyRows),
+    heights: rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.tbody,
+    key: 'tbody'
   }, {
     section: tfoot,
-    rows: Math.max(1, tfootRows)
+    rows: Math.max(1, tfootRows),
+    heights: rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.tfoot,
+    key: 'tfoot'
   }];
+  var customRows = options.gridTemplateRows && _typeof(options.gridTemplateRows) === 'object' ? options.gridTemplateRows : null;
+  var rowOverrides = options.rowOverrides && _typeof(options.rowOverrides) === 'object' ? options.rowOverrides : null;
   sections.forEach(function (_ref2) {
     var section = _ref2.section,
-      rows = _ref2.rows;
+      rows = _ref2.rows,
+      heights = _ref2.heights,
+      key = _ref2.key;
     if (!section) return;
+    var varName = "--apx-scrollable-".concat(key, "-template-rows");
+    var custom = customRows === null || customRows === void 0 ? void 0 : customRows[key];
+    var overrides = rowOverrides === null || rowOverrides === void 0 ? void 0 : rowOverrides[key];
+    if (typeof custom === 'string' && custom.trim().length > 0) {
+      section.style.setProperty(varName, custom.trim());
+    } else if (heights && heights.length >= rows) {
+      var _template = overrides != null ? buildTemplateRows(rows, heights.slice(0, rows), overrides) : heights.slice(0, rows).map(function (h) {
+        return "".concat(Math.round(h), "px");
+      }).join(' ');
+      section.style.setProperty(varName, _template);
+    } else {
+      section.style.removeProperty(varName);
+    }
     var placements = computeCellPlacements(section, rows, numCols);
     applyPlacements(placements);
   });
+  return {
+    columnWidths: columnWidths,
+    rowHeights: rowHeights
+  };
 }
 
 /**
@@ -2126,18 +2560,26 @@ function augmentWithScrollableTable(apx) {
       var ref = table[DATA_KEY];
       if (ref) {
         if (isRefresh) {
-          applyScrollableTable(table, ref.options);
+          applyScrollableTable(table, ref.options, ref);
         } else if (options && Object.keys(options).length > 0) {
           ref.options = _objectSpread(_objectSpread({}, ref.options), options);
-          applyScrollableTable(table, ref.options);
+          var _result = applyScrollableTable(table, ref.options, ref);
+          if (_result !== null && _result !== void 0 && _result.columnWidths) ref.columnWidths = _result.columnWidths;
+          if (_result !== null && _result !== void 0 && _result.rowHeights) ref.rowHeights = _result.rowHeights;
         }
+        var currentOptions = ref.options;
+        if (currentOptions !== null && currentOptions !== void 0 && currentOptions.bodyHeightDynamic) registerDynamicTable(table, currentOptions);else removeTableFromDynamicSources(table);
         return;
       }
       if (isRefresh) return;
-      applyScrollableTable(table, options);
+      console.log('[APX scrollableTable] create', table);
+      var result = applyScrollableTable(table, options, undefined);
       table[DATA_KEY] = {
-        options: _objectSpread({}, options)
+        options: _objectSpread({}, options),
+        columnWidths: (result === null || result === void 0 ? void 0 : result.columnWidths) || undefined,
+        rowHeights: (result === null || result === void 0 ? void 0 : result.rowHeights) || undefined
       };
+      if (options !== null && options !== void 0 && options.bodyHeightDynamic) registerDynamicTable(table, options);
     });
     return apx;
   };