@semcore/data-table 16.0.0-prerelease.19 → 16.0.0-prerelease.20

package/lib/esm/components/DataTable/DataTable.mjs

@@ -9,11 +9,10 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { sstyled, createComponent, lastInteraction, assignProps, Component } from "@semcore/core";
 import * as React from "react";
-import { ScrollArea, Box } from "@semcore/base-components";
+import { ScrollArea, ScreenReaderOnly, Box } from "@semcore/base-components";
 import { Head } from "../Head/Head.mjs";
 import { Body } from "../Body/Body.mjs";
 import { hasFocusableIn, isFocusInside } from "@semcore/core/lib/utils/use/useFocusLock";
-import { getScrollOffsetValue } from "../../utils.mjs";
 import findComponent from "@semcore/core/lib/utils/findComponent";
 import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
 import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
@@ -21,41 +20,58 @@ import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import { forkRef } from "@semcore/core/lib/utils/ref";
 import { hasParent } from "@semcore/core/lib/utils/hasParent";
 import trottle from "@semcore/core/lib/utils/rafTrottle";
+import { MergedRowsCell, MergedColumnsCell } from "../Body/MergedCells.mjs";
+import { NoData } from "@semcore/widget-empty";
+/*!__reshadow-styles__:"./dataTable.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SDataTable_1rvtk_gg_{display:grid;position:relative;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_1rvtk_gg_.__gridTemplateColumns_1rvtk_gg_{grid-template-columns:var(--gridTemplateColumns_1rvtk)}.___SDataTable_1rvtk_gg_.__gridTemplateAreas_1rvtk_gg_{grid-template-areas:var(--gridTemplateAreas_1rvtk)}.___SDataTable_1rvtk_gg_.__gridTemplateRows_1rvtk_gg_{grid-template-rows:var(--gridTemplateRows_1rvtk)}",
-    "1rvtk_gg_"
-  ), {
-    "__SDataTable": "___SDataTable_1rvtk_gg_",
-    "_gridTemplateColumns": "__gridTemplateColumns_1rvtk_gg_",
-    "--gridTemplateColumns": "--gridTemplateColumns_1rvtk",
-    "_gridTemplateAreas": "__gridTemplateAreas_1rvtk_gg_",
-    "--gridTemplateAreas": "--gridTemplateAreas_1rvtk",
-    "_gridTemplateRows": "__gridTemplateRows_1rvtk_gg_",
-    "--gridTemplateRows": "--gridTemplateRows_1rvtk"
+    ".___SDataTable_1iypx_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_1iypx_gg_.__gridTemplateColumns_1iypx_gg_{grid-template-columns:var(--gridTemplateColumns_1iypx)}.___SDataTable_1iypx_gg_.__gridTemplateAreas_1iypx_gg_{grid-template-areas:var(--gridTemplateAreas_1iypx)}.___SDataTable_1iypx_gg_.__gridTemplateRows_1iypx_gg_{grid-template-rows:var(--gridTemplateRows_1iypx)}",
+    /*__inner_css_end__*/
+    "1iypx_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SDataTable": "___SDataTable_1iypx_gg_",
+    "_gridTemplateColumns": "__gridTemplateColumns_1iypx_gg_",
+    "--gridTemplateColumns": "--gridTemplateColumns_1iypx",
+    "_gridTemplateAreas": "__gridTemplateAreas_1iypx_gg_",
+    "--gridTemplateAreas": "--gridTemplateAreas_1iypx",
+    "_gridTemplateRows": "__gridTemplateRows_1iypx_gg_",
+    "--gridTemplateRows": "--gridTemplateRows_1iypx"
   })
 );
