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

package/CHANGELOG.md

@@ -24,6 +24,7 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 - Incorrect type for `selectedRows/onSelectedRowsChange` when `uniqueRowKey` type is not a string.
 - Hover styles aren't applied to themed cells.
 - Types for `CellRenderProps` - added ability to compare props.columnName with `ACCORDION` symbol.
+- Sticky header with `width` property doesn't work.
 
 ### Changed
 

package/lib/cjs/components/DataTable/DataTable.js

@@ -18,6 +18,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
 var _baseComponents = require("@semcore/base-components");
+var _canUseDOM = _interopRequireDefault(require("@semcore/core/lib/utils/canUseDOM"));
 var _i18nEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/i18nEnhance"));
 var _findComponent = _interopRequireDefault(require("@semcore/core/lib/utils/findComponent"));
 var _hasParent = require("@semcore/core/lib/utils/hasParent");
@@ -99,6 +100,37 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       selectAllMessage: '',
       shadowVertical: ''
     });
+    (0, _defineProperty2["default"])(_this, "handleDocumentScroll", (0, _rafTrottle["default"])(function () {
+      var _headerProps$top, _this$scrollAreaRef$c;
+      var tableContainer = _this.tableContainerRef.current;
+      if (!tableContainer) return;
+      var tableContainerTop = tableContainer.getBoundingClientRect().top;
+      var headerProps = _this.asProps.headerProps;
+      var headerContainer = _this.headerRef.current;
+      var elements = headerContainer === null || headerContainer === void 0 ? void 0 : headerContainer.querySelectorAll('[role="columnheader"], [data-ui-name="Head.Group"]');
+      var top = tableContainerTop - ((_headerProps$top = headerProps === null || headerProps === void 0 ? void 0 : headerProps.top) !== null && _headerProps$top !== void 0 ? _headerProps$top : 0);
+      var headerScrollBar = headerProps !== null && headerProps !== void 0 && headerProps.withScrollBar ? (_this$scrollAreaRef$c = _this.scrollAreaRef.current) === null || _this$scrollAreaRef$c === void 0 ? void 0 : _this$scrollAreaRef$c.querySelector("[role=scrollbar][aria-orientation=horizontal]") : undefined;
+      if (top && top < 0) {
+        var translate = "translateY(".concat(Math.abs(top), "px)");
+        elements === null || elements === void 0 || elements.forEach(function (column) {
+          if (column instanceof HTMLElement) {
+            column.style.setProperty('transform', translate);
+          }
+        });
+        if (headerScrollBar instanceof HTMLElement) {
+          headerScrollBar.style.setProperty('transform', translate);
+        }
+      } else {
+        elements === null || elements === void 0 || elements.forEach(function (column) {
+          if (column instanceof HTMLElement) {
+            column.style.removeProperty('transform');
+          }
+        });
+        if (headerScrollBar instanceof HTMLElement) {
+          headerScrollBar.style.removeProperty('transform');
+        }
+      }
+    }));
     (0, _defineProperty2["default"])(_this, "handleCellClick", function (e, opt) {
       if (_core.lastInteraction.isMouse()) {
         _this.initFocusableCell([_this.hasFocusableInHeader() ? opt.rowIndex + 1 : opt.rowIndex, opt.colIndex]);
@@ -461,6 +493,9 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
           _this2.calculateVerticalShadow();
         });
       }
+      if (headerProps !== null && headerProps !== void 0 && headerProps.sticky && (0, _canUseDOM["default"])() && this.scrollDirection === 'horizontal') {
+        document.addEventListener('scroll', this.handleDocumentScroll);
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -490,6 +525,13 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         }
       }
     }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if ((0, _canUseDOM["default"])()) {
+        document.removeEventListener('scroll', this.handleDocumentScroll);
+      }
+    }
   }, {
     key: "totalRows",
     get: function get() {
@@ -538,21 +580,41 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         gridTemplateAreas: gridTemplateAreas
       };
     }
