@semcore/data-table 16.0.0-prerelease.15 → 16.0.0-prerelease.17

package/lib/cjs/components/Body/style.shadow.css

@@ -1,15 +1,25 @@
-SBody, SRow {
+SBody, SRow, SRowGroup {
   display: contents;
 }
 
-SBody[compact] SCell {
-  padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px);
+SBody[compact] {
+  SCell {
+    padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px);
+  }
+
+  SCell[data-aria-level] {
+    padding-left: calc(var(--intergalactic-spacing-2x, 8px) + (var(--intergalactic-spacing-5x, 20px) * (var(--data-aria-level) - 1)));
+  }
 }
 
 SRow[gridArea], SCell[gridArea], SCollapseRow[gridArea] {
   grid-area: var(--gridArea);
 }
 
+SCollapseRow SCell {
+  display: block;
+}
+
 /* DEFAULT THEME */
 SRow[active] > SCell:not([theme]) {
   /* The color is hardcoded because need hex(in figma rgba) */
@@ -17,10 +27,65 @@ SRow[active] > SCell:not([theme]) {
   background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
 }
 
-SRow:hover > SCell:not([theme]) {
-  /* The color is hardcoded because need hex(in figma rgba) */
-  /* disable-tokens-validator */
-  background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
+/* we need a media query here because of the postcssHoverMediaFeature plugin. it doesn't handle this type of selectors correctly */
+@media (hover: hover) {
+  SRow:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
+  }
+
+  /* MUTED THEME */
+  SRow:hover > SCell[theme='muted'],
+  SRow[theme='muted']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='muted'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='muted'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='muted'],
+  SRowGroup:has(SCell:hover) > SRow[theme='muted'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    /* The color is hardcoded because need hex(in figma rgba) */
+    /* disable-tokens-validator */
+    background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
+  }
+
+  /* INFO THEME */
+  SRow:hover > SCell[theme='info'],
+  SRow[theme='info']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='info'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='info'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='info'],
+  SRowGroup:has(SCell:hover) > SRow[theme='info'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-selected-hover, #c4e5fe);
+  }
+
+  /* SUCCESS THEME */
+  SRow:hover > SCell[theme='success'],
+  SRow[theme='success']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='success'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='success'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='success'],
+  SRowGroup:has(SCell:hover) > SRow[theme='success'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-new-hover, #9ef2c9);
+  }
+
+  /* WARNING THEME */
+  SRow:hover > SCell[theme='warning'],
+  SRow[theme='warning']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='warning'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='warning'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='warning'],
+  SRowGroup:has(SCell:hover) > SRow[theme='warning'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-warning-hover, #ffdca2);
+  }
+
+  /* DANGER THEME */
+  SRow:hover > SCell[theme='danger'],
+  SRow[theme='danger']:hover > SCell:not([theme]),
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow > SCell[theme='danger'],
+  SRowGroup:has(SCell[data-grouped-by='rowgroup']:hover) > SRow[theme='danger'] > SCell:not([theme]),
+  SRowGroup:has(SCell:hover) > SRow > SCell[data-grouped-by='rowgroup'][theme='danger'],
+  SRowGroup:has(SCell:hover) > SRow[theme='danger'] > SCell[data-grouped-by='rowgroup']:not([theme]) {
+    background-color: var(--intergalactic-table-td-cell-critical-hover, #ffd7df);
+  }
 }
 
 /* MUTED THEME */
@@ -34,13 +99,6 @@ SRow[theme='muted'][active] > SCell:not([theme]) {
   background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
 }
 
