@semcore/data-table 16.0.7 → 16.1.0-prerelease.2

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

@@ -31,18 +31,18 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SDataTable_f7mr6_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_f7mr6_gg_.__gridTemplateColumns_f7mr6_gg_{grid-template-columns:var(--gridTemplateColumns_f7mr6)}.___SDataTable_f7mr6_gg_.__gridTemplateAreas_f7mr6_gg_{grid-template-areas:var(--gridTemplateAreas_f7mr6)}.___SDataTable_f7mr6_gg_.__gridTemplateRows_f7mr6_gg_{grid-template-rows:var(--gridTemplateRows_f7mr6)}",
+    ".___SDataTable_sw87i_gg_{display:grid;align-items:start;min-width:-moz-fit-content;min-width:fit-content}.___SDataTable_sw87i_gg_.__gridTemplateColumns_sw87i_gg_{grid-template-columns:var(--gridTemplateColumns_sw87i)}.___SDataTable_sw87i_gg_.__gridTemplateAreas_sw87i_gg_{grid-template-areas:var(--gridTemplateAreas_sw87i)}.___SDataTable_sw87i_gg_.__gridTemplateRows_sw87i_gg_{grid-template-rows:var(--gridTemplateRows_sw87i)}",
     /*__inner_css_end__*/
-    "f7mr6_gg_"
+    "sw87i_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SDataTable": "___SDataTable_f7mr6_gg_",
-    "_gridTemplateColumns": "__gridTemplateColumns_f7mr6_gg_",
-    "--gridTemplateColumns": "--gridTemplateColumns_f7mr6",
-    "_gridTemplateAreas": "__gridTemplateAreas_f7mr6_gg_",
-    "--gridTemplateAreas": "--gridTemplateAreas_f7mr6",
-    "_gridTemplateRows": "__gridTemplateRows_f7mr6_gg_",
-    "--gridTemplateRows": "--gridTemplateRows_f7mr6"
+    "__SDataTable": "___SDataTable_sw87i_gg_",
+    "_gridTemplateColumns": "__gridTemplateColumns_sw87i_gg_",
+    "--gridTemplateColumns": "--gridTemplateColumns_sw87i",
+    "_gridTemplateAreas": "__gridTemplateAreas_sw87i_gg_",
+    "--gridTemplateAreas": "--gridTemplateAreas_sw87i",
+    "_gridTemplateRows": "__gridTemplateRows_sw87i_gg_",
+    "--gridTemplateRows": "--gridTemplateRows_sw87i"
   })
 );
 /*!__reshadow-styles__:"../../style/scroll-shadows.shadow.css"*/
@@ -50,30 +50,33 @@ var scrollStyles = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SScrollArea_1ks92_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_1ks92_gg_ .___SContainer_1ks92_gg_{overflow:visible;overflow:initial}.___SScrollArea_1ks92_gg_ .___SContainer_1ks92_gg_._scrollDirection_both_1ks92_gg_{overflow:auto}.___SScrollArea_1ks92_gg_ .___SContainer_1ks92_gg_._scrollDirection_both_1ks92_gg_.__loading_1ks92_gg_,.___SScrollArea_1ks92_gg_ .___SContainer_1ks92_gg_._scrollDirection_horizontal_1ks92_gg_.__loading_1ks92_gg_,.___SScrollArea_1ks92_gg_ .___SContainer_1ks92_gg_._scrollDirection_vertical_1ks92_gg_.__loading_1ks92_gg_{overflow:hidden}.___SScrollArea_1ks92_gg_ .___SContainer_1ks92_gg_._scrollDirection_horizontal_1ks92_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_1ks92_gg_ .___SContainer_1ks92_gg_._scrollDirection_vertical_1ks92_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_1ks92_gg_ .___SContainer_1ks92_gg_.__headerHeight_1ks92_gg_{scroll-padding-top:var(--headerHeight_1ks92)}.___SScrollArea_1ks92_gg_ .___SContainer_1ks92_gg_.__leftScrollPadding_1ks92_gg_{scroll-padding-left:var(--leftScrollPadding_1ks92)}.___SScrollArea_1ks92_gg_ .___SContainer_1ks92_gg_.__rightScrollPadding_1ks92_gg_{scroll-padding-right:var(--rightScrollPadding_1ks92)}.___SScrollArea_1ks92_gg_ .___SShadowVertical_1ks92_gg_:before{display:none}.___SScrollArea_1ks92_gg_ .___SShadowHorizontal_1ks92_gg_:after,.___SScrollArea_1ks92_gg_ .___SShadowHorizontal_1ks92_gg_:before,.___SScrollArea_1ks92_gg_ .___SShadowVertical_1ks92_gg_:after{z-index:2}",
+    ".___SScrollArea_lhh9n_gg_{width:-moz-fit-content;width:fit-content}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_{overflow:visible;overflow:initial}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_._scrollDirection_both_lhh9n_gg_{overflow:auto}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_._scrollDirection_both_lhh9n_gg_.__loading_lhh9n_gg_,.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_._scrollDirection_horizontal_lhh9n_gg_.__loading_lhh9n_gg_,.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_._scrollDirection_vertical_lhh9n_gg_.__loading_lhh9n_gg_{overflow:hidden}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_._scrollDirection_horizontal_lhh9n_gg_{overflow-x:auto;overflow-y:initial}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_._scrollDirection_vertical_lhh9n_gg_{overflow-x:initial;overflow-y:auto}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_.__headerHeight_lhh9n_gg_{scroll-padding-top:var(--headerHeight_lhh9n)}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_.__leftScrollPadding_lhh9n_gg_{scroll-padding-left:var(--leftScrollPadding_lhh9n)}.___SScrollArea_lhh9n_gg_ .___SContainer_lhh9n_gg_.__rightScrollPadding_lhh9n_gg_{scroll-padding-right:var(--rightScrollPadding_lhh9n)}.___SScrollArea_lhh9n_gg_ .___SShadowHorizontal_lhh9n_gg_::before,.___SScrollArea_lhh9n_gg_ .___SShadowHorizontal_lhh9n_gg_:after,.___SScrollArea_lhh9n_gg_ .___SShadowVertical_lhh9n_gg_::after{z-index:20}.___SScrollArea_lhh9n_gg_ .___SShadowHorizontal_lhh9n_gg_.__leftOffset_lhh9n_gg_::before,.___SScrollArea_lhh9n_gg_ .___SShadowHorizontal_lhh9n_gg_.__rightOffset_lhh9n_gg_::after,.___SScrollArea_lhh9n_gg_ .___SShadowVertical_lhh9n_gg_::before{display:none}",
     /*__inner_css_end__*/
