@semcore/data-table 16.0.0-prerelease.16 → 16.0.0-prerelease.18

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

@@ -1,5 +1,6 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -15,30 +16,38 @@ import { Box, 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_1yoby_gg_{display:grid;position:relative;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_1yoby_gg_.__gridTemplateColumns_1yoby_gg_{grid-template-columns:var(--gridTemplateColumns_1yoby)}.___SDataTable_1yoby_gg_.__gridTemplateAreas_1yoby_gg_{grid-template-areas:var(--gridTemplateAreas_1yoby)}" /*__inner_css_end__*/, "1yoby_gg_") /*__reshadow_css_end__*/, {
-  "__SDataTable": "___SDataTable_1yoby_gg_",
-  "_gridTemplateColumns": "__gridTemplateColumns_1yoby_gg_",
-  "--gridTemplateColumns": "--gridTemplateColumns_1yoby",
-  "_gridTemplateAreas": "__gridTemplateAreas_1yoby_gg_",
-  "--gridTemplateAreas": "--gridTemplateAreas_1yoby"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDataTable_1rvtk_gg_{display:grid;position:relative;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_1rvtk_gg_.__gridTemplateColumns_1rvtk_gg_{grid-template-columns:var(--gridTemplateColumns_1rvtk)}.___SDataTable_1rvtk_gg_.__gridTemplateAreas_1rvtk_gg_{grid-template-areas:var(--gridTemplateAreas_1rvtk)}.___SDataTable_1rvtk_gg_.__gridTemplateRows_1rvtk_gg_{grid-template-rows:var(--gridTemplateRows_1rvtk)}" /*__inner_css_end__*/, "1rvtk_gg_") /*__reshadow_css_end__*/, {
+  "__SDataTable": "___SDataTable_1rvtk_gg_",
+  "_gridTemplateColumns": "__gridTemplateColumns_1rvtk_gg_",
+  "--gridTemplateColumns": "--gridTemplateColumns_1rvtk",
+  "_gridTemplateAreas": "__gridTemplateAreas_1rvtk_gg_",
+  "--gridTemplateAreas": "--gridTemplateAreas_1rvtk",
+  "_gridTemplateRows": "__gridTemplateRows_1rvtk_gg_",
+  "--gridTemplateRows": "--gridTemplateRows_1rvtk"
 });
 import { isFocusInside, hasFocusableIn } from '@semcore/core/lib/utils/use/useFocusLock';
-import syncScroll from '@semcore/core/lib/utils/syncScroll';
 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 { MergedColumnsCell, MergedRowsCell } from '../Body/MergedCells';
 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_1765z_gg_{width:-moz-fit-content;width:fit-content}.___SShadowHorizontal_1765z_gg_:after,.___SShadowHorizontal_1765z_gg_:before,.___SShadowVertical_1765z_gg_:after,.___SShadowVertical_1765z_gg_:before{z-index:1}" /*__inner_css_end__*/, "1765z_gg_") /*__reshadow_css_end__*/, {
-  "__SScrollArea": "___SScrollArea_1765z_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_1765z_gg_",
-  "__SShadowVertical": "___SShadowVertical_1765z_gg_"
+var scrollStyles = ( /*__reshadow_css_start__*/_sstyled2.insert( /*__inner_css_start__*/".___SScrollArea_dn57w_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_dn57w_gg_ .___SContainer_dn57w_gg_{overflow:visible;overflow:initial}.___SScrollArea_dn57w_gg_ .___SContainer_dn57w_gg_._scrollDirection_both_dn57w_gg_{overflow:auto}.___SScrollArea_dn57w_gg_ .___SContainer_dn57w_gg_._scrollDirection_horizontal_dn57w_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_dn57w_gg_ .___SContainer_dn57w_gg_._scrollDirection_vertical_dn57w_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_dn57w_gg_ .___SShadowVertical_dn57w_gg_:before{display:none}.___SScrollArea_dn57w_gg_ .___SShadowHorizontal_dn57w_gg_:after,.___SScrollArea_dn57w_gg_ .___SShadowHorizontal_dn57w_gg_:before,.___SScrollArea_dn57w_gg_ .___SShadowVertical_dn57w_gg_:after{z-index:2}" /*__inner_css_end__*/, "dn57w_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollArea": "___SScrollArea_dn57w_gg_",
+  "__SContainer": "___SContainer_dn57w_gg_",
+  "_scrollDirection_both": "_scrollDirection_both_dn57w_gg_",
+  "_scrollDirection_horizontal": "_scrollDirection_horizontal_dn57w_gg_",
+  "_scrollDirection_vertical": "_scrollDirection_vertical_dn57w_gg_",
+  "__SShadowVertical": "___SShadowVertical_dn57w_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_dn57w_gg_"
 });
+import { hasParent } from '@semcore/core/lib/utils/hasParent';
+import trottle from '@semcore/core/lib/utils/rafTrottle';
 export var ACCORDION = Symbol('accordion');
 export var ROW_GROUP = Symbol('ROW_GROUP');
+export var UNIQ_ROW_KEY = Symbol('UNIQ_ROW_KEY');
+var SCROLL_BAR_HEIGHT = 12;
 var DataTableRoot = /*#__PURE__*/function (_Component) {
   _inherits(DataTableRoot, _Component);
   var _super = _createSuper(DataTableRoot);
@@ -46,15 +55,19 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, DataTableRoot);
     _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "columnsSplitter", '/');
     _defineProperty(_assertThisInitialized(_this), "columns", []);
