@semcore/data-table 16.5.1 → 16.5.2

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UNIQ_ROW_KEY = exports.SELECT_ALL = exports.ROW_INDEX = exports.ROW_GROUP = exports.IS_EMPTY_DATA_ROW = exports.GRID_ROW_INDEX = exports.DataTable = exports.ACCORDION = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
@@ -31,38 +32,38 @@ var _Body = require("../Body/Body");
 var _MergedCells = require("../Body/MergedCells");
 var _Head = require("../Head/Head");
 /*!__reshadow-styles__:"./dataTable.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDataTable_1hg6h_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content;grid-auto-rows:min-content}.___SDataTable_1hg6h_gg_.__isDataEmpty_1hg6h_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_1hg6h_gg_.__gridTemplateColumns_1hg6h_gg_{grid-template-columns:var(--gridTemplateColumns_1hg6h)}.___SDataTable_1hg6h_gg_.__gridTemplateAreas_1hg6h_gg_{grid-template-areas:var(--gridTemplateAreas_1hg6h)}.___SDataTable_1hg6h_gg_.__gridTemplateRows_1hg6h_gg_{grid-template-rows:var(--gridTemplateRows_1hg6h)}", /*__inner_css_end__*/"1hg6h_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDataTable_c7yb1_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content;grid-auto-rows:min-content}.___SDataTable_c7yb1_gg_.__isDataEmpty_c7yb1_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_c7yb1_gg_.__gridTemplateColumns_c7yb1_gg_{grid-template-columns:var(--gridTemplateColumns_c7yb1)}.___SDataTable_c7yb1_gg_.__gridTemplateAreas_c7yb1_gg_{grid-template-areas:var(--gridTemplateAreas_c7yb1)}.___SDataTable_c7yb1_gg_.__gridTemplateRows_c7yb1_gg_{grid-template-rows:var(--gridTemplateRows_c7yb1)}", /*__inner_css_end__*/"c7yb1_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SDataTable": "___SDataTable_1hg6h_gg_",