-    "1ks92_gg_"
+    "lhh9n_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SScrollArea": "___SScrollArea_1ks92_gg_",
-    "__SContainer": "___SContainer_1ks92_gg_",
-    "_scrollDirection_both": "_scrollDirection_both_1ks92_gg_",
-    "_loading": "__loading_1ks92_gg_",
-    "_scrollDirection_horizontal": "_scrollDirection_horizontal_1ks92_gg_",
-    "_scrollDirection_vertical": "_scrollDirection_vertical_1ks92_gg_",
-    "_headerHeight": "__headerHeight_1ks92_gg_",
-    "--headerHeight": "--headerHeight_1ks92",
-    "_leftScrollPadding": "__leftScrollPadding_1ks92_gg_",
-    "--leftScrollPadding": "--leftScrollPadding_1ks92",
-    "_rightScrollPadding": "__rightScrollPadding_1ks92_gg_",
-    "--rightScrollPadding": "--rightScrollPadding_1ks92",
-    "__SShadowVertical": "___SShadowVertical_1ks92_gg_",
-    "__SShadowHorizontal": "___SShadowHorizontal_1ks92_gg_"
+    "__SScrollArea": "___SScrollArea_lhh9n_gg_",
+    "__SContainer": "___SContainer_lhh9n_gg_",
+    "_scrollDirection_both": "_scrollDirection_both_lhh9n_gg_",
+    "_loading": "__loading_lhh9n_gg_",
+    "_scrollDirection_horizontal": "_scrollDirection_horizontal_lhh9n_gg_",
+    "_scrollDirection_vertical": "_scrollDirection_vertical_lhh9n_gg_",
+    "_headerHeight": "__headerHeight_lhh9n_gg_",
+    "--headerHeight": "--headerHeight_lhh9n",
+    "_leftScrollPadding": "__leftScrollPadding_lhh9n_gg_",
+    "--leftScrollPadding": "--leftScrollPadding_lhh9n",
+    "_rightScrollPadding": "__rightScrollPadding_lhh9n_gg_",
+    "--rightScrollPadding": "--rightScrollPadding_lhh9n",
+    "__SShadowVertical": "___SShadowVertical_lhh9n_gg_",
+    "__SShadowHorizontal": "___SShadowHorizontal_lhh9n_gg_",
+    "_leftOffset": "__leftOffset_lhh9n_gg_",
+    "_rightOffset": "__rightOffset_lhh9n_gg_"
   })
 );
 var ACCORDION = Symbol("accordion");
 var ROW_GROUP = Symbol("ROW_GROUP");
 var UNIQ_ROW_KEY = Symbol("UNIQ_ROW_KEY");
+var IS_EMPTY_DATA_ROW = Symbol("IS_EMPTY_DATA_ROW");
 var SELECT_ALL = Symbol("SELECT_ALL");
 var ROW_INDEX = Symbol("ROW_INDEX");
 var SCROLL_BAR_HEIGHT = 12;
@@ -85,6 +88,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     _defineProperty(_this, "columns", []);
     _defineProperty(_this, "treeColumns", []);
     _defineProperty(_this, "hasGroups", false);
+    _defineProperty(_this, "hasFixedColumn", false);
     _defineProperty(_this, "focusedCell", [-1, -1]);
     _defineProperty(_this, "scrollAreaRef", /* @__PURE__ */ React.createRef());
     _defineProperty(_this, "tableContainerRef", /* @__PURE__ */ React.createRef());
@@ -100,11 +104,11 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     _defineProperty(_this, "state", {
       scrollTop: 0,
       scrollDirection: "down",
-      selectAllMessage: ""
+      selectAllMessage: "",
+      shadowVertical: ""
     });
     _defineProperty(_this, "handleCellClick", function(e, opt) {
       if (lastInteraction.isMouse()) {
-        console.log("click on cell in data table handler", opt);
         _this.initFocusableCell([_this.hasFocusableInHeader() ? opt.rowIndex + 1 : opt.rowIndex, opt.colIndex]);
       }
     });
