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

package/lib/es6/components/DataTable/DataTable.js

@@ -24,35 +24,37 @@ import { isFocusInside, hasFocusableIn } from '@semcore/core/lib/utils/use/useFo
 import { NoData } from '@semcore/widget-empty';
 import * as React from 'react';
 /*!__reshadow-styles__:"./dataTable.shadow.css"*/
-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)}", /*__inner_css_end__*/"f7mr6_gg_"),
+var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___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__*/"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"*/
-var scrollStyles = (/*__reshadow_css_start__*/_sstyled2.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}", /*__inner_css_end__*/"1ks92_gg_"),
+var scrollStyles = (/*__reshadow_css_start__*/_sstyled2.insert(/*__inner_css_start__*/".___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__*/"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_"
 });
 import { localizedMessages } from '../../translations/__intergalactic-dynamic-locales';
 import { Body } from '../Body/Body';
@@ -61,6 +63,7 @@ import { Head } from '../Head/Head';
 export var ACCORDION = Symbol('accordion');
 export var ROW_GROUP = Symbol('ROW_GROUP');
 export var UNIQ_ROW_KEY = Symbol('UNIQ_ROW_KEY');
+export var IS_EMPTY_DATA_ROW = Symbol('IS_EMPTY_DATA_ROW');
 export var SELECT_ALL = Symbol('SELECT_ALL');
 export var ROW_INDEX = Symbol('ROW_INDEX');
 var SCROLL_BAR_HEIGHT = 12;
@@ -72,6 +75,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());
@@ -87,11 +91,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]);
       }
     });
@@ -137,15 +141,23 @@ 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) {
@@ -253,13 +265,44 @@ 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: scrollTop,
+          scrollDirection: 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 = '';
+      // not scroll
+      if (roundedMaxScroll <= 0) {
+        // start scroll
+      } else if (roundedScroll <= 0) {
+        shadow = 'end';
+        // end scroll
+      } else if (roundedScroll >= roundedMaxScroll) {
+        shadow = 'start';
+        // median scroll
+      } else if (roundedScroll > 0) {
+        shadow = 'median';
+      }
       _this.setState({
-        scrollTop: scrollTop,
-        scrollDirection: scrollDirection
+        shadowVertical: shadow
       });
-    }));
+    });
     _defineProperty(_this, "handleFocus", function (e) {
       if (_this.asProps.loading) {
         var _this$spinnerRef$curr;
@@ -404,25 +447,23 @@ 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,
-        selectedRows = _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];
@@ -432,6 +473,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 !== undefined) {
         if (prevProps.selectedRows.length < data.length && selectedRows.length === data.length) {
@@ -444,9 +488,9 @@ 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) {
@@ -493,21 +537,22 @@ 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: use,
@@ -517,7 +562,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         onSortChange: onSortChange,
         getI18nText: getI18nText,
         uid: uid,
-        ref: this.headerRef,
+        ref: headerProps !== null && headerProps !== void 0 && headerProps.ref ? forkRef(this.headerRef, headerProps.ref) : this.headerRef,
         gridAreaGroupMap: this.gridAreaGroupMap,
         gridTemplateColumns: gridTemplateColumns,
         gridTemplateAreas: gridTemplateAreas,
@@ -538,32 +583,38 @@ 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: 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,
-        renderEmptyData = _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,
+        renderEmptyData = _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: accordionDuration,
+        accordionMode: accordionMode,
         columns: this.columns,
         rows: this.rows,
         flatRows: this.flatRows,
@@ -587,14 +638,17 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         virtualScroll: virtualScroll,
         hasGroups: this.hasGroups,
         uid: uid,
-        rowProps: rowProps,
-        renderCell: renderCell,
+        rowProps: this.rows.length > 0 ? rowProps : undefined,
+        renderCell: this.rows.length > 0 ? renderCell : undefined,
         renderEmptyData: renderEmptyData,
         sideIndents: sideIndents,
         selectedRows: selectedRows,
         onSelectRow: this.handleSelectRow,
         getFixedStyle: this.getFixedStyle,
-        onCellClick: this.handleCellClick
+        onCellClick: this.handleCellClick,
+        rawData: rawData,
+        shadowVertical: shadowVertical,
+        renderCellOverlay: renderCellOverlay
       };
     }
   }, {
@@ -629,20 +683,20 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       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],
@@ -685,7 +739,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         "ref": this.scrollAreaRef,
         "container": this.tableContainerRef,
         "styles": scrollStyles,
