@semcore/data-table 16.0.0 → 16.0.1-prerelease.2

package/lib/esm/components/DataTable/DataTable.mjs

@@ -13,7 +13,6 @@ import { ScrollArea, ScreenReaderOnly, Box } from "@semcore/base-components";
 import { Head } from "../Head/Head.mjs";
 import { Body } from "../Body/Body.mjs";
 import { hasFocusableIn, isFocusInside } from "@semcore/core/lib/utils/use/useFocusLock";
-import { getScrollOffsetValue } from "../../utils.mjs";
 import findComponent from "@semcore/core/lib/utils/findComponent";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
@@ -28,18 +27,18 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SDataTable_1iypx_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_1iypx_gg_.__gridTemplateColumns_1iypx_gg_{grid-template-columns:var(--gridTemplateColumns_1iypx)}.___SDataTable_1iypx_gg_.__gridTemplateAreas_1iypx_gg_{grid-template-areas:var(--gridTemplateAreas_1iypx)}.___SDataTable_1iypx_gg_.__gridTemplateRows_1iypx_gg_{grid-template-rows:var(--gridTemplateRows_1iypx)}",
+    ".___SDataTable_133z6_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_133z6_gg_.__gridTemplateColumns_133z6_gg_{grid-template-columns:var(--gridTemplateColumns_133z6)}.___SDataTable_133z6_gg_.__gridTemplateAreas_133z6_gg_{grid-template-areas:var(--gridTemplateAreas_133z6)}.___SDataTable_133z6_gg_.__gridTemplateRows_133z6_gg_{grid-template-rows:var(--gridTemplateRows_133z6)}",
     /*__inner_css_end__*/
-    "1iypx_gg_"
+    "133z6_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SDataTable": "___SDataTable_1iypx_gg_",
-    "_gridTemplateColumns": "__gridTemplateColumns_1iypx_gg_",
-    "--gridTemplateColumns": "--gridTemplateColumns_1iypx",
-    "_gridTemplateAreas": "__gridTemplateAreas_1iypx_gg_",
-    "--gridTemplateAreas": "--gridTemplateAreas_1iypx",
-    "_gridTemplateRows": "__gridTemplateRows_1iypx_gg_",
-    "--gridTemplateRows": "--gridTemplateRows_1iypx"
+    "__SDataTable": "___SDataTable_133z6_gg_",
+    "_gridTemplateColumns": "__gridTemplateColumns_133z6_gg_",
+    "--gridTemplateColumns": "--gridTemplateColumns_133z6",
+    "_gridTemplateAreas": "__gridTemplateAreas_133z6_gg_",
+    "--gridTemplateAreas": "--gridTemplateAreas_133z6",
+    "_gridTemplateRows": "__gridTemplateRows_133z6_gg_",
+    "--gridTemplateRows": "--gridTemplateRows_133z6"
   })
 );
 /*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
@@ -47,21 +46,25 @@ var scrollStyles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SScrollArea_11h4o_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_11h4o_gg_ .___SContainer_11h4o_gg_{overflow:visible;overflow:initial}.___SScrollArea_11h4o_gg_ .___SContainer_11h4o_gg_._scrollDirection_both_11h4o_gg_{overflow:auto}.___SScrollArea_11h4o_gg_ .___SContainer_11h4o_gg_._scrollDirection_horizontal_11h4o_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_11h4o_gg_ .___SContainer_11h4o_gg_._scrollDirection_vertical_11h4o_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_11h4o_gg_ .___SContainer_11h4o_gg_.__loading_11h4o_gg_{overflow:hidden}.___SScrollArea_11h4o_gg_ .___SContainer_11h4o_gg_.__headerHeight_11h4o_gg_{scroll-padding-top:var(--headerHeight_11h4o)}.___SScrollArea_11h4o_gg_ .___SShadowVertical_11h4o_gg_:before{display:none}.___SScrollArea_11h4o_gg_ .___SShadowHorizontal_11h4o_gg_:after,.___SScrollArea_11h4o_gg_ .___SShadowHorizontal_11h4o_gg_:before,.___SScrollArea_11h4o_gg_ .___SShadowVertical_11h4o_gg_:after{z-index:2}",
+    ".___SScrollArea_1p4fc_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_1p4fc_gg_ .___SContainer_1p4fc_gg_{overflow:visible;overflow:initial}.___SScrollArea_1p4fc_gg_ .___SContainer_1p4fc_gg_._scrollDirection_both_1p4fc_gg_{overflow:auto}.___SScrollArea_1p4fc_gg_ .___SContainer_1p4fc_gg_._scrollDirection_horizontal_1p4fc_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_1p4fc_gg_ .___SContainer_1p4fc_gg_._scrollDirection_vertical_1p4fc_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_1p4fc_gg_ .___SContainer_1p4fc_gg_.__loading_1p4fc_gg_{overflow:hidden}.___SScrollArea_1p4fc_gg_ .___SContainer_1p4fc_gg_.__headerHeight_1p4fc_gg_{scroll-padding-top:var(--headerHeight_1p4fc)}.___SScrollArea_1p4fc_gg_ .___SContainer_1p4fc_gg_.__leftScrollPadding_1p4fc_gg_{scroll-padding-left:var(--leftScrollPadding_1p4fc)}.___SScrollArea_1p4fc_gg_ .___SContainer_1p4fc_gg_.__rightScrollPadding_1p4fc_gg_{scroll-padding-right:var(--rightScrollPadding_1p4fc)}.___SScrollArea_1p4fc_gg_ .___SShadowVertical_1p4fc_gg_:before{display:none}.___SScrollArea_1p4fc_gg_ .___SShadowHorizontal_1p4fc_gg_:after,.___SScrollArea_1p4fc_gg_ .___SShadowHorizontal_1p4fc_gg_:before,.___SScrollArea_1p4fc_gg_ .___SShadowVertical_1p4fc_gg_:after{z-index:2}",
     /*__inner_css_end__*/
