@semcore/data-table 16.2.2-prerelease.1 → 16.3.0-prerelease.4

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

@@ -1,6 +1,5 @@
 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 _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
@@ -25,38 +24,38 @@ import { isFocusInside, hasFocusableIn } from '@semcore/core/lib/utils/use/useFo
 import { NoData } from '@semcore/widget-empty';
 import * as React from 'react';
 /*!__reshadow-styles__:"./dataTable.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDataTable_l7a5o_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_l7a5o_gg_.__isDataEmpty_l7a5o_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_l7a5o_gg_.__gridTemplateColumns_l7a5o_gg_{grid-template-columns:var(--gridTemplateColumns_l7a5o)}.___SDataTable_l7a5o_gg_.__gridTemplateAreas_l7a5o_gg_{grid-template-areas:var(--gridTemplateAreas_l7a5o)}.___SDataTable_l7a5o_gg_.__gridTemplateRows_l7a5o_gg_{grid-template-rows:var(--gridTemplateRows_l7a5o)}", /*__inner_css_end__*/"l7a5o_gg_"),
+var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SDataTable_12hpo_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_12hpo_gg_.__isDataEmpty_12hpo_gg_{display:block;align-items:initial;min-width:initial}.___SDataTable_12hpo_gg_.__gridTemplateColumns_12hpo_gg_{grid-template-columns:var(--gridTemplateColumns_12hpo)}.___SDataTable_12hpo_gg_.__gridTemplateAreas_12hpo_gg_{grid-template-areas:var(--gridTemplateAreas_12hpo)}.___SDataTable_12hpo_gg_.__gridTemplateRows_12hpo_gg_{grid-template-rows:var(--gridTemplateRows_12hpo)}", /*__inner_css_end__*/"12hpo_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SDataTable": "___SDataTable_l7a5o_gg_",
-  "_isDataEmpty": "__isDataEmpty_l7a5o_gg_",
-  "_gridTemplateColumns": "__gridTemplateColumns_l7a5o_gg_",
-  "--gridTemplateColumns": "--gridTemplateColumns_l7a5o",
-  "_gridTemplateAreas": "__gridTemplateAreas_l7a5o_gg_",
-  "--gridTemplateAreas": "--gridTemplateAreas_l7a5o",
-  "_gridTemplateRows": "__gridTemplateRows_l7a5o_gg_",
-  "--gridTemplateRows": "--gridTemplateRows_l7a5o"
+  "__SDataTable": "___SDataTable_12hpo_gg_",
+  "_isDataEmpty": "__isDataEmpty_12hpo_gg_",
+  "_gridTemplateColumns": "__gridTemplateColumns_12hpo_gg_",
+  "--gridTemplateColumns": "--gridTemplateColumns_12hpo",
+  "_gridTemplateAreas": "__gridTemplateAreas_12hpo_gg_",
+  "--gridTemplateAreas": "--gridTemplateAreas_12hpo",
+  "_gridTemplateRows": "__gridTemplateRows_12hpo_gg_",
+  "--gridTemplateRows": "--gridTemplateRows_12hpo"
 });
 /*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
-var scrollStyles = (/*__reshadow_css_start__*/_sstyled2.insert(/*__inner_css_start__*/".___SScrollArea_1owgw_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_1owgw_gg_ .___SContainer_1owgw_gg_{overflow:visible;overflow:initial}.___SScrollArea_1owgw_gg_ .___SContainer_1owgw_gg_._scrollDirection_both_1owgw_gg_{overflow:auto}.___SScrollArea_1owgw_gg_ .___SContainer_1owgw_gg_._scrollDirection_both_1owgw_gg_.__loading_1owgw_gg_,.___SScrollArea_1owgw_gg_ .___SContainer_1owgw_gg_._scrollDirection_horizontal_1owgw_gg_.__loading_1owgw_gg_,.___SScrollArea_1owgw_gg_ .___SContainer_1owgw_gg_._scrollDirection_vertical_1owgw_gg_.__loading_1owgw_gg_{overflow:hidden}.___SScrollArea_1owgw_gg_ .___SContainer_1owgw_gg_._scrollDirection_horizontal_1owgw_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_1owgw_gg_ .___SContainer_1owgw_gg_._scrollDirection_vertical_1owgw_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_1owgw_gg_ .___SContainer_1owgw_gg_.__headerHeight_1owgw_gg_{scroll-padding-top:var(--headerHeight_1owgw)}.___SScrollArea_1owgw_gg_ .___SContainer_1owgw_gg_.__leftScrollPadding_1owgw_gg_{scroll-padding-left:var(--leftScrollPadding_1owgw)}.___SScrollArea_1owgw_gg_ .___SContainer_1owgw_gg_.__rightScrollPadding_1owgw_gg_{scroll-padding-right:var(--rightScrollPadding_1owgw)}.___SScrollArea_1owgw_gg_ .___SShadowHorizontal_1owgw_gg_::before,.___SScrollArea_1owgw_gg_ .___SShadowHorizontal_1owgw_gg_:after,.___SScrollArea_1owgw_gg_ .___SShadowVertical_1owgw_gg_::after{z-index:20}.___SScrollArea_1owgw_gg_ .___SShadowHorizontal_1owgw_gg_.__leftOffset_1owgw_gg_::before,.___SScrollArea_1owgw_gg_ .___SShadowHorizontal_1owgw_gg_.__rightOffset_1owgw_gg_::after,.___SScrollArea_1owgw_gg_ .___SShadowVertical_1owgw_gg_::before{display:none}", /*__inner_css_end__*/"1owgw_gg_"),
+var scrollStyles = (/*__reshadow_css_start__*/_sstyled2.insert(/*__inner_css_start__*/".___SScrollArea_w8oky_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_{overflow:visible;overflow:initial}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_._scrollDirection_both_w8oky_gg_{overflow:auto}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_._scrollDirection_both_w8oky_gg_.__loading_w8oky_gg_,.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_._scrollDirection_horizontal_w8oky_gg_.__loading_w8oky_gg_,.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_._scrollDirection_vertical_w8oky_gg_.__loading_w8oky_gg_{overflow:hidden}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_._scrollDirection_horizontal_w8oky_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_._scrollDirection_vertical_w8oky_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_.__headerHeight_w8oky_gg_{scroll-padding-top:var(--headerHeight_w8oky)}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_.__leftScrollPadding_w8oky_gg_{scroll-padding-left:var(--leftScrollPadding_w8oky)}.___SScrollArea_w8oky_gg_ .___SContainer_w8oky_gg_.__rightScrollPadding_w8oky_gg_{scroll-padding-right:var(--rightScrollPadding_w8oky)}.___SScrollArea_w8oky_gg_ .___SShadowHorizontal_w8oky_gg_::before,.___SScrollArea_w8oky_gg_ .___SShadowHorizontal_w8oky_gg_:after,.___SScrollArea_w8oky_gg_ .___SShadowVertical_w8oky_gg_::after{z-index:20}.___SScrollArea_w8oky_gg_ .___SShadowHorizontal_w8oky_gg_.__leftOffset_w8oky_gg_::before,.___SScrollArea_w8oky_gg_ .___SShadowHorizontal_w8oky_gg_.__rightOffset_w8oky_gg_::after,.___SScrollArea_w8oky_gg_ .___SShadowVertical_w8oky_gg_::before{display:none}", /*__inner_css_end__*/"w8oky_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SScrollArea": "___SScrollArea_1owgw_gg_",
-  "__SContainer": "___SContainer_1owgw_gg_",
-  "_scrollDirection_both": "_scrollDirection_both_1owgw_gg_",
-  "_loading": "__loading_1owgw_gg_",
-  "_scrollDirection_horizontal": "_scrollDirection_horizontal_1owgw_gg_",
-  "_scrollDirection_vertical": "_scrollDirection_vertical_1owgw_gg_",
-  "_headerHeight": "__headerHeight_1owgw_gg_",
-  "--headerHeight": "--headerHeight_1owgw",
-  "_leftScrollPadding": "__leftScrollPadding_1owgw_gg_",
-  "--leftScrollPadding": "--leftScrollPadding_1owgw",
-  "_rightScrollPadding": "__rightScrollPadding_1owgw_gg_",
-  "--rightScrollPadding": "--rightScrollPadding_1owgw",
-  "__SShadowVertical": "___SShadowVertical_1owgw_gg_",
-  "__SShadowHorizontal": "___SShadowHorizontal_1owgw_gg_",
-  "_leftOffset": "__leftOffset_1owgw_gg_",
-  "_rightOffset": "__rightOffset_1owgw_gg_"
+  "__SScrollArea": "___SScrollArea_w8oky_gg_",
+  "__SContainer": "___SContainer_w8oky_gg_",
+  "_scrollDirection_both": "_scrollDirection_both_w8oky_gg_",
+  "_loading": "__loading_w8oky_gg_",
+  "_scrollDirection_horizontal": "_scrollDirection_horizontal_w8oky_gg_",
+  "_scrollDirection_vertical": "_scrollDirection_vertical_w8oky_gg_",
+  "_headerHeight": "__headerHeight_w8oky_gg_",
+  "--headerHeight": "--headerHeight_w8oky",
+  "_leftScrollPadding": "__leftScrollPadding_w8oky_gg_",
+  "--leftScrollPadding": "--leftScrollPadding_w8oky",
+  "_rightScrollPadding": "__rightScrollPadding_w8oky_gg_",
+  "--rightScrollPadding": "--rightScrollPadding_w8oky",
+  "__SShadowVertical": "___SShadowVertical_w8oky_gg_",
+  "__SShadowHorizontal": "___SShadowHorizontal_w8oky_gg_",
+  "_leftOffset": "__leftOffset_w8oky_gg_",
+  "_rightOffset": "__rightOffset_w8oky_gg_"
 });
 import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
 import { Body } from '../Body/Body';
