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

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

@@ -19,31 +19,32 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SGroupContainer_13xrb_gg_,.___SHead_13xrb_gg_{display:contents}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SColumn_13xrb_gg_{position:sticky;top:0;z-index:2}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroup_13xrb_gg_{top:0}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroupContainer_13xrb_gg_>.___SColumn_13xrb_gg_{position:sticky;z-index:2}.___SHead_13xrb_gg_.__compact_13xrb_gg_ .___SColumn_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_13xrb_gg_,.___SGroup_13xrb_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_13xrb_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_13xrb_gg_._use_primary_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_13xrb_gg_._use_primary_13xrb_gg_:has(~.___SColumn_13xrb_gg_.__visibleSort_13xrb_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_13xrb_gg_._use_secondary_13xrb_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_13xrb_gg_._borders_both_13xrb_gg_,.___SColumn_13xrb_gg_._borders_left_13xrb_gg_,.___SGroup_13xrb_gg_._borders_both_13xrb_gg_,.___SGroup_13xrb_gg_._borders_left_13xrb_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_13xrb_gg_._borders_both_13xrb_gg_,.___SColumn_13xrb_gg_._borders_right_13xrb_gg_,.___SGroup_13xrb_gg_._borders_both_13xrb_gg_,.___SGroup_13xrb_gg_._borders_right_13xrb_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_13xrb_gg_._use_primary_13xrb_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_13xrb_gg_._use_primary_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortButton_13xrb_gg_,.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before,.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{display:flex;opacity:1}.___SColumn_13xrb_gg_._use_secondary_13xrb_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_13xrb_gg_._use_secondary_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortButton_13xrb_gg_{display:flex;opacity:1}.___SColumn_13xrb_gg_.__gridArea_13xrb_gg_,.___SGroupTitle_13xrb_gg_.__gridArea_13xrb_gg_,.___SGroup_13xrb_gg_.__gridArea_13xrb_gg_{grid-area:var(--gridArea_13xrb)}.___SHead_13xrb_gg_ .___SColumn_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_ .___SGroup_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SColumn_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroup_13xrb_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_13xrb_gg_.__sortable_13xrb_gg_:hover{cursor:pointer}}.___SSortWrapper_13xrb_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_13xrb_gg_,.___SSortWrapper_13xrb_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_13xrb_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_13xrb_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_13xrb_gg_._sideIndents_l_13xrb_gg_ .___SColumn_13xrb_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_13xrb_gg_._sideIndents_l_13xrb_gg_ .___SColumn_13xrb_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}',
+    '.___SGroupContainer_1311w_gg_,.___SHead_1311w_gg_{display:contents}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SColumn_1311w_gg_{position:sticky;top:0;z-index:2}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroup_1311w_gg_{top:0}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroupContainer_1311w_gg_>.___SColumn_1311w_gg_{position:sticky;z-index:2}.___SHead_1311w_gg_.__compact_1311w_gg_ .___SColumn_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1311w_gg_,.___SGroup_1311w_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_1311w_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_1311w_gg_._use_primary_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1311w_gg_._use_primary_1311w_gg_:has(~.___SColumn_1311w_gg_.__visibleSort_1311w_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_1311w_gg_._use_secondary_1311w_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1311w_gg_._borders_both_1311w_gg_,.___SColumn_1311w_gg_._borders_left_1311w_gg_,.___SGroup_1311w_gg_._borders_both_1311w_gg_,.___SGroup_1311w_gg_._borders_left_1311w_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1311w_gg_._borders_both_1311w_gg_,.___SColumn_1311w_gg_._borders_right_1311w_gg_,.___SGroup_1311w_gg_._borders_both_1311w_gg_,.___SGroup_1311w_gg_._borders_right_1311w_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1311w_gg_._use_primary_1311w_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_1311w_gg_._use_primary_1311w_gg_ .___SSortWrapper_1311w_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortButton_1311w_gg_,.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_::before,.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_::before{display:flex;opacity:1}.___SColumn_1311w_gg_._use_secondary_1311w_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_1311w_gg_._use_secondary_1311w_gg_ .___SSortWrapper_1311w_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortButton_1311w_gg_{display:flex;opacity:1}.___SColumn_1311w_gg_.__gridArea_1311w_gg_,.___SGroupTitle_1311w_gg_.__gridArea_1311w_gg_,.___SGroup_1311w_gg_.__gridArea_1311w_gg_{grid-area:var(--gridArea_1311w)}.___SHead_1311w_gg_ .___SColumn_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_ .___SGroup_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SColumn_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroup_1311w_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_1311w_gg_.__sortable_1311w_gg_:hover{cursor:pointer}}.___SSortWrapper_1311w_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_1311w_gg_,.___SSortWrapper_1311w_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1311w_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_1311w_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_1311w_gg_._sideIndents_wide_1311w_gg_ .___SColumn_1311w_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_1311w_gg_._sideIndents_wide_1311w_gg_ .___SColumn_1311w_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_1311w_gg_{cursor:pointer}',
     /*__inner_css_end__*/