+/*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
 var scrollStyles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SScrollArea_dn57w_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_dn57w_gg_ .___SContainer_dn57w_gg_{overflow:visible;overflow:initial}.___SScrollArea_dn57w_gg_ .___SContainer_dn57w_gg_._scrollDirection_both_dn57w_gg_{overflow:auto}.___SScrollArea_dn57w_gg_ .___SContainer_dn57w_gg_._scrollDirection_horizontal_dn57w_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_dn57w_gg_ .___SContainer_dn57w_gg_._scrollDirection_vertical_dn57w_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_dn57w_gg_ .___SShadowVertical_dn57w_gg_:before{display:none}.___SScrollArea_dn57w_gg_ .___SShadowHorizontal_dn57w_gg_:after,.___SScrollArea_dn57w_gg_ .___SShadowHorizontal_dn57w_gg_:before,.___SScrollArea_dn57w_gg_ .___SShadowVertical_dn57w_gg_:after{z-index:2}",
-    "dn57w_gg_"
-  ), {
-    "__SScrollArea": "___SScrollArea_dn57w_gg_",
-    "__SContainer": "___SContainer_dn57w_gg_",
-    "_scrollDirection_both": "_scrollDirection_both_dn57w_gg_",
-    "_scrollDirection_horizontal": "_scrollDirection_horizontal_dn57w_gg_",
-    "_scrollDirection_vertical": "_scrollDirection_vertical_dn57w_gg_",
-    "__SShadowVertical": "___SShadowVertical_dn57w_gg_",
-    "__SShadowHorizontal": "___SShadowHorizontal_dn57w_gg_"
+    ".___SScrollArea_fowiu_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_fowiu_gg_ .___SContainer_fowiu_gg_{overflow:visible;overflow:initial}.___SScrollArea_fowiu_gg_ .___SContainer_fowiu_gg_._scrollDirection_both_fowiu_gg_{overflow:auto}.___SScrollArea_fowiu_gg_ .___SContainer_fowiu_gg_._scrollDirection_horizontal_fowiu_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_fowiu_gg_ .___SContainer_fowiu_gg_._scrollDirection_vertical_fowiu_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_fowiu_gg_ .___SContainer_fowiu_gg_.__loading_fowiu_gg_{overflow:hidden}.___SScrollArea_fowiu_gg_ .___SContainer_fowiu_gg_.__headerHeight_fowiu_gg_{scroll-padding-top:var(--headerHeight_fowiu)}.___SScrollArea_fowiu_gg_ .___SContainer_fowiu_gg_.__leftScrollPadding_fowiu_gg_{scroll-padding-left:var(--leftScrollPadding_fowiu)}.___SScrollArea_fowiu_gg_ .___SContainer_fowiu_gg_.__rightScrollPadding_fowiu_gg_{scroll-padding-right:var(--rightScrollPadding_fowiu)}.___SScrollArea_fowiu_gg_ .___SShadowVertical_fowiu_gg_:before{display:none}.___SScrollArea_fowiu_gg_ .___SShadowHorizontal_fowiu_gg_:after,.___SScrollArea_fowiu_gg_ .___SShadowHorizontal_fowiu_gg_:before,.___SScrollArea_fowiu_gg_ .___SShadowVertical_fowiu_gg_:after{z-index:2}",
+    /*__inner_css_end__*/
+    "fowiu_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SScrollArea": "___SScrollArea_fowiu_gg_",
+    "__SContainer": "___SContainer_fowiu_gg_",
+    "_scrollDirection_both": "_scrollDirection_both_fowiu_gg_",
+    "_scrollDirection_horizontal": "_scrollDirection_horizontal_fowiu_gg_",
+    "_scrollDirection_vertical": "_scrollDirection_vertical_fowiu_gg_",
+    "_loading": "__loading_fowiu_gg_",
+    "_headerHeight": "__headerHeight_fowiu_gg_",
+    "--headerHeight": "--headerHeight_fowiu",
+    "_leftScrollPadding": "__leftScrollPadding_fowiu_gg_",
+    "--leftScrollPadding": "--leftScrollPadding_fowiu",
+    "_rightScrollPadding": "__rightScrollPadding_fowiu_gg_",
+    "--rightScrollPadding": "--rightScrollPadding_fowiu",
+    "__SShadowVertical": "___SShadowVertical_fowiu_gg_",
+    "__SShadowHorizontal": "___SShadowHorizontal_fowiu_gg_"
   })
 );
 var ACCORDION = Symbol("accordion");
 var ROW_GROUP = Symbol("ROW_GROUP");
 var UNIQ_ROW_KEY = Symbol("UNIQ_ROW_KEY");
