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

package/lib/es6/components/DataTable/DataTable.js

@@ -16,38 +16,41 @@ import { Box, ScreenReaderOnly, ScrollArea } from '@semcore/base-components';
 import { Head } from '../Head/Head';
 import { Body } from '../Body/Body';
 /*!__reshadow-styles__:"./dataTable.shadow.css"*/
-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)}", /*__inner_css_end__*/"1iypx_gg_"),
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___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__*/"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"
 });
 import { isFocusInside, hasFocusableIn } from '@semcore/core/lib/utils/use/useFocusLock';
-import { getScrollOffsetValue } from '../../utils';
 import findComponent from '@semcore/core/lib/utils/findComponent';
 import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
 import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
 import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
 import { forkRef } from '@semcore/core/lib/utils/ref';
 /*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
-var scrollStyles = ( /*__reshadow_css_start__*/_sstyled2.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}", /*__inner_css_end__*/"11h4o_gg_"),
+var scrollStyles = ( /*__reshadow_css_start__*/_sstyled2.insert( /*__inner_css_start__*/".___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__*/"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_"
 });
 import { hasParent } from '@semcore/core/lib/utils/hasParent';
 import trottle from '@semcore/core/lib/utils/rafTrottle';
@@ -78,7 +81,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "gridAreaGroupMap", new Map());
     _defineProperty(_assertThisInitialized(_this), "columnsSplitter", '/');
     _defineProperty(_assertThisInitialized(_this), "rows", []);
+    _defineProperty(_assertThisInitialized(_this), "flatRows", []);
     _defineProperty(_assertThisInitialized(_this), "selectAllMessageTimer", 0);
+    _defineProperty(_assertThisInitialized(_this), "headerNodesMap", new Map());
     _defineProperty(_assertThisInitialized(_this), "state", {
       scrollTop: 0,
       scrollDirection: 'down',
@@ -123,11 +128,7 @@ 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;
@@ -181,9 +182,14 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         var rowI = rowIndex;
         var colI = colIndex;
         if (direction === 'left' || direction === 'right') {
-          var _currentCell$parentEl, _row$children;
+          var _currentCell$parentEl, _currentCell$parentEl2, _row$children;
+          // we need to skip Collapse Element with one big component from keyboard left/right pressing
+          if (((_currentCell$parentEl = currentCell.parentElement) === null || _currentCell$parentEl === void 0 ? void 0 : _currentCell$parentEl.dataset.uiName) === 'Collapse') {
+            return;
+          }
+
           // left/right
-          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) {
+          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;
@@ -308,6 +314,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 setToMap(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 [undefined, undefined];
+      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 [undefined, undefined];
+      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 {
@@ -316,6 +388,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       _this.treeColumns = cols[1];
     }
     _this.rows = _this.calculateRows();
+    _this.flatRows = _this.rows.flat();
     return _this;
   }
   _createClass(DataTableRoot, [{
@@ -328,16 +401,33 @@ 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 !== undefined) {
@@ -351,9 +441,9 @@ 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) {
@@ -386,7 +476,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;
@@ -399,18 +489,18 @@ 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;
@@ -432,37 +522,38 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         totalRows: this.totalRows,
         selectedRows: selectedRows,
         onChangeSelectAll: function onChangeSelectAll(value, e) {
-          var selectedRowsIndexes = value ? new Array(_this2.totalRows).fill(undefined).map(function (_, i) {
+          var selectedRowsIndexes = value ? new Array(_this3.totalRows).fill(undefined).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,
-        renderEmptyData = _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,
+        renderEmptyData = _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: use,
         compact: Boolean(compact),
         gridTemplateColumns: gridTemplateColumns,
@@ -488,7 +579,8 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         renderEmptyData: renderEmptyData,
         sideIndents: sideIndents,
         selectedRows: selectedRows,
-        onSelectRow: this.handleSelectRow
+        onSelectRow: this.handleSelectRow,
+        getFixedStyle: this.getFixedStyle
       };
     }
   }, {
@@ -510,33 +602,33 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       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 Head = findComponent(Children, ['DataTable.Head']);
       var headerPropsToCheck = headerProps !== null && headerProps !== void 0 ? headerProps : Head === null || Head === void 0 ? void 0 : Head.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 : undefined;
       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%' : undefined;
       var gridTemplateRows = undefined;
       if (virtualScroll && typeof virtualScroll !== 'boolean' && 'rowHeight' in virtualScroll) {
@@ -566,7 +658,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         "ref": this.scrollAreaRef,
         "container": this.tableContainerRef,
         "styles": scrollStyles,
-        "onScroll": this.handleScroll,
+        "onScroll": virtualScroll ? this.handleScroll : undefined,
         "disableAutofocusToContent": true
       }), /*#__PURE__*/React.createElement(ScrollArea.Container, {
         tabIndex: -1
@@ -576,7 +668,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         // @ts-ignore
         ,
         loading: 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',
@@ -598,7 +692,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         "use:h": undefined,
         "use:hMax": undefined,
         "use:hMin": undefined
-      }, _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
@@ -616,7 +710,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,
@@ -631,20 +725,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);
       }
@@ -654,26 +737,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' : undefined;
         var column = {
           name: columnElement.props.name,
-          // @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: 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: parent,
           flexWrap: columnElement.props.flexWrap,
           alignItems: columnElement.props.alignItems,
           alignContent: columnElement.props.alignContent,
-          justifyContent: columnElement.props.justifyContent
+          justifyContent: columnElement.props.justifyContent,
+          children: ''
         };
         return column;
       };
@@ -687,7 +759,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);
           columnIndex++;
           gridColumnIndex++;
           columns.push(col);
@@ -714,7 +786,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++;
         }
       });
@@ -723,7 +795,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,
@@ -740,20 +812,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);
       }
@@ -763,27 +824,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' : undefined;
         var column = _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;
-              column.calculatedWidth = calculatedWidth;
-              column.calculatedHeight = calculatedHeight;
-            }
-            if (childIsColumn(columnElement) && (_columnElement$ref = columnElement.ref) !== null && _columnElement$ref !== void 0 && _columnElement$ref.hasOwnProperty('current')) {
-              // @ts-ignore
-              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: parent
         });
@@ -798,7 +840,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);
           columnIndex++;
           gridColumnIndex++;
           calculatedColumns.push(col);
@@ -829,7 +871,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
             (_Group$columns = Group.columns) === null || _Group$columns === void 0 ? void 0 : _Group$columns.push(col);
           });
           treeColumns.push(Group);
-          _this4.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
+          _this5.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
           groupIndex++;
         }
       });
@@ -838,7 +880,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "calculateRows",
     value: function calculateRows() {
-      var _this5 = this;
+      var _this6 = this;
       var columns = this.columns;
       // @ts-ignore
       var _this$props3 = this.props,
@@ -858,7 +900,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           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 : '';
             columns["delete"](key);
@@ -967,4 +1009,5 @@ export var DataTable = createComponent(DataTableRoot, {
   Head: Head,
   Body: Body
 });
+export var DataTableInternal = DataTable;
 //# sourceMappingURL=DataTable.js.map