react-base-table - npm Package Compare versions

Comparing version 1.9.4 to 1.10.0

CHANGELOG.md

@@ -5,2 +5,6 @@ # CHANGELOG
 
+## v1.10.0 (2020-06-22)
+
+- feat: add `estimatedRowHeight` to support dynamic row height
+
 ## v1.9.4 (2020-06-22)
@@ -7,0 +11,0 @@

es/BaseTable.js

 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -26,3 +26,3 @@ import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import ColumnManager from './ColumnManager';
-import { renderElement, normalizeColumns, getScrollbarSize as defaultGetScrollbarSize, isObjectEqual, callOrReturn, hasChildren, flattenOnKeys, cloneArray, getValue, throttle, noop } from './utils';
+import { renderElement, normalizeColumns, getScrollbarSize as defaultGetScrollbarSize, isObjectEqual, callOrReturn, hasChildren, flattenOnKeys, cloneArray, getValue, throttle, debounce, noop } from './utils';
 var getColumns = memoize(function (columns, children) {
@@ -92,2 +92,3 @@ return columns || normalizeColumns(children);
     _this._handleColumnSort = _this._handleColumnSort.bind(_assertThisInitialized(_this));
+    _this._handleRowHeightMeasured = _this._handleRowHeightMeasured.bind(_assertThisInitialized(_this));
     _this._getLeftTableContainerStyle = memoize(getContainerStyle);
@@ -102,2 +103,23 @@ _this._getRightTableContainerStyle = memoize(getContainerStyle);
     }, isObjectEqual);
+    _this._resetIndex = null;
+    _this._rowHeightMap = {};
+    _this._rowHeightMapBuffer = {};
+    _this._getRowHeight = _this._getRowHeight.bind(_assertThisInitialized(_this));
+    _this._updateRowHeights = debounce(function () {
+      if (Object.keys(_this._rowHeightMapBuffer).some(function (key) {
+        return _this._rowHeightMapBuffer[key] !== _this._rowHeightMap[key];
+      })) {
+        _this._rowHeightMap = _objectSpread({}, _this._rowHeightMap, {}, _this._rowHeightMapBuffer);
+
+        _this.resetAfterRowIndex(_this._resetIndex, false);
+
+        _this._rowHeightMapBuffer = {};
+        _this._resetIndex = null;
+
+        _this.forceUpdateTable();
+      } else {
+        _this._rowHeightMapBuffer = {};
+        _this._resetIndex = null;
+      }
+    }, 0);
     _this._scroll = {
@@ -157,2 +179,29 @@ scrollLeft: 0,
   /**
+   * Get the height of header
+   */
+  ;
+
+  _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;
+  }
+  /**
+   * 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.
@@ -163,3 +212,6 @@ */
   _proto.getTotalRowsHeight = function getTotalRowsHeight() {
-    return this._data.length * this.props.rowHeight;
+    var _this$props2 = this.props,
+        rowHeight = _this$props2.rowHeight,
+        estimatedRowHeight = _this$props2.estimatedRowHeight;
+    return this.table ? this.table.getTotalRowsHeight() : this._data.length * (estimatedRowHeight || rowHeight);
   }
