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

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

@@ -1,6 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
@@ -32,19 +31,19 @@ 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)}",
+    ".___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__*/
-    "l7a5o_gg_"
+    "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"*/
@@ -52,27 +51,27 @@ var scrollStyles = (
   /*__reshadow_css_start__*/
   (sstyled.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}",
+    ".___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__*/
-    "1owgw_gg_"
+    "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_"
   })
 );
 var ACCORDION = Symbol("accordion");
@@ -81,6 +80,7 @@ var UNIQ_ROW_KEY = Symbol("UNIQ_ROW_KEY");
 var IS_EMPTY_DATA_ROW = Symbol("IS_EMPTY_DATA_ROW");
 var SELECT_ALL = Symbol("SELECT_ALL");
 var ROW_INDEX = Symbol("ROW_INDEX");
+var GRID_ROW_INDEX = Symbol("GRID_ROW_INDEX");
 var SCROLL_BAR_HEIGHT = 12;
 var DataTableRoot = /* @__PURE__ */ function(_Component) {
   function DataTableRoot2(props) {
@@ -103,6 +103,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", /* @__PURE__ */ new Map());
     _defineProperty(_this, "state", {
@@ -179,7 +183,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) {
@@ -190,11 +194,11 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       var _this$asProps2 = _this.asProps, expandedRows = _this$asProps2.expandedRows, onAccordionToggle = _this$asProps2.onAccordionToggle, 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];
@@ -394,7 +398,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() {
@@ -469,13 +476,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;
@@ -565,21 +568,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,
-        gridTemplateAreas
-      };
-    }
   }, {
     key: "scrollDirection",
     get: function get() {
@@ -605,9 +593,10 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     key: "getHeadProps",
     value: function getHeadProps() {
       var _this3 = this;
-      var _this$asProps7 = this.asProps, use = _this$asProps7.use, compact = _this$asProps7.compact, sort = _this$asProps7.sort, onSortChange = _this$asProps7.onSortChange, getI18nText = _this$asProps7.getI18nText, uid = _this$asProps7.uid, headerProps = _this$asProps7.headerProps, onSelectedRowsChange = _this$asProps7.onSelectedRowsChange, selectedRows = _this$asProps7.selectedRows, sideIndents = _this$asProps7.sideIndents;
+      var _this$asProps7 = this.asProps, use = _this$asProps7.use, compact = _this$asProps7.compact, sort = _this$asProps7.sort, onSortChange = _this$asProps7.onSortChange, getI18nText = _this$asProps7.getI18nText, uid = _this$asProps7.uid, headerProps = _this$asProps7.headerProps, onSelectedRowsChange = _this$asProps7.onSelectedRowsChange, selectedRows = _this$asProps7.selectedRows, sideIndents = _this$asProps7.sideIndents, variant = _this$asProps7.variant;
       var _this$gridSettings = this.gridSettings, gridTemplateColumns = _this$gridSettings.gridTemplateColumns, gridTemplateAreas = _this$gridSettings.gridTemplateAreas;
       var shadowVertical = this.state.shadowVertical;
+      var sideIndentsValue = variant === "card" ? "wide" : sideIndents;
       return _objectSpread(_objectSpread({}, headerProps), {}, {
         columns: this.columns,
         treeColumns: this.treeColumns,
@@ -622,7 +611,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         gridAreaGroupMap: this.gridAreaGroupMap,
         gridTemplateColumns,
         gridTemplateAreas,
-        sideIndents,
+        sideIndents: sideIndentsValue,
         totalRows: this.totalRows,
         selectedRows,
         flatRows: this.getFlatRows(),
@@ -648,7 +637,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getBodyProps",
     value: function getBodyProps() {
-      var _this$asProps8 = this.asProps, use = _this$asProps8.use, compact = _this$asProps8.compact, loading = _this$asProps8.loading, getI18nText = _this$asProps8.getI18nText, expandedRows = _this$asProps8.expandedRows, virtualScroll = _this$asProps8.virtualScroll, uid = _this$asProps8.uid, rowProps = _this$asProps8.rowProps, renderCell = _this$asProps8.renderCell, headerProps = _this$asProps8.headerProps, renderEmptyData2 = _this$asProps8.renderEmptyData, sideIndents = _this$asProps8.sideIndents, selectedRows = _this$asProps8.selectedRows, accordionDuration = _this$asProps8.accordionDuration, accordionMode = _this$asProps8.accordionMode, rawData = _this$asProps8.data, renderCellOverlay = _this$asProps8.renderCellOverlay;
+      var _this$asProps8 = this.asProps, use = _this$asProps8.use, compact = _this$asProps8.compact, loading = _this$asProps8.loading, getI18nText = _this$asProps8.getI18nText, expandedRows = _this$asProps8.expandedRows, virtualScroll = _this$asProps8.virtualScroll, uid = _this$asProps8.uid, rowProps = _this$asProps8.rowProps, renderCell = _this$asProps8.renderCell, headerProps = _this$asProps8.headerProps, renderEmptyData2 = _this$asProps8.renderEmptyData, sideIndents = _this$asProps8.sideIndents, selectedRows = _this$asProps8.selectedRows, accordionDuration = _this$asProps8.accordionDuration, accordionMode = _this$asProps8.accordionMode, rawData = _this$asProps8.data, renderCellOverlay = _this$asProps8.renderCellOverlay, totalRows = _this$asProps8.totalRows, variant = _this$asProps8.variant;
       var _this$gridSettings2 = this.gridSettings, gridTemplateColumns = _this$gridSettings2.gridTemplateColumns, gridTemplateAreas = _this$gridSettings2.gridTemplateAreas;
       var shadowVertical = this.state.shadowVertical;
       return {
@@ -687,7 +676,9 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         onCellClick: this.handleCellClick,
         rawData,
         shadowVertical,
-        renderCellOverlay
+        renderCellOverlay,
+        totalRows,
+        variant
       };
     }
   }, {
@@ -781,7 +772,7 @@ 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(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
@@ -796,91 +787,11 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         "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"]) !== void 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: "min-content",
-          alignItems: "flex-start",
-          children: ""
-        };
-        columns.push(column);
-      }
-      var makeColumn = function makeColumn2(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" : 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 column2 = {
-          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,
-          flexWrap: columnElement.props.flexWrap,
-          alignItems: columnElement.props.alignItems,
-          alignContent: columnElement.props.alignContent,
-          justifyContent: columnElement.props.justifyContent,
-          textAlign: columnElement.props.textAlign,
-          children: ""
-        };
-        return column2;
-      };
-      var childIsColumn = function childIsColumn2(child) {
-        return child.type === Head.Column;
-      };
-      var childIsGroup = function childIsGroup2(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(child2, j) {
-            if ((child2 === null || child2 === void 0 ? void 0 : child2.type) === Head.Column) {
-              var isFirst = j === 0;
-              var isLast = j === childCount - 1;
-              var _col = makeColumn(child2, 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;
+      var _this4 = this;
+      var _this$props = this.props, columns = _this$props.columns, data = _this$props.data, selectedRows = _this$props.selectedRows;
       this.hasGroups = columns.some(function(column2) {
         return "columns" in column2 && column2.columns.some(function(col) {
           return col.children !== null;
@@ -901,18 +812,18 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         calculatedColumns.push(column);
       }
       var makeColumn = function makeColumn2(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" : 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 column2 = _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 : void 0,
-          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
         });
         if (column2.fixed) {
-          _this5.hasFixedColumn = true;
+          _this4.hasFixedColumn = true;
         }
         return column2;
       };
@@ -936,7 +847,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);
@@ -947,14 +858,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(child2, j) {
             var _Group$columns;
             var isFirst = j === 0;
             var isLast = j === childCount - 1;
-            var col2 = makeColumn(child2, Group, isFirst, isLast, _this5.hasGroups);
+            var col2 = makeColumn(child2, Group, isFirst, isLast, _this4.hasGroups);
             if (i === 0 && j === 0 && data.some(function(d) {
               return d[ACCORDION];
             })) {
@@ -972,10 +883,20 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
             (_Group$columns = Group.columns) === null || _Group$columns === void 0 || _Group$columns.push(col2);
           });
           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,
+        gridTemplateAreas
+      };
       return [calculatedColumns, treeColumns];
     }
   }, {
@@ -991,9 +912,9 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getRows",
     value: function getRows() {
-      var _this6 = this;
+      var _this5 = this;
       var columns = this.columns;
-      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;
       }
@@ -1003,12 +924,14 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         return column.name;
       });
       var rowIndex = 0;
+      var gridRowIndex = 0;
       var id = 1e8;
       var makeDtRow = function makeDtRow2(row, excludeColumns) {
         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);
+        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 : "";
             columns2["delete"](key);
@@ -1021,11 +944,18 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
               columns2["delete"](value2);
             });
           }
