title: React Data Grid rows disappearing on dynamically providing height
body: <p>I am trying to make <code>RDG Table</code> which can be expanded(for expansion i have used <code>ReactGridLayout</code>) in height &amp; Width. I am using <code>react-sizeme</code> for dynamically providing <code>height</code> &amp; <code>Width</code> to my component(in my case <code>Example</code> component). Now, Table is getting expanded in height &amp; Width correctly when scrollbar in table is at top.
  Below image shows Table with scrollbar at top:
  <a href="https://i.stack.imgur.com/fnlT5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fnlT5.png" alt="ScrollBar at top"></a>
  If i expand table, everything will work correctly as in below image:
  <a href="https://i.stack.imgur.com/mfTZC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mfTZC.jpg" alt="enter image description here"></a></p>
  
  <p>As soon as we bring Scrollbar somewhat in between and then expand table's height, rows are getting disappeared. These rows become visible as soon as i scroll by just a small amount in table.
  For e.g. In below image, Scrollbar is in not in beginning(row6 is visible).
  <a href="https://i.stack.imgur.com/2c07q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2c07q.png" alt="Scroll bar is not at beginning"></a></p>
  
  <p>Now if i expand table, some rows are getting disappeared as shown in below image:
  <a href="https://i.stack.imgur.com/VaFQm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VaFQm.png" alt="Rows getting disappeared"></a></p>
  
  <p>I am unable to understand why rows are getting disappeared on expansion when scrollbar is not in beginning.</p>
  
  <p>CodeSandbox Link: <a href="https://codesandbox.io/embed/rdg-optimising-scrolling-n6xpj" rel="nofollow noreferrer">https://codesandbox.io/embed/rdg-optimising-scrolling-n6xpj</a></p>
  
  <p>Edit: Table contains 199 rows currently.</p>