react-sticky-table - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/index.js

@@ -110,2 +110,4 @@ (function (global, factory) {
 
+      _this.suppressScroll = false;
+
       _this.stickyColumnCount = props.stickyColumnCount === 0 ? 0 : _this.stickyHeaderCount || 1;
@@ -160,4 +162,10 @@ _this.stickyHeaderCount = props.stickyHeaderCount === 0 ? 0 : _this.stickyHeaderCount || 1;
         //X Scrollbars
+        this.xWrapper.addEventListener('scroll', this.scrollXScrollbar);
         this.xScrollbar.addEventListener('scroll', proxy(function () {
-          _this2.xWrapper.scrollLeft = _this2.xScrollbar.scrollLeft;
+          if (!_this2.suppressScroll) {
+            _this2.xWrapper.scrollLeft = _this2.xScrollbar.scrollLeft;
+            _this2.suppressScroll = true;
+          } else {
+            _this2.suppressScroll = false;
+          }
         }, this));
@@ -168,3 +176,8 @@
         this.yScrollbar.addEventListener('scroll', proxy(function () {
-          _this2.yWrapper.scrollTop = _this2.yScrollbar.scrollTop;
+          if (!_this2.suppressScroll) {
+            _this2.yWrapper.scrollTop = _this2.yScrollbar.scrollTop;
+            _this2.suppressScroll = true;
+          } else {
+            _this2.suppressScroll = false;
+          }
         }, this));
@@ -175,8 +188,4 @@ }
       value: function onScrollX() {
-        //Sticky header
-        var scrollLeft = this.xWrapper.scrollLeft;
+        var scrollLeft = Math.max(this.xWrapper.scrollLeft, 0); //Can't have it being less than 0...
         this.stickyHeader.style.transform = 'translate(' + -1 * scrollLeft + 'px, 0)';
-
-        //Custom Scrollbar
-        this.scrollXScrollbar();
       }
@@ -186,3 +195,8 @@ }, {
       value: function scrollXScrollbar() {
-        this.xScrollbar.scrollLeft = this.xWrapper.scrollLeft;
+        if (!this.suppressScroll) {
+          this.xScrollbar.scrollLeft = this.xWrapper.scrollLeft;
+          this.suppressScroll = true;
+        } else {
+          this.suppressScroll = false;
+        }
       }
@@ -192,3 +206,8 @@ }, {
       value: function scrollYScrollbar() {
-        this.yScrollbar.scrollTop = this.yWrapper.scrollTop;
+        if (!this.suppressScroll) {
+          this.yScrollbar.scrollTop = this.yWrapper.scrollTop;
+          this.suppressScroll = true;
+        } else {
+          this.suppressScroll = false;
+        }
       }
@@ -205,7 +224,7 @@ }, {
       value: function setScrollBarWrapperDims() {
-        this.xScrollbar.style.width = 'calc(100% - ' + this.stickyColumn.clientWidth + 'px)';
-        this.xScrollbar.style.left = this.stickyColumn.clientWidth + 'px';
+        this.xScrollbar.style.width = 'calc(100% - ' + this.stickyColumn.offsetWidth + 'px)';
+        this.xScrollbar.style.left = this.stickyColumn.offsetWidth + 'px';
 
-        this.yScrollbar.style.height = 'calc(100% - ' + this.stickyHeader.clientHeight + 'px)';
-        this.yScrollbar.style.top = this.stickyHeader.clientHeight + 'px';
+        this.yScrollbar.style.height = 'calc(100% - ' + this.stickyHeader.offsetHeight + 'px)';
+        this.yScrollbar.style.top = this.stickyHeader.offsetHeight + 'px';
       }
@@ -215,4 +234,4 @@ }, {
       value: function setScrollBarDims() {
-        this.xScrollbar.firstChild.style.width = this.getSizeWithoutBoxSizing(this.realTable.firstChild).width - this.stickyColumn.clientWidth + 'px';
-        this.yScrollbar.firstChild.style.height = this.getSizeWithoutBoxSizing(this.realTable).height - this.stickyHeader.clientHeight + 'px';
+        this.xScrollbar.firstChild.style.width = this.getSizeWithoutBoxSizing(this.realTable.firstChild).width - this.stickyColumn.offsetWidth + 'px';
+        this.yScrollbar.firstChild.style.height = this.getSizeWithoutBoxSizing(this.realTable).height - this.stickyHeader.offsetHeight + 'px';
       }
@@ -247,3 +266,3 @@ }, {
               height = this.getSizeWithoutBoxSizing(cellToCopy).height;
-
+              console.log(height, cellToCopy.offsetHeight);
               this.stickyColumn.firstChild.childNodes[r].firstChild.style.height = height + 'px';
@@ -318,5 +337,5 @@ }
         var nodeStyle = this.getStyle(node);