-          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) {
           columns2["delete"](value);
         });
@@ -1041,8 +971,8 @@ 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;
@@ -1055,13 +985,13 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
               dtRow2[ROW_GROUP] = /* @__PURE__ */ new Set();
             } else {
               var _innerRows$;
-              if (index === groupedRows.length - 1 && row[ACCORDION]) {
-                childRow[ACCORDION] = row[ACCORDION];
-              }
               dtRow2 = makeDtRow(childRow, groupedKeys);
               (_innerRows$ = innerRows[0]) === null || _innerRows$ === void 0 || (_innerRows$ = _innerRows$[ROW_GROUP]) === null || _innerRows$ === void 0 || _innerRows$.add(dtRow2[UNIQ_ROW_KEY]);
             }
             innerRows.push(dtRow2);
+            if (index === groupedRows.length - 1 && row[ACCORDION]) {
+              gridRowIndex = Array.isArray(row[ACCORDION]) ? gridRowIndex + row[ACCORDION].length : gridRowIndex + 1;
+            }
             rowIndex++;
           });
           rows.push(innerRows);
@@ -1077,8 +1007,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",
@@ -1121,17 +1051,17 @@ _defineProperty(DataTableRoot, "defaultProps", {
       description: "",
       w: "100%"
     });
-  }
+  },
+  variant: "default"
 });
 var DataTable = createComponent(DataTableRoot, {
   Head,
   Body
 });
-var DataTableInternal = DataTable;
 export {
   ACCORDION,
   DataTable,
-  DataTableInternal,
+  GRID_ROW_INDEX,
   IS_EMPTY_DATA_ROW,
   ROW_GROUP,
   ROW_INDEX,