-        "onScroll": virtualScroll ? this.handleScroll : undefined,
+        "onScroll": this.handleScroll,
         "disableAutofocusToContent": true
       }), /*#__PURE__*/React.createElement(ScrollArea.Container, {
         tabIndex: -1
@@ -722,13 +776,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 !== undefined && /*#__PURE__*/React.createElement(ScreenReaderOnly, _ref2.cn("ScreenReaderOnly", {
         "aria-live": 'polite',
         "role": 'status'
@@ -751,7 +805,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       if (selectedRows) {
         var column = {
           name: SELECT_ALL.toString(),
-          gtcWidth: '40px',
+          gtcWidth: 'min-content',
           alignItems: 'flex-start',
           children: ''
         };
@@ -771,6 +825,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           alignItems: columnElement.props.alignItems,
           alignContent: columnElement.props.alignContent,
           justifyContent: columnElement.props.justifyContent,
+          textAlign: columnElement.props.textAlign,
           children: ''
         };
         return column;
@@ -825,7 +880,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         data = _this$props2.data,
         selectedRows = _this$props2.selectedRows;
       this.hasGroups = columns.some(function (column) {
-        return 'columns' in column;
+        return 'columns' in column && column.columns.some(function (col) {
+          return col.children !== null;
+        });
       });
       var groupIndex = 0;
       var gridColumnIndex = selectedRows ? 2 : 1;
@@ -835,23 +892,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 makeColumn(columnElement, parent, isFirst, isLast) {
+      var makeColumn = function makeColumn(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' : undefined;
         var rightBordersFromParent = isLast && ((parent === null || parent === void 0 ? void 0 : parent.borders) === 'both' || (parent === null || parent === void 0 ? void 0 : parent.borders) === 'right') ? 'right' : undefined;
         var column = _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 : undefined,
           borders: (_ref4 = (_columnElement$border = columnElement.borders) !== null && _columnElement$border !== void 0 ? _columnElement$border : leftBordersFromParent) !== null && _ref4 !== void 0 ? _ref4 : rightBordersFromParent,
           parent: parent
         });
+        if (column.fixed) {
+          _this5.hasFixedColumn = true;
+        }
         return column;
       };
       var childIsColumn = function childIsColumn(child) {
@@ -860,6 +920,17 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       var childIsGroup = function childIsGroup(child) {
         return 'columns' in child;
       };
+      var setShowShadows = function setShowShadows(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);
@@ -867,28 +938,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 (child, j) {
             var _Group$columns;
             var isFirst = j === 0;
             var isLast = j === childCount - 1;
-            var col = makeColumn(child, Group, isFirst, isLast);
+            var col = makeColumn(child, Group, isFirst, isLast, _this5.hasGroups);
             if (i === 0 && j === 0 && data.some(function (d) {
               return d[ACCORDION];
             })) {
               gridColumnIndex++;
-              col.gridArea = "2 / ".concat(gridColumnIndex - 1, " / 3 / ").concat(gridColumnIndex + 1);
+              col.gridArea = "".concat(groupedRow, " / ").concat(gridColumnIndex - 1, " / ").concat(groupedRow + 1, " / ").concat(gridColumnIndex + 1);
             } else {
-              col.gridArea = "2 / ".concat(gridColumnIndex, " / 3 / ").concat(gridColumnIndex + 1);
+              col.gridArea = "".concat(groupedRow, " / ").concat(gridColumnIndex, " / ").concat(groupedRow + 1, " / ").concat(gridColumnIndex + 1);
             }
-            col.gridArea = "2 / ".concat(gridColumnIndex, " / 3 / ").concat(gridColumnIndex + 1);
+            col.gridArea = "".concat(groupedRow, " / ").concat(gridColumnIndex, " / ").concat(groupedRow + 1, " / ").concat(gridColumnIndex + 1);
             gridColumnIndex++;
             calculatedColumns.push(col);
+            if (isFirst && i > 0) {
+              setShowShadows(col, i);
+            }
             (_Group$columns = Group.columns) === null || _Group$columns === void 0 || _Group$columns.push(col);
           });
           treeColumns.push(Group);
@@ -896,6 +974,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           groupIndex++;
         }
       });
+      console.log(calculatedColumns, treeColumns);
       return [calculatedColumns, treeColumns];
     }
   }, {