-    "13xrb_gg_"
+    "1311w_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHead": "___SHead_13xrb_gg_",
-    "__SGroupContainer": "___SGroupContainer_13xrb_gg_",
-    "_sticky": "__sticky_13xrb_gg_",
-    "__SColumn": "___SColumn_13xrb_gg_",
-    "__SGroup": "___SGroup_13xrb_gg_",
-    "_compact": "__compact_13xrb_gg_",
-    "_use_secondary": "_use_secondary_13xrb_gg_",
-    "_borders_both": "_borders_both_13xrb_gg_",
-    "_borders_left": "_borders_left_13xrb_gg_",
-    "_borders_right": "_borders_right_13xrb_gg_",
-    "_gridArea": "__gridArea_13xrb_gg_",
-    "__SGroupTitle": "___SGroupTitle_13xrb_gg_",
-    "--gridArea": "--gridArea_13xrb",
-    "_fixed": "__fixed_13xrb_gg_",
-    "_sortable": "__sortable_13xrb_gg_",
-    "__SSortWrapper": "___SSortWrapper_13xrb_gg_",
-    "__SSortButton": "___SSortButton_13xrb_gg_",
-    "_use_primary": "_use_primary_13xrb_gg_",
-    "_visibleSort": "__visibleSort_13xrb_gg_",
-    "_sideIndents_l": "_sideIndents_l_13xrb_gg_"
+    "__SHead": "___SHead_1311w_gg_",
+    "__SGroupContainer": "___SGroupContainer_1311w_gg_",
+    "_sticky": "__sticky_1311w_gg_",
+    "__SColumn": "___SColumn_1311w_gg_",
+    "__SGroup": "___SGroup_1311w_gg_",
+    "_compact": "__compact_1311w_gg_",
+    "_use_secondary": "_use_secondary_1311w_gg_",
+    "_borders_both": "_borders_both_1311w_gg_",
+    "_borders_left": "_borders_left_1311w_gg_",
+    "_borders_right": "_borders_right_1311w_gg_",
+    "_gridArea": "__gridArea_1311w_gg_",
+    "__SGroupTitle": "___SGroupTitle_1311w_gg_",
+    "--gridArea": "--gridArea_1311w",
+    "_fixed": "__fixed_1311w_gg_",
+    "_sortable": "__sortable_1311w_gg_",
+    "__SSortWrapper": "___SSortWrapper_1311w_gg_",
+    "__SSortButton": "___SSortButton_1311w_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_1311w_gg_",
+    "_use_primary": "_use_primary_1311w_gg_",
+    "_visibleSort": "__visibleSort_1311w_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_1311w_gg_"
   })
 );
 var SORTING_ICON = {
@@ -188,17 +189,14 @@ var Column = /* @__PURE__ */ function(_Component) {
           }
         }
       });