+  }, {
+    key: "scrollDirection",
+    get: function get() {
+      var _this$asProps6 = this.asProps,
+        w = _this$asProps6.w,
+        wMax = _this$asProps6.wMax,
+        h = _this$asProps6.h,
+        hMax = _this$asProps6.hMax;
+      var scrollDirection = undefined;
+      var hasWidthSettings = Boolean(w) || Boolean(wMax);
+      var hasHeightSettings = Boolean(h) && h !== 'fit-content' || Boolean(hMax);
+      if (hasWidthSettings && !hasHeightSettings) {
+        scrollDirection = 'horizontal';
+      } else if (hasHeightSettings && !hasWidthSettings) {
+        scrollDirection = 'vertical';
+      } else if (hasWidthSettings && hasHeightSettings) {
+        scrollDirection = 'both';
+      }
+      return scrollDirection;
+    }
   }, {
     key: "getHeadProps",
     value: function getHeadProps() {
       var _this3 = this;
-      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$asProps7 = this.asProps,
+        use = _this$asProps7.use,
+        compact = _this$asProps7.compact,
+        sort = _this$asProps7.sort,
+        onSortChange = _this$asProps7.onSortChange,
+        getI18nText = _this$asProps7.getI18nText,
+        uid = _this$asProps7.uid,
+        headerProps = _this$asProps7.headerProps,
+        onSelectedRowsChange = _this$asProps7.onSelectedRowsChange,
+        selectedRows = _this$asProps7.selectedRows,
+        sideIndents = _this$asProps7.sideIndents;
       var _this$gridSettings = this.gridSettings,
         gridTemplateColumns = _this$gridSettings.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings.gridTemplateAreas;
@@ -589,30 +651,31 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         },
         getFixedStyle: this.getFixedStyle,
         onCellClick: this.handleCellClick,
-        shadowVertical: shadowVertical
+        shadowVertical: shadowVertical,
+        scrollDirection: this.scrollDirection
       });
     }
   }, {
     key: "getBodyProps",
     value: function getBodyProps() {
-      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$asProps8 = this.asProps,
+        use = _this$asProps8.use,
+        compact = _this$asProps8.compact,
+        loading = _this$asProps8.loading,
+        getI18nText = _this$asProps8.getI18nText,
+        expandedRows = _this$asProps8.expandedRows,
+        virtualScroll = _this$asProps8.virtualScroll,
+        uid = _this$asProps8.uid,
+        rowProps = _this$asProps8.rowProps,
+        renderCell = _this$asProps8.renderCell,
+        headerProps = _this$asProps8.headerProps,
+        renderEmptyData = _this$asProps8.renderEmptyData,
+        sideIndents = _this$asProps8.sideIndents,
+        selectedRows = _this$asProps8.selectedRows,
+        accordionDuration = _this$asProps8.accordionDuration,
+        accordionMode = _this$asProps8.accordionMode,
+        rawData = _this$asProps8.data,
+        renderCellOverlay = _this$asProps8.renderCellOverlay;
       var _this$gridSettings2 = this.gridSettings,
         gridTemplateColumns = _this$gridSettings2.gridTemplateColumns,
         gridTemplateAreas = _this$gridSettings2.gridTemplateAreas;
@@ -688,20 +751,20 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       var _ref = this.asProps,
         _ref2;
       var SDataTable = _baseComponents.Box;
-      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$asProps9 = this.asProps,
+        Children = _this$asProps9.Children,
+        styles = _this$asProps9.styles,
+        w = _this$asProps9.w,
+        wMax = _this$asProps9.wMax,
+        wMin = _this$asProps9.wMin,
+        h = _this$asProps9.h,
+        hMax = _this$asProps9.hMax,
+        hMin = _this$asProps9.hMin,
+        virtualScroll = _this$asProps9.virtualScroll,
+        children = _this$asProps9.children,
+        headerProps = _this$asProps9.headerProps,
+        loading = _this$asProps9.loading,
+        selectedRows = _this$asProps9.selectedRows;
       var _this$getScrollOffset = this.getScrollOffsetValue(),
         _this$getScrollOffset2 = (0, _slicedToArray2["default"])(_this$getScrollOffset, 2),
         offsetLeftSum = _this$getScrollOffset2[0],
@@ -720,16 +783,6 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
       if (virtualScroll && typeof virtualScroll !== 'boolean' && 'rowHeight' in virtualScroll) {
         gridTemplateRows = "auto auto repeat(".concat(this.totalRows, ", minmax(").concat(virtualScroll.rowHeight, "px, auto)");
       }
-      var scrollDirection = undefined;
-      var hasWidthSettings = Boolean(w) || Boolean(wMax);
-      var hasHeightSettings = Boolean(h) && h !== 'fit-content' || Boolean(hMax);
-      if (hasWidthSettings && !hasHeightSettings) {
-        scrollDirection = 'horizontal';
-      } else if (hasHeightSettings && !hasWidthSettings) {
-        scrollDirection = 'vertical';
-      } else if (hasWidthSettings && hasHeightSettings) {
-        scrollDirection = 'both';
-      }
       return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/React.createElement(_baseComponents.ScrollArea, _ref2.cn("ScrollArea", {
         "leftOffset": offsetLeftSum,
         "rightOffset": offsetRightSum,
@@ -750,7 +803,7 @@ var DataTableRoot = /*#__PURE__*/function (_Component) {
         tabIndex: -1
         // @ts-ignore
         ,
-        scrollDirection: scrollDirection
+        scrollDirection: this.scrollDirection
         // @ts-ignore
         ,
         loading: loading,