chore: do not clear row height cache automatically (#192)

Author: nihgwu

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## NEXT VERSION
 
+- chore: do not clear row height cache automatically
+
 ## v1.10.4 (2020-07-02)
 
 - fix: flicker on expanding in dynamic mode

src/BaseTable.js

@@ -207,7 +207,7 @@ class BaseTable extends React.PureComponent {
   }
 
   /**
-   * Reset cached row heights after a specific rowIndex, should be used only in dynamic mode(estimatedRowHeight is provided)
+   * Reset cached offsets for positioning after a specific rowIndex, should be used only in dynamic mode(estimatedRowHeight is provided)
    */
   resetAfterRowIndex(rowIndex = 0, shouldForceUpdate = true) {
     if (!this.props.estimatedRowHeight) return;
@@ -217,6 +217,20 @@ class BaseTable extends React.PureComponent {
     this.rightTable && this.rightTable.resetAfterRowIndex(rowIndex, shouldForceUpdate);
   }
 
+  /**
+   * Reset row height cache, useful if `data` changed entirely, should be used only in dynamic mode(estimatedRowHeight is provided)
+   */
+  resetRowHeightCache() {
+    if (!this.props.estimatedRowHeight) return;
+
+    this._resetIndex = null;
+    this._rowHeightMapBuffer = {};
+    this._rowHeightMap = {};
+    this._mainRowHeightMap = {};
+    this._leftRowHeightMap = {};
+    this._rightRowHeightMap = {};
+  }
+
   /**
    * Scroll to the specified offset.
    * Useful for animating position changes.
@@ -673,7 +687,7 @@ class BaseTable extends React.PureComponent {
 
     const _data = expandColumnKey ? this._flattenOnKeys(data, this.getExpandedRowKeys(), this.props.rowKey) : data;
     if (this._data !== _data) {
-      this._resetRowHeightCache();
+      this.resetAfterRowIndex(0, false);
       this._data = _data;
     }
     // should be after `this._data` assigned
@@ -989,17 +1003,6 @@ class BaseTable extends React.PureComponent {
     this._rowHeightMapBuffer[rowKey] = size;
     this._updateRowHeights();
   }
-
-  _resetRowHeightCache() {
-    if (!this.props.estimatedRowHeight) return;
-
-    this._resetIndex = null;
-    this._rowHeightMapBuffer = {};
-    this._rowHeightMap = {};
-    this._mainRowHeightMap = {};
-    this._leftRowHeightMap = {};
-    this._rightRowHeightMap = {};
-  }
 }
 
 BaseTable.Column = Column;

website/src/examples/dynamic-row-heights.js

@@ -182,6 +182,15 @@ export default class App extends React.Component {
         >
           Toggle columns
         </button>
+        <button
+          onClick={() => {
+            this.setState({
+              data: [dataGenerator(), ...data],
+            })
+          }}
+        >
+          Add item to top
+        </button>
         <Table
           fixed
           selectable