@@ -189,2 +241,34 @@ /**
   /**
+   * Reset cached row heights after a specific rowIndex, should be used only in dynamic mode(estimatedRowHeight is provided)
+   */
+  ;
+
+  _proto.resetAfterRowIndex = function resetAfterRowIndex(rowIndex, shouldForceUpdate) {
+    if (rowIndex === void 0) {
+      rowIndex = 0;
+    }
+
+    if (shouldForceUpdate === void 0) {
+      shouldForceUpdate = true;
+    }
+
+    this.table && this.table.resetAfterRowIndex(rowIndex, shouldForceUpdate);
+    this.leftTable && this.leftTable.resetAfterRowIndex(rowIndex, shouldForceUpdate);
+    this.rightTable && this.rightTable.resetAfterRowIndex(rowIndex, shouldForceUpdate);
+  }
+  /**
+   * Reset cached column width, should be used only in dynamic mode(estimatedRowHeight is provided)
+   */
+  ;
+
+  _proto.resetColumnWidthCache = function resetColumnWidthCache(shouldForceUpdate) {
+    if (shouldForceUpdate === void 0) {
+      shouldForceUpdate = true;
+    }
+
+    this.table && this.table.resetAfterColumnIndex(0, shouldForceUpdate);
+    this.leftTable && this.leftTable.resetAfterColumnIndex(0, shouldForceUpdate);
+    this.rightTable && this.rightTable.resetAfterColumnIndex(0, shouldForceUpdate);
+  }
+  /**
    * Scroll to the specified offset.
@@ -276,6 +360,6 @@ * Useful for animating position changes.
         onExpand = _ref.onExpand;
-    var _this$props = this.props,
-        rowKey = _this$props.rowKey,
-        expandColumnKey = _this$props.expandColumnKey,
-        expandIconProps = _this$props.expandIconProps;
+    var _this$props3 = this.props,
+        rowKey = _this$props3.rowKey,
+        expandColumnKey = _this$props3.expandColumnKey,
+        expandIconProps = _this$props3.expandIconProps;
     if (!expandColumnKey) return null;
@@ -311,7 +395,8 @@ var expandable = rowIndex >= 0 && hasChildren(rowData);
         style = _ref2.style;
-    var _this$props2 = this.props,
-        rowClassName = _this$props2.rowClassName,
-        rowRenderer = _this$props2.rowRenderer,
-        rowEventHandlers = _this$props2.rowEventHandlers,
-        expandColumnKey = _this$props2.expandColumnKey;
+    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 rowClass = callOrReturn(rowClassName, {
@@ -345,2 +430,4 @@ columns: columns,
       rowRenderer: rowRenderer,
+      // for frozen rows we use fixed rowHeight
+      estimatedRowHeight: rowIndex >= 0 ? estimatedRowHeight : undefined,
       cellRenderer: this.renderRowCell,
@@ -350,3 +437,4 @@ expandIconRenderer: this.renderExpandIcon,
       // for fixed table, we need to sync the hover state across the inner tables
-      onRowHover: this.columnManager.hasFrozenColumns() ? this._handleRowHover : null
+      onRowHover: this.columnManager.hasFrozenColumns() ? this._handleRowHover : null,
+      onRowHeightMeasured: this._handleRowHeightMeasured
     });
@@ -440,5 +528,5 @@
         style = _ref5.style;
-    var _this$props3 = this.props,
-        headerClassName = _this$props3.headerClassName,
-        headerRenderer = _this$props3.headerRenderer;
+    var _this$props5 = this.props,
+        headerClassName = _this$props5.headerClassName,
+        headerRenderer = _this$props5.headerRenderer;
     var headerClass = callOrReturn(headerClassName, {
@@ -489,6 +577,6 @@ columns: columns,
         headerRenderer = column.headerRenderer;
-    var _this$props4 = this.props,
-        sortBy = _this$props4.sortBy,
-        sortState = _this$props4.sortState,
-        headerCellProps = _this$props4.headerCellProps;
+    var _this$props6 = this.props,
+        sortBy = _this$props6.sortBy,
+        sortState = _this$props6.sortState,
+        headerCellProps = _this$props6.headerCellProps;
 
@@ -560,8 +648,9 @@ var TableHeaderCell = this._getComponent('TableHeaderCell');
   _proto.renderMainTable = function renderMainTable() {
-    var _this$props5 = this.props,
-        width = _this$props5.width,
-        headerHeight = _this$props5.headerHeight,
-        rowHeight = _this$props5.rowHeight,
-        fixed = _this$props5.fixed,
-        rest = _objectWithoutPropertiesLoose(_this$props5, ["width", "headerHeight", "rowHeight", "fixed"]);
+    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"]);
 
@@ -587,2 +676,4 @@ var height = this._getTableHeight();
       rowHeight: rowHeight,
+      estimatedRowHeight: estimatedRowHeight,
+      getRowHeight: estimatedRowHeight ? this._getRowHeight : undefined,
       headerWidth: tableWidth + (fixed ? this._verticalScrollbarSize : 0),
@@ -600,7 +691,8 @@ bodyWidth: tableWidth,
 
-    var _this$props6 = this.props,
-        width = _this$props6.width,
-        headerHeight = _this$props6.headerHeight,
-        rowHeight = _this$props6.rowHeight,
-        rest = _objectWithoutPropertiesLoose(_this$props6, ["width", "headerHeight", "rowHeight"]);
+    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"]);
 
@@ -621,2 +713,4 @@ var containerHeight = this._getFrozenContainerHeight();
       rowHeight: rowHeight,
+      estimatedRowHeight: estimatedRowHeight,
+      getRowHeight: estimatedRowHeight ? this._getRowHeight : undefined,
       headerWidth: columnsWidth + offset,
@@ -634,7 +728,8 @@ bodyWidth: columnsWidth + offset,
 
-    var _this$props7 = this.props,
-        width = _this$props7.width,
-        headerHeight = _this$props7.headerHeight,
-        rowHeight = _this$props7.rowHeight,
-        rest = _objectWithoutPropertiesLoose(_this$props7, ["width", "headerHeight", "rowHeight"]);
+    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"]);
 
@@ -655,2 +750,4 @@ var containerHeight = this._getFrozenContainerHeight();
       rowHeight: rowHeight,
+      estimatedRowHeight: estimatedRowHeight,
+      getRowHeight: estimatedRowHeight ? this._getRowHeight : undefined,
       headerWidth: columnsWidth + scrollbarWidth,
@@ -666,5 +763,5 @@ bodyWidth: columnsWidth,
   _proto.renderResizingLine = function renderResizingLine() {
-    var _this$props8 = this.props,
-        width = _this$props8.width,
-        fixed = _this$props8.fixed;
+    var _this$props10 = this.props,
+        width = _this$props10.width,
+        fixed = _this$props10.fixed;
     var resizingKey = this.state.resizingKey;
@@ -705,5 +802,5 @@ if (!fixed || !resizingKey) return null;
   _proto.renderFooter = function renderFooter() {
-    var _this$props9 = this.props,
-        footerHeight = _this$props9.footerHeight,
-        footerRenderer = _this$props9.footerRenderer;
+    var _this$props11 = this.props,
+        footerHeight = _this$props11.footerHeight,
+        footerRenderer = _this$props11.footerRenderer;
     if (footerHeight === 0) return null;
@@ -719,11 +816,9 @@ return React.createElement("div", {
   _proto.renderEmptyLayer = function renderEmptyLayer() {
-    var _this$props10 = this.props,
-        data = _this$props10.data,
-        frozenData = _this$props10.frozenData,
-        footerHeight = _this$props10.footerHeight,
-        emptyRenderer = _this$props10.emptyRenderer;
+    var _this$props12 = this.props,
+        data = _this$props12.data,
+        frozenData = _this$props12.frozenData,
+        footerHeight = _this$props12.footerHeight,
+        emptyRenderer = _this$props12.emptyRenderer;
     if (data && data.length || frozenData && frozenData.length) return null;
-
-    var headerHeight = this._getHeaderHeight();
-
+    var headerHeight = this.getHeaderHeight();
     return React.createElement("div", {
@@ -748,15 +843,16 @@ className: this._prefixClass('empty-layer'),
 
-    var _this$props11 = this.props,
-        columns = _this$props11.columns,
-        children = _this$props11.children,
-        width = _this$props11.width,
-        fixed = _this$props11.fixed,
-        data = _this$props11.data,
-        frozenData = _this$props11.frozenData,
-        expandColumnKey = _this$props11.expandColumnKey,
-        disabled = _this$props11.disabled,
-        className = _this$props11.className,
-        style = _this$props11.style,
-        footerHeight = _this$props11.footerHeight,
-        classPrefix = _this$props11.classPrefix;
+    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;
 
@@ -780,3 +876,3 @@ this._resetColumnManager(getColumns(columns, children), fixed);
 
-    var cls = cn(classPrefix, className, (_cn6 = {}, _cn6[classPrefix + "--fixed"] = fixed, _cn6[classPrefix + "--expandable"] = !!expandColumnKey, _cn6[classPrefix + "--empty"] = data.length === 0, _cn6[classPrefix + "--has-frozen-rows"] = frozenData.length > 0, _cn6[classPrefix + "--has-frozen-columns"] = this.columnManager.hasFrozenColumns(), _cn6[classPrefix + "--disabled"] = disabled, _cn6));
+    var cls = cn(classPrefix, className, (_cn6 = {}, _cn6[classPrefix + "--fixed"] = fixed, _cn6[classPrefix + "--expandable"] = !!expandColumnKey, _cn6[classPrefix + "--empty"] = data.length === 0, _cn6[classPrefix + "--has-frozen-rows"] = frozenData.length > 0, _cn6[classPrefix + "--has-frozen-columns"] = this.columnManager.hasFrozenColumns(), _cn6[classPrefix + "--disabled"] = disabled, _cn6[classPrefix + "--dynamic"] = estimatedRowHeight > 0, _cn6));
     return React.createElement("div", {
@@ -800,6 +896,6 @@ ref: this._setContainerRef,
   _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    var _this$props12 = this.props,
-        data = _this$props12.data,
-        height = _this$props12.height,
-        maxHeight = _this$props12.maxHeight;
+    var _this$props14 = this.props,
+        data = _this$props14.data,
+        height = _this$props14.height,
+        maxHeight = _this$props14.maxHeight;
 
@@ -841,37 +937,23 @@ if (data !== prevProps.data) {
     return DEFAULT_COMPONENTS[name];
-  };
+  } // for dynamic row height
+  ;
 
-  _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._getRowHeight = function _getRowHeight(rowIndex) {
+    var _this$props15 = this.props,
+        estimatedRowHeight = _this$props15.estimatedRowHeight,
+        rowKey = _this$props15.rowKey;
+    return this._rowHeightMap[this._data[rowIndex][rowKey]] || estimatedRowHeight;
   };
 
-  _proto._getFrozenRowsHeight = function _getFrozenRowsHeight() {
-    var _this$props13 = this.props,
-        frozenData = _this$props13.frozenData,
-        rowHeight = _this$props13.rowHeight;
-    return frozenData.length * rowHeight;
-  };
-
   _proto._getTableHeight = function _getTableHeight() {
-    var _this$props14 = this.props,
-        height = _this$props14.height,
-        maxHeight = _this$props14.maxHeight,
-        footerHeight = _this$props14.footerHeight;
+    var _this$props16 = this.props,
+        height = _this$props16.height,
+        maxHeight = _this$props16.maxHeight,
+        footerHeight = _this$props16.footerHeight;
     var tableHeight = height - footerHeight;
 
     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;
@@ -885,3 +967,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();
   };
@@ -894,5 +976,3 @@
     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);
@@ -902,5 +982,5 @@ };
   _proto._calcScrollbarSizes = function _calcScrollbarSizes() {
-    var _this$props15 = this.props,
-        fixed = _this$props15.fixed,
-        width = _this$props15.width;
+    var _this$props17 = this.props,
+        fixed = _this$props17.fixed,
+        width = _this$props17.width;
     var scrollbarSize = this.state.scrollbarSize;
@@ -954,5 +1034,5 @@ var totalRowsHeight = this.getTotalRowsHeight();
   _proto._maybeCallOnEndReached = function _maybeCallOnEndReached() {
-    var _this$props16 = this.props,
-        onEndReached = _this$props16.onEndReached,
-        onEndReachedThreshold = _this$props16.onEndReachedThreshold;
+    var _this$props18 = this.props,
+        onEndReached = _this$props18.onEndReached,
+        onEndReachedThreshold = _this$props18.onEndReachedThreshold;
     var scrollTop = this._scroll.scrollTop;
@@ -985,3 +1065,3 @@ var scrollHeight = this.getTotalRowsHeight();
     var lastScrollTop = this._scroll.scrollTop;
-    this.scrollToTop(scrollTop);
+    if (scrollTop !== lastScrollTop) this.scrollToTop(scrollTop);
     if (scrollTop > lastScrollTop) this._maybeCallOnEndReached();
@@ -1047,2 +1127,7 @@ };
     });
+
+    if (this.props.estimatedRowHeight && this.props.fixed) {
+      this.resetColumnWidthCache(false);
+    }
+
     var column = this.columnManager.getColumn(key);
@@ -1080,6 +1165,6 @@ this.props.onColumnResize({
     var key = event.currentTarget.dataset.key;
-    var _this$props17 = this.props,
-        sortBy = _this$props17.sortBy,
-        sortState = _this$props17.sortState,
-        onColumnSort = _this$props17.onColumnSort;
+    var _this$props19 = this.props,
+        sortBy = _this$props19.sortBy,
+        sortState = _this$props19.sortState,
+        onColumnSort = _this$props19.onColumnSort;
     var order = SortOrder.ASC;
@@ -1101,2 +1186,12 @@
 
+  _proto._handleRowHeightMeasured = function _handleRowHeightMeasured(rowKey, size, rowIndex) {
+    if (this._resetIndex === null) this._resetIndex = rowIndex;else if (this._resetIndex > rowIndex) this._resetIndex = rowIndex;
+
+    if (!this._rowHeightMapBuffer[rowKey] || this._rowHeightMapBuffer[rowKey] < size) {
+      this._rowHeightMapBuffer[rowKey] = size;
+    }
+
+    this._updateRowHeights();
+  };
+
   return BaseTable;
@@ -1189,7 +1284,12 @@ }(React.PureComponent);
   /**
-   * The height of each table row
+   * The height of each table row, will be only used by frozen rows if `estimatedRowHeight` is set
    */