-        var width = node.clientWidth - parseFloat(nodeStyle.paddingLeft) - parseFloat(nodeStyle.paddingRight);
+        var width = node.offsetWidth - parseFloat(nodeStyle.paddingLeft) - parseFloat(nodeStyle.paddingRight) - parseInt(nodeStyle.borderLeftWidth, 10) - parseInt(nodeStyle.borderRightWidth, 10);
 
-        var height = node.clientHeight - parseFloat(nodeStyle.paddingTop) - parseFloat(nodeStyle.paddingBottom);
+        var height = node.offsetHeight - parseFloat(nodeStyle.paddingTop) - parseFloat(nodeStyle.paddingBottom) - parseInt(nodeStyle.borderTopWidth, 10) - parseInt(nodeStyle.borderBottomWidth, 10);
 
@@ -323,0 +342,0 @@ return { width: width, height: height };

package.json

 {
   "name": "react-sticky-table",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Dynamically sized fixed header and column for tables",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -27,3 +27,3 @@ # Sticky Table
 
-Add the default stylesheet `react-sticky-table/dist/react-sticky-table.css`, then import it into any module.
+Make sure you import the mandatory stylesheet: `react-sticky-table/dist/react-sticky-table.css`. Feel free to overwrite it, though. It should be unobtrusive.
 
@@ -30,0 +30,0 @@ ## Example

src/index.js

@@ -28,2 +28,4 @@ import React, { Component, PropTypes } from 'react';
 
+    this.suppressScroll = false;
+
     this.stickyColumnCount = props.stickyColumnCount === 0 ? 0 : (this.stickyHeaderCount || 1);
@@ -75,4 +77,11 @@ this.stickyHeaderCount = props.stickyHeaderCount === 0 ? 0 : (this.stickyHeaderCount || 1);
     //X Scrollbars
+    this.xWrapper.addEventListener('scroll', this.scrollXScrollbar);
     this.xScrollbar.addEventListener('scroll', proxy(() => {
-      this.xWrapper.scrollLeft = this.xScrollbar.scrollLeft;
+      if (!this.suppressScroll) {
+        this.xWrapper.scrollLeft = this.xScrollbar.scrollLeft;
+        this.suppressScroll = true;
+      }
+      else {
+        this.suppressScroll = false;
+      }
     }, this));
@@ -83,3 +92,9 @@
     this.yScrollbar.addEventListener('scroll', proxy(() => {
-      this.yWrapper.scrollTop = this.yScrollbar.scrollTop;
+      if (!this.suppressScroll) {
+        this.yWrapper.scrollTop = this.yScrollbar.scrollTop;
+        this.suppressScroll = true;
+      }
+      else {
+        this.suppressScroll = false;
+      }
     }, this));
@@ -89,15 +104,24 @@ }
   onScrollX() {
-    //Sticky header
-    var scrollLeft = this.xWrapper.scrollLeft;
+    var scrollLeft = Math.max(this.xWrapper.scrollLeft, 0); //Can't have it being less than 0...
     this.stickyHeader.style.transform = 'translate(' + (-1 * scrollLeft) + 'px, 0)';
-
-    //Custom Scrollbar
-    this.scrollXScrollbar();
   }
 
   scrollXScrollbar() {
-    this.xScrollbar.scrollLeft = this.xWrapper.scrollLeft
+    if (!this.suppressScroll) {
+      this.xScrollbar.scrollLeft = this.xWrapper.scrollLeft;
+      this.suppressScroll = true;
+    }
+    else {
+      this.suppressScroll = false;
+    }
   }