@@ -68,6 +67,7 @@ export var UNIQ_ROW_KEY = Symbol('UNIQ_ROW_KEY');
 export var IS_EMPTY_DATA_ROW = Symbol('IS_EMPTY_DATA_ROW');
 export var SELECT_ALL = Symbol('SELECT_ALL');
 export var ROW_INDEX = Symbol('ROW_INDEX');
+export var GRID_ROW_INDEX = Symbol('GRID_ROW_INDEX');
 var SCROLL_BAR_HEIGHT = 12;
 var DataTableRoot = /*#__PURE__*/function (_Component) {
   function DataTableRoot(props) {
@@ -90,6 +90,10 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "tmpData", void 0);
     _defineProperty(_this, "calculatedRows", void 0);
     _defineProperty(_this, "flatRows", void 0);
+    _defineProperty(_this, "gridSettings", {
+      gridTemplateColumns: [],
+      gridTemplateAreas: []
+    });
     _defineProperty(_this, "selectAllMessageTimer", 0);
     _defineProperty(_this, "headerNodesMap", new Map());
     _defineProperty(_this, "state", {
@@ -168,7 +172,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_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, "\"]:not([aria-hidden=\"true\"])"));
+      return (_this$tableRef$curren = _this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.querySelector(":scope [aria-rowindex=\"".concat(index + 1, "\"]:not([aria-hidden=\"true\"]):not(:scope [data-ui-name=\"DataTable\"] [aria-rowindex=\"").concat(index + 1, "\"]:not([aria-hidden=\"true\"])"));
     });
     _defineProperty(_this, "hasFocusableInHeader", function () {
       return _this.headerRef.current && hasFocusableIn(_this.headerRef.current) || _this.columns.some(function (column) {
@@ -182,11 +186,11 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         accordionMode = _this$asProps2.accordionMode;
       if (expandedRows.has(expandedRow[UNIQ_ROW_KEY])) {
         expandedRows["delete"](expandedRow[UNIQ_ROW_KEY]);
-        _this.handlers.expandedRows(new Set(_toConsumableArray(expandedRows)));
+        _this.handlers.expandedRows(expandedRows);
         onAccordionToggle === null || onAccordionToggle === void 0 || onAccordionToggle('close', expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
       } else {
         expandedRows.add(expandedRow[UNIQ_ROW_KEY]);
-        _this.handlers.expandedRows(new Set(_toConsumableArray(expandedRows)));
+        _this.handlers.expandedRows(expandedRows);
         onAccordionToggle === null || onAccordionToggle === void 0 || onAccordionToggle('open', expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
         if (accordionMode === 'toggle') {
           var rowIndex = expandedRow[ROW_INDEX];
@@ -402,7 +406,10 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "handleMouseMove", function () {
       _this.setInert(false);
     });
-    _defineProperty(_this, "handleBackFromAccordion", function (cellIndex) {
+    _defineProperty(_this, "handleBackFromAccordion", function (key) {
+      var cellIndex = _this.columns.findIndex(function (c) {
+        return c.name === key;
+      });
       _this.changeFocusCell(-1, cellIndex === -1 ? 0 : cellIndex, 'up');
     });
     _defineProperty(_this, "handleContainerResizeEnd", function () {
@@ -477,13 +484,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       }, 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];
-    }
+    var cols = _this.calculateColumnsFromConfig();
+    _this.columns = cols[0];
+    _this.treeColumns = cols[1];
     _this.calculatedRows = _this.getRows();
     _this.flatRows = _this.calculatedRows.flat();
     _this.tmpData = props.data;
@@ -580,21 +583,6 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       }, 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: "scrollDirection",
     get: function get() {
@@ -634,11 +622,13 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         headerProps = _this$asProps7.headerProps,
         onSelectedRowsChange = _this$asProps7.onSelectedRowsChange,
         selectedRows = _this$asProps7.selectedRows,
-        sideIndents = _this$asProps7.sideIndents;
+        sideIndents = _this$asProps7.sideIndents,
+        variant = _this$asProps7.variant;
       var _this$gridSettings = this.gridSettings,
         gridTemplateColumns = _this$gridSettings.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings.gridTemplateAreas;
       var shadowVertical = this.state.shadowVertical;
+      var sideIndentsValue = variant === 'card' ? 'wide' : sideIndents;
       return _objectSpread(_objectSpread({}, headerProps), {}, {
         columns: this.columns,
         treeColumns: this.treeColumns,
@@ -653,7 +643,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         gridAreaGroupMap: this.gridAreaGroupMap,
         gridTemplateColumns: gridTemplateColumns,
         gridTemplateAreas: gridTemplateAreas,
-        sideIndents: sideIndents,
+        sideIndents: sideIndentsValue,
         totalRows: this.totalRows,
         selectedRows: selectedRows,
         flatRows: this.getFlatRows(),
@@ -696,7 +686,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         accordionDuration = _this$asProps8.accordionDuration,
         accordionMode = _this$asProps8.accordionMode,
         rawData = _this$asProps8.data,
-        renderCellOverlay = _this$asProps8.renderCellOverlay;
+        renderCellOverlay = _this$asProps8.renderCellOverlay,
+        totalRows = _this$asProps8.totalRows,
+        variant = _this$asProps8.variant;
       var _this$gridSettings2 = this.gridSettings,
         gridTemplateColumns = _this$gridSettings2.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings2.gridTemplateAreas;
@@ -737,7 +729,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         onCellClick: this.handleCellClick,
         rawData: rawData,
         shadowVertical: shadowVertical,
-        renderCellOverlay: renderCellOverlay
+        renderCellOverlay: renderCellOverlay,
+        totalRows: totalRows,
+        variant: variant
       };
     }
   }, {
@@ -854,7 +848,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         "use:h": undefined,
         "use:hMax": undefined,
         "use:hMin": undefined
-      }, _ref))), children ? /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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, {
+      }, _ref))), children ? /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DataTable.Head, null), /*#__PURE__*/React.createElement(DataTable.Body, null)))), (headerPropsToCheck === null || headerPropsToCheck === void 0 ? void 0 : headerPropsToCheck.withScrollBar) && topOffset && !loading && /*#__PURE__*/React.createElement(ScrollArea.Bar, {
         orientation: "horizontal",
         top: topOffset - SCROLL_BAR_HEIGHT,
         zIndex: 20
@@ -870,96 +864,13 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       }), this.state.selectAllMessage));
     }
   }, {
-    key: "calculateColumns",
-    value: function calculateColumns() {
+    key: "calculateColumnsFromConfig",
+    value: function calculateColumnsFromConfig() {
       var _this4 = this;
       var _this$props = this.props,
-        children = _this$props.children,
+        columns = _this$props.columns,
         data = _this$props.data,
         selectedRows = _this$props.selectedRows;
-      var HeadComponent = findComponent(children, ['Head']);
-      this.hasGroups = findComponent(HeadComponent.props.children, ['Head.Group']) !== undefined;
-      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: 'min-content',
-          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,
-          textAlign: columnElement.props.textAlign,
-          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);
-          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);
-              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 && column.columns.some(function (col) {
           return col.children !== null;
@@ -980,18 +891,18 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         calculatedColumns.push(column);
       }
       var makeColumn = function makeColumn(columnElement, parent, isFirst, isLast, hasGroups) {
-        var _columnElement$fixed, _ref4, _columnElement$border;
+        var _columnElement$fixed, _ref3, _columnElement$border;
         var leftBordersFromParent = isFirst && ((parent === null || parent === void 0 ? void 0 : parent.borders) === 'both' || (parent === null || parent === void 0 ? void 0 : parent.borders) === 'left') ? 'left' : undefined;
         var rightBordersFromParent = isLast && ((parent === null || parent === void 0 ? void 0 : parent.borders) === 'both' || (parent === null || parent === void 0 ? void 0 : parent.borders) === 'right') ? 'right' : undefined;
         var column = _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 : hasGroups ? parent === null || parent === void 0 ? void 0 : parent.fixed : undefined,
-          borders: (_ref4 = (_columnElement$border = columnElement.borders) !== null && _columnElement$border !== void 0 ? _columnElement$border : leftBordersFromParent) !== null && _ref4 !== void 0 ? _ref4 : rightBordersFromParent,
+          borders: (_ref3 = (_columnElement$border = columnElement.borders) !== null && _columnElement$border !== void 0 ? _columnElement$border : leftBordersFromParent) !== null && _ref3 !== void 0 ? _ref3 : rightBordersFromParent,
           parent: parent
         });
         if (column.fixed) {
-          _this5.hasFixedColumn = true;
+          _this4.hasFixedColumn = true;
         }
         return column;
       };