-  rowHeight: PropTypes.number.isRequired,
+  rowHeight: PropTypes.number,
 
   /**
+   * Estimated row height, the real height will be measure dynamically according to the content
+   */
+  estimatedRowHeight: PropTypes.number,
+
+  /**
    * The height of the table header, set to 0 to hide the header, could be an array to render multi headers.
@@ -1196,0 +1296,0 @@ */

es/GridTable.js

@@ -14,3 +14,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import cn from 'classnames';
-import { FixedSizeGrid as Grid } from 'react-window';
+import { FixedSizeGrid, VariableSizeGrid } from 'react-window';
 import Header from './TableHeader';
@@ -32,3 +32,5 @@ /**
     _this._setBodyRef = _this._setBodyRef.bind(_assertThisInitialized(_this));
+    _this._setInnerRef = _this._setInnerRef.bind(_assertThisInitialized(_this));
     _this._itemKey = _this._itemKey.bind(_assertThisInitialized(_this));
+    _this._getBodyWidth = _this._getBodyWidth.bind(_assertThisInitialized(_this));
     _this._handleItemsRendered = _this._handleItemsRendered.bind(_assertThisInitialized(_this));
@@ -41,2 +43,20 @@ _this.renderRow = _this.renderRow.bind(_assertThisInitialized(_this));
 
+  _proto.resetAfterRowIndex = function resetAfterRowIndex(rowIndex, shouldForceUpdate) {
+    if (rowIndex === void 0) {
+      rowIndex = 0;
+    }
+
+    if (!this.props.estimatedRowHeight) return;
+    this.bodyRef && this.bodyRef.resetAfterRowIndex(rowIndex, shouldForceUpdate);
+  };
+
+  _proto.resetAfterColumnIndex = function resetAfterColumnIndex(columnIndex, shouldForceUpdate) {
+    if (columnIndex === void 0) {
+      columnIndex = 0;
+    }
+
+    if (!this.props.estimatedRowHeight) return;
+    this.bodyRef && this.bodyRef.resetAfterColumnIndex(columnIndex, shouldForceUpdate);
+  };
+
   _proto.forceUpdateTable = function forceUpdateTable() {
@@ -80,7 +100,34 @@ this.headerRef && this.headerRef.forceUpdate();
 
+  _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$props = this.props,
+        frozenData = _this$props.frozenData,
+        rowHeight = _this$props.rowHeight;
+    return frozenData.length * rowHeight;
+  };
+
+  _proto.getTotalRowsHeight = function getTotalRowsHeight() {
+    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$props = this.props,
-        data = _this$props.data,
-        columns = _this$props.columns,
-        rowRenderer = _this$props.rowRenderer;
+    var _this$props3 = this.props,
+        data = _this$props3.data,
+        columns = _this$props3.columns,
+        rowRenderer = _this$props3.rowRenderer;
     var rowData = data[args.rowIndex];
@@ -94,25 +141,26 @@ return rowRenderer(_objectSpread({}, args, {
   _proto.render = function render() {
-    var _this$props2 = this.props,
-        containerStyle = _this$props2.containerStyle,
-        classPrefix = _this$props2.classPrefix,
-        className = _this$props2.className,
-        data = _this$props2.data,
-        frozenData = _this$props2.frozenData,
-        width = _this$props2.width,
-        height = _this$props2.height,
-        rowHeight = _this$props2.rowHeight,
-        headerWidth = _this$props2.headerWidth,
-        bodyWidth = _this$props2.bodyWidth,
-        useIsScrolling = _this$props2.useIsScrolling,
-        onScroll = _this$props2.onScroll,
-        hoveredRowKey = _this$props2.hoveredRowKey,
-        overscanRowCount = _this$props2.overscanRowCount,
-        style = _this$props2.style,
-        onScrollbarPresenceChange = _this$props2.onScrollbarPresenceChange,
-        rest = _objectWithoutPropertiesLoose(_this$props2, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "hoveredRowKey", "overscanRowCount", "style", "onScrollbarPresenceChange"]);
+    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 headerHeight = this._getHeaderHeight();
-
+    var headerHeight = this.getHeaderHeight();
+    var frozenRowsHeight = this.getFrozenRowsHeight();
     var frozenRowCount = frozenData.length;
-    var frozenRowsHeight = rowHeight * frozenRowCount;
     var cls = cn(classPrefix + "__table", className);
@@ -122,2 +170,3 @@ var containerProps = containerStyle ? {
     } : null;
+    var Grid = estimatedRowHeight ? VariableSizeGrid : FixedSizeGrid;
     return React.createElement("div", _extends({
@@ -129,11 +178,13 @@ role: "table",
       ref: this._setBodyRef,
+      innerRef: this._setInnerRef,
+      itemKey: this._itemKey,
       data: data,
-      itemKey: this._itemKey,
       frozenData: frozenData,
       width: width,
       height: Math.max(height - headerHeight - frozenRowsHeight, 0),
-      rowHeight: rowHeight,
+      rowHeight: estimatedRowHeight ? getRowHeight : rowHeight,
+      estimatedRowHeight: estimatedRowHeight,
       rowCount: data.length,
       overscanRowCount: overscanRowCount,
-      columnWidth: bodyWidth,
+      columnWidth: estimatedRowHeight ? this._getBodyWidth : bodyWidth,
       columnCount: 1,
@@ -172,20 +223,16 @@ overscanColumnCount: 0,
 
+  _proto._setInnerRef = function _setInnerRef(ref) {
+    this.innerRef = ref;
+  };
+
   _proto._itemKey = function _itemKey(_ref) {
     var rowIndex = _ref.rowIndex;
-    var _this$props3 = this.props,
-        data = _this$props3.data,
-        rowKey = _this$props3.rowKey;
+    var _this$props5 = this.props,
+        data = _this$props5.data,
+        rowKey = _this$props5.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() {
+    return this.props.bodyWidth;
   };
@@ -219,2 +266,4 @@
   rowHeight: PropTypes.number.isRequired,
+  estimatedRowHeight: PropTypes.number,
+  getRowHeight: PropTypes.func,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -221,0 +270,0 @@ data: PropTypes.array.isRequired,

es/TableRow.js

@@ -21,3 +21,8 @@ import _extends from "@babel/runtime/helpers/extends";
     _this = _React$PureComponent.call(this, props) || this;
+    _this.state = {
+      measured: false
+    };
+    _this._setRef = _this._setRef.bind(_assertThisInitialized(_this));
     _this._handleExpand = _this._handleExpand.bind(_assertThisInitialized(_this));
+    _this._measureHeight = _this._measureHeight.bind(_assertThisInitialized(_this));
     return _this;
@@ -28,2 +33,14 @@ }
 
+  _proto.componentDidMount = function componentDidMount() {
+    this.props.estimatedRowHeight && this.props.rowIndex >= 0 && this._measureHeight();
+  };
+
+  _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) {
+      this.setState({
+        measured: false
+      }, this._measureHeight);
+    }
+  };
+
   _proto.render = function render() {
@@ -41,2 +58,3 @@ /* eslint-disable no-unused-vars */
         rowEventHandlers = _this$props.rowEventHandlers,