-      var tableElement = _this.asProps.tableRef.current;
-      if (tableElement) {
-        tableElement.scrollIntoView({});
-      }
     });
     return _this;
   }
   _createClass(Column2, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.asProps.parent && this.asProps.sticky) {
+      var _this$asProps2 = this.asProps, parent = _this$asProps2.parent, sticky = _this$asProps2.sticky, changeSortSize = _this$asProps2.changeSortSize, name = _this$asProps2.name, sort = _this$asProps2.sort;
+      if (parent && sticky) {
         var _columnElement$parent;
         var columnElement = this.columnRef.current;
         var groupElement = columnElement === null || columnElement === void 0 ? void 0 : (_columnElement$parent = columnElement.parentElement) === null || _columnElement$parent === void 0 ? void 0 : _columnElement$parent.children.item(0);
@@ -207,33 +205,40 @@ var Column = /* @__PURE__ */ function(_Component) {
           columnElement === null || columnElement === void 0 ? void 0 : columnElement.style.setProperty("top", "".concat(groupHeight, "px"));
         }
       }
+      if (canUseDOM() && changeSortSize && (sort === null || sort === void 0 ? void 0 : sort[0]) === name) {
+        this.changeTemplateColumnBySort();
+      }
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _prevProps$sort, _this$asProps$sort;
       if (this.asProps.changeSortSize && canUseDOM() && ((_prevProps$sort = prevProps.sort) === null || _prevProps$sort === void 0 ? void 0 : _prevProps$sort[0]) !== ((_this$asProps$sort = this.asProps.sort) === null || _this$asProps$sort === void 0 ? void 0 : _this$asProps$sort[0])) {
-        var _this$asProps$sort2, _this$asProps$sort3;
-        var _this$asProps2 = this.asProps, tableRef = _this$asProps2.tableRef, gridTemplateColumns = _this$asProps2.gridTemplateColumns, columnIndex = _this$asProps2.columnIndex;
-        if (((_this$asProps$sort2 = this.asProps.sort) === null || _this$asProps$sort2 === void 0 ? void 0 : _this$asProps$sort2[0]) === this.asProps.name) {
-          var newWidth = this.calculateActiveColumnMinWidth();
-          setTimeout(function() {
-            if (tableRef.current && newWidth !== null) {
-              tableRef.current.style.setProperty("grid-template-columns", gridTemplateColumns.map(function(gtcWidth, index) {
-                if (index === columnIndex) {
-                  return "".concat(newWidth, "px");
-                }
-                return gtcWidth;
-              }).join(" "));
-            }
-          });
-        } else if (((_this$asProps$sort3 = this.asProps.sort) === null || _this$asProps$sort3 === void 0 ? void 0 : _this$asProps$sort3[0]) !== this.asProps.name) {
-          setTimeout(function() {
-            if (tableRef.current) {
-              tableRef.current.style.setProperty("grid-template-columns", gridTemplateColumns.join(" "));
-            }
-          });
-        }
+        this.changeTemplateColumnBySort();
+      }
+    }
+  }, {
+    key: "changeTemplateColumnBySort",
+    value: function changeTemplateColumnBySort() {
+      var _this$asProps3 = this.asProps, tableRef = _this$asProps3.tableRef, gridTemplateColumns = _this$asProps3.gridTemplateColumns, columnIndex = _this$asProps3.columnIndex, sort = _this$asProps3.sort, name = _this$asProps3.name;
+      if ((sort === null || sort === void 0 ? void 0 : sort[0]) === name) {
+        var newWidth = this.calculateActiveColumnMinWidth();
+        setTimeout(function() {
+          if (tableRef.current && newWidth !== null) {
+            tableRef.current.style.setProperty("grid-template-columns", gridTemplateColumns.map(function(gtcWidth, index) {
+              if (index === columnIndex) {
+                return "".concat(newWidth, "px");
+              }
+              return gtcWidth;
+            }).join(" "));
+          }
+        });
+      } else if ((sort === null || sort === void 0 ? void 0 : sort[0]) !== name) {
+        setTimeout(function() {
+          if (tableRef.current) {
+            tableRef.current.style.setProperty("grid-template-columns", gridTemplateColumns.join(" "));
+          }
+        });
       }
     }
   }, {
@@ -252,7 +257,7 @@ var Column = /* @__PURE__ */ function(_Component) {
       var SColumn = Flex;
       var SSortWrapper = "div";
       var SSortButton = ButtonLink;
-      var _this$asProps3 = this.asProps, styles = _this$asProps3.styles, sortable = _this$asProps3.sortable, sort = _this$asProps3.sort, uid = _this$asProps3.uid, name = _this$asProps3.name, parent = _this$asProps3.parent, sortableColumnDescribeId = _this$asProps3.sortableColumnDescribeId, Children = _this$asProps3.Children;
+      var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, sortable = _this$asProps4.sortable, sort = _this$asProps4.sort, uid = _this$asProps4.uid, name = _this$asProps4.name, parent = _this$asProps4.parent, sortableColumnDescribeId = _this$asProps4.sortableColumnDescribeId, Children = _this$asProps4.Children;
       var SSortIcon = sort && sort[0] === name ? SORTING_ICON[sort[1]] : SORTING_ICON[this.defaultDirection];
       var isSorted = (sort === null || sort === void 0 ? void 0 : sort[0]) === name;
       var visibleSort = Boolean(sortable) && (this.state.sortVisible || isSorted);

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

@@ -9,38 +9,39 @@ import { sstyled, assignProps, Component } from "@semcore/core";
 import * as React from "react";
 import { Box } from "@semcore/base-components";
 import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
-import { DataTable } from "../DataTable/DataTable.mjs";
+import { DataTableInternal } from "../DataTable/DataTable.mjs";
 import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 /*!__reshadow-styles__:"./style.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SGroupContainer_13xrb_gg_,.___SHead_13xrb_gg_{display:contents}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SColumn_13xrb_gg_{position:sticky;top:0;z-index:2}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroup_13xrb_gg_{top:0}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroupContainer_13xrb_gg_>.___SColumn_13xrb_gg_{position:sticky;z-index:2}.___SHead_13xrb_gg_.__compact_13xrb_gg_ .___SColumn_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_13xrb_gg_,.___SGroup_13xrb_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_13xrb_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_13xrb_gg_._use_primary_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_13xrb_gg_._use_primary_13xrb_gg_:has(~.___SColumn_13xrb_gg_.__visibleSort_13xrb_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_13xrb_gg_._use_secondary_13xrb_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_13xrb_gg_._borders_both_13xrb_gg_,.___SColumn_13xrb_gg_._borders_left_13xrb_gg_,.___SGroup_13xrb_gg_._borders_both_13xrb_gg_,.___SGroup_13xrb_gg_._borders_left_13xrb_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_13xrb_gg_._borders_both_13xrb_gg_,.___SColumn_13xrb_gg_._borders_right_13xrb_gg_,.___SGroup_13xrb_gg_._borders_both_13xrb_gg_,.___SGroup_13xrb_gg_._borders_right_13xrb_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_13xrb_gg_._use_primary_13xrb_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_13xrb_gg_._use_primary_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortButton_13xrb_gg_,.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before,.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{display:flex;opacity:1}.___SColumn_13xrb_gg_._use_secondary_13xrb_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_13xrb_gg_._use_secondary_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortButton_13xrb_gg_{display:flex;opacity:1}.___SColumn_13xrb_gg_.__gridArea_13xrb_gg_,.___SGroupTitle_13xrb_gg_.__gridArea_13xrb_gg_,.___SGroup_13xrb_gg_.__gridArea_13xrb_gg_{grid-area:var(--gridArea_13xrb)}.___SHead_13xrb_gg_ .___SColumn_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_ .___SGroup_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SColumn_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroup_13xrb_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_13xrb_gg_.__sortable_13xrb_gg_:hover{cursor:pointer}}.___SSortWrapper_13xrb_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_13xrb_gg_,.___SSortWrapper_13xrb_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_13xrb_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_13xrb_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_13xrb_gg_._sideIndents_l_13xrb_gg_ .___SColumn_13xrb_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_13xrb_gg_._sideIndents_l_13xrb_gg_ .___SColumn_13xrb_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}',
+    '.___SGroupContainer_1311w_gg_,.___SHead_1311w_gg_{display:contents}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SColumn_1311w_gg_{position:sticky;top:0;z-index:2}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroup_1311w_gg_{top:0}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroupContainer_1311w_gg_>.___SColumn_1311w_gg_{position:sticky;z-index:2}.___SHead_1311w_gg_.__compact_1311w_gg_ .___SColumn_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1311w_gg_,.___SGroup_1311w_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_1311w_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_1311w_gg_._use_primary_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1311w_gg_._use_primary_1311w_gg_:has(~.___SColumn_1311w_gg_.__visibleSort_1311w_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_1311w_gg_._use_secondary_1311w_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1311w_gg_._borders_both_1311w_gg_,.___SColumn_1311w_gg_._borders_left_1311w_gg_,.___SGroup_1311w_gg_._borders_both_1311w_gg_,.___SGroup_1311w_gg_._borders_left_1311w_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1311w_gg_._borders_both_1311w_gg_,.___SColumn_1311w_gg_._borders_right_1311w_gg_,.___SGroup_1311w_gg_._borders_both_1311w_gg_,.___SGroup_1311w_gg_._borders_right_1311w_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1311w_gg_._use_primary_1311w_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_1311w_gg_._use_primary_1311w_gg_ .___SSortWrapper_1311w_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortButton_1311w_gg_,.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_::before,.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_::before{display:flex;opacity:1}.___SColumn_1311w_gg_._use_secondary_1311w_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_1311w_gg_._use_secondary_1311w_gg_ .___SSortWrapper_1311w_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortButton_1311w_gg_{display:flex;opacity:1}.___SColumn_1311w_gg_.__gridArea_1311w_gg_,.___SGroupTitle_1311w_gg_.__gridArea_1311w_gg_,.___SGroup_1311w_gg_.__gridArea_1311w_gg_{grid-area:var(--gridArea_1311w)}.___SHead_1311w_gg_ .___SColumn_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_ .___SGroup_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SColumn_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroup_1311w_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_1311w_gg_.__sortable_1311w_gg_:hover{cursor:pointer}}.___SSortWrapper_1311w_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_1311w_gg_,.___SSortWrapper_1311w_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1311w_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_1311w_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_1311w_gg_._sideIndents_wide_1311w_gg_ .___SColumn_1311w_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_1311w_gg_._sideIndents_wide_1311w_gg_ .___SColumn_1311w_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_1311w_gg_{cursor:pointer}',
     /*__inner_css_end__*/
-    "13xrb_gg_"
+    "1311w_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHead": "___SHead_13xrb_gg_",
-    "__SGroupContainer": "___SGroupContainer_13xrb_gg_",
-    "_sticky": "__sticky_13xrb_gg_",
-    "__SColumn": "___SColumn_13xrb_gg_",
-    "__SGroup": "___SGroup_13xrb_gg_",
-    "_compact": "__compact_13xrb_gg_",
-    "_use_secondary": "_use_secondary_13xrb_gg_",
-    "_borders_both": "_borders_both_13xrb_gg_",
-    "_borders_left": "_borders_left_13xrb_gg_",
-    "_borders_right": "_borders_right_13xrb_gg_",
-    "_gridArea": "__gridArea_13xrb_gg_",
-    "__SGroupTitle": "___SGroupTitle_13xrb_gg_",
-    "--gridArea": "--gridArea_13xrb",
-    "_fixed": "__fixed_13xrb_gg_",
-    "_sortable": "__sortable_13xrb_gg_",
-    "__SSortWrapper": "___SSortWrapper_13xrb_gg_",
-    "__SSortButton": "___SSortButton_13xrb_gg_",
-    "_use_primary": "_use_primary_13xrb_gg_",
-    "_visibleSort": "__visibleSort_13xrb_gg_",
-    "_sideIndents_l": "_sideIndents_l_13xrb_gg_"
+    "__SHead": "___SHead_1311w_gg_",
+    "__SGroupContainer": "___SGroupContainer_1311w_gg_",
+    "_sticky": "__sticky_1311w_gg_",
+    "__SColumn": "___SColumn_1311w_gg_",
+    "__SGroup": "___SGroup_1311w_gg_",
+    "_compact": "__compact_1311w_gg_",
+    "_use_secondary": "_use_secondary_1311w_gg_",
+    "_borders_both": "_borders_both_1311w_gg_",
+    "_borders_left": "_borders_left_1311w_gg_",
+    "_borders_right": "_borders_right_1311w_gg_",
+    "_gridArea": "__gridArea_1311w_gg_",
+    "__SGroupTitle": "___SGroupTitle_1311w_gg_",
+    "--gridArea": "--gridArea_1311w",
+    "_fixed": "__fixed_1311w_gg_",
+    "_sortable": "__sortable_1311w_gg_",
+    "__SSortWrapper": "___SSortWrapper_1311w_gg_",
+    "__SSortButton": "___SSortButton_1311w_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_1311w_gg_",
+    "_use_primary": "_use_primary_1311w_gg_",
+    "_visibleSort": "__visibleSort_1311w_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_1311w_gg_"
   })
 );
 var Group = /* @__PURE__ */ function(_Component) {
@@ -84,7 +85,7 @@ var Group = /* @__PURE__ */ function(_Component) {
         "__excludeProps": ["title"],
         "id": this.groupId
       }, _ref))), withConfig ? children : title), withConfig ? groupColumns.map(function(column, i) {
-        return /* @__PURE__ */ React.createElement(DataTable.Head.Column, _extends({
+        return /* @__PURE__ */ React.createElement(DataTableInternal.Head.Column, _extends({
           key: column.name
         }, column, {
           "aria-describedby": _this.groupId

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

@@ -12,39 +12,39 @@ import * as React from "react";
 import { ScreenReaderOnly, Box } from "@semcore/base-components";
 import { Column } from "./Column.mjs";
 import { Group } from "./Group.mjs";
-import { getFixedStyle } from "../../utils.mjs";
-import { SELECT_ALL, DataTable } from "../DataTable/DataTable.mjs";
+import { SELECT_ALL, DataTableInternal } from "../DataTable/DataTable.mjs";
 import Checkbox from "@semcore/checkbox";
 /*!__reshadow-styles__:"./style.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SGroupContainer_13xrb_gg_,.___SHead_13xrb_gg_{display:contents}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SColumn_13xrb_gg_{position:sticky;top:0;z-index:2}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroup_13xrb_gg_{top:0}.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroupContainer_13xrb_gg_>.___SColumn_13xrb_gg_{position:sticky;z-index:2}.___SHead_13xrb_gg_.__compact_13xrb_gg_ .___SColumn_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_13xrb_gg_,.___SGroup_13xrb_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_13xrb_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_13xrb_gg_._use_primary_13xrb_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_13xrb_gg_._use_primary_13xrb_gg_:has(~.___SColumn_13xrb_gg_.__visibleSort_13xrb_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_13xrb_gg_._use_secondary_13xrb_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_13xrb_gg_._borders_both_13xrb_gg_,.___SColumn_13xrb_gg_._borders_left_13xrb_gg_,.___SGroup_13xrb_gg_._borders_both_13xrb_gg_,.___SGroup_13xrb_gg_._borders_left_13xrb_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_13xrb_gg_._borders_both_13xrb_gg_,.___SColumn_13xrb_gg_._borders_right_13xrb_gg_,.___SGroup_13xrb_gg_._borders_both_13xrb_gg_,.___SGroup_13xrb_gg_._borders_right_13xrb_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_13xrb_gg_._use_primary_13xrb_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_13xrb_gg_._use_primary_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortButton_13xrb_gg_,.___SColumn_13xrb_gg_._use_primary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before,.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{display:flex;opacity:1}.___SColumn_13xrb_gg_._use_secondary_13xrb_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_13xrb_gg_._use_secondary_13xrb_gg_ .___SSortWrapper_13xrb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortWrapper_13xrb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_13xrb_gg_._use_secondary_13xrb_gg_.__visibleSort_13xrb_gg_ .___SSortButton_13xrb_gg_{display:flex;opacity:1}.___SColumn_13xrb_gg_.__gridArea_13xrb_gg_,.___SGroupTitle_13xrb_gg_.__gridArea_13xrb_gg_,.___SGroup_13xrb_gg_.__gridArea_13xrb_gg_{grid-area:var(--gridArea_13xrb)}.___SHead_13xrb_gg_ .___SColumn_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_ .___SGroup_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SColumn_13xrb_gg_.__fixed_13xrb_gg_,.___SHead_13xrb_gg_.__sticky_13xrb_gg_ .___SGroup_13xrb_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_13xrb_gg_.__sortable_13xrb_gg_:hover{cursor:pointer}}.___SSortWrapper_13xrb_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_13xrb_gg_,.___SSortWrapper_13xrb_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_13xrb_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_13xrb_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_13xrb_gg_._sideIndents_l_13xrb_gg_ .___SColumn_13xrb_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_13xrb_gg_._sideIndents_l_13xrb_gg_ .___SColumn_13xrb_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}',
+    '.___SGroupContainer_1311w_gg_,.___SHead_1311w_gg_{display:contents}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SColumn_1311w_gg_{position:sticky;top:0;z-index:2}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroup_1311w_gg_{top:0}.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroupContainer_1311w_gg_>.___SColumn_1311w_gg_{position:sticky;z-index:2}.___SHead_1311w_gg_.__compact_1311w_gg_ .___SColumn_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1311w_gg_,.___SGroup_1311w_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_1311w_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_1311w_gg_._use_primary_1311w_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1311w_gg_._use_primary_1311w_gg_:has(~.___SColumn_1311w_gg_.__visibleSort_1311w_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_1311w_gg_._use_secondary_1311w_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1311w_gg_._borders_both_1311w_gg_,.___SColumn_1311w_gg_._borders_left_1311w_gg_,.___SGroup_1311w_gg_._borders_both_1311w_gg_,.___SGroup_1311w_gg_._borders_left_1311w_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1311w_gg_._borders_both_1311w_gg_,.___SColumn_1311w_gg_._borders_right_1311w_gg_,.___SGroup_1311w_gg_._borders_both_1311w_gg_,.___SGroup_1311w_gg_._borders_right_1311w_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1311w_gg_._use_primary_1311w_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_1311w_gg_._use_primary_1311w_gg_ .___SSortWrapper_1311w_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortButton_1311w_gg_,.___SColumn_1311w_gg_._use_primary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_::before,.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_::before{display:flex;opacity:1}.___SColumn_1311w_gg_._use_secondary_1311w_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_1311w_gg_._use_secondary_1311w_gg_ .___SSortWrapper_1311w_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortWrapper_1311w_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1311w_gg_._use_secondary_1311w_gg_.__visibleSort_1311w_gg_ .___SSortButton_1311w_gg_{display:flex;opacity:1}.___SColumn_1311w_gg_.__gridArea_1311w_gg_,.___SGroupTitle_1311w_gg_.__gridArea_1311w_gg_,.___SGroup_1311w_gg_.__gridArea_1311w_gg_{grid-area:var(--gridArea_1311w)}.___SHead_1311w_gg_ .___SColumn_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_ .___SGroup_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SColumn_1311w_gg_.__fixed_1311w_gg_,.___SHead_1311w_gg_.__sticky_1311w_gg_ .___SGroup_1311w_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_1311w_gg_.__sortable_1311w_gg_:hover{cursor:pointer}}.___SSortWrapper_1311w_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_1311w_gg_,.___SSortWrapper_1311w_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1311w_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_1311w_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_1311w_gg_._sideIndents_wide_1311w_gg_ .___SColumn_1311w_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_1311w_gg_._sideIndents_wide_1311w_gg_ .___SColumn_1311w_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_1311w_gg_{cursor:pointer}',
     /*__inner_css_end__*/
-    "13xrb_gg_"
+    "1311w_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHead": "___SHead_13xrb_gg_",
-    "__SGroupContainer": "___SGroupContainer_13xrb_gg_",
-    "_sticky": "__sticky_13xrb_gg_",
-    "__SColumn": "___SColumn_13xrb_gg_",
-    "__SGroup": "___SGroup_13xrb_gg_",
-    "_compact": "__compact_13xrb_gg_",
-    "_use_secondary": "_use_secondary_13xrb_gg_",
-    "_borders_both": "_borders_both_13xrb_gg_",
-    "_borders_left": "_borders_left_13xrb_gg_",
-    "_borders_right": "_borders_right_13xrb_gg_",
-    "_gridArea": "__gridArea_13xrb_gg_",
-    "__SGroupTitle": "___SGroupTitle_13xrb_gg_",
-    "--gridArea": "--gridArea_13xrb",
-    "_fixed": "__fixed_13xrb_gg_",
-    "_sortable": "__sortable_13xrb_gg_",
-    "__SSortWrapper": "___SSortWrapper_13xrb_gg_",
-    "__SSortButton": "___SSortButton_13xrb_gg_",
-    "_use_primary": "_use_primary_13xrb_gg_",
-    "_visibleSort": "__visibleSort_13xrb_gg_",
-    "_sideIndents_l": "_sideIndents_l_13xrb_gg_"
+    "__SHead": "___SHead_1311w_gg_",
+    "__SGroupContainer": "___SGroupContainer_1311w_gg_",
+    "_sticky": "__sticky_1311w_gg_",
+    "__SColumn": "___SColumn_1311w_gg_",
+    "__SGroup": "___SGroup_1311w_gg_",
+    "_compact": "__compact_1311w_gg_",
+    "_use_secondary": "_use_secondary_1311w_gg_",
+    "_borders_both": "_borders_both_1311w_gg_",
+    "_borders_left": "_borders_left_1311w_gg_",
+    "_borders_right": "_borders_right_1311w_gg_",
+    "_gridArea": "__gridArea_1311w_gg_",
+    "__SGroupTitle": "___SGroupTitle_1311w_gg_",
+    "--gridArea": "--gridArea_1311w",
+    "_fixed": "__fixed_1311w_gg_",
+    "_sortable": "__sortable_1311w_gg_",
+    "__SSortWrapper": "___SSortWrapper_1311w_gg_",
+    "__SSortButton": "___SSortButton_1311w_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_1311w_gg_",
+    "_use_primary": "_use_primary_1311w_gg_",
+    "_visibleSort": "__visibleSort_1311w_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_1311w_gg_"
   })
 );
 var HeadRoot = /* @__PURE__ */ function(_Component) {
@@ -58,11 +58,16 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "fixedColumnsMap", /* @__PURE__ */ new Map());
-    _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function(value) {
+    _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function(value, event) {
+      var _this$asProps$onChang, _this$asProps;
+      (_this$asProps$onChang = (_this$asProps = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang === void 0 ? void 0 : _this$asProps$onChang.call(_this$asProps, value, event);
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleClickSelectAll", function(value) {
       return function(event) {
-        var _this$asProps$onChang, _this$asProps;
+        var _this$asProps$onChang2, _this$asProps2;
         event === null || event === void 0 ? void 0 : event.preventDefault();
-        (_this$asProps$onChang = (_this$asProps = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang === void 0 ? void 0 : _this$asProps$onChang.call(_this$asProps, value, event);
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        (_this$asProps$onChang2 = (_this$asProps2 = _this.asProps).onChangeSelectAll) === null || _this$asProps$onChang2 === void 0 ? void 0 : _this$asProps$onChang2.call(_this$asProps2, value, event);
       };
     });
     return _this;
@@ -76,7 +81,7 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getGroupProps",
     value: function getGroupProps(_, index) {
-      var _this$asProps2 = this.asProps, use = _this$asProps2.use, gridAreaGroupMap = _this$asProps2.gridAreaGroupMap, children = _this$asProps2.children;
+      var _this$asProps3 = this.asProps, use = _this$asProps3.use, gridAreaGroupMap = _this$asProps3.gridAreaGroupMap, children = _this$asProps3.children;
       return {
         use,
         gridArea: gridAreaGroupMap.get(index),
@@ -87,12 +92,12 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getColumnProps",
     value: function getColumnProps(_, index) {
-      var _this$asProps3 = this.asProps, use = _this$asProps3.use, columns = _this$asProps3.columns, sort = _this$asProps3.sort, onSortChange = _this$asProps3.onSortChange, tableRef = _this$asProps3.tableRef, gridTemplateColumns = _this$asProps3.gridTemplateColumns, gridTemplateAreas = _this$asProps3.gridTemplateAreas, sticky = _this$asProps3.sticky, top = _this$asProps3.top, selectedRows = _this$asProps3.selectedRows;
+      var _this$asProps4 = this.asProps, use = _this$asProps4.use, columns = _this$asProps4.columns, sort = _this$asProps4.sort, onSortChange = _this$asProps4.onSortChange, tableRef = _this$asProps4.tableRef, gridTemplateColumns = _this$asProps4.gridTemplateColumns, gridTemplateAreas = _this$asProps4.gridTemplateAreas, sticky = _this$asProps4.sticky, top = _this$asProps4.top, selectedRows = _this$asProps4.selectedRows, h = _this$asProps4.h, getFixedStyle = _this$asProps4.getFixedStyle;
       var column = columns[index];
       if (index === 0 && selectedRows && columns[index + 1].fixed) {
         column.fixed = "left";
       }
-      var _getFixedStyle = getFixedStyle(column, columns), _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2), name = _getFixedStyle2[0], value = _getFixedStyle2[1];
+      var _getFixedStyle = getFixedStyle(column), _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2), name = _getFixedStyle2[0], value = _getFixedStyle2[1];
       var style2 = {};
       if (top) {
         style2.top = "".concat(top, "px");
@@ -104,10 +109,6 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
       return {
         use,
         "aria-colindex": index + 1,
-        ref: function ref(node) {
-          var _column$ref;
-          return (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : _column$ref.call(column, node);
-        },
         style: style2,
         gridArea: column.gridArea,
         fixed: column.fixed,
@@ -120,36 +121,36 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
         columnIndex: index,
         tableRef,
         gridTemplateColumns,
-        gridTemplateAreas
+        gridTemplateAreas,
+        h
       };
     }
   }, {
     key: "render",
     value: function render() {
-      var _ref = this.asProps, _ref2, _this2 = this;
+      var _ref = this.asProps, _ref2;
       var SHead = Box;
-      var _this$asProps4 = this.asProps, Children = _this$asProps4.Children, styles = _this$asProps4.styles, getI18nText = _this$asProps4.getI18nText, children = _this$asProps4.children, treeColumns = _this$asProps4.treeColumns, selectedRows = _this$asProps4.selectedRows, totalRows = _this$asProps4.totalRows;
+      var SHeadCheckboxCol = Head.Column;
+      var _this$asProps5 = this.asProps, Children = _this$asProps5.Children, styles = _this$asProps5.styles, getI18nText = _this$asProps5.getI18nText, children = _this$asProps5.children, treeColumns = _this$asProps5.treeColumns, selectedRows = _this$asProps5.selectedRows, totalRows = _this$asProps5.totalRows;
       var checked = selectedRows && selectedRows.length === totalRows && totalRows > 0;
       var indeterminate = selectedRows && selectedRows.length > 0 && !checked;
       return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SHead, _ref2.cn("SHead", _objectSpread({}, assignProps({
         "role": "row",
         "aria-rowindex": 1
-      }, _ref))), selectedRows && /* @__PURE__ */ React.createElement(Head.Column, {
-        name: SELECT_ALL.toString(),
-        onClick: this.handleSelectAll(!checked)
-      }, /* @__PURE__ */ React.createElement(Checkbox, _ref2.cn("Checkbox", {
+      }, _ref))), selectedRows && /* @__PURE__ */ React.createElement(SHeadCheckboxCol, _ref2.cn("SHeadCheckboxCol", {
+        "name": SELECT_ALL.toString(),
+        "onClick": this.handleClickSelectAll(!checked)
+      }), /* @__PURE__ */ React.createElement(Checkbox, _ref2.cn("Checkbox", {
         "checked": checked,
         "indeterminate": indeterminate,
         "aria-label": getI18nText("DataTable.Header.selectAllCheckbox:aria-label"),
-        "onChange": function onChange(value, e) {
-          return _this2.handleSelectAll(value)(e);
-        }
+        "onChange": this.handleSelectAll
       }), /* @__PURE__ */ React.createElement(Checkbox.Value, null, /* @__PURE__ */ React.createElement(Checkbox.Value.Control, null), /* @__PURE__ */ React.createElement(Checkbox.Value.CheckMark, {
         mt: 0
       })))), children ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, treeColumns.map(function(column, i) {
         if ("columns" in column) {
           var _column$columns;
-          return /* @__PURE__ */ React.createElement(DataTable.Head.Group, _extends({
+          return /* @__PURE__ */ React.createElement(DataTableInternal.Head.Group, _extends({
             key: column.name
           }, column, {
             name: (_column$columns = column.columns) === null || _column$columns === void 0 ? void 0 : _column$columns.map(function(c) {
@@ -158,7 +159,7 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
             title: ""
           }));
         }
-        return /* @__PURE__ */ React.createElement(DataTable.Head.Column, _extends({
+        return /* @__PURE__ */ React.createElement(DataTableInternal.Head.Column, _extends({
           key: column.name
         }, column));
       }))), /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {

package/lib/esm/components/Head/style.shadow.css

@@ -166,7 +166,7 @@ SSortButton {
   transition: opacity 0.3s ease;
 }
 
-SHead[sideIndents='l'] {
+SHead[sideIndents='wide'] {
   SColumn:first-child {
     padding-left: var(--intergalactic-spacing-5x, 20px);
   }
@@ -174,3 +174,7 @@ SHead[sideIndents='l'] {
     padding-right: var(--intergalactic-spacing-5x, 20px);
   }
 }
+
+SHeadCheckboxCol {
+  cursor: pointer;
+}

package/lib/esm/style/scroll-shadows.shadow.css

@@ -22,6 +22,12 @@ SScrollArea {
     &[headerHeight] {
       scroll-padding-top: var(--headerHeight);
     }
+    &[leftScrollPadding] {
+      scroll-padding-left: var(--leftScrollPadding);
+    }
+    &[rightScrollPadding] {
+      scroll-padding-right: var(--rightScrollPadding);
+    }
   }
 
   SShadowVertical {

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

@@ -52,5 +52,6 @@ export type BodyPropsInner = DataTableBodyProps & {
     selectedRows?: number[];
     onSelectRow?: (isSelect: boolean, selectedRowIndex: number, row: DTRow, event?: React.SyntheticEvent<HTMLElement>) => void;
     renderEmptyData: () => React.ReactNode;
-    sideIndents?: 'l';
+    sideIndents?: 'wide';
+    getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
 };

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

@@ -12,6 +12,8 @@ export type DataTableCellProps = {
     columnIndex: number;
     gridRowIndex: number;
     children?: React.ReactNode;
+    expanded?: boolean;
+    withAccordion?: boolean;
 };
 export type CellPropsInner = {
     use: DTUse;

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

@@ -1,14 +1,18 @@
+/// <reference types="react" />
+import { DataTableData } from '../DataTable/DataTable.types';
 export declare class MergedRowsCell {
     readonly value: any;
     readonly rowsCount: number;
-    constructor(value: any, rowsCount: number);
+    readonly accordion?: React.ReactNode | DataTableData;
+    constructor(value: any, rowsCount: number, accordion?: React.ReactNode | DataTableData);
 }
 export declare class MergedColumnsCell {
     readonly value: any;
     readonly columnsCount: number;
     readonly dataKey: string;
+    readonly accordion?: React.ReactNode | DataTableData;
     constructor(value: any, options: {
         size: number;
         dataKey: string;
-    });
+    }, accordion?: React.ReactNode | DataTableData);
 }

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

@@ -2,17 +2,19 @@
 import { DTValue, DTUse, DataTableData } from '../DataTable/DataTable.types';
 import { DTColumn } from '../Head/Column.types';
 import { MergedColumnsCell, MergedRowsCell } from './MergedCells';
-import { ACCORDION, ROW_INDEX, UNIQ_ROW_KEY } from '../DataTable/DataTable';
+import { ACCORDION, ROW_GROUP, ROW_INDEX, UNIQ_ROW_KEY } from '../DataTable/DataTable';
+export type UniqRowKey = string;
 export type DTRow = {
-    [UNIQ_ROW_KEY]: string;
+    [UNIQ_ROW_KEY]: UniqRowKey;
     [ROW_INDEX]: number;
     [key: string]: DTValue | MergedRowsCell | MergedColumnsCell;
     [ACCORDION]?: React.ReactNode | DataTableData | undefined;
+    [ROW_GROUP]?: Set<UniqRowKey>;
 };
 export type DTRows = Array<DTRow | DTRow[]>;
 export type DataTableRowProps = {
     row: DTRow;
-    offset?: number;
+    mergedRow?: boolean;
 };
 export type RowPropsInner = JSX.IntrinsicElements['div'] & {
     use: DTUse;
@@ -21,6 +23,10 @@ export type RowPropsInner = JSX.IntrinsicElements['div'] & {
      * @default false
      */
     expanded?: boolean;
+    /**
+     * Flag to show is row in a merged list or not.
+     */
+    mergedRow?: boolean;
     columns: DTColumn[];
     row: DTRow | DTRow[];
     rows: DTRows;
@@ -38,5 +44,6 @@ export type RowPropsInner = JSX.IntrinsicElements['div'] & {
     onBackFromAccordion: (colIndex: number) => void;
     scrollAreaRef: React.RefObject<HTMLDivElement>;
     uid: string;
-    sideIndents?: 'l';
+    sideIndents?: 'wide';
+    getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
 };

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

@@ -1,4 +1,4 @@
-import { DataTableProps, DataTableData } from './DataTable.types';
+import { DataTableProps, DataTableData, DataTableType } from './DataTable.types';
 import { Head } from '../Head/Head';
 import { Body } from '../Body/Body';
 export declare const ACCORDION: unique symbol;
@@ -6,7 +6,8 @@ export declare const ROW_GROUP: unique symbol;
 export declare const UNIQ_ROW_KEY: unique symbol;
 export declare const SELECT_ALL: unique symbol;
 export declare const ROW_INDEX: unique symbol;
-export declare const DataTable: (<Data extends DataTableData, Tag extends import("@semcore/core").Intergalactic.InternalTypings.ComponentTag = "div">(props: import("@semcore/core").Intergalactic.InternalTypings.EfficientOmit<import("@semcore/core").Intergalactic.InternalTypings.ComponentProps<Tag, "div", DataTableProps<Data>, never, never[]>, "children" | "tag">) => import("@semcore/core").Intergalactic.InternalTypings.ComponentRenderingResults) & import("@semcore/core").Intergalactic.InternalTypings.ComponentAdditive<"div", "div", DataTableProps<any>, {}, {}> & {
+export declare const DataTable: DataTableType;
+export declare const DataTableInternal: (<Data extends DataTableData, Tag extends import("@semcore/core").Intergalactic.InternalTypings.ComponentTag = "div">(props: import("@semcore/core").Intergalactic.InternalTypings.EfficientOmit<import("@semcore/core").Intergalactic.InternalTypings.ComponentProps<Tag, "div", DataTableProps<Data>, never, never[]>, "tag" | "children">) => import("@semcore/core").Intergalactic.InternalTypings.ComponentRenderingResults) & import("@semcore/core").Intergalactic.InternalTypings.ComponentAdditive<"div", "div", DataTableProps<any>, {}, {}> & {
     Head: typeof Head;
     Body: typeof Body;
 };