@@ -148,15 +152,20 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       });
     });
     _defineProperty(_this, "onExpandRow", function(expandedRow) {
-      var expandedRows = _this.asProps.expandedRows;
+      var _this$asProps2 = _this.asProps, expandedRows = _this$asProps2.expandedRows, onAccordionToggle = _this$asProps2.onAccordionToggle, accordionMode = _this$asProps2.accordionMode;
       if (expandedRows.has(expandedRow[UNIQ_ROW_KEY])) {
         expandedRows["delete"](expandedRow[UNIQ_ROW_KEY]);
-        setTimeout(function() {
-          _this.handlers.expandedRows(new Set(_toConsumableArray(expandedRows)));
-        }, 300);
+        _this.handlers.expandedRows(new Set(_toConsumableArray(expandedRows)));
+        onAccordionToggle === null || onAccordionToggle === void 0 || onAccordionToggle("close", expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
       } else {
         expandedRows.add(expandedRow[UNIQ_ROW_KEY]);
         _this.handlers.expandedRows(new Set(_toConsumableArray(expandedRows)));
+        onAccordionToggle === null || onAccordionToggle === void 0 || onAccordionToggle("open", expandedRow[UNIQ_ROW_KEY], expandedRow[ROW_INDEX]);
+        if (accordionMode === "toggle") {
+          var rowIndex = expandedRow[ROW_INDEX];
+          var colIndex = _this.focusedCell[1];
+          _this.initFocusableCell([_this.hasFocusableInHeader() ? rowIndex + 1 : rowIndex, colIndex]);
+        }
       }
     });
     _defineProperty(_this, "changeFocusCell", function(rowIndex, colIndex, direction) {
@@ -255,13 +264,37 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       }
     });
     _defineProperty(_this, "handleScroll", trottle(function(e) {
-      var scrollTop = e.target.scrollTop;
-      var scrollDirection = scrollTop > _this.state.scrollTop ? "down" : "up";
+      if (_this.asProps.virtualScroll) {
+        var scrollTop = e.target.scrollTop;
+        var scrollDirection = scrollTop > _this.state.scrollTop ? "down" : "up";
+        _this.setState({
+          scrollTop,
+          scrollDirection
+        });
+      }
+      if (_this.hasFixedColumn) {
+        _this.calculateVerticalShadow();
+      }
+    }));
+    _defineProperty(_this, "calculateVerticalShadow", function() {
+      if (!_this.tableContainerRef.current) return;
+      var _this$tableContainerR = _this.tableContainerRef.current, scrollWidth = _this$tableContainerR.scrollWidth, clientWidth = _this$tableContainerR.clientWidth, scrollLeft = _this$tableContainerR.scrollLeft;
+      var maxScrollRight = scrollWidth - clientWidth;
+      var roundedScroll = Math.round(scrollLeft);
+      var roundedMaxScroll = Math.round(maxScrollRight);
+      var shadow = "";
+      if (roundedMaxScroll <= 0) ;
+      else if (roundedScroll <= 0) {
+        shadow = "end";
+      } else if (roundedScroll >= roundedMaxScroll) {
+        shadow = "start";
+      } else if (roundedScroll > 0) {
+        shadow = "median";
+      }
       _this.setState({
-        scrollTop,
-        scrollDirection
+        shadowVertical: shadow
       });
-    }));
+    });
     _defineProperty(_this, "handleFocus", function(e) {
       if (_this.asProps.loading) {
         var _this$spinnerRef$curr;
@@ -406,20 +439,18 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-      var _this$asProps2 = this.asProps, headerProps = _this$asProps2.headerProps, loading = _this$asProps2.loading;
-      _this$asProps2.selectedRows;
-      if (headerProps !== null && headerProps !== void 0 && headerProps.sticky && !headerProps.h || loading || this.columns.some(function(c) {
-        return c.fixed;
-      })) {
+      var _this$asProps3 = this.asProps, headerProps = _this$asProps3.headerProps, loading = _this$asProps3.loading;
+      if (headerProps !== null && headerProps !== void 0 && headerProps.sticky && !headerProps.h || loading || this.hasFixedColumn) {
         requestAnimationFrame(function() {
           _this2.forceUpdate();
+          _this2.calculateVerticalShadow();
         });
       }
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$asProps3 = this.asProps, data = _this$asProps3.data, selectedRows = _this$asProps3.selectedRows, columns = _this$asProps3.columns;
+      var _this$asProps4 = this.asProps, data = _this$asProps4.data, selectedRows = _this$asProps4.selectedRows, columns = _this$asProps4.columns;
       if (prevProps.columns !== columns) {
         var cols = this.calculateColumnsFromConfig();
         this.columns = cols[0];
@@ -429,6 +460,9 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         this.rows = this.calculateRows();
         this.flatRows = this.rows.flat();
         this.forceUpdate();
+        if (this.hasFixedColumn) {
+          this.calculateVerticalShadow();
+        }
       }
       if (prevProps.selectedRows !== selectedRows && selectedRows !== void 0) {
         if (prevProps.selectedRows.length < data.length && selectedRows.length === data.length) {
@@ -441,7 +475,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
   }, {
     key: "totalRows",
     get: function get() {
-      var _this$asProps4 = this.asProps, totalRows = _this$asProps4.totalRows, expandedRows = _this$asProps4.expandedRows;
+      var _this$asProps5 = this.asProps, totalRows = _this$asProps5.totalRows, expandedRows = _this$asProps5.expandedRows;
       var flatRows = this.rows.flat();
       var expandedRowsCount = Array.from(expandedRows !== null && expandedRows !== void 0 ? expandedRows : []).reduce(function(acc, rowKey) {
         var dtRow = flatRows.find(function(el) {
@@ -488,9 +522,10 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     key: "getHeadProps",
     value: function getHeadProps() {
       var _this3 = this;
-      var _this$asProps5 = this.asProps, use = _this$asProps5.use, compact = _this$asProps5.compact, sort = _this$asProps5.sort, onSortChange = _this$asProps5.onSortChange, getI18nText = _this$asProps5.getI18nText, uid = _this$asProps5.uid, headerProps = _this$asProps5.headerProps, onSelectedRowsChange = _this$asProps5.onSelectedRowsChange, selectedRows = _this$asProps5.selectedRows, sideIndents = _this$asProps5.sideIndents;
+      var _this$asProps6 = this.asProps, use = _this$asProps6.use, compact = _this$asProps6.compact, sort = _this$asProps6.sort, onSortChange = _this$asProps6.onSortChange, getI18nText = _this$asProps6.getI18nText, uid = _this$asProps6.uid, headerProps = _this$asProps6.headerProps, onSelectedRowsChange = _this$asProps6.onSelectedRowsChange, selectedRows = _this$asProps6.selectedRows, sideIndents = _this$asProps6.sideIndents;
       var _this$gridSettings = this.gridSettings, gridTemplateColumns = _this$gridSettings.gridTemplateColumns, gridTemplateAreas = _this$gridSettings.gridTemplateAreas;
-      return _objectSpread({
+      var shadowVertical = this.state.shadowVertical;
+      return _objectSpread(_objectSpread({}, headerProps), {}, {
         columns: this.columns,
         treeColumns: this.treeColumns,
         use,
@@ -500,7 +535,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         onSortChange,
         getI18nText,
         uid,
-        ref: this.headerRef,
+        ref: headerProps !== null && headerProps !== void 0 && headerProps.ref ? forkRef(this.headerRef, headerProps.ref) : this.headerRef,
         gridAreaGroupMap: this.gridAreaGroupMap,
         gridTemplateColumns,
         gridTemplateAreas,
@@ -521,16 +556,19 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
           onSelectedRowsChange === null || onSelectedRowsChange === void 0 || onSelectedRowsChange(Array.from(selectedRowsSet), e);
         },
         getFixedStyle: this.getFixedStyle,
-        onCellClick: this.handleCellClick
-      }, headerProps);
+        onCellClick: this.handleCellClick,
+        shadowVertical
+      });
     }
   }, {
     key: "getBodyProps",
     value: function getBodyProps() {
-      var _this$asProps6 = this.asProps, use = _this$asProps6.use, compact = _this$asProps6.compact, loading = _this$asProps6.loading, getI18nText = _this$asProps6.getI18nText, expandedRows = _this$asProps6.expandedRows, virtualScroll = _this$asProps6.virtualScroll, uid = _this$asProps6.uid, rowProps = _this$asProps6.rowProps, renderCell = _this$asProps6.renderCell, headerProps = _this$asProps6.headerProps, renderEmptyData2 = _this$asProps6.renderEmptyData, sideIndents = _this$asProps6.sideIndents, selectedRows = _this$asProps6.selectedRows, accordionDuration = _this$asProps6.accordionDuration;
+      var _this$asProps7 = this.asProps, use = _this$asProps7.use, compact = _this$asProps7.compact, loading = _this$asProps7.loading, getI18nText = _this$asProps7.getI18nText, expandedRows = _this$asProps7.expandedRows, virtualScroll = _this$asProps7.virtualScroll, uid = _this$asProps7.uid, rowProps = _this$asProps7.rowProps, renderCell = _this$asProps7.renderCell, headerProps = _this$asProps7.headerProps, renderEmptyData2 = _this$asProps7.renderEmptyData, sideIndents = _this$asProps7.sideIndents, selectedRows = _this$asProps7.selectedRows, accordionDuration = _this$asProps7.accordionDuration, accordionMode = _this$asProps7.accordionMode, rawData = _this$asProps7.data, renderCellOverlay = _this$asProps7.renderCellOverlay;
       var _this$gridSettings2 = this.gridSettings, gridTemplateColumns = _this$gridSettings2.gridTemplateColumns, gridTemplateAreas = _this$gridSettings2.gridTemplateAreas;
+      var shadowVertical = this.state.shadowVertical;
       return {
         accordionDuration,
+        accordionMode,
         columns: this.columns,
         rows: this.rows,
         flatRows: this.flatRows,
@@ -554,14 +592,17 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         virtualScroll,
         hasGroups: this.hasGroups,
         uid,
-        rowProps,
-        renderCell,
+        rowProps: this.rows.length > 0 ? rowProps : void 0,
+        renderCell: this.rows.length > 0 ? renderCell : void 0,
         renderEmptyData: renderEmptyData2,
         sideIndents,
         selectedRows,
         onSelectRow: this.handleSelectRow,
         getFixedStyle: this.getFixedStyle,
-        onCellClick: this.handleCellClick
+        onCellClick: this.handleCellClick,
+        rawData,
+        shadowVertical,
+        renderCellOverlay
       };
     }
   }, {
@@ -595,7 +636,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
     value: function render() {
       var _ref = this.asProps, _ref2;
       var SDataTable = Box;
-      var _this$asProps7 = this.asProps, Children = _this$asProps7.Children, styles = _this$asProps7.styles, w = _this$asProps7.w, wMax = _this$asProps7.wMax, wMin = _this$asProps7.wMin, h = _this$asProps7.h, hMax = _this$asProps7.hMax, hMin = _this$asProps7.hMin, virtualScroll = _this$asProps7.virtualScroll, children = _this$asProps7.children, headerProps = _this$asProps7.headerProps, loading = _this$asProps7.loading, selectedRows = _this$asProps7.selectedRows;
+      var _this$asProps8 = this.asProps, Children = _this$asProps8.Children, styles = _this$asProps8.styles, w = _this$asProps8.w, wMax = _this$asProps8.wMax, wMin = _this$asProps8.wMin, h = _this$asProps8.h, hMax = _this$asProps8.hMax, hMin = _this$asProps8.hMin, virtualScroll = _this$asProps8.virtualScroll, children = _this$asProps8.children, headerProps = _this$asProps8.headerProps, loading = _this$asProps8.loading, selectedRows = _this$asProps8.selectedRows;
       var _this$getScrollOffset = this.getScrollOffsetValue(), _this$getScrollOffset2 = _slicedToArray(_this$getScrollOffset, 2), offsetLeftSum = _this$getScrollOffset2[0], offsetRightSum = _this$getScrollOffset2[1];
       var _this$gridSettings3 = this.gridSettings, gridTemplateColumns = _this$gridSettings3.gridTemplateColumns, gridTemplateAreas = _this$gridSettings3.gridTemplateAreas;
       var Head2 = findComponent(Children, ["DataTable.Head"]);
@@ -633,7 +674,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
         "ref": this.scrollAreaRef,
         "container": this.tableContainerRef,
         "styles": scrollStyles,
-        "onScroll": virtualScroll ? this.handleScroll : void 0,
+        "onScroll": this.handleScroll,
         "disableAutofocusToContent": true
       }), /* @__PURE__ */ React.createElement(ScrollArea.Container, {
         tabIndex: -1,
@@ -666,13 +707,13 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       }, _ref))), children ? /* @__PURE__ */ React.createElement(Children, _ref2.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DataTableInternal.Head, null), /* @__PURE__ */ React.createElement(DataTableInternal.Body, null)))), (headerPropsToCheck === null || headerPropsToCheck === void 0 ? void 0 : headerPropsToCheck.withScrollBar) && topOffset && !loading && /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
         orientation: "horizontal",
         top: topOffset - SCROLL_BAR_HEIGHT,
-        zIndex: 10
+        zIndex: 20
       }), !loading && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
         orientation: "horizontal",
-        zIndex: 10
+        zIndex: 20
       }), /* @__PURE__ */ React.createElement(ScrollArea.Bar, {
         orientation: "vertical",
-        zIndex: 10
+        zIndex: 20
       })), selectedRows !== void 0 && /* @__PURE__ */ React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
         "aria-live": "polite",
         "role": "status"