+        estimatedRowHeight = _this$props.estimatedRowHeight,
         rowRenderer = _this$props.rowRenderer,
@@ -49,3 +67,4 @@ cellRenderer = _this$props.cellRenderer,
         onRowExpand = _this$props.onRowExpand,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["isScrolling", "className", "style", "columns", "rowIndex", "rowData", "expandColumnKey", "depth", "rowEventHandlers", "rowRenderer", "cellRenderer", "expandIconRenderer", "tagName", "rowKey", "onRowHover", "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"]);
     /* eslint-enable no-unused-vars */
@@ -85,2 +104,13 @@
 
+    if (estimatedRowHeight && rowIndex >= 0) {
+      var height = style.height,
+          otherStyles = _objectWithoutPropertiesLoose(style, ["height"]);
+
+      return React.createElement(Tag, _extends({}, rest, {
+        ref: this._setRef,
+        className: className,
+        style: this.state.measured ? style : otherStyles
+      }, this.state.measured && eventHandlers), cells);
+    }
+
     return React.createElement(Tag, _extends({}, rest, {
@@ -92,2 +122,6 @@ className: className,
 
+  _proto._setRef = function _setRef(ref) {
+    this.ref = ref;
+  };
+
   _proto._handleExpand = function _handleExpand(expanded) {
@@ -107,2 +141,17 @@ var _this$props2 = this.props,
 
+  _proto._measureHeight = function _measureHeight() {
+    if (this.ref) {
+      var _this$props3 = this.props,
+          rowKey = _this$props3.rowKey,
+          onRowHeightMeasured = _this$props3.onRowHeightMeasured,
+          rowIndex = _this$props3.rowIndex;
+      var height = this.ref.getBoundingClientRect().height;
+      this.setState({
+        measured: true
+      }, function () {
+        onRowHeightMeasured(rowKey, height, rowIndex);
+      });
+    }
+  };
+
   _proto._getEventHandlers = function _getEventHandlers(handlers) {
@@ -113,7 +162,7 @@ if (handlers === void 0) {
 
-    var _this$props3 = this.props,
-        rowData = _this$props3.rowData,
-        rowIndex = _this$props3.rowIndex,
-        rowKey = _this$props3.rowKey,
-        onRowHover = _this$props3.onRowHover;
+    var _this$props4 = this.props,
+        rowData = _this$props4.rowData,
+        rowIndex = _this$props4.rowIndex,
+        rowKey = _this$props4.rowKey,
+        onRowHover = _this$props4.onRowHover;
     var eventHandlers = {};
@@ -188,5 +237,7 @@ Object.keys(handlers).forEach(function (eventKey) {
   onRowExpand: PropTypes.func,
-  tagName: PropTypes.elementType
+  tagName: PropTypes.elementType,
+  estimatedRowHeight: PropTypes.number,
+  onRowHeightMeasured: PropTypes.func
 };
 export default TableRow;
 //# sourceMappingURL=TableRow.js.map

es/utils.js

@@ -207,5 +207,25 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
   return object;
-} // copied from https://30secondsofcode.org/function#throttle
+} // copied from https://www.30secondsofcode.org/js/s/debounce
 
-export function throttle(fn, wait) {
+export var debounce = function debounce(fn, ms) {
+  if (ms === void 0) {
+    ms = 0;
+  }
+
+  var timeoutId;
+  return function () {
+    var _this = this;
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(function () {
+      return fn.apply(_this, args);
+    }, ms);
+  };
+}; // copied from https://www.30secondsofcode.org/js/s/throttle
+
+export var throttle = function throttle(fn, wait) {
   var inThrottle, lastFn, lastTime;
@@ -230,3 +250,3 @@ return function () {
   };
-} // copied from https://github.com/react-bootstrap/dom-helpers
+}; // copied from https://github.com/react-bootstrap/dom-helpers
 
@@ -233,0 +253,0 @@ var scrollbarSize;

lib/BaseTable.js

@@ -14,6 +14,6 @@ "use strict";
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -132,2 +132,3 @@
     _this._handleColumnSort = _this._handleColumnSort.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._handleRowHeightMeasured = _this._handleRowHeightMeasured.bind((0, _assertThisInitialized2["default"])(_this));
     _this._getLeftTableContainerStyle = (0, _memoizeOne["default"])(getContainerStyle);
@@ -142,2 +143,23 @@ _this._getRightTableContainerStyle = (0, _memoizeOne["default"])(getContainerStyle);
     }, _utils.isObjectEqual);
+    _this._resetIndex = null;
+    _this._rowHeightMap = {};
+    _this._rowHeightMapBuffer = {};
+    _this._getRowHeight = _this._getRowHeight.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._updateRowHeights = (0, _utils.debounce)(function () {
+      if (Object.keys(_this._rowHeightMapBuffer).some(function (key) {
+        return _this._rowHeightMapBuffer[key] !== _this._rowHeightMap[key];
+      })) {
+        _this._rowHeightMap = _objectSpread({}, _this._rowHeightMap, {}, _this._rowHeightMapBuffer);
+
+        _this.resetAfterRowIndex(_this._resetIndex, false);
+
+        _this._rowHeightMapBuffer = {};
+        _this._resetIndex = null;
+
+        _this.forceUpdateTable();
+      } else {
+        _this._rowHeightMapBuffer = {};
+        _this._resetIndex = null;
+      }
+    }, 0);
     _this._scroll = {
@@ -200,2 +222,31 @@ scrollLeft: 0,
     /**
+     * Get the height of header
+     */
+
+  }, {
+    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;
+    }
+    /**
+     * 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.
@@ -207,3 +258,6 @@ */
     value: function getTotalRowsHeight() {
-      return this._data.length * this.props.rowHeight;
+      var _this$props2 = this.props,
+          rowHeight = _this$props2.rowHeight,
+          estimatedRowHeight = _this$props2.estimatedRowHeight;
+      return this.table ? this.table.getTotalRowsHeight() : this._data.length * (estimatedRowHeight || rowHeight);
     }
@@ -235,2 +289,27 @@ /**
     /**
+     * Reset cached row heights after a specific rowIndex, should be used only in dynamic mode(estimatedRowHeight is provided)
+     */
+
+  }, {
+    key: "resetAfterRowIndex",
+    value: function resetAfterRowIndex() {
+      var rowIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var shouldForceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+      this.table && this.table.resetAfterRowIndex(rowIndex, shouldForceUpdate);
+      this.leftTable && this.leftTable.resetAfterRowIndex(rowIndex, shouldForceUpdate);
+      this.rightTable && this.rightTable.resetAfterRowIndex(rowIndex, shouldForceUpdate);
+    }
+    /**
+     * Reset cached column width, should be used only in dynamic mode(estimatedRowHeight is provided)
+     */
+
+  }, {
+    key: "resetColumnWidthCache",
+    value: function resetColumnWidthCache() {
+      var shouldForceUpdate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+      this.table && this.table.resetAfterColumnIndex(0, shouldForceUpdate);
+      this.leftTable && this.leftTable.resetAfterColumnIndex(0, shouldForceUpdate);
+      this.rightTable && this.rightTable.resetAfterColumnIndex(0, shouldForceUpdate);
+    }
+    /**
      * Scroll to the specified offset.
@@ -322,6 +401,6 @@ * Useful for animating position changes.
           onExpand = _ref.onExpand;
-      var _this$props = this.props,
-          rowKey = _this$props.rowKey,
-          expandColumnKey = _this$props.expandColumnKey,
-          expandIconProps = _this$props.expandIconProps;
+      var _this$props3 = this.props,
+          rowKey = _this$props3.rowKey,
+          expandColumnKey = _this$props3.expandColumnKey,
+          expandIconProps = _this$props3.expandIconProps;
       if (!expandColumnKey) return null;
@@ -358,7 +437,8 @@ var expandable = rowIndex >= 0 && (0, _utils.hasChildren)(rowData);
           style = _ref2.style;
-      var _this$props2 = this.props,
-          rowClassName = _this$props2.rowClassName,
-          rowRenderer = _this$props2.rowRenderer,
-          rowEventHandlers = _this$props2.rowEventHandlers,
-          expandColumnKey = _this$props2.expandColumnKey;
+      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 rowClass = (0, _utils.callOrReturn)(rowClassName, {
@@ -392,2 +472,4 @@ columns: columns,
         rowRenderer: rowRenderer,
+        // for frozen rows we use fixed rowHeight
+        estimatedRowHeight: rowIndex >= 0 ? estimatedRowHeight : undefined,
         cellRenderer: this.renderRowCell,
@@ -397,3 +479,4 @@ expandIconRenderer: this.renderExpandIcon,
         // for fixed table, we need to sync the hover state across the inner tables
-        onRowHover: this.columnManager.hasFrozenColumns() ? this._handleRowHover : null
+        onRowHover: this.columnManager.hasFrozenColumns() ? this._handleRowHover : null,
+        onRowHeightMeasured: this._handleRowHeightMeasured
       });
@@ -489,5 +572,5 @@
           style = _ref5.style;
-      var _this$props3 = this.props,
-          headerClassName = _this$props3.headerClassName,
-          headerRenderer = _this$props3.headerRenderer;
+      var _this$props5 = this.props,
+          headerClassName = _this$props5.headerClassName,
+          headerRenderer = _this$props5.headerRenderer;
       var headerClass = (0, _utils.callOrReturn)(headerClassName, {
@@ -539,6 +622,6 @@ columns: columns,
           headerRenderer = column.headerRenderer;
-      var _this$props4 = this.props,
-          sortBy = _this$props4.sortBy,
-          sortState = _this$props4.sortState,
-          headerCellProps = _this$props4.headerCellProps;
+      var _this$props6 = this.props,
+          sortBy = _this$props6.sortBy,
+          sortState = _this$props6.sortState,
+          headerCellProps = _this$props6.headerCellProps;
 
@@ -611,8 +694,9 @@ var TableHeaderCell = this._getComponent('TableHeaderCell');
     value: function renderMainTable() {
-      var _this$props5 = this.props,
-          width = _this$props5.width,
-          headerHeight = _this$props5.headerHeight,
-          rowHeight = _this$props5.rowHeight,
-          fixed = _this$props5.fixed,
-          rest = (0, _objectWithoutProperties2["default"])(_this$props5, ["width", "headerHeight", "rowHeight", "fixed"]);
+      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"]);
 
@@ -638,2 +722,4 @@ var height = this._getTableHeight();
         rowHeight: rowHeight,
+        estimatedRowHeight: estimatedRowHeight,
+        getRowHeight: estimatedRowHeight ? this._getRowHeight : undefined,
         headerWidth: tableWidth + (fixed ? this._verticalScrollbarSize : 0),
@@ -651,7 +737,8 @@ bodyWidth: tableWidth,
       if (!this.columnManager.hasLeftFrozenColumns()) return null;
-      var _this$props6 = this.props,
-          width = _this$props6.width,
-          headerHeight = _this$props6.headerHeight,
-          rowHeight = _this$props6.rowHeight,
-          rest = (0, _objectWithoutProperties2["default"])(_this$props6, ["width", "headerHeight", "rowHeight"]);
+      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"]);
 
@@ -672,2 +759,4 @@ var containerHeight = this._getFrozenContainerHeight();
         rowHeight: rowHeight,
+        estimatedRowHeight: estimatedRowHeight,
+        getRowHeight: estimatedRowHeight ? this._getRowHeight : undefined,
         headerWidth: columnsWidth + offset,
@@ -685,7 +774,8 @@ bodyWidth: columnsWidth + offset,
       if (!this.columnManager.hasRightFrozenColumns()) return null;
-      var _this$props7 = this.props,
-          width = _this$props7.width,
-          headerHeight = _this$props7.headerHeight,
-          rowHeight = _this$props7.rowHeight,
-          rest = (0, _objectWithoutProperties2["default"])(_this$props7, ["width", "headerHeight", "rowHeight"]);
+      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"]);
 
@@ -706,2 +796,4 @@ var containerHeight = this._getFrozenContainerHeight();
         rowHeight: rowHeight,
+        estimatedRowHeight: estimatedRowHeight,
+        getRowHeight: estimatedRowHeight ? this._getRowHeight : undefined,
         headerWidth: columnsWidth + scrollbarWidth,
@@ -718,5 +810,5 @@ bodyWidth: columnsWidth,
     value: function renderResizingLine() {
-      var _this$props8 = this.props,
-          width = _this$props8.width,
-          fixed = _this$props8.fixed;
+      var _this$props10 = this.props,
+          width = _this$props10.width,
+          fixed = _this$props10.fixed;
       var resizingKey = this.state.resizingKey;
@@ -758,5 +850,5 @@ if (!fixed || !resizingKey) return null;
     value: function renderFooter() {
-      var _this$props9 = this.props,
-          footerHeight = _this$props9.footerHeight,
-          footerRenderer = _this$props9.footerRenderer;
+      var _this$props11 = this.props,
+          footerHeight = _this$props11.footerHeight,
+          footerRenderer = _this$props11.footerRenderer;
       if (footerHeight === 0) return null;
@@ -773,11 +865,9 @@ return _react["default"].createElement("div", {
     value: function renderEmptyLayer() {
-      var _this$props10 = this.props,
-          data = _this$props10.data,
-          frozenData = _this$props10.frozenData,
-          footerHeight = _this$props10.footerHeight,
-          emptyRenderer = _this$props10.emptyRenderer;
+      var _this$props12 = this.props,
+          data = _this$props12.data,
+          frozenData = _this$props12.frozenData,
+          footerHeight = _this$props12.footerHeight,
+          emptyRenderer = _this$props12.emptyRenderer;
       if (data && data.length || frozenData && frozenData.length) return null;
-
-      var headerHeight = this._getHeaderHeight();
-
+      var headerHeight = this.getHeaderHeight();
       return _react["default"].createElement("div", {
@@ -804,15 +894,16 @@ className: this._prefixClass('empty-layer'),
 
-      var _this$props11 = this.props,
-          columns = _this$props11.columns,
-          children = _this$props11.children,
-          width = _this$props11.width,
-          fixed = _this$props11.fixed,
-          data = _this$props11.data,
-          frozenData = _this$props11.frozenData,
-          expandColumnKey = _this$props11.expandColumnKey,
-          disabled = _this$props11.disabled,
-          className = _this$props11.className,
-          style = _this$props11.style,
-          footerHeight = _this$props11.footerHeight,
-          classPrefix = _this$props11.classPrefix;
+      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;
 
@@ -836,3 +927,3 @@ this._resetColumnManager(getColumns(columns, children), fixed);
 
-      var cls = (0, _classnames["default"])(classPrefix, className, (_cn6 = {}, (0, _defineProperty2["default"])(_cn6, "".concat(classPrefix, "--fixed"), fixed), (0, _defineProperty2["default"])(_cn6, "".concat(classPrefix, "--expandable"), !!expandColumnKey), (0, _defineProperty2["default"])(_cn6, "".concat(classPrefix, "--empty"), data.length === 0), (0, _defineProperty2["default"])(_cn6, "".concat(classPrefix, "--has-frozen-rows"), frozenData.length > 0), (0, _defineProperty2["default"])(_cn6, "".concat(classPrefix, "--has-frozen-columns"), this.columnManager.hasFrozenColumns()), (0, _defineProperty2["default"])(_cn6, "".concat(classPrefix, "--disabled"), disabled), _cn6));
+      var cls = (0, _classnames["default"])(classPrefix, className, (_cn6 = {}, (0, _defineProperty2["default"])(_cn6, "".concat(classPrefix, "--fixed"), fixed), (0, _defineProperty2["default"])(_cn6, "".concat(classPrefix, "--expandable"), !!expandColumnKey), (0, _defineProperty2["default"])(_cn6, "".concat(classPrefix, "--empty"), data.length === 0), (0, _defineProperty2["default"])(_cn6, "".concat(classPrefix, "--has-frozen-rows"), frozenData.length > 0), (0, _defineProperty2["default"])(_cn6, "".concat(classPrefix, "--has-frozen-columns"), this.columnManager.hasFrozenColumns()), (0, _defineProperty2["default"])(_cn6, "".concat(classPrefix, "--disabled"), disabled), (0, _defineProperty2["default"])(_cn6, "".concat(classPrefix, "--dynamic"), estimatedRowHeight > 0), _cn6));
       return _react["default"].createElement("div", {
@@ -858,6 +949,6 @@ ref: this._setContainerRef,
     value: function componentDidUpdate(prevProps, prevState) {
-      var _this$props12 = this.props,
-          data = _this$props12.data,
-          height = _this$props12.height,
-          maxHeight = _this$props12.maxHeight;
+      var _this$props14 = this.props,
+          data = _this$props14.data,
+          height = _this$props14.height,
+          maxHeight = _this$props14.maxHeight;
 
@@ -905,23 +996,11 @@ if (data !== prevProps.data) {
       return DEFAULT_COMPONENTS[name];
-    }
-  }, {
-    key: "_getHeaderHeight",
-    value: function _getHeaderHeight() {
-      var headerHeight = this.props.headerHeight;
+    } // for dynamic row height
 
-      if (Array.isArray(headerHeight)) {
-        return headerHeight.reduce(function (sum, height) {
-          return sum + height;
-        }, 0);
-      }
-
-      return headerHeight;
-    }
   }, {
-    key: "_getFrozenRowsHeight",
-    value: function _getFrozenRowsHeight() {
-      var _this$props13 = this.props,
-          frozenData = _this$props13.frozenData,
-          rowHeight = _this$props13.rowHeight;
-      return frozenData.length * rowHeight;
+    key: "_getRowHeight",
+    value: function _getRowHeight(rowIndex) {
+      var _this$props15 = this.props,
+          estimatedRowHeight = _this$props15.estimatedRowHeight,
+          rowKey = _this$props15.rowKey;
+      return this._rowHeightMap[this._data[rowIndex][rowKey]] || estimatedRowHeight;
     }
@@ -931,15 +1010,12 @@ }, {
     value: function _getTableHeight() {
-      var _this$props14 = this.props,
-          height = _this$props14.height,
-          maxHeight = _this$props14.maxHeight,
-          footerHeight = _this$props14.footerHeight;
+      var _this$props16 = this.props,
+          height = _this$props16.height,
+          maxHeight = _this$props16.maxHeight,
+          footerHeight = _this$props16.footerHeight;
       var tableHeight = height - footerHeight;
 
       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;
@@ -954,3 +1030,3 @@ tableHeight = Math.min(totalHeight, maxHeight - footerHeight);
     value: function _getBodyHeight() {
-      return this._getTableHeight() - this._getHeaderHeight() - this._getFrozenRowsHeight();
+      return this._getTableHeight() - this.getHeaderHeight() - this.getFrozenRowsHeight();
     }
@@ -964,5 +1040,3 @@ }, {
       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);
@@ -973,5 +1047,5 @@ }
     value: function _calcScrollbarSizes() {
-      var _this$props15 = this.props,
-          fixed = _this$props15.fixed,
-          width = _this$props15.width;
+      var _this$props17 = this.props,
+          fixed = _this$props17.fixed,
+          width = _this$props17.width;
       var scrollbarSize = this.state.scrollbarSize;
@@ -1027,5 +1101,5 @@ var totalRowsHeight = this.getTotalRowsHeight();
     value: function _maybeCallOnEndReached() {
-      var _this$props16 = this.props,
-          onEndReached = _this$props16.onEndReached,
-          onEndReachedThreshold = _this$props16.onEndReachedThreshold;
+      var _this$props18 = this.props,
+          onEndReached = _this$props18.onEndReached,
+          onEndReachedThreshold = _this$props18.onEndReachedThreshold;
       var scrollTop = this._scroll.scrollTop;
@@ -1060,3 +1134,3 @@ var scrollHeight = this.getTotalRowsHeight();
       var lastScrollTop = this._scroll.scrollTop;
-      this.scrollToTop(scrollTop);
+      if (scrollTop !== lastScrollTop) this.scrollToTop(scrollTop);
       if (scrollTop > lastScrollTop) this._maybeCallOnEndReached();
@@ -1126,2 +1200,7 @@ }
       });
+
+      if (this.props.estimatedRowHeight && this.props.fixed) {
+        this.resetColumnWidthCache(false);
+      }
+
       var column = this.columnManager.getColumn(key);
@@ -1162,6 +1241,6 @@ this.props.onColumnResize({
       var key = event.currentTarget.dataset.key;
-      var _this$props17 = this.props,
-          sortBy = _this$props17.sortBy,
-          sortState = _this$props17.sortState,
-          onColumnSort = _this$props17.onColumnSort;
+      var _this$props19 = this.props,
+          sortBy = _this$props19.sortBy,
+          sortState = _this$props19.sortState,
+          onColumnSort = _this$props19.onColumnSort;
       var order = _SortOrder["default"].ASC;
@@ -1182,2 +1261,13 @@
     }
+  }, {
+    key: "_handleRowHeightMeasured",
+    value: function _handleRowHeightMeasured(rowKey, size, rowIndex) {
+      if (this._resetIndex === null) this._resetIndex = rowIndex;else if (this._resetIndex > rowIndex) this._resetIndex = rowIndex;
+
+      if (!this._rowHeightMapBuffer[rowKey] || this._rowHeightMapBuffer[rowKey] < size) {
+        this._rowHeightMapBuffer[rowKey] = size;
+      }
+
+      this._updateRowHeights();
+    }
   }]);
@@ -1271,7 +1361,12 @@ return BaseTable;
   /**
-   * The height of each table row
+   * The height of each table row, will be only used by frozen rows if `estimatedRowHeight` is set
    */
-  rowHeight: _propTypes["default"].number.isRequired,
+  rowHeight: _propTypes["default"].number,
 
   /**
+   * Estimated row height, the real height will be measure dynamically according to the content
+   */
+  estimatedRowHeight: _propTypes["default"].number,
+
+  /**
    * The height of the table header, set to 0 to hide the header, could be an array to render multi headers.
@@ -1278,0 +1373,0 @@ */

lib/GridTable.js

@@ -57,3 +57,5 @@ "use strict";
     _this._setBodyRef = _this._setBodyRef.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._setInnerRef = _this._setInnerRef.bind((0, _assertThisInitialized2["default"])(_this));
     _this._itemKey = _this._itemKey.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._getBodyWidth = _this._getBodyWidth.bind((0, _assertThisInitialized2["default"])(_this));
     _this._handleItemsRendered = _this._handleItemsRendered.bind((0, _assertThisInitialized2["default"])(_this));
@@ -65,2 +67,18 @@ _this.renderRow = _this.renderRow.bind((0, _assertThisInitialized2["default"])(_this));
   (0, _createClass2["default"])(GridTable, [{
+    key: "resetAfterRowIndex",
+    value: function resetAfterRowIndex() {
+      var rowIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var shouldForceUpdate = arguments.length > 1 ? arguments[1] : undefined;
+      if (!this.props.estimatedRowHeight) return;
+      this.bodyRef && this.bodyRef.resetAfterRowIndex(rowIndex, shouldForceUpdate);
+    }
+  }, {
+    key: "resetAfterColumnIndex",
+    value: function resetAfterColumnIndex() {
+      var columnIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var shouldForceUpdate = arguments.length > 1 ? arguments[1] : undefined;
+      if (!this.props.estimatedRowHeight) return;
+      this.bodyRef && this.bodyRef.resetAfterColumnIndex(columnIndex, shouldForceUpdate);
+    }
+  }, {
     key: "forceUpdateTable",
@@ -103,8 +121,38 @@ value: function forceUpdateTable() {
   }, {
+    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$props = this.props,
+          frozenData = _this$props.frozenData,
+          rowHeight = _this$props.rowHeight;
+      return frozenData.length * rowHeight;
+    }
+  }, {
+    key: "getTotalRowsHeight",
+    value: function getTotalRowsHeight() {
+      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$props = this.props,
-          data = _this$props.data,
-          columns = _this$props.columns,
-          rowRenderer = _this$props.rowRenderer;
+      var _this$props3 = this.props,
+          data = _this$props3.data,
+          columns = _this$props3.columns,
+          rowRenderer = _this$props3.rowRenderer;
       var rowData = data[args.rowIndex];
@@ -119,25 +167,25 @@ return rowRenderer(_objectSpread({}, args, {
     value: function render() {
-      var _this$props2 = this.props,
-          containerStyle = _this$props2.containerStyle,
-          classPrefix = _this$props2.classPrefix,
-          className = _this$props2.className,
-          data = _this$props2.data,
-          frozenData = _this$props2.frozenData,
-          width = _this$props2.width,
-          height = _this$props2.height,
-          rowHeight = _this$props2.rowHeight,
-          headerWidth = _this$props2.headerWidth,
-          bodyWidth = _this$props2.bodyWidth,
-          useIsScrolling = _this$props2.useIsScrolling,
-          onScroll = _this$props2.onScroll,
-          hoveredRowKey = _this$props2.hoveredRowKey,
-          overscanRowCount = _this$props2.overscanRowCount,
-          style = _this$props2.style,
-          onScrollbarPresenceChange = _this$props2.onScrollbarPresenceChange,
-          rest = (0, _objectWithoutProperties2["default"])(_this$props2, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "hoveredRowKey", "overscanRowCount", "style", "onScrollbarPresenceChange"]);
-
-      var headerHeight = this._getHeaderHeight();
-
+      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 frozenRowCount = frozenData.length;
-      var frozenRowsHeight = rowHeight * frozenRowCount;
       var cls = (0, _classnames["default"])("".concat(classPrefix, "__table"), className);
@@ -147,17 +195,20 @@ var containerProps = containerStyle ? {
       } : null;
+      var Grid = estimatedRowHeight ? _reactWindow.VariableSizeGrid : _reactWindow.FixedSizeGrid;
       return _react["default"].createElement("div", (0, _extends2["default"])({
         role: "table",
         className: cls
-      }, containerProps), _react["default"].createElement(_reactWindow.FixedSizeGrid, (0, _extends2["default"])({}, rest, {
+      }, containerProps), _react["default"].createElement(Grid, (0, _extends2["default"])({}, rest, {
         className: "".concat(classPrefix, "__body"),
         ref: this._setBodyRef,
+        innerRef: this._setInnerRef,
+        itemKey: this._itemKey,
         data: data,
-        itemKey: this._itemKey,
         frozenData: frozenData,
         width: width,
         height: Math.max(height - headerHeight - frozenRowsHeight, 0),
-        rowHeight: rowHeight,
+        rowHeight: estimatedRowHeight ? getRowHeight : rowHeight,
+        estimatedRowHeight: estimatedRowHeight,
         rowCount: data.length,
         overscanRowCount: overscanRowCount,
-        columnWidth: bodyWidth,
+        columnWidth: estimatedRowHeight ? this._getBodyWidth : bodyWidth,
         columnCount: 1,
@@ -198,22 +249,19 @@ overscanColumnCount: 0,
   }, {
+    key: "_setInnerRef",
+    value: function _setInnerRef(ref) {
+      this.innerRef = ref;
+    }
+  }, {
     key: "_itemKey",
     value: function _itemKey(_ref) {
       var rowIndex = _ref.rowIndex;
-      var _this$props3 = this.props,
-          data = _this$props3.data,
-          rowKey = _this$props3.rowKey;
+      var _this$props5 = this.props,
+          data = _this$props5.data,
+          rowKey = _this$props5.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",
+    value: function _getBodyWidth() {
+      return this.props.bodyWidth;
     }
@@ -248,2 +296,4 @@ }, {
   rowHeight: _propTypes["default"].number.isRequired,
+  estimatedRowHeight: _propTypes["default"].number,
+  getRowHeight: _propTypes["default"].func,
   columns: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired,
@@ -250,0 +300,0 @@ data: _propTypes["default"].array.isRequired,

lib/TableRow.js

@@ -45,3 +45,8 @@ "use strict";
     _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(TableRow).call(this, props));
+    _this.state = {
+      measured: false
+    };
+    _this._setRef = _this._setRef.bind((0, _assertThisInitialized2["default"])(_this));
     _this._handleExpand = _this._handleExpand.bind((0, _assertThisInitialized2["default"])(_this));
+    _this._measureHeight = _this._measureHeight.bind((0, _assertThisInitialized2["default"])(_this));
     return _this;
@@ -51,2 +56,16 @@ }
   (0, _createClass2["default"])(TableRow, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.estimatedRowHeight && this.props.rowIndex >= 0 && this._measureHeight();
+    }
+  }, {
+    key: "componentDidUpdate",
+    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) {
+        this.setState({
+          measured: false
+        }, this._measureHeight);
+      }
+    }
+  }, {
     key: "render",
@@ -65,2 +84,3 @@ value: function render() {
           rowEventHandlers = _this$props.rowEventHandlers,
+          estimatedRowHeight = _this$props.estimatedRowHeight,
           rowRenderer = _this$props.rowRenderer,
@@ -73,3 +93,4 @@ cellRenderer = _this$props.cellRenderer,
           onRowExpand = _this$props.onRowExpand,
-          rest = (0, _objectWithoutProperties2["default"])(_this$props, ["isScrolling", "className", "style", "columns", "rowIndex", "rowData", "expandColumnKey", "depth", "rowEventHandlers", "rowRenderer", "cellRenderer", "expandIconRenderer", "tagName", "rowKey", "onRowHover", "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"]);
       /* eslint-enable no-unused-vars */
@@ -108,2 +129,12 @@
 
+      if (estimatedRowHeight && rowIndex >= 0) {
+        var height = style.height,
+            otherStyles = (0, _objectWithoutProperties2["default"])(style, ["height"]);
+        return _react["default"].createElement(Tag, (0, _extends2["default"])({}, rest, {
+          ref: this._setRef,
+          className: className,
+          style: this.state.measured ? style : otherStyles
+        }, this.state.measured && eventHandlers), cells);
+      }
+
       return _react["default"].createElement(Tag, (0, _extends2["default"])({}, rest, {
@@ -115,2 +146,7 @@ className: className,
   }, {
+    key: "_setRef",
+    value: function _setRef(ref) {
+      this.ref = ref;
+    }
+  }, {
     key: "_handleExpand",
@@ -131,10 +167,26 @@ value: function _handleExpand(expanded) {
   }, {
+    key: "_measureHeight",
+    value: function _measureHeight() {
+      if (this.ref) {
+        var _this$props3 = this.props,
+            rowKey = _this$props3.rowKey,
+            onRowHeightMeasured = _this$props3.onRowHeightMeasured,
+            rowIndex = _this$props3.rowIndex;
+        var height = this.ref.getBoundingClientRect().height;
+        this.setState({
+          measured: true
+        }, function () {
+          onRowHeightMeasured(rowKey, height, rowIndex);
+        });
+      }
+    }
+  }, {
     key: "_getEventHandlers",
     value: function _getEventHandlers() {
       var handlers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var _this$props3 = this.props,
-          rowData = _this$props3.rowData,
-          rowIndex = _this$props3.rowIndex,
-          rowKey = _this$props3.rowKey,
-          onRowHover = _this$props3.onRowHover;
+      var _this$props4 = this.props,
+          rowData = _this$props4.rowData,
+          rowIndex = _this$props4.rowIndex,
+          rowKey = _this$props4.rowKey,
+          onRowHover = _this$props4.onRowHover;
       var eventHandlers = {};
@@ -209,3 +261,5 @@ Object.keys(handlers).forEach(function (eventKey) {
   onRowExpand: _propTypes["default"].func,
-  tagName: _propTypes["default"].elementType
+  tagName: _propTypes["default"].elementType,
+  estimatedRowHeight: _propTypes["default"].number,
+  onRowHeightMeasured: _propTypes["default"].func
 };
@@ -212,0 +266,0 @@ var _default = TableRow;

lib/utils.js

@@ -19,6 +19,6 @@ "use strict";
 exports.getValue = getValue;
-exports.throttle = throttle;
 exports.getScrollbarSize = getScrollbarSize;
 exports.addClassName = addClassName;
 exports.removeClassName = removeClassName;
+exports.throttle = exports.debounce = void 0;
 
@@ -230,6 +230,26 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
   return object;
-} // copied from https://30secondsofcode.org/function#throttle
+} // copied from https://www.30secondsofcode.org/js/s/debounce
 
 
-function throttle(fn, wait) {
+var debounce = function debounce(fn) {
+  var ms = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var timeoutId;
+  return function () {
+    var _this = this;
+
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(function () {
+      return fn.apply(_this, args);
+    }, ms);
+  };
+}; // copied from https://www.30secondsofcode.org/js/s/throttle
+
+
+exports.debounce = debounce;
+
+var throttle = function throttle(fn, wait) {
   var inThrottle, lastFn, lastTime;
@@ -254,5 +274,6 @@ return function () {
   };
-} // copied from https://github.com/react-bootstrap/dom-helpers
+}; // copied from https://github.com/react-bootstrap/dom-helpers
 
 
+exports.throttle = throttle;
 var scrollbarSize;
@@ -259,0 +280,0 @@

package.json

 {
   "name": "react-base-table",
-  "version": "1.9.4",
+  "version": "1.10.0",
   "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

888132

increased by5.47%

Lines of code

6760

increased by6.41%

No dependency changes