@semcore/data-table 16.5.3-prerelease.4 → 17.0.0-prerelease.17

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

@@ -1,19 +1,11 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 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"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
 var _baseComponents = require("@semcore/base-components");
@@ -22,7 +14,7 @@ var _i18nEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhan
 var _findComponent = _interopRequireDefault(require("@semcore/core/lib/utils/findComponent"));
 var _hasParent = require("@semcore/core/lib/utils/hasParent");
 var _rafTrottle = _interopRequireDefault(require("@semcore/core/lib/utils/rafTrottle"));
-var _ref9 = require("@semcore/core/lib/utils/ref");
+var _ref3 = require("@semcore/core/lib/utils/ref");
 var _uniqueID = _interopRequireDefault(require("@semcore/core/lib/utils/uniqueID"));
 var _useFocusLock = require("@semcore/core/lib/utils/use/useFocusLock");
 var _widgetEmpty = require("@semcore/widget-empty");
@@ -32,96 +24,103 @@ 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_236d0_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content;grid-auto-rows:min-content}.___SDataTable_236d0_gg_.__isDataEmpty_236d0_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_236d0_gg_.__gridTemplateColumns_236d0_gg_{grid-template-columns:var(--gridTemplateColumns_236d0)}.___SDataTable_236d0_gg_.__gridTemplateAreas_236d0_gg_{grid-template-areas:var(--gridTemplateAreas_236d0)}.___SDataTable_236d0_gg_.__gridTemplateRows_236d0_gg_{grid-template-rows:var(--gridTemplateRows_236d0)}", /*__inner_css_end__*/"236d0_gg_"),
+const style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SDataTable_wo0cb_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content;grid-auto-rows:min-content}.___SDataTable_wo0cb_gg_.__isDataEmpty_wo0cb_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_wo0cb_gg_.__gridTemplateColumns_wo0cb_gg_{grid-template-columns:var(--gridTemplateColumns_wo0cb)}.___SDataTable_wo0cb_gg_.__gridTemplateAreas_wo0cb_gg_{grid-template-areas:var(--gridTemplateAreas_wo0cb)}.___SDataTable_wo0cb_gg_.__gridTemplateRows_wo0cb_gg_{grid-template-rows:var(--gridTemplateRows_wo0cb)}", /*__inner_css_end__*/"wo0cb_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SDataTable": "___SDataTable_236d0_gg_",
-  "_isDataEmpty": "__isDataEmpty_236d0_gg_",
-  "_gridTemplateColumns": "__gridTemplateColumns_236d0_gg_",
-  "--gridTemplateColumns": "--gridTemplateColumns_236d0",
-  "_gridTemplateAreas": "__gridTemplateAreas_236d0_gg_",
-  "--gridTemplateAreas": "--gridTemplateAreas_236d0",
-  "_gridTemplateRows": "__gridTemplateRows_236d0_gg_",
-  "--gridTemplateRows": "--gridTemplateRows_236d0"
+  "__SDataTable": "___SDataTable_wo0cb_gg_",
+  "_isDataEmpty": "__isDataEmpty_wo0cb_gg_",
+  "_gridTemplateColumns": "__gridTemplateColumns_wo0cb_gg_",
+  "--gridTemplateColumns": "--gridTemplateColumns_wo0cb",
+  "_gridTemplateAreas": "__gridTemplateAreas_wo0cb_gg_",
+  "--gridTemplateAreas": "--gridTemplateAreas_wo0cb",
+  "_gridTemplateRows": "__gridTemplateRows_wo0cb_gg_",
+  "--gridTemplateRows": "--gridTemplateRows_wo0cb"
 });
 /*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
-var scrollStyles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SScrollArea_1m51n_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_1m51n_gg_ .___SContainer_1m51n_gg_{overflow:visible;overflow:initial}.___SScrollArea_1m51n_gg_ .___SContainer_1m51n_gg_._scrollDirection_both_1m51n_gg_{overflow:auto}.___SScrollArea_1m51n_gg_ .___SContainer_1m51n_gg_._scrollDirection_both_1m51n_gg_.__loading_1m51n_gg_,.___SScrollArea_1m51n_gg_ .___SContainer_1m51n_gg_._scrollDirection_horizontal_1m51n_gg_.__loading_1m51n_gg_,.___SScrollArea_1m51n_gg_ .___SContainer_1m51n_gg_._scrollDirection_vertical_1m51n_gg_.__loading_1m51n_gg_{overflow:hidden}.___SScrollArea_1m51n_gg_ .___SContainer_1m51n_gg_._scrollDirection_horizontal_1m51n_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_1m51n_gg_ .___SContainer_1m51n_gg_._scrollDirection_vertical_1m51n_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_1m51n_gg_ .___SContainer_1m51n_gg_.__headerHeight_1m51n_gg_{scroll-padding-top:var(--headerHeight_1m51n)}.___SScrollArea_1m51n_gg_ .___SContainer_1m51n_gg_.__leftScrollPadding_1m51n_gg_{scroll-padding-left:var(--leftScrollPadding_1m51n)}.___SScrollArea_1m51n_gg_ .___SContainer_1m51n_gg_.__rightScrollPadding_1m51n_gg_{scroll-padding-right:var(--rightScrollPadding_1m51n)}.___SScrollArea_1m51n_gg_ .___SShadowHorizontal_1m51n_gg_::before,.___SScrollArea_1m51n_gg_ .___SShadowHorizontal_1m51n_gg_:after,.___SScrollArea_1m51n_gg_ .___SShadowVertical_1m51n_gg_::after{z-index:20}.___SScrollArea_1m51n_gg_ .___SShadowHorizontal_1m51n_gg_.__leftOffset_1m51n_gg_::before,.___SScrollArea_1m51n_gg_ .___SShadowHorizontal_1m51n_gg_.__rightOffset_1m51n_gg_::after,.___SScrollArea_1m51n_gg_ .___SShadowVertical_1m51n_gg_::before{display:none}", /*__inner_css_end__*/"1m51n_gg_"),
+const scrollStyles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SScrollArea_j4820_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_{overflow:visible;overflow:initial}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_both_j4820_gg_{overflow:auto}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_both_j4820_gg_.__loading_j4820_gg_,.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_horizontal_j4820_gg_.__loading_j4820_gg_,.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_vertical_j4820_gg_.__loading_j4820_gg_{overflow:hidden}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_horizontal_j4820_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_._scrollDirection_vertical_j4820_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_.__headerHeight_j4820_gg_{scroll-padding-top:var(--headerHeight_j4820)}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_.__leftScrollPadding_j4820_gg_{scroll-padding-left:var(--leftScrollPadding_j4820)}.___SScrollArea_j4820_gg_ .___SContainer_j4820_gg_.__rightScrollPadding_j4820_gg_{scroll-padding-right:var(--rightScrollPadding_j4820)}.___SScrollArea_j4820_gg_ .___SShadowHorizontal_j4820_gg_::before,.___SScrollArea_j4820_gg_ .___SShadowHorizontal_j4820_gg_:after,.___SScrollArea_j4820_gg_ .___SShadowVertical_j4820_gg_::after{z-index:20}.___SScrollArea_j4820_gg_ .___SShadowHorizontal_j4820_gg_.__leftOffset_j4820_gg_::before,.___SScrollArea_j4820_gg_ .___SShadowHorizontal_j4820_gg_.__rightOffset_j4820_gg_::after,.___SScrollArea_j4820_gg_ .___SShadowVertical_j4820_gg_::before{display:none}", /*__inner_css_end__*/"j4820_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SScrollArea": "___SScrollArea_1m51n_gg_",
-  "__SContainer": "___SContainer_1m51n_gg_",
-  "_scrollDirection_both": "_scrollDirection_both_1m51n_gg_",
-  "_loading": "__loading_1m51n_gg_",
-  "_scrollDirection_horizontal": "_scrollDirection_horizontal_1m51n_gg_",
-  "_scrollDirection_vertical": "_scrollDirection_vertical_1m51n_gg_",
-  "_headerHeight": "__headerHeight_1m51n_gg_",
-  "--headerHeight": "--headerHeight_1m51n",
-  "_leftScrollPadding": "__leftScrollPadding_1m51n_gg_",
-  "--leftScrollPadding": "--leftScrollPadding_1m51n",
-  "_rightScrollPadding": "__rightScrollPadding_1m51n_gg_",
-  "--rightScrollPadding": "--rightScrollPadding_1m51n",
-  "__SShadowVertical": "___SShadowVertical_1m51n_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_1m51n_gg_",
-  "_leftOffset": "__leftOffset_1m51n_gg_",
-  "_rightOffset": "__rightOffset_1m51n_gg_"
+  "__SScrollArea": "___SScrollArea_j4820_gg_",
+  "__SContainer": "___SContainer_j4820_gg_",
+  "_scrollDirection_both": "_scrollDirection_both_j4820_gg_",
+  "_loading": "__loading_j4820_gg_",
+  "_scrollDirection_horizontal": "_scrollDirection_horizontal_j4820_gg_",
+  "_scrollDirection_vertical": "_scrollDirection_vertical_j4820_gg_",
+  "_headerHeight": "__headerHeight_j4820_gg_",
+  "--headerHeight": "--headerHeight_j4820",
+  "_leftScrollPadding": "__leftScrollPadding_j4820_gg_",
+  "--leftScrollPadding": "--leftScrollPadding_j4820",
+  "_rightScrollPadding": "__rightScrollPadding_j4820_gg_",
+  "--rightScrollPadding": "--rightScrollPadding_j4820",
+  "__SShadowVertical": "___SShadowVertical_j4820_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_j4820_gg_",
+  "_leftOffset": "__leftOffset_j4820_gg_",
+  "_rightOffset": "__rightOffset_j4820_gg_"
 });
