@semcore/data-table 16.0.0-prerelease.15 → 16.0.0-prerelease.17

package/lib/esm/components/Head/Group.mjs

@@ -1,7 +1,6 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
@@ -13,47 +12,40 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SHead_182z1_gg_{display:contents}.___SHead_182z1_gg_.__sticky_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:0;z-index:1}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{top:0}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroupContainer_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:40px;z-index:1}.___SHead_182z1_gg_.__compact_182z1_gg_ .___SColumn_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_182z1_gg_,.___SGroup_182z1_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SGroup_182z1_gg_._use_primary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-3x, 12px);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_182z1_gg_._use_secondary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-2x, 8px);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SGroup_182z1_gg_:has(.___SColumn_182z1_gg_.__visibleSort_182z1_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_left_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_left_182z1_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_right_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_right_182z1_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_,.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before,.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before{display:flex;opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_{display:flex;opacity:1}.___SColumn_182z1_gg_.__gridArea_182z1_gg_,.___SGroupTitle_182z1_gg_.__gridArea_182z1_gg_,.___SGroup_182z1_gg_.__gridArea_182z1_gg_{grid-area:var(--gridArea_182z1)}.___SHead_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_ .___SGroup_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{position:sticky;z-index:2}@media (hover:hover){.___SColumn_182z1_gg_.__sortable_182z1_gg_:hover{cursor:pointer}}.___SSortWrapper_182z1_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_182z1_gg_,.___SSortWrapper_182z1_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_182z1_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_182z1_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}',
-    "182z1_gg_"
+    '.___SGroupContainer_1yovy_gg_,.___SHead_1yovy_gg_{display:contents}.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SColumn_1yovy_gg_{position:sticky;top:0;z-index:2}.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SGroup_1yovy_gg_{top:0}.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SGroupContainer_1yovy_gg_>.___SColumn_1yovy_gg_{position:sticky;z-index:2}.___SHead_1yovy_gg_.__compact_1yovy_gg_ .___SColumn_1yovy_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1yovy_gg_,.___SGroup_1yovy_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;overflow:hidden}.___SGroup_1yovy_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_1yovy_gg_._use_primary_1yovy_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1yovy_gg_._use_primary_1yovy_gg_:has(~.___SColumn_1yovy_gg_.__visibleSort_1yovy_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_1yovy_gg_._use_secondary_1yovy_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1yovy_gg_._borders_both_1yovy_gg_,.___SColumn_1yovy_gg_._borders_left_1yovy_gg_,.___SGroup_1yovy_gg_._borders_both_1yovy_gg_,.___SGroup_1yovy_gg_._borders_left_1yovy_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1yovy_gg_._borders_both_1yovy_gg_,.___SColumn_1yovy_gg_._borders_right_1yovy_gg_,.___SGroup_1yovy_gg_._borders_both_1yovy_gg_,.___SGroup_1yovy_gg_._borders_right_1yovy_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_ .___SSortWrapper_1yovy_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_.__visibleSort_1yovy_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortWrapper_1yovy_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortButton_1yovy_gg_,.___SColumn_1yovy_gg_._use_primary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortWrapper_1yovy_gg_::before,.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortWrapper_1yovy_gg_::before{display:flex;opacity:1}.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_ .___SSortWrapper_1yovy_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortWrapper_1yovy_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortButton_1yovy_gg_{display:flex;opacity:1}.___SColumn_1yovy_gg_.__gridArea_1yovy_gg_,.___SGroupTitle_1yovy_gg_.__gridArea_1yovy_gg_,.___SGroup_1yovy_gg_.__gridArea_1yovy_gg_{grid-area:var(--gridArea_1yovy)}.___SHead_1yovy_gg_ .___SColumn_1yovy_gg_.__fixed_1yovy_gg_,.___SHead_1yovy_gg_ .___SGroup_1yovy_gg_.__fixed_1yovy_gg_,.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SColumn_1yovy_gg_.__fixed_1yovy_gg_,.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SGroup_1yovy_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_1yovy_gg_.__sortable_1yovy_gg_:hover{cursor:pointer}}.___SSortWrapper_1yovy_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_1yovy_gg_,.___SSortWrapper_1yovy_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1yovy_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_1yovy_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}',
+    "1yovy_gg_"
   ), {
-    "__SHead": "___SHead_182z1_gg_",
-    "_sticky": "__sticky_182z1_gg_",
-    "__SColumn": "___SColumn_182z1_gg_",
-    "__SGroup": "___SGroup_182z1_gg_",
-    "__SGroupContainer": "___SGroupContainer_182z1_gg_",
-    "_compact": "__compact_182z1_gg_",
-    "_use_primary": "_use_primary_182z1_gg_",
-    "_use_secondary": "_use_secondary_182z1_gg_",
-    "_visibleSort": "__visibleSort_182z1_gg_",
-    "_borders_both": "_borders_both_182z1_gg_",
-    "_borders_left": "_borders_left_182z1_gg_",
-    "_borders_right": "_borders_right_182z1_gg_",
-    "_gridArea": "__gridArea_182z1_gg_",
-    "__SGroupTitle": "___SGroupTitle_182z1_gg_",
-    "--gridArea": "--gridArea_182z1",
-    "_fixed": "__fixed_182z1_gg_",
-    "_sortable": "__sortable_182z1_gg_",
-    "__SSortWrapper": "___SSortWrapper_182z1_gg_",
-    "__SSortButton": "___SSortButton_182z1_gg_"
+    "__SHead": "___SHead_1yovy_gg_",
+    "__SGroupContainer": "___SGroupContainer_1yovy_gg_",
+    "_sticky": "__sticky_1yovy_gg_",
+    "__SColumn": "___SColumn_1yovy_gg_",
+    "__SGroup": "___SGroup_1yovy_gg_",
+    "_compact": "__compact_1yovy_gg_",
+    "_use_secondary": "_use_secondary_1yovy_gg_",
+    "_borders_both": "_borders_both_1yovy_gg_",
+    "_borders_left": "_borders_left_1yovy_gg_",
+    "_borders_right": "_borders_right_1yovy_gg_",
+    "_gridArea": "__gridArea_1yovy_gg_",
+    "__SGroupTitle": "___SGroupTitle_1yovy_gg_",
+    "--gridArea": "--gridArea_1yovy",
+    "_fixed": "__fixed_1yovy_gg_",
+    "_sortable": "__sortable_1yovy_gg_",
+    "__SSortWrapper": "___SSortWrapper_1yovy_gg_",
+    "__SSortButton": "___SSortButton_1yovy_gg_",
+    "_use_primary": "_use_primary_1yovy_gg_",
+    "_visibleSort": "__visibleSort_1yovy_gg_"
   })
 );
 var Group = /* @__PURE__ */ function(_Component) {
   _inherits(Group2, _Component);
   var _super = _createSuper(Group2);
   function Group2() {
-    var _this;
     _classCallCheck(this, Group2);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "mounted", false);
-    return _this;
+    return _super.apply(this, arguments);
   }
   _createClass(Group2, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.mounted = true;
       this.forceUpdate();
     }
   }, {
@@ -73,10 +65,9 @@ var Group = /* @__PURE__ */ function(_Component) {
       if (fixed === "right") {
         style2.right = fixedColumnsMap.get(lastName);
       }
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SGroupContainer, _ref2.cn("SGroupContainer", {
-        "display": "contents"
-      }), this.mounted && /* @__PURE__ */ React.createElement(SGroup, _ref2.cn("SGroup", _objectSpread({}, assignProps({
-        "style": style2
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SGroupContainer, _ref2.cn("SGroupContainer", {}), /* @__PURE__ */ React.createElement(SGroup, _ref2.cn("SGroup", _objectSpread({}, assignProps({
+        "style": style2,
+        "__excludeProps": ["title"]
       }, _ref))), title), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})));
     }
   }]);