+var SELECT_ALL = Symbol("SELECT_ALL");
+var ROW_INDEX = Symbol("ROW_INDEX");
 var SCROLL_BAR_HEIGHT = 12;
 var DataTableRoot = /* @__PURE__ */ function(_Component) {
   _inherits(DataTableRoot2, _Component);
@@ -68,41 +84,75 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     _defineProperty(_assertThisInitialized(_this), "treeColumns", []);
     _defineProperty(_assertThisInitialized(_this), "hasGroups", false);
     _defineProperty(_assertThisInitialized(_this), "focusedCell", [-1, -1]);
+    _defineProperty(_assertThisInitialized(_this), "scrollAreaRef", /* @__PURE__ */ React.createRef());
     _defineProperty(_assertThisInitialized(_this), "tableContainerRef", /* @__PURE__ */ React.createRef());
     _defineProperty(_assertThisInitialized(_this), "tableRef", /* @__PURE__ */ React.createRef());
     _defineProperty(_assertThisInitialized(_this), "headerRef", /* @__PURE__ */ React.createRef());
     _defineProperty(_assertThisInitialized(_this), "spinnerRef", /* @__PURE__ */ React.createRef());
     _defineProperty(_assertThisInitialized(_this), "gridAreaGroupMap", /* @__PURE__ */ new Map());
+    _defineProperty(_assertThisInitialized(_this), "columnsSplitter", "/");
+    _defineProperty(_assertThisInitialized(_this), "rows", []);
+    _defineProperty(_assertThisInitialized(_this), "flatRows", []);
+    _defineProperty(_assertThisInitialized(_this), "selectAllMessageTimer", 0);
+    _defineProperty(_assertThisInitialized(_this), "headerNodesMap", /* @__PURE__ */ new Map());
     _defineProperty(_assertThisInitialized(_this), "state", {
       scrollTop: 0,
-      scrollDirection: "down"
+      scrollDirection: "down",
+      selectAllMessage: ""
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleSelectRow", function(isSelected, selectedRowIndex, row, event) {
+      var _this$asProps = _this.asProps, selectedRows = _this$asProps.selectedRows, onSelectedRowsChange = _this$asProps.onSelectedRowsChange;
+      _this$asProps.data;
+      if (selectedRows && onSelectedRowsChange) {
+        var newSelectedRows = new Set(selectedRows);
+        if (isSelected && !newSelectedRows.has(selectedRowIndex)) {
+          newSelectedRows.add(selectedRowIndex);
+        } else if (!isSelected && newSelectedRows.has(selectedRowIndex)) {
+          newSelectedRows["delete"](selectedRowIndex);
+        }
+        onSelectedRowsChange(_toConsumableArray(newSelectedRows), event, {
+          selectedRowIndex,
+          isSelected,
+          row
+        });
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "setSelectAllMessage", function(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({
+        selectAllMessage: message
+      });
+      _this.selectAllMessageTimer = window.setTimeout(function() {
+        _this.setState({
+          selectAllMessage: ""
+        });
+      }, 5e3);
     });
     _defineProperty(_assertThisInitialized(_this), "getRow", function(index) {
       var _this$tableRef$curren;
       return (_this$tableRef$curren = _this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.querySelector('[aria-rowindex="'.concat(index + 1, '"]'));
     });
     _defineProperty(_assertThisInitialized(_this), "hasFocusableInHeader", function() {
-      var hasFocusable = _this.columns.some(function(column) {
-        var columnElement = column.ref.current;
-        return columnElement && hasFocusableIn(columnElement);
-      });
-      return hasFocusable;
+      return _this.headerRef.current && hasFocusableIn(_this.headerRef.current);
     });
-    _defineProperty(_assertThisInitialized(_this), "onExpandRow", function(expandedRowIndex) {
+    _defineProperty(_assertThisInitialized(_this), "onExpandRow", function(expandedRow) {
       var expandedRows = _this.asProps.expandedRows;
-      if (expandedRows !== null && expandedRows !== void 0 && expandedRows.includes(expandedRowIndex)) {
-        _this.handlers.expandedRows(expandedRows.filter(function(row) {
-          return row !== expandedRowIndex;
-        }));
+      if (expandedRows.has(expandedRow[UNIQ_ROW_KEY])) {
+        expandedRows["delete"](expandedRow[UNIQ_ROW_KEY]);
       } else {
-        _this.handlers.expandedRows([].concat(_toConsumableArray(expandedRows), [expandedRowIndex]));
+        expandedRows.add(expandedRow[UNIQ_ROW_KEY]);
       }
+      _this.handlers.expandedRows(new Set(_toConsumableArray(expandedRows)));
     });
     _defineProperty(_assertThisInitialized(_this), "changeFocusCell", function(rowIndex, colIndex, direction) {
       var _this$tableRef$curren2, _this$tableRef$curren3;
       var hasFocusable = _this.hasFocusableInHeader();
       var maxCol = _this.columns.length - 1;
-      var maxRow = _this.totalRows;
+      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, "']"));
@@ -118,7 +168,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       }
       if (!changed) return;
       var row = _this.getRow(newRow);
-      var cell = row === null || row === void 0 ? void 0 : row.querySelector('[role=gridcell][aria-colindex="'.concat(newCol + 1, '"], [role=columnheader][aria-colindex="').concat(newCol + 1, '"]'));
+      var cell = row === null || row === void 0 ? void 0 : row.querySelector(':scope > [role=gridcell][aria-colindex="'.concat(newCol + 1, '"], :scope > [role=columnheader][aria-colindex="').concat(newCol + 1, '"], :scope > div > [role=columnheader][aria-colindex="').concat(newCol + 1, '"]'));
       if (cell instanceof HTMLElement && currentCell !== cell) {
         _this.focusedCell = [newRow, newCol];
         currentCell === null || currentCell === void 0 ? void 0 : currentCell.setAttribute("inert", "");
@@ -141,8 +191,11 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         var rowI = rowIndex;
         var colI = colIndex;
         if (direction === "left" || direction === "right") {
-          var _currentCell$parentEl;
-          if (currentCell.dataset.groupedBy === "colgroup" || Number((_currentCell$parentEl = currentCell.parentElement) === null || _currentCell$parentEl === void 0 ? void 0 : _currentCell$parentEl.getAttribute("aria-rowindex")) === 2) {
+          var _currentCell$parentEl, _currentCell$parentEl2, _row$children;
+          if (((_currentCell$parentEl = currentCell.parentElement) === null || _currentCell$parentEl === void 0 ? void 0 : _currentCell$parentEl.dataset.uiName) === "Collapse") {
+            return;
+          }
+          if (currentCell.dataset.groupedBy === "colgroup" || Number((_currentCell$parentEl2 = currentCell.parentElement) === null || _currentCell$parentEl2 === void 0 ? void 0 : _currentCell$parentEl2.getAttribute("aria-rowindex")) === 2 || Array.from((_row$children = row === null || row === void 0 ? void 0 : row.children) !== null && _row$children !== void 0 ? _row$children : []).indexOf(currentCell) > 0) {
             colI = direction === "left" ? colI - 1 : colI + 1;
           } else {
             rowI = rowI - 1;
@@ -155,6 +208,9 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
           }
         }
         _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);
       }
@@ -255,6 +311,75 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     _defineProperty(_assertThisInitialized(_this), "handleMouseMove", function() {
       _this.setInert(false);
     });
+    _defineProperty(_assertThisInitialized(_this), "handleBackFromAccordion", function(cellIndex) {
+      _this.changeFocusCell(-1, cellIndex === -1 ? 0 : cellIndex, "up");
+    });
+    _defineProperty(_assertThisInitialized(_this), "getScrollOffsetValue", function() {
+      if (!_this.headerRef.current) {
+        return [0, 0];
+      }
+      var setToMap = function setToMap2(element) {
+        if (element.getAttribute("name") && element.dataset.uiName === "Head.Column") {
+          var name = element.getAttribute("name");
+          if (name) {
+            _this.headerNodesMap.set(name, element);
+          }
+        }
+      };
+      _this.headerRef.current.childNodes.forEach(function(node) {
+        if (node instanceof HTMLElement) {
+          if (node.classList.value.includes("SGroupContainer")) {
+            node.childNodes.forEach(function(columnNode) {
+              if (columnNode instanceof HTMLElement) {
+                setToMap(columnNode);
+              }
+            });
+          } else {
+            setToMap(node);
+          }
+        }
+      });
+      return _this.columns.reduce(function(acc, column) {
+        if (column.fixed === "left") {
+          var _this$headerNodesMap$, _this$headerNodesMap$2;
+          acc[0] += (_this$headerNodesMap$ = (_this$headerNodesMap$2 = _this.headerNodesMap.get(column.name)) === null || _this$headerNodesMap$2 === void 0 ? void 0 : _this$headerNodesMap$2.getBoundingClientRect().width) !== null && _this$headerNodesMap$ !== void 0 ? _this$headerNodesMap$ : 0;
+        }
+        if (column.fixed === "right") {
+          var _this$headerNodesMap$3, _this$headerNodesMap$4;
+          acc[1] += (_this$headerNodesMap$3 = (_this$headerNodesMap$4 = _this.headerNodesMap.get(column.name)) === null || _this$headerNodesMap$4 === void 0 ? void 0 : _this$headerNodesMap$4.getBoundingClientRect().width) !== null && _this$headerNodesMap$3 !== void 0 ? _this$headerNodesMap$3 : 0;
+        }
+        return acc;
+      }, [0, 0]);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getFixedStyle", function(cell) {
+      var side = cell.fixed;
+      if (!side) return [void 0, void 0];
+      var names = cell.name.split("/");
+      var nameSideMap = {
+        left: names[0],
+        right: names[names.length - 1]
+      };
+      var name = nameSideMap[side];
+      var index = _this.columns.findIndex(function(column) {
+        return column.name === name;
+      });
+      if (index === -1) return [void 0, void 0];
+      var startIndexSideMap = {
+        left: 0,
+        right: index + 1
+      };
+      var endIndexSideMap = {
+        left: index,
+        right: _this.columns.length
+      };
+      var columnsFixed = _this.columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
+      if (columnsFixed.length < 1) return [side, 0];
+      var sum = columnsFixed.reduce(function(acc, column) {
+        var _this$headerNodesMap$5;
+        return acc + ((_this$headerNodesMap$5 = _this.headerNodesMap.get(column.name)) === null || _this$headerNodesMap$5 === void 0 ? void 0 : _this$headerNodesMap$5.getBoundingClientRect().width);
+      }, 0);
+      return [side, "".concat(sum, "px")];
+    });
     if (props.children) {
       _this.columns = _this.calculateColumns();
     } else {
@@ -262,41 +387,78 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       _this.columns = cols[0];
       _this.treeColumns = cols[1];
     }
+    _this.rows = _this.calculateRows();
+    _this.flatRows = _this.rows.flat();
     return _this;
   }
   _createClass(DataTableRoot2, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
-        expandedRows: []
+        expandedRows: /* @__PURE__ */ new Set()
       };
     }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.forceUpdate();
+      var _this2 = this;
+      var _this$asProps2 = this.asProps, headerProps = _this$asProps2.headerProps, loading = _this$asProps2.loading;
+      if (headerProps !== null && headerProps !== void 0 && headerProps.sticky && !headerProps.h || loading || this.columns.some(function(c) {
+        return c.fixed;
+      })) {
+        requestAnimationFrame(function() {
+          _this2.forceUpdate();
+        });
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$asProps3 = this.asProps, data = _this$asProps3.data, selectedRows = _this$asProps3.selectedRows, columns = _this$asProps3.columns;
+      if (prevProps.columns !== columns) {
+        var cols = this.calculateColumnsFromConfig();
+        this.columns = cols[0];
+        this.treeColumns = cols[1];
+      }
+      if (prevProps.data !== data || prevProps.columns !== columns) {
+        this.rows = this.calculateRows();
+        this.flatRows = this.rows.flat();
+        this.forceUpdate();
+      }
+      if (prevProps.selectedRows !== selectedRows && selectedRows !== void 0) {
+        if (prevProps.selectedRows.length < data.length && selectedRows.length === data.length) {
+          this.setSelectAllMessage(true);
+        } else if (prevProps.selectedRows.length > 0 && selectedRows.length === 0) {
+          this.setSelectAllMessage(false);
+        }
+      }
     }
   }, {
     key: "totalRows",
     get: function get() {
-      var _this$asProps = this.asProps, totalRows = _this$asProps.totalRows, expandedRows = _this$asProps.expandedRows, data = _this$asProps.data;
-      var expandedRowsCount = expandedRows === null || expandedRows === void 0 ? void 0 : expandedRows.reduce(function(acc, rowIndex) {
-        var dtRow = data[rowIndex];
-        var expandedRows2 = dtRow[ACCORDION];
-        if (Array.isArray(expandedRows2)) {
-          acc = acc + expandedRows2.length;
-        } else {
-          acc = acc + 1;
+      var _this$asProps4 = this.asProps, totalRows = _this$asProps4.totalRows, expandedRows = _this$asProps4.expandedRows;
+      var flatRows = this.rows.flat();
+      var expandedRowsCount = Array.from(expandedRows !== null && expandedRows !== void 0 ? expandedRows : []).reduce(function(acc, rowKey) {
+        var dtRow = flatRows.find(function(el) {
+          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 !== void 0) {
         return totalRows + expandedRowsCount;
       }
-      var rows = data.reduce(function(acc, item) {
+      var rows = this.rows.reduce(function(acc, item) {
         acc = acc + 1;
-        if (item[ROW_GROUP]) {
-          acc = acc + item[ROW_GROUP].length;
+        if (Array.isArray(item)) {
+          acc = acc + item.length;
         }
         return acc;
       }, 0);
@@ -307,7 +469,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     get: function get() {
       var columns = this.columns;
       var gridTemplateColumns = columns.map(function(c) {
-        return c.gridColumnWidth;
+        return c.gtcWidth;
       });
       var gridTemplateAreas = columns.map(function(c) {
         return c.name;
@@ -320,7 +482,8 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getHeadProps",
     value: function getHeadProps() {
-      var _this$asProps2 = this.asProps, use = _this$asProps2.use, compact = _this$asProps2.compact, sort = _this$asProps2.sort, onSortChange = _this$asProps2.onSortChange, getI18nText = _this$asProps2.getI18nText, uid = _this$asProps2.uid, headerProps = _this$asProps2.headerProps;
+      var _this3 = this;
+      var _this$asProps5 = this.asProps, use = _this$asProps5.use, compact = _this$asProps5.compact, sort = _this$asProps5.sort, onSortChange = _this$asProps5.onSortChange, getI18nText = _this$asProps5.getI18nText, uid = _this$asProps5.uid, headerProps = _this$asProps5.headerProps, onSelectedRowsChange = _this$asProps5.onSelectedRowsChange, selectedRows = _this$asProps5.selectedRows, sideIndents = _this$asProps5.sideIndents;
       var _this$gridSettings = this.gridSettings, gridTemplateColumns = _this$gridSettings.gridTemplateColumns, gridTemplateAreas = _this$gridSettings.gridTemplateAreas;
       return _objectSpread({
         columns: this.columns,
@@ -335,23 +498,35 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         ref: this.headerRef,
         gridAreaGroupMap: this.gridAreaGroupMap,
         gridTemplateColumns,
-        gridTemplateAreas
+        gridTemplateAreas,
+        sideIndents,
+        totalRows: this.totalRows,
+        selectedRows,
+        onChangeSelectAll: function onChangeSelectAll(value, e) {
+          var selectedRowsIndexes = value ? new Array(_this3.totalRows).fill(void 0).map(function(_, i) {
+            return i;
+          }) : [];
+          onSelectedRowsChange === null || onSelectedRowsChange === void 0 ? void 0 : onSelectedRowsChange(selectedRowsIndexes, e);
+        },
+        getFixedStyle: this.getFixedStyle
       }, headerProps);
     }
   }, {
     key: "getBodyProps",
     value: function getBodyProps() {
-      var _this$asProps3 = this.asProps, use = _this$asProps3.use, compact = _this$asProps3.compact, loading = _this$asProps3.loading, getI18nText = _this$asProps3.getI18nText, expandedRows = _this$asProps3.expandedRows, virtualScroll = _this$asProps3.virtualScroll, data = _this$asProps3.data, uid = _this$asProps3.uid, renderCell = _this$asProps3.renderCell;
+      var _this$asProps6 = this.asProps, use = _this$asProps6.use, compact = _this$asProps6.compact, loading = _this$asProps6.loading, getI18nText = _this$asProps6.getI18nText, expandedRows = _this$asProps6.expandedRows, virtualScroll = _this$asProps6.virtualScroll, uid = _this$asProps6.uid, rowProps = _this$asProps6.rowProps, renderCell = _this$asProps6.renderCell, headerProps = _this$asProps6.headerProps, renderEmptyData2 = _this$asProps6.renderEmptyData, sideIndents = _this$asProps6.sideIndents, selectedRows = _this$asProps6.selectedRows;
       var _this$gridSettings2 = this.gridSettings, gridTemplateColumns = _this$gridSettings2.gridTemplateColumns, gridTemplateAreas = _this$gridSettings2.gridTemplateAreas;
       return {
         columns: this.columns,
-        data,
+        rows: this.rows,
+        flatRows: this.flatRows,
         use,
         compact: Boolean(compact),
         gridTemplateColumns,
         gridTemplateAreas,
         loading,
-        headerHeight: this.getTopScrollOffset(),
+        headerHeight: this.getHeaderHeight(),
+        stickyHeader: headerProps === null || headerProps === void 0 ? void 0 : headerProps.sticky,
         getI18nText,
         expandedRows,
         onExpandRow: this.onExpandRow,
@@ -360,10 +535,18 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         scrollDirection: this.state.scrollDirection,
         tableContainerRef: this.tableContainerRef,
         tableRef: this.tableRef,
+        scrollAreaRef: this.scrollAreaRef,
+        onBackFromAccordion: this.handleBackFromAccordion,
         virtualScroll,
         hasGroups: this.hasGroups,
         uid,
-        renderCell
+        rowProps,
+        renderCell,
+        renderEmptyData: renderEmptyData2,
+        sideIndents,
+        selectedRows,
+        onSelectRow: this.handleSelectRow,
+        getFixedStyle: this.getFixedStyle
       };
     }
   }, {
@@ -382,24 +565,25 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this.asProps, _ref2, _ref3, _ref4;
+      var _ref = this.asProps, _ref2;
       var SDataTable = Box;
-      var _this$asProps4 = this.asProps, Children = _this$asProps4.Children, styles = _this$asProps4.styles, w = _this$asProps4.w, wMax = _this$asProps4.wMax, wMin = _this$asProps4.wMin, h = _this$asProps4.h, hMax = _this$asProps4.hMax, hMin = _this$asProps4.hMin, virtualScroll = _this$asProps4.virtualScroll, children = _this$asProps4.children, headerProps = _this$asProps4.headerProps;
-      var _getScrollOffsetValue = getScrollOffsetValue(this.columns), _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2), offsetLeftSum = _getScrollOffsetValue2[0], offsetRightSum = _getScrollOffsetValue2[1];
+      var _this$asProps7 = this.asProps, Children = _this$asProps7.Children, styles = _this$asProps7.styles, w = _this$asProps7.w, wMax = _this$asProps7.wMax, wMin = _this$asProps7.wMin, h = _this$asProps7.h, hMax = _this$asProps7.hMax, hMin = _this$asProps7.hMin, virtualScroll = _this$asProps7.virtualScroll, children = _this$asProps7.children, headerProps = _this$asProps7.headerProps, loading = _this$asProps7.loading, selectedRows = _this$asProps7.selectedRows;
+      var _this$getScrollOffset = this.getScrollOffsetValue(), _this$getScrollOffset2 = _slicedToArray(_this$getScrollOffset, 2), offsetLeftSum = _this$getScrollOffset2[0], offsetRightSum = _this$getScrollOffset2[1];
       var _this$gridSettings3 = this.gridSettings, gridTemplateColumns = _this$gridSettings3.gridTemplateColumns, gridTemplateAreas = _this$gridSettings3.gridTemplateAreas;
       var Head2 = findComponent(Children, ["DataTable.Head"]);
       var headerPropsToCheck = headerProps !== null && headerProps !== void 0 ? headerProps : Head2 === null || Head2 === void 0 ? void 0 : Head2.props;
-      var topOffset = headerPropsToCheck !== null && headerPropsToCheck !== void 0 && headerPropsToCheck.sticky || headerPropsToCheck !== null && headerPropsToCheck !== void 0 && headerPropsToCheck.withScrollBar ? this.getTopScrollOffset() : void 0;
+      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 : void 0;
       var width = w !== null && w !== void 0 ? w : this.columns.some(function(c) {
-        return c.gridColumnWidth === "auto" || c.gridColumnWidth === "1fr";
+        return c.gtcWidth === "auto" || c.gtcWidth === "1fr";
       }) ? "100%" : void 0;
       var gridTemplateRows = void 0;
       if (virtualScroll && typeof virtualScroll !== "boolean" && "rowHeight" in virtualScroll) {
         gridTemplateRows = "auto auto repeat(".concat(this.totalRows, ", minmax(").concat(virtualScroll.rowHeight, "px, auto)");
       }
       var scrollDirection = void 0;
-      var hasWidthSettings = Boolean((_ref3 = w !== null && w !== void 0 ? w : wMax) !== null && _ref3 !== void 0 ? _ref3 : wMin);
-      var hasHeightSettings = Boolean((_ref4 = h !== null && h !== void 0 ? h : hMax) !== null && _ref4 !== void 0 ? _ref4 : hMin);
+      var hasWidthSettings = Boolean(w) && w !== "100%" || Boolean(wMax);
+      var hasHeightSettings = Boolean(h) && h !== "fit-content" || Boolean(hMax);
       if (hasWidthSettings && !hasHeightSettings) {
         scrollDirection = "horizontal";
       } else if (hasHeightSettings && !hasWidthSettings) {
@@ -418,13 +602,18 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         "hMax": hMax,
         "hMin": hMin,
         "shadow": true,
+        "ref": this.scrollAreaRef,
         "container": this.tableContainerRef,
         "styles": scrollStyles,
-        "onScroll": this.handleScroll,
+        "onScroll": virtualScroll ? this.handleScroll : void 0,
         "disableAutofocusToContent": true
       }), /* @__PURE__ */ React.createElement(ScrollArea.Container, {
         tabIndex: -1,
-        scrollDirection
+        scrollDirection,
+        loading,
+        headerHeight: "".concat(headerHeight, "px"),
+        leftScrollPadding: "".concat(offsetLeftSum, "px"),
+        rightScrollPadding: "".concat(offsetRightSum, "px")
       }, /* @__PURE__ */ React.createElement(SDataTable, _ref2.cn("SDataTable", _objectSpread({}, assignProps({
         "ref": forkRef(this.tableRef, this.tableContainerRef),
         "role": "grid",
@@ -446,57 +635,58 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         "use:h": void 0,
         "use:hMax": void 0,
         "use:hMin": void 0
-      }, _ref))), children ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DataTable.Head, null), /* @__PURE__ */ React.createElement(DataTable.Body, null)))), (headerPropsToCheck === null || headerPropsToCheck === void 0 ? void 0 : headerPropsToCheck.withScrollBar) && topOffset && /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
+      }, _ref))), children ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DataTableInternal.Head, null), /* @__PURE__ */ React.createElement(DataTableInternal.Body, null)))), (headerPropsToCheck === null || headerPropsToCheck === void 0 ? void 0 : headerPropsToCheck.withScrollBar) && topOffset && !loading && /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
         orientation: "horizontal",
         top: topOffset - SCROLL_BAR_HEIGHT,
-        zIndex: 3
-      }), /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
+        zIndex: 10
+      }), !loading && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
         orientation: "horizontal",
-        zIndex: 2
+        zIndex: 10
       }), /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
         orientation: "vertical",