-var ACCORDION = exports.ACCORDION = Symbol('accordion');
-var ROW_GROUP = exports.ROW_GROUP = Symbol('ROW_GROUP');
-var UNIQ_ROW_KEY = exports.UNIQ_ROW_KEY = Symbol('UNIQ_ROW_KEY');
-var IS_EMPTY_DATA_ROW = exports.IS_EMPTY_DATA_ROW = Symbol('IS_EMPTY_DATA_ROW');
-var SELECT_ALL = exports.SELECT_ALL = Symbol('SELECT_ALL');
-var ROW_INDEX = exports.ROW_INDEX = Symbol('ROW_INDEX');
-var GRID_ROW_INDEX = exports.GRID_ROW_INDEX = Symbol('GRID_ROW_INDEX');
-var SCROLL_BAR_HEIGHT = 12;
-var DataTableRoot = /*#__PURE__*/function (_Component) {
-  function DataTableRoot(props) {
-    var _this;
-    (0, _classCallCheck2["default"])(this, DataTableRoot);
-    _this = (0, _callSuper2["default"])(this, DataTableRoot, [props]);
-    (0, _defineProperty2["default"])(_this, "columns", []);
-    (0, _defineProperty2["default"])(_this, "treeColumns", []);
-    (0, _defineProperty2["default"])(_this, "hasGroups", false);
-    (0, _defineProperty2["default"])(_this, "hasFixedColumn", false);
-    (0, _defineProperty2["default"])(_this, "focusedCell", [-1, -1]);
-    (0, _defineProperty2["default"])(_this, "scrollAreaRef", /*#__PURE__*/React.createRef());
-    (0, _defineProperty2["default"])(_this, "tableContainerRef", /*#__PURE__*/React.createRef());
-    (0, _defineProperty2["default"])(_this, "tableRef", /*#__PURE__*/React.createRef());
-    (0, _defineProperty2["default"])(_this, "headerRef", /*#__PURE__*/React.createRef());
-    (0, _defineProperty2["default"])(_this, "spinnerRef", /*#__PURE__*/React.createRef());
-    (0, _defineProperty2["default"])(_this, "containerResizeEndTimeoutId", null);
-    (0, _defineProperty2["default"])(_this, "gridAreaGroupMap", new Map());
-    (0, _defineProperty2["default"])(_this, "columnsSplitter", '/');
-    (0, _defineProperty2["default"])(_this, "tmpData", void 0);
-    (0, _defineProperty2["default"])(_this, "calculatedRows", void 0);
-    (0, _defineProperty2["default"])(_this, "flatRows", void 0);
-    (0, _defineProperty2["default"])(_this, "gridSettings", {
+const ACCORDION = exports.ACCORDION = Symbol('accordion');
+const ROW_GROUP = exports.ROW_GROUP = Symbol('ROW_GROUP');
+const UNIQ_ROW_KEY = exports.UNIQ_ROW_KEY = Symbol('UNIQ_ROW_KEY');
+const IS_EMPTY_DATA_ROW = exports.IS_EMPTY_DATA_ROW = Symbol('IS_EMPTY_DATA_ROW');
+const SELECT_ALL = exports.SELECT_ALL = Symbol('SELECT_ALL');
+const ROW_INDEX = exports.ROW_INDEX = Symbol('ROW_INDEX');
+const GRID_ROW_INDEX = exports.GRID_ROW_INDEX = Symbol('GRID_ROW_INDEX');
+const SCROLL_BAR_HEIGHT = 12;
+class DataTableRoot extends _core.Component {
+  static getDerivedStateFromProps(props, state) {
+    if (props.expandedRows === state.expandedRows || props.expandedRows === undefined) {
+      return null;
+    }
+    return {
+      expandedRows: props.expandedRows
+    };
+  }
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "columns", []);
+    (0, _defineProperty2.default)(this, "treeColumns", []);
+    (0, _defineProperty2.default)(this, "hasGroups", false);
+    (0, _defineProperty2.default)(this, "hasFixedColumn", false);
+    (0, _defineProperty2.default)(this, "focusedCell", [-1, -1]);
+    (0, _defineProperty2.default)(this, "scrollAreaRef", /*#__PURE__*/React.createRef());
+    (0, _defineProperty2.default)(this, "tableContainerRef", /*#__PURE__*/React.createRef());
+    (0, _defineProperty2.default)(this, "tableRef", /*#__PURE__*/React.createRef());
+    (0, _defineProperty2.default)(this, "headerRef", /*#__PURE__*/React.createRef());
+    (0, _defineProperty2.default)(this, "spinnerRef", /*#__PURE__*/React.createRef());
+    (0, _defineProperty2.default)(this, "containerResizeEndTimeoutId", null);
+    (0, _defineProperty2.default)(this, "gridAreaGroupMap", new Map());
+    (0, _defineProperty2.default)(this, "columnsSplitter", '/');
+    (0, _defineProperty2.default)(this, "tmpData", void 0);
+    (0, _defineProperty2.default)(this, "calculatedRows", void 0);
+    (0, _defineProperty2.default)(this, "flatRows", void 0);
+    (0, _defineProperty2.default)(this, "gridSettings", {
       gridTemplateColumns: [],
       gridTemplateAreas: []
     });
-    (0, _defineProperty2["default"])(_this, "selectAllMessageTimer", 0);
-    (0, _defineProperty2["default"])(_this, "headerNodesMap", new Map());
-    (0, _defineProperty2["default"])(_this, "isPressedShift", false);
-    (0, _defineProperty2["default"])(_this, "lastSelectedRowKey", void 0);
-    (0, _defineProperty2["default"])(_this, "state", {
+    (0, _defineProperty2.default)(this, "selectAllMessageTimer", 0);
+    (0, _defineProperty2.default)(this, "headerNodesMap", new Map());
+    (0, _defineProperty2.default)(this, "isPressedShift", false);
+    (0, _defineProperty2.default)(this, "lastSelectedRowKey", void 0);
+    (0, _defineProperty2.default)(this, "state", {
       scrollTop: 0,
       scrollDirection: 'down',
       selectAllMessage: '',
       shadowVertical: '',
       expandedRows: new Set()
     });
-    (0, _defineProperty2["default"])(_this, "handleDocumentScroll", (0, _rafTrottle["default"])(function () {
-      var _headerProps$top, _this$scrollAreaRef$c;
-      var tableContainer = _this.tableContainerRef.current;
+    (0, _defineProperty2.default)(this, "handleDocumentScroll", (0, _rafTrottle.default)(() => {
+      const tableContainer = this.tableContainerRef.current;
       if (!tableContainer) return;
-      var tableContainerTop = tableContainer.getBoundingClientRect().top;
-      var headerProps = _this.asProps.headerProps;
-      var headerContainer = _this.headerRef.current;
-      var elements = headerContainer === null || headerContainer === void 0 ? void 0 : headerContainer.querySelectorAll('[role="columnheader"], [data-ui-name="Head.Group"]');
-      var top = tableContainerTop - ((_headerProps$top = headerProps === null || headerProps === void 0 ? void 0 : headerProps.top) !== null && _headerProps$top !== void 0 ? _headerProps$top : 0);
-      var headerScrollBar = headerProps !== null && headerProps !== void 0 && headerProps.withScrollBar ? (_this$scrollAreaRef$c = _this.scrollAreaRef.current) === null || _this$scrollAreaRef$c === void 0 ? void 0 : _this$scrollAreaRef$c.querySelector("[role=scrollbar][aria-orientation=horizontal]") : undefined;
+      const tableContainerTop = tableContainer.getBoundingClientRect().top;
+      const {
+        headerProps
+      } = this.asProps;
+      const headerContainer = this.headerRef.current;
+      const elements = headerContainer?.querySelectorAll('[role="columnheader"], [data-ui-name="Head.Group"]');
+      const top = tableContainerTop - (headerProps?.top ?? 0);
+      const headerScrollBar = headerProps?.withScrollBar ? this.scrollAreaRef.current?.querySelector(`[role=scrollbar][aria-orientation=horizontal]`) : undefined;
       if (top && top < 0) {
-        var translate = "translateY(".concat(Math.abs(top), "px)");
-        elements === null || elements === void 0 || elements.forEach(function (column) {
+        const translate = `translateY(${Math.abs(top)}px)`;
+        elements?.forEach(column => {
           if (column instanceof HTMLElement) {
             column.style.setProperty('transform', translate);
           }
@@ -130,7 +129,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           headerScrollBar.style.setProperty('transform', translate);
         }
       } else {
-        elements === null || elements === void 0 || elements.forEach(function (column) {
+        elements?.forEach(column => {
           if (column instanceof HTMLElement) {
             column.style.removeProperty('transform');
           }
@@ -140,175 +139,165 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         }
       }
     }));
-    (0, _defineProperty2["default"])(_this, "handleCellClick", function (e, opt) {
+    (0, _defineProperty2.default)(this, "handleCellClick", (e, opt) => {
       if (_core.lastInteraction.isMouse()) {
-        _this.initFocusableCell([_this.hasFocusableInHeader() ? opt.rowIndex + 1 : opt.rowIndex, opt.colIndex]);
+        this.initFocusableCell([this.hasFocusableInHeader() ? opt.rowIndex + 1 : opt.rowIndex, opt.colIndex]);
       }
     });
-    (0, _defineProperty2["default"])(_this, "handleSelectRow", function (isSelected, selectedRowIndex, row, event) {
-      var _this$asProps = _this.asProps,
-        selectedRows = _this$asProps.selectedRows,
-        onSelectedRowsChange = _this$asProps.onSelectedRowsChange;
+    (0, _defineProperty2.default)(this, "handleSelectRow", (isSelected, selectedRowIndex, row, event) => {
+      const {
+        selectedRows,
+        onSelectedRowsChange
+      } = this.asProps;
       if (!selectedRows || !onSelectedRowsChange) return;
-      var selectedRowsSet = new Set(selectedRows);
-      if (_this.isPressedShift && selectedRowsSet.size > 0 && _this.lastSelectedRowKey && (isSelected ? selectedRowsSet.has(_this.lastSelectedRowKey) : true)) {
-        var select = false;
-        var firstColumnKey = _this.columns[0].name;
-        var isMerged = _this.flatRows.some(function (item) {
-          return item[firstColumnKey] instanceof _MergedCells.MergedRowsCell;
-        });
-        var _iterator = (0, _createForOfIteratorHelper2["default"])(_this.flatRows),
-          _step;
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var item = _step.value;
-            if (isMerged && !item[firstColumnKey]) continue;
-            if (!select && (item[UNIQ_ROW_KEY] === row[UNIQ_ROW_KEY] || item[UNIQ_ROW_KEY] === _this.lastSelectedRowKey)) {
-              select = true;
-              if (isSelected) {
-                selectedRowsSet.add(item[UNIQ_ROW_KEY]);
-              } else {
-                selectedRowsSet["delete"](item[UNIQ_ROW_KEY]);
-              }
-              continue;
-            }
-            if (select) {
-              if (isSelected) {
-                selectedRowsSet.add(item[UNIQ_ROW_KEY]);
-              } else {
-                selectedRowsSet["delete"](item[UNIQ_ROW_KEY]);
-              }
+      const selectedRowsSet = new Set(selectedRows);
+      if (this.isPressedShift && selectedRowsSet.size > 0 && this.lastSelectedRowKey && (isSelected ? selectedRowsSet.has(this.lastSelectedRowKey) : true)) {
+        let select = false;
+        const firstColumnKey = this.columns[0].name;
+        const isMerged = this.flatRows.some(item => item[firstColumnKey] instanceof _MergedCells.MergedRowsCell);
+        for (const item of this.flatRows) {
+          if (isMerged && !item[firstColumnKey]) continue;
+          if (!select && (item[UNIQ_ROW_KEY] === row[UNIQ_ROW_KEY] || item[UNIQ_ROW_KEY] === this.lastSelectedRowKey)) {
+            select = true;
+            if (isSelected) {
+              selectedRowsSet.add(item[UNIQ_ROW_KEY]);
+            } else {
+              selectedRowsSet.delete(item[UNIQ_ROW_KEY]);
             }
-            if (select && (item[UNIQ_ROW_KEY] === row[UNIQ_ROW_KEY] || item[UNIQ_ROW_KEY] === _this.lastSelectedRowKey)) {
-              break;
+            continue;
+          }
+          if (select) {
+            if (isSelected) {
+              selectedRowsSet.add(item[UNIQ_ROW_KEY]);
+            } else {
+              selectedRowsSet.delete(item[UNIQ_ROW_KEY]);
             }
           }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
+          if (select && (item[UNIQ_ROW_KEY] === row[UNIQ_ROW_KEY] || item[UNIQ_ROW_KEY] === this.lastSelectedRowKey)) {
+            break;
+          }
         }
       } else {
         if (selectedRowsSet.has(row[UNIQ_ROW_KEY])) {
-          selectedRowsSet["delete"](row[UNIQ_ROW_KEY]);
+          selectedRowsSet.delete(row[UNIQ_ROW_KEY]);
         } else {
           selectedRowsSet.add(row[UNIQ_ROW_KEY]);
         }
       }
-      _this.lastSelectedRowKey = row[UNIQ_ROW_KEY];
+      this.lastSelectedRowKey = row[UNIQ_ROW_KEY];
       onSelectedRowsChange(Array.from(selectedRowsSet), event, {
-        selectedRowIndex: selectedRowIndex,
-        isSelected: isSelected,
-        row: row
+        selectedRowIndex,
+        isSelected,
+        row
       });
     });
-    (0, _defineProperty2["default"])(_this, "setSelectAllMessage", function (selectedAll) {
-      if (_this.selectAllMessageTimer) {
-        clearTimeout(_this.selectAllMessageTimer);
+    (0, _defineProperty2.default)(this, "setSelectAllMessage", selectedAll => {
+      if (this.selectAllMessageTimer) {
+        clearTimeout(this.selectAllMessageTimer);
       }
-      var getI18nText = _this.asProps.getI18nText;
-      var message = getI18nText(selectedAll ? 'DataTable.allItemsSelected:aria-live' : 'DataTable.allItemsDeselected:aria-live');
-      _this.setState({
+      const {
+        getI18nText
+      } = this.asProps;
+      const message = getI18nText(selectedAll ? 'DataTable.allItemsSelected:aria-live' : 'DataTable.allItemsDeselected:aria-live');
+      this.setState({
         selectAllMessage: message
       });
-      _this.selectAllMessageTimer = window.setTimeout(function () {
-        _this.setState({
+      this.selectAllMessageTimer = window.setTimeout(() => {
+        this.setState({
           selectAllMessage: ''
         });
       }, 5000);
     });
-    (0, _defineProperty2["default"])(_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(":scope [aria-rowindex=\"".concat(index + 1, "\"]:not([aria-hidden=\"true\"]):not(:scope [data-ui-name=\"DataTable\"] [aria-rowindex=\"").concat(index + 1, "\"]:not([aria-hidden=\"true\"])"));
+    (0, _defineProperty2.default)(this, "getRow", index => {
+      return this.tableRef.current?.querySelector(`:scope [aria-rowindex="${index + 1}"]:not([aria-hidden="true"]):not(:scope [data-ui-name="DataTable"] [aria-rowindex="${index + 1}"]:not([aria-hidden="true"])`);
     });
-    (0, _defineProperty2["default"])(_this, "hasFocusableInHeader", function () {
-      return _this.headerRef.current && (0, _useFocusLock.hasFocusableIn)(_this.headerRef.current) || _this.columns.some(function (column) {
-        return column.sortable;
-      });
+    (0, _defineProperty2.default)(this, "hasFocusableInHeader", () => {
+      return this.headerRef.current && (0, _useFocusLock.hasFocusableIn)(this.headerRef.current) || this.columns.some(column => column.sortable);
     });
-    (0, _defineProperty2["default"])(_this, "onExpandRow", function (expandedRow) {
-      var _this$asProps2 = _this.asProps,
-        onAccordionToggle = _this$asProps2.onAccordionToggle,
-        accordionMode = _this$asProps2.accordionMode;
-      var expandedRows = _this.state.expandedRows;
+    (0, _defineProperty2.default)(this, "onExpandRow", expandedRow => {
+      const {
+        onAccordionToggle,
+        accordionMode
+      } = this.asProps;
+      const 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]);
+        expandedRows.delete(expandedRow[UNIQ_ROW_KEY]);
+        onAccordionToggle?.('close', expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
       } else {
         expandedRows.add(expandedRow[UNIQ_ROW_KEY]);
-        onAccordionToggle === null || onAccordionToggle === void 0 || onAccordionToggle('open', expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
+        onAccordionToggle?.('open', expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
         if (accordionMode === 'toggle') {
-          var rowIndex = expandedRow[ROW_INDEX];
-          var colIndex = _this.focusedCell[1];
-          _this.initFocusableCell([_this.hasFocusableInHeader() ? rowIndex + 1 : rowIndex, colIndex]);
+          const rowIndex = expandedRow[ROW_INDEX];
+          const colIndex = this.focusedCell[1];
+          this.initFocusableCell([this.hasFocusableInHeader() ? rowIndex + 1 : rowIndex, colIndex]);
         }
       }
     });
-    (0, _defineProperty2["default"])(_this, "changeFocusCell", function (rowIndex, colIndex, direction) {
-      var _this$tableRef$curren2, _this$tableRef$curren3;
-      var limit = _this.asProps.limit;
-      var hasFocusable = _this.hasFocusableInHeader();
-      var maxCol = _this.columns.length - 1;
-      var maxRow = _this.totalRows || 1;
-      var currentRow = (_this$tableRef$curren2 = _this.tableRef.current) === null || _this$tableRef$curren2 === void 0 ? void 0 : _this$tableRef$curren2.querySelector("[aria-rowindex=\"".concat(_this.focusedCell[0] + 1, "\"]"));
-      var headerCells = (_this$tableRef$curren3 = _this.tableRef.current) === null || _this$tableRef$curren3 === void 0 ? void 0 : _this$tableRef$curren3.querySelectorAll('[role=columnheader]');
-      var currentCell = currentRow === null || currentRow === void 0 ? void 0 : currentRow.querySelector("[role=gridcell][aria-colindex='".concat(_this.focusedCell[1] + 1, "']"));
-      var currentHeaderCell = headerCells === null || headerCells === void 0 ? void 0 : headerCells.item(_this.focusedCell[1]);
-      var changed = true;
-      var newRow = _this.focusedCell[0] + rowIndex;
-      var newCol = _this.focusedCell[1] + colIndex;
-      if ((hasFocusable && newRow < 0 || !hasFocusable && newRow < 1 || newRow > maxRow) && newRow !== _this.focusedCell[0]) {
+    (0, _defineProperty2.default)(this, "changeFocusCell", (rowIndex, colIndex, direction) => {
+      const {
+        limit
+      } = this.asProps;
+      const hasFocusable = this.hasFocusableInHeader();
+      const maxCol = this.columns.length - 1;
+      const maxRow = this.totalRows || 1;
+      const currentRow = this.tableRef.current?.querySelector(`[aria-rowindex="${this.focusedCell[0] + 1}"]`);
+      const headerCells = this.tableRef.current?.querySelectorAll('[role=columnheader]');
+      const currentCell = currentRow?.querySelector(`[role=gridcell][aria-colindex='${this.focusedCell[1] + 1}']`);
+      const currentHeaderCell = headerCells?.item(this.focusedCell[1]);
+      let changed = true;
+      const newRow = this.focusedCell[0] + rowIndex;
+      const newCol = this.focusedCell[1] + colIndex;
+      if ((hasFocusable && newRow < 0 || !hasFocusable && newRow < 1 || newRow > maxRow) && newRow !== this.focusedCell[0]) {
         changed = false;
       }
-      if ((newCol < 0 || newCol > maxCol) && newCol !== _this.focusedCell[1]) {
+      if ((newCol < 0 || newCol > maxCol) && newCol !== this.focusedCell[1]) {
         changed = false;
       }
       if (!changed) return;
-      var row = _this.getRow(newRow);
-      var cell = row === null || row === void 0 ? void 0 : row.querySelector(":scope > div > [role=gridcell][aria-colindex=\"".concat(newCol + 1, "\"]:not([aria-hidden=\"true\"]), :scope > [role=columnheader][aria-colindex=\"").concat(newCol + 1, "\"]:not([aria-hidden=\"true\"]), :scope > div > [role=columnheader][aria-colindex=\"").concat(newCol + 1, "\"]:not([aria-hidden=\"true\"])"));
+      const row = this.getRow(newRow);
+      const cell = row?.querySelector(`:scope > div > [role=gridcell][aria-colindex="${newCol + 1}"]:not([aria-hidden="true"]), :scope > [role=columnheader][aria-colindex="${newCol + 1}"]:not([aria-hidden="true"]), :scope > div > [role=columnheader][aria-colindex="${newCol + 1}"]:not([aria-hidden="true"])`);
       if (cell instanceof HTMLElement && currentCell !== cell) {
-        _this.focusedCell = [newRow, newCol];
-        currentCell === null || currentCell === void 0 || currentCell.setAttribute('inert', '');
+        this.focusedCell = [newRow, newCol];
+        currentCell?.setAttribute('inert', '');
         if (currentCell !== currentHeaderCell) {
-          currentCell === null || currentCell === void 0 || currentCell.removeAttribute('aria-describedby');
+          currentCell?.removeAttribute('aria-describedby');
         }
-        var headerCell = headerCells === null || headerCells === void 0 ? void 0 : headerCells.item(newCol);
-        var describedBy = headerCell === null || headerCell === void 0 ? void 0 : headerCell.getAttribute('aria-describedby');
+        const headerCell = headerCells?.item(newCol);
+        const describedBy = headerCell?.getAttribute('aria-describedby');
         cell.removeAttribute('inert');
         if (headerCell !== cell && describedBy) {
           cell.setAttribute('aria-describedby', describedBy);
         }
-        cell === null || cell === void 0 || cell.focus({
+        cell?.focus({
           focusVisible: true
         });
         if (newRow !== 0) {
-          currentHeaderCell === null || currentHeaderCell === void 0 || currentHeaderCell.setAttribute('inert', '');
-          var _headerCell = headerCells === null || headerCells === void 0 ? void 0 : headerCells.item(newCol);
-          _headerCell === null || _headerCell === void 0 || _headerCell.removeAttribute('inert');
+          currentHeaderCell?.setAttribute('inert', '');
+          const headerCell = headerCells?.item(newCol);
+          headerCell?.removeAttribute('inert');
         }
       } 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'));
+        let rowI = rowIndex;
+        let colI = colIndex;
+        const colspan = Number(currentCell.getAttribute('aria-colspan'));
+        const rowspan = Number(currentCell.getAttribute('aria-rowspan'));
         if (direction === 'left' || direction === 'right') {
-          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') {
+          if (currentCell.parentElement?.parentElement?.dataset.uiName === 'Collapse') {
             return;
           }
           // skipping x-axis movement of the focus within limit overlay and there is only limit by rows
-          if ((limit === null || limit === void 0 ? void 0 : limit.fromRow) !== undefined && limit.fromColumn === undefined && newCol === limit.fromRow) {
+          if (limit?.fromRow !== undefined && limit.fromColumn === undefined && newCol === limit.fromRow) {
             return;
           }
-          var hasRowSpanUpper = row instanceof HTMLElement && Number(row.dataset.filledColumns) < _this.columns.length;
+          const 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) {
+            if (direction === 'right' && limit?.fromColumn !== undefined && newCol === limit.fromColumn) {
               rowI = rowI - 1;
             } else {
               colI = direction === 'left' ? colI - colspan + 1 : colI + colspan - 1;
             }
-          } 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)) {
+          } else if (hasRowSpanUpper || direction === 'right' && (limit?.fromColumn !== undefined || limit?.fromRow !== undefined)) {
             rowI = rowI - 1;
           } else {
             colI = direction === 'left' ? colI - 1 : colI + 1;
@@ -320,92 +309,92 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           } else if (Number(currentCell.getAttribute('aria-colindex')) === 1) {
             rowI = direction === 'up' ? rowI - 1 : rowI + 1;
           } else {
-            var _limit$fromRow;
-            var areLimitsDefined = (limit === null || limit === void 0 ? void 0 : limit.fromRow) !== undefined || (limit === null || limit === void 0 ? void 0 : limit.fromColumn) !== undefined;
-            if (areLimitsDefined && newRow > ((_limit$fromRow = limit === null || limit === void 0 ? void 0 : limit.fromRow) !== null && _limit$fromRow !== void 0 ? _limit$fromRow : 0) + 1) {
+            const areLimitsDefined = limit?.fromRow !== undefined || limit?.fromColumn !== undefined;
+            if (areLimitsDefined && newRow > (limit?.fromRow ?? 0) + 1) {
               return;
             }
-            var _hasRowSpanUpper = row instanceof HTMLElement && currentRow instanceof HTMLElement && row.dataset.filledColumns !== currentRow.dataset.filledColumns;
-            if (direction === 'up' && _hasRowSpanUpper) {
+            const 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);
+        this.changeFocusCell(rowI, colI, direction);
       } else if (cell === null && currentHeaderCell instanceof HTMLElement && direction === 'down') {
-        var _colI = colIndex - 1;
-        _this.changeFocusCell(rowIndex, _colI, direction);
-      } else if (row === null && _this.focusedCell[0] === 0 && direction === 'down' && _this.asProps.virtualScroll) {
-        _this.changeFocusCell(rowIndex + 1, colIndex, direction);
+        const colI = colIndex - 1;
+        this.changeFocusCell(rowIndex, colI, direction);
+      } else if (row === null && this.focusedCell[0] === 0 && direction === 'down' && this.asProps.virtualScroll) {
+        this.changeFocusCell(rowIndex + 1, colIndex, direction);
       }
     });
-    (0, _defineProperty2["default"])(_this, "handleKeyDown", function (e) {
+    (0, _defineProperty2.default)(this, "handleKeyDown", e => {
       switch (e.key) {
         case 'Tab':
           {
-            _this.setInert(true);
+            this.setInert(true);
             break;
           }
         case 'ArrowLeft':
           {
             e.preventDefault();
-            _this.changeFocusCell(0, -1, 'left');
+            this.changeFocusCell(0, -1, 'left');
             break;
           }
         case 'ArrowRight':
           {
             e.preventDefault();
-            _this.changeFocusCell(0, 1, 'right');
+            this.changeFocusCell(0, 1, 'right');
             break;
           }
         case 'ArrowUp':
           {
             e.preventDefault();
-            _this.changeFocusCell(-1, 0, 'up');
+            this.changeFocusCell(-1, 0, 'up');
             break;
           }
         case 'ArrowDown':
           {
             e.preventDefault();
-            _this.changeFocusCell(1, 0, 'down');
+            this.changeFocusCell(1, 0, 'down');
             break;
           }
         case 'Shift':
           {
-            _this.isPressedShift = true;
+            this.isPressedShift = true;
           }
       }
     });
-    (0, _defineProperty2["default"])(_this, "handleKeyUp", function (e) {
+    (0, _defineProperty2.default)(this, "handleKeyUp", e => {
       if (e.key === 'Shift') {
-        _this.isPressedShift = false;
+        this.isPressedShift = false;
       }
     });
-    (0, _defineProperty2["default"])(_this, "handleScroll", (0, _rafTrottle["default"])(function (e) {
-      if (_this.asProps.virtualScroll) {
-        var scrollTop = e.target.scrollTop;
-        var scrollDirection = scrollTop > _this.state.scrollTop ? 'down' : 'up';
-        _this.setState({
-          scrollTop: scrollTop,
-          scrollDirection: scrollDirection
+    (0, _defineProperty2.default)(this, "handleScroll", (0, _rafTrottle.default)(e => {
+      if (this.asProps.virtualScroll) {
+        const scrollTop = e.target.scrollTop;
+        const scrollDirection = scrollTop > this.state.scrollTop ? 'down' : 'up';
+        this.setState({
+          scrollTop,
+          scrollDirection
         });
       }
-      if (_this.hasFixedColumn) {
-        _this.calculateVerticalShadow();
+      if (this.hasFixedColumn) {
+        this.calculateVerticalShadow();
       }
     }));
-    (0, _defineProperty2["default"])(_this, "calculateVerticalShadow", function () {
-      if (!_this.tableContainerRef.current) return;
-      var _this$tableContainerR = _this.tableContainerRef.current,
-        scrollWidth = _this$tableContainerR.scrollWidth,
-        clientWidth = _this$tableContainerR.clientWidth,
-        scrollLeft = _this$tableContainerR.scrollLeft;
-      var maxScrollRight = scrollWidth - clientWidth;
-      var roundedScroll = Math.round(scrollLeft);
-      var roundedMaxScroll = Math.round(maxScrollRight);
-      var shadow = '';
+    (0, _defineProperty2.default)(this, "calculateVerticalShadow", () => {
+      if (!this.tableContainerRef.current) return;
+      const {
+        scrollWidth,
+        clientWidth,
+        scrollLeft
+      } = this.tableContainerRef.current;
+      const maxScrollRight = scrollWidth - clientWidth;
+      const roundedScroll = Math.round(scrollLeft);
+      const roundedMaxScroll = Math.round(maxScrollRight);
+      let shadow = '';
       // not scroll
       if (roundedMaxScroll <= 0) {
         // start scroll
@@ -418,46 +407,41 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       } else if (roundedScroll > 0) {
         shadow = 'median';
       }
-      _this.setState({
+      this.setState({
         shadowVertical: shadow
       });
     });
-    (0, _defineProperty2["default"])(_this, "handleFocus", function (e) {
-      if (_this.asProps.loading) {
-        var _this$spinnerRef$curr;
-        (_this$spinnerRef$curr = _this.spinnerRef.current) === null || _this$spinnerRef$curr === void 0 || _this$spinnerRef$curr.focus();
+    (0, _defineProperty2.default)(this, "handleFocus", e => {
+      if (this.asProps.loading) {
+        this.spinnerRef.current?.focus();
         e.currentTarget.setAttribute('tabIndex', '-1');
-        if (_this.isDataEmpty) {
-          var _this$headerRef$curre;
-          (_this$headerRef$curre = _this.headerRef.current) === null || _this$headerRef$curre === void 0 || _this$headerRef$curre.setAttribute('tabIndex', '-1');
+        if (this.isDataEmpty) {
+          this.headerRef.current?.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();
+        if (this.focusedCell[0] === -1 && this.focusedCell[1] === -1) {
+          this.initFocusableCell();
         }
-        _this.setInert(true);
-        var row = _this.getRow(_this.focusedCell[0]);
+        this.setInert(true);
+        let row = this.getRow(this.focusedCell[0]);
         if (!row) {
-          _this.initFocusableCell();
-          row = _this.getRow(_this.focusedCell[0]);
+          this.initFocusableCell();
+          row = this.getRow(this.focusedCell[0]);
         }
-        if (!row && _this.asProps.virtualScroll) {
-          var _this$tableRef$curren4, _firstAvailableCell$p;
-          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 || (_firstAvailableCell$p = firstAvailableCell.parentElement) === null || _firstAvailableCell$p === void 0 ? void 0 : _firstAvailableCell$p.parentElement;
+        if (!row && this.asProps.virtualScroll) {
+          const firstAvailableCell = this.tableRef.current?.querySelector(`[role="gridcell"]`);
+          const firstAvailableRow = firstAvailableCell?.parentElement?.parentElement;
           if (firstAvailableCell && firstAvailableRow) {
-            var _firstAvailableCell$g, _firstAvailableRow$ge;
-            var colIndex = Number((_firstAvailableCell$g = firstAvailableCell.getAttribute('aria-colindex')) !== null && _firstAvailableCell$g !== void 0 ? _firstAvailableCell$g : 1) - 1;
-            var rowIndex = Number((_firstAvailableRow$ge = firstAvailableRow.getAttribute('aria-rowindex')) !== null && _firstAvailableRow$ge !== void 0 ? _firstAvailableRow$ge : 1) - 1;
-            _this.focusedCell[0] = rowIndex;
-            _this.focusedCell[1] = colIndex;
+            const colIndex = Number(firstAvailableCell.getAttribute('aria-colindex') ?? 1) - 1;
+            const rowIndex = Number(firstAvailableRow.getAttribute('aria-rowindex') ?? 1) - 1;
+            this.focusedCell[0] = rowIndex;
+            this.focusedCell[1] = colIndex;
             row = firstAvailableRow;
           }
         }
-        var colindex = _this.focusedCell[1];
-        var cell = colindex > -1 ? (_row = row) === null || _row === void 0 ? void 0 : _row.querySelector("[role=gridcell][aria-colindex=\"".concat(colindex + 1, "\"]:not([aria-hidden=\"true\"]), [role=columnheader][aria-colindex=\"").concat(colindex + 1, "\"]:not([aria-hidden=\"true\"])")) : undefined;
-        cell === null || cell === void 0 || cell.removeAttribute('inert');
+        const colindex = this.focusedCell[1];
+        const cell = colindex > -1 ? row?.querySelector(`[role=gridcell][aria-colindex="${colindex + 1}"]:not([aria-hidden="true"]), [role=columnheader][aria-colindex="${colindex + 1}"]:not([aria-hidden="true"])`) : undefined;
+        cell?.removeAttribute('inert');
         if (cell instanceof HTMLElement) {
           if ((0, _hasParent.hasParent)(e.target, cell) && !e.target.dataset.skipTargetFocus) {
             e.target.focus({
@@ -469,58 +453,53 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
             });
           }
         }
-        if (_this.isDataEmpty) {
-          var _this$headerRef$curre2;
-          (_this$headerRef$curre2 = _this.headerRef.current) === null || _this$headerRef$curre2 === void 0 || _this$headerRef$curre2.setAttribute('tabIndex', '-1');
+        if (this.isDataEmpty) {
+          this.headerRef.current?.setAttribute('tabIndex', '-1');
         }
         e.currentTarget.setAttribute('tabIndex', '-1');
       }
     });
-    (0, _defineProperty2["default"])(_this, "handleBlur", function (e) {
-      var relatedTarget = e.relatedTarget;
-      var tableElement = _this.tableRef.current;
+    (0, _defineProperty2.default)(this, "handleBlur", e => {
+      const relatedTarget = e.relatedTarget;
+      const tableElement = this.tableRef.current;
       if (tableElement && (!relatedTarget || !(0, _useFocusLock.isFocusInside)(tableElement, relatedTarget) || !_core.lastInteraction.isKeyboard())) {
-        _this.setInert(false);
+        this.setInert(false);
         tableElement.setAttribute('tabIndex', '0');
-        if (_this.isDataEmpty) {
-          var _this$headerRef$curre3;
-          (_this$headerRef$curre3 = _this.headerRef.current) === null || _this$headerRef$curre3 === void 0 || _this$headerRef$curre3.setAttribute('tabIndex', '0');
+        if (this.isDataEmpty) {
+          this.headerRef.current?.setAttribute('tabIndex', '0');
         }
       }
     });
-    (0, _defineProperty2["default"])(_this, "handleMouseMove", function () {
-      _this.setInert(false);
+    (0, _defineProperty2.default)(this, "handleMouseMove", () => {
+      this.setInert(false);
     });
-    (0, _defineProperty2["default"])(_this, "handleBackFromAccordion", function (key) {
-      var cellIndex = _this.columns.findIndex(function (c) {
-        return c.name === key;
-      });
-      _this.changeFocusCell(-1, cellIndex === -1 ? 0 : cellIndex, 'up');
+    (0, _defineProperty2.default)(this, "handleBackFromAccordion", key => {
+      const cellIndex = this.columns.findIndex(c => c.name === key);
+      this.changeFocusCell(-1, cellIndex === -1 ? 0 : cellIndex, 'up');
     });
-    (0, _defineProperty2["default"])(_this, "handleContainerResizeEnd", function (entries, observer) {
-      var _this$asProps$onResiz, _this$asProps3;
-      if (_this.containerResizeEndTimeoutId) {
-        clearTimeout(_this.containerResizeEndTimeoutId);
+    (0, _defineProperty2.default)(this, "handleContainerResizeEnd", (entries, observer) => {
+      if (this.containerResizeEndTimeoutId) {
+        clearTimeout(this.containerResizeEndTimeoutId);
       }
-      _this.containerResizeEndTimeoutId = setTimeout(_this.calculateVerticalShadow, 0);
-      (_this$asProps$onResiz = (_this$asProps3 = _this.asProps).onResize) === null || _this$asProps$onResiz === void 0 || _this$asProps$onResiz.call(_this$asProps3, entries, observer);
+      this.containerResizeEndTimeoutId = setTimeout(this.calculateVerticalShadow, 0);
+      this.asProps.onResize?.(entries, observer);
     });
-    (0, _defineProperty2["default"])(_this, "getScrollOffsetValue", function () {
-      if (!_this.headerRef.current) {
+    (0, _defineProperty2.default)(this, "getScrollOffsetValue", () => {
+      if (!this.headerRef.current) {
         return [0, 0];
       }
-      var setToMap = function setToMap(element) {
+      const setToMap = element => {
         if (element.getAttribute('name') && element.dataset.uiName === 'Head.Column') {
-          var name = element.getAttribute('name');
+          const name = element.getAttribute('name');
           if (name) {
-            _this.headerNodesMap.set(name, element);
+            this.headerNodesMap.set(name, element);
           }
         }
       };
-      _this.headerRef.current.childNodes.forEach(function (node) {
+      this.headerRef.current.childNodes.forEach(node => {
         if (node instanceof HTMLElement) {
           if (node.classList.value.includes('SGroupContainer')) {
-            node.childNodes.forEach(function (columnNode) {
+            node.childNodes.forEach(columnNode => {
               if (columnNode instanceof HTMLElement) {
                 setToMap(columnNode);
               }
@@ -530,387 +509,362 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           }
         }
       });
-      return _this.columns.reduce(function (acc, column) {
+      return this.columns.reduce((acc, column) => {
         if (column.fixed === 'left') {
-          var _this$headerNodesMap$, _this$headerNodesMap$2;
-          acc[0] += (_this$headerNodesMap$ = (_this$headerNodesMap$2 = _this.headerNodesMap.get(column.name)) === null || _this$headerNodesMap$2 === void 0 ? void 0 : _this$headerNodesMap$2.getBoundingClientRect().width) !== null && _this$headerNodesMap$ !== void 0 ? _this$headerNodesMap$ : 0;
+          acc[0] += this.headerNodesMap.get(column.name)?.getBoundingClientRect().width ?? 0;
         }
         if (column.fixed === 'right') {
-          var _this$headerNodesMap$3, _this$headerNodesMap$4;
-          acc[1] += (_this$headerNodesMap$3 = (_this$headerNodesMap$4 = _this.headerNodesMap.get(column.name)) === null || _this$headerNodesMap$4 === void 0 ? void 0 : _this$headerNodesMap$4.getBoundingClientRect().width) !== null && _this$headerNodesMap$3 !== void 0 ? _this$headerNodesMap$3 : 0;
+          acc[1] += this.headerNodesMap.get(column.name)?.getBoundingClientRect().width ?? 0;
         }
         return acc;
       }, [0, 0]);
     });
-    (0, _defineProperty2["default"])(_this, "getFixedStyle", function (cell) {
-      var side = cell.fixed;
+    (0, _defineProperty2.default)(this, "getFixedStyle", cell => {
+      const side = cell.fixed;
       if (!side) return [undefined, undefined];
-      var names = cell.name.split('/');
-      var nameSideMap = {
+      const names = cell.name.split('/');
+      const nameSideMap = {
         left: names[0],
         right: names[names.length - 1]
       };
-      var name = nameSideMap[side];
-      var index = _this.columns.findIndex(function (column) {
-        return column.name === name;
-      });
+      const name = nameSideMap[side];
+      const index = this.columns.findIndex(column => column.name === name);
       if (index === -1) return [undefined, undefined];
-      var startIndexSideMap = {
+      const startIndexSideMap = {
         left: 0,
         right: index + 1
       };
-      var endIndexSideMap = {
+      const endIndexSideMap = {
         left: index,
-        right: _this.columns.length
+        right: this.columns.length
       };
-      var columnsFixed = _this.columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
+      const columnsFixed = this.columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
       if (columnsFixed.length < 1) return [side, 0];
-      var sum = columnsFixed.reduce(function (acc, column) {
-        var _this$headerNodesMap$5;
-        return acc + ((_this$headerNodesMap$5 = _this.headerNodesMap.get(column.name)) === null || _this$headerNodesMap$5 === void 0 ? void 0 : _this$headerNodesMap$5.getBoundingClientRect().width);
-      }, 0);
-      return [side, "".concat(sum, "px")];
+      const sum = columnsFixed.reduce((acc, column) => acc + this.headerNodesMap.get(column.name)?.getBoundingClientRect().width, 0);
+      return [side, `${sum}px`];
     });
-    var cols = _this.calculateColumnsFromConfig();
-    _this.columns = cols[0];
-    _this.treeColumns = cols[1];
-    _this.calculatedRows = _this.getRows();
-    _this.flatRows = _this.calculatedRows.flat();
-    _this.tmpData = props.data;
-    return _this;
+    const cols = this.calculateColumnsFromConfig();
+    this.columns = cols[0];
+    this.treeColumns = cols[1];
+    this.calculatedRows = this.getRows();
+    this.flatRows = this.calculatedRows.flat();
+    this.tmpData = props.data;
   }
-  (0, _inherits2["default"])(DataTableRoot, _Component);
-  return (0, _createClass2["default"])(DataTableRoot, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
-      var _this$asProps4 = this.asProps,
-        headerProps = _this$asProps4.headerProps,
-        loading = _this$asProps4.loading;
-      if (headerProps !== null && headerProps !== void 0 && headerProps.sticky && !headerProps.h || loading || this.hasFixedColumn) {
-        requestAnimationFrame(function () {
-          _this2.forceUpdate();
-          _this2.calculateVerticalShadow();
-        });
-      }
-      if (headerProps !== null && headerProps !== void 0 && headerProps.sticky && (0, _canUseDOM["default"])() && this.scrollDirection === 'horizontal') {
-        document.addEventListener('scroll', this.handleDocumentScroll);
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$asProps5 = this.asProps,
-        data = _this$asProps5.data,
-        selectedRows = _this$asProps5.selectedRows,
-        columns = _this$asProps5.columns;
-      if (prevProps.columns !== columns) {
-        var cols = this.calculateColumnsFromConfig();
-        this.columns = cols[0];
-        this.treeColumns = cols[1];
+  componentDidMount() {
+    const {
+      headerProps,
+      loading
+    } = this.asProps;
+    if (headerProps?.sticky && !headerProps.h || loading || this.hasFixedColumn) {
+      requestAnimationFrame(() => {
         this.forceUpdate();
-      }
-      if (prevProps.data !== data || prevProps.columns !== columns) {
-        if (this.hasFixedColumn) {
-          this.calculateVerticalShadow();
-        }
-      }
-      if (prevProps.selectedRows !== selectedRows && selectedRows !== undefined) {
-        var selectedRowsSet = new Set(selectedRows);
-        var allChecked = [];
-        var allUnchecked = [];
-        this.flatRows.forEach(function (row) {
-          if (selectedRowsSet.has(row[UNIQ_ROW_KEY])) {
-            allChecked.push(row[UNIQ_ROW_KEY]);
-          } else {
-            allUnchecked.push(row[UNIQ_ROW_KEY]);
-          }
-        });
-        if (allChecked.length === data.length) {
-          this.setSelectAllMessage(true);
-        } else if (allUnchecked.length === data.length) {
-          this.setSelectAllMessage(false);
-        }
-      }
+        this.calculateVerticalShadow();
+      });
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _this$state$expandedR;
-      if ((0, _canUseDOM["default"])()) {
-        document.removeEventListener('scroll', this.handleDocumentScroll);
-      }
-      (_this$state$expandedR = this.state.expandedRows) === null || _this$state$expandedR === void 0 || _this$state$expandedR.clear();
+    if (headerProps?.sticky && (0, _canUseDOM.default)() && this.scrollDirection === 'horizontal') {
+      document.addEventListener('scroll', this.handleDocumentScroll);
     }
-  }, {
-    key: "totalRows",
-    get: function get() {
-      var totalRows = this.asProps.totalRows;
-      var flatRows = this.getFlatRows();
-      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;
-        });
-        if (dtRow) {
-          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 = this.getRows().reduce(function (acc, item) {
-        if (Array.isArray(item)) {
-          acc = acc + item.length;
-        } else {
-          acc = acc + 1;
-        }
-        return acc;
-      }, 0);
-      return rows + expandedRowsCount;
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      data,
+      selectedRows,
+      columns
+    } = this.asProps;
+    if (prevProps.columns !== columns) {
+      const cols = this.calculateColumnsFromConfig();
+      this.columns = cols[0];
+      this.treeColumns = cols[1];
+      this.forceUpdate();
     }
-  }, {
-    key: "scrollDirection",
-    get: function get() {
-      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);
-      if (hasWidthSettings && !hasHeightSettings) {
-        scrollDirection = 'horizontal';
-      } else if (hasHeightSettings && !hasWidthSettings) {
-        scrollDirection = 'vertical';
-      } else if (hasWidthSettings && hasHeightSettings) {
-        scrollDirection = 'both';
+    if (prevProps.data !== data || prevProps.columns !== columns) {
+      if (this.hasFixedColumn) {
+        this.calculateVerticalShadow();
       }
-      return scrollDirection;
-    }
-  }, {
-    key: "isDataEmpty",
-    get: function get() {
-      return this.asProps.data.length === 0;
     }
-  }, {
-    key: "getHeadProps",
-    value: function getHeadProps() {
-      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;
-      var shadowVertical = this.state.shadowVertical;
-      var sideIndentsValue = variant === 'card' ? 'wide' : sideIndents;
-      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, headerProps), {}, {
-        columns: this.columns,
-        treeColumns: this.treeColumns,
-        use: use,
-        tableRef: this.tableRef,
-        compact: Boolean(compact),
-        sort: sort,
-        onSortChange: onSortChange,
-        getI18nText: getI18nText,
-        uid: uid,
-        ref: headerProps !== null && headerProps !== void 0 && headerProps.ref ? (0, _ref9.forkRef)(this.headerRef, headerProps.ref) : this.headerRef,
-        gridAreaGroupMap: this.gridAreaGroupMap,
-        gridTemplateColumns: gridTemplateColumns,
-        gridTemplateAreas: gridTemplateAreas,
-        sideIndents: sideIndentsValue,
-        totalRows: this.totalRows,
-        selectedRows: selectedRows,
-        flatRows: this.getFlatRows(),
-        onChangeSelectAll: onSelectedRowsChange,
-        getFixedStyle: this.getFixedStyle,
-        onCellClick: this.handleCellClick,
-        shadowVertical: shadowVertical,
-        scrollDirection: this.scrollDirection,
-        isDataEmpty: this.isDataEmpty
+    if (prevProps.selectedRows !== selectedRows && selectedRows !== undefined) {
+      const selectedRowsSet = new Set(selectedRows);
+      const allChecked = [];
+      const allUnchecked = [];
+      this.flatRows.forEach(row => {
+        if (selectedRowsSet.has(row[UNIQ_ROW_KEY])) {
+          allChecked.push(row[UNIQ_ROW_KEY]);
+        } else {
+          allUnchecked.push(row[UNIQ_ROW_KEY]);
+        }
       });
+      if (allChecked.length === data.length) {
+        this.setSelectAllMessage(true);
+      } else if (allUnchecked.length === data.length) {
+        this.setSelectAllMessage(false);
+      }
     }
-  }, {
-    key: "getBodyProps",
-    value: function getBodyProps() {
-      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;
-      var shadowVertical = this.state.shadowVertical;
-      return {
-        accordionDuration: accordionDuration,
-        accordionAnimationRows: accordionAnimationRows,
-        accordionMode: accordionMode,
-        columns: this.columns,
-        rows: this.getRows(),
-        flatRows: this.getFlatRows(),
-        use: use,
-        compact: Boolean(compact),
-        gridTemplateColumns: gridTemplateColumns,
-        gridTemplateAreas: gridTemplateAreas,
-        loading: loading,
-        headerHeight: this.getHeaderHeight(),
-        stickyHeader: headerProps === null || headerProps === void 0 ? void 0 : headerProps.sticky,
-        getI18nText: getI18nText,
-        expandedRows: this.state.expandedRows,
-        onExpandRow: this.onExpandRow,
-        spinnerRef: this.spinnerRef,
-        scrollTop: this.state.scrollTop,
-        scrollDirection: this.state.scrollDirection,
-        tableContainerRef: this.tableContainerRef,
-        tableRef: this.tableRef,
-        scrollAreaRef: this.scrollAreaRef,
-        onBackFromAccordion: this.handleBackFromAccordion,
-        virtualScroll: virtualScroll,
-        hasGroups: this.hasGroups,
-        uid: uid,
-        rowProps: this.getRows().length > 0 ? rowProps : undefined,
-        renderCell: this.getRows().length > 0 ? renderCell : undefined,
-        renderEmptyData: renderEmptyData,
-        sideIndents: sideIndents,
-        selectedRows: selectedRows,
-        onSelectRow: this.handleSelectRow,
-        getFixedStyle: this.getFixedStyle,
-        onCellClick: this.handleCellClick,
-        rawData: rawData,
-        shadowVertical: shadowVertical,
-        renderCellOverlay: renderCellOverlay,
-        limit: limit,
-        variant: variant,
-        totalRows: totalRows
-      };
+  }
+  componentWillUnmount() {
+    if ((0, _canUseDOM.default)()) {
+      document.removeEventListener('scroll', this.handleDocumentScroll);
     }
-  }, {
-    key: "setInert",
-    value: function setInert(value) {
-      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 || cells.forEach(function (cell) {
-        if (value === true) {
-          cell.setAttribute('inert', '');
+    this.state.expandedRows?.clear();
+  }
+  get totalRows() {
+    const {
+      totalRows
+    } = this.asProps;
+    const flatRows = this.getFlatRows();
+    const expandedRows = this.state.expandedRows;
+    const expandedRowsCount = Array.from(expandedRows).reduce((acc, rowKey) => {
+      const dtRow = flatRows.find(el => el[UNIQ_ROW_KEY] === rowKey);
+      if (dtRow) {
+        const expandedRows = dtRow[ACCORDION];
+        if (Array.isArray(expandedRows)) {
+          acc = acc + expandedRows.length;
         } else {
-          cell.removeAttribute('inert');
+          acc = acc + 1;
         }
-      });
+      }
+      return acc;
+    }, 0);
+    if (totalRows !== undefined) {
+      return totalRows + expandedRowsCount;
     }
-  }, {
-    key: "initFocusableCell",
-    value: function initFocusableCell(initCell) {
-      var _initCell$, _initCell$2;
-      var hasFocusable = this.hasFocusableInHeader();
-      var initRow = (_initCell$ = initCell === null || initCell === void 0 ? void 0 : initCell[0]) !== null && _initCell$ !== void 0 ? _initCell$ : 0;
-      var initCol = (_initCell$2 = initCell === null || initCell === void 0 ? void 0 : initCell[1]) !== null && _initCell$2 !== void 0 ? _initCell$2 : 0;
-      if (hasFocusable) {
-        this.focusedCell = [initRow, initCol];
+    const rows = this.getRows().reduce((acc, item) => {
+      if (Array.isArray(item)) {
+        acc = acc + item.length;
       } else {
-        this.focusedCell = [initRow + 1, initCol];
+        acc = acc + 1;
       }
+      return acc;
+    }, 0);
+    return rows + expandedRowsCount;
+  }
+  get scrollDirection() {
+    const {
+      w,
+      wMax,
+      h,
+      hMax
+    } = this.asProps;
+    let scrollDirection = undefined;
+    const hasWidthSettings = Boolean(w) || Boolean(wMax);
+    const hasHeightSettings = Boolean(h) && h !== 'fit-content' || Boolean(hMax);
+    if (hasWidthSettings && !hasHeightSettings) {
+      scrollDirection = 'horizontal';
+    } else if (hasHeightSettings && !hasWidthSettings) {
+      scrollDirection = 'vertical';
+    } else if (hasWidthSettings && hasHeightSettings) {
+      scrollDirection = 'both';
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref2;
-      var SDataTable = _baseComponents.Box;
-      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],
-        offsetRightSum = _this$getScrollOffset2[1];
-      var _this$gridSettings3 = this.gridSettings,
-        gridTemplateColumns = _this$gridSettings3.gridTemplateColumns,
-        gridTemplateAreas = _this$gridSettings3.gridTemplateAreas;
-      var Head = (0, _findComponent["default"])(Children, ['DataTable.Head']);
-      var headerPropsToCheck = headerProps !== null && headerProps !== void 0 ? headerProps : Head === null || Head === void 0 ? void 0 : Head.props;
-      var headerHeight = (headerProps === null || headerProps === void 0 ? void 0 : headerProps.h) || this.getHeaderHeight();
-      var topOffset = headerPropsToCheck !== null && headerPropsToCheck !== void 0 && headerPropsToCheck.sticky || headerPropsToCheck !== null && headerPropsToCheck !== void 0 && headerPropsToCheck.withScrollBar ? headerHeight : undefined;
-      var width = w !== null && w !== void 0 ? w : this.columns.some(function (c) {
-        return c.gtcWidth === 'auto' || c.gtcWidth === '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)");
+    return scrollDirection;
+  }
+  get isDataEmpty() {
+    return this.asProps.data.length === 0;
+  }
+  getHeadProps() {
+    const {
+      use,
+      compact,
+      sort,
+      onSortChange,
+      getI18nText,
+      uid,
+      headerProps,
+      onSelectedRowsChange,
+      selectedRows,
+      sideIndents,
+      variant
+    } = this.asProps;
+    const {
+      gridTemplateColumns,
+      gridTemplateAreas
+    } = this.gridSettings;
+    const {
+      shadowVertical
+    } = this.state;
+    const sideIndentsValue = variant === 'card' ? 'wide' : sideIndents;
+    return {
+      ...headerProps,
+      columns: this.columns,
+      treeColumns: this.treeColumns,
+      use,
+      tableRef: this.tableRef,
+      compact: Boolean(compact),
+      sort,
+      onSortChange,
+      getI18nText,
+      uid,
+      ref: headerProps?.ref ? (0, _ref3.forkRef)(this.headerRef, headerProps.ref) : this.headerRef,
+      gridAreaGroupMap: this.gridAreaGroupMap,
+      gridTemplateColumns,
+      gridTemplateAreas,
+      sideIndents: sideIndentsValue,
+      totalRows: this.totalRows,
+      selectedRows,
+      flatRows: this.getFlatRows(),
+      onChangeSelectAll: onSelectedRowsChange,
+      getFixedStyle: this.getFixedStyle,
+      onCellClick: this.handleCellClick,
+      shadowVertical,
+      scrollDirection: this.scrollDirection,
+      isDataEmpty: this.isDataEmpty
+    };
+  }
+  getBodyProps() {
+    const {
+      use,
+      compact,
+      loading,
+      getI18nText,
+      virtualScroll,
+      uid,
+      rowProps,
+      renderCell,
+      headerProps,
+      renderEmptyData,
+      sideIndents,
+      selectedRows,
+      accordionDuration,
+      accordionMode,
+      data: rawData,
+      renderCellOverlay,
+      limit,
+      variant,
+      totalRows,
+      accordionAnimationRows
+    } = this.asProps;
+    const {
+      gridTemplateColumns,
+      gridTemplateAreas
+    } = this.gridSettings;
+    const {
+      shadowVertical
+    } = this.state;
+    return {
+      accordionDuration,
+      accordionAnimationRows,
+      accordionMode,
+      columns: this.columns,
+      rows: this.getRows(),
+      flatRows: this.getFlatRows(),
+      use,
+      compact: Boolean(compact),
+      gridTemplateColumns,
+      gridTemplateAreas,
+      loading,
+      headerHeight: this.getHeaderHeight(),
+      stickyHeader: headerProps?.sticky,
+      getI18nText,
+      expandedRows: this.state.expandedRows,
+      onExpandRow: this.onExpandRow,
+      spinnerRef: this.spinnerRef,
+      scrollTop: this.state.scrollTop,
+      scrollDirection: this.state.scrollDirection,
+      tableContainerRef: this.tableContainerRef,
+      tableRef: this.tableRef,
+      scrollAreaRef: this.scrollAreaRef,
+      onBackFromAccordion: this.handleBackFromAccordion,
+      virtualScroll,
+      hasGroups: this.hasGroups,
+      uid,
+      rowProps: this.getRows().length > 0 ? rowProps : undefined,
+      renderCell: this.getRows().length > 0 ? renderCell : undefined,
+      renderEmptyData,
+      sideIndents,
+      selectedRows,
+      onSelectRow: this.handleSelectRow,
+      getFixedStyle: this.getFixedStyle,
+      onCellClick: this.handleCellClick,
+      rawData,
+      shadowVertical,
+      renderCellOverlay,
+      limit,
+      variant,
+      totalRows
+    };
+  }
+  setInert(value) {
+    const cells = this.tableRef.current?.querySelectorAll('[role=gridcell], [role=columnheader]');
+    cells?.forEach(cell => {
+      if (value === true) {
+        cell.setAttribute('inert', '');
+      } else {
+        cell.removeAttribute('inert');
       }
-      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,
-        "h": h,
-        "hMax": hMax,
-        "hMin": hMin,
-        "shadow": true,
-        "ref": this.scrollAreaRef,
-        "container": this.tableContainerRef,
-        "styles": scrollStyles,
-        "onScroll": this.handleScroll,
-        "disableAutofocusToContent": true,
-        "onResize": this.handleContainerResizeEnd
-      }), /*#__PURE__*/React.createElement(_baseComponents.ScrollArea.Container, {
-        tabIndex: -1
-        // @ts-ignore
-        ,
-        scrollDirection: this.scrollDirection
-        // @ts-ignore
-        ,
-        loading: loading,
-        headerHeight: "".concat(headerHeight, "px"),
-        leftScrollPadding: "".concat(offsetLeftSum, "px"),
-        rightScrollPadding: "".concat(offsetRightSum, "px")
-      }, /*#__PURE__*/React.createElement(SDataTable, _ref2.cn("SDataTable", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
-        "ref": (0, _ref9.forkRef)(this.tableRef, this.tableContainerRef),
+    });
+  }
+  initFocusableCell(initCell) {
+    const hasFocusable = this.hasFocusableInHeader();
+    const initRow = initCell?.[0] ?? 0;
+    const initCol = initCell?.[1] ?? 0;
+    if (hasFocusable) {
+      this.focusedCell = [initRow, initCol];
+    } else {
+      this.focusedCell = [initRow + 1, initCol];
+    }
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref2;
+    const SDataTable = _baseComponents.Box;
+    const {
+      Children,
+      styles,
+      w,
+      wMax,
+      wMin,
+      h,
+      hMax,
+      hMin,
+      virtualScroll,
+      children,
+      headerProps,
+      loading,
+      selectedRows
+    } = this.asProps;
+    const [offsetLeftSum, offsetRightSum] = this.getScrollOffsetValue();
+    const {
+      gridTemplateColumns,
+      gridTemplateAreas
+    } = this.gridSettings;
+    const Head = (0, _findComponent.default)(Children, ['DataTable.Head']);
+    const headerPropsToCheck = headerProps ?? Head?.props;
+    const headerHeight = headerProps?.h || this.getHeaderHeight();
+    const topOffset = headerPropsToCheck?.sticky || headerPropsToCheck?.withScrollBar ? headerHeight : undefined;
+    const width = w ?? (this.columns.some(c => c.gtcWidth === 'auto' || c.gtcWidth === '1fr') ? '100%' : undefined);
+    let gridTemplateRows = undefined;
+    if (virtualScroll && typeof virtualScroll !== 'boolean' && 'rowHeight' in virtualScroll) {
+      gridTemplateRows = `auto auto repeat(${this.totalRows}, minmax(${virtualScroll.rowHeight}px, auto)`;
+    }
+    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,
+      "h": h,
+      "hMax": hMax,
+      "hMin": hMin,
+      "shadow": true,
+      "ref": this.scrollAreaRef,
+      "container": this.tableContainerRef,
+      "styles": scrollStyles,
+      "onScroll": this.handleScroll,
+      "disableAutofocusToContent": true,
+      "onResize": this.handleContainerResizeEnd
+    }), /*#__PURE__*/React.createElement(_baseComponents.ScrollArea.Container, {
+      tabIndex: -1
+      // @ts-ignore
+      ,
+      scrollDirection: this.scrollDirection
+      // @ts-ignore
+      ,
+      loading: loading,
+      headerHeight: `${headerHeight}px`,
+      leftScrollPadding: `${offsetLeftSum}px`,
+      rightScrollPadding: `${offsetRightSum}px`
+    }, /*#__PURE__*/React.createElement(SDataTable, _ref2.cn("SDataTable", {
+      ...(0, _core.assignProps)({
+        "ref": (0, _ref3.forkRef)(this.tableRef, this.tableContainerRef),
         "role": 'grid',
         "onKeyDown": this.handleKeyDown,
         "onKeyUp": this.handleKeyUp,
@@ -932,345 +886,320 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         "use:h": undefined,
         "use:hMax": undefined,
         "use:hMin": undefined
-      }, _ref))), children ? /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DataTable.Head, null), /*#__PURE__*/React.createElement(DataTable.Body, null)))), (headerPropsToCheck === null || headerPropsToCheck === void 0 ? void 0 : headerPropsToCheck.withScrollBar) && topOffset && !loading && /*#__PURE__*/React.createElement(_baseComponents.ScrollArea.Bar, {
-        orientation: "horizontal",
-        top: topOffset - SCROLL_BAR_HEIGHT,
-        zIndex: 20
-      }), !loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_baseComponents.ScrollArea.Bar, {
-        orientation: "horizontal",
-        zIndex: 20
-      }), /*#__PURE__*/React.createElement(_baseComponents.ScrollArea.Bar, {
-        orientation: "vertical",
-        zIndex: 20
-      })), selectedRows !== undefined && /*#__PURE__*/React.createElement(_baseComponents.ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
-        "aria-live": 'polite',
-        "role": 'status'
-      }), this.state.selectAllMessage));
-    }
-  }, {
-    key: "calculateColumnsFromConfig",
-    value: function calculateColumnsFromConfig() {
-      var _this3 = this;
-      var _this$props = this.props,
-        columns = _this$props.columns,
-        data = _this$props.data,
-        selectedRows = _this$props.selectedRows;
-      this.hasGroups = columns.some(function (column) {
-        return 'columns' in column && column.columns.some(function (col) {
-          return col.children !== null;
-        });
+      }, _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?.withScrollBar && topOffset && !loading && /*#__PURE__*/React.createElement(_baseComponents.ScrollArea.Bar, {
+      orientation: "horizontal",
+      top: topOffset - SCROLL_BAR_HEIGHT,
+      zIndex: 20
+    }), !loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_baseComponents.ScrollArea.Bar, {
+      orientation: "horizontal",
+      zIndex: 20
+    }), /*#__PURE__*/React.createElement(_baseComponents.ScrollArea.Bar, {
+      orientation: "vertical",
+      zIndex: 20
+    })), selectedRows !== undefined && /*#__PURE__*/React.createElement(_baseComponents.ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
+      "aria-live": 'polite',
+      "role": 'status'
+    }), this.state.selectAllMessage));
+  }
+  calculateColumnsFromConfig() {
+    const {
+      columns,
+      data,
+      selectedRows
+    } = this.props;
+    this.hasGroups = columns.some(column => {
+      return 'columns' in column && column.columns.some(col => {
+        return col.children !== null;
       });
-      var groupIndex = 0;
-      var gridColumnIndex = selectedRows ? 2 : 1;
-      var calculateGridTemplateColumn = this.calculateGridTemplateColumn.bind(this);
-      var calculatedColumns = [];
-      var treeColumns = [];
-      if (selectedRows) {
-        var column = {
-          name: SELECT_ALL.toString(),
-          gtcWidth: 'min-content',
-          alignItems: 'flex-start',
-          children: ''
-        };
-        calculatedColumns.push(column);
-      }
-      var makeColumn = function makeColumn(columnElement, parent, isFirst, isLast, hasGroups) {
-        var _columnElement$fixed, _ref3, _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 = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, columnElement), {}, {
-          name: childIsColumn(columnElement) ? columnElement.name : '',
-          gtcWidth: childIsColumn(columnElement) ? calculateGridTemplateColumn(columnElement) : '',
-          fixed: (_columnElement$fixed = columnElement.fixed) !== null && _columnElement$fixed !== void 0 ? _columnElement$fixed : hasGroups ? parent === null || parent === void 0 ? void 0 : parent.fixed : undefined,
-          borders: (_ref3 = (_columnElement$border = columnElement.borders) !== null && _columnElement$border !== void 0 ? _columnElement$border : leftBordersFromParent) !== null && _ref3 !== void 0 ? _ref3 : rightBordersFromParent,
-          parent: parent
-        });
-        if (column.fixed) {
-          _this3.hasFixedColumn = true;
-        }
-        return column;
-      };
-      var childIsColumn = function childIsColumn(child) {
-        return !('columns' in child);
+    });
+    let groupIndex = 0;
+    let gridColumnIndex = selectedRows ? 2 : 1;
+    const calculateGridTemplateColumn = this.calculateGridTemplateColumn.bind(this);
+    const calculatedColumns = [];
+    const treeColumns = [];
+    if (selectedRows) {
+      const column = {
+        name: SELECT_ALL.toString(),
+        gtcWidth: 'min-content',
+        alignItems: 'flex-start',
+        children: ''
       };
-      var childIsGroup = function childIsGroup(child) {
-        return 'columns' in child;
+      calculatedColumns.push(column);
+    }
+    const makeColumn = (columnElement, parent, isFirst, isLast, hasGroups) => {
+      const leftBordersFromParent = isFirst && (parent?.borders === 'both' || parent?.borders === 'left') ? 'left' : undefined;
+      const rightBordersFromParent = isLast && (parent?.borders === 'both' || parent?.borders === 'right') ? 'right' : undefined;
+      const column = {
+        ...columnElement,
+        name: childIsColumn(columnElement) ? columnElement.name : '',
+        gtcWidth: childIsColumn(columnElement) ? calculateGridTemplateColumn(columnElement) : '',
+        fixed: columnElement.fixed ?? (hasGroups ? parent?.fixed : undefined),
+        borders: columnElement.borders ?? leftBordersFromParent ?? rightBordersFromParent,
+        parent
       };
-      var setShowShadows = function setShowShadows(col, i) {
-        var prevCol = treeColumns[i - 1];
-        if ('columns' in prevCol && prevCol.columns) {
-          prevCol = prevCol.columns[prevCol.columns.length - 1];
-        }
-        if (prevCol.fixed && !col.fixed) {
-          prevCol.showShadowVertical = true;
-        } else if (!prevCol.fixed && col.fixed) {
-          col.showShadowVertical = true;
+      if (column.fixed) {
+        this.hasFixedColumn = true;
+      }
+      return column;
+    };
+    const childIsColumn = child => {
+      return !('columns' in child);
+    };
+    const childIsGroup = child => {
+      return 'columns' in child;
+    };
+    const setShowShadows = (col, i) => {
+      let prevCol = treeColumns[i - 1];
+      if ('columns' in prevCol && prevCol.columns) {
+        prevCol = prevCol.columns[prevCol.columns.length - 1];
+      }
+      if (prevCol.fixed && !col.fixed) {
+        prevCol.showShadowVertical = true;
+      } else if (!prevCol.fixed && col.fixed) {
+        col.showShadowVertical = true;
+      }
+    };
+    columns.forEach((child, i) => {
+      if (childIsColumn(child)) {
+        const col = makeColumn(child);
+        col.gridArea = `1 / ${gridColumnIndex} / ${this.hasGroups ? '3' : '2'} / ${gridColumnIndex + 1}`;
+        gridColumnIndex++;
+        calculatedColumns.push(col);
+        treeColumns.push(col);
+        if (i > 0) {
+          setShowShadows(col, i);
         }
-      };
-      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);
+      } else if (childIsGroup(child)) {
+        const Group = makeColumn(child);
+        const childCount = child.columns.length;
+        const initGridColumn = gridColumnIndex;
+        const groupedRow = this.hasGroups ? 2 : 1;
+        Group.columns = [];
+        Group.children = child.children;
+        child.columns.forEach((child, j) => {
+          const isFirst = j === 0;
+          const isLast = j === childCount - 1;
+          const col = makeColumn(child, Group, isFirst, isLast, this.hasGroups);
+          if (i === 0 && j === 0 && data.some(d => d[ACCORDION])) {
+            gridColumnIndex++;
+            col.gridArea = `${groupedRow} / ${gridColumnIndex - 1} / ${groupedRow + 1} / ${gridColumnIndex + 1}`;
+          } else {
+            col.gridArea = `${groupedRow} / ${gridColumnIndex} / ${groupedRow + 1} / ${gridColumnIndex + 1}`;
+          }
+          col.gridArea = `${groupedRow} / ${gridColumnIndex} / ${groupedRow + 1} / ${gridColumnIndex + 1}`;
           gridColumnIndex++;
           calculatedColumns.push(col);
-          treeColumns.push(col);
-          if (i > 0) {
+          if (isFirst && i > 0) {
             setShowShadows(col, i);
           }
-        } else if (childIsGroup(child)) {
-          var Group = makeColumn(child);
-          var childCount = child.columns.length;
-          var initGridColumn = gridColumnIndex;
-          var groupedRow = _this3.hasGroups ? 2 : 1;
-          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, _this3.hasGroups);
-            if (i === 0 && j === 0 && data.some(function (d) {
-              return d[ACCORDION];
-            })) {
-              gridColumnIndex++;
-              col.gridArea = "".concat(groupedRow, " / ").concat(gridColumnIndex - 1, " / ").concat(groupedRow + 1, " / ").concat(gridColumnIndex + 1);
-            } else {
-              col.gridArea = "".concat(groupedRow, " / ").concat(gridColumnIndex, " / ").concat(groupedRow + 1, " / ").concat(gridColumnIndex + 1);
-            }
-            col.gridArea = "".concat(groupedRow, " / ").concat(gridColumnIndex, " / ").concat(groupedRow + 1, " / ").concat(gridColumnIndex + 1);
-            gridColumnIndex++;
-            calculatedColumns.push(col);
-            if (isFirst && i > 0) {
-              setShowShadows(col, i);
-            }
-            (_Group$columns = Group.columns) === null || _Group$columns === void 0 || _Group$columns.push(col);
-          });
-          treeColumns.push(Group);
-          _this3.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
-          groupIndex++;
-        }
-      });
-      var gridTemplateColumns = calculatedColumns.map(function (c) {
-        return c.gtcWidth;
-      });
-      var gridTemplateAreas = calculatedColumns.map(function (c) {
-        return c.name;
-      });
-      this.gridSettings = {
-        gridTemplateColumns: gridTemplateColumns,
-        gridTemplateAreas: gridTemplateAreas
-      };
-      return [calculatedColumns, treeColumns];
-    }
-  }, {
-    key: "getFlatRows",
-    value: function getFlatRows() {
-      var data = this.props.data;
-      if (this.tmpData === data && this.flatRows) {
-        return this.flatRows;
+          Group.columns?.push(col);
+        });
+        treeColumns.push(Group);
+        this.gridAreaGroupMap.set(groupIndex, `1 / ${initGridColumn} / 2 / ${gridColumnIndex}`);
+        groupIndex++;
       }
-      this.flatRows = this.getRows().flat();
+    });
+    const gridTemplateColumns = calculatedColumns.map(c => c.gtcWidth);
+    const gridTemplateAreas = calculatedColumns.map(c => c.name);
+    this.gridSettings = {
+      gridTemplateColumns,
+      gridTemplateAreas
+    };
+    return [calculatedColumns, treeColumns];
+  }
+  getFlatRows() {
+    const {
+      data
+    } = this.props;
+    if (this.tmpData === data && this.flatRows) {
       return this.flatRows;
     }
-  }, {
-    key: "getRows",
-    value: function getRows() {
-      var _this4 = this;
-      var columns = this.columns;
-      // @ts-ignore
-      var _this$props2 = this.props,
-        data = _this$props2.data,
-        uid = _this$props2.uid,
-        uniqueRowKey = _this$props2.uniqueRowKey;
-      if (this.tmpData === data) {
-        return this.calculatedRows;
-      }
-      this.tmpData = data;
-      var rows = [];
-      var columnNames = columns.map(function (column) {
-        return column.name;
-      });
-      var rowIndex = 0;
-      var gridRowIndex = 0;
-      var id = 100000000; // need this for gen keys by toString(36)
+    this.flatRows = this.getRows().flat();
+    return this.flatRows;
+  }
+  getRows() {
+    const columns = this.columns;
+    // @ts-ignore
+    const {
+      data,
+      uid,
+      uniqueRowKey
+    } = this.props;
+    if (this.tmpData === data) {
+      return this.calculatedRows;
+    }
+    this.tmpData = data;
+    const rows = [];
+    const columnNames = columns.map(column => column.name);
+    let rowIndex = 0;
+    let gridRowIndex = 0;
+    const id = 100000000; // need this for gen keys by toString(36)
 
-      var _makeDtRow = function makeDtRow(row, excludeColumns) {
-        var columns = new Set(columnNames);
-        var accordionInCell = null;
-        var rowKey = row[UNIQ_ROW_KEY];
-        if (!rowKey) {
-          if (uniqueRowKey) {
-            // @ts-ignore
-            var keyValue = row[uniqueRowKey];
-            if (keyValue instanceof _MergedCells.MergedRowsCell) {
-              rowKey = keyValue.value;
-            } else {
-              rowKey = keyValue;
-            }
+    const makeDtRow = (row, excludeColumns) => {
+      const columns = new Set(columnNames);
+      let accordionInCell = null;
+      let rowKey = row[UNIQ_ROW_KEY];
+      if (!rowKey) {
+        if (uniqueRowKey) {
+          // @ts-ignore
+          const keyValue = row[uniqueRowKey];
+          if (keyValue instanceof _MergedCells.MergedRowsCell) {
+            rowKey = keyValue.value;
           } else {
-            rowKey = "".concat(uid, "_").concat((rowIndex + id).toString(36));
+            rowKey = keyValue;
           }
+        } else {
+          rowKey = `${uid}_${(rowIndex + id).toString(36)}`;
+        }
+      }
+      const initData = {
+        /*
+          row -> DataRowItem
+          uniqueRowKey is a `keyof Data[number]` -> `keyof DataRowItem`
+        */
+        // @ts-ignore
+        [UNIQ_ROW_KEY]: rowKey,
+        [ROW_INDEX]: rowIndex,
+        [GRID_ROW_INDEX]: gridRowIndex
+      };
+      const dtRow = Object.entries(row).reduce((acc, [key, value]) => {
+        const columnsToRow = key.split(this.columnsSplitter);
+        if (columnsToRow.length === 1) {
+          acc[key] = value ?? '';
+          columns.delete(key);
+        } else {
+          acc[columnsToRow[0]] = new _MergedCells.MergedColumnsCell(value, {
+            dataKey: key,
+            size: columnsToRow.length
+          });
+          columnsToRow.forEach(value => {
+            columns.delete(value);
+          });
+        }
+        if (value?.[ACCORDION]) {
+          accordionInCell = value[ACCORDION];
+        }
+        return acc;
+      }, initData);
+      gridRowIndex++;
+      if (row[ACCORDION]) {
+        if (Array.isArray(row[ACCORDION])) {
+          dtRow[ACCORDION] = row[ACCORDION].map(item => makeDtRow(item));
+        } else if (/*#__PURE__*/React.isValidElement(row[ACCORDION])) {
+          dtRow[ACCORDION] = row[ACCORDION];
+          gridRowIndex++;
         }
-        var initData = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, UNIQ_ROW_KEY, rowKey), ROW_INDEX, rowIndex), GRID_ROW_INDEX, gridRowIndex);
-        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(_this4.columnsSplitter);
+      } else if (accordionInCell) {
+        gridRowIndex++;
+      }
+      excludeColumns?.forEach(value => {
+        columns.delete(value);
+      });
+      if (columns.size > 0) {
+        columns.forEach(value => {
+          dtRow[value] = '';
+        });
+      }
+      return dtRow;
+    };
+    data.forEach(row => {
+      const groupedRows = row[ROW_GROUP];
+      if (groupedRows && groupedRows.length > 1) {
+        const innerRows = [];
+        const groupedKeys = [];
+        const groupedRowData = Object.entries(row).reduce((acc, [key, value]) => {
+          const accordion = Array.isArray(row[ACCORDION]) ? row[ACCORDION].map(item => makeDtRow(item)) : row[ACCORDION];
+          acc[key] = new _MergedCells.MergedRowsCell(value, groupedRows.length, accordion);
+          const columnsToRow = key.split(this.columnsSplitter);
           if (columnsToRow.length === 1) {
-            acc[key] = value !== null && value !== void 0 ? value : '';
-            columns["delete"](key);
+            groupedKeys.push(key);
           } else {
-            acc[columnsToRow[0]] = new _MergedCells.MergedColumnsCell(value, {
-              dataKey: key,
-              size: columnsToRow.length
-            });
-            columnsToRow.forEach(function (value) {
-              columns["delete"](value);
-            });
-          }
-          if (value !== null && value !== void 0 && value[ACCORDION]) {
-            accordionInCell = value[ACCORDION];
+            groupedKeys.push(...columnsToRow);
           }
           return acc;
-        }, initData);
-        gridRowIndex++;
-        if (row[ACCORDION]) {
-          if (Array.isArray(row[ACCORDION])) {
-            dtRow[ACCORDION] = row[ACCORDION].map(function (item) {
-              return _makeDtRow(item);
-            });
-          } else if (/*#__PURE__*/React.isValidElement(row[ACCORDION])) {
-            dtRow[ACCORDION] = row[ACCORDION];
-            gridRowIndex++;
-          }
-        } else if (accordionInCell) {
-          gridRowIndex++;
-        }
-        excludeColumns === null || excludeColumns === void 0 || excludeColumns.forEach(function (value) {
-          columns["delete"](value);
+        }, {
+          [UNIQ_ROW_KEY]: '',
+          // will fill in makeDtRow
+          [ROW_INDEX]: -1
         });
-        if (columns.size > 0) {
-          columns.forEach(function (value) {
-            dtRow[value] = '';
-          });
-        }
-        return dtRow;
-      };
-      data.forEach(function (row) {
-        var groupedRows = row[ROW_GROUP];
-        if (groupedRows && groupedRows.length > 1) {
-          var innerRows = [];
-          var groupedKeys = [];
-          var groupedRowData = Object.entries(row).reduce(function (acc, _ref6) {
-            var _ref7 = (0, _slicedToArray2["default"])(_ref6, 2),
-              key = _ref7[0],
-              value = _ref7[1];
-            var accordion = Array.isArray(row[ACCORDION]) ? row[ACCORDION].map(function (item) {
-              return _makeDtRow(item);
-            }) : row[ACCORDION];
-            acc[key] = new _MergedCells.MergedRowsCell(value, groupedRows.length, accordion);
-            var columnsToRow = key.split(_this4.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) {
-            var dtRow;
-            if (index === 0) {
-              var rowData = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, childRow), groupedRowData);
-              dtRow = _makeDtRow(rowData);
-              dtRow[ROW_GROUP] = new Set();
-            } else {
-              var _innerRows$;
-              dtRow = _makeDtRow(childRow, groupedKeys);
-              (_innerRows$ = innerRows[0]) === null || _innerRows$ === void 0 || (_innerRows$ = _innerRows$[ROW_GROUP]) === null || _innerRows$ === void 0 || _innerRows$.add(dtRow[UNIQ_ROW_KEY]);
-            }
-            innerRows.push(dtRow);
-            if (index === groupedRows.length - 1 && row[ACCORDION]) {
-              gridRowIndex = Array.isArray(row[ACCORDION]) ? gridRowIndex + row[ACCORDION].length : gridRowIndex + 1;
-            }
-            rowIndex++;
-          });
-          rows.push(innerRows);
-        } else if ((groupedRows === null || groupedRows === void 0 ? void 0 : groupedRows.length) === 1) {
-          var dtRow = _makeDtRow((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, groupedRows[0]), row));
-          rows.push(dtRow);
-          rowIndex++;
-        } else {
-          var _dtRow = _makeDtRow(row);
-          rows.push(_dtRow);
+        groupedRows.forEach((childRow, index) => {
+          let dtRow;
+          if (index === 0) {
+            const rowData = {
+              ...childRow,
+              ...groupedRowData
+            };
+            dtRow = makeDtRow(rowData);
+            dtRow[ROW_GROUP] = new Set();
+          } else {
+            dtRow = makeDtRow(childRow, groupedKeys);
+            innerRows[0]?.[ROW_GROUP]?.add(dtRow[UNIQ_ROW_KEY]);
+          }
+          innerRows.push(dtRow);
+          if (index === groupedRows.length - 1 && row[ACCORDION]) {
+            gridRowIndex = Array.isArray(row[ACCORDION]) ? gridRowIndex + row[ACCORDION].length : gridRowIndex + 1;
+          }
           rowIndex++;
-        }
-      });
-      this.calculatedRows = rows;
-      return rows;
-    }
-  }, {
-    key: "calculateGridTemplateColumn",
-    value: function calculateGridTemplateColumn(c) {
-      var _ref8;
-      return (_ref8 = /*#__PURE__*/React.isValidElement(c) ? c.props.gtcWidth : c.gtcWidth) !== null && _ref8 !== void 0 ? _ref8 : this.props.defaultGridTemplateColumnWidth;
-    }
-  }, {
-    key: "getHeaderHeight",
-    value: function getHeaderHeight() {
-      var _this$headerRef$curre4;
-      var header = (_this$headerRef$curre4 = this.headerRef.current) === null || _this$headerRef$curre4 === void 0 ? void 0 : _this$headerRef$curre4.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;
-        var item = header === null || header === void 0 ? void 0 : header.item(i);
-        var columnHeight = item === null || item === void 0 ? void 0 : item.getBoundingClientRect().height;
-        if (item instanceof HTMLElement && item.dataset.groupContainer) {
-          var _item$children$item$g, _item$children$item, _item$children$item$g2, _item$children$item2;
-          var groupHeight = (_item$children$item$g = (_item$children$item = item.children.item(0)) === null || _item$children$item === void 0 ? void 0 : _item$children$item.getBoundingClientRect().height) !== null && _item$children$item$g !== void 0 ? _item$children$item$g : 0;
-          var cellHeight = (_item$children$item$g2 = (_item$children$item2 = item.children.item(1)) === null || _item$children$item2 === void 0 ? void 0 : _item$children$item2.getBoundingClientRect().height) !== null && _item$children$item$g2 !== void 0 ? _item$children$item$g2 : 0;
-          columnHeight = groupHeight + cellHeight;
-        }
-        if (columnHeight) {
-          height = columnHeight;
-          break;
-        }
+        });
+        rows.push(innerRows);
+      } else if (groupedRows?.length === 1) {
+        const dtRow = makeDtRow({
+          ...groupedRows[0],
+          ...row
+        });
+        rows.push(dtRow);
+        rowIndex++;
+      } else {
+        const dtRow = makeDtRow(row);
+        rows.push(dtRow);
+        rowIndex++;
       }
-      return height;
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      if (props.expandedRows === state.expandedRows || props.expandedRows === undefined) {
-        return null;
+    });
+    this.calculatedRows = rows;
+    return rows;
+  }
+  calculateGridTemplateColumn(c) {
+    return (/*#__PURE__*/React.isValidElement(c) ? c.props.gtcWidth : c.gtcWidth) ?? this.props.defaultGridTemplateColumnWidth;
+  }
+  getHeaderHeight() {
+    const header = this.headerRef.current?.children;
+    let height = 0;
+    for (let i = 0; i < (header?.length ?? 0); i++) {
+      const item = header?.item(i);
+      let columnHeight = item?.getBoundingClientRect().height;
+      if (item instanceof HTMLElement && item.dataset.groupContainer) {
+        const groupHeight = item.children.item(0)?.getBoundingClientRect().height ?? 0;
+        const cellHeight = item.children.item(1)?.getBoundingClientRect().height ?? 0;
+        columnHeight = groupHeight + cellHeight;
+      }
+      if (columnHeight) {
+        height = columnHeight;
+        break;
       }
-      return {
-        expandedRows: props.expandedRows
-      };
     }
-  }]);
-}(_core.Component);
-(0, _defineProperty2["default"])(DataTableRoot, "displayName", 'DataTable');
-(0, _defineProperty2["default"])(DataTableRoot, "style", style);
-(0, _defineProperty2["default"])(DataTableRoot, "enhance", [(0, _uniqueID["default"])(), (0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages)]);
-(0, _defineProperty2["default"])(DataTableRoot, "defaultProps", {
+    return height;
+  }
+}
+(0, _defineProperty2.default)(DataTableRoot, "displayName", 'DataTable');
+(0, _defineProperty2.default)(DataTableRoot, "style", style);
+(0, _defineProperty2.default)(DataTableRoot, "enhance", [(0, _uniqueID.default)(), (0, _i18nEnhance.default)(_intergalacticDynamicLocales.localizedMessages)]);
+(0, _defineProperty2.default)(DataTableRoot, "defaultProps", {
   use: 'primary',
   defaultGridTemplateColumnWidth: 'auto',
   defaultSelectedRows: undefined,
   h: 'fit-content',
-  renderEmptyData: function renderEmptyData() {
-    return /*#__PURE__*/React.createElement(_widgetEmpty.NoData, {
-      py: 10,
-      type: "nothing-found",
-      description: "",
-      w: "100%"
-    });
-  },
+  renderEmptyData: () => /*#__PURE__*/React.createElement(_widgetEmpty.NoData, {
+    py: 10,
+    type: "nothing-found",
+    description: "",
+    w: "100%"
+  }),
   variant: 'default',
   accordionAnimationRows: 40,
   accordionDuration: 200
 });
-var DataTable = exports.DataTable = (0, _core.createComponent)(DataTableRoot, {
+const DataTable = exports.DataTable = (0, _core.createComponent)(DataTableRoot, {
   Head: _Head.Head,
   Body: _Body.Body
 });