+    _defineProperty(_assertThisInitialized(_this), "treeColumns", []);
+    _defineProperty(_assertThisInitialized(_this), "hasGroups", false);
     _defineProperty(_assertThisInitialized(_this), "focusedCell", [-1, -1]);
     _defineProperty(_assertThisInitialized(_this), "tableContainerRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "tableRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "headerRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "scrollBodyRef", void 0);
-    _defineProperty(_assertThisInitialized(_this), "scrollHeadRef", void 0);
+    _defineProperty(_assertThisInitialized(_this), "spinnerRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "gridAreaGroupMap", new Map());
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      scrollTop: 0,
+      scrollDirection: 'down'
+    });
     _defineProperty(_assertThisInitialized(_this), "getRow", function (index) {
       var _this$tableRef$curren;
       return (_this$tableRef$curren = _this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.querySelector("[aria-rowindex=\"".concat(index + 1, "\"]"));
@@ -66,6 +79,16 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       });
       return hasFocusable;
     });
+    _defineProperty(_assertThisInitialized(_this), "onExpandRow", function (expandedRowIndex) {
+      var expandedRows = _this.asProps.expandedRows;
+      if (expandedRows !== null && expandedRows !== void 0 && expandedRows.includes(expandedRowIndex)) {
+        _this.handlers.expandedRows(expandedRows.filter(function (row) {
+          return row !== expandedRowIndex;
+        }));
+      } else {
+        _this.handlers.expandedRows([].concat(_toConsumableArray(expandedRows), [expandedRowIndex]));
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "changeFocusCell", function (rowIndex, colIndex, direction) {
       var _this$tableRef$curren2, _this$tableRef$curren3;
       var hasFocusable = _this.hasFocusableInHeader();
@@ -109,21 +132,24 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         var rowI = rowIndex;
         var colI = colIndex;
         if (direction === 'left' || direction === 'right') {
+          var _currentCell$parentEl;
           // left/right
-          if (currentCell.dataset.groupedBy === 'columns') {
+          if (currentCell.dataset.groupedBy === 'colgroup' || Number((_currentCell$parentEl = currentCell.parentElement) === null || _currentCell$parentEl === void 0 ? void 0 : _currentCell$parentEl.getAttribute('aria-rowindex')) === 2) {
             colI = direction === 'left' ? colI - 1 : colI + 1;
           } else {
             rowI = rowI - 1;
           }
         } else if (direction === 'up' || direction === 'down') {
           // top/bottom
-          if (currentCell.dataset.groupedBy === 'rows') {
+          if (currentCell.dataset.groupedBy === 'rowgroup' || Number(currentCell.getAttribute('aria-colindex')) === 1) {
             rowI = direction === 'up' ? rowI - 1 : rowI + 1;
           } else {
             colI = colI - 1;
           }
         }
         _this.changeFocusCell(rowI, colI, direction);
+      } else if (row === null && _this.focusedCell[0] === 0 && direction === 'down' && _this.asProps.virtualScroll) {
+        _this.changeFocusCell(rowIndex + 1, colIndex, direction);
       }
     });
     _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
@@ -167,8 +193,20 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         _this.focusedCell = [1, 0];
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "handleScroll", trottle(function (e) {
+      var scrollTop = e.target.scrollTop;
+      var scrollDirection = scrollTop > _this.state.scrollTop ? 'down' : 'up';
+      _this.setState({
+        scrollTop: scrollTop,
+        scrollDirection: scrollDirection
+      });
+    }));
     _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
-      if ((!e.relatedTarget || !isFocusInside(e.currentTarget, e.relatedTarget)) && lastInteraction.isKeyboard()) {
+      if (_this.asProps.loading) {
+        var _this$spinnerRef$curr;
+        (_this$spinnerRef$curr = _this.spinnerRef.current) === null || _this$spinnerRef$curr === void 0 ? void 0 : _this$spinnerRef$curr.focus();
+        e.currentTarget.setAttribute('tabIndex', '-1');
+      } else if ((!e.relatedTarget || !isFocusInside(e.currentTarget, e.relatedTarget)) && lastInteraction.isKeyboard()) {
         var _row;
         if (_this.focusedCell[0] === -1 && _this.focusedCell[1] === -1) {
           _this.initFocusableCell();
@@ -179,9 +217,28 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           _this.initFocusableCell();
           row = _this.getRow(_this.focusedCell[0]);
         }
+        if (!row && _this.asProps.virtualScroll) {
+          var _this$tableRef$curren4;
+          var firstAvailableCell = (_this$tableRef$curren4 = _this.tableRef.current) === null || _this$tableRef$curren4 === void 0 ? void 0 : _this$tableRef$curren4.querySelector("[role=\"gridcell\"]");
+          var firstAvailableRow = firstAvailableCell === null || firstAvailableCell === void 0 ? void 0 : firstAvailableCell.parentElement;
+          if (firstAvailableCell && firstAvailableRow) {
+            var _Number, _Number2;
+            var colIndex = ((_Number = Number(firstAvailableCell.getAttribute('aria-colindex'))) !== null && _Number !== void 0 ? _Number : 1) - 1;
+            var rowIndex = ((_Number2 = Number(firstAvailableRow.getAttribute('aria-rowindex'))) !== null && _Number2 !== void 0 ? _Number2 : 1) - 1;
+            _this.focusedCell[0] = rowIndex;
+            _this.focusedCell[1] = colIndex;
+            row = firstAvailableRow;
+          }
+        }
         var cell = (_row = row) === null || _row === void 0 ? void 0 : _row.querySelectorAll('[role=gridcell], [role=columnheader]').item(_this.focusedCell[1]);
         cell === null || cell === void 0 ? void 0 : cell.removeAttribute('inert');
-        cell instanceof HTMLElement && cell.focus();
+        if (cell instanceof HTMLElement) {
+          if (hasParent(e.target, cell)) {
+            e.target.focus();
+          } else {
+            cell.focus();
+          }
+        }
         e.currentTarget.setAttribute('tabIndex', '-1');
       }
     });
@@ -196,14 +253,23 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "handleMouseMove", function () {
       _this.setInert(false);
     });