-        zIndex: 2
-      }));
+        zIndex: 10
+      })), selectedRows !== void 0 && /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
+        "aria-live": "polite",
+        "role": "status"
+      }), this.state.selectAllMessage));
     }
   }, {
     key: "calculateColumns",
     value: function calculateColumns() {
-      var _this2 = this;
-      var _this$props = this.props, children = _this$props.children, data = _this$props.data;
+      var _this4 = this;
+      var _this$props = this.props, children = _this$props.children, data = _this$props.data, selectedRows = _this$props.selectedRows;
       var HeadComponent = findComponent(children, ["Head"]);
       this.hasGroups = findComponent(HeadComponent.props.children, ["Head.Group"]) !== void 0;
       var groupIndex = 0;
-      var gridColumnIndex = 1;
+      var gridColumnIndex = selectedRows ? 2 : 1;
       var calculateGridTemplateColumn = this.calculateGridTemplateColumn.bind(this);
       var columns = [];
+      if (selectedRows) {
+        var column = {
+          name: SELECT_ALL.toString(),
+          gtcWidth: "40px",
+          alignItems: "flex-start",
+          children: ""
+        };
+        columns.push(column);
+      }
       var makeColumn = function makeColumn2(columnElement, parent, isFirst, isLast) {
-        var _columnElement$props$, _ref5, _columnElement$props$2;
+        var _columnElement$props$, _ref3, _columnElement$props$2;
         var leftBordersFromParent = isFirst && ((parent === null || parent === void 0 ? void 0 : parent.props.borders) === "both" || (parent === null || parent === void 0 ? void 0 : parent.props.borders) === "left") ? "left" : void 0;
         var rightBordersFromParent = isLast && ((parent === null || parent === void 0 ? void 0 : parent.props.borders) === "both" || (parent === null || parent === void 0 ? void 0 : parent.props.borders) === "right") ? "right" : void 0;
-        var column = {
+        var column2 = {
           name: columnElement.props.name,
-          // @ts-ignore
-          ref: function ref(node) {
-            if (node) {
-              var calculatedWidth = node.getBoundingClientRect().width;
-              var calculatedHeight = node.getBoundingClientRect().height;
-              column.calculatedWidth = calculatedWidth;
-              column.calculatedHeight = calculatedHeight;
-            }
-            this.ref.current = node;
-          },
-          gridColumnWidth: calculateGridTemplateColumn(columnElement),
+          gtcWidth: calculateGridTemplateColumn(columnElement),
           fixed: (_columnElement$props$ = columnElement.props.fixed) !== null && _columnElement$props$ !== void 0 ? _columnElement$props$ : parent === null || parent === void 0 ? void 0 : parent.props.fixed,
-          calculatedWidth: 0,
-          calculatedHeight: 0,
-          borders: (_ref5 = (_columnElement$props$2 = columnElement.props.borders) !== null && _columnElement$props$2 !== void 0 ? _columnElement$props$2 : leftBordersFromParent) !== null && _ref5 !== void 0 ? _ref5 : rightBordersFromParent,
+          borders: (_ref3 = (_columnElement$props$2 = columnElement.props.borders) !== null && _columnElement$props$2 !== void 0 ? _columnElement$props$2 : leftBordersFromParent) !== null && _ref3 !== void 0 ? _ref3 : rightBordersFromParent,
           parent,
           flexWrap: columnElement.props.flexWrap,
           alignItems: columnElement.props.alignItems,
           alignContent: columnElement.props.alignContent,
-          justifyContent: columnElement.props.justifyContent
+          justifyContent: columnElement.props.justifyContent,
+          children: ""
         };
-        return column;
+        return column2;
       };
       var childIsColumn = function childIsColumn2(child) {
         return child.type === Head.Column;
@@ -508,7 +698,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         if (!/* @__PURE__ */ React.isValidElement(child)) return;
         if (childIsColumn(child)) {
           var col = makeColumn(child);
-          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(_this2.hasGroups ? "3" : "2", " / ").concat(gridColumnIndex + 1);
+          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(_this4.hasGroups ? "3" : "2", " / ").concat(gridColumnIndex + 1);
           gridColumnIndex++;
           columns.push(col);
         } else if (childIsGroup(child)) {
@@ -533,7 +723,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
               columns.push(_col);
             }
           });
-          _this2.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
+          _this4.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
           groupIndex++;
         }
       });
