@semcore/data-table 16.0.4 → 16.0.5

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

@@ -24,32 +24,32 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SGroupContainer_gxx2v_gg_,.___SHead_gxx2v_gg_{display:contents}.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SColumn_gxx2v_gg_{position:sticky;top:0;z-index:2}.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SGroup_gxx2v_gg_{top:0}.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SGroupContainer_gxx2v_gg_>.___SColumn_gxx2v_gg_{position:sticky;z-index:2}.___SHead_gxx2v_gg_.__compact_gxx2v_gg_ .___SColumn_gxx2v_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_gxx2v_gg_,.___SGroup_gxx2v_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_gxx2v_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_gxx2v_gg_._use_primary_gxx2v_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_gxx2v_gg_._use_primary_gxx2v_gg_:has(~.___SColumn_gxx2v_gg_.__visibleSort_gxx2v_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_gxx2v_gg_._use_secondary_gxx2v_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_gxx2v_gg_._borders_both_gxx2v_gg_,.___SColumn_gxx2v_gg_._borders_left_gxx2v_gg_,.___SGroup_gxx2v_gg_._borders_both_gxx2v_gg_,.___SGroup_gxx2v_gg_._borders_left_gxx2v_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_gxx2v_gg_._borders_both_gxx2v_gg_,.___SColumn_gxx2v_gg_._borders_right_gxx2v_gg_,.___SGroup_gxx2v_gg_._borders_both_gxx2v_gg_,.___SGroup_gxx2v_gg_._borders_right_gxx2v_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_gxx2v_gg_._use_primary_gxx2v_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_gxx2v_gg_._use_primary_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_gxx2v_gg_._use_primary_gxx2v_gg_.__visibleSort_gxx2v_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_gxx2v_gg_._use_primary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_gxx2v_gg_._use_primary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortButton_gxx2v_gg_,.___SColumn_gxx2v_gg_._use_primary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_::before,.___SColumn_gxx2v_gg_._use_secondary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_::before{display:flex;opacity:1}.___SColumn_gxx2v_gg_._use_secondary_gxx2v_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_gxx2v_gg_._use_secondary_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_gxx2v_gg_._use_secondary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_gxx2v_gg_._use_secondary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortButton_gxx2v_gg_{display:flex;opacity:1}.___SColumn_gxx2v_gg_.__gridArea_gxx2v_gg_,.___SGroupTitle_gxx2v_gg_.__gridArea_gxx2v_gg_,.___SGroup_gxx2v_gg_.__gridArea_gxx2v_gg_{grid-area:var(--gridArea_gxx2v)}.___SHead_gxx2v_gg_ .___SColumn_gxx2v_gg_.__fixed_gxx2v_gg_,.___SHead_gxx2v_gg_ .___SGroup_gxx2v_gg_.__fixed_gxx2v_gg_,.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SColumn_gxx2v_gg_.__fixed_gxx2v_gg_,.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SGroup_gxx2v_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_gxx2v_gg_.__sortable_gxx2v_gg_:hover{cursor:pointer}}.___SSortWrapper_gxx2v_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_gxx2v_gg_,.___SSortWrapper_gxx2v_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_gxx2v_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_gxx2v_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_gxx2v_gg_._sideIndents_wide_gxx2v_gg_ .___SColumn_gxx2v_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_gxx2v_gg_._sideIndents_wide_gxx2v_gg_ .___SColumn_gxx2v_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_gxx2v_gg_{cursor:pointer}',
+    '.___SGroupContainer_qatbb_gg_,.___SHead_qatbb_gg_{display:contents}.___SHead_qatbb_gg_.__sticky_qatbb_gg_ .___SColumn_qatbb_gg_,.___SHead_qatbb_gg_.__sticky_qatbb_gg_ .___SGroup_qatbb_gg_{position:sticky;top:0;z-index:2}.___SHead_qatbb_gg_.__sticky_qatbb_gg_ .___SGroupContainer_qatbb_gg_>.___SColumn_qatbb_gg_{position:sticky;z-index:2}.___SHead_qatbb_gg_.__compact_qatbb_gg_ .___SColumn_qatbb_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_qatbb_gg_,.___SGroup_qatbb_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_qatbb_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_qatbb_gg_._use_primary_qatbb_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_qatbb_gg_._use_primary_qatbb_gg_:has(~.___SColumn_qatbb_gg_.__visibleSort_qatbb_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_qatbb_gg_._use_secondary_qatbb_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_qatbb_gg_._borders_both_qatbb_gg_,.___SColumn_qatbb_gg_._borders_left_qatbb_gg_,.___SGroup_qatbb_gg_._borders_both_qatbb_gg_,.___SGroup_qatbb_gg_._borders_left_qatbb_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_qatbb_gg_._borders_both_qatbb_gg_,.___SColumn_qatbb_gg_._borders_right_qatbb_gg_,.___SGroup_qatbb_gg_._borders_both_qatbb_gg_,.___SGroup_qatbb_gg_._borders_right_qatbb_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_qatbb_gg_._use_primary_qatbb_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_qatbb_gg_._use_primary_qatbb_gg_ .___SSortWrapper_qatbb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_qatbb_gg_._use_primary_qatbb_gg_.__visibleSort_qatbb_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_qatbb_gg_._use_primary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortWrapper_qatbb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_qatbb_gg_._use_primary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortButton_qatbb_gg_,.___SColumn_qatbb_gg_._use_primary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortWrapper_qatbb_gg_::before,.___SColumn_qatbb_gg_._use_secondary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortWrapper_qatbb_gg_::before{display:flex;opacity:1}.___SColumn_qatbb_gg_._use_secondary_qatbb_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_qatbb_gg_._use_secondary_qatbb_gg_ .___SSortWrapper_qatbb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_qatbb_gg_._use_secondary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortWrapper_qatbb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_qatbb_gg_._use_secondary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortButton_qatbb_gg_{display:flex;opacity:1}.___SColumn_qatbb_gg_.__gridArea_qatbb_gg_,.___SGroupTitle_qatbb_gg_.__gridArea_qatbb_gg_,.___SGroup_qatbb_gg_.__gridArea_qatbb_gg_{grid-area:var(--gridArea_qatbb)}.___SHead_qatbb_gg_ .___SColumn_qatbb_gg_.__fixed_qatbb_gg_,.___SHead_qatbb_gg_ .___SGroup_qatbb_gg_.__fixed_qatbb_gg_,.___SHead_qatbb_gg_.__sticky_qatbb_gg_ .___SColumn_qatbb_gg_.__fixed_qatbb_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_qatbb_gg_.__sortable_qatbb_gg_:hover{cursor:pointer}}.___SSortWrapper_qatbb_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_qatbb_gg_,.___SSortWrapper_qatbb_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_qatbb_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_qatbb_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_qatbb_gg_._sideIndents_wide_qatbb_gg_ .___SColumn_qatbb_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_qatbb_gg_._sideIndents_wide_qatbb_gg_ .___SColumn_qatbb_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_qatbb_gg_{cursor:pointer}',
     /*__inner_css_end__*/