@@ -692,7 +733,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       if (selectedRows) {
         var column = {
           name: SELECT_ALL.toString(),
-          gtcWidth: "40px",
+          gtcWidth: "min-content",
           alignItems: "flex-start",
           children: ""
         };
@@ -712,6 +753,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
           alignItems: columnElement.props.alignItems,
           alignContent: columnElement.props.alignContent,
           justifyContent: columnElement.props.justifyContent,
+          textAlign: columnElement.props.textAlign,
           children: ""
         };
         return column2;
@@ -763,7 +805,9 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       var _this5 = this;
       var _this$props2 = this.props, columns = _this$props2.columns, data = _this$props2.data, selectedRows = _this$props2.selectedRows;
       this.hasGroups = columns.some(function(column2) {
-        return "columns" in column2;
+        return "columns" in column2 && column2.columns.some(function(col) {
+          return col.children !== null;
+        });
       });
       var groupIndex = 0;
       var gridColumnIndex = selectedRows ? 2 : 1;
@@ -773,23 +817,26 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       if (selectedRows) {
         var column = {
           name: SELECT_ALL.toString(),
-          gtcWidth: "40px",
+          gtcWidth: "min-content",
           alignItems: "flex-start",
           children: ""
         };
         calculatedColumns.push(column);
       }