+
   scrollYScrollbar() {
-    this.yScrollbar.scrollTop = this.yWrapper.scrollTop
+    if (!this.suppressScroll) {
+      this.yScrollbar.scrollTop = this.yWrapper.scrollTop;
+      this.suppressScroll = true;
+    }
+    else {
+      this.suppressScroll = false;
+    }
   }
@@ -116,12 +140,12 @@
   setScrollBarWrapperDims() {
-    this.xScrollbar.style.width = 'calc(100% - ' + this.stickyColumn.clientWidth + 'px)';
-    this.xScrollbar.style.left = this.stickyColumn.clientWidth + 'px';
+    this.xScrollbar.style.width = 'calc(100% - ' + this.stickyColumn.offsetWidth + 'px)';
+    this.xScrollbar.style.left = this.stickyColumn.offsetWidth + 'px';
 
-    this.yScrollbar.style.height = 'calc(100% - ' + this.stickyHeader.clientHeight + 'px)';
-    this.yScrollbar.style.top = this.stickyHeader.clientHeight + 'px';
+    this.yScrollbar.style.height = 'calc(100% - ' + this.stickyHeader.offsetHeight + 'px)';
+    this.yScrollbar.style.top = this.stickyHeader.offsetHeight + 'px';
   }
 
   setScrollBarDims() {
-    this.xScrollbar.firstChild.style.width = (this.getSizeWithoutBoxSizing(this.realTable.firstChild).width - this.stickyColumn.clientWidth) + 'px';
-    this.yScrollbar.firstChild.style.height = (this.getSizeWithoutBoxSizing(this.realTable).height - this.stickyHeader.clientHeight) + 'px';
+    this.xScrollbar.firstChild.style.width = (this.getSizeWithoutBoxSizing(this.realTable.firstChild).width - this.stickyColumn.offsetWidth) + 'px';
+    this.yScrollbar.firstChild.style.height = (this.getSizeWithoutBoxSizing(this.realTable).height - this.stickyHeader.offsetHeight) + 'px';
   }
@@ -162,3 +186,3 @@
           height = this.getSizeWithoutBoxSizing(cellToCopy).height;
-
+          console.log(height, cellToCopy.offsetHeight)
           this.stickyColumn.firstChild.childNodes[r].firstChild.style.height = height + 'px';
@@ -254,9 +278,13 @@ }
     var nodeStyle = this.getStyle(node);
-    var width = node.clientWidth
+    var width = node.offsetWidth
       - parseFloat(nodeStyle.paddingLeft)
-      - parseFloat(nodeStyle.paddingRight);
+      - parseFloat(nodeStyle.paddingRight)
+      - parseInt(nodeStyle.borderLeftWidth, 10)
+      - parseInt(nodeStyle.borderRightWidth, 10);
 
-    var height = node.clientHeight
+    var height = node.offsetHeight
       - parseFloat(nodeStyle.paddingTop)
-      - parseFloat(nodeStyle.paddingBottom);
+      - parseFloat(nodeStyle.paddingBottom)
+      - parseInt(nodeStyle.borderTopWidth, 10)
+      - parseInt(nodeStyle.borderBottomWidth, 10);
 
@@ -263,0 +291,0 @@ return {width, height};

No alert changes

Improved metrics

Total package byte prevSize

49277

increased by4.5%

Lines of code

1259

increased by5%

No dependency changes