package/lib/esm/components/Head/Head.mjs

@@ -11,33 +11,33 @@ import * as React from "react";
 import { ScreenReaderOnly, Box } from "@semcore/base-components";
 import { Column } from "./Column.mjs";
 import { Group } from "./Group.mjs";
-import { getFixedStyle, getScrollOffsetValue } from "../../utils.mjs";
+import { getFixedStyle } from "../../utils.mjs";
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SHead_182z1_gg_{display:contents}.___SHead_182z1_gg_.__sticky_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:0;z-index:1}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{top:0}.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroupContainer_182z1_gg_>.___SColumn_182z1_gg_{position:sticky;top:40px;z-index:1}.___SHead_182z1_gg_.__compact_182z1_gg_ .___SColumn_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_182z1_gg_,.___SGroup_182z1_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SGroup_182z1_gg_._use_primary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-3x, 12px);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_182z1_gg_._use_secondary_182z1_gg_{justify-content:center;padding:var(--intergalactic-spacing-2x, 8px);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SGroup_182z1_gg_:has(.___SColumn_182z1_gg_.__visibleSort_182z1_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_left_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_left_182z1_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._borders_both_182z1_gg_,.___SColumn_182z1_gg_._borders_right_182z1_gg_,.___SGroup_182z1_gg_._borders_both_182z1_gg_,.___SGroup_182z1_gg_._borders_right_182z1_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_,.___SColumn_182z1_gg_._use_primary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before,.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_::before{display:flex;opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_ .___SSortWrapper_182z1_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortWrapper_182z1_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_182z1_gg_._use_secondary_182z1_gg_.__visibleSort_182z1_gg_ .___SSortButton_182z1_gg_{display:flex;opacity:1}.___SColumn_182z1_gg_.__gridArea_182z1_gg_,.___SGroupTitle_182z1_gg_.__gridArea_182z1_gg_,.___SGroup_182z1_gg_.__gridArea_182z1_gg_{grid-area:var(--gridArea_182z1)}.___SHead_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_ .___SGroup_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SColumn_182z1_gg_.__fixed_182z1_gg_,.___SHead_182z1_gg_.__sticky_182z1_gg_ .___SGroup_182z1_gg_{position:sticky;z-index:2}@media (hover:hover){.___SColumn_182z1_gg_.__sortable_182z1_gg_:hover{cursor:pointer}}.___SSortWrapper_182z1_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_182z1_gg_,.___SSortWrapper_182z1_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_182z1_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_182z1_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}',
-    "182z1_gg_"
+    '.___SGroupContainer_1yovy_gg_,.___SHead_1yovy_gg_{display:contents}.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SColumn_1yovy_gg_{position:sticky;top:0;z-index:2}.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SGroup_1yovy_gg_{top:0}.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SGroupContainer_1yovy_gg_>.___SColumn_1yovy_gg_{position:sticky;z-index:2}.___SHead_1yovy_gg_.__compact_1yovy_gg_ .___SColumn_1yovy_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1yovy_gg_,.___SGroup_1yovy_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;overflow:hidden}.___SGroup_1yovy_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_1yovy_gg_._use_primary_1yovy_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1yovy_gg_._use_primary_1yovy_gg_:has(~.___SColumn_1yovy_gg_.__visibleSort_1yovy_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_1yovy_gg_._use_secondary_1yovy_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1yovy_gg_._borders_both_1yovy_gg_,.___SColumn_1yovy_gg_._borders_left_1yovy_gg_,.___SGroup_1yovy_gg_._borders_both_1yovy_gg_,.___SGroup_1yovy_gg_._borders_left_1yovy_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1yovy_gg_._borders_both_1yovy_gg_,.___SColumn_1yovy_gg_._borders_right_1yovy_gg_,.___SGroup_1yovy_gg_._borders_both_1yovy_gg_,.___SGroup_1yovy_gg_._borders_right_1yovy_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_ .___SSortWrapper_1yovy_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_.__visibleSort_1yovy_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortWrapper_1yovy_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1yovy_gg_._use_primary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortButton_1yovy_gg_,.___SColumn_1yovy_gg_._use_primary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortWrapper_1yovy_gg_::before,.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortWrapper_1yovy_gg_::before{display:flex;opacity:1}.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_ .___SSortWrapper_1yovy_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortWrapper_1yovy_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1yovy_gg_._use_secondary_1yovy_gg_.__visibleSort_1yovy_gg_ .___SSortButton_1yovy_gg_{display:flex;opacity:1}.___SColumn_1yovy_gg_.__gridArea_1yovy_gg_,.___SGroupTitle_1yovy_gg_.__gridArea_1yovy_gg_,.___SGroup_1yovy_gg_.__gridArea_1yovy_gg_{grid-area:var(--gridArea_1yovy)}.___SHead_1yovy_gg_ .___SColumn_1yovy_gg_.__fixed_1yovy_gg_,.___SHead_1yovy_gg_ .___SGroup_1yovy_gg_.__fixed_1yovy_gg_,.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SColumn_1yovy_gg_.__fixed_1yovy_gg_,.___SHead_1yovy_gg_.__sticky_1yovy_gg_ .___SGroup_1yovy_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_1yovy_gg_.__sortable_1yovy_gg_:hover{cursor:pointer}}.___SSortWrapper_1yovy_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_1yovy_gg_,.___SSortWrapper_1yovy_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1yovy_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_1yovy_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}',
+    "1yovy_gg_"
   ), {
-    "__SHead": "___SHead_182z1_gg_",
-    "_sticky": "__sticky_182z1_gg_",
-    "__SColumn": "___SColumn_182z1_gg_",
-    "__SGroup": "___SGroup_182z1_gg_",
-    "__SGroupContainer": "___SGroupContainer_182z1_gg_",
-    "_compact": "__compact_182z1_gg_",
-    "_use_primary": "_use_primary_182z1_gg_",
-    "_use_secondary": "_use_secondary_182z1_gg_",
-    "_visibleSort": "__visibleSort_182z1_gg_",
-    "_borders_both": "_borders_both_182z1_gg_",
-    "_borders_left": "_borders_left_182z1_gg_",
-    "_borders_right": "_borders_right_182z1_gg_",
-    "_gridArea": "__gridArea_182z1_gg_",
-    "__SGroupTitle": "___SGroupTitle_182z1_gg_",
-    "--gridArea": "--gridArea_182z1",
-    "_fixed": "__fixed_182z1_gg_",
-    "_sortable": "__sortable_182z1_gg_",
-    "__SSortWrapper": "___SSortWrapper_182z1_gg_",
-    "__SSortButton": "___SSortButton_182z1_gg_"
+    "__SHead": "___SHead_1yovy_gg_",
+    "__SGroupContainer": "___SGroupContainer_1yovy_gg_",
+    "_sticky": "__sticky_1yovy_gg_",
+    "__SColumn": "___SColumn_1yovy_gg_",
+    "__SGroup": "___SGroup_1yovy_gg_",
+    "_compact": "__compact_1yovy_gg_",
+    "_use_secondary": "_use_secondary_1yovy_gg_",
+    "_borders_both": "_borders_both_1yovy_gg_",
+    "_borders_left": "_borders_left_1yovy_gg_",
+    "_borders_right": "_borders_right_1yovy_gg_",
+    "_gridArea": "__gridArea_1yovy_gg_",
+    "__SGroupTitle": "___SGroupTitle_1yovy_gg_",
+    "--gridArea": "--gridArea_1yovy",
+    "_fixed": "__fixed_1yovy_gg_",
+    "_sortable": "__sortable_1yovy_gg_",
+    "__SSortWrapper": "___SSortWrapper_1yovy_gg_",
+    "__SSortButton": "___SSortButton_1yovy_gg_",
+    "_use_primary": "_use_primary_1yovy_gg_",
+    "_visibleSort": "__visibleSort_1yovy_gg_"
   })
 );
 var HeadRoot = /* @__PURE__ */ function(_Component) {
@@ -72,7 +72,7 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getColumnProps",
     value: function getColumnProps(_, index) {
-      var _this$asProps2 = this.asProps, use = _this$asProps2.use, columns = _this$asProps2.columns, sort = _this$asProps2.sort, onSortChange = _this$asProps2.onSortChange, tableRef = _this$asProps2.tableRef, gridTemplateColumns = _this$asProps2.gridTemplateColumns, gridTemplateAreas = _this$asProps2.gridTemplateAreas;
+      var _this$asProps2 = this.asProps, use = _this$asProps2.use, columns = _this$asProps2.columns, sort = _this$asProps2.sort, onSortChange = _this$asProps2.onSortChange, tableRef = _this$asProps2.tableRef, gridTemplateColumns = _this$asProps2.gridTemplateColumns, gridTemplateAreas = _this$asProps2.gridTemplateAreas, sticky = _this$asProps2.sticky;
       var column = columns[index];
       var _getFixedStyle = getFixedStyle(column, columns), _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2), name = _getFixedStyle2[0], value = _getFixedStyle2[1];
       var style2 = {};
@@ -89,6 +89,7 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
         style: style2,
         gridArea: column.gridArea,
         fixed: column.fixed,
+        sticky,
         borders: column.borders,
         sort,
         onSortChange,
@@ -105,13 +106,7 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
     value: function render() {
       var _ref = this.asProps, _ref2;
       var SHead = Box;
-      var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, styles = _this$asProps3.styles, columns = _this$asProps3.columns;
-      _this$asProps3.tableRef;
-      _this$asProps3.withScrollBar;
-      var getI18nText = _this$asProps3.getI18nText;
-      var _getScrollOffsetValue = getScrollOffsetValue(columns), _getScrollOffsetValue2 = _slicedToArray(_getScrollOffsetValue, 2);
-      _getScrollOffsetValue2[0];
-      _getScrollOffsetValue2[1];
+      var _this$asProps3 = this.asProps, Children = _this$asProps3.Children, styles = _this$asProps3.styles, getI18nText = _this$asProps3.getI18nText;
       return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SHead, _ref2.cn("SHead", _objectSpread({}, assignProps({
         "role": "row",
         "aria-rowindex": 1

package/lib/esm/index.mjs

@@ -1,11 +1,10 @@
-import { ACCORDION, DataTable } from "./components/DataTable/DataTable.mjs";
-import { ROW_GROUP, default as default2, wrapDataTable, wrapDataTableCell, wrapDataTableRow } from "./DataTable.mjs";
+import { ACCORDION, DataTable, ROW_GROUP } from "./components/DataTable/DataTable.mjs";
+var wrapDataTable = function wrapDataTable2(wrapper) {
+  return wrapper;
+};
 export {
   ACCORDION,
   DataTable,
   ROW_GROUP,
-  default2 as default,
-  wrapDataTable,
-  wrapDataTableCell,
-  wrapDataTableRow
+  wrapDataTable
 };

package/lib/esm/utils.mjs

@@ -9,14 +9,6 @@ var getScrollOffsetValue = function getScrollOffsetValue2(columns) {
     return acc;
   }, [0, 0]);
 };
-var flattenColumns = function flattenColumns2(columns) {
-  return columns.reduce(function(acc, column) {
-    var hasNestedColumns = "columns" in column && column.columns.length > 0;
-    var columns2 = hasNestedColumns ? flattenColumns2(column.columns) : [column];
-    acc = acc.concat(columns2);
-    return acc;
-  }, []);
-};
 var getFixedStyle = function getFixedStyle2(cell, columns) {
   var side = cell.fixed;
   if (!side) return [void 0, void 0];
@@ -46,7 +38,6 @@ var getFixedStyle = function getFixedStyle2(cell, columns) {
   return [side, "".concat(sum, "px")];
 };
 export {
-  flattenColumns,
   getFixedStyle,
   getScrollOffsetValue
 };

package/lib/types/components/Body/Body.types.d.ts

@@ -1,31 +1,36 @@
 /// <reference types="react" />
-import { DTRow } from './Row.types';
+import { DTRow, DTRows } from './Row.types';
 import { DTColumn } from '../Head/Column.types';
 import { DTUse } from '../DataTable/DataTable.types';
 type CellRenderProps = {
-    name: string;
+    dataKey: string;
     row: DTRow;
     column: DTColumn;
     rowIndex: number;
     columnIndex: number;
-    value: string | number | boolean;
+    columnName: string;
+    value: string;
     defaultRender: () => React.ReactNode;
+    isMergedRows: boolean;
+    isMergedColumns: boolean;
 };
 export type DataTableBodyProps = {
-    renderCell?: (props: CellRenderProps) => React.ReactNode;
-    expandedRows?: number[];
+    renderCell?: (props: CellRenderProps) => React.ReactNode | Record<string, any>;
+    virtualScroll?: boolean;
 };
 export type BodyPropsInner = {
-    rows: DTRow[];
+    rows: DTRows;
+    flatRows: DTRow[];
     columns: DTColumn[];
     use: DTUse;
-    scrollRef: (ref: HTMLDivElement) => void;
-    headerRows: number;
     compact: boolean;
     gridTemplateColumns: string[];
     gridTemplateAreas: string[];
     loading?: boolean;
     headerHeight: number;
     getI18nText: (key: string) => string;
+    expandedRows: number[];
+    onExpandRow: (rowIndex: number) => void;
+    spinnerRef: React.RefObject<HTMLDivElement>;
 };
 export {};

package/lib/types/components/Body/Cell.types.d.ts

@@ -1,13 +1,13 @@
+/// <reference types="react" />
 import { DTRow } from './Row.types';
 import { DTUse } from '../DataTable/DataTable.types';
-import { DTColumn, CommonColumnType } from '../Head/Column.types';
-export type DataTableCellProps = CommonColumnType & {
-    name: string;
+import { DTColumn } from '../Head/Column.types';
+export type DataTableCellProps = {
     row: DTRow;
-    columnIndex: number;
-    column: DTColumn;
     rowIndex: number;
-    gridArea?: string;
+    column: DTColumn;
+    columnIndex: number;
+    children?: React.ReactNode;
 };
 export type CellPropsInner = {
     use: DTUse;

package/lib/types/components/Body/MergedCells.d.ts

@@ -1,10 +1,15 @@
 export declare class MergedRowsCell {
     readonly value: any;
-    readonly rowsCount: number;
-    constructor(value: any, size: number);
+    readonly fromRow: number;
+    readonly toRow: number;
+    constructor(value: any, rows: [number, number]);
 }
 export declare class MergedColumnsCell {
     readonly value: any;
     readonly columnsCount: number;
-    constructor(value: any, size: number);
+    readonly dataKey: string;
+    constructor(value: any, options: {
+        size: number;
+        dataKey: string;
+    });
 }

package/lib/types/components/Body/Row.types.d.ts

@@ -1,15 +1,15 @@
-import { DTValue, DTKey, DTUse } from '../DataTable/DataTable.types';
+/// <reference types="react" />
+import { DTValue, DTUse, DataTableData } from '../DataTable/DataTable.types';
 import { DTColumn } from '../Head/Column.types';
 import { MergedColumnsCell, MergedRowsCell } from './MergedCells';
-export type DTRow = Record<DTKey, DTValue | MergedRowsCell | MergedColumnsCell>;
+import { ACCORDION } from '../DataTable/DataTable';
+export type DTRow = {
+    [key: string]: DTValue | MergedRowsCell | MergedColumnsCell;
+    [ACCORDION]?: React.ReactNode | DataTableData | undefined;
+};
+export type DTRows = Array<DTRow | DTRow[]>;
 export type DataTableRowProps = {
-    columns: DTColumn[];
     row: DTRow;
-    rows: DTRow[];
-    rowIndex: number;
-    headerRows: number;
-    expandedRows?: number[];
-    onExpandRow?: (expandedRowIndex: number) => void;
 };
 export type RowPropsInner = {
     use: DTUse;
@@ -18,7 +18,16 @@ export type RowPropsInner = {
      * @default false
      */
     expanded?: boolean;
-    gridTemplateAreas: string;
-    gridTemplateColumns: string;
+    columns: DTColumn[];
+    row: DTRow | DTRow[];
+    rows: DTRows;
+    flatRows: DTRow[];
+    rowIndex: number;
+    ariaRowIndex: number;
+    expandedRows: number[];
+    onExpandRow: (expandedRowIndex: number) => void;
+    gridTemplateAreas: string[];
+    gridTemplateColumns: string[];
     accordionDataGridArea: string;
+    inert?: '';
 };

package/lib/types/components/DataTable/DataTable.d.ts

@@ -1,9 +1,9 @@
-import { Intergalactic } from '@semcore/core';
-import { DataTableProps } from './DataTable.types';
+import { DataTableProps, DataTableData } from './DataTable.types';
 import { Head } from '../Head/Head';
 import { Body } from '../Body/Body';
 export declare const ACCORDION: unique symbol;
-export declare const DataTable: (<Tag extends Intergalactic.InternalTypings.ComponentTag = "div", Props extends DataTableProps = DataTableProps>(props: Intergalactic.InternalTypings.ComponentProps<Tag, "div", Props, {}, never[]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", Intergalactic.InternalTypings.ComponentTag, DataTableProps, {}, never[]> & {
+export declare const ROW_GROUP: unique symbol;
+export declare const DataTable: (<Data extends DataTableData, Tag extends import("@semcore/core").Intergalactic.InternalTypings.ComponentTag = "div">(props: import("@semcore/core").Intergalactic.InternalTypings.ComponentProps<Tag, "div", DataTableProps<Data>, never, never[]>) => import("@semcore/core").Intergalactic.InternalTypings.ComponentRenderingResults) & import("@semcore/core").Intergalactic.InternalTypings.ComponentAdditive<"div", "div", DataTableProps<any>, {}, {}> & {
     Head: typeof Head;
     Body: typeof Body;
 };

package/lib/types/components/DataTable/DataTable.types.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { Intergalactic } from '@semcore/core';
 import { BoxProps } from '@semcore/base-components';
+import { ACCORDION, ROW_GROUP } from './DataTable';
 /**
  * Datatable must have an accessible name (aria-table-name).
  * It should describe table content.
@@ -11,15 +12,23 @@ type DataTableAriaProps = Intergalactic.RequireAtLeastOne<{
     title?: string;
 }>;
 export type SortDirection = 'asc' | 'desc';
-export type DataTableSort<Column = string> = [sortBy: Column, sortDirection: SortDirection];
-export type DTKey = string | symbol;
-export type DTValue = string | number | boolean;
-export type DataTableData = Array<Record<DTKey, any>>;
+export type DataTableSort<Column> = [sortBy: Column, sortDirection: SortDirection];
+export type DataTableChangeSort<Column> = (sort: [sortBy: Column, sortDirection: SortDirection], e?: React.SyntheticEvent) => void;
+export type DataRowItem = {
+    [key: string]: DTValue | undefined;
+    [ACCORDION]?: React.ReactNode | DataTableData;
+    [ROW_GROUP]?: DataTableData;
+};
+export interface DTValue {
+    toString(): string;
+    [ACCORDION]?: React.ReactNode | DataTableData;
+}
+export type DataTableData = DataRowItem[];
 export type DTUse = 'primary' | 'secondary';
 type Sizes = Pick<BoxProps, 'w' | 'wMax' | 'wMin' | 'h' | 'hMax' | 'hMin'>;
-export type DataTableProps = DataTableAriaProps & Sizes & {
+export type DataTableProps<D extends DataTableData> = DataTableAriaProps & Sizes & {
     /** Data for table */
-    data: DataTableData;
+    data: D;
     /** Count of total rows if table using virtual scroll. Needs for accessibility */
     totalRows?: number;
     /** Table theme according to visual hierarchy on the page
@@ -27,16 +36,16 @@ export type DataTableProps = DataTableAriaProps & Sizes & {
      * */
     use?: DTUse;
     /** Active sort object */
-    sort?: DataTableSort;
+    sort?: DataTableSort<keyof D[0]>;
     /** Handler call when request will change sort */
-    onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;
+    onSortChange?: DataTableChangeSort<keyof D[0]>;
     /**
      *
      * @default auto
      */
     defaultGridTemplateColumnWidth?: 'auto' | '1fr';
     /**
-     * Flag for compact view (less paddings)
+     * Flag for compact view (fewer paddings)
      */
     compact?: boolean;
     /**
@@ -44,7 +53,12 @@ export type DataTableProps = DataTableAriaProps & Sizes & {
      */
     loading?: boolean;
     children?: any;
+    /**
+     *
+     */
+    expandedRows?: number[];
 };
 export type RowIndex = number;
 export type ColIndex = number;
+export type DataTableType = (<Data extends DataTableData, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableProps<Data>>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableProps<any>>;
 export {};

package/lib/types/components/Head/Column.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { Component } from '@semcore/core';
 import { ColumnPropsInner, DataTableColumnProps } from './Column.types';
+import type { DataTableData } from '../DataTable/DataTable.types';
 type State = {
     sortVisible: boolean;
 };
-export declare class Column extends Component<DataTableColumnProps, {}, {}, [], ColumnPropsInner> {
+export declare class Column<D extends DataTableData> extends Component<DataTableColumnProps, {}, {}, [
+], ColumnPropsInner<D>> {
     static displayName: string;
     static style: {
         [key: string]: string;
@@ -13,11 +15,12 @@ export declare class Column extends Component<DataTableColumnProps, {}, {}, [],
     columnRef: React.RefObject<HTMLDivElement>;
     sortWrapperRef: React.RefObject<HTMLDivElement>;
     state: State;
-    componentDidUpdate(prevProps: DataTableColumnProps & ColumnPropsInner): void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: DataTableColumnProps & ColumnPropsInner<D>): void;
     calculateActiveColumnMinWidth: () => number | null;
     handleMouseEnter: () => void;
     handleMouseLeave: () => void;
-    handleBlur: () => void;
+    handleBlur: (e: React.FocusEvent<HTMLElement>) => void;
     handleSortClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
     handleKeyDown: (e: React.KeyboardEvent) => void;
     handleFocusCell: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;

package/lib/types/components/Head/Column.types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DataTableProps, DTUse } from '../DataTable/DataTable.types';
+import { DataTableData, DataTableProps, DTUse } from '../DataTable/DataTable.types';
 import { Property } from 'csstype';
 export type CommonColumnType = {
     /**
@@ -65,11 +65,11 @@ export type DataTableColumnProps = CommonColumnType & {
     changeSortSize?: boolean;
     children?: React.ReactElement[];
 };
-export type ColumnPropsInner = {
+export type ColumnPropsInner<D extends DataTableData> = {
     use: DTUse;
     borders?: 'both' | 'left' | 'right';
-    sort?: DataTableProps['sort'];
-    onSortChange?: DataTableProps['onSortChange'];
+    sort?: DataTableProps<D>['sort'];
+    onSortChange?: DataTableProps<D>['onSortChange'];
     uid: string;
     parent?: DTColumn;
     sortableColumnDescribeId: string;
@@ -77,4 +77,5 @@ export type ColumnPropsInner = {
     tableRef: React.RefObject<HTMLElement>;
     gridTemplateColumns: string[];
     gridTemplateAreas: string[];
+    sticky: boolean;
 };

package/lib/types/components/Head/Group.d.ts

@@ -6,7 +6,6 @@ export declare class Group extends Component<DataTableGroupProps, {}, {}, [], Gr
     static style: {
         [key: string]: string;
     };
-    mounted: boolean;
     componentDidMount(): void;
     render(): React.ReactNode;
 }

package/lib/types/components/Head/Group.type.d.ts

@@ -1,8 +1,11 @@
 import { DTUse } from '../DataTable/DataTable.types';
+import { ReactElement } from 'react';
+import { DataTableColumnProps } from './Column.types';
 export type DataTableGroupProps = {
-    title: string;
+    title: React.ReactNode;
     borders?: 'both' | 'left' | 'right';
     fixed?: 'left' | 'right';
+    children: Array<ReactElement<DataTableColumnProps>>;
 };
 export type GroupPropsInner = {
     use: DTUse;

package/lib/types/components/Head/Head.d.ts

@@ -1,8 +1,11 @@
-import { Component, Intergalactic } from '@semcore/core';
+import { Intergalactic } from '@semcore/core';
 import { DataTableHeadProps } from './Head.types';
+import Tooltip from '@semcore/tooltip';
 import { DataTableColumnProps } from './Column.types';
 import { DataTableGroupProps } from './Group.type';
 export declare const Head: (<Tag extends Intergalactic.InternalTypings.ComponentTag = "div", Props extends DataTableHeadProps = DataTableHeadProps>(props: Intergalactic.InternalTypings.ComponentProps<Tag, "div", Props, {}, never[]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", Intergalactic.InternalTypings.ComponentTag, DataTableHeadProps, {}, never[]> & {
-    Column: Intergalactic.Component<'div', DataTableColumnProps>;
-    Group: Intergalactic.Component<'div', DataTableGroupProps>;
+    Column: (props: Intergalactic.InternalTypings.ComponentProps<'div' | typeof Tooltip, 'div', DataTableColumnProps, {}, [
+    ]>) => Intergalactic.InternalTypings.ComponentRenderingResults;
+    Group: (props: Intergalactic.InternalTypings.ComponentProps<'div' | typeof Tooltip, 'div', DataTableGroupProps, {}, [
+    ]>) => Intergalactic.InternalTypings.ComponentRenderingResults;
 };

package/lib/types/components/Head/Head.types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DataTableProps, DTUse } from '../DataTable/DataTable.types';
+import { DataTableData, DataTableProps, DTUse } from '../DataTable/DataTable.types';
 import { DTColumn } from './Column.types';
 export type DataTableHeadProps = {
     /**
@@ -7,16 +7,20 @@ export type DataTableHeadProps = {
      * @default false
      */
     sticky?: boolean;
+    /**
+     * offset for sticky header
+     */
+    top?: number;
     /** Enable scroll bar element in header */
     withScrollBar?: boolean;
 };
-export type HeadPropsInner = {
+export type HeadPropsInner<D extends DataTableData> = {
     use: DTUse;
     tableRef: React.RefObject<HTMLElement>;
     columns: DTColumn[];
     compact: boolean;
-    sort?: DataTableProps['sort'];
-    onSortChange?: DataTableProps['onSortChange'];
+    sort?: DataTableProps<D>['sort'];
+    onSortChange?: DataTableProps<D>['onSortChange'];
     getI18nText: (key: string) => string;
     uid: string;
     ref: React.RefObject<HTMLDivElement>;

package/lib/types/index.d.ts

@@ -1,4 +1,10 @@
-import { DataTable, ACCORDION } from './components/DataTable/DataTable';
-export { default } from './DataTable';
-export * from './DataTable';
-export { DataTable, ACCORDION };
+import { DataTable, ACCORDION, ROW_GROUP } from './components/DataTable/DataTable';
+import type { DataTableSort, DataTableType, DataTableData } from './components/DataTable/DataTable.types';
+import { Intergalactic } from '@semcore/core';
+import React from 'react';
+declare const wrapDataTable: <PropsExtending extends {}>(wrapper: (props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentPropsNesting<DataTableType>, "tag" | "ref"> & {
+    ref: React.Ref<any>;
+    tag: Intergalactic.InternalTypings.ComponentTag;
+} & PropsExtending) => React.ReactNode) => DataTableType;
+export { DataTable, ACCORDION, ROW_GROUP, wrapDataTable };
+export type { DataTableSort, DataTableData };