-      var makeColumn = function makeColumn2(columnElement, parent, isFirst, isLast) {
+      var makeColumn = function makeColumn2(columnElement, parent, isFirst, isLast, hasGroups) {
         var _columnElement$fixed, _ref4, _columnElement$border;
         var leftBordersFromParent = isFirst && ((parent === null || parent === void 0 ? void 0 : parent.borders) === "both" || (parent === null || parent === void 0 ? void 0 : parent.borders) === "left") ? "left" : void 0;
         var rightBordersFromParent = isLast && ((parent === null || parent === void 0 ? void 0 : parent.borders) === "both" || (parent === null || parent === void 0 ? void 0 : parent.borders) === "right") ? "right" : void 0;
         var column2 = _objectSpread(_objectSpread({}, columnElement), {}, {
           name: childIsColumn(columnElement) ? columnElement.name : "",
           gtcWidth: childIsColumn(columnElement) ? calculateGridTemplateColumn(columnElement) : "",
-          fixed: (_columnElement$fixed = columnElement.fixed) !== null && _columnElement$fixed !== void 0 ? _columnElement$fixed : parent === null || parent === void 0 ? void 0 : parent.fixed,
+          fixed: (_columnElement$fixed = columnElement.fixed) !== null && _columnElement$fixed !== void 0 ? _columnElement$fixed : hasGroups ? parent === null || parent === void 0 ? void 0 : parent.fixed : void 0,
           borders: (_ref4 = (_columnElement$border = columnElement.borders) !== null && _columnElement$border !== void 0 ? _columnElement$border : leftBordersFromParent) !== null && _ref4 !== void 0 ? _ref4 : rightBordersFromParent,
           parent
         });
+        if (column2.fixed) {
+          _this5.hasFixedColumn = true;
+        }
         return column2;
       };
       var childIsColumn = function childIsColumn2(child) {
@@ -798,6 +845,17 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
       var childIsGroup = function childIsGroup2(child) {
         return "columns" in child;
       };
+      var setShowShadows = function setShowShadows2(col, i) {
+        var prevCol = treeColumns[i - 1];
+        if ("columns" in prevCol && prevCol.columns) {
+          prevCol = prevCol.columns[prevCol.columns.length - 1];
+        }
+        if (prevCol.fixed && !col.fixed) {
+          prevCol.showShadowVertical = true;
+        } else if (!prevCol.fixed && col.fixed) {
+          col.showShadowVertical = true;
+        }
+      };
       columns.forEach(function(child, i) {
         if (childIsColumn(child)) {
           var col = makeColumn(child);
@@ -805,28 +863,35 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
           gridColumnIndex++;
           calculatedColumns.push(col);
           treeColumns.push(col);
+          if (i > 0) {
+            setShowShadows(col, i);
+          }
         } else if (childIsGroup(child)) {
           var Group = makeColumn(child);
           var childCount = child.columns.length;
           var initGridColumn = gridColumnIndex;
+          var groupedRow = _this5.hasGroups ? 2 : 1;
           Group.columns = [];
           Group.children = child.children;
           child.columns.forEach(function(child2, j) {
             var _Group$columns;
             var isFirst = j === 0;
             var isLast = j === childCount - 1;
-            var col2 = makeColumn(child2, Group, isFirst, isLast);
+            var col2 = makeColumn(child2, Group, isFirst, isLast, _this5.hasGroups);
             if (i === 0 && j === 0 && data.some(function(d) {
               return d[ACCORDION];
             })) {
               gridColumnIndex++;
-              col2.gridArea = "2 / ".concat(gridColumnIndex - 1, " / 3 / ").concat(gridColumnIndex + 1);
+              col2.gridArea = "".concat(groupedRow, " / ").concat(gridColumnIndex - 1, " / ").concat(groupedRow + 1, " / ").concat(gridColumnIndex + 1);
             } else {
-              col2.gridArea = "2 / ".concat(gridColumnIndex, " / 3 / ").concat(gridColumnIndex + 1);
+              col2.gridArea = "".concat(groupedRow, " / ").concat(gridColumnIndex, " / ").concat(groupedRow + 1, " / ").concat(gridColumnIndex + 1);
             }
-            col2.gridArea = "2 / ".concat(gridColumnIndex, " / 3 / ").concat(gridColumnIndex + 1);
+            col2.gridArea = "".concat(groupedRow, " / ").concat(gridColumnIndex, " / ").concat(groupedRow + 1, " / ").concat(gridColumnIndex + 1);
             gridColumnIndex++;
             calculatedColumns.push(col2);
+            if (isFirst && i > 0) {
+              setShowShadows(col2, i);
+            }
             (_Group$columns = Group.columns) === null || _Group$columns === void 0 || _Group$columns.push(col2);
           });
           treeColumns.push(Group);
@@ -834,6 +899,7 @@ var DataTableRoot = /* @__PURE__ */ function(_Component) {
           groupIndex++;
         }
       });
+      console.log(calculatedColumns, treeColumns);
       return [calculatedColumns, treeColumns];
     }
   }, {
@@ -975,6 +1041,7 @@ export {
   ACCORDION,
   DataTable,
   DataTableInternal,
+  IS_EMPTY_DATA_ROW,
   ROW_GROUP,
   ROW_INDEX,
   SELECT_ALL,

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

@@ -24,34 +24,40 @@ var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SGroupContainer_1uo6g_gg_,.___SHead_1uo6g_gg_{display:contents}.___SHead_1uo6g_gg_.__animationDuration_1uo6g_gg_>.___SColumn_1uo6g_gg_{transition:top var(--animationDuration_1uo6g) ease-out}.___SHead_1uo6g_gg_.__sticky_1uo6g_gg_ .___SColumn_1uo6g_gg_,.___SHead_1uo6g_gg_.__sticky_1uo6g_gg_ .___SGroup_1uo6g_gg_{position:sticky;top:0;z-index:2}.___SHead_1uo6g_gg_.__sticky_1uo6g_gg_ .___SGroupContainer_1uo6g_gg_>.___SColumn_1uo6g_gg_{position:sticky;z-index:2}.___SHead_1uo6g_gg_.__compact_1uo6g_gg_ .___SColumn_1uo6g_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1uo6g_gg_,.___SGroup_1uo6g_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_1uo6g_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_1uo6g_gg_._use_primary_1uo6g_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1uo6g_gg_._use_primary_1uo6g_gg_:has(~.___SColumn_1uo6g_gg_.__visibleSort_1uo6g_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_1uo6g_gg_._use_secondary_1uo6g_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1uo6g_gg_._borders_both_1uo6g_gg_,.___SColumn_1uo6g_gg_._borders_left_1uo6g_gg_,.___SGroup_1uo6g_gg_._borders_both_1uo6g_gg_,.___SGroup_1uo6g_gg_._borders_left_1uo6g_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1uo6g_gg_._borders_both_1uo6g_gg_,.___SColumn_1uo6g_gg_._borders_right_1uo6g_gg_,.___SGroup_1uo6g_gg_._borders_both_1uo6g_gg_,.___SGroup_1uo6g_gg_._borders_right_1uo6g_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1uo6g_gg_._use_primary_1uo6g_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_1uo6g_gg_._use_primary_1uo6g_gg_ .___SSortWrapper_1uo6g_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1uo6g_gg_._use_primary_1uo6g_gg_.__visibleSort_1uo6g_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_1uo6g_gg_._use_primary_1uo6g_gg_.__visibleSort_1uo6g_gg_ .___SSortWrapper_1uo6g_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1uo6g_gg_._use_primary_1uo6g_gg_.__visibleSort_1uo6g_gg_ .___SSortButton_1uo6g_gg_,.___SColumn_1uo6g_gg_._use_primary_1uo6g_gg_.__visibleSort_1uo6g_gg_ .___SSortWrapper_1uo6g_gg_::before,.___SColumn_1uo6g_gg_._use_secondary_1uo6g_gg_.__visibleSort_1uo6g_gg_ .___SSortWrapper_1uo6g_gg_::before{display:flex;opacity:1}.___SColumn_1uo6g_gg_._use_secondary_1uo6g_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_1uo6g_gg_._use_secondary_1uo6g_gg_ .___SSortWrapper_1uo6g_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1uo6g_gg_._use_secondary_1uo6g_gg_.__visibleSort_1uo6g_gg_ .___SSortWrapper_1uo6g_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1uo6g_gg_._use_secondary_1uo6g_gg_.__visibleSort_1uo6g_gg_ .___SSortButton_1uo6g_gg_{display:flex;opacity:1}.___SColumn_1uo6g_gg_.__gridArea_1uo6g_gg_,.___SGroupTitle_1uo6g_gg_.__gridArea_1uo6g_gg_,.___SGroup_1uo6g_gg_.__gridArea_1uo6g_gg_{grid-area:var(--gridArea_1uo6g)}.___SHead_1uo6g_gg_ .___SColumn_1uo6g_gg_.__fixed_1uo6g_gg_,.___SHead_1uo6g_gg_ .___SGroup_1uo6g_gg_.__fixed_1uo6g_gg_,.___SHead_1uo6g_gg_.__sticky_1uo6g_gg_ .___SColumn_1uo6g_gg_.__fixed_1uo6g_gg_{position:sticky;z-index:3}@media (hover:hover){.___SColumn_1uo6g_gg_.__sortable_1uo6g_gg_:hover{cursor:pointer}}.___SSortWrapper_1uo6g_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_1uo6g_gg_,.___SSortWrapper_1uo6g_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1uo6g_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_1uo6g_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_1uo6g_gg_._sideIndents_wide_1uo6g_gg_ .___SColumn_1uo6g_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_1uo6g_gg_._sideIndents_wide_1uo6g_gg_ .___SColumn_1uo6g_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_1uo6g_gg_{cursor:pointer}',
+    '.___SGroupContainer_1ndk0_gg_,.___SHead_1ndk0_gg_{display:contents}.___SHead_1ndk0_gg_.__animationDuration_1ndk0_gg_>.___SColumn_1ndk0_gg_{transition:top var(--animationDuration_1ndk0) ease-out}.___SHead_1ndk0_gg_.__sticky_1ndk0_gg_ .___SColumn_1ndk0_gg_,.___SHead_1ndk0_gg_.__sticky_1ndk0_gg_ .___SGroup_1ndk0_gg_{position:sticky;top:0;z-index:18}.___SHead_1ndk0_gg_.__sticky_1ndk0_gg_ .___SGroupContainer_1ndk0_gg_>.___SColumn_1ndk0_gg_{position:sticky;z-index:18}.___SHead_1ndk0_gg_.__compact_1ndk0_gg_ .___SColumn_1ndk0_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1ndk0_gg_,.___SGroup_1ndk0_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;line-height:var(--intergalactic-lh-100, 133%)}.___SGroup_1ndk0_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_1ndk0_gg_._use_primary_1ndk0_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1ndk0_gg_._use_primary_1ndk0_gg_:has(~.___SColumn_1ndk0_gg_.__visibleSort_1ndk0_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_1ndk0_gg_._use_secondary_1ndk0_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1ndk0_gg_._borders_both_1ndk0_gg_,.___SColumn_1ndk0_gg_._borders_left_1ndk0_gg_,.___SGroup_1ndk0_gg_._borders_both_1ndk0_gg_,.___SGroup_1ndk0_gg_._borders_left_1ndk0_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1ndk0_gg_._borders_both_1ndk0_gg_,.___SColumn_1ndk0_gg_._borders_right_1ndk0_gg_,.___SGroup_1ndk0_gg_._borders_both_1ndk0_gg_,.___SGroup_1ndk0_gg_._borders_right_1ndk0_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1ndk0_gg_._use_primary_1ndk0_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_1ndk0_gg_._use_primary_1ndk0_gg_ .___SSortWrapper_1ndk0_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1ndk0_gg_._use_primary_1ndk0_gg_.__visibleSort_1ndk0_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_1ndk0_gg_._use_primary_1ndk0_gg_.__visibleSort_1ndk0_gg_ .___SSortWrapper_1ndk0_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1ndk0_gg_._use_primary_1ndk0_gg_.__visibleSort_1ndk0_gg_ .___SSortButton_1ndk0_gg_,.___SColumn_1ndk0_gg_._use_primary_1ndk0_gg_.__visibleSort_1ndk0_gg_ .___SSortWrapper_1ndk0_gg_::before,.___SColumn_1ndk0_gg_._use_secondary_1ndk0_gg_.__visibleSort_1ndk0_gg_ .___SSortWrapper_1ndk0_gg_::before{display:flex;opacity:1}.___SColumn_1ndk0_gg_._use_secondary_1ndk0_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_1ndk0_gg_._use_secondary_1ndk0_gg_ .___SSortWrapper_1ndk0_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1ndk0_gg_._use_secondary_1ndk0_gg_.__visibleSort_1ndk0_gg_ .___SSortWrapper_1ndk0_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1ndk0_gg_._use_secondary_1ndk0_gg_.__visibleSort_1ndk0_gg_ .___SSortButton_1ndk0_gg_{display:flex;opacity:1}.___SColumn_1ndk0_gg_.__gridArea_1ndk0_gg_,.___SGroupTitle_1ndk0_gg_.__gridArea_1ndk0_gg_,.___SGroup_1ndk0_gg_.__gridArea_1ndk0_gg_{grid-area:var(--gridArea_1ndk0)}.___SHead_1ndk0_gg_ .___SColumn_1ndk0_gg_.__fixed_1ndk0_gg_,.___SHead_1ndk0_gg_ .___SGroup_1ndk0_gg_.__fixed_1ndk0_gg_,.___SHead_1ndk0_gg_.__sticky_1ndk0_gg_ .___SColumn_1ndk0_gg_.__fixed_1ndk0_gg_{position:sticky;z-index:19}@media (hover:hover){.___SColumn_1ndk0_gg_.__sortable_1ndk0_gg_:hover{cursor:pointer}}.___SSortWrapper_1ndk0_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_1ndk0_gg_,.___SSortWrapper_1ndk0_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1ndk0_gg_:before{content:"";top:0;width:20px;height:100%}.___SSortButton_1ndk0_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_1ndk0_gg_._sideIndents_wide_1ndk0_gg_ .___SColumn_1ndk0_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_1ndk0_gg_._sideIndents_wide_1ndk0_gg_ .___SColumn_1ndk0_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_1ndk0_gg_{cursor:pointer}.___SColumn_1ndk0_gg_.__fixed_1ndk0_gg_.__shadowVertical_1ndk0_gg_:after,.___SGroup_1ndk0_gg_.__fixed_1ndk0_gg_.__shadowVertical_1ndk0_gg_:after{content:"";position:absolute;pointer-events:none;display:none;top:0;width:5px;height:100%;z-index:5}.___SColumn_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_median_1ndk0_gg_,.___SColumn_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_start_1ndk0_gg_,.___SGroup_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_median_1ndk0_gg_,.___SGroup_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_start_1ndk0_gg_{margin-right:-5px;border-right-color:transparent}.___SColumn_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_median_1ndk0_gg_._use_primary_1ndk0_gg_,.___SColumn_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_start_1ndk0_gg_._use_primary_1ndk0_gg_,.___SGroup_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_median_1ndk0_gg_._use_primary_1ndk0_gg_,.___SGroup_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_start_1ndk0_gg_._use_primary_1ndk0_gg_{padding-right:calc(var(--intergalactic-spacing-3x, 12px) + 5px)}.___SColumn_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_median_1ndk0_gg_._use_secondary_1ndk0_gg_,.___SColumn_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_start_1ndk0_gg_._use_secondary_1ndk0_gg_,.___SGroup_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_median_1ndk0_gg_._use_secondary_1ndk0_gg_,.___SGroup_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_start_1ndk0_gg_._use_secondary_1ndk0_gg_{padding-right:calc(var(--intergalactic-spacing-2x, 8px) + 5px)}.___SColumn_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_median_1ndk0_gg_:after,.___SColumn_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_start_1ndk0_gg_:after,.___SGroup_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_median_1ndk0_gg_:after,.___SGroup_1ndk0_gg_._fixed_left_1ndk0_gg_._shadowVertical_start_1ndk0_gg_:after{display:block;right:0;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SColumn_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_end_1ndk0_gg_,.___SColumn_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_median_1ndk0_gg_,.___SGroup_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_end_1ndk0_gg_,.___SGroup_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_median_1ndk0_gg_{margin-left:-5px;border-left-color:transparent}.___SColumn_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_end_1ndk0_gg_._use_primary_1ndk0_gg_,.___SColumn_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_median_1ndk0_gg_._use_primary_1ndk0_gg_,.___SGroup_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_end_1ndk0_gg_._use_primary_1ndk0_gg_,.___SGroup_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_median_1ndk0_gg_._use_primary_1ndk0_gg_{padding-left:calc(var(--intergalactic-spacing-3x, 12px) + 5px)}.___SColumn_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_end_1ndk0_gg_._use_secondary_1ndk0_gg_,.___SColumn_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_median_1ndk0_gg_._use_secondary_1ndk0_gg_,.___SGroup_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_end_1ndk0_gg_._use_secondary_1ndk0_gg_,.___SGroup_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_median_1ndk0_gg_._use_secondary_1ndk0_gg_{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + 5px)}.___SColumn_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_end_1ndk0_gg_:after,.___SColumn_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_median_1ndk0_gg_:after,.___SGroup_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_end_1ndk0_gg_:after,.___SGroup_1ndk0_gg_._fixed_right_1ndk0_gg_._shadowVertical_median_1ndk0_gg_:after{display:block;left:0;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}',
     /*__inner_css_end__*/
-    "1uo6g_gg_"
+    "1ndk0_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHead": "___SHead_1uo6g_gg_",
-    "__SGroupContainer": "___SGroupContainer_1uo6g_gg_",
-    "_animationDuration": "__animationDuration_1uo6g_gg_",
-    "__SColumn": "___SColumn_1uo6g_gg_",
-    "--animationDuration": "--animationDuration_1uo6g",
-    "_sticky": "__sticky_1uo6g_gg_",
-    "__SGroup": "___SGroup_1uo6g_gg_",
-    "_compact": "__compact_1uo6g_gg_",
-    "_use_secondary": "_use_secondary_1uo6g_gg_",
-    "_borders_both": "_borders_both_1uo6g_gg_",
-    "_borders_left": "_borders_left_1uo6g_gg_",
-    "_borders_right": "_borders_right_1uo6g_gg_",
-    "_gridArea": "__gridArea_1uo6g_gg_",
-    "__SGroupTitle": "___SGroupTitle_1uo6g_gg_",
-    "--gridArea": "--gridArea_1uo6g",
-    "_fixed": "__fixed_1uo6g_gg_",
-    "_sortable": "__sortable_1uo6g_gg_",
-    "__SSortWrapper": "___SSortWrapper_1uo6g_gg_",
-    "__SSortButton": "___SSortButton_1uo6g_gg_",
-    "__SHeadCheckboxCol": "___SHeadCheckboxCol_1uo6g_gg_",
-    "_use_primary": "_use_primary_1uo6g_gg_",
-    "_visibleSort": "__visibleSort_1uo6g_gg_",
-    "_sideIndents_wide": "_sideIndents_wide_1uo6g_gg_"
+    "__SHead": "___SHead_1ndk0_gg_",
+    "__SGroupContainer": "___SGroupContainer_1ndk0_gg_",
+    "_animationDuration": "__animationDuration_1ndk0_gg_",
+    "__SColumn": "___SColumn_1ndk0_gg_",
+    "--animationDuration": "--animationDuration_1ndk0",
+    "_sticky": "__sticky_1ndk0_gg_",
+    "__SGroup": "___SGroup_1ndk0_gg_",
+    "_compact": "__compact_1ndk0_gg_",
+    "_use_secondary": "_use_secondary_1ndk0_gg_",
+    "_borders_both": "_borders_both_1ndk0_gg_",
+    "_borders_left": "_borders_left_1ndk0_gg_",
+    "_borders_right": "_borders_right_1ndk0_gg_",
+    "_gridArea": "__gridArea_1ndk0_gg_",
+    "__SGroupTitle": "___SGroupTitle_1ndk0_gg_",
+    "--gridArea": "--gridArea_1ndk0",
+    "_fixed": "__fixed_1ndk0_gg_",
+    "_sortable": "__sortable_1ndk0_gg_",
+    "__SSortWrapper": "___SSortWrapper_1ndk0_gg_",
+    "__SSortButton": "___SSortButton_1ndk0_gg_",
+    "__SHeadCheckboxCol": "___SHeadCheckboxCol_1ndk0_gg_",
+    "_use_primary": "_use_primary_1ndk0_gg_",
+    "_visibleSort": "__visibleSort_1ndk0_gg_",
+    "_sideIndents_wide": "_sideIndents_wide_1ndk0_gg_",
+    "_shadowVertical": "__shadowVertical_1ndk0_gg_",
+    "_fixed_left": "_fixed_left_1ndk0_gg_",
+    "_shadowVertical_median": "_shadowVertical_median_1ndk0_gg_",
+    "_shadowVertical_start": "_shadowVertical_start_1ndk0_gg_",
+    "_fixed_right": "_fixed_right_1ndk0_gg_",
+    "_shadowVertical_end": "_shadowVertical_end_1ndk0_gg_"
   })
 );
 var SORTING_ICON = {
@@ -256,7 +262,15 @@ var Column = /* @__PURE__ */ function(_Component) {
       } 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(" "));
+            var currentGridTemplateColumns = tableRef.current.style.getPropertyValue("grid-template-columns");
+            if (currentGridTemplateColumns) {
+              tableRef.current.style.setProperty("grid-template-columns", currentGridTemplateColumns.split(" ").map(function(gtcWidth, index) {
+                if (index === columnIndex) {
+                  return gridTemplateColumns[index];
+                }
+                return gtcWidth;
+              }).join(" "));
+            }
           }
         });
       }