@@ -542,42 +732,37 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "calculateColumnsFromConfig",
     value: function calculateColumnsFromConfig() {
-      var _this3 = this;
-      var _this$props2 = this.props, columns = _this$props2.columns, data = _this$props2.data;
-      this.hasGroups = columns.some(function(column) {
-        return "columns" in column;
+      var _this5 = this;
+      var _this$props2 = this.props, columns = _this$props2.columns, data = _this$props2.data, selectedRows = _this$props2.selectedRows;
+      this.hasGroups = columns.some(function(column2) {
+        return "columns" in column2;
       });
       var groupIndex = 0;
-      var gridColumnIndex = 1;
+      var gridColumnIndex = selectedRows ? 2 : 1;
       var calculateGridTemplateColumn = this.calculateGridTemplateColumn.bind(this);
       var calculatedColumns = [];
       var treeColumns = [];
+      if (selectedRows) {
+        var column = {
+          name: SELECT_ALL.toString(),
+          gtcWidth: "40px",
+          alignItems: "flex-start",
+          children: ""
+        };
+        calculatedColumns.push(column);
+      }
       var makeColumn = function makeColumn2(columnElement, parent, isFirst, isLast) {
-        var _columnElement$fixed, _ref6, _columnElement$border;
+        var _columnElement$fixed, _ref4, _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" : void 0;
         var rightBordersFromParent = isLast && ((parent === null || parent === void 0 ? void 0 : parent.borders) === "both" || (parent === null || parent === void 0 ? void 0 : parent.borders) === "right") ? "right" : void 0;
-        var column = _objectSpread({
+        var column2 = _objectSpread(_objectSpread({}, columnElement), {}, {
           name: childIsColumn(columnElement) ? columnElement.name : "",
-          // @ts-ignore
-          ref: function ref(node) {
-            if (node) {
-              var calculatedWidth = node.getBoundingClientRect().width;
-              var calculatedHeight = node.getBoundingClientRect().height;
-              column.calculatedWidth = calculatedWidth;
-              column.calculatedHeight = calculatedHeight;
-            }
-            if (this !== null && this !== void 0 && this.ref) {
-              this.ref.current = node;
-            }
-          },
-          gridColumnWidth: childIsColumn(columnElement) ? calculateGridTemplateColumn(columnElement) : "",
+          gtcWidth: childIsColumn(columnElement) ? calculateGridTemplateColumn(columnElement) : "",
           fixed: (_columnElement$fixed = columnElement.fixed) !== null && _columnElement$fixed !== void 0 ? _columnElement$fixed : parent === null || parent === void 0 ? void 0 : parent.fixed,
-          calculatedWidth: 0,
-          calculatedHeight: 0,
-          borders: (_ref6 = (_columnElement$border = columnElement.borders) !== null && _columnElement$border !== void 0 ? _columnElement$border : leftBordersFromParent) !== null && _ref6 !== void 0 ? _ref6 : rightBordersFromParent,
+          borders: (_ref4 = (_columnElement$border = columnElement.borders) !== null && _columnElement$border !== void 0 ? _columnElement$border : leftBordersFromParent) !== null && _ref4 !== void 0 ? _ref4 : rightBordersFromParent,
           parent
-        }, columnElement);
-        return column;
+        });
+        return column2;
       };
       var childIsColumn = function childIsColumn2(child) {
         return !("columns" in child);
@@ -588,7 +773,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       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);
+          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(_this5.hasGroups ? "3" : "2", " / ").concat(gridColumnIndex + 1);
           gridColumnIndex++;
           calculatedColumns.push(col);
           treeColumns.push(col);
@@ -617,21 +802,98 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
             (_Group$columns = Group.columns) === null || _Group$columns === void 0 ? void 0 : _Group$columns.push(col2);
           });
           treeColumns.push(Group);
-          _this3.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
+          _this5.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
           groupIndex++;
         }
       });
       return [calculatedColumns, treeColumns];
     }