-  "_isDataEmpty": "__isDataEmpty_1hg6h_gg_",
-  "_gridTemplateColumns": "__gridTemplateColumns_1hg6h_gg_",
-  "--gridTemplateColumns": "--gridTemplateColumns_1hg6h",
-  "_gridTemplateAreas": "__gridTemplateAreas_1hg6h_gg_",
-  "--gridTemplateAreas": "--gridTemplateAreas_1hg6h",
-  "_gridTemplateRows": "__gridTemplateRows_1hg6h_gg_",
-  "--gridTemplateRows": "--gridTemplateRows_1hg6h"
+  "__SDataTable": "___SDataTable_c7yb1_gg_",
+  "_isDataEmpty": "__isDataEmpty_c7yb1_gg_",
+  "_gridTemplateColumns": "__gridTemplateColumns_c7yb1_gg_",
+  "--gridTemplateColumns": "--gridTemplateColumns_c7yb1",
+  "_gridTemplateAreas": "__gridTemplateAreas_c7yb1_gg_",
+  "--gridTemplateAreas": "--gridTemplateAreas_c7yb1",
+  "_gridTemplateRows": "__gridTemplateRows_c7yb1_gg_",
+  "--gridTemplateRows": "--gridTemplateRows_c7yb1"
 });
 /*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
-var scrollStyles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SScrollArea_s36b2_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_s36b2_gg_ .___SContainer_s36b2_gg_{overflow:visible;overflow:initial}.___SScrollArea_s36b2_gg_ .___SContainer_s36b2_gg_._scrollDirection_both_s36b2_gg_{overflow:auto}.___SScrollArea_s36b2_gg_ .___SContainer_s36b2_gg_._scrollDirection_both_s36b2_gg_.__loading_s36b2_gg_,.___SScrollArea_s36b2_gg_ .___SContainer_s36b2_gg_._scrollDirection_horizontal_s36b2_gg_.__loading_s36b2_gg_,.___SScrollArea_s36b2_gg_ .___SContainer_s36b2_gg_._scrollDirection_vertical_s36b2_gg_.__loading_s36b2_gg_{overflow:hidden}.___SScrollArea_s36b2_gg_ .___SContainer_s36b2_gg_._scrollDirection_horizontal_s36b2_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_s36b2_gg_ .___SContainer_s36b2_gg_._scrollDirection_vertical_s36b2_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_s36b2_gg_ .___SContainer_s36b2_gg_.__headerHeight_s36b2_gg_{scroll-padding-top:var(--headerHeight_s36b2)}.___SScrollArea_s36b2_gg_ .___SContainer_s36b2_gg_.__leftScrollPadding_s36b2_gg_{scroll-padding-left:var(--leftScrollPadding_s36b2)}.___SScrollArea_s36b2_gg_ .___SContainer_s36b2_gg_.__rightScrollPadding_s36b2_gg_{scroll-padding-right:var(--rightScrollPadding_s36b2)}.___SScrollArea_s36b2_gg_ .___SShadowHorizontal_s36b2_gg_::before,.___SScrollArea_s36b2_gg_ .___SShadowHorizontal_s36b2_gg_:after,.___SScrollArea_s36b2_gg_ .___SShadowVertical_s36b2_gg_::after{z-index:20}.___SScrollArea_s36b2_gg_ .___SShadowHorizontal_s36b2_gg_.__leftOffset_s36b2_gg_::before,.___SScrollArea_s36b2_gg_ .___SShadowHorizontal_s36b2_gg_.__rightOffset_s36b2_gg_::after,.___SScrollArea_s36b2_gg_ .___SShadowVertical_s36b2_gg_::before{display:none}", /*__inner_css_end__*/"s36b2_gg_"),
+var scrollStyles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SScrollArea_11r6k_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_11r6k_gg_ .___SContainer_11r6k_gg_{overflow:visible;overflow:initial}.___SScrollArea_11r6k_gg_ .___SContainer_11r6k_gg_._scrollDirection_both_11r6k_gg_{overflow:auto}.___SScrollArea_11r6k_gg_ .___SContainer_11r6k_gg_._scrollDirection_both_11r6k_gg_.__loading_11r6k_gg_,.___SScrollArea_11r6k_gg_ .___SContainer_11r6k_gg_._scrollDirection_horizontal_11r6k_gg_.__loading_11r6k_gg_,.___SScrollArea_11r6k_gg_ .___SContainer_11r6k_gg_._scrollDirection_vertical_11r6k_gg_.__loading_11r6k_gg_{overflow:hidden}.___SScrollArea_11r6k_gg_ .___SContainer_11r6k_gg_._scrollDirection_horizontal_11r6k_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_11r6k_gg_ .___SContainer_11r6k_gg_._scrollDirection_vertical_11r6k_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_11r6k_gg_ .___SContainer_11r6k_gg_.__headerHeight_11r6k_gg_{scroll-padding-top:var(--headerHeight_11r6k)}.___SScrollArea_11r6k_gg_ .___SContainer_11r6k_gg_.__leftScrollPadding_11r6k_gg_{scroll-padding-left:var(--leftScrollPadding_11r6k)}.___SScrollArea_11r6k_gg_ .___SContainer_11r6k_gg_.__rightScrollPadding_11r6k_gg_{scroll-padding-right:var(--rightScrollPadding_11r6k)}.___SScrollArea_11r6k_gg_ .___SShadowHorizontal_11r6k_gg_::before,.___SScrollArea_11r6k_gg_ .___SShadowHorizontal_11r6k_gg_:after,.___SScrollArea_11r6k_gg_ .___SShadowVertical_11r6k_gg_::after{z-index:20}.___SScrollArea_11r6k_gg_ .___SShadowHorizontal_11r6k_gg_.__leftOffset_11r6k_gg_::before,.___SScrollArea_11r6k_gg_ .___SShadowHorizontal_11r6k_gg_.__rightOffset_11r6k_gg_::after,.___SScrollArea_11r6k_gg_ .___SShadowVertical_11r6k_gg_::before{display:none}", /*__inner_css_end__*/"11r6k_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SScrollArea": "___SScrollArea_s36b2_gg_",
-  "__SContainer": "___SContainer_s36b2_gg_",
-  "_scrollDirection_both": "_scrollDirection_both_s36b2_gg_",
-  "_loading": "__loading_s36b2_gg_",
-  "_scrollDirection_horizontal": "_scrollDirection_horizontal_s36b2_gg_",
-  "_scrollDirection_vertical": "_scrollDirection_vertical_s36b2_gg_",
-  "_headerHeight": "__headerHeight_s36b2_gg_",
-  "--headerHeight": "--headerHeight_s36b2",
-  "_leftScrollPadding": "__leftScrollPadding_s36b2_gg_",
-  "--leftScrollPadding": "--leftScrollPadding_s36b2",
-  "_rightScrollPadding": "__rightScrollPadding_s36b2_gg_",
-  "--rightScrollPadding": "--rightScrollPadding_s36b2",
-  "__SShadowVertical": "___SShadowVertical_s36b2_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_s36b2_gg_",
-  "_leftOffset": "__leftOffset_s36b2_gg_",
-  "_rightOffset": "__rightOffset_s36b2_gg_"
+  "__SScrollArea": "___SScrollArea_11r6k_gg_",
+  "__SContainer": "___SContainer_11r6k_gg_",
+  "_scrollDirection_both": "_scrollDirection_both_11r6k_gg_",
+  "_loading": "__loading_11r6k_gg_",
+  "_scrollDirection_horizontal": "_scrollDirection_horizontal_11r6k_gg_",
+  "_scrollDirection_vertical": "_scrollDirection_vertical_11r6k_gg_",
+  "_headerHeight": "__headerHeight_11r6k_gg_",
+  "--headerHeight": "--headerHeight_11r6k",
+  "_leftScrollPadding": "__leftScrollPadding_11r6k_gg_",
+  "--leftScrollPadding": "--leftScrollPadding_11r6k",
+  "_rightScrollPadding": "__rightScrollPadding_11r6k_gg_",
+  "--rightScrollPadding": "--rightScrollPadding_11r6k",
+  "__SShadowVertical": "___SShadowVertical_11r6k_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_11r6k_gg_",
+  "_leftOffset": "__leftOffset_11r6k_gg_",
+  "_rightOffset": "__rightOffset_11r6k_gg_"
 });
 var ACCORDION = exports.ACCORDION = Symbol('accordion');
 var ROW_GROUP = exports.ROW_GROUP = Symbol('ROW_GROUP');