@@ -1015,7 +926,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       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);
+          col.gridArea = "1 / ".concat(gridColumnIndex, " / ").concat(_this4.hasGroups ? '3' : '2', " / ").concat(gridColumnIndex + 1);
           gridColumnIndex++;
           calculatedColumns.push(col);
           treeColumns.push(col);
@@ -1026,14 +937,14 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           var Group = makeColumn(child);
           var childCount = child.columns.length;
           var initGridColumn = gridColumnIndex;
-          var groupedRow = _this5.hasGroups ? 2 : 1;
+          var groupedRow = _this4.hasGroups ? 2 : 1;
           Group.columns = [];
           Group.children = child.children;
           child.columns.forEach(function (child, j) {
             var _Group$columns;
             var isFirst = j === 0;
             var isLast = j === childCount - 1;
-            var col = makeColumn(child, Group, isFirst, isLast, _this5.hasGroups);
+            var col = makeColumn(child, Group, isFirst, isLast, _this4.hasGroups);
             if (i === 0 && j === 0 && data.some(function (d) {
               return d[ACCORDION];
             })) {
@@ -1051,10 +962,20 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
             (_Group$columns = Group.columns) === null || _Group$columns === void 0 || _Group$columns.push(col);
           });
           treeColumns.push(Group);
-          _this5.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
+          _this4.gridAreaGroupMap.set(groupIndex, "1 / ".concat(initGridColumn, " / 2 / ").concat(gridColumnIndex));
           groupIndex++;
         }
       });