-    "11h4o_gg_"
+    "1p4fc_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SScrollArea": "___SScrollArea_11h4o_gg_",
-    "__SContainer": "___SContainer_11h4o_gg_",
-    "_scrollDirection_both": "_scrollDirection_both_11h4o_gg_",
-    "_scrollDirection_horizontal": "_scrollDirection_horizontal_11h4o_gg_",
-    "_scrollDirection_vertical": "_scrollDirection_vertical_11h4o_gg_",
-    "_loading": "__loading_11h4o_gg_",
-    "_headerHeight": "__headerHeight_11h4o_gg_",
-    "--headerHeight": "--headerHeight_11h4o",
-    "__SShadowVertical": "___SShadowVertical_11h4o_gg_",
-    "__SShadowHorizontal": "___SShadowHorizontal_11h4o_gg_"
+    "__SScrollArea": "___SScrollArea_1p4fc_gg_",
+    "__SContainer": "___SContainer_1p4fc_gg_",
+    "_scrollDirection_both": "_scrollDirection_both_1p4fc_gg_",
+    "_scrollDirection_horizontal": "_scrollDirection_horizontal_1p4fc_gg_",
+    "_scrollDirection_vertical": "_scrollDirection_vertical_1p4fc_gg_",
+    "_loading": "__loading_1p4fc_gg_",
+    "_headerHeight": "__headerHeight_1p4fc_gg_",
+    "--headerHeight": "--headerHeight_1p4fc",
+    "_leftScrollPadding": "__leftScrollPadding_1p4fc_gg_",
+    "--leftScrollPadding": "--leftScrollPadding_1p4fc",
+    "_rightScrollPadding": "__rightScrollPadding_1p4fc_gg_",
+    "--rightScrollPadding": "--rightScrollPadding_1p4fc",
+    "__SShadowVertical": "___SShadowVertical_1p4fc_gg_",
+    "__SShadowHorizontal": "___SShadowHorizontal_1p4fc_gg_"
   })
 );
 var ACCORDION = Symbol("accordion");
@@ -89,7 +92,9 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     _defineProperty(_assertThisInitialized(_this), "gridAreaGroupMap", /* @__PURE__ */ new Map());
     _defineProperty(_assertThisInitialized(_this), "columnsSplitter", "/");
     _defineProperty(_assertThisInitialized(_this), "rows", []);
+    _defineProperty(_assertThisInitialized(_this), "flatRows", []);
     _defineProperty(_assertThisInitialized(_this), "selectAllMessageTimer", 0);
