Allow syncing of scrollLeft and scrollTop from props

source/MultiGrid/MultiGrid.jest.js

@@ -300,4 +300,50 @@ describe('MultiGrid', () => {
       expect(bottomRightGrid.style.backgroundColor).toEqual('red')
     })
   })
+  describe('scrollTop and scrollLeft', () => {
+    it('should adjust :scrollLeft for top-right and main grids when scrollLeft is used', () => {
+      const rendered = findDOMNode(render(getMarkup({
+        columnWidth: 50,
+        fixedColumnCount: 2,
+        scrollLeft: 850
+      })))
+      const grids = rendered.querySelectorAll('.ReactVirtualized__Grid')
+      const topRightGrid = grids[1]
+      const bottomRightGrid = grids[3]
+      expect(topRightGrid.scrollLeft).toEqual(850)
+      expect(bottomRightGrid.scrollLeft).toEqual(850)
+    })
+
+    it('should adjust :scrollTop for bottom-left and main grids when scrollTop is used', () => {
+      const rendered = findDOMNode(render(getMarkup({
+        columnWidth: 50,
+        fixedColumnCount: 2,
+        scrollTop: 500
+      })))
+      const grids = rendered.querySelectorAll('.ReactVirtualized__Grid')
+      const bottomLeftGrid = grids[2]
+      const bottomRightGrid = grids[3]
+      expect(bottomLeftGrid.scrollTop).toEqual(500)
+      expect(bottomRightGrid.scrollTop).toEqual(500)
+    })
+
+    it('should adjust :scrollTop and :scrollLeft when scrollTop and scrollLeft change', () => {
+      render(getMarkup({
+        columnWidth: 50,
+        fixedColumnCount: 2
+      }))
+      const rendered = findDOMNode(render(getMarkup({
+        scrollTop: 750,
+        scrollLeft: 900
+      })))
+      const grids = rendered.querySelectorAll('.ReactVirtualized__Grid')
+      const topRightGrid = grids[1]
+      const bottomLeftGrid = grids[2]
+      const bottomRightGrid = grids[3]
+      expect(topRightGrid.scrollLeft).toEqual(900)
+      expect(bottomRightGrid.scrollLeft).toEqual(900)
+      expect(bottomLeftGrid.scrollTop).toEqual(750)
+      expect(bottomRightGrid.scrollTop).toEqual(750)
+    })
+  })
 })

source/MultiGrid/MultiGrid.js

@@ -116,6 +116,21 @@ export default class MultiGrid extends PureComponent {
   }
 
   componentDidMount () {
+    const { scrollLeft, scrollTop } = this.props
+
+    if (scrollLeft >= 0 || scrollTop >= 0) {
+      const newState = {}
+
+      if (scrollLeft >= 0) {
+        newState.scrollLeft = scrollLeft
+      }
+
+      if (scrollTop >= 0) {
+        newState.scrollTop = scrollTop
+      }
+
+      this.setState(newState)
+    }
     this._handleInvalidatedGridSize()
   }
 
@@ -144,6 +159,23 @@ export default class MultiGrid extends PureComponent {
       this._topGridHeight = null
     }
 
+    if (
+      nextProps.scrollLeft !== this.state.scrollLeft ||
+      nextProps.scrollTop !== this.state.scrollTop
+    ) {
+      const newState = {}
+
+      if (nextProps.scrollLeft != null) {
+        newState.scrollLeft = nextProps.scrollLeft
+      }
+
+      if (nextProps.scrollTop != null) {
+        newState.scrollTop = nextProps.scrollTop
+      }
+
+      this.setState(newState)
+    }
+
     this._maybeCalculateCachedStyles(this.props, nextProps, this.state, nextState)
   }
 
@@ -165,7 +197,7 @@ export default class MultiGrid extends PureComponent {
       return null
     }
 
-    // scrollTop and scrollToRow props are explicitly filtered out and ignored
+    // scrollTop and scrollLeft props are explicitly filtered out and ignored
 
     const {
       scrollLeft,