react-sticky-table - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

dist/index.js

@@ -137,2 +137,3 @@ (function (global, factory) {
           this.stickyColumn = this.table.querySelector('#sticky-column');
+          this.stickyCorner = this.table.querySelector('#sticky-corner');
 
@@ -261,2 +262,6 @@ this.xWrapper.addEventListener('scroll', this.onScrollX);
               this.stickyColumn.firstChild.childNodes[r].firstChild.style.height = height + 'px';
+
+              if (r === 0) {
+                this.stickyCorner.firstChild.firstChild.firstChild.style.height = height + 'px';
+              }
             }
@@ -281,2 +286,9 @@ }
               cell.style.minWidth = width + 'px';
+
+              if (c === 0) {
+                cell = this.stickyCorner.firstChild.firstChild.firstChild;
+
+                cell.style.width = width + 'px';
+                cell.style.minWidth = width + 'px';
+              }
             }
@@ -321,2 +333,22 @@ }
     }, {
+      key: 'getStickyCorner',
+      value: function getStickyCorner(rows) {
+        var cells;
+        var stickyCorner = [];
+
+        rows.forEach(proxy(function (row, r) {
+          if (r === 0) {
+            cells = row.props.children;
+
+            stickyCorner.push(_react2.default.createElement(
+              _Row2.default,
+              _extends({}, row.props, { id: '', key: r }),
+              cells[0]
+            ));
+          }
+        }, this));
+
+        return stickyCorner;
+      }
+    }, {
       key: 'getStyle',
@@ -342,3 +374,3 @@ value: function getStyle(node) {
         var rows = _react2.default.Children.toArray(this.props.children);
-        var stickyColumn, stickyHeader;
+        var stickyColumn, stickyHeader, stickyCorner;
 
@@ -349,2 +381,5 @@ this.rowCount = rows.length;
         if (rows.length) {
+          if (this.stickyColumnCount > 0 && this.stickyHeaderCount > 0) {
+            stickyCorner = this.getStickyCorner(rows);
+          }
           if (this.stickyColumnCount > 0) {
@@ -373,2 +408,11 @@ stickyColumn = this.getStickyColumn(rows);
             'div',
+            { className: 'sticky-corner', id: 'sticky-corner' },
+            _react2.default.createElement(
+              _Table2.default,
+              null,
+              stickyCorner
+            )
+          ),
+          _react2.default.createElement(
+            'div',
             { className: 'sticky-header', id: 'sticky-header' },
@@ -375,0 +419,0 @@ _react2.default.createElement(

package.json

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

src/__tests__/index.js

@@ -23,3 +23,3 @@ import React from 'react';
 
-    expect(table.find('.cell')).to.have.length(8);
+    expect(table.find('.cell')).to.have.length(9);
   });
@@ -59,5 +59,5 @@
 
-    expect(table.find('.cell')).to.have.length(6);
+    expect(table.find('.cell')).to.have.length(7);
     expect(table.find('#sticky-header .cell')).to.have.length(0);
   });
 });

src/index.js

@@ -52,2 +52,3 @@ import React, { Component, PropTypes } from 'react';
       this.stickyColumn = this.table.querySelector('#sticky-column');
+      this.stickyCorner = this.table.querySelector('#sticky-corner');
 
@@ -82,4 +83,3 @@ this.xWrapper.addEventListener('scroll', this.onScrollX);
         this.suppressScroll = true;
-      }
-      else {
+      } else {
         this.suppressScroll = false;
@@ -95,4 +95,3 @@ }
         this.suppressScroll = true;
-      }
-      else {
+      } else {
         this.suppressScroll = false;
@@ -112,4 +111,3 @@ }
       this.suppressScroll = true;
-    }
-    else {
+    } else {
       this.suppressScroll = false;
@@ -123,4 +121,3 @@ }
       this.suppressScroll = true;
-    }
-    else {
+    } else {
       this.suppressScroll = false;
@@ -186,4 +183,8 @@ }
           height = this.getSizeWithoutBoxSizing(cellToCopy).height;
-          
+
           this.stickyColumn.firstChild.childNodes[r].firstChild.style.height = height + 'px';
+
+          if (r === 0) {
+            this.stickyCorner.firstChild.firstChild.firstChild.style.height = height + 'px';
+          }
         }
@@ -211,2 +212,9 @@ }
           cell.style.minWidth = width + 'px';
+
+          if (c === 0) {
+            cell = this.stickyCorner.firstChild.firstChild.firstChild;
+
+            cell.style.width = width + 'px';
+            cell.style.minWidth = width + 'px';
+          }
         }
@@ -262,2 +270,27 @@ }
   /**
+   * Get the jsx cells for sticky columns by copying
+   * children elements
+   * @param {array} rows provided child row elements
+   * @returns {array} array of <Row> elements for sticky column
+   */
+  getStickyCorner(rows) {
+    var cells;
+    var stickyCorner = [];
+
+    rows.forEach(proxy((row, r) => {
+      if (r === 0) {
+        cells = row.props.children;
+
+        stickyCorner.push(
+          <Row {...row.props} id='' key={r}>
+            {cells[0]}
+          </Row>
+        );
+      }
+    }, this));
+
+    return stickyCorner;
+  }
+
+  /**
    * Fill for browsers that don't support getComputedStyle (*cough* I.E.)
@@ -301,3 +334,3 @@ * @param  {object} node dom object
     var rows = React.Children.toArray(this.props.children);
-    var stickyColumn, stickyHeader;
+    var stickyColumn, stickyHeader, stickyCorner;
 
@@ -308,2 +341,5 @@ this.rowCount = rows.length;
     if (rows.length) {
+      if (this.stickyColumnCount > 0 && this.stickyHeaderCount > 0) {
+        stickyCorner = this.getStickyCorner(rows);
+      }
       if (this.stickyColumnCount > 0) {
@@ -321,2 +357,5 @@ stickyColumn = this.getStickyColumn(rows);
         <div id='y-scrollbar'><div></div></div>
+        <div className='sticky-corner' id='sticky-corner'>
+          <Table>{stickyCorner}</Table>
+        </div>
         <div className='sticky-header' id='sticky-header'>
@@ -323,0 +362,0 @@ <Table>{stickyHeader}</Table>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51955

increased by5.98%

Lines of code

1337

increased by6.87%

No dependency changes