react-base-table - npm Package Compare versions

Comparing version 1.10.1 to 1.10.2

CHANGELOG.md

@@ -5,2 +5,7 @@ # CHANGELOG
 
+## v1.10.2 (2020-06-26)
+
+- fix: regression of expansion with frozen columns
+- fix: dynamic rowHeight is not updated when `data` or `columns` changed
+
 ## v1.10.1 (2020-06-24)
@@ -7,0 +12,0 @@

es/BaseTable.js

@@ -100,3 +100,16 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
       _this.columnManager.reset(columns, fixed);
+
+      if (_this.props.estimatedRowHeight && fixed) {
+        _this.resetColumnWidthCache(false);
+
+        if (!_this.columnManager.hasLeftFrozenColumns()) {
+          _this._leftRowHeightMap = {};
+        }
+
+        if (!_this.columnManager.hasRightFrozenColumns()) {
+          _this._rightRowHeightMap = {};
+        }
+      }
     }, isObjectEqual);
+    _this._isResetting = false;
     _this._resetIndex = null;
@@ -113,2 +126,3 @@ _this._rowHeightMap = {};
       })) {
+        _this._isResetting = true;
         _this._rowHeightMap = _objectSpread({}, _this._rowHeightMap, {}, _this._rowHeightMapBuffer);
@@ -122,2 +136,4 @@
         _this.forceUpdateTable();
+
+        _this._isResetting = false;
       } else {
@@ -182,40 +198,18 @@ _this._rowHeightMapBuffer = {};
   /**
-   * Get the height of header
+   * Get the total height of all rows, including expanded rows.
    */
   ;
 
-  _proto.getHeaderHeight = function getHeaderHeight() {
-    var headerHeight = this.props.headerHeight;
+  _proto.getTotalRowsHeight = function getTotalRowsHeight() {
+    var _this$props = this.props,
+        rowHeight = _this$props.rowHeight,
+        estimatedRowHeight = _this$props.estimatedRowHeight;
 
-    if (Array.isArray(headerHeight)) {
-      return headerHeight.reduce(function (sum, height) {
-        return sum + height;
-      }, 0);
+    if (estimatedRowHeight) {
+      return this.table ? this.table.getTotalRowsHeight() : this._data.length * estimatedRowHeight;
     }
 
-    return headerHeight;
+    return this._data.length * rowHeight;
   }
   /**
-   * Get the total height of all frozen rows,
-   */
-  ;
-
-  _proto.getFrozenRowsHeight = function getFrozenRowsHeight() {
-    var _this$props = this.props,
-        frozenData = _this$props.frozenData,
-        rowHeight = _this$props.rowHeight;
-    return frozenData.length * rowHeight;
-  }
-  /**
-   * Get the total height of all rows, including expanded rows.
-   */
-  ;
-
-  _proto.getTotalRowsHeight = function getTotalRowsHeight() {
-    var _this$props2 = this.props,
-        rowHeight = _this$props2.rowHeight,
-        estimatedRowHeight = _this$props2.estimatedRowHeight;
-    return this.table ? this.table.getTotalRowsHeight() : this._data.length * (estimatedRowHeight || rowHeight);
-  }
-  /**
    * Get the total width of all columns.
@@ -374,6 +368,6 @@ */
         onExpand = _ref.onExpand;
-    var _this$props3 = this.props,
-        rowKey = _this$props3.rowKey,
-        expandColumnKey = _this$props3.expandColumnKey,
-        expandIconProps = _this$props3.expandIconProps;
+    var _this$props2 = this.props,
+        rowKey = _this$props2.rowKey,
+        expandColumnKey = _this$props2.expandColumnKey,
+        expandIconProps = _this$props2.expandIconProps;
     if (!expandColumnKey) return null;
@@ -409,8 +403,8 @@ var expandable = rowIndex >= 0 && hasChildren(rowData);
         style = _ref2.style;
-    var _this$props4 = this.props,
-        rowClassName = _this$props4.rowClassName,
-        rowRenderer = _this$props4.rowRenderer,
-        rowEventHandlers = _this$props4.rowEventHandlers,
-        expandColumnKey = _this$props4.expandColumnKey,
-        estimatedRowHeight = _this$props4.estimatedRowHeight;
+    var _this$props3 = this.props,
+        rowClassName = _this$props3.rowClassName,
+        rowRenderer = _this$props3.rowRenderer,
+        rowEventHandlers = _this$props3.rowEventHandlers,
+        expandColumnKey = _this$props3.expandColumnKey,
+        estimatedRowHeight = _this$props3.estimatedRowHeight;
     var rowClass = callOrReturn(rowClassName, {
@@ -446,2 +440,3 @@ columns: columns,
       estimatedRowHeight: rowIndex >= 0 ? estimatedRowHeight : undefined,
+      getIsResetting: this._getIsResetting,
       cellRenderer: this.renderRowCell,
@@ -541,5 +536,5 @@ expandIconRenderer: this.renderExpandIcon,
         style = _ref5.style;
-    var _this$props5 = this.props,
-        headerClassName = _this$props5.headerClassName,
-        headerRenderer = _this$props5.headerRenderer;
+    var _this$props4 = this.props,
+        headerClassName = _this$props4.headerClassName,
+        headerRenderer = _this$props4.headerRenderer;
     var headerClass = callOrReturn(headerClassName, {
@@ -590,6 +585,6 @@ columns: columns,
         headerRenderer = column.headerRenderer;
-    var _this$props6 = this.props,
-        sortBy = _this$props6.sortBy,
-        sortState = _this$props6.sortState,
-        headerCellProps = _this$props6.headerCellProps;
+    var _this$props5 = this.props,
+        sortBy = _this$props5.sortBy,
+        sortState = _this$props5.sortState,
+        headerCellProps = _this$props5.headerCellProps;
 
@@ -661,9 +656,9 @@ var TableHeaderCell = this._getComponent('TableHeaderCell');
   _proto.renderMainTable = function renderMainTable() {
-    var _this$props7 = this.props,
-        width = _this$props7.width,
-        headerHeight = _this$props7.headerHeight,
-        rowHeight = _this$props7.rowHeight,
-        fixed = _this$props7.fixed,
-        estimatedRowHeight = _this$props7.estimatedRowHeight,
-        rest = _objectWithoutPropertiesLoose(_this$props7, ["width", "headerHeight", "rowHeight", "fixed", "estimatedRowHeight"]);
+    var _this$props6 = this.props,
+        width = _this$props6.width,
+        headerHeight = _this$props6.headerHeight,
+        rowHeight = _this$props6.rowHeight,
+        fixed = _this$props6.fixed,
+        estimatedRowHeight = _this$props6.estimatedRowHeight,
+        rest = _objectWithoutPropertiesLoose(_this$props6, ["width", "headerHeight", "rowHeight", "fixed", "estimatedRowHeight"]);
 
@@ -703,8 +698,8 @@ var height = this._getTableHeight();
 
-    var _this$props8 = this.props,
-        width = _this$props8.width,
-        headerHeight = _this$props8.headerHeight,
-        rowHeight = _this$props8.rowHeight,
-        estimatedRowHeight = _this$props8.estimatedRowHeight,
-        rest = _objectWithoutPropertiesLoose(_this$props8, ["width", "headerHeight", "rowHeight", "estimatedRowHeight"]);
+    var _this$props7 = this.props,
+        width = _this$props7.width,
+        headerHeight = _this$props7.headerHeight,
+        rowHeight = _this$props7.rowHeight,
+        estimatedRowHeight = _this$props7.estimatedRowHeight,
+        rest = _objectWithoutPropertiesLoose(_this$props7, ["width", "headerHeight", "rowHeight", "estimatedRowHeight"]);
 
@@ -739,8 +734,8 @@ var containerHeight = this._getFrozenContainerHeight();
 
-    var _this$props9 = this.props,
-        width = _this$props9.width,
-        headerHeight = _this$props9.headerHeight,
-        rowHeight = _this$props9.rowHeight,
-        estimatedRowHeight = _this$props9.estimatedRowHeight,
-        rest = _objectWithoutPropertiesLoose(_this$props9, ["width", "headerHeight", "rowHeight", "estimatedRowHeight"]);
+    var _this$props8 = this.props,
+        width = _this$props8.width,
+        headerHeight = _this$props8.headerHeight,
+        rowHeight = _this$props8.rowHeight,
+        estimatedRowHeight = _this$props8.estimatedRowHeight,
+        rest = _objectWithoutPropertiesLoose(_this$props8, ["width", "headerHeight", "rowHeight", "estimatedRowHeight"]);
 
@@ -773,5 +768,5 @@ var containerHeight = this._getFrozenContainerHeight();
   _proto.renderResizingLine = function renderResizingLine() {
-    var _this$props10 = this.props,
-        width = _this$props10.width,
-        fixed = _this$props10.fixed;
+    var _this$props9 = this.props,
+        width = _this$props9.width,
+        fixed = _this$props9.fixed;
     var resizingKey = this.state.resizingKey;
@@ -812,5 +807,5 @@ if (!fixed || !resizingKey) return null;
   _proto.renderFooter = function renderFooter() {
-    var _this$props11 = this.props,
-        footerHeight = _this$props11.footerHeight,
-        footerRenderer = _this$props11.footerRenderer;
+    var _this$props10 = this.props,
+        footerHeight = _this$props10.footerHeight,
+        footerRenderer = _this$props10.footerRenderer;
     if (footerHeight === 0) return null;
@@ -826,9 +821,11 @@ return React.createElement("div", {
   _proto.renderEmptyLayer = function renderEmptyLayer() {
-    var _this$props12 = this.props,
-        data = _this$props12.data,
-        frozenData = _this$props12.frozenData,
-        footerHeight = _this$props12.footerHeight,
-        emptyRenderer = _this$props12.emptyRenderer;
+    var _this$props11 = this.props,
+        data = _this$props11.data,
+        frozenData = _this$props11.frozenData,
+        footerHeight = _this$props11.footerHeight,
+        emptyRenderer = _this$props11.emptyRenderer;
     if (data && data.length || frozenData && frozenData.length) return null;
-    var headerHeight = this.getHeaderHeight();
+
+    var headerHeight = this._getHeaderHeight();
+
     return React.createElement("div", {
@@ -853,23 +850,24 @@ className: this._prefixClass('empty-layer'),
 
-    var _this$props13 = this.props,
-        columns = _this$props13.columns,
-        children = _this$props13.children,
-        width = _this$props13.width,
-        fixed = _this$props13.fixed,
-        data = _this$props13.data,
-        frozenData = _this$props13.frozenData,
-        expandColumnKey = _this$props13.expandColumnKey,
-        disabled = _this$props13.disabled,
-        className = _this$props13.className,
-        style = _this$props13.style,
-        footerHeight = _this$props13.footerHeight,
-        classPrefix = _this$props13.classPrefix,
-        estimatedRowHeight = _this$props13.estimatedRowHeight;
+    var _this$props12 = this.props,
+        columns = _this$props12.columns,
+        children = _this$props12.children,
+        width = _this$props12.width,
+        fixed = _this$props12.fixed,
+        data = _this$props12.data,
+        frozenData = _this$props12.frozenData,
+        expandColumnKey = _this$props12.expandColumnKey,
+        disabled = _this$props12.disabled,
+        className = _this$props12.className,
+        style = _this$props12.style,
+        footerHeight = _this$props12.footerHeight,
+        classPrefix = _this$props12.classPrefix,
+        estimatedRowHeight = _this$props12.estimatedRowHeight;
 
     this._resetColumnManager(getColumns(columns, children), fixed);
 
-    if (expandColumnKey) {
-      this._data = this._flattenOnKeys(data, this.getExpandedRowKeys(), this.props.rowKey);
-    } else {
-      this._data = data;
+    var _data = expandColumnKey ? this._flattenOnKeys(data, this.getExpandedRowKeys(), this.props.rowKey) : data;
+
+    if (this._data !== _data) {
+      this.resetRowHeightCache();
+      this._data = _data;
     } // should be after `this._data` assigned
@@ -905,6 +903,6 @@
   _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    var _this$props14 = this.props,
-        data = _this$props14.data,
-        height = _this$props14.height,
-        maxHeight = _this$props14.maxHeight;
+    var _this$props13 = this.props,
+        data = _this$props13.data,
+        height = _this$props13.height,
+        maxHeight = _this$props13.maxHeight;
 
@@ -950,8 +948,31 @@ if (data !== prevProps.data) {
   _proto._getRowHeight = function _getRowHeight(rowIndex) {
-    var _this$props15 = this.props,
-        estimatedRowHeight = _this$props15.estimatedRowHeight,
-        rowKey = _this$props15.rowKey;
+    var _this$props14 = this.props,
+        estimatedRowHeight = _this$props14.estimatedRowHeight,
+        rowKey = _this$props14.rowKey;
     return this._rowHeightMap[this._data[rowIndex][rowKey]] || estimatedRowHeight;
   };
 
+  _proto._getIsResetting = function _getIsResetting() {
+    return this._isResetting;
+  };
+
+  _proto._getHeaderHeight = function _getHeaderHeight() {
+    var headerHeight = this.props.headerHeight;
+
+    if (Array.isArray(headerHeight)) {
+      return headerHeight.reduce(function (sum, height) {
+        return sum + height;
+      }, 0);
+    }
+
+    return headerHeight;
+  };
+
+  _proto._getFrozenRowsHeight = function _getFrozenRowsHeight() {
+    var _this$props15 = this.props,
+        frozenData = _this$props15.frozenData,
+        rowHeight = _this$props15.rowHeight;
+    return frozenData.length * rowHeight;
+  };
+
   _proto._getTableHeight = function _getTableHeight() {
@@ -965,5 +986,8 @@ var _this$props16 = this.props,
     if (maxHeight > 0) {
-      var frozenRowsHeight = this.getFrozenRowsHeight();
+      var frozenRowsHeight = this._getFrozenRowsHeight();
+
       var totalRowsHeight = this.getTotalRowsHeight();
-      var headerHeight = this.getHeaderHeight();
+
+      var headerHeight = this._getHeaderHeight();
+
       var totalHeight = headerHeight + frozenRowsHeight + totalRowsHeight + this._horizontalScrollbarSize;
@@ -977,3 +1001,3 @@ tableHeight = Math.min(totalHeight, maxHeight - footerHeight);
   _proto._getBodyHeight = function _getBodyHeight() {
-    return this._getTableHeight() - this.getHeaderHeight() - this.getFrozenRowsHeight();
+    return this._getTableHeight() - this._getHeaderHeight() - this._getFrozenRowsHeight();
   };
@@ -986,3 +1010,5 @@
     if (maxHeight > 0) return tableHeight;
-    var totalHeight = this.getTotalRowsHeight() + this.getHeaderHeight() + this.getFrozenRowsHeight();
+
+    var totalHeight = this.getTotalRowsHeight() + this._getHeaderHeight() + this._getFrozenRowsHeight();
+
     return Math.min(tableHeight, totalHeight);
@@ -989,0 +1015,0 @@ };

es/GridTable.js

@@ -97,34 +97,20 @@ import _extends from "@babel/runtime/helpers/extends";
 
-  _proto.getHeaderHeight = function getHeaderHeight() {
-    var headerHeight = this.props.headerHeight;
+  _proto.getTotalRowsHeight = function getTotalRowsHeight() {
+    var _this$props = this.props,
+        data = _this$props.data,
+        rowHeight = _this$props.rowHeight,
+        estimatedRowHeight = _this$props.estimatedRowHeight;
 
-    if (Array.isArray(headerHeight)) {
-      return headerHeight.reduce(function (sum, height) {
-        return sum + height;
-      }, 0);
+    if (estimatedRowHeight) {
+      return this.innerRef && this.innerRef.clientHeight || data.length * estimatedRowHeight;
     }
 
-    return headerHeight;
+    return data.length * rowHeight;
   };
 
-  _proto.getFrozenRowsHeight = function getFrozenRowsHeight() {
-    var _this$props = this.props,
-        frozenData = _this$props.frozenData,
-        rowHeight = _this$props.rowHeight;
-    return frozenData.length * rowHeight;
-  };
-
-  _proto.getTotalRowsHeight = function getTotalRowsHeight() {
+  _proto.renderRow = function renderRow(args) {
     var _this$props2 = this.props,
         data = _this$props2.data,
-        rowHeight = _this$props2.rowHeight,
-        estimatedRowHeight = _this$props2.estimatedRowHeight;
-    return this.innerRef && this.innerRef.clientHeight || data.length * (estimatedRowHeight || rowHeight);
-  };
-
-  _proto.renderRow = function renderRow(args) {
-    var _this$props3 = this.props,
-        data = _this$props3.data,
-        columns = _this$props3.columns,
-        rowRenderer = _this$props3.rowRenderer;
+        columns = _this$props2.columns,
+        rowRenderer = _this$props2.rowRenderer;
     var rowData = data[args.rowIndex];
@@ -138,26 +124,27 @@ return rowRenderer(_objectSpread({}, args, {
   _proto.render = function render() {
-    var _this$props4 = this.props,
-        containerStyle = _this$props4.containerStyle,
-        classPrefix = _this$props4.classPrefix,
-        className = _this$props4.className,
-        data = _this$props4.data,
-        frozenData = _this$props4.frozenData,
-        width = _this$props4.width,
-        height = _this$props4.height,
-        rowHeight = _this$props4.rowHeight,
-        estimatedRowHeight = _this$props4.estimatedRowHeight,
-        getRowHeight = _this$props4.getRowHeight,
-        headerWidth = _this$props4.headerWidth,
-        bodyWidth = _this$props4.bodyWidth,
-        useIsScrolling = _this$props4.useIsScrolling,
-        onScroll = _this$props4.onScroll,
-        hoveredRowKey = _this$props4.hoveredRowKey,
-        overscanRowCount = _this$props4.overscanRowCount,
-        style = _this$props4.style,
-        onScrollbarPresenceChange = _this$props4.onScrollbarPresenceChange,
-        rest = _objectWithoutPropertiesLoose(_this$props4, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "estimatedRowHeight", "getRowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "hoveredRowKey", "overscanRowCount", "style", "onScrollbarPresenceChange"]);
+    var _this$props3 = this.props,
+        containerStyle = _this$props3.containerStyle,
+        classPrefix = _this$props3.classPrefix,
+        className = _this$props3.className,
+        data = _this$props3.data,
+        frozenData = _this$props3.frozenData,
+        width = _this$props3.width,
+        height = _this$props3.height,
+        rowHeight = _this$props3.rowHeight,
+        estimatedRowHeight = _this$props3.estimatedRowHeight,
+        getRowHeight = _this$props3.getRowHeight,
+        headerWidth = _this$props3.headerWidth,
+        bodyWidth = _this$props3.bodyWidth,
+        useIsScrolling = _this$props3.useIsScrolling,
+        onScroll = _this$props3.onScroll,
+        hoveredRowKey = _this$props3.hoveredRowKey,
+        overscanRowCount = _this$props3.overscanRowCount,
+        style = _this$props3.style,
+        onScrollbarPresenceChange = _this$props3.onScrollbarPresenceChange,
+        rest = _objectWithoutPropertiesLoose(_this$props3, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "estimatedRowHeight", "getRowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "hoveredRowKey", "overscanRowCount", "style", "onScrollbarPresenceChange"]);
 
-    var headerHeight = this.getHeaderHeight();
-    var frozenRowsHeight = this.getFrozenRowsHeight();
+    var headerHeight = this._getHeaderHeight();
+
     var frozenRowCount = frozenData.length;
+    var frozenRowsHeight = rowHeight * frozenRowCount;
     var cls = cn(classPrefix + "__table", className);
@@ -224,8 +211,20 @@ var containerProps = containerStyle ? {
     var rowIndex = _ref.rowIndex;
-    var _this$props5 = this.props,
-        data = _this$props5.data,
-        rowKey = _this$props5.rowKey;
+    var _this$props4 = this.props,
+        data = _this$props4.data,
+        rowKey = _this$props4.rowKey;
     return data[rowIndex][rowKey];
   };
 
+  _proto._getHeaderHeight = function _getHeaderHeight() {
+    var headerHeight = this.props.headerHeight;
+
+    if (Array.isArray(headerHeight)) {
+      return headerHeight.reduce(function (sum, height) {
+        return sum + height;
+      }, 0);
+    }
+
+    return headerHeight;
+  };
+
   _proto._getBodyWidth = function _getBodyWidth() {
@@ -232,0 +231,0 @@ return this.props.bodyWidth;

es/TableRow.js

@@ -37,3 +37,4 @@ import _extends from "@babel/runtime/helpers/extends";
   _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    if (this.props.estimatedRowHeight && this.props.rowIndex >= 0 && this.props.style === prevProps.style && this.state.measured === prevState.measured && this.state.measured === true) {
+    if (this.props.estimatedRowHeight && this.props.rowIndex >= 0 && // should not re-measure if it's updated after measured and reset
+    !this.props.getIsResetting() && this.state.measured && prevState.measured) {
       this.setState({
@@ -63,6 +64,7 @@ measured: false
         rowKey = _this$props.rowKey,
+        getIsResetting = _this$props.getIsResetting,
         onRowHover = _this$props.onRowHover,
         onRowExpand = _this$props.onRowExpand,
         onRowHeightMeasured = _this$props.onRowHeightMeasured,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["isScrolling", "className", "style", "columns", "rowIndex", "rowData", "expandColumnKey", "depth", "rowEventHandlers", "estimatedRowHeight", "rowRenderer", "cellRenderer", "expandIconRenderer", "tagName", "rowKey", "onRowHover", "onRowExpand", "onRowHeightMeasured"]);
+        rest = _objectWithoutPropertiesLoose(_this$props, ["isScrolling", "className", "style", "columns", "rowIndex", "rowData", "expandColumnKey", "depth", "rowEventHandlers", "estimatedRowHeight", "rowRenderer", "cellRenderer", "expandIconRenderer", "tagName", "rowKey", "getIsResetting", "onRowHover", "onRowExpand", "onRowHeightMeasured"]);
     /* eslint-enable no-unused-vars */
@@ -148,3 +150,3 @@
       }, function () {
-        onRowHeightMeasured(rowKey, height, rowIndex, !columns[0].__placeholder__ && columns[0].frozen);
+        onRowHeightMeasured(rowKey, height, rowIndex, columns[0] && !columns[0].__placeholder__ && columns[0].frozen);
       });
@@ -231,9 +233,10 @@ }
   expandIconRenderer: PropTypes.func,
+  estimatedRowHeight: PropTypes.number,
+  getIsResetting: PropTypes.func,
   onRowHover: PropTypes.func,
   onRowExpand: PropTypes.func,
-  tagName: PropTypes.elementType,
-  estimatedRowHeight: PropTypes.number,
-  onRowHeightMeasured: PropTypes.func
+  onRowHeightMeasured: PropTypes.func,
+  tagName: PropTypes.elementType
 };
 export default TableRow;
 //# sourceMappingURL=TableRow.js.map

lib/BaseTable.js

@@ -140,3 +140,16 @@ "use strict";
       _this.columnManager.reset(columns, fixed);
+
+      if (_this.props.estimatedRowHeight && fixed) {
+        _this.resetColumnWidthCache(false);
+
+        if (!_this.columnManager.hasLeftFrozenColumns()) {
+          _this._leftRowHeightMap = {};
+        }
+
+        if (!_this.columnManager.hasRightFrozenColumns()) {
+          _this._rightRowHeightMap = {};
+        }
+      }
     }, _utils.isObjectEqual);
+    _this._isResetting = false;
     _this._resetIndex = null;
@@ -153,2 +166,3 @@ _this._rowHeightMap = {};
       })) {
+        _this._isResetting = true;
         _this._rowHeightMap = _objectSpread({}, _this._rowHeightMap, {}, _this._rowHeightMapBuffer);
@@ -162,2 +176,4 @@
         _this.forceUpdateTable();
+
+        _this._isResetting = false;
       } else {
@@ -225,43 +241,19 @@ _this._rowHeightMapBuffer = {};
     /**
-     * Get the height of header
+     * Get the total height of all rows, including expanded rows.
      */
 
   }, {
-    key: "getHeaderHeight",
-    value: function getHeaderHeight() {
-      var headerHeight = this.props.headerHeight;
+    key: "getTotalRowsHeight",
+    value: function getTotalRowsHeight() {
+      var _this$props = this.props,
+          rowHeight = _this$props.rowHeight,
+          estimatedRowHeight = _this$props.estimatedRowHeight;
 
-      if (Array.isArray(headerHeight)) {
-        return headerHeight.reduce(function (sum, height) {
-          return sum + height;
-        }, 0);
+      if (estimatedRowHeight) {
+        return this.table ? this.table.getTotalRowsHeight() : this._data.length * estimatedRowHeight;
       }
 
-      return headerHeight;
+      return this._data.length * rowHeight;
     }
     /**
-     * Get the total height of all frozen rows,
-     */
-
-  }, {
-    key: "getFrozenRowsHeight",
-    value: function getFrozenRowsHeight() {
-      var _this$props = this.props,
-          frozenData = _this$props.frozenData,
-          rowHeight = _this$props.rowHeight;
-      return frozenData.length * rowHeight;
-    }
-    /**
-     * Get the total height of all rows, including expanded rows.
-     */
-
-  }, {
-    key: "getTotalRowsHeight",
-    value: function getTotalRowsHeight() {
-      var _this$props2 = this.props,
-          rowHeight = _this$props2.rowHeight,
-          estimatedRowHeight = _this$props2.estimatedRowHeight;
-      return this.table ? this.table.getTotalRowsHeight() : this._data.length * (estimatedRowHeight || rowHeight);
-    }
-    /**
      * Get the total width of all columns.
@@ -416,6 +408,6 @@ */
           onExpand = _ref.onExpand;
-      var _this$props3 = this.props,
-          rowKey = _this$props3.rowKey,
-          expandColumnKey = _this$props3.expandColumnKey,
-          expandIconProps = _this$props3.expandIconProps;
+      var _this$props2 = this.props,
+          rowKey = _this$props2.rowKey,
+          expandColumnKey = _this$props2.expandColumnKey,
+          expandIconProps = _this$props2.expandIconProps;
       if (!expandColumnKey) return null;
@@ -452,8 +444,8 @@ var expandable = rowIndex >= 0 && (0, _utils.hasChildren)(rowData);
           style = _ref2.style;
-      var _this$props4 = this.props,
-          rowClassName = _this$props4.rowClassName,
-          rowRenderer = _this$props4.rowRenderer,
-          rowEventHandlers = _this$props4.rowEventHandlers,
-          expandColumnKey = _this$props4.expandColumnKey,
-          estimatedRowHeight = _this$props4.estimatedRowHeight;
+      var _this$props3 = this.props,
+          rowClassName = _this$props3.rowClassName,
+          rowRenderer = _this$props3.rowRenderer,
+          rowEventHandlers = _this$props3.rowEventHandlers,
+          expandColumnKey = _this$props3.expandColumnKey,
+          estimatedRowHeight = _this$props3.estimatedRowHeight;
       var rowClass = (0, _utils.callOrReturn)(rowClassName, {
@@ -489,2 +481,3 @@ columns: columns,
         estimatedRowHeight: rowIndex >= 0 ? estimatedRowHeight : undefined,
+        getIsResetting: this._getIsResetting,
         cellRenderer: this.renderRowCell,
@@ -586,5 +579,5 @@ expandIconRenderer: this.renderExpandIcon,
           style = _ref5.style;
-      var _this$props5 = this.props,
-          headerClassName = _this$props5.headerClassName,
-          headerRenderer = _this$props5.headerRenderer;
+      var _this$props4 = this.props,
+          headerClassName = _this$props4.headerClassName,
+          headerRenderer = _this$props4.headerRenderer;
       var headerClass = (0, _utils.callOrReturn)(headerClassName, {
@@ -636,6 +629,6 @@ columns: columns,
           headerRenderer = column.headerRenderer;
-      var _this$props6 = this.props,
-          sortBy = _this$props6.sortBy,
-          sortState = _this$props6.sortState,
-          headerCellProps = _this$props6.headerCellProps;
+      var _this$props5 = this.props,
+          sortBy = _this$props5.sortBy,
+          sortState = _this$props5.sortState,
+          headerCellProps = _this$props5.headerCellProps;
 
@@ -708,9 +701,9 @@ var TableHeaderCell = this._getComponent('TableHeaderCell');
     value: function renderMainTable() {
-      var _this$props7 = this.props,
-          width = _this$props7.width,
-          headerHeight = _this$props7.headerHeight,
-          rowHeight = _this$props7.rowHeight,
-          fixed = _this$props7.fixed,
-          estimatedRowHeight = _this$props7.estimatedRowHeight,
-          rest = (0, _objectWithoutProperties2["default"])(_this$props7, ["width", "headerHeight", "rowHeight", "fixed", "estimatedRowHeight"]);
+      var _this$props6 = this.props,
+          width = _this$props6.width,
+          headerHeight = _this$props6.headerHeight,
+          rowHeight = _this$props6.rowHeight,
+          fixed = _this$props6.fixed,
+          estimatedRowHeight = _this$props6.estimatedRowHeight,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props6, ["width", "headerHeight", "rowHeight", "fixed", "estimatedRowHeight"]);
 
@@ -750,8 +743,8 @@ var height = this._getTableHeight();
       if (!this.columnManager.hasLeftFrozenColumns()) return null;
-      var _this$props8 = this.props,
-          width = _this$props8.width,
-          headerHeight = _this$props8.headerHeight,
-          rowHeight = _this$props8.rowHeight,
-          estimatedRowHeight = _this$props8.estimatedRowHeight,
-          rest = (0, _objectWithoutProperties2["default"])(_this$props8, ["width", "headerHeight", "rowHeight", "estimatedRowHeight"]);
+      var _this$props7 = this.props,
+          width = _this$props7.width,
+          headerHeight = _this$props7.headerHeight,
+          rowHeight = _this$props7.rowHeight,
+          estimatedRowHeight = _this$props7.estimatedRowHeight,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props7, ["width", "headerHeight", "rowHeight", "estimatedRowHeight"]);
 
@@ -786,8 +779,8 @@ var containerHeight = this._getFrozenContainerHeight();
       if (!this.columnManager.hasRightFrozenColumns()) return null;
-      var _this$props9 = this.props,
-          width = _this$props9.width,
-          headerHeight = _this$props9.headerHeight,
-          rowHeight = _this$props9.rowHeight,
-          estimatedRowHeight = _this$props9.estimatedRowHeight,
-          rest = (0, _objectWithoutProperties2["default"])(_this$props9, ["width", "headerHeight", "rowHeight", "estimatedRowHeight"]);
+      var _this$props8 = this.props,
+          width = _this$props8.width,
+          headerHeight = _this$props8.headerHeight,
+          rowHeight = _this$props8.rowHeight,
+          estimatedRowHeight = _this$props8.estimatedRowHeight,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props8, ["width", "headerHeight", "rowHeight", "estimatedRowHeight"]);
 
@@ -821,5 +814,5 @@ var containerHeight = this._getFrozenContainerHeight();
     value: function renderResizingLine() {
-      var _this$props10 = this.props,
-          width = _this$props10.width,
-          fixed = _this$props10.fixed;
+      var _this$props9 = this.props,
+          width = _this$props9.width,
+          fixed = _this$props9.fixed;
       var resizingKey = this.state.resizingKey;
@@ -861,5 +854,5 @@ if (!fixed || !resizingKey) return null;
     value: function renderFooter() {
-      var _this$props11 = this.props,
-          footerHeight = _this$props11.footerHeight,
-          footerRenderer = _this$props11.footerRenderer;
+      var _this$props10 = this.props,
+          footerHeight = _this$props10.footerHeight,
+          footerRenderer = _this$props10.footerRenderer;
       if (footerHeight === 0) return null;
@@ -876,9 +869,11 @@ return _react["default"].createElement("div", {
     value: function renderEmptyLayer() {
-      var _this$props12 = this.props,
-          data = _this$props12.data,
-          frozenData = _this$props12.frozenData,
-          footerHeight = _this$props12.footerHeight,
-          emptyRenderer = _this$props12.emptyRenderer;
+      var _this$props11 = this.props,
+          data = _this$props11.data,
+          frozenData = _this$props11.frozenData,
+          footerHeight = _this$props11.footerHeight,
+          emptyRenderer = _this$props11.emptyRenderer;
       if (data && data.length || frozenData && frozenData.length) return null;
-      var headerHeight = this.getHeaderHeight();
+
+      var headerHeight = this._getHeaderHeight();
+
       return _react["default"].createElement("div", {
@@ -905,23 +900,24 @@ className: this._prefixClass('empty-layer'),
 
-      var _this$props13 = this.props,
-          columns = _this$props13.columns,
-          children = _this$props13.children,
-          width = _this$props13.width,
-          fixed = _this$props13.fixed,
-          data = _this$props13.data,
-          frozenData = _this$props13.frozenData,
-          expandColumnKey = _this$props13.expandColumnKey,
-          disabled = _this$props13.disabled,
-          className = _this$props13.className,
-          style = _this$props13.style,
-          footerHeight = _this$props13.footerHeight,
-          classPrefix = _this$props13.classPrefix,
-          estimatedRowHeight = _this$props13.estimatedRowHeight;
+      var _this$props12 = this.props,
+          columns = _this$props12.columns,
+          children = _this$props12.children,
+          width = _this$props12.width,
+          fixed = _this$props12.fixed,
+          data = _this$props12.data,
+          frozenData = _this$props12.frozenData,
+          expandColumnKey = _this$props12.expandColumnKey,
+          disabled = _this$props12.disabled,
+          className = _this$props12.className,
+          style = _this$props12.style,
+          footerHeight = _this$props12.footerHeight,
+          classPrefix = _this$props12.classPrefix,
+          estimatedRowHeight = _this$props12.estimatedRowHeight;
 
       this._resetColumnManager(getColumns(columns, children), fixed);
 
-      if (expandColumnKey) {
-        this._data = this._flattenOnKeys(data, this.getExpandedRowKeys(), this.props.rowKey);
-      } else {
-        this._data = data;
+      var _data = expandColumnKey ? this._flattenOnKeys(data, this.getExpandedRowKeys(), this.props.rowKey) : data;
+
+      if (this._data !== _data) {
+        this.resetRowHeightCache();
+        this._data = _data;
       } // should be after `this._data` assigned
@@ -959,6 +955,6 @@
     value: function componentDidUpdate(prevProps, prevState) {
-      var _this$props14 = this.props,
-          data = _this$props14.data,
-          height = _this$props14.height,
-          maxHeight = _this$props14.maxHeight;
+      var _this$props13 = this.props,
+          data = _this$props13.data,
+          height = _this$props13.height,
+          maxHeight = _this$props13.maxHeight;
 
@@ -1011,8 +1007,34 @@ if (data !== prevProps.data) {
     value: function _getRowHeight(rowIndex) {
-      var _this$props15 = this.props,
-          estimatedRowHeight = _this$props15.estimatedRowHeight,
-          rowKey = _this$props15.rowKey;
+      var _this$props14 = this.props,
+          estimatedRowHeight = _this$props14.estimatedRowHeight,
+          rowKey = _this$props14.rowKey;
       return this._rowHeightMap[this._data[rowIndex][rowKey]] || estimatedRowHeight;
     }
   }, {
+    key: "_getIsResetting",
+    value: function _getIsResetting() {
+      return this._isResetting;
+    }
+  }, {
+    key: "_getHeaderHeight",
+    value: function _getHeaderHeight() {
+      var headerHeight = this.props.headerHeight;
+
+      if (Array.isArray(headerHeight)) {
+        return headerHeight.reduce(function (sum, height) {
+          return sum + height;
+        }, 0);
+      }
+
+      return headerHeight;
+    }
+  }, {
+    key: "_getFrozenRowsHeight",
+    value: function _getFrozenRowsHeight() {
+      var _this$props15 = this.props,
+          frozenData = _this$props15.frozenData,
+          rowHeight = _this$props15.rowHeight;
+      return frozenData.length * rowHeight;
+    }
+  }, {
     key: "_getTableHeight",
@@ -1027,5 +1049,8 @@ value: function _getTableHeight() {
       if (maxHeight > 0) {
-        var frozenRowsHeight = this.getFrozenRowsHeight();
+        var frozenRowsHeight = this._getFrozenRowsHeight();
+
         var totalRowsHeight = this.getTotalRowsHeight();
-        var headerHeight = this.getHeaderHeight();
+
+        var headerHeight = this._getHeaderHeight();
+
         var totalHeight = headerHeight + frozenRowsHeight + totalRowsHeight + this._horizontalScrollbarSize;
@@ -1040,3 +1065,3 @@ tableHeight = Math.min(totalHeight, maxHeight - footerHeight);
     value: function _getBodyHeight() {
-      return this._getTableHeight() - this.getHeaderHeight() - this.getFrozenRowsHeight();
+      return this._getTableHeight() - this._getHeaderHeight() - this._getFrozenRowsHeight();
     }
@@ -1050,3 +1075,5 @@ }, {
       if (maxHeight > 0) return tableHeight;
-      var totalHeight = this.getTotalRowsHeight() + this.getHeaderHeight() + this.getFrozenRowsHeight();
+
+      var totalHeight = this.getTotalRowsHeight() + this._getHeaderHeight() + this._getFrozenRowsHeight();
+
       return Math.min(tableHeight, totalHeight);
@@ -1053,0 +1080,0 @@ }

lib/GridTable.js

@@ -119,38 +119,22 @@ "use strict";
   }, {
-    key: "getHeaderHeight",
-    value: function getHeaderHeight() {
-      var headerHeight = this.props.headerHeight;
+    key: "getTotalRowsHeight",
+    value: function getTotalRowsHeight() {
+      var _this$props = this.props,
+          data = _this$props.data,
+          rowHeight = _this$props.rowHeight,
+          estimatedRowHeight = _this$props.estimatedRowHeight;
 
-      if (Array.isArray(headerHeight)) {
-        return headerHeight.reduce(function (sum, height) {
-          return sum + height;
-        }, 0);
+      if (estimatedRowHeight) {
+        return this.innerRef && this.innerRef.clientHeight || data.length * estimatedRowHeight;
       }
 
-      return headerHeight;
+      return data.length * rowHeight;
     }
   }, {
-    key: "getFrozenRowsHeight",
-    value: function getFrozenRowsHeight() {
-      var _this$props = this.props,
-          frozenData = _this$props.frozenData,
-          rowHeight = _this$props.rowHeight;
-      return frozenData.length * rowHeight;
-    }
-  }, {
-    key: "getTotalRowsHeight",
-    value: function getTotalRowsHeight() {
+    key: "renderRow",
+    value: function renderRow(args) {
       var _this$props2 = this.props,
           data = _this$props2.data,
-          rowHeight = _this$props2.rowHeight,
-          estimatedRowHeight = _this$props2.estimatedRowHeight;
-      return this.innerRef && this.innerRef.clientHeight || data.length * (estimatedRowHeight || rowHeight);
-    }
-  }, {
-    key: "renderRow",
-    value: function renderRow(args) {
-      var _this$props3 = this.props,
-          data = _this$props3.data,
-          columns = _this$props3.columns,
-          rowRenderer = _this$props3.rowRenderer;
+          columns = _this$props2.columns,
+          rowRenderer = _this$props2.rowRenderer;
       var rowData = data[args.rowIndex];
@@ -165,25 +149,27 @@ return rowRenderer(_objectSpread({}, args, {
     value: function render() {
-      var _this$props4 = this.props,
-          containerStyle = _this$props4.containerStyle,
-          classPrefix = _this$props4.classPrefix,
-          className = _this$props4.className,
-          data = _this$props4.data,
-          frozenData = _this$props4.frozenData,
-          width = _this$props4.width,
-          height = _this$props4.height,
-          rowHeight = _this$props4.rowHeight,
-          estimatedRowHeight = _this$props4.estimatedRowHeight,
-          getRowHeight = _this$props4.getRowHeight,
-          headerWidth = _this$props4.headerWidth,
-          bodyWidth = _this$props4.bodyWidth,
-          useIsScrolling = _this$props4.useIsScrolling,
-          onScroll = _this$props4.onScroll,
-          hoveredRowKey = _this$props4.hoveredRowKey,
-          overscanRowCount = _this$props4.overscanRowCount,
-          style = _this$props4.style,
-          onScrollbarPresenceChange = _this$props4.onScrollbarPresenceChange,
-          rest = (0, _objectWithoutProperties2["default"])(_this$props4, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "estimatedRowHeight", "getRowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "hoveredRowKey", "overscanRowCount", "style", "onScrollbarPresenceChange"]);
-      var headerHeight = this.getHeaderHeight();
-      var frozenRowsHeight = this.getFrozenRowsHeight();
+      var _this$props3 = this.props,
+          containerStyle = _this$props3.containerStyle,
+          classPrefix = _this$props3.classPrefix,
+          className = _this$props3.className,
+          data = _this$props3.data,
+          frozenData = _this$props3.frozenData,
+          width = _this$props3.width,
+          height = _this$props3.height,
+          rowHeight = _this$props3.rowHeight,
+          estimatedRowHeight = _this$props3.estimatedRowHeight,
+          getRowHeight = _this$props3.getRowHeight,
+          headerWidth = _this$props3.headerWidth,
+          bodyWidth = _this$props3.bodyWidth,
+          useIsScrolling = _this$props3.useIsScrolling,
+          onScroll = _this$props3.onScroll,
+          hoveredRowKey = _this$props3.hoveredRowKey,
+          overscanRowCount = _this$props3.overscanRowCount,
+          style = _this$props3.style,
+          onScrollbarPresenceChange = _this$props3.onScrollbarPresenceChange,
+          rest = (0, _objectWithoutProperties2["default"])(_this$props3, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "estimatedRowHeight", "getRowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "hoveredRowKey", "overscanRowCount", "style", "onScrollbarPresenceChange"]);
+
+      var headerHeight = this._getHeaderHeight();
+
       var frozenRowCount = frozenData.length;
+      var frozenRowsHeight = rowHeight * frozenRowCount;
       var cls = (0, _classnames["default"])("".concat(classPrefix, "__table"), className);
@@ -254,8 +240,21 @@ var containerProps = containerStyle ? {
       var rowIndex = _ref.rowIndex;
-      var _this$props5 = this.props,
-          data = _this$props5.data,
-          rowKey = _this$props5.rowKey;
+      var _this$props4 = this.props,
+          data = _this$props4.data,
+          rowKey = _this$props4.rowKey;
       return data[rowIndex][rowKey];
     }
   }, {
+    key: "_getHeaderHeight",
+    value: function _getHeaderHeight() {
+      var headerHeight = this.props.headerHeight;
+
+      if (Array.isArray(headerHeight)) {
+        return headerHeight.reduce(function (sum, height) {
+          return sum + height;
+        }, 0);
+      }
+
+      return headerHeight;
+    }
+  }, {
     key: "_getBodyWidth",
@@ -262,0 +261,0 @@ value: function _getBodyWidth() {

lib/TableRow.js

@@ -62,3 +62,4 @@ "use strict";
     value: function componentDidUpdate(prevProps, prevState) {
-      if (this.props.estimatedRowHeight && this.props.rowIndex >= 0 && this.props.style === prevProps.style && this.state.measured === prevState.measured && this.state.measured === true) {
+      if (this.props.estimatedRowHeight && this.props.rowIndex >= 0 && // should not re-measure if it's updated after measured and reset
+      !this.props.getIsResetting() && this.state.measured && prevState.measured) {
         this.setState({
@@ -89,6 +90,7 @@ measured: false
           rowKey = _this$props.rowKey,
+          getIsResetting = _this$props.getIsResetting,
           onRowHover = _this$props.onRowHover,
           onRowExpand = _this$props.onRowExpand,
           onRowHeightMeasured = _this$props.onRowHeightMeasured,
-          rest = (0, _objectWithoutProperties2["default"])(_this$props, ["isScrolling", "className", "style", "columns", "rowIndex", "rowData", "expandColumnKey", "depth", "rowEventHandlers", "estimatedRowHeight", "rowRenderer", "cellRenderer", "expandIconRenderer", "tagName", "rowKey", "onRowHover", "onRowExpand", "onRowHeightMeasured"]);
+          rest = (0, _objectWithoutProperties2["default"])(_this$props, ["isScrolling", "className", "style", "columns", "rowIndex", "rowData", "expandColumnKey", "depth", "rowEventHandlers", "estimatedRowHeight", "rowRenderer", "cellRenderer", "expandIconRenderer", "tagName", "rowKey", "getIsResetting", "onRowHover", "onRowExpand", "onRowHeightMeasured"]);
       /* eslint-enable no-unused-vars */
@@ -175,3 +177,3 @@
         }, function () {
-          onRowHeightMeasured(rowKey, height, rowIndex, !columns[0].__placeholder__ && columns[0].frozen);
+          onRowHeightMeasured(rowKey, height, rowIndex, columns[0] && !columns[0].__placeholder__ && columns[0].frozen);
         });
@@ -256,7 +258,8 @@ }
   expandIconRenderer: _propTypes["default"].func,
+  estimatedRowHeight: _propTypes["default"].number,
+  getIsResetting: _propTypes["default"].func,
   onRowHover: _propTypes["default"].func,
   onRowExpand: _propTypes["default"].func,
-  tagName: _propTypes["default"].elementType,
-  estimatedRowHeight: _propTypes["default"].number,
-  onRowHeightMeasured: _propTypes["default"].func
+  onRowHeightMeasured: _propTypes["default"].func,
+  tagName: _propTypes["default"].elementType
 };
@@ -263,0 +266,0 @@ var _default = TableRow;

package.json

 {
   "name": "react-base-table",
-  "version": "1.10.1",
+  "version": "1.10.2",
   "description": "a react table component to display large data set with high performance and flexibility",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

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

898200

increased by0.41%

Lines of code

6839

increased by0.35%

No dependency changes