+      var gridTemplateColumns = calculatedColumns.map(function (c) {
+        return c.gtcWidth;
+      });
+      var gridTemplateAreas = calculatedColumns.map(function (c) {
+        return c.name;
+      });
+      this.gridSettings = {
+        gridTemplateColumns: gridTemplateColumns,
+        gridTemplateAreas: gridTemplateAreas
+      };
       return [calculatedColumns, treeColumns];
     }
   }, {
@@ -1070,13 +991,13 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
   }, {
     key: "getRows",
     value: function getRows() {
-      var _this6 = this;
+      var _this5 = this;
       var columns = this.columns;
       // @ts-ignore
-      var _this$props3 = this.props,
-        data = _this$props3.data,
-        uid = _this$props3.uid,
-        uniqueRowKey = _this$props3.uniqueRowKey;
+      var _this$props2 = this.props,
+        data = _this$props2.data,
+        uid = _this$props2.uid,
+        uniqueRowKey = _this$props2.uniqueRowKey;
       if (this.tmpData === data) {
         return this.calculatedRows;
       }
@@ -1086,15 +1007,17 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         return column.name;
       });
       var rowIndex = 0;
+      var gridRowIndex = 0;
       var id = 100000000; // need this for gen keys by toString(36)
 
       var makeDtRow = function makeDtRow(row, excludeColumns) {
         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);