+    _defineProperty(_assertThisInitialized(_this), "headerNodesMap", /* @__PURE__ */ new Map());
     _defineProperty(_assertThisInitialized(_this), "state", {
       scrollTop: 0,
       scrollDirection: "down",
@@ -132,20 +137,19 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       return (_this$tableRef$curren = _this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.querySelector('[aria-rowindex="'.concat(index + 1, '"]'));
     });
     _defineProperty(_assertThisInitialized(_this), "hasFocusableInHeader", function() {
-      var hasFocusable = _this.columns.some(function(column) {
-        var columnElement = column.ref.current;
-        return columnElement && hasFocusableIn(columnElement);
-      });
-      return hasFocusable;
+      return _this.headerRef.current && hasFocusableIn(_this.headerRef.current);
     });
     _defineProperty(_assertThisInitialized(_this), "onExpandRow", function(expandedRow) {
       var expandedRows = _this.asProps.expandedRows;
       if (expandedRows.has(expandedRow[UNIQ_ROW_KEY])) {
         expandedRows["delete"](expandedRow[UNIQ_ROW_KEY]);
+        setTimeout(function() {
+          _this.handlers.expandedRows(new Set(_toConsumableArray(expandedRows)));
+        }, 300);
       } else {
         expandedRows.add(expandedRow[UNIQ_ROW_KEY]);
+        _this.handlers.expandedRows(new Set(_toConsumableArray(expandedRows)));
       }
-      _this.handlers.expandedRows(new Set(_toConsumableArray(expandedRows)));
     });
     _defineProperty(_assertThisInitialized(_this), "changeFocusCell", function(rowIndex, colIndex, direction) {
       var _this$tableRef$curren2, _this$tableRef$curren3;
@@ -190,8 +194,11 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         var rowI = rowIndex;
         var colI = colIndex;
         if (direction === "left" || direction === "right") {
-          var _currentCell$parentEl, _row$children;
-          if (currentCell.dataset.groupedBy === "colgroup" || Number((_currentCell$parentEl = currentCell.parentElement) === null || _currentCell$parentEl === void 0 ? void 0 : _currentCell$parentEl.getAttribute("aria-rowindex")) === 2 || Array.from((_row$children = row === null || row === void 0 ? void 0 : row.children) !== null && _row$children !== void 0 ? _row$children : []).indexOf(currentCell) > 0) {
+          var _currentCell$parentEl, _currentCell$parentEl2, _row$children;
+          if (((_currentCell$parentEl = currentCell.parentElement) === null || _currentCell$parentEl === void 0 ? void 0 : _currentCell$parentEl.dataset.uiName) === "Collapse") {
+            return;
+          }
+          if (currentCell.dataset.groupedBy === "colgroup" || Number((_currentCell$parentEl2 = currentCell.parentElement) === null || _currentCell$parentEl2 === void 0 ? void 0 : _currentCell$parentEl2.getAttribute("aria-rowindex")) === 2 || Array.from((_row$children = row === null || row === void 0 ? void 0 : row.children) !== null && _row$children !== void 0 ? _row$children : []).indexOf(currentCell) > 0) {
             colI = direction === "left" ? colI - 1 : colI + 1;
           } else {
             rowI = rowI - 1;
@@ -310,6 +317,72 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     _defineProperty(_assertThisInitialized(_this), "handleBackFromAccordion", function(cellIndex) {
       _this.changeFocusCell(-1, cellIndex === -1 ? 0 : cellIndex, "up");
     });
+    _defineProperty(_assertThisInitialized(_this), "getScrollOffsetValue", function() {
+      if (!_this.headerRef.current) {
+        return [0, 0];
+      }
+      var setToMap = function setToMap2(element) {
+        if (element.getAttribute("name") && element.dataset.uiName === "Head.Column") {
+          var name = element.getAttribute("name");
+          if (name) {
+            _this.headerNodesMap.set(name, element);
+          }
+        }
+      };
+      _this.headerRef.current.childNodes.forEach(function(node) {
+        if (node instanceof HTMLElement) {
+          if (node.classList.value.includes("SGroupContainer")) {
+            node.childNodes.forEach(function(columnNode) {
+              if (columnNode instanceof HTMLElement) {
+                setToMap(columnNode);
+              }
+            });
+          } else {
+            setToMap(node);
+          }
+        }
+      });
+      return _this.columns.reduce(function(acc, column) {
+        if (column.fixed === "left") {
+          var _this$headerNodesMap$, _this$headerNodesMap$2;
+          acc[0] += (_this$headerNodesMap$ = (_this$headerNodesMap$2 = _this.headerNodesMap.get(column.name)) === null || _this$headerNodesMap$2 === void 0 ? void 0 : _this$headerNodesMap$2.getBoundingClientRect().width) !== null && _this$headerNodesMap$ !== void 0 ? _this$headerNodesMap$ : 0;
+        }
+        if (column.fixed === "right") {
+          var _this$headerNodesMap$3, _this$headerNodesMap$4;
+          acc[1] += (_this$headerNodesMap$3 = (_this$headerNodesMap$4 = _this.headerNodesMap.get(column.name)) === null || _this$headerNodesMap$4 === void 0 ? void 0 : _this$headerNodesMap$4.getBoundingClientRect().width) !== null && _this$headerNodesMap$3 !== void 0 ? _this$headerNodesMap$3 : 0;
+        }
+        return acc;
+      }, [0, 0]);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getFixedStyle", function(cell) {
+      var side = cell.fixed;
+      if (!side) return [void 0, void 0];
+      var names = cell.name.split("/");
+      var nameSideMap = {
+        left: names[0],
+        right: names[names.length - 1]
+      };
+      var name = nameSideMap[side];
+      var index = _this.columns.findIndex(function(column) {
+        return column.name === name;
+      });
+      if (index === -1) return [void 0, void 0];
+      var startIndexSideMap = {
+        left: 0,
+        right: index + 1
+      };
+      var endIndexSideMap = {
+        left: index,
+        right: _this.columns.length
+      };
+      var columnsFixed = _this.columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
+      if (columnsFixed.length < 1) return [side, 0];
+      var sum = columnsFixed.reduce(function(acc, column) {
+        var _this$headerNodesMap$5;
+        return acc + ((_this$headerNodesMap$5 = _this.headerNodesMap.get(column.name)) === null || _this$headerNodesMap$5 === void 0 ? void 0 : _this$headerNodesMap$5.getBoundingClientRect().width);
+      }, 0);
+      return [side, "".concat(sum, "px")];
+    });
     if (props.children) {
       _this.columns = _this.calculateColumns();
     } else {
@@ -318,6 +391,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       _this.treeColumns = cols[1];
     }
     _this.rows = _this.calculateRows();
+    _this.flatRows = _this.rows.flat();
     return _this;
   }
   _createClass(DataTableRoot2, [{
@@ -330,14 +404,28 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.forceUpdate();
+      var _this2 = this;
+      var _this$asProps2 = this.asProps, headerProps = _this$asProps2.headerProps, loading = _this$asProps2.loading;
+      if (headerProps !== null && headerProps !== void 0 && headerProps.sticky && !headerProps.h || loading || this.columns.some(function(c) {
+        return c.fixed;
+      })) {
+        requestAnimationFrame(function() {
+          _this2.forceUpdate();
+        });
+      }
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$asProps2 = this.asProps, data = _this$asProps2.data, selectedRows = _this$asProps2.selectedRows;
-      if (prevProps.data !== data) {
+      var _this$asProps3 = this.asProps, data = _this$asProps3.data, selectedRows = _this$asProps3.selectedRows, columns = _this$asProps3.columns;
+      if (prevProps.columns !== columns) {
+        var cols = this.calculateColumnsFromConfig();
+        this.columns = cols[0];
+        this.treeColumns = cols[1];
+      }
+      if (prevProps.data !== data || prevProps.columns !== columns) {
         this.rows = this.calculateRows();
+        this.flatRows = this.rows.flat();
         this.forceUpdate();
       }
       if (prevProps.selectedRows !== selectedRows && selectedRows !== void 0) {
@@ -351,7 +439,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "totalRows",
     get: function get() {
-      var _this$asProps3 = this.asProps, totalRows = _this$asProps3.totalRows, expandedRows = _this$asProps3.expandedRows;
+      var _this$asProps4 = this.asProps, totalRows = _this$asProps4.totalRows, expandedRows = _this$asProps4.expandedRows;
       var flatRows = this.rows.flat();
       var expandedRowsCount = Array.from(expandedRows !== null && expandedRows !== void 0 ? expandedRows : []).reduce(function(acc, rowKey) {
         var dtRow = flatRows.find(function(el) {
@@ -384,7 +472,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     get: function get() {
       var columns = this.columns;
       var gridTemplateColumns = columns.map(function(c) {
-        return c.gridColumnWidth;
+        return c.gtcWidth;
       });
       var gridTemplateAreas = columns.map(function(c) {
         return c.name;
@@ -397,8 +485,8 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getHeadProps",
     value: function getHeadProps() {
-      var _this2 = this;
-      var _this$asProps4 = this.asProps, use = _this$asProps4.use, compact = _this$asProps4.compact, sort = _this$asProps4.sort, onSortChange = _this$asProps4.onSortChange, getI18nText = _this$asProps4.getI18nText, uid = _this$asProps4.uid, headerProps = _this$asProps4.headerProps, onSelectedRowsChange = _this$asProps4.onSelectedRowsChange, selectedRows = _this$asProps4.selectedRows, sideIndents = _this$asProps4.sideIndents;
+      var _this3 = this;
+      var _this$asProps5 = this.asProps, use = _this$asProps5.use, compact = _this$asProps5.compact, sort = _this$asProps5.sort, onSortChange = _this$asProps5.onSortChange, getI18nText = _this$asProps5.getI18nText, uid = _this$asProps5.uid, headerProps = _this$asProps5.headerProps, onSelectedRowsChange = _this$asProps5.onSelectedRowsChange, selectedRows = _this$asProps5.selectedRows, sideIndents = _this$asProps5.sideIndents;
       var _this$gridSettings = this.gridSettings, gridTemplateColumns = _this$gridSettings.gridTemplateColumns, gridTemplateAreas = _this$gridSettings.gridTemplateAreas;
       return _objectSpread({
         columns: this.columns,
@@ -418,22 +506,23 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         totalRows: this.totalRows,
         selectedRows,
         onChangeSelectAll: function onChangeSelectAll(value, e) {
-          var selectedRowsIndexes = value ? new Array(_this2.totalRows).fill(void 0).map(function(_, i) {
+          var selectedRowsIndexes = value ? new Array(_this3.totalRows).fill(void 0).map(function(_, i) {
             return i;
           }) : [];
           onSelectedRowsChange === null || onSelectedRowsChange === void 0 ? void 0 : onSelectedRowsChange(selectedRowsIndexes, e);
-        }
+        },
+        getFixedStyle: this.getFixedStyle
       }, headerProps);
     }
   }, {
     key: "getBodyProps",
     value: function getBodyProps() {
-      var _this$asProps5 = this.asProps, use = _this$asProps5.use, compact = _this$asProps5.compact, loading = _this$asProps5.loading, getI18nText = _this$asProps5.getI18nText, expandedRows = _this$asProps5.expandedRows, virtualScroll = _this$asProps5.virtualScroll, uid = _this$asProps5.uid, rowProps = _this$asProps5.rowProps, renderCell = _this$asProps5.renderCell, headerProps = _this$asProps5.headerProps, renderEmptyData2 = _this$asProps5.renderEmptyData, sideIndents = _this$asProps5.sideIndents, selectedRows = _this$asProps5.selectedRows;
+      var _this$asProps6 = this.asProps, use = _this$asProps6.use, compact = _this$asProps6.compact, loading = _this$asProps6.loading, getI18nText = _this$asProps6.getI18nText, expandedRows = _this$asProps6.expandedRows, virtualScroll = _this$asProps6.virtualScroll, uid = _this$asProps6.uid, rowProps = _this$asProps6.rowProps, renderCell = _this$asProps6.renderCell, headerProps = _this$asProps6.headerProps, renderEmptyData2 = _this$asProps6.renderEmptyData, sideIndents = _this$asProps6.sideIndents, selectedRows = _this$asProps6.selectedRows;
       var _this$gridSettings2 = this.gridSettings, gridTemplateColumns = _this$gridSettings2.gridTemplateColumns, gridTemplateAreas = _this$gridSettings2.gridTemplateAreas;
       return {
         columns: this.columns,
         rows: this.rows,
-        flatRows: this.rows.flat(),
+        flatRows: this.flatRows,
         use,
         compact: Boolean(compact),
         gridTemplateColumns,
@@ -459,7 +548,8 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         renderEmptyData: renderEmptyData2,
         sideIndents,
         selectedRows,
-        onSelectRow: this.handleSelectRow
+        onSelectRow: this.handleSelectRow,
+        getFixedStyle: this.getFixedStyle
       };
     }
   }, {
@@ -480,15 +570,15 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     value: function render() {
       var _ref = this.asProps, _ref2;
       var SDataTable = Box;
-      var _this$asProps6 = this.asProps, Children = _this$asProps6.Children, styles = _this$asProps6.styles, w = _this$asProps6.w, wMax = _this$asProps6.wMax, wMin = _this$asProps6.wMin, h = _this$asProps6.h, hMax = _this$asProps6.hMax, hMin = _this$asProps6.hMin, virtualScroll = _this$asProps6.virtualScroll, children = _this$asProps6.children, headerProps = _this$asProps6.headerProps, loading = _this$asProps6.loading, selectedRows = _this$asProps6.selectedRows;
-      var _getScrollOffsetValue = getScrollOffsetValue(this.columns), _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2), offsetLeftSum = _getScrollOffsetValue2[0], offsetRightSum = _getScrollOffsetValue2[1];
+      var _this$asProps7 = this.asProps, Children = _this$asProps7.Children, styles = _this$asProps7.styles, w = _this$asProps7.w, wMax = _this$asProps7.wMax, wMin = _this$asProps7.wMin, h = _this$asProps7.h, hMax = _this$asProps7.hMax, hMin = _this$asProps7.hMin, virtualScroll = _this$asProps7.virtualScroll, children = _this$asProps7.children, headerProps = _this$asProps7.headerProps, loading = _this$asProps7.loading, selectedRows = _this$asProps7.selectedRows;
+      var _this$getScrollOffset = this.getScrollOffsetValue(), _this$getScrollOffset2 = _slicedToArray(_this$getScrollOffset, 2), offsetLeftSum = _this$getScrollOffset2[0], offsetRightSum = _this$getScrollOffset2[1];
       var _this$gridSettings3 = this.gridSettings, gridTemplateColumns = _this$gridSettings3.gridTemplateColumns, gridTemplateAreas = _this$gridSettings3.gridTemplateAreas;
       var Head2 = findComponent(Children, ["DataTable.Head"]);
       var headerPropsToCheck = headerProps !== null && headerProps !== void 0 ? headerProps : Head2 === null || Head2 === void 0 ? void 0 : Head2.props;
-      var headerHeight = this.getHeaderHeight();
+      var headerHeight = (headerProps === null || headerProps === void 0 ? void 0 : headerProps.h) || this.getHeaderHeight();
       var topOffset = headerPropsToCheck !== null && headerPropsToCheck !== void 0 && headerPropsToCheck.sticky || headerPropsToCheck !== null && headerPropsToCheck !== void 0 && headerPropsToCheck.withScrollBar ? headerHeight : void 0;
       var width = w !== null && w !== void 0 ? w : this.columns.some(function(c) {
-        return c.gridColumnWidth === "auto" || c.gridColumnWidth === "1fr";
+        return c.gtcWidth === "auto" || c.gtcWidth === "1fr";
       }) ? "100%" : void 0;
       var gridTemplateRows = void 0;
       if (virtualScroll && typeof virtualScroll !== "boolean" && "rowHeight" in virtualScroll) {
@@ -518,13 +608,15 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         "ref": this.scrollAreaRef,
         "container": this.tableContainerRef,
         "styles": scrollStyles,
-        "onScroll": this.handleScroll,
+        "onScroll": virtualScroll ? this.handleScroll : void 0,
         "disableAutofocusToContent": true
       }), /* @__PURE__ */ React.createElement(ScrollArea.Container, {
         tabIndex: -1,
         scrollDirection,
         loading,
-        headerHeight: "".concat(headerHeight, "px")
+        headerHeight: "".concat(headerHeight, "px"),
+        leftScrollPadding: "".concat(offsetLeftSum, "px"),
+        rightScrollPadding: "".concat(offsetRightSum, "px")
       }, /* @__PURE__ */ React.createElement(SDataTable, _ref2.cn("SDataTable", _objectSpread({}, assignProps({
         "ref": forkRef(this.tableRef, this.tableContainerRef),
         "role": "grid",
@@ -546,7 +638,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         "use:h": void 0,
         "use:hMax": void 0,
         "use:hMin": void 0
-      }, _ref))), children ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DataTable.Head, null), /* @__PURE__ */ React.createElement(DataTable.Body, null)))), (headerPropsToCheck === null || headerPropsToCheck === void 0 ? void 0 : headerPropsToCheck.withScrollBar) && topOffset && !loading && /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
+      }, _ref))), children ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DataTableInternal.Head, null), /* @__PURE__ */ React.createElement(DataTableInternal.Body, null)))), (headerPropsToCheck === null || headerPropsToCheck === void 0 ? void 0 : headerPropsToCheck.withScrollBar) && topOffset && !loading && /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
         orientation: "horizontal",
         top: topOffset - SCROLL_BAR_HEIGHT,
         zIndex: 10
@@ -564,7 +656,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "calculateColumns",
     value: function calculateColumns() {
-      var _this3 = this;
+      var _this4 = this;
       var _this$props = this.props, children = _this$props.children, data = _this$props.data, selectedRows = _this$props.selectedRows;
       var HeadComponent = findComponent(children, ["Head"]);
       this.hasGroups = findComponent(HeadComponent.props.children, ["Head.Group"]) !== void 0;
@@ -575,20 +667,9 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       if (selectedRows) {
         var column = {
           name: SELECT_ALL.toString(),
-          // @ts-ignore
-          ref: function ref(node) {
-            if (node) {
-              var calculatedWidth = node.getBoundingClientRect().width;
-              var calculatedHeight = node.getBoundingClientRect().height;
-              column.calculatedWidth = calculatedWidth;
-              column.calculatedHeight = calculatedHeight;
-            }
-            this.ref.current = node;
-          },
-          gridColumnWidth: "40px",
-          calculatedWidth: 0,
-          calculatedHeight: 0,
-          alignItems: "flex-start"
+          gtcWidth: "40px",
+          alignItems: "flex-start",
+          children: ""
         };
         columns.push(column);
       }
@@ -598,26 +679,15 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         var rightBordersFromParent = isLast && ((parent === null || parent === void 0 ? void 0 : parent.props.borders) === "both" || (parent === null || parent === void 0 ? void 0 : parent.props.borders) === "right") ? "right" : void 0;
         var column2 = {
           name: columnElement.props.name,
-          // @ts-ignore
-          ref: function ref(node) {
-            if (node) {
-              var calculatedWidth = node.getBoundingClientRect().width;
-              var calculatedHeight = node.getBoundingClientRect().height;
-              column2.calculatedWidth = calculatedWidth;
-              column2.calculatedHeight = calculatedHeight;
-            }
-            this.ref.current = node;
-          },
-          gridColumnWidth: calculateGridTemplateColumn(columnElement),
+          gtcWidth: calculateGridTemplateColumn(columnElement),
           fixed: (_columnElement$props$ = columnElement.props.fixed) !== null && _columnElement$props$ !== void 0 ? _columnElement$props$ : parent === null || parent === void 0 ? void 0 : parent.props.fixed,
-          calculatedWidth: 0,
-          calculatedHeight: 0,
           borders: (_ref3 = (_columnElement$props$2 = columnElement.props.borders) !== null && _columnElement$props$2 !== void 0 ? _columnElement$props$2 : leftBordersFromParent) !== null && _ref3 !== void 0 ? _ref3 : rightBordersFromParent,
           parent,
           flexWrap: columnElement.props.flexWrap,
           alignItems: columnElement.props.alignItems,
           alignContent: columnElement.props.alignContent,
-          justifyContent: columnElement.props.justifyContent
+          justifyContent: columnElement.props.justifyContent,
+          children: ""
         };
         return column2;
       };
@@ -631,7 +701,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         if (!/* @__PURE__ */ React.isValidElement(child)) return;
         if (childIsColumn(child)) {
           var col = makeColumn(child);
-          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(_this3.hasGroups ? "3" : "2", " / ").concat(gridColumnIndex + 1);
+          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(_this4.hasGroups ? "3" : "2", " / ").concat(gridColumnIndex + 1);
           gridColumnIndex++;
           columns.push(col);
         } else if (childIsGroup(child)) {
@@ -656,7 +726,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
               columns.push(_col);
             }
           });
-          _this3.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
+          _this4.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
           groupIndex++;
         }
       });
@@ -665,7 +735,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "calculateColumnsFromConfig",
     value: function calculateColumnsFromConfig() {
-      var _this4 = this;
+      var _this5 = this;
       var _this$props2 = this.props, columns = _this$props2.columns, data = _this$props2.data, selectedRows = _this$props2.selectedRows;
       this.hasGroups = columns.some(function(column2) {
         return "columns" in column2;
@@ -678,20 +748,9 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       if (selectedRows) {
         var column = {
           name: SELECT_ALL.toString(),
-          // @ts-ignore
-          ref: function ref(node) {
-            if (node) {
-              var calculatedWidth = node.getBoundingClientRect().width;
-              var calculatedHeight = node.getBoundingClientRect().height;
-              column.calculatedWidth = calculatedWidth;
-              column.calculatedHeight = calculatedHeight;
-            }
-            this.ref.current = node;
-          },
-          gridColumnWidth: "40px",
-          calculatedWidth: 0,
-          calculatedHeight: 0,
-          alignItems: "flex-start"
+          gtcWidth: "40px",
+          alignItems: "flex-start",
+          children: ""
         };
         calculatedColumns.push(column);
       }
@@ -701,26 +760,8 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         var rightBordersFromParent = isLast && ((parent === null || parent === void 0 ? void 0 : parent.borders) === "both" || (parent === null || parent === void 0 ? void 0 : parent.borders) === "right") ? "right" : void 0;
         var column2 = _objectSpread(_objectSpread({}, columnElement), {}, {
           name: childIsColumn(columnElement) ? columnElement.name : "",
-          // @ts-ignore
-          ref: function ref(node) {
-            var _columnElement$ref;
-            if (node) {
-              var calculatedWidth = node.getBoundingClientRect().width;
-              var calculatedHeight = node.getBoundingClientRect().height;
-              column2.calculatedWidth = calculatedWidth;
-              column2.calculatedHeight = calculatedHeight;
-            }
-            if (childIsColumn(columnElement) && (_columnElement$ref = columnElement.ref) !== null && _columnElement$ref !== void 0 && _columnElement$ref.hasOwnProperty("current")) {
-              columnElement.ref.current = node;
-            }
-            if (this !== null && this !== void 0 && this.ref) {
-              this.ref.current = node;
-            }
-          },
-          gridColumnWidth: childIsColumn(columnElement) ? calculateGridTemplateColumn(columnElement) : "",
+          gtcWidth: childIsColumn(columnElement) ? calculateGridTemplateColumn(columnElement) : "",
           fixed: (_columnElement$fixed = columnElement.fixed) !== null && _columnElement$fixed !== void 0 ? _columnElement$fixed : parent === null || parent === void 0 ? void 0 : parent.fixed,
-          calculatedWidth: 0,
-          calculatedHeight: 0,
           borders: (_ref4 = (_columnElement$border = columnElement.borders) !== null && _columnElement$border !== void 0 ? _columnElement$border : leftBordersFromParent) !== null && _ref4 !== void 0 ? _ref4 : rightBordersFromParent,
           parent
         });
@@ -735,7 +776,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       columns.forEach(function(child, i) {
         if (childIsColumn(child)) {
           var col = makeColumn(child);
-          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(_this4.hasGroups ? "3" : "2", " / ").concat(gridColumnIndex + 1);
+          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(_this5.hasGroups ? "3" : "2", " / ").concat(gridColumnIndex + 1);
           gridColumnIndex++;
           calculatedColumns.push(col);
           treeColumns.push(col);
@@ -764,7 +805,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
             (_Group$columns = Group.columns) === null || _Group$columns === void 0 ? void 0 : _Group$columns.push(col2);
           });
           treeColumns.push(Group);
-          _this4.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
+          _this5.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
           groupIndex++;
         }
       });
@@ -773,7 +814,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "calculateRows",
     value: function calculateRows() {
-      var _this5 = this;
+      var _this6 = this;
       var columns = this.columns;
       var _this$props3 = this.props, data = _this$props3.data, uid = _this$props3.uid;
       var rows = [];
@@ -787,7 +828,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         var columns2 = new Set(columnNames);
         var dtRow = Object.entries(row).reduce(function(acc, _ref5) {
           var _ref6 = _slicedToArray(_ref5, 2), key = _ref6[0], value = _ref6[1];
-          var columnsToRow = key.split(_this5.columnsSplitter);
+          var columnsToRow = key.split(_this6.columnsSplitter);
           if (columnsToRow.length === 1) {
             acc[key] = value !== null && value !== void 0 ? value : "";
             columns2["delete"](key);
@@ -823,7 +864,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
           var groupedKeys = [];
           var groupedRowData = Object.entries(row).reduce(function(acc, _ref7) {
             var _ref8 = _slicedToArray(_ref7, 2), key = _ref8[0], value = _ref8[1];
-            acc[key] = new MergedRowsCell(value, groupedRows.length);
+            acc[key] = new MergedRowsCell(value, groupedRows.length, row[ACCORDION]);
             groupedKeys.push(key);
             return acc;
           }, (_Object$entries$reduc2 = {}, _defineProperty(_Object$entries$reduc2, UNIQ_ROW_KEY, ""), _defineProperty(_Object$entries$reduc2, ROW_INDEX, -1), _Object$entries$reduc2));
@@ -832,8 +873,14 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
             if (index === 0) {
               var rowData = _objectSpread(_objectSpread({}, childRow), groupedRowData);
               dtRow2 = makeDtRow(rowData);
+              dtRow2[ROW_GROUP] = /* @__PURE__ */ new Set();
             } else {
+              var _innerRows$, _innerRows$$ROW_GROUP;
+              if (index === groupedRows.length - 1 && row[ACCORDION]) {
+                childRow[ACCORDION] = row[ACCORDION];
+              }
               dtRow2 = makeDtRow(childRow, groupedKeys);
+              (_innerRows$ = innerRows[0]) === null || _innerRows$ === void 0 ? void 0 : (_innerRows$$ROW_GROUP = _innerRows$[ROW_GROUP]) === null || _innerRows$$ROW_GROUP === void 0 ? void 0 : _innerRows$$ROW_GROUP.add(dtRow2[UNIQ_ROW_KEY]);
             }
             innerRows.push(dtRow2);
             rowIndex++;
@@ -894,9 +941,11 @@ var DataTable = createComponent(DataTableRoot, {
   Head,
   Body
 });
+var DataTableInternal = DataTable;
 export {
   ACCORDION,
   DataTable,
+  DataTableInternal,
   ROW_GROUP,
   ROW_INDEX,
   SELECT_ALL,