-SRow:hover > SCell[theme='muted'],
-SRow[theme='muted']:hover > SCell:not([theme]) {
-  /* The color is hardcoded because need hex(in figma rgba) */
-  /* disable-tokens-validator */
-  background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
-}
-
 /* INFO THEME */
 SRow[theme='info'] SCell:not([theme]) {
   background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
@@ -50,11 +108,6 @@ SRow[theme='info'][active] > SCell:not([theme]) {
   background-color: var(--intergalactic-table-td-cell-selected-active, #c4e5fe);
 }
 
-SRow:hover > SCell[theme='info'],
-SRow[theme='info']:hover > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-selected-hover, #c4e5fe);
-}
-
 /* SUCCESS THEME */
 SRow[theme='success'] SCell:not([theme]) {
   background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
@@ -64,11 +117,6 @@ SRow[theme='success'][active] > SCell:not([theme]) {
   background-color: var(--intergalactic-table-td-cell-new-active, #9ef2c9);
 }
 
-SRow:hover > SCell[theme='success'],
-SRow[theme='success']:hover > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-new-hover, #9ef2c9);
-}
-
 /* WARNING THEME */
 SRow[theme='warning'] SCell:not([theme]) {
   background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
@@ -78,11 +126,6 @@ SRow[theme='warning'][active] > SCell:not([theme]) {
   background-color: var(--intergalactic-table-td-cell-warning-active, #ffdca2);
 }
 
-SRow:hover > SCell[theme='warning'],
-SRow[theme='warning']:hover > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-warning-hover, #ffdca2);
-}
-
 /* DANGER THEME */
 SRow[theme='danger'] SCell:not([theme]) {
   background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
@@ -92,11 +135,6 @@ SRow[theme='danger'][active] > SCell:not([theme]) {
   background-color: var(--intergalactic-table-td-cell-critical-active, #ffd7df);
 }
 
-SRow:hover > SCell[theme='danger'],
-SRow[theme='danger']:hover > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-critical-hover, #ffd7df);
-}
-
 SCell {
   display: flex;
   height: 100%;
@@ -113,6 +151,7 @@ SCell {
   outline: none;
 
   SAccordionToggle {
+    margin-right: var(--intergalactic-spacing-3x, 12px);
     transition: transform calc(var(--intergalactic-duration-accordion, 200) * 1ms) ease-out;
 
     &[expanded] {
@@ -127,7 +166,7 @@ SCell[use='primary'] {
   background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
 
   &[data-aria-level] {
-    padding-left: calc(var(--intergalactic-spacing-3x, 12px) + (var(--intergalactic-spacing-5x, 20px) * (var(--data-aria-level) - 1)));
+    padding-left: calc(var(--intergalactic-spacing-3x, 12px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-2x, 8px)) * (var(--data-aria-level) - 1)));
   }
 }
 
@@ -137,7 +176,7 @@ SCell[use='secondary'] {
   background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
 
   &[data-aria-level] {
-    padding-left: calc(var(--intergalactic-spacing-2x, 8px) + (var(--intergalactic-spacing-5x, 20px) * (var(--data-aria-level) - 1)));
+    padding-left: calc(var(--intergalactic-spacing-2x, 8px) + ((var(--intergalactic-spacing-5x, 20px) + var(--intergalactic-spacing-2x, 8px)) * (var(--data-aria-level) - 1)));
   }
 }
 

package/lib/cjs/components/DataTable/DataTable.js

@@ -5,9 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DataTable = exports.ACCORDION = void 0;
+exports.ROW_GROUP = exports.DataTable = exports.ACCORDION = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -20,15 +21,14 @@ var _baseComponents = require("@semcore/base-components");
 var _Head = require("../Head/Head");
 var _Body = require("../Body/Body");
 var _useFocusLock = require("@semcore/core/lib/utils/use/useFocusLock");
-var _syncScroll = _interopRequireDefault(require("@semcore/core/lib/utils/syncScroll"));
 var _utils = require("../../utils");
 var _findComponent = _interopRequireDefault(require("@semcore/core/lib/utils/findComponent"));
 var _intergalacticDynamicLocales = require("../../translations/__intergalactic-dynamic-locales");
 var _i18nEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/i18nEnhance"));
 var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
-var _index = require("../../index");
 var _MergedCells = require("../Body/MergedCells");
 var _ref8 = require("@semcore/core/lib/utils/ref");
+var _hasParent = require("@semcore/core/lib/utils/hasParent");
 /*__reshadow-styles__:"./dataTable.shadow.css"*/
 var style = ( /*__reshadow_css_start__*/_core.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_",
@@ -38,13 +38,16 @@ var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_star
   "--gridTemplateAreas": "--gridTemplateAreas_1yoby"
 });
 /*__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
-var scrollStyles = ( /*__reshadow_css_start__*/_core.sstyled.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__*/_core.sstyled.insert( /*__inner_css_start__*/".___SScrollArea_14dz4_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_14dz4_gg_ .___SShadowVertical_14dz4_gg_:before{display:none}.___SScrollArea_14dz4_gg_ .___SShadowHorizontal_14dz4_gg_:after,.___SScrollArea_14dz4_gg_ .___SShadowHorizontal_14dz4_gg_:before,.___SScrollArea_14dz4_gg_ .___SShadowVertical_14dz4_gg_:after{z-index:2}" /*__inner_css_end__*/, "14dz4_gg_") /*__reshadow_css_end__*/, {
+  "__SScrollArea": "___SScrollArea_14dz4_gg_",
+  "__SShadowVertical": "___SShadowVertical_14dz4_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_14dz4_gg_"
 });
 var ACCORDION = Symbol('accordion');
 exports.ACCORDION = ACCORDION;
+var ROW_GROUP = Symbol('ROW_GROUP');
+exports.ROW_GROUP = ROW_GROUP;
+var SCROLL_BAR_HEIGHT = 12;
 var DataTableRoot = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(DataTableRoot, _Component);
   var _super = (0, _createSuper2["default"])(DataTableRoot);
@@ -58,8 +61,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "tableContainerRef", /*#__PURE__*/React.createRef());
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "tableRef", /*#__PURE__*/React.createRef());
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "headerRef", /*#__PURE__*/React.createRef());
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollBodyRef", void 0);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "scrollHeadRef", void 0);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "spinnerRef", /*#__PURE__*/React.createRef());
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "gridAreaGroupMap", new Map());
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getRow", function (index) {
       var _this$tableRef$curren;