+        var accordionInCell = null;
+        var dtRow = Object.entries(row).reduce(function (acc, _ref4) {
+          var _ref5 = _slicedToArray(_ref4, 2),
+            key = _ref5[0],
+            value = _ref5[1];
+          var columnsToRow = key.split(_this5.columnsSplitter);
           if (columnsToRow.length === 1) {
             acc[key] = value !== null && value !== void 0 ? value : '';
             columns["delete"](key);
@@ -1107,11 +1030,18 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
               columns["delete"](value);
             });
           }
-          if (row[ACCORDION]) {
-            acc[ACCORDION] = row[ACCORDION];
+          if (value !== null && value !== void 0 && value[ACCORDION]) {
+            accordionInCell = value[ACCORDION];
           }
           return acc;
-        }, _defineProperty(_defineProperty({}, UNIQ_ROW_KEY, row[UNIQ_ROW_KEY] || (uniqueRowKey ? row[uniqueRowKey] : "".concat(uid, "_").concat((rowIndex + id).toString(36)))), ROW_INDEX, rowIndex));
+        }, _defineProperty(_defineProperty(_defineProperty({}, UNIQ_ROW_KEY, row[UNIQ_ROW_KEY] || (uniqueRowKey ? row[uniqueRowKey] : "".concat(uid, "_").concat((rowIndex + id).toString(36)))), ROW_INDEX, rowIndex), GRID_ROW_INDEX, gridRowIndex));
+        gridRowIndex++;
+        if (row[ACCORDION]) {
+          dtRow[ACCORDION] = row[ACCORDION];
+          gridRowIndex = Array.isArray(row[ACCORDION]) ? gridRowIndex + row[ACCORDION].length : gridRowIndex + 1;
+        } else if (accordionInCell) {
+          gridRowIndex = Array.isArray(accordionInCell) ? gridRowIndex + accordionInCell.length : gridRowIndex + 1;
+        }
         excludeColumns === null || excludeColumns === void 0 || excludeColumns.forEach(function (value) {
           columns["delete"](value);
         });