@@ -105,7 +106,8 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       scrollTop: 0,
       scrollDirection: 'down',
       selectAllMessage: '',
-      shadowVertical: ''
+      shadowVertical: '',
+      expandedRows: new Set()
     });
     (0, _defineProperty2["default"])(_this, "handleDocumentScroll", (0, _rafTrottle["default"])(function () {
       var _headerProps$top, _this$scrollAreaRef$c;
@@ -221,9 +223,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2["default"])(_this, "onExpandRow", function (expandedRow) {
       var _this$asProps2 = _this.asProps,
-        expandedRows = _this$asProps2.expandedRows,
         onAccordionToggle = _this$asProps2.onAccordionToggle,
         accordionMode = _this$asProps2.accordionMode;
+      var expandedRows = _this.state.expandedRows;
       if (expandedRows.has(expandedRow[UNIQ_ROW_KEY])) {
         expandedRows["delete"](expandedRow[UNIQ_ROW_KEY]);
         onAccordionToggle === null || onAccordionToggle === void 0 || onAccordionToggle('close', expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
@@ -282,8 +284,10 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       } else if (cell === null && currentCell instanceof HTMLElement) {
         var rowI = rowIndex;
         var colI = colIndex;
+        var colspan = Number(currentCell.getAttribute('aria-colspan'));
+        var rowspan = Number(currentCell.getAttribute('aria-rowspan'));
         if (direction === 'left' || direction === 'right') {
-          var _currentCell$parentEl, _currentCell$parentEl2, _row$children;
+          var _currentCell$parentEl;
           // 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 || (_currentCell$parentEl = _currentCell$parentEl.parentElement) === null || _currentCell$parentEl === void 0 ? void 0 : _currentCell$parentEl.dataset.uiName) === 'Collapse') {
             return;
@@ -292,26 +296,23 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           if ((limit === null || limit === void 0 ? void 0 : limit.fromRow) !== undefined && limit.fromColumn === undefined && newCol === limit.fromRow) {
             return;
           }
-          // left/right
-          if (currentCell.dataset.groupedBy === 'colgroup' || Number((_currentCell$parentEl2 = currentCell.parentElement) === null || _currentCell$parentEl2 === void 0 || (_currentCell$parentEl2 = _currentCell$parentEl2.parentElement) === null || _currentCell$parentEl2 === void 0 ? void 0 : _currentCell$parentEl2.getAttribute('aria-rowindex')) === 2 || currentCell.parentElement && Array.from((_row$children = row === null || row === void 0 ? void 0 : row.children) !== null && _row$children !== void 0 ? _row$children : []).indexOf(currentCell.parentElement) > 0) {
-            if (direction === 'right' && (limit === null || limit === void 0 ? void 0 : limit.fromColumn) !== undefined) {
-              if (newCol > limit.fromColumn) return;
-              rowI = direction === 'right' ? rowI - 1 : rowI;
-            } else {
-              colI = direction === 'left' ? colI - 1 : colI + 1;
-            }
-          } else if (direction === 'right' && ((limit === null || limit === void 0 ? void 0 : limit.fromColumn) !== undefined || (limit === null || limit === void 0 ? void 0 : limit.fromRow) !== undefined)) {
-            if (newCol === limit.fromColumn) {
+          var hasRowSpanUpper = row instanceof HTMLElement && Number(row.dataset.filledColumns) < _this.columns.length;
+          if (colspan > 0) {
+            if (direction === 'right' && (limit === null || limit === void 0 ? void 0 : limit.fromColumn) !== undefined && newCol === limit.fromColumn) {
               rowI = rowI - 1;
             } else {
-              return;
+              colI = direction === 'left' ? colI - colspan + 1 : colI + colspan - 1;
             }
-          } else {
+          } else if (hasRowSpanUpper || direction === 'right' && ((limit === null || limit === void 0 ? void 0 : limit.fromColumn) !== undefined || (limit === null || limit === void 0 ? void 0 : limit.fromRow) !== undefined)) {
             rowI = rowI - 1;
+          } else {
+            colI = direction === 'left' ? colI - 1 : colI + 1;
           }
         } else if (direction === 'up' || direction === 'down') {
           // top/bottom
-          if (currentCell.dataset.groupedBy === 'rowgroup' || Number(currentCell.getAttribute('aria-colindex')) === 1) {
+          if (rowspan > 0) {
+            rowI = direction === 'up' ? rowI - rowspan + 1 : rowI + rowspan - 1;
+          } else if (Number(currentCell.getAttribute('aria-colindex')) === 1) {
             rowI = direction === 'up' ? rowI - 1 : rowI + 1;
           } else {
             var _limit$fromRow;
@@ -319,7 +320,12 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
             if (areLimitsDefined && newRow > ((_limit$fromRow = limit === null || limit === void 0 ? void 0 : limit.fromRow) !== null && _limit$fromRow !== void 0 ? _limit$fromRow : 0) + 1) {
               return;
             }
-            colI = colI - 1;
+            var _hasRowSpanUpper = row instanceof HTMLElement && currentRow instanceof HTMLElement && row.dataset.filledColumns !== currentRow.dataset.filledColumns;
+            if (direction === 'up' && _hasRowSpanUpper) {
+              rowI = rowI - 1;
+            } else {
+              colI = colI - 1;
+            }
           }
         }
         _this.changeFocusCell(rowI, colI, direction);
@@ -591,8 +597,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       var _this$asProps5 = this.asProps,
         data = _this$asProps5.data,
         selectedRows = _this$asProps5.selectedRows,
-        columns = _this$asProps5.columns,
-        loading = _this$asProps5.loading;
+        columns = _this$asProps5.columns;
       if (prevProps.columns !== columns) {
         var cols = this.calculateColumnsFromConfig();
         this.columns = cols[0];
@@ -625,20 +630,19 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$asProps$expande;
+      var _this$state$expandedR;
       if ((0, _canUseDOM["default"])()) {
         document.removeEventListener('scroll', this.handleDocumentScroll);
       }
-      (_this$asProps$expande = this.asProps.expandedRows) === null || _this$asProps$expande === void 0 || _this$asProps$expande.clear();
+      (_this$state$expandedR = this.state.expandedRows) === null || _this$state$expandedR === void 0 || _this$state$expandedR.clear();
     }
   }, {
     key: "totalRows",
     get: function get() {
-      var _this$asProps6 = this.asProps,
-        totalRows = _this$asProps6.totalRows,
-        expandedRows = _this$asProps6.expandedRows;
+      var totalRows = this.asProps.totalRows;
       var flatRows = this.getFlatRows();
-      var expandedRowsCount = Array.from(expandedRows !== null && expandedRows !== void 0 ? expandedRows : []).reduce(function (acc, rowKey) {
+      var expandedRows = this.state.expandedRows;
+      var expandedRowsCount = Array.from(expandedRows).reduce(function (acc, rowKey) {
         var dtRow = flatRows.find(function (el) {
           return el[UNIQ_ROW_KEY] === rowKey;
         });
@@ -668,11 +672,11 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "scrollDirection",
     get: function get() {
-      var _this$asProps7 = this.asProps,
-        w = _this$asProps7.w,
-        wMax = _this$asProps7.wMax,
-        h = _this$asProps7.h,
-        hMax = _this$asProps7.hMax;
+      var _this$asProps6 = this.asProps,
+        w = _this$asProps6.w,
+        wMax = _this$asProps6.wMax,
+        h = _this$asProps6.h,
+        hMax = _this$asProps6.hMax;
       var scrollDirection = undefined;
       var hasWidthSettings = Boolean(w) || Boolean(wMax);
       var hasHeightSettings = Boolean(h) && h !== 'fit-content' || Boolean(hMax);
@@ -694,18 +698,18 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     key: "getHeadProps",
     value: function getHeadProps() {
       var _this3 = this;
-      var _this$asProps8 = this.asProps,
-        use = _this$asProps8.use,
-        compact = _this$asProps8.compact,
-        sort = _this$asProps8.sort,
-        onSortChange = _this$asProps8.onSortChange,
-        getI18nText = _this$asProps8.getI18nText,
-        uid = _this$asProps8.uid,
-        headerProps = _this$asProps8.headerProps,
-        onSelectedRowsChange = _this$asProps8.onSelectedRowsChange,
-        selectedRows = _this$asProps8.selectedRows,
-        sideIndents = _this$asProps8.sideIndents,
-        variant = _this$asProps8.variant;
+      var _this$asProps7 = this.asProps,
+        use = _this$asProps7.use,
+        compact = _this$asProps7.compact,
+        sort = _this$asProps7.sort,
+        onSortChange = _this$asProps7.onSortChange,
+        getI18nText = _this$asProps7.getI18nText,
+        uid = _this$asProps7.uid,
+        headerProps = _this$asProps7.headerProps,
+        onSelectedRowsChange = _this$asProps7.onSelectedRowsChange,
+        selectedRows = _this$asProps7.selectedRows,
+        sideIndents = _this$asProps7.sideIndents,
+        variant = _this$asProps7.variant;
       var _this$gridSettings = this.gridSettings,
         gridTemplateColumns = _this$gridSettings.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings.gridTemplateAreas;
@@ -751,28 +755,27 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "getBodyProps",
     value: function getBodyProps() {
-      var _this$asProps9 = this.asProps,
-        use = _this$asProps9.use,
-        compact = _this$asProps9.compact,
-        loading = _this$asProps9.loading,
-        getI18nText = _this$asProps9.getI18nText,
-        expandedRows = _this$asProps9.expandedRows,
-        virtualScroll = _this$asProps9.virtualScroll,
-        uid = _this$asProps9.uid,
-        rowProps = _this$asProps9.rowProps,
-        renderCell = _this$asProps9.renderCell,
-        headerProps = _this$asProps9.headerProps,
-        renderEmptyData = _this$asProps9.renderEmptyData,
-        sideIndents = _this$asProps9.sideIndents,
-        selectedRows = _this$asProps9.selectedRows,
-        accordionDuration = _this$asProps9.accordionDuration,
-        accordionMode = _this$asProps9.accordionMode,
-        rawData = _this$asProps9.data,
-        renderCellOverlay = _this$asProps9.renderCellOverlay,
-        limit = _this$asProps9.limit,
-        variant = _this$asProps9.variant,
-        totalRows = _this$asProps9.totalRows,
-        accordionAnimationRows = _this$asProps9.accordionAnimationRows;
+      var _this$asProps8 = this.asProps,
+        use = _this$asProps8.use,
+        compact = _this$asProps8.compact,
+        loading = _this$asProps8.loading,
+        getI18nText = _this$asProps8.getI18nText,
+        virtualScroll = _this$asProps8.virtualScroll,
+        uid = _this$asProps8.uid,
+        rowProps = _this$asProps8.rowProps,
+        renderCell = _this$asProps8.renderCell,
+        headerProps = _this$asProps8.headerProps,
+        renderEmptyData = _this$asProps8.renderEmptyData,
+        sideIndents = _this$asProps8.sideIndents,
+        selectedRows = _this$asProps8.selectedRows,
+        accordionDuration = _this$asProps8.accordionDuration,
+        accordionMode = _this$asProps8.accordionMode,
+        rawData = _this$asProps8.data,
+        renderCellOverlay = _this$asProps8.renderCellOverlay,
+        limit = _this$asProps8.limit,
+        variant = _this$asProps8.variant,
+        totalRows = _this$asProps8.totalRows,
+        accordionAnimationRows = _this$asProps8.accordionAnimationRows;
       var _this$gridSettings2 = this.gridSettings,
         gridTemplateColumns = _this$gridSettings2.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings2.gridTemplateAreas;
@@ -792,7 +795,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         headerHeight: this.getHeaderHeight(),
         stickyHeader: headerProps === null || headerProps === void 0 ? void 0 : headerProps.sticky,
         getI18nText: getI18nText,
-        expandedRows: expandedRows,
+        expandedRows: this.state.expandedRows,
         onExpandRow: this.onExpandRow,
         spinnerRef: this.spinnerRef,
         scrollTop: this.state.scrollTop,
@@ -852,20 +855,20 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       var _ref = this.asProps,
         _ref2;
       var SDataTable = _baseComponents.Box;
-      var _this$asProps0 = this.asProps,
-        Children = _this$asProps0.Children,
-        styles = _this$asProps0.styles,
-        w = _this$asProps0.w,
-        wMax = _this$asProps0.wMax,
-        wMin = _this$asProps0.wMin,
-        h = _this$asProps0.h,
-        hMax = _this$asProps0.hMax,
-        hMin = _this$asProps0.hMin,
-        virtualScroll = _this$asProps0.virtualScroll,
-        children = _this$asProps0.children,
-        headerProps = _this$asProps0.headerProps,
-        loading = _this$asProps0.loading,
-        selectedRows = _this$asProps0.selectedRows;
+      var _this$asProps9 = this.asProps,
+        Children = _this$asProps9.Children,
+        styles = _this$asProps9.styles,
+        w = _this$asProps9.w,
+        wMax = _this$asProps9.wMax,
+        wMin = _this$asProps9.wMin,
+        h = _this$asProps9.h,
+        hMax = _this$asProps9.hMax,
+        hMin = _this$asProps9.hMin,
+        virtualScroll = _this$asProps9.virtualScroll,
+        children = _this$asProps9.children,
+        headerProps = _this$asProps9.headerProps,
+        loading = _this$asProps9.loading,
+        selectedRows = _this$asProps9.selectedRows;
       var _this$getScrollOffset = this.getScrollOffsetValue(),
         _this$getScrollOffset2 = (0, _slicedToArray2["default"])(_this$getScrollOffset, 2),
         offsetLeftSum = _this$getScrollOffset2[0],
@@ -1158,7 +1161,12 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
               return _makeDtRow(item);
             }) : row[ACCORDION];
             acc[key] = new _MergedCells.MergedRowsCell(value, groupedRows.length, accordion);
-            groupedKeys.push(key);
+            var columnsToRow = key.split(_this5.columnsSplitter);
+            if (columnsToRow.length === 1) {
+              groupedKeys.push(key);
+            } else {
+              groupedKeys.push.apply(groupedKeys, (0, _toConsumableArray2["default"])(columnsToRow));
+            }
             return acc;
           }, (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, UNIQ_ROW_KEY, ''), ROW_INDEX, -1));
           groupedRows.forEach(function (childRow, index) {
@@ -1217,6 +1225,16 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       }
       return height;
     }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      if (props.expandedRows === state.expandedRows || props.expandedRows === undefined) {
+        return null;
+      }
+      return {
+        expandedRows: props.expandedRows
+      };
+    }
   }]);
 }(_core.Component);
 (0, _defineProperty2["default"])(DataTableRoot, "displayName", 'DataTable');
@@ -1225,7 +1243,6 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
 (0, _defineProperty2["default"])(DataTableRoot, "defaultProps", {
   use: 'primary',
   defaultGridTemplateColumnWidth: 'auto',
-  expandedRows: new Set(),
   defaultSelectedRows: undefined,
   h: 'fit-content',
   renderEmptyData: function renderEmptyData() {