-    var createRef = syncScroll();
-    // first create body ref for master scroll
-    _this.scrollBodyRef = createRef('body');
-    _this.scrollHeadRef = createRef('head');
-    _this.columns = _this.calculateColumns();
+    if (props.children) {
+      _this.columns = _this.calculateColumns();
+    } else {
+      var cols = _this.calculateColumnsFromConfig();
+      _this.columns = cols[0];
+      _this.treeColumns = cols[1];
+    }
     return _this;
   }
   _createClass(DataTableRoot, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        expandedRows: []
+      };
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.forceUpdate();
@@ -211,16 +277,40 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "totalRows",
     get: function get() {
-      var totalRows = this.asProps.totalRows;
-      return totalRows !== null && totalRows !== void 0 ? totalRows : this.calculateRows().length;
+      var _this$asProps = this.asProps,
+        totalRows = _this$asProps.totalRows,
+        expandedRows = _this$asProps.expandedRows,
+        data = _this$asProps.data;
+      var expandedRowsCount = expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.reduce(function (acc, rowIndex) {
+        var dtRow = data[rowIndex];
+        var expandedRows = dtRow[ACCORDION];
+        if (Array.isArray(expandedRows)) {
+          acc = acc + expandedRows.length;
+        } else {
+          acc = acc + 1;
+        }
+        return acc;
+      }, 0);
+      if (totalRows !== undefined) {
+        return totalRows + expandedRowsCount;
+      }
+      var rows = data.reduce(function (acc, item) {
+        acc = acc + 1;
+        if (item[ROW_GROUP]) {
+          acc = acc + item[ROW_GROUP].length;
+        }
+        return acc;
+      }, 0);
+      return rows + expandedRowsCount;
     }
   }, {
     key: "gridSettings",
     get: function get() {
-      var gridTemplateColumns = this.columns.map(function (c) {
+      var columns = this.columns;
+      var gridTemplateColumns = columns.map(function (c) {
         return c.gridColumnWidth;
       });
-      var gridTemplateAreas = this.columns.map(function (c) {
+      var gridTemplateAreas = columns.map(function (c) {
         return c.name;
       });
       return {
@@ -231,18 +321,20 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "getHeadProps",
     value: function getHeadProps() {
-      var _this$asProps = this.asProps,
-        use = _this$asProps.use,
-        compact = _this$asProps.compact,
-        sort = _this$asProps.sort,
-        onSortChange = _this$asProps.onSortChange,
-        getI18nText = _this$asProps.getI18nText,
-        uid = _this$asProps.uid;
+      var _this$asProps2 = this.asProps,
+        use = _this$asProps2.use,
+        compact = _this$asProps2.compact,
+        sort = _this$asProps2.sort,
+        onSortChange = _this$asProps2.onSortChange,
+        getI18nText = _this$asProps2.getI18nText,
+        uid = _this$asProps2.uid,
+        headerProps = _this$asProps2.headerProps;
       var _this$gridSettings = this.gridSettings,
         gridTemplateColumns = _this$gridSettings.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings.gridTemplateAreas;
-      return {
+      return _objectSpread({
         columns: this.columns,
+        treeColumns: this.treeColumns,
         use: use,
         tableRef: this.tableRef,
         compact: Boolean(compact),
@@ -254,50 +346,52 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         gridAreaGroupMap: this.gridAreaGroupMap,
         gridTemplateColumns: gridTemplateColumns,
         gridTemplateAreas: gridTemplateAreas
-      };
+      }, headerProps);
     }
   }, {
     key: "getBodyProps",
     value: function getBodyProps() {
-      var _header$children;
-      var _this$asProps2 = this.asProps,
-        use = _this$asProps2.use,
-        compact = _this$asProps2.compact,
-        loading = _this$asProps2.loading,
-        getI18nText = _this$asProps2.getI18nText;
-      var rows = this.calculateRows();
+      var _this$asProps3 = this.asProps,
+        use = _this$asProps3.use,
+        compact = _this$asProps3.compact,
+        loading = _this$asProps3.loading,
+        getI18nText = _this$asProps3.getI18nText,
+        expandedRows = _this$asProps3.expandedRows,
+        virtualScroll = _this$asProps3.virtualScroll,
+        data = _this$asProps3.data,
+        uid = _this$asProps3.uid,
+        renderCell = _this$asProps3.renderCell;
       var _this$gridSettings2 = this.gridSettings,
         gridTemplateColumns = _this$gridSettings2.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings2.gridTemplateAreas;
-      var header = this.headerRef.current;
-      var headerHeight = Array.from((_header$children = header === null || header === void 0 ? void 0 : header.children) !== null && _header$children !== void 0 ? _header$children : []).reduce(function (maxHeight, col) {
-        var rect = col.getBoundingClientRect();
-        if (rect.height > maxHeight) {
-          maxHeight = rect.height;
-        }
-        return maxHeight;
-      }, 0);
       return {
         columns: this.columns,
-        rows: rows,
+        data: data,
         use: use,
-        scrollRef: this.scrollBodyRef,
-        headerRows: this.columns.some(function (column) {
-          return Boolean(column.parent);
-        }) ? 2 : 1,
         compact: Boolean(compact),
         gridTemplateColumns: gridTemplateColumns,
         gridTemplateAreas: gridTemplateAreas,
         loading: loading,
-        headerHeight: headerHeight,
-        getI18nText: getI18nText
+        headerHeight: this.getTopScrollOffset(),
+        getI18nText: getI18nText,
+        expandedRows: expandedRows,
+        onExpandRow: this.onExpandRow,
+        spinnerRef: this.spinnerRef,
+        scrollTop: this.state.scrollTop,
+        scrollDirection: this.state.scrollDirection,
+        tableContainerRef: this.tableContainerRef,
+        tableRef: this.tableRef,
+        virtualScroll: virtualScroll,
+        hasGroups: this.hasGroups,
+        uid: uid,
+        renderCell: renderCell
       };
     }
   }, {
     key: "setInert",
     value: function setInert(value) {
-      var _this$tableRef$curren4;
-      var cells = (_this$tableRef$curren4 = this.tableRef.current) === null || _this$tableRef$curren4 === void 0 ? void 0 : _this$tableRef$curren4.querySelectorAll('[role=gridcell], [role=columnheader]');
+      var _this$tableRef$curren5;
+      var cells = (_this$tableRef$curren5 = this.tableRef.current) === null || _this$tableRef$curren5 === void 0 ? void 0 : _this$tableRef$curren5.querySelectorAll('[role=gridcell], [role=columnheader]');
       cells === null || cells === void 0 ? void 0 : cells.forEach(function (cell) {
         if (value === true) {
           cell.setAttribute('inert', '');
@@ -310,17 +404,22 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _ref = this.asProps,
-        _ref2;
+        _ref2,
+        _ref3,
+        _ref4;
       var SDataTable = Box;
-      var _this$asProps3 = this.asProps,
-        Children = _this$asProps3.Children,
-        styles = _this$asProps3.styles,
-        w = _this$asProps3.w,
-        wMax = _this$asProps3.wMax,
-        wMin = _this$asProps3.wMin,
-        h = _this$asProps3.h,
-        hMax = _this$asProps3.hMax,
-        hMin = _this$asProps3.hMin;
+      var _this$asProps4 = this.asProps,
+        Children = _this$asProps4.Children,
+        styles = _this$asProps4.styles,
+        w = _this$asProps4.w,
+        wMax = _this$asProps4.wMax,
+        wMin = _this$asProps4.wMin,
+        h = _this$asProps4.h,
+        hMax = _this$asProps4.hMax,
+        hMin = _this$asProps4.hMin,
+        virtualScroll = _this$asProps4.virtualScroll,
+        children = _this$asProps4.children,
+        headerProps = _this$asProps4.headerProps;
       var _getScrollOffsetValue = getScrollOffsetValue(this.columns),
         _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2),
         offsetLeftSum = _getScrollOffsetValue2[0],
@@ -329,13 +428,29 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         gridTemplateColumns = _this$gridSettings3.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings3.gridTemplateAreas;
       var Head = findComponent(Children, ['DataTable.Head']);
-      var Body = findComponent(Children, ['DataTable.Body']);
+      var headerPropsToCheck = headerProps !== null && headerProps !== void 0 ? headerProps : Head === null || Head === void 0 ? void 0 : Head.props;
+      var topOffset = headerPropsToCheck !== null && headerPropsToCheck !== void 0 && headerPropsToCheck.sticky || headerPropsToCheck !== null && headerPropsToCheck !== void 0 && headerPropsToCheck.withScrollBar ? this.getTopScrollOffset() : undefined;
       var width = w !== null && w !== void 0 ? w : this.columns.some(function (c) {
         return c.gridColumnWidth === 'auto' || c.gridColumnWidth === '1fr';
       }) ? '100%' : undefined;
+      var gridTemplateRows = undefined;
+      if (virtualScroll && typeof virtualScroll !== 'boolean' && 'rowHeight' in virtualScroll) {
+        gridTemplateRows = "auto auto repeat(".concat(this.totalRows, ", minmax(").concat(virtualScroll.rowHeight, "px, auto)");
+      }
+      var scrollDirection = undefined;
+      var hasWidthSettings = Boolean((_ref3 = w !== null && w !== void 0 ? w : wMax) !== null && _ref3 !== void 0 ? _ref3 : wMin);
+      var hasHeightSettings = Boolean((_ref4 = h !== null && h !== void 0 ? h : hMax) !== null && _ref4 !== void 0 ? _ref4 : hMin);
+      if (hasWidthSettings && !hasHeightSettings) {
+        scrollDirection = 'horizontal';
+      } else if (hasHeightSettings && !hasWidthSettings) {
+        scrollDirection = 'vertical';
+      } else if (hasWidthSettings && hasHeightSettings) {
+        scrollDirection = 'both';
+      }
       return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(ScrollArea, _ref2.cn("ScrollArea", {
         "leftOffset": offsetLeftSum,
         "rightOffset": offsetRightSum,
+        "topOffset": topOffset,
         "w": width,
         "wMax": wMax,
         "wMin": wMin,
@@ -344,9 +459,14 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         "hMin": hMin,
         "shadow": true,
         "container": this.tableContainerRef,
-        "styles": scrollStyles
+        "styles": scrollStyles,
+        "onScroll": this.handleScroll,
+        "disableAutofocusToContent": true
       }), /*#__PURE__*/React.createElement(ScrollArea.Container, {
         tabIndex: -1
+        // @ts-ignore
+        ,
+        scrollDirection: scrollDirection
       }, /*#__PURE__*/React.createElement(SDataTable, _ref2.cn("SDataTable", _objectSpread({}, _assignProps({
         "ref": forkRef(this.tableRef, this.tableContainerRef),
         "role": 'grid',
@@ -359,6 +479,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         "aria-colcount": this.columns.length,
         "gridTemplateColumns": gridTemplateColumns.join(' '),
         "gridTemplateAreas": gridTemplateAreas.join(' '),
+        "gridTemplateRows": gridTemplateRows,
         "w": '100%',
         "use:data": undefined,
         "use:w": undefined,
@@ -367,10 +488,16 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         "use:h": undefined,
         "use:hMax": undefined,
         "use:hMin": undefined
-      }, _ref))), Body, Head)), /*#__PURE__*/React.createElement(ScrollArea.Bar, {
-        orientation: "horizontal"
+      }, _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 && /*#__PURE__*/React.createElement(ScrollArea.Bar, {
+        orientation: "horizontal",
+        top: topOffset - SCROLL_BAR_HEIGHT,
+        zIndex: 3
+      }), /*#__PURE__*/React.createElement(ScrollArea.Bar, {
+        orientation: "horizontal",
+        zIndex: 2
       }), /*#__PURE__*/React.createElement(ScrollArea.Bar, {
-        orientation: "vertical"
+        orientation: "vertical",
+        zIndex: 2
       }));
     }
   }, {
@@ -381,14 +508,14 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         children = _this$props.children,
         data = _this$props.data;
       var HeadComponent = findComponent(children, ['Head']);
-      var hasGroup = findComponent(HeadComponent.props.children, ['Head.Group']) !== undefined;
+      this.hasGroups = findComponent(HeadComponent.props.children, ['Head.Group']) !== undefined;
       var columnIndex = 0;
       var groupIndex = 0;
       var gridColumnIndex = 1;
       var calculateGridTemplateColumn = this.calculateGridTemplateColumn.bind(this);
       var columns = [];
       var makeColumn = function makeColumn(columnElement, parent, isFirst, isLast) {
-        var _columnElement$props$, _ref3, _columnElement$props$2;
+        var _columnElement$props$, _ref5, _columnElement$props$2;
         var leftBordersFromParent = isFirst && ((parent === null || parent === void 0 ? void 0 : parent.props.borders) === 'both' || (parent === null || parent === void 0 ? void 0 : parent.props.borders) === 'left') ? 'left' : undefined;
         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 = {
@@ -407,34 +534,30 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           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,
+          borders: (_ref5 = (_columnElement$props$2 = columnElement.props.borders) !== null && _columnElement$props$2 !== void 0 ? _columnElement$props$2 : leftBordersFromParent) !== null && _ref5 !== void 0 ? _ref5 : rightBordersFromParent,
           parent: parent,
           flexWrap: columnElement.props.flexWrap,
           alignItems: columnElement.props.alignItems,
           alignContent: columnElement.props.alignContent,
           justifyContent: columnElement.props.justifyContent
         };
-
-        //       this.gridAreaColumnMap.set(
-        //         columnIndex,
-        //         `1 / ${gridColumnIndex} / ${hasGroup ? '3' : '2'} / ${gridColumnIndex + 1}`,
-        //       );
-        //       columnIndex++;
-        //       gridColumnIndex++;
-
         return column;
-        // columns.push(column);
       };
-
+      var childIsColumn = function childIsColumn(child) {
+        return child.type === Head.Column;
+      };
+      var childIsGroup = function childIsGroup(child) {
+        return child.type === Head.Group;
+      };
       React.Children.forEach(HeadComponent.props.children, function (child, i) {
         if (! /*#__PURE__*/React.isValidElement(child)) return;
-        if (child.type === Head.Column) {
+        if (childIsColumn(child)) {
           var col = makeColumn(child);
-          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(hasGroup ? '3' : '2', " / ").concat(gridColumnIndex + 1);
+          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(_this2.hasGroups ? '3' : '2', " / ").concat(gridColumnIndex + 1);
           columnIndex++;
           gridColumnIndex++;
           columns.push(col);
-        } else if (child.type === Head.Group) {
+        } else if (childIsGroup(child)) {
           var Group = child;
           var childCount = React.Children.count(child.props.children);
           var initGridColumn = gridColumnIndex;
@@ -462,82 +585,117 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         }
       });
       return columns.filter(Boolean);
-
-      // return Columns.map((c) => {
-      //   const column = {
-      //     name: c.props.name,
-      //     ref: (node: HTMLElement | null) => {
-      //       if (node) {
-      //         const calculatedWidth = node.getBoundingClientRect().width;
-      //         column.calculatedWidth = calculatedWidth;
-      //       }
-      //
-      //       return { current: node };
-      //     },
-      //     gridColumnWidth: calculateGridTemplateColumn(c),
-      //     fixed: c.props.fixed,
-      //     calculatedWidth: 0,
-      //   };
-      //
-      //   return column;
-      // });
-
-      // return columns;
     }
   }, {
-    key: "calculateRows",
-    value: function calculateRows() {
+    key: "calculateColumnsFromConfig",
+    value: function calculateColumnsFromConfig() {
       var _this3 = this;
-      var data = this.asProps.data;
-      var rows = [];
-      var rowIndex = 0;
-      var addToRows = function addToRows(row) {
-        var dtRow = Object.entries(row).reduce(function (acc, _ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2),
-            key = _ref5[0],
-            value = _ref5[1];
-          var columnsToRow = key.split(_this3.columnsSplitter);
-          if (columnsToRow.length === 1) {
-            acc[key] = value;
-          } else {
-            acc[columnsToRow[0]] = new MergedColumnsCell(value, columnsToRow.length);
-          }
-          if (row[ACCORDION]) {
-            acc[ACCORDION] = row[ACCORDION];
-          }
-          return acc;
-        }, {});
-        rows.push(dtRow);
-        rowIndex++;
+      var _this$props2 = this.props,
+        columns = _this$props2.columns,
+        data = _this$props2.data;
+      this.hasGroups = columns.some(function (column) {
+        return 'columns' in column;
+      });
+      var columnIndex = 0;
+      var groupIndex = 0;
+      var gridColumnIndex = 1;
+      var calculateGridTemplateColumn = this.calculateGridTemplateColumn.bind(this);
+      var calculatedColumns = [];
+      var treeColumns = [];
+      var makeColumn = function makeColumn(columnElement, parent, isFirst, isLast) {
+        var _columnElement$fixed, _ref6, _columnElement$border;
+        var leftBordersFromParent = isFirst && ((parent === null || parent === void 0 ? void 0 : parent.borders) === 'both' || (parent === null || parent === void 0 ? void 0 : parent.borders) === 'left') ? 'left' : undefined;
+        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({
+          name: childIsColumn(columnElement) ? columnElement.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;
+            }
+            if (this !== null && this !== void 0 && this.ref) {
+              this.ref.current = node;
+            }
+          },
+          gridColumnWidth: 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: (_ref6 = (_columnElement$border = columnElement.borders) !== null && _columnElement$border !== void 0 ? _columnElement$border : leftBordersFromParent) !== null && _ref6 !== void 0 ? _ref6 : rightBordersFromParent,
+          parent: parent
+        }, columnElement);
+        return column;
+      };
+      var childIsColumn = function childIsColumn(child) {
+        return !('columns' in child);
       };
-      data.forEach(function (row, rowIndex) {
-        var groupedRows = row[ROW_GROUP];
-        if (groupedRows) {
-          groupedRows.forEach(function (childRow, index) {
-            if (index === 0) {
-              var rowData = _objectSpread(_objectSpread({}, childRow), Object.entries(row).reduce(function (acc, _ref6) {
-                var _ref7 = _slicedToArray(_ref6, 2),
-                  key = _ref7[0],
-                  value = _ref7[1];
-                acc[key] = new MergedRowsCell(value, groupedRows.length);
-                return acc;
-              }, {}));
-              addToRows(rowData);
+      var childIsGroup = function childIsGroup(child) {
+        return 'columns' in child;
+      };
+      columns.forEach(function (child, i) {
+        if (childIsColumn(child)) {
+          var col = makeColumn(child);
+          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(_this3.hasGroups ? '3' : '2', " / ").concat(gridColumnIndex + 1);
+          columnIndex++;
+          gridColumnIndex++;
+          calculatedColumns.push(col);
+          treeColumns.push(col);
+        } else if (childIsGroup(child)) {
+          var Group = makeColumn(child);
+          var childCount = child.columns.length;
+          var initGridColumn = gridColumnIndex;
+          Group.columns = [];
+          Group.children = child.children;
+          child.columns.forEach(function (child, j) {
+            var _Group$columns;
+            var isFirst = j === 0;
+            var isLast = j === childCount - 1;
+            var col = makeColumn(child, Group, isFirst, isLast);
+            if (i === 0 && j === 0 && data.some(function (d) {
+              return d[ACCORDION];
+            })) {
+              gridColumnIndex++;
+              col.gridArea = "2 / ".concat(gridColumnIndex - 1, " / 3 / ").concat(gridColumnIndex + 1);
             } else {
-              addToRows(childRow);
+              col.gridArea = "2 / ".concat(gridColumnIndex, " / 3 / ").concat(gridColumnIndex + 1);
             }
+            col.gridArea = "2 / ".concat(gridColumnIndex, " / 3 / ").concat(gridColumnIndex + 1);
+            columnIndex++;
+            gridColumnIndex++;
+            calculatedColumns.push(col);
+            (_Group$columns = Group.columns) === null || _Group$columns === void 0 ? void 0 : _Group$columns.push(col);
           });
-        } else {
-          addToRows(row);
+          treeColumns.push(Group);
+          _this3.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
+          groupIndex++;
         }
       });
-      return rows;
+      return [calculatedColumns, treeColumns];
     }
   }, {
     key: "calculateGridTemplateColumn",
     value: function calculateGridTemplateColumn(c) {
-      var _c$props$gtcWidth;
-      return (_c$props$gtcWidth = c.props.gtcWidth) !== null && _c$props$gtcWidth !== void 0 ? _c$props$gtcWidth : this.props.defaultGridTemplateColumnWidth;
+      var _ref7;
+      return (_ref7 = /*#__PURE__*/React.isValidElement(c) ? c.props.gtcWidth : c.gtcWidth) !== null && _ref7 !== void 0 ? _ref7 : this.props.defaultGridTemplateColumnWidth;
+    }
+  }, {
+    key: "getTopScrollOffset",
+    value: function getTopScrollOffset() {
+      var _this$headerRef$curre;
+      var header = (_this$headerRef$curre = this.headerRef.current) === null || _this$headerRef$curre === void 0 ? void 0 : _this$headerRef$curre.children;
+      var height = 0;
+      for (var i = 0; i < ((_header$length = header === null || header === void 0 ? void 0 : header.length) !== null && _header$length !== void 0 ? _header$length : 0); i++) {
+        var _header$length, _header$item;
+        var columnHeight = header === null || header === void 0 ? void 0 : (_header$item = header.item(i)) === null || _header$item === void 0 ? void 0 : _header$item.getBoundingClientRect().height;
+        if (columnHeight) {
+          height = columnHeight;
+          break;
+        }
+      }
+      return height;
     }
   }]);
   return DataTableRoot;
@@ -548,7 +706,7 @@ _defineProperty(DataTableRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(lo
 _defineProperty(DataTableRoot, "defaultProps", {
   use: 'primary',
   defaultGridTemplateColumnWidth: 'auto',
-  h: 'auto'
+  defaultExpandedRows: []
 });
 export var DataTable = createComponent(DataTableRoot, {
   Head: Head,