@@ -1127,10 +1057,10 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         if (groupedRows) {
           var innerRows = [];
           var groupedKeys = [];
-          var groupedRowData = Object.entries(row).reduce(function (acc, _ref7) {
-            var _ref8 = _slicedToArray(_ref7, 2),
-              key = _ref8[0],
-              value = _ref8[1];
+          var groupedRowData = Object.entries(row).reduce(function (acc, _ref6) {
+            var _ref7 = _slicedToArray(_ref6, 2),
+              key = _ref7[0],
+              value = _ref7[1];
             acc[key] = new MergedRowsCell(value, groupedRows.length, row[ACCORDION]);
             groupedKeys.push(key);
             return acc;
@@ -1143,13 +1073,13 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
               dtRow[ROW_GROUP] = new Set();
             } else {
               var _innerRows$;
-              if (index === groupedRows.length - 1 && row[ACCORDION]) {
-                childRow[ACCORDION] = row[ACCORDION];
-              }
               dtRow = makeDtRow(childRow, groupedKeys);
               (_innerRows$ = innerRows[0]) === null || _innerRows$ === void 0 || (_innerRows$ = _innerRows$[ROW_GROUP]) === null || _innerRows$ === void 0 || _innerRows$.add(dtRow[UNIQ_ROW_KEY]);
             }
             innerRows.push(dtRow);
+            if (index === groupedRows.length - 1 && row[ACCORDION]) {
+              gridRowIndex = Array.isArray(row[ACCORDION]) ? gridRowIndex + row[ACCORDION].length : gridRowIndex + 1;
+            }
             rowIndex++;
           });
           rows.push(innerRows);
@@ -1165,8 +1095,8 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
   }, {
     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;
+      var _ref8;
+      return (_ref8 = /*#__PURE__*/React.isValidElement(c) ? c.props.gtcWidth : c.gtcWidth) !== null && _ref8 !== void 0 ? _ref8 : this.props.defaultGridTemplateColumnWidth;
     }
   }, {
     key: "getHeaderHeight",
@@ -1209,11 +1139,11 @@ _defineProperty(DataTableRoot, "defaultProps", {
       description: "",
       w: "100%"
     });
-  }
+  },
+  variant: 'default'
 });
 export var DataTable = createComponent(DataTableRoot, {
   Head: Head,
   Body: Body
 });
-export var DataTableInternal = DataTable;
 //# sourceMappingURL=DataTable.js.map