+  }, {
+    key: "calculateRows",
+    value: function calculateRows() {
+      var _this6 = this;
+      var columns = this.columns;
+      var _this$props3 = this.props, data = _this$props3.data, uid = _this$props3.uid;
+      var rows = [];
+      var columnNames = columns.map(function(column) {
+        return column.name;
+      });
+      var rowIndex = 0;
+      var id = 1e8;
+      var makeDtRow = function makeDtRow2(row, excludeColumns) {
+        var _Object$entries$reduc;
+        var columns2 = new Set(columnNames);
+        var dtRow = Object.entries(row).reduce(function(acc, _ref5) {
+          var _ref6 = _slicedToArray(_ref5, 2), key = _ref6[0], value = _ref6[1];
+          var columnsToRow = key.split(_this6.columnsSplitter);
+          if (columnsToRow.length === 1) {
+            acc[key] = value !== null && value !== void 0 ? value : "";
+            columns2["delete"](key);
+          } else {
+            acc[columnsToRow[0]] = new MergedColumnsCell(value, {
+              dataKey: key,
+              size: columnsToRow.length
+            });
+            columnsToRow.forEach(function(value2) {
+              columns2["delete"](value2);
+            });
+          }
+          if (row[ACCORDION]) {
+            acc[ACCORDION] = row[ACCORDION];
+          }
+          return acc;
+        }, (_Object$entries$reduc = {}, _defineProperty(_Object$entries$reduc, UNIQ_ROW_KEY, row[UNIQ_ROW_KEY] || "".concat(uid, "_").concat((rowIndex + id).toString(36))), _defineProperty(_Object$entries$reduc, ROW_INDEX, rowIndex), _Object$entries$reduc));
+        excludeColumns === null || excludeColumns === void 0 ? void 0 : excludeColumns.forEach(function(value) {
+          columns2["delete"](value);
+        });
+        if (columns2.size > 0) {
+          columns2.forEach(function(value) {
+            dtRow[value] = "";
+          });
+        }
+        return dtRow;
+      };
+      data.forEach(function(row) {
+        var groupedRows = row[ROW_GROUP];
+        if (groupedRows) {
+          var _Object$entries$reduc2;
+          var innerRows = [];
+          var groupedKeys = [];
+          var groupedRowData = Object.entries(row).reduce(function(acc, _ref7) {
+            var _ref8 = _slicedToArray(_ref7, 2), key = _ref8[0], value = _ref8[1];
+            acc[key] = new MergedRowsCell(value, groupedRows.length);
+            groupedKeys.push(key);
+            return acc;
+          }, (_Object$entries$reduc2 = {}, _defineProperty(_Object$entries$reduc2, UNIQ_ROW_KEY, ""), _defineProperty(_Object$entries$reduc2, ROW_INDEX, -1), _Object$entries$reduc2));
+          groupedRows.forEach(function(childRow, index) {
+            var dtRow2;
+            if (index === 0) {
+              var rowData = _objectSpread(_objectSpread({}, childRow), groupedRowData);
+              dtRow2 = makeDtRow(rowData);
+            } else {
+              dtRow2 = makeDtRow(childRow, groupedKeys);
+            }
+            innerRows.push(dtRow2);
+            rowIndex++;
+          });
+          rows.push(innerRows);
+        } else {
+          var dtRow = makeDtRow(row);
+          rows.push(dtRow);
+          rowIndex++;
+        }
+      });
+      return rows;
+    }
   }, {
     key: "calculateGridTemplateColumn",
     value: function calculateGridTemplateColumn(c) {
-      var _ref7;
-      return (_ref7 = /* @__PURE__ */ React.isValidElement(c) ? c.props.gtcWidth : c.gtcWidth) !== null && _ref7 !== void 0 ? _ref7 : this.props.defaultGridTemplateColumnWidth;
+      var _ref9;
+      return (_ref9 = /* @__PURE__ */ React.isValidElement(c) ? c.props.gtcWidth : c.gtcWidth) !== null && _ref9 !== void 0 ? _ref9 : this.props.defaultGridTemplateColumnWidth;
     }
   }, {
-    key: "getTopScrollOffset",
-    value: function getTopScrollOffset() {
+    key: "getHeaderHeight",
+    value: function getHeaderHeight() {
       var _this$headerRef$curre;
       var header = (_this$headerRef$curre = this.headerRef.current) === null || _this$headerRef$curre === void 0 ? void 0 : _this$headerRef$curre.children;
       var height = 0;
@@ -654,15 +916,29 @@ _defineProperty(DataTableRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(lo
 _defineProperty(DataTableRoot, "defaultProps", {
   use: "primary",
   defaultGridTemplateColumnWidth: "auto",
-  defaultExpandedRows: []
+  defaultExpandedRows: /* @__PURE__ */ new Set(),
+  defaultSelectedRows: void 0,
+  h: "fit-content",
+  renderEmptyData: function renderEmptyData() {
+    return /* @__PURE__ */ React.createElement(NoData, {
+      py: 10,
+      type: "nothing-found",
+      description: "",
+      w: "100%"
+    });
+  }
 });
 var DataTable = createComponent(DataTableRoot, {
   Head,
   Body
 });
+var DataTableInternal = DataTable;
 export {
   ACCORDION,
   DataTable,
+  DataTableInternal,
   ROW_GROUP,
+  ROW_INDEX,
+  SELECT_ALL,
   UNIQ_ROW_KEY
 };