-    "gxx2v_gg_"
+    "qatbb_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHead": "___SHead_gxx2v_gg_",
-    "__SGroupContainer": "___SGroupContainer_gxx2v_gg_",
-    "_sticky": "__sticky_gxx2v_gg_",
-    "__SColumn": "___SColumn_gxx2v_gg_",
-    "__SGroup": "___SGroup_gxx2v_gg_",
-    "_compact": "__compact_gxx2v_gg_",
-    "_use_secondary": "_use_secondary_gxx2v_gg_",
-    "_borders_both": "_borders_both_gxx2v_gg_",
-    "_borders_left": "_borders_left_gxx2v_gg_",
-    "_borders_right": "_borders_right_gxx2v_gg_",
-    "_gridArea": "__gridArea_gxx2v_gg_",
-    "__SGroupTitle": "___SGroupTitle_gxx2v_gg_",
-    "--gridArea": "--gridArea_gxx2v",
-    "_fixed": "__fixed_gxx2v_gg_",
-    "_sortable": "__sortable_gxx2v_gg_",
-    "__SSortWrapper": "___SSortWrapper_gxx2v_gg_",
-    "__SSortButton": "___SSortButton_gxx2v_gg_",
-    "__SHeadCheckboxCol": "___SHeadCheckboxCol_gxx2v_gg_",
-    "_use_primary": "_use_primary_gxx2v_gg_",
-    "_visibleSort": "__visibleSort_gxx2v_gg_",
-    "_sideIndents_wide": "_sideIndents_wide_gxx2v_gg_"
+    "__SHead": "___SHead_qatbb_gg_",
+    "__SGroupContainer": "___SGroupContainer_qatbb_gg_",
+    "_sticky": "__sticky_qatbb_gg_",
+    "__SColumn": "___SColumn_qatbb_gg_",
+    "__SGroup": "___SGroup_qatbb_gg_",
+    "_compact": "__compact_qatbb_gg_",
+    "_use_secondary": "_use_secondary_qatbb_gg_",
+    "_borders_both": "_borders_both_qatbb_gg_",
+    "_borders_left": "_borders_left_qatbb_gg_",
+    "_borders_right": "_borders_right_qatbb_gg_",
+    "_gridArea": "__gridArea_qatbb_gg_",
+    "__SGroupTitle": "___SGroupTitle_qatbb_gg_",
+    "--gridArea": "--gridArea_qatbb",
+    "_fixed": "__fixed_qatbb_gg_",
+    "_sortable": "__sortable_qatbb_gg_",
+    "__SSortWrapper": "___SSortWrapper_qatbb_gg_",
+    "__SSortButton": "___SSortButton_qatbb_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_qatbb_gg_",
+    "_use_primary": "_use_primary_qatbb_gg_",
+    "_visibleSort": "__visibleSort_qatbb_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_qatbb_gg_"
   })
 );
 var SORTING_ICON = {
@@ -131,10 +131,10 @@ var Column = /* @__PURE__ */ function(_Component) {
       }
     });
     _defineProperty(_this, "handleSortClick", function(e) {
-      var _this$asProps = _this.asProps, sort = _this$asProps.sort, onSortChange = _this$asProps.onSortChange, name = _this$asProps.name;
+      var _this$asProps = _this.asProps, sort = _this$asProps.sort, onSortChange = _this$asProps.onSortChange, name = _this$asProps.name, sortable = _this$asProps.sortable;
       if (lastInteraction.isMouse() || lastInteraction.isKeyboard() && e.target === e.currentTarget) {
-        if (sort && onSortChange) {
-          var sortDirection = sort[0] === name ? reversedSortDirection[sort[1]] : _this.defaultDirection;
+        if (sortable && onSortChange) {
+          var sortDirection = (sort === null || sort === void 0 ? void 0 : sort[0]) === name ? reversedSortDirection[sort[1]] : _this.defaultDirection;
           onSortChange([name, sortDirection], e);
         }
       }
@@ -169,6 +169,8 @@ var Column = /* @__PURE__ */ function(_Component) {
           var _focusableChildren$2;
           _this.lockedCell[1] = true;
           (_focusableChildren$2 = focusableChildren[0]) === null || _focusableChildren$2 === void 0 || _focusableChildren$2.focus();
+          e.preventDefault();
+          e.stopPropagation();
         } else if (e.key === "Tab") {
           var _this$lockedCell$2;
           (_this$lockedCell$2 = _this.lockedCell[0]) === null || _this$lockedCell$2 === void 0 || _this$lockedCell$2.setAttribute("inert", "");
@@ -178,19 +180,31 @@ var Column = /* @__PURE__ */ function(_Component) {
     _defineProperty(_this, "handleFocusCell", function(e) {
       var cellElement = e.currentTarget;
       var target = e.target;
-      _this.setState({
-        sortVisible: true
-      }, function() {
-        if (target === cellElement) {
-          var focusableChildren = Array.from(cellElement.children).flatMap(function(node) {
-            return getFocusableIn(node);
-          });
-          if (focusableChildren.length === 1) {
-            focusableChildren[0].focus();
-          } else if (focusableChildren.length > 1) {
-            _this.lockedCell = [cellElement, false];
+      if (lastInteraction.isKeyboard()) {
+        _this.setState({
+          sortVisible: true
+        }, function() {
+          if (target === cellElement) {
+            var focusableChildren = Array.from(cellElement.children).flatMap(function(node) {
+              return getFocusableIn(node);
+            });
+            if (focusableChildren.length === 1) {
+              focusableChildren[0].focus();
+            } else if (focusableChildren.length > 1) {
+              _this.lockedCell = [cellElement, false];
+            }
           }
-        }
+        });
+      }
+    });
+    _defineProperty(_this, "handleClick", function(e) {
+      var _this$asProps2 = _this.asProps, sortable = _this$asProps2.sortable, onClick = _this$asProps2.onClick, columnIndex = _this$asProps2.columnIndex;
+      if (sortable) {
+        _this.handleSortClick(e);
+      }
+      onClick === null || onClick === void 0 || onClick(e, {
+        rowIndex: -1,
+        colIndex: columnIndex
       });
     });
     return _this;
@@ -199,7 +213,7 @@ var Column = /* @__PURE__ */ function(_Component) {
   return _createClass(Column2, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      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;
+      var _this$asProps3 = this.asProps, parent = _this$asProps3.parent, sticky = _this$asProps3.sticky, changeSortSize = _this$asProps3.changeSortSize, name = _this$asProps3.name, sort = _this$asProps3.sort;
       if (parent && sticky) {
         var _columnElement$parent;
         var columnElement = this.columnRef.current;
@@ -224,7 +238,7 @@ var Column = /* @__PURE__ */ function(_Component) {
   }, {
     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;
+      var _this$asProps4 = this.asProps, tableRef = _this$asProps4.tableRef, gridTemplateColumns = _this$asProps4.gridTemplateColumns, columnIndex = _this$asProps4.columnIndex, sort = _this$asProps4.sort, name = _this$asProps4.name;
       if ((sort === null || sort === void 0 ? void 0 : sort[0]) === name) {
         var newWidth = this.calculateActiveColumnMinWidth();
         setTimeout(function() {
@@ -261,7 +275,7 @@ var Column = /* @__PURE__ */ function(_Component) {
       var SColumn = Flex;
       var SSortWrapper = "div";
       var SSortButton = ButtonLink;
-      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 _this$asProps5 = this.asProps, styles = _this$asProps5.styles, sortable = _this$asProps5.sortable, sort = _this$asProps5.sort, uid = _this$asProps5.uid, name = _this$asProps5.name, parent = _this$asProps5.parent, sortableColumnDescribeId = _this$asProps5.sortableColumnDescribeId, Children = _this$asProps5.Children;
       var _ref3 = sort !== null && sort !== void 0 ? sort : [void 0, void 0], _ref4 = _slicedToArray(_ref3, 2), sortBy = _ref4[0], sortDirection = _ref4[1];
       var isSorted = sortBy === name && !!sortDirection;
       var SSortIcon = isSorted ? SORTING_ICON[sortDirection] : SORTING_ICON[this.defaultDirection];
@@ -288,7 +302,7 @@ var Column = /* @__PURE__ */ function(_Component) {
         "innerOutline": true,
         "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(" ") : void 0,
         "aria-sort": ariaSortValue,
-        "onClick": sortable ? this.handleSortClick : void 0
+        "use:onClick": this.handleClick
       }, _ref))), /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})), sortable && /* @__PURE__ */ React.createElement(SSortWrapper, _ref2.cn("SSortWrapper", {
         "ref": this.sortWrapperRef
       }), /* @__PURE__ */ React.createElement(SSortButton, _ref2.cn("SSortButton", {

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
@@ -21,32 +22,32 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SGroupContainer_gxx2v_gg_,.___SHead_gxx2v_gg_{display:contents}.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SColumn_gxx2v_gg_{position:sticky;top:0;z-index:2}.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SGroup_gxx2v_gg_{top:0}.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SGroupContainer_gxx2v_gg_>.___SColumn_gxx2v_gg_{position:sticky;z-index:2}.___SHead_gxx2v_gg_.__compact_gxx2v_gg_ .___SColumn_gxx2v_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_gxx2v_gg_,.___SGroup_gxx2v_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_gxx2v_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_gxx2v_gg_._use_primary_gxx2v_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_gxx2v_gg_._use_primary_gxx2v_gg_:has(~.___SColumn_gxx2v_gg_.__visibleSort_gxx2v_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_gxx2v_gg_._use_secondary_gxx2v_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_gxx2v_gg_._borders_both_gxx2v_gg_,.___SColumn_gxx2v_gg_._borders_left_gxx2v_gg_,.___SGroup_gxx2v_gg_._borders_both_gxx2v_gg_,.___SGroup_gxx2v_gg_._borders_left_gxx2v_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_gxx2v_gg_._borders_both_gxx2v_gg_,.___SColumn_gxx2v_gg_._borders_right_gxx2v_gg_,.___SGroup_gxx2v_gg_._borders_both_gxx2v_gg_,.___SGroup_gxx2v_gg_._borders_right_gxx2v_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_gxx2v_gg_._use_primary_gxx2v_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_gxx2v_gg_._use_primary_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_gxx2v_gg_._use_primary_gxx2v_gg_.__visibleSort_gxx2v_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_gxx2v_gg_._use_primary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_gxx2v_gg_._use_primary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortButton_gxx2v_gg_,.___SColumn_gxx2v_gg_._use_primary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_::before,.___SColumn_gxx2v_gg_._use_secondary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_::before{display:flex;opacity:1}.___SColumn_gxx2v_gg_._use_secondary_gxx2v_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_gxx2v_gg_._use_secondary_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_gxx2v_gg_._use_secondary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_gxx2v_gg_._use_secondary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortButton_gxx2v_gg_{display:flex;opacity:1}.___SColumn_gxx2v_gg_.__gridArea_gxx2v_gg_,.___SGroupTitle_gxx2v_gg_.__gridArea_gxx2v_gg_,.___SGroup_gxx2v_gg_.__gridArea_gxx2v_gg_{grid-area:var(--gridArea_gxx2v)}.___SHead_gxx2v_gg_ .___SColumn_gxx2v_gg_.__fixed_gxx2v_gg_,.___SHead_gxx2v_gg_ .___SGroup_gxx2v_gg_.__fixed_gxx2v_gg_,.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SColumn_gxx2v_gg_.__fixed_gxx2v_gg_,.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SGroup_gxx2v_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_gxx2v_gg_.__sortable_gxx2v_gg_:hover{cursor:pointer}}.___SSortWrapper_gxx2v_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_gxx2v_gg_,.___SSortWrapper_gxx2v_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_gxx2v_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_gxx2v_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_gxx2v_gg_._sideIndents_wide_gxx2v_gg_ .___SColumn_gxx2v_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_gxx2v_gg_._sideIndents_wide_gxx2v_gg_ .___SColumn_gxx2v_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_gxx2v_gg_{cursor:pointer}',
+    '.___SGroupContainer_qatbb_gg_,.___SHead_qatbb_gg_{display:contents}.___SHead_qatbb_gg_.__sticky_qatbb_gg_ .___SColumn_qatbb_gg_,.___SHead_qatbb_gg_.__sticky_qatbb_gg_ .___SGroup_qatbb_gg_{position:sticky;top:0;z-index:2}.___SHead_qatbb_gg_.__sticky_qatbb_gg_ .___SGroupContainer_qatbb_gg_>.___SColumn_qatbb_gg_{position:sticky;z-index:2}.___SHead_qatbb_gg_.__compact_qatbb_gg_ .___SColumn_qatbb_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_qatbb_gg_,.___SGroup_qatbb_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_qatbb_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_qatbb_gg_._use_primary_qatbb_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_qatbb_gg_._use_primary_qatbb_gg_:has(~.___SColumn_qatbb_gg_.__visibleSort_qatbb_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_qatbb_gg_._use_secondary_qatbb_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_qatbb_gg_._borders_both_qatbb_gg_,.___SColumn_qatbb_gg_._borders_left_qatbb_gg_,.___SGroup_qatbb_gg_._borders_both_qatbb_gg_,.___SGroup_qatbb_gg_._borders_left_qatbb_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_qatbb_gg_._borders_both_qatbb_gg_,.___SColumn_qatbb_gg_._borders_right_qatbb_gg_,.___SGroup_qatbb_gg_._borders_both_qatbb_gg_,.___SGroup_qatbb_gg_._borders_right_qatbb_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_qatbb_gg_._use_primary_qatbb_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_qatbb_gg_._use_primary_qatbb_gg_ .___SSortWrapper_qatbb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_qatbb_gg_._use_primary_qatbb_gg_.__visibleSort_qatbb_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_qatbb_gg_._use_primary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortWrapper_qatbb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_qatbb_gg_._use_primary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortButton_qatbb_gg_,.___SColumn_qatbb_gg_._use_primary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortWrapper_qatbb_gg_::before,.___SColumn_qatbb_gg_._use_secondary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortWrapper_qatbb_gg_::before{display:flex;opacity:1}.___SColumn_qatbb_gg_._use_secondary_qatbb_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_qatbb_gg_._use_secondary_qatbb_gg_ .___SSortWrapper_qatbb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_qatbb_gg_._use_secondary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortWrapper_qatbb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_qatbb_gg_._use_secondary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortButton_qatbb_gg_{display:flex;opacity:1}.___SColumn_qatbb_gg_.__gridArea_qatbb_gg_,.___SGroupTitle_qatbb_gg_.__gridArea_qatbb_gg_,.___SGroup_qatbb_gg_.__gridArea_qatbb_gg_{grid-area:var(--gridArea_qatbb)}.___SHead_qatbb_gg_ .___SColumn_qatbb_gg_.__fixed_qatbb_gg_,.___SHead_qatbb_gg_ .___SGroup_qatbb_gg_.__fixed_qatbb_gg_,.___SHead_qatbb_gg_.__sticky_qatbb_gg_ .___SColumn_qatbb_gg_.__fixed_qatbb_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_qatbb_gg_.__sortable_qatbb_gg_:hover{cursor:pointer}}.___SSortWrapper_qatbb_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_qatbb_gg_,.___SSortWrapper_qatbb_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_qatbb_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_qatbb_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_qatbb_gg_._sideIndents_wide_qatbb_gg_ .___SColumn_qatbb_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_qatbb_gg_._sideIndents_wide_qatbb_gg_ .___SColumn_qatbb_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_qatbb_gg_{cursor:pointer}',
     /*__inner_css_end__*/
-    "gxx2v_gg_"
+    "qatbb_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHead": "___SHead_gxx2v_gg_",
-    "__SGroupContainer": "___SGroupContainer_gxx2v_gg_",
-    "_sticky": "__sticky_gxx2v_gg_",
-    "__SColumn": "___SColumn_gxx2v_gg_",
-    "__SGroup": "___SGroup_gxx2v_gg_",
-    "_compact": "__compact_gxx2v_gg_",
-    "_use_secondary": "_use_secondary_gxx2v_gg_",
-    "_borders_both": "_borders_both_gxx2v_gg_",
-    "_borders_left": "_borders_left_gxx2v_gg_",
-    "_borders_right": "_borders_right_gxx2v_gg_",
-    "_gridArea": "__gridArea_gxx2v_gg_",
-    "__SGroupTitle": "___SGroupTitle_gxx2v_gg_",
-    "--gridArea": "--gridArea_gxx2v",
-    "_fixed": "__fixed_gxx2v_gg_",
-    "_sortable": "__sortable_gxx2v_gg_",
-    "__SSortWrapper": "___SSortWrapper_gxx2v_gg_",
-    "__SSortButton": "___SSortButton_gxx2v_gg_",
-    "__SHeadCheckboxCol": "___SHeadCheckboxCol_gxx2v_gg_",
-    "_use_primary": "_use_primary_gxx2v_gg_",
-    "_visibleSort": "__visibleSort_gxx2v_gg_",
-    "_sideIndents_wide": "_sideIndents_wide_gxx2v_gg_"
+    "__SHead": "___SHead_qatbb_gg_",
+    "__SGroupContainer": "___SGroupContainer_qatbb_gg_",
+    "_sticky": "__sticky_qatbb_gg_",
+    "__SColumn": "___SColumn_qatbb_gg_",
+    "__SGroup": "___SGroup_qatbb_gg_",
+    "_compact": "__compact_qatbb_gg_",
+    "_use_secondary": "_use_secondary_qatbb_gg_",
+    "_borders_both": "_borders_both_qatbb_gg_",
+    "_borders_left": "_borders_left_qatbb_gg_",
+    "_borders_right": "_borders_right_qatbb_gg_",
+    "_gridArea": "__gridArea_qatbb_gg_",
+    "__SGroupTitle": "___SGroupTitle_qatbb_gg_",
+    "--gridArea": "--gridArea_qatbb",
+    "_fixed": "__fixed_qatbb_gg_",
+    "_sortable": "__sortable_qatbb_gg_",
+    "__SSortWrapper": "___SSortWrapper_qatbb_gg_",
+    "__SSortButton": "___SSortButton_qatbb_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_qatbb_gg_",
+    "_use_primary": "_use_primary_qatbb_gg_",
+    "_visibleSort": "__visibleSort_qatbb_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_qatbb_gg_"
   })
 );
 var Group = /* @__PURE__ */ function(_Component) {
@@ -58,7 +59,10 @@ var Group = /* @__PURE__ */ function(_Component) {
   return _createClass(Group2, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.forceUpdate();
+      var _this = this;
+      setTimeout(function() {
+        _this.forceUpdate();
+      }, 0);
     }
   }, {
     key: "groupId",
@@ -69,22 +73,30 @@ var Group = /* @__PURE__ */ function(_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _ref = this.asProps, _ref2, _groupColumns$, _children$, _groupColumns, _children, _this = this;
+      var _ref = this.asProps, _ref2, _this2 = this;
       var SGroupContainer = Box;
       var SGroup = Box;
-      var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children, title = _this$asProps.title, fixed = _this$asProps.fixed, fixedColumnsMap = _this$asProps.fixedColumnsMap, columns = _this$asProps.columns, withConfig = _this$asProps.withConfig;
+      var _this$asProps = this.asProps, styles = _this$asProps.styles, Children = _this$asProps.Children, title = _this$asProps.title, fixed = _this$asProps.fixed, columns = _this$asProps.columns, withConfig = _this$asProps.withConfig, getFixedStyle = _this$asProps.getFixedStyle;
       var groupColumns = columns !== null && columns !== void 0 ? columns : [];
       var children = getOriginChildren(Children);
-      var firstName = withConfig ? (_groupColumns$ = groupColumns[0]) === null || _groupColumns$ === void 0 ? void 0 : _groupColumns$.name : (_children$ = children[0]) === null || _children$ === void 0 ? void 0 : _children$.props.name;
-      var lastName = withConfig ? (_groupColumns = groupColumns[groupColumns.length - 1]) === null || _groupColumns === void 0 ? void 0 : _groupColumns.name : (_children = children[children.length - 1]) === null || _children === void 0 ? void 0 : _children.props.name;
+      var firstColumn = groupColumns[0];
+      var lastColumn = groupColumns[groupColumns.length - 1];
       var style2 = {};
-      if (fixed === "left" && firstName) {
-        style2.left = fixedColumnsMap.get(firstName);
+      if (fixed === "left" && firstColumn) {
+        var _getFixedStyle = getFixedStyle(firstColumn), _getFixedStyle2 = _slicedToArray(_getFixedStyle, 2), name = _getFixedStyle2[0], value = _getFixedStyle2[1];
+        if (name !== void 0 && value !== void 0) {
+          style2[name] = value;
+        }
       }
-      if (fixed === "right") {
-        style2.right = fixedColumnsMap.get(lastName);
+      if (fixed === "right" && lastColumn) {
+        var _getFixedStyle3 = getFixedStyle(lastColumn), _getFixedStyle4 = _slicedToArray(_getFixedStyle3, 2), _name = _getFixedStyle4[0], _value = _getFixedStyle4[1];
+        if (_name !== void 0 && _value !== void 0) {
+          style2[_name] = _value;
+        }
       }
-      return _ref2 = sstyled(styles), /* @__PURE__ */ React__default.createElement(SGroupContainer, _ref2.cn("SGroupContainer", {}), /* @__PURE__ */ React__default.createElement(SGroup, _ref2.cn("SGroup", _objectSpread({}, assignProps({
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React__default.createElement(SGroupContainer, _ref2.cn("SGroupContainer", {
+        "data-group-container": true
+      }), /* @__PURE__ */ React__default.createElement(SGroup, _ref2.cn("SGroup", _objectSpread({}, assignProps({
         "style": style2,
         "__excludeProps": ["title"],
         "id": this.groupId
@@ -92,7 +104,7 @@ var Group = /* @__PURE__ */ function(_Component) {
         return /* @__PURE__ */ React__default.createElement(DataTableInternal.Head.Column, _extends({
           key: column.name
         }, column, {
-          "aria-describedby": _this.groupId
+          "aria-describedby": _this2.groupId
         }));
       }) : /* @__PURE__ */ React__default.createElement(Children, _ref2.cn("Children", {})));
     }

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

@@ -23,32 +23,32 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SGroupContainer_gxx2v_gg_,.___SHead_gxx2v_gg_{display:contents}.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SColumn_gxx2v_gg_{position:sticky;top:0;z-index:2}.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SGroup_gxx2v_gg_{top:0}.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SGroupContainer_gxx2v_gg_>.___SColumn_gxx2v_gg_{position:sticky;z-index:2}.___SHead_gxx2v_gg_.__compact_gxx2v_gg_ .___SColumn_gxx2v_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_gxx2v_gg_,.___SGroup_gxx2v_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_gxx2v_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_gxx2v_gg_._use_primary_gxx2v_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_gxx2v_gg_._use_primary_gxx2v_gg_:has(~.___SColumn_gxx2v_gg_.__visibleSort_gxx2v_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_gxx2v_gg_._use_secondary_gxx2v_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_gxx2v_gg_._borders_both_gxx2v_gg_,.___SColumn_gxx2v_gg_._borders_left_gxx2v_gg_,.___SGroup_gxx2v_gg_._borders_both_gxx2v_gg_,.___SGroup_gxx2v_gg_._borders_left_gxx2v_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_gxx2v_gg_._borders_both_gxx2v_gg_,.___SColumn_gxx2v_gg_._borders_right_gxx2v_gg_,.___SGroup_gxx2v_gg_._borders_both_gxx2v_gg_,.___SGroup_gxx2v_gg_._borders_right_gxx2v_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_gxx2v_gg_._use_primary_gxx2v_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_gxx2v_gg_._use_primary_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_gxx2v_gg_._use_primary_gxx2v_gg_.__visibleSort_gxx2v_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_gxx2v_gg_._use_primary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_gxx2v_gg_._use_primary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortButton_gxx2v_gg_,.___SColumn_gxx2v_gg_._use_primary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_::before,.___SColumn_gxx2v_gg_._use_secondary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_::before{display:flex;opacity:1}.___SColumn_gxx2v_gg_._use_secondary_gxx2v_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_gxx2v_gg_._use_secondary_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_gxx2v_gg_._use_secondary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortWrapper_gxx2v_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_gxx2v_gg_._use_secondary_gxx2v_gg_.__visibleSort_gxx2v_gg_ .___SSortButton_gxx2v_gg_{display:flex;opacity:1}.___SColumn_gxx2v_gg_.__gridArea_gxx2v_gg_,.___SGroupTitle_gxx2v_gg_.__gridArea_gxx2v_gg_,.___SGroup_gxx2v_gg_.__gridArea_gxx2v_gg_{grid-area:var(--gridArea_gxx2v)}.___SHead_gxx2v_gg_ .___SColumn_gxx2v_gg_.__fixed_gxx2v_gg_,.___SHead_gxx2v_gg_ .___SGroup_gxx2v_gg_.__fixed_gxx2v_gg_,.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SColumn_gxx2v_gg_.__fixed_gxx2v_gg_,.___SHead_gxx2v_gg_.__sticky_gxx2v_gg_ .___SGroup_gxx2v_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_gxx2v_gg_.__sortable_gxx2v_gg_:hover{cursor:pointer}}.___SSortWrapper_gxx2v_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_gxx2v_gg_,.___SSortWrapper_gxx2v_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_gxx2v_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_gxx2v_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_gxx2v_gg_._sideIndents_wide_gxx2v_gg_ .___SColumn_gxx2v_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_gxx2v_gg_._sideIndents_wide_gxx2v_gg_ .___SColumn_gxx2v_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_gxx2v_gg_{cursor:pointer}',
+    '.___SGroupContainer_qatbb_gg_,.___SHead_qatbb_gg_{display:contents}.___SHead_qatbb_gg_.__sticky_qatbb_gg_ .___SColumn_qatbb_gg_,.___SHead_qatbb_gg_.__sticky_qatbb_gg_ .___SGroup_qatbb_gg_{position:sticky;top:0;z-index:2}.___SHead_qatbb_gg_.__sticky_qatbb_gg_ .___SGroupContainer_qatbb_gg_>.___SColumn_qatbb_gg_{position:sticky;z-index:2}.___SHead_qatbb_gg_.__compact_qatbb_gg_ .___SColumn_qatbb_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_qatbb_gg_,.___SGroup_qatbb_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_qatbb_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_qatbb_gg_._use_primary_qatbb_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_qatbb_gg_._use_primary_qatbb_gg_:has(~.___SColumn_qatbb_gg_.__visibleSort_qatbb_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_qatbb_gg_._use_secondary_qatbb_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_qatbb_gg_._borders_both_qatbb_gg_,.___SColumn_qatbb_gg_._borders_left_qatbb_gg_,.___SGroup_qatbb_gg_._borders_both_qatbb_gg_,.___SGroup_qatbb_gg_._borders_left_qatbb_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_qatbb_gg_._borders_both_qatbb_gg_,.___SColumn_qatbb_gg_._borders_right_qatbb_gg_,.___SGroup_qatbb_gg_._borders_both_qatbb_gg_,.___SGroup_qatbb_gg_._borders_right_qatbb_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_qatbb_gg_._use_primary_qatbb_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_qatbb_gg_._use_primary_qatbb_gg_ .___SSortWrapper_qatbb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_qatbb_gg_._use_primary_qatbb_gg_.__visibleSort_qatbb_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_qatbb_gg_._use_primary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortWrapper_qatbb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_qatbb_gg_._use_primary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortButton_qatbb_gg_,.___SColumn_qatbb_gg_._use_primary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortWrapper_qatbb_gg_::before,.___SColumn_qatbb_gg_._use_secondary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortWrapper_qatbb_gg_::before{display:flex;opacity:1}.___SColumn_qatbb_gg_._use_secondary_qatbb_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_qatbb_gg_._use_secondary_qatbb_gg_ .___SSortWrapper_qatbb_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_qatbb_gg_._use_secondary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortWrapper_qatbb_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_qatbb_gg_._use_secondary_qatbb_gg_.__visibleSort_qatbb_gg_ .___SSortButton_qatbb_gg_{display:flex;opacity:1}.___SColumn_qatbb_gg_.__gridArea_qatbb_gg_,.___SGroupTitle_qatbb_gg_.__gridArea_qatbb_gg_,.___SGroup_qatbb_gg_.__gridArea_qatbb_gg_{grid-area:var(--gridArea_qatbb)}.___SHead_qatbb_gg_ .___SColumn_qatbb_gg_.__fixed_qatbb_gg_,.___SHead_qatbb_gg_ .___SGroup_qatbb_gg_.__fixed_qatbb_gg_,.___SHead_qatbb_gg_.__sticky_qatbb_gg_ .___SColumn_qatbb_gg_.__fixed_qatbb_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_qatbb_gg_.__sortable_qatbb_gg_:hover{cursor:pointer}}.___SSortWrapper_qatbb_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_qatbb_gg_,.___SSortWrapper_qatbb_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_qatbb_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_qatbb_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_qatbb_gg_._sideIndents_wide_qatbb_gg_ .___SColumn_qatbb_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_qatbb_gg_._sideIndents_wide_qatbb_gg_ .___SColumn_qatbb_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_qatbb_gg_{cursor:pointer}',
     /*__inner_css_end__*/
-    "gxx2v_gg_"
+    "qatbb_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHead": "___SHead_gxx2v_gg_",
-    "__SGroupContainer": "___SGroupContainer_gxx2v_gg_",
-    "_sticky": "__sticky_gxx2v_gg_",
-    "__SColumn": "___SColumn_gxx2v_gg_",
-    "__SGroup": "___SGroup_gxx2v_gg_",
-    "_compact": "__compact_gxx2v_gg_",
-    "_use_secondary": "_use_secondary_gxx2v_gg_",
-    "_borders_both": "_borders_both_gxx2v_gg_",
-    "_borders_left": "_borders_left_gxx2v_gg_",
-    "_borders_right": "_borders_right_gxx2v_gg_",
-    "_gridArea": "__gridArea_gxx2v_gg_",
-    "__SGroupTitle": "___SGroupTitle_gxx2v_gg_",
-    "--gridArea": "--gridArea_gxx2v",
-    "_fixed": "__fixed_gxx2v_gg_",
-    "_sortable": "__sortable_gxx2v_gg_",
-    "__SSortWrapper": "___SSortWrapper_gxx2v_gg_",
-    "__SSortButton": "___SSortButton_gxx2v_gg_",
-    "__SHeadCheckboxCol": "___SHeadCheckboxCol_gxx2v_gg_",
-    "_use_primary": "_use_primary_gxx2v_gg_",
-    "_visibleSort": "__visibleSort_gxx2v_gg_",
-    "_sideIndents_wide": "_sideIndents_wide_gxx2v_gg_"
+    "__SHead": "___SHead_qatbb_gg_",
+    "__SGroupContainer": "___SGroupContainer_qatbb_gg_",
+    "_sticky": "__sticky_qatbb_gg_",
+    "__SColumn": "___SColumn_qatbb_gg_",
+    "__SGroup": "___SGroup_qatbb_gg_",
+    "_compact": "__compact_qatbb_gg_",
+    "_use_secondary": "_use_secondary_qatbb_gg_",
+    "_borders_both": "_borders_both_qatbb_gg_",
+    "_borders_left": "_borders_left_qatbb_gg_",
+    "_borders_right": "_borders_right_qatbb_gg_",
+    "_gridArea": "__gridArea_qatbb_gg_",
+    "__SGroupTitle": "___SGroupTitle_qatbb_gg_",
+    "--gridArea": "--gridArea_qatbb",
+    "_fixed": "__fixed_qatbb_gg_",
+    "_sortable": "__sortable_qatbb_gg_",
+    "__SSortWrapper": "___SSortWrapper_qatbb_gg_",
+    "__SSortButton": "___SSortButton_qatbb_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_qatbb_gg_",
+    "_use_primary": "_use_primary_qatbb_gg_",
+    "_visibleSort": "__visibleSort_qatbb_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_qatbb_gg_"
   })
 );
 var HeadRoot = /* @__PURE__ */ function(_Component) {
@@ -59,7 +59,6 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, HeadRoot2, [].concat(args));
-    _defineProperty(_this, "fixedColumnsMap", /* @__PURE__ */ new Map());
     _defineProperty(_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 || _this$asProps$onChang.call(_this$asProps, value, event);
@@ -84,18 +83,18 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "getGroupProps",
     value: function getGroupProps(_, index) {
-      var _this$asProps3 = this.asProps, use = _this$asProps3.use, gridAreaGroupMap = _this$asProps3.gridAreaGroupMap, children = _this$asProps3.children;
+      var _this$asProps3 = this.asProps, use = _this$asProps3.use, gridAreaGroupMap = _this$asProps3.gridAreaGroupMap, children = _this$asProps3.children, getFixedStyle = _this$asProps3.getFixedStyle;
       return {
         use,
         gridArea: gridAreaGroupMap.get(index),
-        fixedColumnsMap: this.fixedColumnsMap,
-        withConfig: children === void 0
+        withConfig: children === void 0,
+        getFixedStyle
       };
     }
   }, {
     key: "getColumnProps",
     value: function getColumnProps(_, index) {
-      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 _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, onCellClick = _this$asProps4.onCellClick;
       var column = columns[index];
       if (index === 0 && selectedRows && columns[index + 1].fixed) {
         column.fixed = "left";
@@ -107,7 +106,6 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
       }
       if (name !== void 0 && value !== void 0) {
         style2[name] = value;
-        this.fixedColumnsMap.set(column.name, value);
       }
       return {
         use,
@@ -125,7 +123,8 @@ var HeadRoot = /* @__PURE__ */ function(_Component) {
         tableRef,
         gridTemplateColumns,
         gridTemplateAreas,
-        h
+        h,
+        "onClick": onCellClick
       };
     }
   }, {

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

@@ -122,7 +122,7 @@ SColumn[gridArea], SGroup[gridArea], SGroupTitle[gridArea] {
   grid-area: var(--gridArea);
 }
 
-SHead[sticky] SColumn[fixed], SHead SColumn[fixed], SHead[sticky] SGroup, SHead SGroup[fixed] {
+SHead[sticky] SColumn[fixed], SHead SColumn[fixed], SHead SGroup[fixed] {
   position: sticky;
   /* because up resizable */
   z-index: 3;

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

@@ -1,5 +1,6 @@
-import type { Theme } from './Cell.types';
-import type { DTRow } from './Row.types';
+import type * as React from 'react';
+import type { CellPropsInner, Theme } from './Cell.types';
+import type { DTRow, UniqRowKey } from './Row.types';
 import type { DTUse, VirtualScroll } from '../DataTable/DataTable.types';
 import type { DTColumn } from '../Head/Column.types';
 export type CellRenderProps = {
@@ -48,10 +49,11 @@ export type BodyPropsInner = DataTableBodyProps & {
     renderCell?: (props: CellRenderProps) => React.ReactNode | Record<string, any>;
     onBackFromAccordion: (colIndex: number) => void;
     stickyHeader?: boolean;
-    selectedRows?: number[];
+    selectedRows?: UniqRowKey[];
     onSelectRow?: (isSelect: boolean, selectedRowIndex: number, row: DTRow, event?: React.SyntheticEvent<HTMLElement>) => void;
     renderEmptyData: () => React.ReactNode;
     sideIndents?: 'wide';
     getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
     accordionDuration?: number | [number, number];
+    onCellClick: CellPropsInner['onClick'];
 };

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

@@ -1,3 +1,4 @@
+import type * as React from 'react';
 import type { DTRow, DTRows } from './Row.types';
 import type { DTUse } from '../DataTable/DataTable.types';
 import type { DTColumn } from '../Head/Column.types';
@@ -23,4 +24,9 @@ export type CellPropsInner = {
     virtualScroll: boolean;
     tableRef: React.RefObject<HTMLDivElement>;
     accordionDuration?: number | [number, number];
+    onClick: (e: React.SyntheticEvent, opt: {
+        rowIndex: number;
+        colIndex: number;
+        row?: DTRow;
+    }) => void;
 };

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

@@ -41,7 +41,7 @@ export type RowPropsInner = JSX.IntrinsicElements['div'] & {
     gridTemplateAreas: string[];
     gridTemplateColumns: string[];
     accordionDataGridArea: string;
-    selectedRows?: number[];
+    selectedRows?: UniqRowKey[];
     onSelectRow?: (isSelect: boolean, selectedRowIndex: number, row: DTRow, event?: React.SyntheticEvent<HTMLElement>) => void;
     inert?: '';
     accordionDuration?: number | [number, number];

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

@@ -3,7 +3,7 @@ import type { Intergalactic } from '@semcore/core';
 import type Tooltip from '@semcore/tooltip';
 import type { ACCORDION, ROW_GROUP, UNIQ_ROW_KEY } from './DataTable';
 import type { DataTableBodyProps } from '../Body/Body.types';
-import type { DTRow } from '../Body/Row.types';
+import type { DTRow, UniqRowKey } from '../Body/Row.types';
 import type { DataTableColumnProps } from '../Head/Column.types';
 /**
  * Datatable must have an accessible name (aria-table-name).
@@ -18,10 +18,10 @@ export type SortDirection = 'asc' | 'desc';
 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;
+    [key: string]: DTValue | undefined | null;
     [ACCORDION]?: React.ReactNode | DataTableData;
     [ROW_GROUP]?: DataTableData;
-    [UNIQ_ROW_KEY]?: string;
+    [UNIQ_ROW_KEY]?: UniqRowKey;
 };
 export interface DTValue {
     toString(): string;
@@ -44,10 +44,12 @@ export type DataTableProps<D extends DataTableData> = DataTableAriaProps & Sizes
     /** Handler call when request will change sort */
     onSortChange?: DataTableChangeSort<keyof D[0]>;
     /**
-     *
+     * Value to describe width for each column. Could be overridden in the column.gtcWidth property.
+     * Use `auto` to automatically fit the table to the content,
+     * `1fr` for equal-width columns or any other value for the grid-template-column css property.
      * @default auto
      */
-    defaultGridTemplateColumnWidth?: 'auto' | '1fr';
+    defaultGridTemplateColumnWidth?: string;
     /**
      * Flag for compact view (fewer paddings)
      */
@@ -87,10 +89,14 @@ export type DataTableProps<D extends DataTableData> = DataTableAriaProps & Sizes
     rowProps?: DataTableBodyProps['rowProps'];
     renderCell?: DataTableBodyProps['renderCell'];
     /**
-     * List of selected rows (indexes from data array)
+   * Name of a unique key for each row data item
+   */
+    uniqueRowKey?: keyof D[number];
+    /**
+     * List of selected rows (uniqIds from a data array)
      */
-    selectedRows?: number[];
-    onSelectedRowsChange?: (selectedRows: number[], event?: React.SyntheticEvent<HTMLElement>, opts?: {
+    selectedRows?: UniqRowKey[];
+    onSelectedRowsChange?: (selectedRows: UniqRowKey[], event?: React.SyntheticEvent<HTMLElement>, opts?: {
         selectedRowIndex: number;
         isSelected: boolean;
         row: DTRow;
@@ -110,6 +116,10 @@ export type ColumnItemConfig = Intergalactic.InternalTypings.EfficientOmit<Inter
     children: React.ReactNode | React.FC;
 };
 export type ColumnGroupConfig = {
+    /**
+     * Necessary to set a unique name for a group. (It will use as a React key).
+     */
+    name: string;
     borders?: 'both' | 'left' | 'right';
     fixed?: 'left' | 'right';
     children: React.ReactNode;

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

@@ -23,9 +23,10 @@ export declare class Column<D extends DataTableData> extends Component<DataTable
     handleMouseEnter: () => void;
     handleMouseLeave: () => void;
     handleBlur: (e: React.FocusEvent<HTMLElement>) => void;
-    handleSortClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    handleSortClick: (e: React.SyntheticEvent<HTMLElement>) => void;
     handleKeyDown: (e: React.KeyboardEvent) => void;
     handleFocusCell: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;
+    handleClick: (e: React.SyntheticEvent<HTMLElement>) => void;
     render(): React.ReactNode;
 }
 export {};

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

@@ -1,4 +1,5 @@
 import type { Property } from 'csstype';
+import type { CellPropsInner } from '../Body/Cell.types';
 import type { ColumnGroupConfig, ColumnItemConfig, DataTableData, DataTableProps, DTUse, SortDirection } from '../DataTable/DataTable.types';
 export type CommonColumnType = {
     /**
@@ -67,4 +68,5 @@ export type ColumnPropsInner<D extends DataTableData> = {
     gridTemplateColumns: string[];
     gridTemplateAreas: string[];
     sticky: boolean;
+    onClick: CellPropsInner['onClick'];
 };