@@ -72,6 +74,16 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       });
       return hasFocusable;
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_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((0, _toConsumableArray2["default"])(expandedRows), [expandedRowIndex]));
+      }
+    });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeFocusCell", function (rowIndex, colIndex, direction) {
       var _this$tableRef$curren2, _this$tableRef$curren3;
       var hasFocusable = _this.hasFocusableInHeader();
@@ -174,7 +186,11 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleFocus", function (e) {
-      if ((!e.relatedTarget || !(0, _useFocusLock.isFocusInside)(e.currentTarget, e.relatedTarget)) && _core.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 || !(0, _useFocusLock.isFocusInside)(e.currentTarget, e.relatedTarget)) && _core.lastInteraction.isKeyboard()) {
         var _row;
         if (_this.focusedCell[0] === -1 && _this.focusedCell[1] === -1) {
           _this.initFocusableCell();
@@ -187,7 +203,13 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         }
         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 ((0, _hasParent.hasParent)(e.target, cell)) {
+            e.target.focus();
+          } else {
+            cell.focus();
+          }
+        }
         e.currentTarget.setAttribute('tabIndex', '-1');
       }
     });
@@ -202,14 +224,17 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseMove", function () {
       _this.setInert(false);
     });
-    var createRef = (0, _syncScroll["default"])();
-    // first create body ref for master scroll
-    _this.scrollBodyRef = createRef('body');
-    _this.scrollHeadRef = createRef('head');
     _this.columns = _this.calculateColumns();
     return _this;
   }
   (0, _createClass2["default"])(DataTableRoot, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        expandedRows: []
+      };
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.forceUpdate();
@@ -217,8 +242,21 @@ 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 _this2 = this;
+      var _this$asProps = this.asProps,
+        totalRows = _this$asProps.totalRows,
+        expandedRows = _this$asProps.expandedRows;
+      var expandedRowsCount = expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.reduce(function (acc, rowIndex) {
+        var dtRow = _this2.calculateRows().flat()[rowIndex];
+        var expandedRows = dtRow[ACCORDION];
+        if (Array.isArray(expandedRows)) {
+          acc = acc + expandedRows.length;
+        } else {
+          acc = acc + 1;
+        }
+        return acc;
+      }, 0);
+      return (totalRows !== null && totalRows !== void 0 ? totalRows : this.calculateRows().length) + expandedRowsCount;
     }
   }, {
     key: "gridSettings",
@@ -237,13 +275,13 @@ 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;
       var _this$gridSettings = this.gridSettings,
         gridTemplateColumns = _this$gridSettings.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings.gridTemplateAreas;
@@ -266,11 +304,12 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     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 _this$asProps3 = this.asProps,
+        use = _this$asProps3.use,
+        compact = _this$asProps3.compact,
+        loading = _this$asProps3.loading,
+        getI18nText = _this$asProps3.getI18nText,
+        expandedRows = _this$asProps3.expandedRows;
       var rows = this.calculateRows();
       var _this$gridSettings2 = this.gridSettings,
         gridTemplateColumns = _this$gridSettings2.gridTemplateColumns,
@@ -286,17 +325,17 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       return {
         columns: this.columns,
         rows: rows,
+        flatRows: rows.flat(),
         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
+        getI18nText: getI18nText,
+        expandedRows: expandedRows,
+        onExpandRow: this.onExpandRow,
+        spinnerRef: this.spinnerRef
       };
     }
   }, {
@@ -318,16 +357,15 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       var _ref = this.asProps,
         _ref2;
       var SDataTable = _baseComponents.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,
-        loading = _this$asProps3.loading;
+      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;
       var _getScrollOffsetValue = (0, _utils.getScrollOffsetValue)(this.columns),
         _getScrollOffsetValue2 = (0, _slicedToArray2["default"])(_getScrollOffsetValue, 2),
         offsetLeftSum = _getScrollOffsetValue2[0],
@@ -336,13 +374,14 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         gridTemplateColumns = _this$gridSettings3.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings3.gridTemplateAreas;
       var Head = (0, _findComponent["default"])(Children, ['DataTable.Head']);
-      var Body = (0, _findComponent["default"])(Children, ['DataTable.Body']);
+      var topOffset = Head !== null && Head !== void 0 && Head.props.sticky || Head !== null && Head !== void 0 && Head.props.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;
       return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/React.createElement(_baseComponents.ScrollArea, _ref2.cn("ScrollArea", {
         "leftOffset": offsetLeftSum,
         "rightOffset": offsetRightSum,
+        "topOffset": topOffset,
         "w": width,
         "wMax": wMax,
         "wMin": wMin,
@@ -374,16 +413,22 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         "use:h": undefined,
         "use:hMax": undefined,
         "use:hMin": undefined
-      }, _ref))), Body, Head)), /*#__PURE__*/React.createElement(_baseComponents.ScrollArea.Bar, {
-        orientation: "horizontal"
+      }, _ref))), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})))), (Head === null || Head === void 0 ? void 0 : Head.props.withScrollBar) && topOffset && /*#__PURE__*/React.createElement(_baseComponents.ScrollArea.Bar, {
+        orientation: "horizontal",
+        top: topOffset - SCROLL_BAR_HEIGHT,
+        zIndex: 3
+      }), /*#__PURE__*/React.createElement(_baseComponents.ScrollArea.Bar, {
+        orientation: "horizontal",
+        zIndex: 2
       }), /*#__PURE__*/React.createElement(_baseComponents.ScrollArea.Bar, {
-        orientation: "vertical"
+        orientation: "vertical",
+        zIndex: 2
       }));
     }
   }, {
     key: "calculateColumns",
     value: function calculateColumns() {
-      var _this2 = this;
+      var _this3 = this;
       var _this$props = this.props,
         children = _this$props.children,
         data = _this$props.data;
@@ -421,27 +466,23 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           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.Head.Column;
+      };
+      var childIsGroup = function childIsGroup(child) {
+        return child.type === _Head.Head.Group;
+      };
       React.Children.forEach(HeadComponent.props.children, function (child, i) {
         if (! /*#__PURE__*/React.isValidElement(child)) return;
-        if (child.type === _Head.Head.Column) {
+        if (childIsColumn(child)) {
           var col = makeColumn(child);
           col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(hasGroup ? '3' : '2', " / ").concat(gridColumnIndex + 1);
           columnIndex++;
           gridColumnIndex++;
           columns.push(col);
-        } else if (child.type === _Head.Head.Group) {
+        } else if (childIsGroup(child)) {
           var Group = child;
           var childCount = React.Children.count(child.props.children);
           var initGridColumn = gridColumnIndex;
@@ -464,78 +505,69 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
               columns.push(_col);
             }
           });
-          _this2.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
+          _this3.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
           groupIndex++;
         }
       });
       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() {
-      var _this3 = this;
+      var _this4 = this;
       var data = this.asProps.data;
       var rows = [];
       var rowIndex = 0;
-      var addToRows = function addToRows(row) {
+      var makeDtRow = function makeDtRow(row) {
         var dtRow = Object.entries(row).reduce(function (acc, _ref4) {
           var _ref5 = (0, _slicedToArray2["default"])(_ref4, 2),
             key = _ref5[0],
             value = _ref5[1];
-          var columnsToRow = key.split(_this3.columnsSplitter);
+          var columnsToRow = key.split(_this4.columnsSplitter);
           if (columnsToRow.length === 1) {
-            acc[key] = value;
+            acc[key] = value !== null && value !== void 0 ? value : '';
           } else {
-            acc[columnsToRow[0]] = new _MergedCells.MergedColumnsCell(value, columnsToRow.length);
+            acc[columnsToRow[0]] = new _MergedCells.MergedColumnsCell(value, {
+              dataKey: key,
+              size: columnsToRow.length
+            });
           }
           if (row[ACCORDION]) {
             acc[ACCORDION] = row[ACCORDION];
           }
           return acc;
         }, {});
-        rows.push(dtRow);
-        rowIndex++;
+        return dtRow;
       };
-      data.forEach(function (row, rowIndex) {
-        var groupedRows = row[_index.ROW_GROUP];
+      data.forEach(function (row) {
+        var groupedRows = row[ROW_GROUP];
+        var fromRow = rowIndex + 2; // 1 - for header, 1 - because start not from 0, but from 1
+
         if (groupedRows) {
+          var toRow = fromRow + groupedRows.length;
+          var innerRows = [];
           groupedRows.forEach(function (childRow, index) {
+            var dtRow;
             if (index === 0) {
               var rowData = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, childRow), Object.entries(row).reduce(function (acc, _ref6) {
                 var _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
                   key = _ref7[0],
                   value = _ref7[1];
-                acc[key] = new _MergedCells.MergedRowsCell(value, groupedRows.length);
+                acc[key] = new _MergedCells.MergedRowsCell(value, [fromRow, toRow]);
                 return acc;
               }, {}));
-              addToRows(rowData);
+              dtRow = makeDtRow(rowData);
             } else {
-              addToRows(childRow);
+              dtRow = makeDtRow(childRow);
             }
+            innerRows.push(dtRow);
+            rowIndex++;
           });
+          rows.push(innerRows);
         } else {
-          addToRows(row);
+          var dtRow = makeDtRow(row);
+          rows.push(dtRow);
+          rowIndex++;
         }
       });
       return rows;
@@ -546,6 +578,22 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       var _c$props$gtcWidth;
       return (_c$props$gtcWidth = c.props.gtcWidth) !== null && _c$props$gtcWidth !== void 0 ? _c$props$gtcWidth : 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;
 }(_core.Component);
@@ -555,7 +603,8 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
 (0, _defineProperty2["default"])(DataTableRoot, "defaultProps", {
   use: 'primary',
   defaultGridTemplateColumnWidth: 'auto',
-  h: 'auto'
+  h: 'auto',
+  defaultExpandedRows: []
 });
 var DataTable = (0, _core.createComponent)(DataTableRoot, {
   Head: _Head.Head,