Ensure frozen cells are mounted in correct fixed position if canvas h…

…as been scrolled
adazzle · Aug 8, 2018 · f921323 · f921323
1 parent e8852b6
commit f921323
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/packages/react-data-grid/src/Canvas.js b/packages/react-data-grid/src/Canvas.js
@@ -88,7 +88,6 @@ class Canvas extends React.PureComponent {
   };
 
   rows = [];
-  _currentRowsLength = 0;
   _currentRowsRange = { start: 0, end: 0 };
   _scroll = { scrollTop: 0, scrollLeft: 0 };
 
@@ -98,7 +97,6 @@ class Canvas extends React.PureComponent {
   }
 
   componentWillUnmount() {
-    this._currentRowsLength = 0;
     this._currentRowsRange = { start: 0, end: 0 };
     this._scroll = { scrollTop: 0, scrollLeft: 0 };
     this.rows = [];
@@ -233,17 +231,14 @@ class Canvas extends React.PureComponent {
   };
 
   setScrollLeft = (scrollLeft) => {
-    if (this._currentRowsLength !== 0) {
-      if (!this.rows) return;
-      for (let i = 0, len = this._currentRowsLength; i < len; i++) {
-        if (this.rows[i]) {
-          let row = this.getRowByRef(i);
-          if (row && row.setScrollLeft) {
-            row.setScrollLeft(scrollLeft);
-          }
+    this.rows.forEach((r, idx) => {
+      if (r) {
+        let row = this.getRowByRef(idx);
+        if (row && row.setScrollLeft) {
+          row.setScrollLeft(scrollLeft);
         }
       }
-    }
+    });
   };
 
   getRowByRef = (i) => {
@@ -319,11 +314,10 @@ class Canvas extends React.PureComponent {
         colVisibleEndIdx,
         colOverscanStartIdx,
         colOverscanEndIdx,
-        isScrolling: this.props.isScrolling
+        isScrolling: this.props.isScrolling,
+        scrollLeft: this._scroll.scrollLeft
       }));
 
-    this._currentRowsLength = rows.length;
-
     if (rowOverscanStartIdx > 0) {
       rows.unshift(this.renderPlaceholder('top', rowOverscanStartIdx * rowHeight));
     }

diff --git a/packages/react-data-grid/src/Cell.js b/packages/react-data-grid/src/Cell.js
@@ -61,6 +61,10 @@ class Cell extends React.Component {
     });
   }
 
+  componentDidMount() {
+    this.checkScroll();
+  }
+
   componentDidUpdate() {
     if (this.state.isLockChanging && !this.props.column.locked) {
       this.removeScroll();
@@ -184,6 +188,14 @@ class Cell extends React.Component {
     return this.props.isEditorEnabled === true;
   };
 
+  checkScroll() {
+    const {scrollLeft, column} = this.props;
+    let node = this.node;
+    if (column.locked && node && node.style.transform != null) {
+      this.setScrollLeft(scrollLeft);
+    }
+  }
+
   setScrollLeft = (scrollLeft: number) => {
     let node = this.node;
     if (node) {

diff --git a/packages/react-data-grid/src/Row.js b/packages/react-data-grid/src/Row.js
@@ -55,7 +55,7 @@ class Row extends React.Component {
 
   getCell = (column, i) => {
     const CellRenderer = this.props.cellRenderer;
-    const { idx, colOverscanStartIdx, cellMetaData, isScrolling, row, isSelected } = this.props;
+    const { idx, colOverscanStartIdx, cellMetaData, isScrolling, row, isSelected, scrollLeft } = this.props;
     const { key, formatter } = column;
     const baseCellProps = { key: `${key}-${idx}`, idx: i + colOverscanStartIdx, rowIdx: idx, height: this.getRowHeight(), column, cellMetaData };
 
@@ -68,7 +68,8 @@ class Row extends React.Component {
       isRowSelected: isSelected,
       expandableOptions: this.getExpandableOptions(key),
       formatter,
-      isScrolling
+      isScrolling,
+      scrollLeft
     };
 
     return <CellRenderer {...baseCellProps} {...cellProps} />;