@semcore/data-table 16.0.0-prerelease.2 → 16.0.0-prerelease.21

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

@@ -0,0 +1,1013 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _createSuper from "@babel/runtime/helpers/createSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { sstyled as _sstyled2 } from "@semcore/core";
+import { sstyled as _sstyled } from "@semcore/core";
+import { assignProps as _assignProps } from "@semcore/core";
+import * as React from 'react';
+import { Component, createComponent, lastInteraction, Root, sstyled } from '@semcore/core';
+import { Box, ScreenReaderOnly, ScrollArea } from '@semcore/base-components';
+import { Head } from '../Head/Head';
+import { Body } from '../Body/Body';
+/*!__reshadow-styles__:"./dataTable.shadow.css"*/
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDataTable_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"
+});
+import { isFocusInside, hasFocusableIn } from '@semcore/core/lib/utils/use/useFocusLock';
+import findComponent from '@semcore/core/lib/utils/findComponent';
+import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
+import i18nEnhance from '@semcore/core/lib/utils/enhances/i18nEnhance';
+import uniqueIDEnhancement from '@semcore/core/lib/utils/uniqueID';
+import { forkRef } from '@semcore/core/lib/utils/ref';
+/*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
+var scrollStyles = ( /*__reshadow_css_start__*/_sstyled2.insert( /*__inner_css_start__*/".___SScrollArea_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_"
+});
+import { hasParent } from '@semcore/core/lib/utils/hasParent';
+import trottle from '@semcore/core/lib/utils/rafTrottle';
+import { MergedColumnsCell, MergedRowsCell } from '../Body/MergedCells';
+import { NoData } from '@semcore/widget-empty';
+export var ACCORDION = Symbol('accordion');
+export var ROW_GROUP = Symbol('ROW_GROUP');
+export var UNIQ_ROW_KEY = Symbol('UNIQ_ROW_KEY');
+export var SELECT_ALL = Symbol('SELECT_ALL');
+export var ROW_INDEX = Symbol('ROW_INDEX');
+var SCROLL_BAR_HEIGHT = 12;
+var DataTableRoot = /*#__PURE__*/function (_Component) {
+  _inherits(DataTableRoot, _Component);
+  var _super = _createSuper(DataTableRoot);
+  function DataTableRoot(props) {
+    var _this;
+    _classCallCheck(this, DataTableRoot);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "columns", []);
+    _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", new Map());
+    _defineProperty(_assertThisInitialized(_this), "columnsSplitter", '/');
+    _defineProperty(_assertThisInitialized(_this), "rows", []);
+    _defineProperty(_assertThisInitialized(_this), "flatRows", []);
+    _defineProperty(_assertThisInitialized(_this), "selectAllMessageTimer", 0);
+    _defineProperty(_assertThisInitialized(_this), "headerNodesMap", new Map());
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      scrollTop: 0,
+      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,
+        data = _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: selectedRowIndex,
+          isSelected: isSelected,
+          row: 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: ''
+        });
+      }, 5000);
+    });
+    _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 () {
+      return _this.headerRef.current && hasFocusableIn(_this.headerRef.current);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onExpandRow", function (expandedRow) {
+      var expandedRows = _this.asProps.expandedRows;
+      if (expandedRows.has(expandedRow[UNIQ_ROW_KEY])) {
+        expandedRows["delete"](expandedRow[UNIQ_ROW_KEY]);
+      } else {
+        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 || 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]) {
+        changed = false;
+      }
+      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 > [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', '');
+        if (currentCell !== currentHeaderCell) {
+          currentCell === null || currentCell === void 0 ? void 0 : 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');
+        cell.removeAttribute('inert');
+        if (headerCell !== cell && describedBy) {
+          cell.setAttribute('aria-describedby', describedBy);
+        }
+        cell === null || cell === void 0 ? void 0 : cell.focus();
+        if (newRow !== 0) {
+          currentHeaderCell === null || currentHeaderCell === void 0 ? void 0 : currentHeaderCell.setAttribute('inert', '');
+          var _headerCell = headerCells === null || headerCells === void 0 ? void 0 : headerCells.item(newCol);
+          _headerCell === null || _headerCell === void 0 ? void 0 : _headerCell.removeAttribute('inert');
+        }
+      } else if (cell === null && currentCell instanceof HTMLElement) {
+        var rowI = rowIndex;
+        var colI = colIndex;
+        if (direction === 'left' || direction === 'right') {
+          var _currentCell$parentEl, _currentCell$parentEl2, _row$children;
+          // 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 ? void 0 : _currentCell$parentEl.dataset.uiName) === 'Collapse') {
+            return;
+          }
+
+          // left/right
+          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;
+          }
+        } else if (direction === 'up' || direction === 'down') {
+          // top/bottom
+          if (currentCell.dataset.groupedBy === 'rowgroup' || Number(currentCell.getAttribute('aria-colindex')) === 1) {
+            rowI = direction === 'up' ? rowI - 1 : rowI + 1;
+          } else {
+            colI = colI - 1;
+          }
+        }
+        _this.changeFocusCell(rowI, colI, direction);
+      } else if (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);
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
+      switch (e.key) {
+        case 'Tab':
+          {
+            _this.setInert(true);
+            break;
+          }
+        case 'ArrowLeft':
+          {
+            e.preventDefault();
+            _this.changeFocusCell(0, -1, 'left');
+            break;
+          }
+        case 'ArrowRight':
+          {
+            e.preventDefault();
+            _this.changeFocusCell(0, 1, 'right');
+            break;
+          }
+        case 'ArrowUp':
+          {
+            e.preventDefault();
+            _this.changeFocusCell(-1, 0, 'up');
+            break;
+          }
+        case 'ArrowDown':
+          {
+            e.preventDefault();
+            _this.changeFocusCell(1, 0, 'down');
+            break;
+          }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "initFocusableCell", function () {
+      var hasFocusable = _this.hasFocusableInHeader();
+      if (hasFocusable) {
+        _this.focusedCell = [0, 0];
+      } else {
+        _this.focusedCell = [1, 0];
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleScroll", trottle(function (e) {
+      var scrollTop = e.target.scrollTop;
+      var scrollDirection = scrollTop > _this.state.scrollTop ? 'down' : 'up';
+      _this.setState({
+        scrollTop: scrollTop,
+        scrollDirection: scrollDirection
+      });
+    }));
+    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
+      if (_this.asProps.loading) {
+        var _this$spinnerRef$curr;
+        (_this$spinnerRef$curr = _this.spinnerRef.current) === null || _this$spinnerRef$curr === void 0 ? void 0 : _this$spinnerRef$curr.focus();
+        e.currentTarget.setAttribute('tabIndex', '-1');
+      } else if ((!e.relatedTarget || !isFocusInside(e.currentTarget, e.relatedTarget)) && lastInteraction.isKeyboard()) {
+        var _row;
+        if (_this.focusedCell[0] === -1 && _this.focusedCell[1] === -1) {
+          _this.initFocusableCell();
+        }
+        _this.setInert(true);
+        var row = _this.getRow(_this.focusedCell[0]);
+        if (!row) {
+          _this.initFocusableCell();
+          row = _this.getRow(_this.focusedCell[0]);
+        }
+        if (!row && _this.asProps.virtualScroll) {
+          var _this$tableRef$curren4;
+          var firstAvailableCell = (_this$tableRef$curren4 = _this.tableRef.current) === null || _this$tableRef$curren4 === void 0 ? void 0 : _this$tableRef$curren4.querySelector("[role=\"gridcell\"]");
+          var firstAvailableRow = firstAvailableCell === null || firstAvailableCell === void 0 ? void 0 : firstAvailableCell.parentElement;
+          if (firstAvailableCell && firstAvailableRow) {
+            var _Number, _Number2;
+            var colIndex = ((_Number = Number(firstAvailableCell.getAttribute('aria-colindex'))) !== null && _Number !== void 0 ? _Number : 1) - 1;
+            var rowIndex = ((_Number2 = Number(firstAvailableRow.getAttribute('aria-rowindex'))) !== null && _Number2 !== void 0 ? _Number2 : 1) - 1;
+            _this.focusedCell[0] = rowIndex;
+            _this.focusedCell[1] = colIndex;
+            row = firstAvailableRow;
+          }
+        }
+        var cell = (_row = row) === null || _row === void 0 ? void 0 : _row.querySelectorAll('[role=gridcell], [role=columnheader]').item(_this.focusedCell[1]);
+        cell === null || cell === void 0 ? void 0 : cell.removeAttribute('inert');
+        if (cell instanceof HTMLElement) {
+          if (hasParent(e.target, cell)) {
+            e.target.focus();
+          } else {
+            cell.focus();
+          }
+        }
+        e.currentTarget.setAttribute('tabIndex', '-1');
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (e) {
+      var relatedTarget = e.relatedTarget;
+      var tableElement = _this.tableRef.current;
+      if (tableElement && (!relatedTarget || !isFocusInside(tableElement, relatedTarget) || !lastInteraction.isKeyboard())) {
+        _this.setInert(false);
+        tableElement.setAttribute('tabIndex', '0');
+      }
+    });
+    _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 setToMap(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 [undefined, undefined];
+      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 [undefined, undefined];
+      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 {
+      var cols = _this.calculateColumnsFromConfig();
+      _this.columns = cols[0];
+      _this.treeColumns = cols[1];
+    }
+    _this.rows = _this.calculateRows();
+    _this.flatRows = _this.rows.flat();
+    return _this;
+  }
+  _createClass(DataTableRoot, [{
+    key: "uncontrolledProps",
+    value: function uncontrolledProps() {
+      return {
+        expandedRows: new Set()
+      };
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      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 !== undefined) {
+        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$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 !== undefined) {
+        return totalRows + expandedRowsCount;
+      }
+      var rows = this.rows.reduce(function (acc, item) {
+        acc = acc + 1;
+        if (Array.isArray(item)) {
+          acc = acc + item.length;
+        }
+        return acc;
+      }, 0);
+      return rows + expandedRowsCount;
+    }
+  }, {
+    key: "gridSettings",
+    get: function get() {
+      var columns = this.columns;
+      var gridTemplateColumns = columns.map(function (c) {
+        return c.gtcWidth;
+      });
+      var gridTemplateAreas = columns.map(function (c) {
+        return c.name;
+      });
+      return {
+        gridTemplateColumns: gridTemplateColumns,
+        gridTemplateAreas: gridTemplateAreas
+      };
+    }
+  }, {
+    key: "getHeadProps",
+    value: function getHeadProps() {
+      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,
+        treeColumns: this.treeColumns,
+        use: use,
+        tableRef: this.tableRef,
+        compact: Boolean(compact),
+        sort: sort,
+        onSortChange: onSortChange,
+        getI18nText: getI18nText,
+        uid: uid,
+        ref: this.headerRef,
+        gridAreaGroupMap: this.gridAreaGroupMap,
+        gridTemplateColumns: gridTemplateColumns,
+        gridTemplateAreas: gridTemplateAreas,
+        sideIndents: sideIndents,
+        totalRows: this.totalRows,
+        selectedRows: selectedRows,
+        onChangeSelectAll: function onChangeSelectAll(value, e) {
+          var selectedRowsIndexes = value ? new Array(_this3.totalRows).fill(undefined).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$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,
+        renderEmptyData = _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,
+        rows: this.rows,
+        flatRows: this.flatRows,
+        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: 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: rowProps,
+        renderCell: renderCell,
+        renderEmptyData: renderEmptyData,
+        sideIndents: sideIndents,
+        selectedRows: selectedRows,
+        onSelectRow: this.handleSelectRow,
+        getFixedStyle: this.getFixedStyle
+      };
+    }
+  }, {
+    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 ? void 0 : cells.forEach(function (cell) {
+        if (value === true) {
+          cell.setAttribute('inert', '');
+        } else {
+          cell.removeAttribute('inert');
+        }
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _ref = this.asProps,
+        _ref2;
+      var SDataTable = Box;
+      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 Head = findComponent(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)");
+      }
+      var scrollDirection = undefined;
+      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) {
+        scrollDirection = 'vertical';
+      } else if (hasWidthSettings && hasHeightSettings) {
+        scrollDirection = 'both';
+      }
+      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(ScrollArea, _ref2.cn("ScrollArea", {
+        "leftOffset": offsetLeftSum,
+        "rightOffset": offsetRightSum,
+        "topOffset": topOffset,
+        "w": width,
+        "wMax": wMax,
+        "wMin": wMin,
+        "h": h,
+        "hMax": hMax,
+        "hMin": hMin,
+        "shadow": true,
+        "ref": this.scrollAreaRef,
+        "container": this.tableContainerRef,
+        "styles": scrollStyles,
+        "onScroll": virtualScroll ? this.handleScroll : undefined,
+        "disableAutofocusToContent": true
+      }), /*#__PURE__*/React.createElement(ScrollArea.Container, {
+        tabIndex: -1
+        // @ts-ignore
+        ,
+        scrollDirection: scrollDirection
+        // @ts-ignore
+        ,
+        loading: 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',
+        "onKeyDown": this.handleKeyDown,
+        "onMouseMove": this.handleMouseMove,
+        "tabIndex": 0,
+        "onFocus": this.handleFocus,
+        "onBlur": this.handleBlur,
+        "aria-rowcount": this.totalRows,
+        "aria-colcount": this.columns.length,
+        "gridTemplateColumns": gridTemplateColumns.join(' '),
+        "gridTemplateAreas": gridTemplateAreas.join(' '),
+        "gridTemplateRows": gridTemplateRows,
+        "w": '100%',
+        "use:data": undefined,
+        "use:w": undefined,
+        "use:wMax": undefined,
+        "use:wMin": undefined,
+        "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(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: 10
+      }), !loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScrollArea.Bar, {
+        orientation: "horizontal",
+        zIndex: 10
+      }), /*#__PURE__*/React.createElement(ScrollArea.Bar, {
+        orientation: "vertical",
+        zIndex: 10
+      })), selectedRows !== undefined && /*#__PURE__*/React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
+        "aria-live": 'polite',
+        "role": 'status'
+      }), this.state.selectAllMessage));
+    }
+  }, {
+    key: "calculateColumns",
+    value: function calculateColumns() {
+      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']) !== undefined;
+      var columnIndex = 0;
+      var groupIndex = 0;
+      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 makeColumn(columnElement, parent, isFirst, isLast) {
+        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' : undefined;
+        var rightBordersFromParent = isLast && ((parent === null || parent === void 0 ? void 0 : parent.props.borders) === 'both' || (parent === null || parent === void 0 ? void 0 : parent.props.borders) === 'right') ? 'right' : undefined;
+        var column = {
+          name: columnElement.props.name,
+          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,
+          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: parent,
+          flexWrap: columnElement.props.flexWrap,
+          alignItems: columnElement.props.alignItems,
+          alignContent: columnElement.props.alignContent,
+          justifyContent: columnElement.props.justifyContent,
+          children: ''
+        };
+        return column;
+      };
+      var childIsColumn = function childIsColumn(child) {
+        return child.type === Head.Column;
+      };
+      var childIsGroup = function childIsGroup(child) {
+        return child.type === Head.Group;
+      };
+      React.Children.forEach(HeadComponent.props.children, function (child, i) {
+        if (! /*#__PURE__*/React.isValidElement(child)) return;
+        if (childIsColumn(child)) {
+          var col = makeColumn(child);
+          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(_this4.hasGroups ? '3' : '2', " / ").concat(gridColumnIndex + 1);
+          columnIndex++;
+          gridColumnIndex++;
+          columns.push(col);
+        } else if (childIsGroup(child)) {
+          var Group = child;
+          var childCount = React.Children.count(child.props.children);
+          var initGridColumn = gridColumnIndex;
+          React.Children.forEach(child.props.children, function (child, j) {
+            if ((child === null || child === void 0 ? void 0 : child.type) === Head.Column) {
+              var isFirst = j === 0;
+              var isLast = j === childCount - 1;
+              var _col = makeColumn(child, Group, isFirst, isLast);
+              if (i === 0 && j === 0 && data.some(function (d) {
+                return d[ACCORDION];
+              })) {
+                gridColumnIndex++;
+                _col.gridArea = "2 / ".concat(gridColumnIndex - 1, " / 3 / ").concat(gridColumnIndex + 1);
+              } else {
+                _col.gridArea = "2 / ".concat(gridColumnIndex, " / 3 / ").concat(gridColumnIndex + 1);
+              }
+              _col.gridArea = "2 / ".concat(gridColumnIndex, " / 3 / ").concat(gridColumnIndex + 1);
+              columnIndex++;
+              gridColumnIndex++;
+              columns.push(_col);
+            }
+          });
+          _this4.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
+          groupIndex++;
+        }
+      });
+      return columns.filter(Boolean);
+    }
+  }, {
+    key: "calculateColumnsFromConfig",
+    value: function calculateColumnsFromConfig() {
+      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 (column) {
+        return 'columns' in column;
+      });
+      var columnIndex = 0;
+      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: '40px',
+          alignItems: 'flex-start',
+          children: ''
+        };
+        calculatedColumns.push(column);
+      }
+      var makeColumn = function makeColumn(columnElement, parent, isFirst, isLast) {
+        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' : undefined;
+        var rightBordersFromParent = isLast && ((parent === null || parent === void 0 ? void 0 : parent.borders) === 'both' || (parent === null || parent === void 0 ? void 0 : parent.borders) === 'right') ? 'right' : undefined;
+        var column = _objectSpread(_objectSpread({}, columnElement), {}, {
+          name: childIsColumn(columnElement) ? columnElement.name : '',
+          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,
+          borders: (_ref4 = (_columnElement$border = columnElement.borders) !== null && _columnElement$border !== void 0 ? _columnElement$border : leftBordersFromParent) !== null && _ref4 !== void 0 ? _ref4 : rightBordersFromParent,
+          parent: parent
+        });
+        return column;
+      };
+      var childIsColumn = function childIsColumn(child) {
+        return !('columns' in child);
+      };
+      var childIsGroup = function childIsGroup(child) {
+        return 'columns' in child;
+      };
+      columns.forEach(function (child, i) {
+        if (childIsColumn(child)) {
+          var col = makeColumn(child);
+          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(_this5.hasGroups ? '3' : '2', " / ").concat(gridColumnIndex + 1);
+          columnIndex++;
+          gridColumnIndex++;
+          calculatedColumns.push(col);
+          treeColumns.push(col);
+        } else if (childIsGroup(child)) {
+          var Group = makeColumn(child);
+          var childCount = child.columns.length;
+          var initGridColumn = gridColumnIndex;
+          Group.columns = [];
+          Group.children = child.children;
+          child.columns.forEach(function (child, j) {
+            var _Group$columns;
+            var isFirst = j === 0;
+            var isLast = j === childCount - 1;
+            var col = makeColumn(child, Group, isFirst, isLast);
+            if (i === 0 && j === 0 && data.some(function (d) {
+              return d[ACCORDION];
+            })) {
+              gridColumnIndex++;
+              col.gridArea = "2 / ".concat(gridColumnIndex - 1, " / 3 / ").concat(gridColumnIndex + 1);
+            } else {
+              col.gridArea = "2 / ".concat(gridColumnIndex, " / 3 / ").concat(gridColumnIndex + 1);
+            }
+            col.gridArea = "2 / ".concat(gridColumnIndex, " / 3 / ").concat(gridColumnIndex + 1);
+            columnIndex++;
+            gridColumnIndex++;
+            calculatedColumns.push(col);
+            (_Group$columns = Group.columns) === null || _Group$columns === void 0 ? void 0 : _Group$columns.push(col);
+          });
+          treeColumns.push(Group);
+          _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;
+      // @ts-ignore
+      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 = 100000000; // need this for gen keys by toString(36)
+
+      var makeDtRow = function makeDtRow(row, excludeColumns) {
+        var _Object$entries$reduc;
+        var columns = 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 : '';
+            columns["delete"](key);
+          } else {
+            acc[columnsToRow[0]] = new MergedColumnsCell(value, {
+              dataKey: key,
+              size: columnsToRow.length
+            });
+            columnsToRow.forEach(function (value) {
+              columns["delete"](value);
+            });
+          }
+          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) {
+          columns["delete"](value);
+        });
+        if (columns.size > 0) {
+          columns.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 dtRow;
+            if (index === 0) {
+              var rowData = _objectSpread(_objectSpread({}, childRow), groupedRowData);
+              dtRow = makeDtRow(rowData);
+            } else {
+              dtRow = makeDtRow(childRow, groupedKeys);
+            }
+            innerRows.push(dtRow);
+            rowIndex++;
+          });
+          rows.push(innerRows);
+        } else {
+          var dtRow = makeDtRow(row);
+          rows.push(dtRow);
+          rowIndex++;
+        }
+      });
+      return rows;
+    }
+  }, {
+    key: "calculateGridTemplateColumn",
+    value: function calculateGridTemplateColumn(c) {
+      var _ref9;
+      return (_ref9 = /*#__PURE__*/React.isValidElement(c) ? c.props.gtcWidth : c.gtcWidth) !== null && _ref9 !== void 0 ? _ref9 : this.props.defaultGridTemplateColumnWidth;
+    }
+  }, {
+    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;
+      for (var i = 0; i < ((_header$length = header === null || header === void 0 ? void 0 : header.length) !== null && _header$length !== void 0 ? _header$length : 0); i++) {
+        var _header$length, _header$item;
+        var columnHeight = header === null || header === void 0 ? void 0 : (_header$item = header.item(i)) === null || _header$item === void 0 ? void 0 : _header$item.getBoundingClientRect().height;
+        if (columnHeight) {
+          height = columnHeight;
+          break;
+        }
+      }
+      return height;
+    }
+  }]);
+  return DataTableRoot;
+}(Component);
+_defineProperty(DataTableRoot, "displayName", 'DataTable');
+_defineProperty(DataTableRoot, "style", style);
+_defineProperty(DataTableRoot, "enhance", [uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);
+_defineProperty(DataTableRoot, "defaultProps", {
+  use: 'primary',
+  defaultGridTemplateColumnWidth: 'auto',
+  defaultExpandedRows: new Set(),
+  defaultSelectedRows: undefined,
+  h: 'fit-content',
+  renderEmptyData: function renderEmptyData() {
+    return /*#__PURE__*/React.createElement(NoData, {
+      py: 10,
+      type: 'nothing-found',
+      description: '',
+      w: '100%'
+    });
+  }
+});
+export var DataTable = createComponent(DataTableRoot, {
+  Head: Head,
+  Body: Body
+});
+export var DataTableInternal = DataTable;
+//# sourceMappingURL=DataTable.js.map