react-base-table - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

CHANGELOG.md

@@ -5,2 +5,9 @@ # CHANGELOG
 
+# v1.2.0 (2019-04-29)
+
+- chore: more accurate `onScrollbarPresenceChange`
+- feat: replace `react-virtualized` with `react-window`
+- feat: add scroll direction to `onScroll`
+- feat: add `align` to `scrollToRow`
+
 # v1.1.1 (2019-04-27)
@@ -7,0 +14,0 @@

es/AutoResizer.js

 import React from 'react';
 import PropTypes from 'prop-types';
-import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
+import AutoSizer from 'react-virtualized-auto-sizer';
 /**
@@ -5,0 +5,0 @@ * Decorator component that automatically adjusts the width and height of a single child

es/BaseTable.js

@@ -17,3 +17,2 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import memoize from 'memoize-one';
-import noop from 'lodash/noop';
 import get from 'lodash/get';
@@ -31,3 +30,3 @@ import GridTable from './GridTable';
 import ColumnManager from './ColumnManager';
-import { renderElement, normalizeColumns, isObjectEqual, callOrReturn, hasChildren, flattenOnKeys, cloneArray } from './utils';
+import { renderElement, normalizeColumns, getScrollbarSize, isObjectEqual, callOrReturn, hasChildren, flattenOnKeys, cloneArray, noop } from './utils';
 
@@ -62,4 +61,3 @@ var getContainerStyle = function getContainerStyle(width, maxWidth, height) {
     _this = _React$PureComponent.call(this, props) || this;
-    var footerHeight = props.footerHeight,
-        columns = props.columns,
+    var columns = props.columns,
         children = props.children,
@@ -69,6 +67,2 @@ expandedRowKeys = props.expandedRowKeys,
     _this.state = {
-      // used for auto height table
-      tableHeight: _this._getHeaderHeight() + footerHeight,
-      scrollbarWidth: 0,
-      horizontalScrollbarWidth: 0,
       hoveredRowKey: null,
@@ -88,3 +82,2 @@ resizingKey: null,
     _this.renderHeaderCell = _this.renderHeaderCell.bind(_assertThisInitialized(_this));
-    _this._handleScrollbarPresenceChange = _this._handleScrollbarPresenceChange.bind(_assertThisInitialized(_this));
     _this._handleScroll = _this._handleScroll.bind(_assertThisInitialized(_this));
@@ -111,2 +104,6 @@ _this._handleVerticalScroll = _this._handleVerticalScroll.bind(_assertThisInitialized(_this));
     _this._depthMap = {};
+    _this._horizontalScrollbarSize = 0;
+    _this._verticalScrollbarSize = 0;
+    _this._scrollbarPresenceChanged = false;
+    _this._scrollbarSizeMeasured = getScrollbarSize() !== undefined;
     return _this;
@@ -197,10 +194,20 @@ }
   /**
-   * Ensure row is visible.
-   * This method can be used to safely scroll back to a row that a user has scrolled away from even if it was previously scrolled to.
-   *
-   * @param {number} rowIndex
+   * Scroll to the specified row.
+   * By default, the table will scroll as little as possible to ensure the row is visible.
+   * You can control the alignment of the row though by specifying an align property. Acceptable values are:
+   * 
+   * - `auto` (default) - Scroll as little as possible to ensure the row is visible.
+   *  (If the row is already visible, it won't scroll at all.)
+   * - `smart` - If the row is already visible, don't scroll at all. If it is less than one viewport away,
+   *  scroll as little as possible so that it becomes visible. 
+   *  If it is more than one viewport away, scroll so that it is centered within the grid.
+   * - `center` - Center align the row within the table.
+   * - `end` - Align the row to the bottom, right hand side of the table.
+   * - `start` - Align the row to the top, left hand of the table.
+    * @param {number} rowIndex 
+   * @param {string} align 
    */
   ;
 
-  _proto.scrollToRow = function scrollToRow(rowIndex) {
+  _proto.scrollToRow = function scrollToRow(rowIndex, align) {
     if (rowIndex === void 0) {
@@ -210,5 +217,9 @@ rowIndex = 0;
 
-    this.table && this.table.scrollToRow(rowIndex);
-    this.leftTable && this.leftTable.scrollToRow(rowIndex);
-    this.rightTable && this.rightTable.scrollToRow(rowIndex);
+    if (align === void 0) {
+      align = 'auto';
+    }
+
+    this.table && this.table.scrollToRow(rowIndex, align);
+    this.leftTable && this.leftTable.scrollToRow(rowIndex, align);
+    this.rightTable && this.rightTable.scrollToRow(rowIndex, align);
   }
@@ -506,19 +517,12 @@ /**
     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, ["headerHeight", "rowHeight", "fixed"]);
+        rest = _objectWithoutPropertiesLoose(_this$props5, ["width", "headerHeight", "rowHeight", "fixed"]);
 
-    var _this$state = this.state,
-        scrollbarWidth = _this$state.scrollbarWidth,
-        hoveredRowKey = _this$state.hoveredRowKey,
-        resizingKey = _this$state.resizingKey,
-        resizingWidth = _this$state.resizingWidth;
+    var height = this._getTableHeight();
 
-    var _this$_getTableSize = this._getTableSize(),
-        width = _this$_getTableSize.width,
-        height = _this$_getTableSize.height;
+    var tableWidth = width - this._verticalScrollbarSize;
 
-    var tableWidth = width - scrollbarWidth;
-
     if (fixed) {
@@ -530,6 +534,4 @@ var columnsWidth = this.columnManager.getColumnsWidth(); // make sure `scrollLeft` is always integer to fix a sync bug when scrolling to end horizontally
 
-    return React.createElement(GridTable, _extends({}, rest, {
+    return React.createElement(GridTable, _extends({}, rest, this.state, {
       className: this._prefixClass('table-main'),
-      style: undefined // don't pass style to inner Grid
-      ,
       ref: this._setMainTableRef,
@@ -542,12 +544,8 @@ data: this._data,
       rowHeight: rowHeight,
-      headerWidth: tableWidth + (fixed ? scrollbarWidth : 0),
+      headerWidth: tableWidth + (fixed ? this._verticalScrollbarSize : 0),
       bodyWidth: tableWidth,
       headerRenderer: this.renderHeader,
       rowRenderer: this.renderRow,
-      hoveredRowKey: hoveredRowKey,
-      resizingKey: resizingKey,
-      resizingWidth: resizingWidth,
       onScroll: this._handleScroll,
-      onRowsRendered: this._handleRowsRendered,
-      onScrollbarPresenceChange: this._handleScrollbarPresenceChange
+      onRowsRendered: this._handleRowsRendered
     }));
@@ -560,24 +558,14 @@ };
     var _this$props6 = this.props,
+        width = _this$props6.width,
         headerHeight = _this$props6.headerHeight,
         rowHeight = _this$props6.rowHeight,
-        rest = _objectWithoutPropertiesLoose(_this$props6, ["headerHeight", "rowHeight"]);
+        rest = _objectWithoutPropertiesLoose(_this$props6, ["width", "headerHeight", "rowHeight"]);
 
-    var _this$state2 = this.state,
-        scrollbarWidth = _this$state2.scrollbarWidth,
-        hoveredRowKey = _this$state2.hoveredRowKey,
-        resizingKey = _this$state2.resizingKey,
-        resizingWidth = _this$state2.resizingWidth;
-
-    var _this$_getTableSize2 = this._getTableSize(),
-        width = _this$_getTableSize2.width;
-
     var containerHeight = this._getFrozenContainerHeight();
 
-    var offset = scrollbarWidth || 20;
+    var offset = this._verticalScrollbarSize || 20;
     var columnsWidth = this.columnManager.getLeftFrozenColumnsWidth();
-    return React.createElement(GridTable, _extends({}, rest, {
+    return React.createElement(GridTable, _extends({}, rest, this.state, {
       containerStyle: this._getLeftTableContainerStyle(columnsWidth, width, containerHeight),
       className: this._prefixClass('table-frozen-left'),
-      style: undefined // don't pass style to inner Grid
-      ,
       ref: this._setLeftTableRef,
@@ -594,8 +582,4 @@ data: this._data,
       rowRenderer: this.renderRow,
-      hoveredRowKey: hoveredRowKey,
-      resizingKey: resizingKey,
-      resizingWidth: resizingWidth,
       onScroll: this._handleVerticalScroll,
-      onRowsRendered: noop,
-      onScrollbarPresenceChange: noop
+      onRowsRendered: noop
     }));
@@ -608,23 +592,14 @@ };
     var _this$props7 = this.props,
+        width = _this$props7.width,
         headerHeight = _this$props7.headerHeight,
         rowHeight = _this$props7.rowHeight,
-        rest = _objectWithoutPropertiesLoose(_this$props7, ["headerHeight", "rowHeight"]);
+        rest = _objectWithoutPropertiesLoose(_this$props7, ["width", "headerHeight", "rowHeight"]);
 
-    var _this$state3 = this.state,
-        scrollbarWidth = _this$state3.scrollbarWidth,
-        hoveredRowKey = _this$state3.hoveredRowKey,
-        resizingKey = _this$state3.resizingKey,
-        resizingWidth = _this$state3.resizingWidth;
-
-    var _this$_getTableSize3 = this._getTableSize(),
-        width = _this$_getTableSize3.width;
-
     var containerHeight = this._getFrozenContainerHeight();
 
     var columnsWidth = this.columnManager.getRightFrozenColumnsWidth();
-    return React.createElement(GridTable, _extends({}, rest, {
+    var scrollbarWidth = this._verticalScrollbarSize;
+    return React.createElement(GridTable, _extends({}, rest, this.state, {
       containerStyle: this._getLeftTableContainerStyle(columnsWidth + scrollbarWidth, width, containerHeight),
       className: this._prefixClass('table-frozen-right'),
-      style: undefined // don't pass style to inner Grid
-      ,
       ref: this._setRightTableRef,
@@ -641,8 +616,4 @@ data: this._data,
       rowRenderer: this.renderRow,
-      hoveredRowKey: hoveredRowKey,
-      resizingKey: resizingKey,
-      resizingWidth: resizingWidth,
       onScroll: this._handleVerticalScroll,
-      onRowsRendered: noop,
-      onScrollbarPresenceChange: noop
+      onRowsRendered: noop
     }));
@@ -652,6 +623,7 @@ };
   _proto.renderResizingLine = function renderResizingLine() {
-    var _this$state4 = this.state,
-        resizingKey = _this$state4.resizingKey,
-        scrollbarWidth = _this$state4.scrollbarWidth;
-    if (!this.props.fixed || !resizingKey) return null;
+    var _this$props8 = this.props,
+        width = _this$props8.width,
+        fixed = _this$props8.fixed;
+    var resizingKey = this.state.resizingKey;
+    if (!fixed || !resizingKey) return null;
     var columns = this.columnManager.getMainColumns();
@@ -662,7 +634,2 @@ var idx = columns.findIndex(function (column) {
     var column = this.columnManager.getColumn(resizingKey);
-
-    var _this$_getTableSize4 = this._getTableSize(),
-        width = _this$_getTableSize4.width,
-        height = _this$_getTableSize4.height;
-
     var left = this.columnManager.recomputeColumnsWidth(columns.slice(0, idx + 1));
@@ -673,3 +640,3 @@
     } else if (column.frozen === FrozenDirection.RIGHT) {
-      left = width - scrollbarWidth - this.columnManager.recomputeColumnsWidth(columns.slice(idx + 1));
+      left = width - this._verticalScrollbarSize - this.columnManager.recomputeColumnsWidth(columns.slice(idx + 1));
     }
@@ -681,3 +648,3 @@
       transform: 'translateX(-3px)',
-      height: height - this.state.horizontalScrollbarWidth
+      height: this._getTableHeight() - this._horizontalScrollbarSize
     };
@@ -691,5 +658,5 @@ return React.createElement("div", {
   _proto.renderFooter = function renderFooter() {
-    var _this$props8 = this.props,
-        footerHeight = _this$props8.footerHeight,
-        footerRenderer = _this$props8.footerRenderer;
+    var _this$props9 = this.props,
+        footerHeight = _this$props9.footerHeight,
+        footerRenderer = _this$props9.footerRenderer;
     if (footerHeight === 0) return null;
@@ -705,6 +672,6 @@ return React.createElement("div", {
   _proto.renderEmptyLayer = function renderEmptyLayer() {
-    var _this$props9 = this.props,
-        data = _this$props9.data,
-        footerHeight = _this$props9.footerHeight,
-        emptyRenderer = _this$props9.emptyRenderer;
+    var _this$props10 = this.props,
+        data = _this$props10.data,
+        footerHeight = _this$props10.footerHeight,
+        emptyRenderer = _this$props10.emptyRenderer;
     if (data && data.length) return null;
@@ -730,16 +697,16 @@
 
-  _proto.renderTable = function renderTable() {
+  _proto.render = function render() {
     var _cn6;
 
-    var _this$props10 = this.props,
-        classPrefix = _this$props10.classPrefix,
-        fixed = _this$props10.fixed,
-        data = _this$props10.data,
-        frozenData = _this$props10.frozenData,
-        expandColumnKey = _this$props10.expandColumnKey,
-        disabled = _this$props10.disabled,
-        className = _this$props10.className,
-        style = _this$props10.style,
-        footerHeight = _this$props10.footerHeight;
-    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 _this$props11 = this.props,
+        classPrefix = _this$props11.classPrefix,
+        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;
 
@@ -750,14 +717,14 @@ if (expandColumnKey) {
       this._data = data;
-    }
+    } // should be after `this._data` assigned
 
-    var _this$_getTableSize5 = this._getTableSize(),
-        width = _this$_getTableSize5.width,
-        height = _this$_getTableSize5.height;
 
+    this._calcScrollbarSizes();
+
     var containerStyle = _objectSpread({}, style, {
       width: width,
-      height: height + footerHeight,
+      height: this._getTableHeight() + footerHeight,
       position: 'relative'
     });
 
+    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));
     return React.createElement("div", {
@@ -769,14 +736,2 @@ className: cls,
 
-  _proto.render = function render() {
-    var _this$props11 = this.props,
-        width = _this$props11.width,
-        height = _this$props11.height,
-        maxHeight = _this$props11.maxHeight;
-    var tableHeight = this.state.tableHeight;
-    return this.renderTable({
-      width: width,
-      height: maxHeight > 0 ? tableHeight : height
-    });
-  };
-
   _proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
@@ -808,7 +763,13 @@ var nextColumns = nextProps.columns || normalizeColumns(nextProps.children);
   _proto.componentDidMount = function componentDidMount() {
-    this._maybeUpdateTableHeight();
+    // in SSR getScrollbarSize() === undefined, so we have to measure again here
+    if (!this._scrollbarSizeMeasured) {
+      getScrollbarSize();
+      this.setState({});
+    }
+
+    this._maybeScrollbarPresenceChange();
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
-    this._maybeUpdateTableHeight();
+    this._maybeScrollbarPresenceChange();
   };
@@ -837,40 +798,2 @@
 
-  _proto._maybeUpdateTableHeight = function _maybeUpdateTableHeight() {
-    var _this$props12 = this.props,
-        maxHeight = _this$props12.maxHeight,
-        footerHeight = _this$props12.footerHeight;
-
-    if (maxHeight > 0) {
-      var horizontalScrollbarWidth = this.state.horizontalScrollbarWidth;
-
-      var frozenRowsHeight = this._getFrozenRowsHeight();
-
-      var totalRowsHeight = this.getTotalRowsHeight();
-
-      var headerHeight = this._getHeaderHeight();
-
-      var totalHeight = headerHeight + footerHeight + frozenRowsHeight + totalRowsHeight + horizontalScrollbarWidth;
-      var tableHeight = Math.min(totalHeight, maxHeight);
-
-      if (tableHeight !== this.state.tableHeight) {
-        this.setState({
-          tableHeight: tableHeight
-        });
-      }
-    }
-  };
-
-  _proto._getTableSize = function _getTableSize() {
-    var _this$props13 = this.props,
-        width = _this$props13.width,
-        height = _this$props13.height,
-        maxHeight = _this$props13.maxHeight,
-        footerHeight = _this$props13.footerHeight;
-    var tableHeight = this.state.tableHeight;
-    return {
-      width: width,
-      height: (maxHeight > 0 ? tableHeight : height) - footerHeight
-    };
-  };
-
   _proto._getHeaderHeight = function _getHeaderHeight() {
@@ -889,23 +812,37 @@ var headerHeight = this.props.headerHeight;
   _proto._getFrozenRowsHeight = function _getFrozenRowsHeight() {
-    var _this$props14 = this.props,
-        frozenData = _this$props14.frozenData,
-        rowHeight = _this$props14.rowHeight;
+    var _this$props12 = this.props,
+        frozenData = _this$props12.frozenData,
+        rowHeight = _this$props12.rowHeight;
     return frozenData.length * rowHeight;
   };
 
-  _proto._getClientHeight = function _getClientHeight() {
-    if (this._scroll.clientHeight) return this._scroll.clientHeight;
-    if (!this.props.height) return 0;
-    return this.props.height - this._getHeaderHeight() - this.props.footerHeight - this._getFrozenRowsHeight();
+  _proto._getTableHeight = function _getTableHeight() {
+    var _this$props13 = this.props,
+        height = _this$props13.height,
+        maxHeight = _this$props13.maxHeight,
+        footerHeight = _this$props13.footerHeight;
+    var tableHeight = height - footerHeight;
+
+    if (maxHeight > 0) {
+      var frozenRowsHeight = this._getFrozenRowsHeight();
+
+      var totalRowsHeight = this.getTotalRowsHeight();
+
+      var headerHeight = this._getHeaderHeight();
+
+      var totalHeight = headerHeight + frozenRowsHeight + totalRowsHeight + this._horizontalScrollbarSize;
+      tableHeight = Math.min(totalHeight, maxHeight - footerHeight);
+    }
+
+    return tableHeight;
   };
 
+  _proto._getBodyHeight = function _getBodyHeight() {
+    return this._getTableHeight() - this._getHeaderHeight() - this._getFrozenRowsHeight();
+  };
+
   _proto._getFrozenContainerHeight = function _getFrozenContainerHeight() {
     var maxHeight = this.props.maxHeight;
-    var horizontalScrollbarWidth = this.state.horizontalScrollbarWidth;
+    var tableHeight = this._getTableHeight() - (this._data.length > 0 ? this._horizontalScrollbarSize : 0); // in auto height mode tableHeight = totalHeight
 
-    var _this$_getTableSize6 = this._getTableSize(),
-        height = _this$_getTableSize6.height;
-
-    var tableHeight = height - (this._data.length > 0 ? horizontalScrollbarWidth : 0); // in auto height mode tableHeight = totalHeight
-
     if (maxHeight > 0) return tableHeight;
@@ -918,2 +855,47 @@
 
+  _proto._calcScrollbarSizes = function _calcScrollbarSizes() {
+    var _this$props14 = this.props,
+        fixed = _this$props14.fixed,
+        width = _this$props14.width;
+    var totalRowsHeight = this.getTotalRowsHeight();
+    var totalColumnsWidth = this.getTotalColumnsWidth();
+    var scrollbarSize = getScrollbarSize() || 0;
+    var prevHorizontalScrollbarSize = this._horizontalScrollbarSize;
+    var prevVerticalScrollbarSize = this._verticalScrollbarSize; // we have to set `this._horizontalScrollbarSize` before calling `this._getBodyHeight`
+
+    if (!fixed || totalColumnsWidth <= width - scrollbarSize) {
+      this._horizontalScrollbarSize = 0;
+      this._verticalScrollbarSize = totalRowsHeight > this._getBodyHeight() ? scrollbarSize : 0;
+    } else {
+      if (totalColumnsWidth > width) {
+        this._horizontalScrollbarSize = scrollbarSize;
+        this._verticalScrollbarSize = totalRowsHeight > this._getBodyHeight() - this._horizontalScrollbarSize ? scrollbarSize : 0;
+      } else {
+        this._horizontalScrollbarSize = 0;
+        this._verticalScrollbarSize = 0;
+
+        if (totalRowsHeight > this._getBodyHeight()) {
+          this._horizontalScrollbarSize = scrollbarSize;
+          this._verticalScrollbarSize = scrollbarSize;
+        }
+      }
+    }
+
+    if (prevHorizontalScrollbarSize !== this._horizontalScrollbarSize || prevVerticalScrollbarSize !== this._verticalScrollbarSize) {
+      this._scrollbarPresenceChanged = true;
+    }
+  };
+
+  _proto._maybeScrollbarPresenceChange = function _maybeScrollbarPresenceChange() {
+    if (this._scrollbarPresenceChanged) {
+      var onScrollbarPresenceChange = this.props.onScrollbarPresenceChange;
+      this._scrollbarPresenceChanged = false;
+      onScrollbarPresenceChange({
+        size: getScrollbarSize(),
+        horizontal: this._horizontalScrollbarSize > 0,
+        vertical: this._verticalScrollbarSize > 0
+      });
+    }
+  };
+
   _proto._maybeCallOnEndReached = function _maybeCallOnEndReached() {
@@ -927,8 +909,7 @@ var _this$props15 = this.props,
 
-    var clientHeight = this._getClientHeight();
+    var clientHeight = this._getBodyHeight(); // onEndReached is not available is maxHeight is set
 
-    var horizontalScrollbarWidth = this.state.horizontalScrollbarWidth; // onEndReached is not available is maxHeight is set
 
     if (maxHeight || !onEndReached || !clientHeight || !scrollHeight) return;
-    var distanceFromEnd = scrollHeight - scrollTop - clientHeight + horizontalScrollbarWidth;
+    var distanceFromEnd = scrollHeight - scrollTop - clientHeight + this._horizontalScrollbarSize;
 
@@ -944,17 +925,2 @@ if (this._lastScannedRowIndex >= 0 && distanceFromEnd <= onEndReachedThreshold && (this._hasDataChangedSinceEndReached || scrollHeight !== this._scrollHeight)) {
 
-  _proto._handleScrollbarPresenceChange = function _handleScrollbarPresenceChange(_ref8) {
-    var size = _ref8.size,
-        vertical = _ref8.vertical,
-        horizontal = _ref8.horizontal;
-    this.setState({
-      scrollbarWidth: vertical ? size : 0,
-      horizontalScrollbarWidth: horizontal ? size : 0
-    });
-    this.props.onScrollbarPresenceChange({
-      size: size,
-      vertical: vertical,
-      horizontal: horizontal
-    });
-  };
-
   _proto._handleScroll = function _handleScroll(args) {
@@ -967,4 +933,4 @@ var lastScrollTop = this._scroll.scrollTop || 0;
 
-  _proto._handleVerticalScroll = function _handleVerticalScroll(_ref9) {
-    var scrollTop = _ref9.scrollTop;
+  _proto._handleVerticalScroll = function _handleVerticalScroll(_ref8) {
+    var scrollTop = _ref8.scrollTop;
     var lastScrollTop = this._scroll.scrollTop || 0;
@@ -985,5 +951,5 @@ this.scrollToTop(scrollTop);
 
-  _proto._handleRowHover = function _handleRowHover(_ref10) {
-    var hovered = _ref10.hovered,
-        rowKey = _ref10.rowKey;
+  _proto._handleRowHover = function _handleRowHover(_ref9) {
+    var hovered = _ref9.hovered,
+        rowKey = _ref9.rowKey;
     this.setState({
@@ -994,7 +960,7 @@ hoveredRowKey: hovered ? rowKey : null
 
-  _proto._handleRowExpand = function _handleRowExpand(_ref11) {
-    var expanded = _ref11.expanded,
-        rowData = _ref11.rowData,
-        rowIndex = _ref11.rowIndex,
-        rowKey = _ref11.rowKey;
+  _proto._handleRowExpand = function _handleRowExpand(_ref10) {
+    var expanded = _ref10.expanded,
+        rowData = _ref10.rowData,
+        rowIndex = _ref10.rowIndex,
+        rowKey = _ref10.rowKey;
     var expandedRowKeys = cloneArray(this.state.expandedRowKeys);
@@ -1028,4 +994,4 @@
 
-  _proto._handleColumnResize = function _handleColumnResize(_ref12, width) {
-    var key = _ref12.key;
+  _proto._handleColumnResize = function _handleColumnResize(_ref11, width) {
+    var key = _ref11.key;
     this.columnManager.setColumnWidth(key, width);
@@ -1042,4 +1008,4 @@ this.setState({
 
-  _proto._handleColumnResizeStart = function _handleColumnResizeStart(_ref13) {
-    var key = _ref13.key;
+  _proto._handleColumnResizeStart = function _handleColumnResizeStart(_ref12) {
+    var key = _ref12.key;
     this.setState({
@@ -1320,3 +1286,10 @@ resizingKey: key
    * A callback function when scrolling the table
-   * The handler is of the shape of `({ scrollLeft, scrollTop }) => *`
+   * The handler is of the shape of `({ scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested }) => *`
+   *
+   * `scrollLeft` and `scrollTop` are numbers.
+   *
+   * `horizontalDirection` and `verticalDirection` are either `forward` or `backward`.
+   *
+   * `scrollUpdateWasRequested` is a boolean. This value is true if the scroll was caused by `scrollTo*`,
+   * and false if it was the result of a user interaction in the browser.
    */
@@ -1323,0 +1296,0 @@ onScroll: PropTypes.func,

es/ColumnResizer.js

@@ -14,3 +14,3 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 import throttle from 'lodash/throttle';
-import noop from 'lodash/noop';
+import { noop } from './utils';
 var INVALID_VALUE = null;
@@ -34,3 +34,3 @@ var MIN_WIDTH = 25;
     _this.width = 0;
-    _this._handleDrag = _this._handleDrag.bind(_assertThisInitialized(_this));
+    _this._handleDrag = throttle(_this._handleDrag.bind(_assertThisInitialized(_this)), THROTTLE_WAIT);
     _this._handleStart = _this._handleStart.bind(_assertThisInitialized(_this));
@@ -55,3 +55,3 @@ _this._handleStop = _this._handleStop.bind(_assertThisInitialized(_this));
       onStart: this._handleStart,
-      onDrag: throttle(this._handleDrag, THROTTLE_WAIT),
+      onDrag: this._handleDrag,
       onStop: this._handleStop
@@ -58,0 +58,0 @@ }, React.createElement("div", {

es/ExpandIcon.js

@@ -52,2 +52,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
         width: '16px',
+        minWidth: '16px',
         height: '16px',
@@ -54,0 +55,0 @@ lineHeight: '16px',

es/GridTable.js

@@ -16,5 +16,4 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import cn from 'classnames';
-import Grid from 'react-virtualized/dist/commonjs/Grid';
+import { FixedSizeGrid as Grid } from 'react-window';
 import Header from './TableHeader';
-import cellRangeRenderer from './cellRangeRenderer';
 /**
@@ -35,5 +34,5 @@ * A wrapper of the Grid for internal only
     _this._setBodyRef = _this._setBodyRef.bind(_assertThisInitialized(_this));
-    _this._handleSectionRendered = _this._handleSectionRendered.bind(_assertThisInitialized(_this));
+    _this._itemKey = _this._itemKey.bind(_assertThisInitialized(_this));
+    _this._handleItemsRendered = _this._handleItemsRendered.bind(_assertThisInitialized(_this));
     _this.renderRow = _this.renderRow.bind(_assertThisInitialized(_this));
-    _this.renderCellRange = _this.renderCellRange.bind(_assertThisInitialized(_this));
     return _this;
@@ -51,7 +50,7 @@ }
     this.headerRef && this.headerRef.scrollTo(args.scrollLeft);
-    this.bodyRef && this.bodyRef.scrollToPosition(args);
+    this.bodyRef && this.bodyRef.scrollTo(args);
   };
 
   _proto.scrollToTop = function scrollToTop(scrollTop) {
-    this.bodyRef && this.bodyRef.scrollToPosition({
+    this.bodyRef && this.bodyRef.scrollTo({
       scrollTop: scrollTop
@@ -68,3 +67,3 @@ });
 
-  _proto.scrollToRow = function scrollToRow(rowIndex) {
+  _proto.scrollToRow = function scrollToRow(rowIndex, align) {
     if (rowIndex === void 0) {
@@ -74,5 +73,10 @@ rowIndex = 0;
 
-    this.bodyRef && this.bodyRef.scrollToCell({
+    if (align === void 0) {
+      align = 'auto';
+    }
+
+    this.bodyRef && this.bodyRef.scrollToItem({
       rowIndex: rowIndex,
-      columnIndex: 0
+      columnIndex: 0,
+      align: align
     });
@@ -93,11 +97,2 @@ };
 
-  _proto.renderCellRange = function renderCellRange(args) {
-    var useIsScrolling = this.props.useIsScrolling;
-    var isScrolling = useIsScrolling ? args.isScrolling : undefined;
-    return cellRangeRenderer(_objectSpread({}, args, {
-      useIsScrolling: useIsScrolling,
-      isScrolling: isScrolling
-    }));
-  };
-
   _proto.render = function render() {
@@ -117,5 +112,7 @@ var _this$props2 = this.props,
         onScroll = _this$props2.onScroll,
+        hoveredRowKey = _this$props2.hoveredRowKey,
+        overscanRowCount = _this$props2.overscanRowCount,
+        style = _this$props2.style,
         onScrollbarPresenceChange = _this$props2.onScrollbarPresenceChange,
-        hoveredRowKey = _this$props2.hoveredRowKey,
-        rest = _objectWithoutPropertiesLoose(_this$props2, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "onScrollbarPresenceChange", "hoveredRowKey"]);
+        rest = _objectWithoutPropertiesLoose(_this$props2, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "hoveredRowKey", "overscanRowCount", "style", "onScrollbarPresenceChange"]);
 
@@ -137,2 +134,3 @@ var headerHeight = this._getHeaderHeight();
       data: data,
+      itemKey: this._itemKey,
       frozenData: frozenData,
@@ -143,11 +141,11 @@ width: width,
       rowCount: data.length,
+      overscanRowsCount: overscanRowCount,
       columnWidth: bodyWidth,
       columnCount: 1,
-      isScrollingOptOut: !useIsScrolling,
-      cellRenderer: this.renderRow,
-      cellRangeRenderer: this.renderCellRange,
+      overscanColumnsCount: 0,
+      useIsScrolling: useIsScrolling,
       hoveredRowKey: hoveredRowKey,
       onScroll: onScroll,
-      onSectionRendered: this._handleSectionRendered,
-      onScrollbarPresenceChange: onScrollbarPresenceChange
+      onItemsRendered: this._handleItemsRendered,
+      children: this.renderRow
     })), headerHeight + frozenRowsHeight > 0 && // put header after body and reverse the display order via css
@@ -179,2 +177,10 @@ // to prevent header's shadow being covered by body
 
+  _proto._itemKey = function _itemKey(_ref) {
+    var rowIndex = _ref.rowIndex;
+    var _this$props3 = this.props,
+        data = _this$props3.data,
+        rowKey = _this$props3.rowKey;
+    return data[rowIndex][rowKey];
+  };
+
   _proto._getHeaderHeight = function _getHeaderHeight() {
@@ -192,13 +198,12 @@ var headerHeight = this.props.headerHeight;
 
-  _proto._handleSectionRendered = function _handleSectionRendered(_ref) {
-    var rowOverscanStartIndex = _ref.rowOverscanStartIndex,
-        rowOverscanStopIndex = _ref.rowOverscanStopIndex,
-        rowStartIndex = _ref.rowStartIndex,
-        rowStopIndex = _ref.rowStopIndex;
-    var onRowsRendered = this.props.onRowsRendered;
-    onRowsRendered({
-      overscanStartIndex: rowOverscanStartIndex,
-      overscanStopIndex: rowOverscanStopIndex,
-      startIndex: rowStartIndex,
-      stopIndex: rowStopIndex
+  _proto._handleItemsRendered = function _handleItemsRendered(_ref2) {
+    var overscanRowStartIndex = _ref2.overscanRowStartIndex,
+        overscanRowStopIndex = _ref2.overscanRowStopIndex,
+        visibleRowStartIndex = _ref2.visibleRowStartIndex,
+        visibleRowStopIndex = _ref2.visibleRowStopIndex;
+    this.props.onRowsRendered({
+      overscanStartIndex: overscanRowStartIndex,
+      overscanStopIndex: overscanRowStopIndex,
+      startIndex: visibleRowStartIndex,
+      stopIndex: visibleRowStopIndex
     });
@@ -222,8 +227,11 @@ };
   data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rowKey: PropTypes.string.isRequired,
   frozenData: PropTypes.arrayOf(PropTypes.object),
   useIsScrolling: PropTypes.bool,
+  overscanRowCount: PropTypes.number,
   hoveredRowKey: PropTypes.string,
+  style: PropTypes.object,
+  onScrollbarPresenceChange: PropTypes.func,
   onScroll: PropTypes.func,
   onRowsRendered: PropTypes.func,
-  onScrollbarPresenceChange: PropTypes.func,
   headerRenderer: PropTypes.func.isRequired,
@@ -230,0 +238,0 @@ rowRenderer: PropTypes.func.isRequired

es/index.js

@@ -7,3 +7,3 @@ export { default } from './BaseTable';
 export { default as TableRow } from './TableRow';
-export { renderElement, normalizeColumns, isObjectEqual, callOrReturn, hasChildren, unflatten, flattenOnKeys } from './utils';
+export { renderElement, normalizeColumns, isObjectEqual, callOrReturn, hasChildren, unflatten, flattenOnKeys, getScrollbarSize } from './utils';
 //# sourceMappingURL=index.js.map

es/utils.js

@@ -132,2 +132,22 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 }
+export function noop() {} // copied from dom-helpers
+
+var scrollbarSize;
+export function getScrollbarSize(recalculate) {
+  if (!scrollbarSize && scrollbarSize !== 0 || recalculate) {
+    if (typeof window !== 'undefined' && window.document && window.document.createElement) {
+      var scrollDiv = document.createElement('div');
+      scrollDiv.style.position = 'absolute';
+      scrollDiv.style.top = '-9999px';
+      scrollDiv.style.width = '50px';
+      scrollDiv.style.height = '50px';
+      scrollDiv.style.overflow = 'scroll';
+      document.body.appendChild(scrollDiv);
+      scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+      document.body.removeChild(scrollDiv);
+    }
+  }
+
+  return scrollbarSize;
+}
 //# sourceMappingURL=utils.js.map

lib/AutoResizer.js

@@ -12,3 +12,3 @@ "use strict";
 
-var _AutoSizer = _interopRequireDefault(require("react-virtualized/dist/commonjs/AutoSizer"));
+var _reactVirtualizedAutoSizer = _interopRequireDefault(require("react-virtualized-auto-sizer"));
 
@@ -43,3 +43,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-  return _react.default.createElement(_AutoSizer.default, {
+  return _react.default.createElement(_reactVirtualizedAutoSizer.default, {
     className: className,
@@ -46,0 +46,0 @@ disableWidth: disableWidth,

lib/BaseTable.js

@@ -16,4 +16,2 @@ "use strict";
 
-var _noop = _interopRequireDefault(require("lodash/noop"));
-
 var _get = _interopRequireDefault(require("lodash/get"));
@@ -107,4 +105,3 @@
     _this = _possibleConstructorReturn(this, _getPrototypeOf(BaseTable).call(this, props));
-    var footerHeight = props.footerHeight,
-        columns = props.columns,
+    var columns = props.columns,
         children = props.children,
@@ -114,6 +111,2 @@ expandedRowKeys = props.expandedRowKeys,
     _this.state = {
-      // used for auto height table
-      tableHeight: _this._getHeaderHeight() + footerHeight,
-      scrollbarWidth: 0,
-      horizontalScrollbarWidth: 0,
       hoveredRowKey: null,
@@ -133,3 +126,2 @@ resizingKey: null,
     _this.renderHeaderCell = _this.renderHeaderCell.bind(_assertThisInitialized(_this));
-    _this._handleScrollbarPresenceChange = _this._handleScrollbarPresenceChange.bind(_assertThisInitialized(_this));
     _this._handleScroll = _this._handleScroll.bind(_assertThisInitialized(_this));
@@ -156,2 +148,6 @@ _this._handleVerticalScroll = _this._handleVerticalScroll.bind(_assertThisInitialized(_this));
     _this._depthMap = {};
+    _this._horizontalScrollbarSize = 0;
+    _this._verticalScrollbarSize = 0;
+    _this._scrollbarPresenceChanged = false;
+    _this._scrollbarSizeMeasured = (0, _utils.getScrollbarSize)() !== undefined;
     return _this;
@@ -248,6 +244,16 @@ }
     /**
-     * Ensure row is visible.
-     * This method can be used to safely scroll back to a row that a user has scrolled away from even if it was previously scrolled to.
-     *
-     * @param {number} rowIndex
+     * Scroll to the specified row.
+     * By default, the table will scroll as little as possible to ensure the row is visible.
+     * You can control the alignment of the row though by specifying an align property. Acceptable values are:
+     * 
+     * - `auto` (default) - Scroll as little as possible to ensure the row is visible.
+     *  (If the row is already visible, it won't scroll at all.)
+     * - `smart` - If the row is already visible, don't scroll at all. If it is less than one viewport away,
+     *  scroll as little as possible so that it becomes visible. 
+     *  If it is more than one viewport away, scroll so that it is centered within the grid.
+     * - `center` - Center align the row within the table.
+     * - `end` - Align the row to the bottom, right hand side of the table.
+     * - `start` - Align the row to the top, left hand of the table.
+      * @param {number} rowIndex 
+     * @param {string} align 
      */
@@ -259,5 +265,6 @@
       var rowIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      this.table && this.table.scrollToRow(rowIndex);
-      this.leftTable && this.leftTable.scrollToRow(rowIndex);
-      this.rightTable && this.rightTable.scrollToRow(rowIndex);
+      var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
+      this.table && this.table.scrollToRow(rowIndex, align);
+      this.leftTable && this.leftTable.scrollToRow(rowIndex, align);
+      this.rightTable && this.rightTable.scrollToRow(rowIndex, align);
     }
@@ -562,19 +569,12 @@ /**
       var _this$props5 = this.props,
+          width = _this$props5.width,
           headerHeight = _this$props5.headerHeight,
           rowHeight = _this$props5.rowHeight,
           fixed = _this$props5.fixed,
-          rest = _objectWithoutProperties(_this$props5, ["headerHeight", "rowHeight", "fixed"]);
+          rest = _objectWithoutProperties(_this$props5, ["width", "headerHeight", "rowHeight", "fixed"]);
 
-      var _this$state = this.state,
-          scrollbarWidth = _this$state.scrollbarWidth,
-          hoveredRowKey = _this$state.hoveredRowKey,
-          resizingKey = _this$state.resizingKey,
-          resizingWidth = _this$state.resizingWidth;
+      var height = this._getTableHeight();
 
-      var _this$_getTableSize = this._getTableSize(),
-          width = _this$_getTableSize.width,
-          height = _this$_getTableSize.height;
+      var tableWidth = width - this._verticalScrollbarSize;
 
-      var tableWidth = width - scrollbarWidth;
-
       if (fixed) {
@@ -586,6 +586,4 @@ var columnsWidth = this.columnManager.getColumnsWidth(); // make sure `scrollLeft` is always integer to fix a sync bug when scrolling to end horizontally
 
-      return _react.default.createElement(_GridTable.default, _extends({}, rest, {
+      return _react.default.createElement(_GridTable.default, _extends({}, rest, this.state, {
         className: this._prefixClass('table-main'),
-        style: undefined // don't pass style to inner Grid
-        ,
         ref: this._setMainTableRef,
@@ -598,12 +596,8 @@ data: this._data,
         rowHeight: rowHeight,
-        headerWidth: tableWidth + (fixed ? scrollbarWidth : 0),
+        headerWidth: tableWidth + (fixed ? this._verticalScrollbarSize : 0),
         bodyWidth: tableWidth,
         headerRenderer: this.renderHeader,
         rowRenderer: this.renderRow,
-        hoveredRowKey: hoveredRowKey,
-        resizingKey: resizingKey,
-        resizingWidth: resizingWidth,
         onScroll: this._handleScroll,
-        onRowsRendered: this._handleRowsRendered,
-        onScrollbarPresenceChange: this._handleScrollbarPresenceChange
+        onRowsRendered: this._handleRowsRendered
       }));
@@ -617,24 +611,14 @@ }
       var _this$props6 = this.props,
+          width = _this$props6.width,
           headerHeight = _this$props6.headerHeight,
           rowHeight = _this$props6.rowHeight,
-          rest = _objectWithoutProperties(_this$props6, ["headerHeight", "rowHeight"]);
+          rest = _objectWithoutProperties(_this$props6, ["width", "headerHeight", "rowHeight"]);
 
-      var _this$state2 = this.state,
-          scrollbarWidth = _this$state2.scrollbarWidth,
-          hoveredRowKey = _this$state2.hoveredRowKey,
-          resizingKey = _this$state2.resizingKey,
-          resizingWidth = _this$state2.resizingWidth;
-
-      var _this$_getTableSize2 = this._getTableSize(),
-          width = _this$_getTableSize2.width;
-
       var containerHeight = this._getFrozenContainerHeight();
 
-      var offset = scrollbarWidth || 20;
+      var offset = this._verticalScrollbarSize || 20;
       var columnsWidth = this.columnManager.getLeftFrozenColumnsWidth();
-      return _react.default.createElement(_GridTable.default, _extends({}, rest, {
+      return _react.default.createElement(_GridTable.default, _extends({}, rest, this.state, {
         containerStyle: this._getLeftTableContainerStyle(columnsWidth, width, containerHeight),
         className: this._prefixClass('table-frozen-left'),
-        style: undefined // don't pass style to inner Grid
-        ,
         ref: this._setLeftTableRef,
@@ -651,8 +635,4 @@ data: this._data,
         rowRenderer: this.renderRow,
-        hoveredRowKey: hoveredRowKey,
-        resizingKey: resizingKey,
-        resizingWidth: resizingWidth,
         onScroll: this._handleVerticalScroll,
-        onRowsRendered: _noop.default,
-        onScrollbarPresenceChange: _noop.default
+        onRowsRendered: _utils.noop
       }));
@@ -666,23 +646,14 @@ }
       var _this$props7 = this.props,
+          width = _this$props7.width,
           headerHeight = _this$props7.headerHeight,
           rowHeight = _this$props7.rowHeight,
-          rest = _objectWithoutProperties(_this$props7, ["headerHeight", "rowHeight"]);
+          rest = _objectWithoutProperties(_this$props7, ["width", "headerHeight", "rowHeight"]);
 
-      var _this$state3 = this.state,
-          scrollbarWidth = _this$state3.scrollbarWidth,
-          hoveredRowKey = _this$state3.hoveredRowKey,
-          resizingKey = _this$state3.resizingKey,
-          resizingWidth = _this$state3.resizingWidth;
-
-      var _this$_getTableSize3 = this._getTableSize(),
-          width = _this$_getTableSize3.width;
-
       var containerHeight = this._getFrozenContainerHeight();
 
       var columnsWidth = this.columnManager.getRightFrozenColumnsWidth();
-      return _react.default.createElement(_GridTable.default, _extends({}, rest, {
+      var scrollbarWidth = this._verticalScrollbarSize;
+      return _react.default.createElement(_GridTable.default, _extends({}, rest, this.state, {
         containerStyle: this._getLeftTableContainerStyle(columnsWidth + scrollbarWidth, width, containerHeight),
         className: this._prefixClass('table-frozen-right'),
-        style: undefined // don't pass style to inner Grid
-        ,
         ref: this._setRightTableRef,
@@ -699,8 +670,4 @@ data: this._data,
         rowRenderer: this.renderRow,
-        hoveredRowKey: hoveredRowKey,
-        resizingKey: resizingKey,
-        resizingWidth: resizingWidth,
         onScroll: this._handleVerticalScroll,
-        onRowsRendered: _noop.default,
-        onScrollbarPresenceChange: _noop.default
+        onRowsRendered: _utils.noop
       }));
@@ -711,6 +678,7 @@ }
     value: function renderResizingLine() {
-      var _this$state4 = this.state,
-          resizingKey = _this$state4.resizingKey,
-          scrollbarWidth = _this$state4.scrollbarWidth;
-      if (!this.props.fixed || !resizingKey) return null;
+      var _this$props8 = this.props,
+          width = _this$props8.width,
+          fixed = _this$props8.fixed;
+      var resizingKey = this.state.resizingKey;
+      if (!fixed || !resizingKey) return null;
       var columns = this.columnManager.getMainColumns();
@@ -721,7 +689,2 @@ var idx = columns.findIndex(function (column) {
       var column = this.columnManager.getColumn(resizingKey);
-
-      var _this$_getTableSize4 = this._getTableSize(),
-          width = _this$_getTableSize4.width,
-          height = _this$_getTableSize4.height;
-
       var left = this.columnManager.recomputeColumnsWidth(columns.slice(0, idx + 1));
@@ -732,3 +695,3 @@
       } else if (column.frozen === _Column.FrozenDirection.RIGHT) {
-        left = width - scrollbarWidth - this.columnManager.recomputeColumnsWidth(columns.slice(idx + 1));
+        left = width - this._verticalScrollbarSize - this.columnManager.recomputeColumnsWidth(columns.slice(idx + 1));
       }
@@ -740,3 +703,3 @@
         transform: 'translateX(-3px)',
-        height: height - this.state.horizontalScrollbarWidth
+        height: this._getTableHeight() - this._horizontalScrollbarSize
       };
@@ -751,5 +714,5 @@ return _react.default.createElement("div", {
     value: function renderFooter() {
-      var _this$props8 = this.props,
-          footerHeight = _this$props8.footerHeight,
-          footerRenderer = _this$props8.footerRenderer;
+      var _this$props9 = this.props,
+          footerHeight = _this$props9.footerHeight,
+          footerRenderer = _this$props9.footerRenderer;
       if (footerHeight === 0) return null;
@@ -766,6 +729,6 @@ return _react.default.createElement("div", {
     value: function renderEmptyLayer() {
-      var _this$props9 = this.props,
-          data = _this$props9.data,
-          footerHeight = _this$props9.footerHeight,
-          emptyRenderer = _this$props9.emptyRenderer;
+      var _this$props10 = this.props,
+          data = _this$props10.data,
+          footerHeight = _this$props10.footerHeight,
+          emptyRenderer = _this$props10.emptyRenderer;
       if (data && data.length) return null;
@@ -792,17 +755,17 @@
   }, {
-    key: "renderTable",
-    value: function renderTable() {
+    key: "render",
+    value: function render() {
       var _cn6;
 
-      var _this$props10 = this.props,
-          classPrefix = _this$props10.classPrefix,
-          fixed = _this$props10.fixed,
-          data = _this$props10.data,
-          frozenData = _this$props10.frozenData,
-          expandColumnKey = _this$props10.expandColumnKey,
-          disabled = _this$props10.disabled,
-          className = _this$props10.className,
-          style = _this$props10.style,
-          footerHeight = _this$props10.footerHeight;
-      var cls = (0, _classnames.default)(classPrefix, className, (_cn6 = {}, _defineProperty(_cn6, "".concat(classPrefix, "--fixed"), fixed), _defineProperty(_cn6, "".concat(classPrefix, "--expandable"), !!expandColumnKey), _defineProperty(_cn6, "".concat(classPrefix, "--empty"), data.length === 0), _defineProperty(_cn6, "".concat(classPrefix, "--has-frozen-rows"), frozenData.length > 0), _defineProperty(_cn6, "".concat(classPrefix, "--has-frozen-columns"), this.columnManager.hasFrozenColumns()), _defineProperty(_cn6, "".concat(classPrefix, "--disabled"), disabled), _cn6));
+      var _this$props11 = this.props,
+          classPrefix = _this$props11.classPrefix,
+          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;
 
@@ -813,14 +776,14 @@ if (expandColumnKey) {
         this._data = data;
-      }
+      } // should be after `this._data` assigned
 
-      var _this$_getTableSize5 = this._getTableSize(),
-          width = _this$_getTableSize5.width,
-          height = _this$_getTableSize5.height;
 
+      this._calcScrollbarSizes();
+
       var containerStyle = _objectSpread({}, style, {
         width: width,
-        height: height + footerHeight,
+        height: this._getTableHeight() + footerHeight,
         position: 'relative'
       });
 
+      var cls = (0, _classnames.default)(classPrefix, className, (_cn6 = {}, _defineProperty(_cn6, "".concat(classPrefix, "--fixed"), fixed), _defineProperty(_cn6, "".concat(classPrefix, "--expandable"), !!expandColumnKey), _defineProperty(_cn6, "".concat(classPrefix, "--empty"), data.length === 0), _defineProperty(_cn6, "".concat(classPrefix, "--has-frozen-rows"), frozenData.length > 0), _defineProperty(_cn6, "".concat(classPrefix, "--has-frozen-columns"), this.columnManager.hasFrozenColumns()), _defineProperty(_cn6, "".concat(classPrefix, "--disabled"), disabled), _cn6));
       return _react.default.createElement("div", {
@@ -832,15 +795,2 @@ className: cls,
   }, {
-    key: "render",
-    value: function render() {
-      var _this$props11 = this.props,
-          width = _this$props11.width,
-          height = _this$props11.height,
-          maxHeight = _this$props11.maxHeight;
-      var tableHeight = this.state.tableHeight;
-      return this.renderTable({
-        width: width,
-        height: maxHeight > 0 ? tableHeight : height
-      });
-    }
-  }, {
     key: "componentWillReceiveProps",
@@ -874,3 +824,9 @@ value: function componentWillReceiveProps(nextProps) {
     value: function componentDidMount() {
-      this._maybeUpdateTableHeight();
+      // in SSR getScrollbarSize() === undefined, so we have to measure again here
+      if (!this._scrollbarSizeMeasured) {
+        (0, _utils.getScrollbarSize)();
+        this.setState({});
+      }
+
+      this._maybeScrollbarPresenceChange();
     }
@@ -880,3 +836,3 @@ }, {
     value: function componentDidUpdate(prevProps, prevState) {
-      this._maybeUpdateTableHeight();
+      this._maybeScrollbarPresenceChange();
     }
@@ -910,42 +866,2 @@ }, {
   }, {
-    key: "_maybeUpdateTableHeight",
-    value: function _maybeUpdateTableHeight() {
-      var _this$props12 = this.props,
-          maxHeight = _this$props12.maxHeight,
-          footerHeight = _this$props12.footerHeight;
-
-      if (maxHeight > 0) {
-        var horizontalScrollbarWidth = this.state.horizontalScrollbarWidth;
-
-        var frozenRowsHeight = this._getFrozenRowsHeight();
-
-        var totalRowsHeight = this.getTotalRowsHeight();
-
-        var headerHeight = this._getHeaderHeight();
-
-        var totalHeight = headerHeight + footerHeight + frozenRowsHeight + totalRowsHeight + horizontalScrollbarWidth;
-        var tableHeight = Math.min(totalHeight, maxHeight);
-
-        if (tableHeight !== this.state.tableHeight) {
-          this.setState({
-            tableHeight: tableHeight
-          });
-        }
-      }
-    }
-  }, {
-    key: "_getTableSize",
-    value: function _getTableSize() {
-      var _this$props13 = this.props,
-          width = _this$props13.width,
-          height = _this$props13.height,
-          maxHeight = _this$props13.maxHeight,
-          footerHeight = _this$props13.footerHeight;
-      var tableHeight = this.state.tableHeight;
-      return {
-        width: width,
-        height: (maxHeight > 0 ? tableHeight : height) - footerHeight
-      };
-    }
-  }, {
     key: "_getHeaderHeight",
@@ -966,25 +882,40 @@ value: function _getHeaderHeight() {
     value: function _getFrozenRowsHeight() {
-      var _this$props14 = this.props,
-          frozenData = _this$props14.frozenData,
-          rowHeight = _this$props14.rowHeight;
+      var _this$props12 = this.props,
+          frozenData = _this$props12.frozenData,
+          rowHeight = _this$props12.rowHeight;
       return frozenData.length * rowHeight;
     }
   }, {
-    key: "_getClientHeight",
-    value: function _getClientHeight() {
-      if (this._scroll.clientHeight) return this._scroll.clientHeight;
-      if (!this.props.height) return 0;
-      return this.props.height - this._getHeaderHeight() - this.props.footerHeight - this._getFrozenRowsHeight();
+    key: "_getTableHeight",
+    value: function _getTableHeight() {
+      var _this$props13 = this.props,
+          height = _this$props13.height,
+          maxHeight = _this$props13.maxHeight,
+          footerHeight = _this$props13.footerHeight;
+      var tableHeight = height - footerHeight;
+
+      if (maxHeight > 0) {
+        var frozenRowsHeight = this._getFrozenRowsHeight();
+
+        var totalRowsHeight = this.getTotalRowsHeight();
+
+        var headerHeight = this._getHeaderHeight();
+
+        var totalHeight = headerHeight + frozenRowsHeight + totalRowsHeight + this._horizontalScrollbarSize;
+        tableHeight = Math.min(totalHeight, maxHeight - footerHeight);
+      }
+
+      return tableHeight;
     }
   }, {
+    key: "_getBodyHeight",
+    value: function _getBodyHeight() {
+      return this._getTableHeight() - this._getHeaderHeight() - this._getFrozenRowsHeight();
+    }
+  }, {
     key: "_getFrozenContainerHeight",
     value: function _getFrozenContainerHeight() {
       var maxHeight = this.props.maxHeight;
-      var horizontalScrollbarWidth = this.state.horizontalScrollbarWidth;
+      var tableHeight = this._getTableHeight() - (this._data.length > 0 ? this._horizontalScrollbarSize : 0); // in auto height mode tableHeight = totalHeight
 
-      var _this$_getTableSize6 = this._getTableSize(),
-          height = _this$_getTableSize6.height;
-
-      var tableHeight = height - (this._data.length > 0 ? horizontalScrollbarWidth : 0); // in auto height mode tableHeight = totalHeight
-
       if (maxHeight > 0) return tableHeight;
@@ -997,2 +928,49 @@
   }, {
+    key: "_calcScrollbarSizes",
+    value: function _calcScrollbarSizes() {
+      var _this$props14 = this.props,
+          fixed = _this$props14.fixed,
+          width = _this$props14.width;
+      var totalRowsHeight = this.getTotalRowsHeight();
+      var totalColumnsWidth = this.getTotalColumnsWidth();
+      var scrollbarSize = (0, _utils.getScrollbarSize)() || 0;
+      var prevHorizontalScrollbarSize = this._horizontalScrollbarSize;
+      var prevVerticalScrollbarSize = this._verticalScrollbarSize; // we have to set `this._horizontalScrollbarSize` before calling `this._getBodyHeight`
+
+      if (!fixed || totalColumnsWidth <= width - scrollbarSize) {
+        this._horizontalScrollbarSize = 0;
+        this._verticalScrollbarSize = totalRowsHeight > this._getBodyHeight() ? scrollbarSize : 0;
+      } else {
+        if (totalColumnsWidth > width) {
+          this._horizontalScrollbarSize = scrollbarSize;
+          this._verticalScrollbarSize = totalRowsHeight > this._getBodyHeight() - this._horizontalScrollbarSize ? scrollbarSize : 0;
+        } else {
+          this._horizontalScrollbarSize = 0;
+          this._verticalScrollbarSize = 0;
+
+          if (totalRowsHeight > this._getBodyHeight()) {
+            this._horizontalScrollbarSize = scrollbarSize;
+            this._verticalScrollbarSize = scrollbarSize;
+          }
+        }
+      }
+
+      if (prevHorizontalScrollbarSize !== this._horizontalScrollbarSize || prevVerticalScrollbarSize !== this._verticalScrollbarSize) {
+        this._scrollbarPresenceChanged = true;
+      }
+    }
+  }, {
+    key: "_maybeScrollbarPresenceChange",
+    value: function _maybeScrollbarPresenceChange() {
+      if (this._scrollbarPresenceChanged) {
+        var onScrollbarPresenceChange = this.props.onScrollbarPresenceChange;
+        this._scrollbarPresenceChanged = false;
+        onScrollbarPresenceChange({
+          size: (0, _utils.getScrollbarSize)(),
+          horizontal: this._horizontalScrollbarSize > 0,
+          vertical: this._verticalScrollbarSize > 0
+        });
+      }
+    }
+  }, {
     key: "_maybeCallOnEndReached",
@@ -1007,8 +985,7 @@ value: function _maybeCallOnEndReached() {
 
-      var clientHeight = this._getClientHeight();
+      var clientHeight = this._getBodyHeight(); // onEndReached is not available is maxHeight is set
 
-      var horizontalScrollbarWidth = this.state.horizontalScrollbarWidth; // onEndReached is not available is maxHeight is set
 
       if (maxHeight || !onEndReached || !clientHeight || !scrollHeight) return;
-      var distanceFromEnd = scrollHeight - scrollTop - clientHeight + horizontalScrollbarWidth;
+      var distanceFromEnd = scrollHeight - scrollTop - clientHeight + this._horizontalScrollbarSize;
 
@@ -1024,18 +1001,2 @@ if (this._lastScannedRowIndex >= 0 && distanceFromEnd <= onEndReachedThreshold && (this._hasDataChangedSinceEndReached || scrollHeight !== this._scrollHeight)) {
   }, {
-    key: "_handleScrollbarPresenceChange",
-    value: function _handleScrollbarPresenceChange(_ref8) {
-      var size = _ref8.size,
-          vertical = _ref8.vertical,
-          horizontal = _ref8.horizontal;
-      this.setState({
-        scrollbarWidth: vertical ? size : 0,
-        horizontalScrollbarWidth: horizontal ? size : 0
-      });
-      this.props.onScrollbarPresenceChange({
-        size: size,
-        vertical: vertical,
-        horizontal: horizontal
-      });
-    }
-  }, {
     key: "_handleScroll",
@@ -1050,4 +1011,4 @@ value: function _handleScroll(args) {
     key: "_handleVerticalScroll",
-    value: function _handleVerticalScroll(_ref9) {
-      var scrollTop = _ref9.scrollTop;
+    value: function _handleVerticalScroll(_ref8) {
+      var scrollTop = _ref8.scrollTop;
       var lastScrollTop = this._scroll.scrollTop || 0;
@@ -1070,5 +1031,5 @@ this.scrollToTop(scrollTop);
     key: "_handleRowHover",
-    value: function _handleRowHover(_ref10) {
-      var hovered = _ref10.hovered,
-          rowKey = _ref10.rowKey;
+    value: function _handleRowHover(_ref9) {
+      var hovered = _ref9.hovered,
+          rowKey = _ref9.rowKey;
       this.setState({
@@ -1080,7 +1041,7 @@ hoveredRowKey: hovered ? rowKey : null
     key: "_handleRowExpand",
-    value: function _handleRowExpand(_ref11) {
-      var expanded = _ref11.expanded,
-          rowData = _ref11.rowData,
-          rowIndex = _ref11.rowIndex,
-          rowKey = _ref11.rowKey;
+    value: function _handleRowExpand(_ref10) {
+      var expanded = _ref10.expanded,
+          rowData = _ref10.rowData,
+          rowIndex = _ref10.rowIndex,
+          rowKey = _ref10.rowKey;
       var expandedRowKeys = (0, _utils.cloneArray)(this.state.expandedRowKeys);
@@ -1115,4 +1076,4 @@
     key: "_handleColumnResize",
-    value: function _handleColumnResize(_ref12, width) {
-      var key = _ref12.key;
+    value: function _handleColumnResize(_ref11, width) {
+      var key = _ref11.key;
       this.columnManager.setColumnWidth(key, width);
@@ -1130,4 +1091,4 @@ this.setState({
     key: "_handleColumnResizeStart",
-    value: function _handleColumnResizeStart(_ref13) {
-      var key = _ref13.key;
+    value: function _handleColumnResizeStart(_ref12) {
+      var key = _ref12.key;
       this.setState({
@@ -1185,9 +1146,9 @@ resizingKey: key
   onEndReachedThreshold: 500,
-  onScroll: _noop.default,
-  onRowsRendered: _noop.default,
-  onScrollbarPresenceChange: _noop.default,
-  onRowExpand: _noop.default,
-  onExpandedRowsChange: _noop.default,
-  onColumnSort: _noop.default,
-  onColumnResize: _noop.default
+  onScroll: _utils.noop,
+  onRowsRendered: _utils.noop,
+  onScrollbarPresenceChange: _utils.noop,
+  onRowExpand: _utils.noop,
+  onExpandedRowsChange: _utils.noop,
+  onColumnSort: _utils.noop,
+  onColumnResize: _utils.noop
 };
@@ -1412,3 +1373,10 @@ BaseTable.propTypes = {
    * A callback function when scrolling the table
-   * The handler is of the shape of `({ scrollLeft, scrollTop }) => *`
+   * The handler is of the shape of `({ scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested }) => *`
+   *
+   * `scrollLeft` and `scrollTop` are numbers.
+   *
+   * `horizontalDirection` and `verticalDirection` are either `forward` or `backward`.
+   *
+   * `scrollUpdateWasRequested` is a boolean. This value is true if the scroll was caused by `scrollTo*`,
+   * and false if it was the result of a user interaction in the browser.
    */
@@ -1415,0 +1383,0 @@ onScroll: _propTypes.default.func,

lib/ColumnResizer.js

@@ -18,3 +18,3 @@ "use strict";
 
-var _noop = _interopRequireDefault(require("lodash/noop"));
+var _utils = require("./utils");
 
@@ -65,3 +65,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
     _this.width = 0;
-    _this._handleDrag = _this._handleDrag.bind(_assertThisInitialized(_this));
+    _this._handleDrag = (0, _throttle.default)(_this._handleDrag.bind(_assertThisInitialized(_this)), THROTTLE_WAIT);
     _this._handleStart = _this._handleStart.bind(_assertThisInitialized(_this));
@@ -86,3 +86,3 @@ _this._handleStop = _this._handleStop.bind(_assertThisInitialized(_this));
         onStart: this._handleStart,
-        onDrag: (0, _throttle.default)(this._handleDrag, THROTTLE_WAIT),
+        onDrag: this._handleDrag,
         onStop: this._handleStop
@@ -156,5 +156,5 @@ }, _react.default.createElement("div", {
   width: 3,
-  onResizeStart: _noop.default,
-  onResize: _noop.default,
-  onResizeStop: _noop.default
+  onResizeStart: _utils.noop,
+  onResize: _utils.noop,
+  onResizeStop: _utils.noop
 };
@@ -161,0 +161,0 @@ ColumnResizer.propTypes = {

lib/ExpandIcon.js

@@ -81,2 +81,3 @@ "use strict";
           width: '16px',
+          minWidth: '16px',
           height: '16px',
@@ -83,0 +84,0 @@ lineHeight: '16px',

lib/GridTable.js

@@ -14,8 +14,6 @@ "use strict";
 
-var _Grid = _interopRequireDefault(require("react-virtualized/dist/commonjs/Grid"));
+var _reactWindow = require("react-window");
 
 var _TableHeader = _interopRequireDefault(require("./TableHeader"));
 
-var _cellRangeRenderer = _interopRequireDefault(require("./cellRangeRenderer"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -67,5 +65,5 @@
     _this._setBodyRef = _this._setBodyRef.bind(_assertThisInitialized(_this));
-    _this._handleSectionRendered = _this._handleSectionRendered.bind(_assertThisInitialized(_this));
+    _this._itemKey = _this._itemKey.bind(_assertThisInitialized(_this));
+    _this._handleItemsRendered = _this._handleItemsRendered.bind(_assertThisInitialized(_this));
     _this.renderRow = _this.renderRow.bind(_assertThisInitialized(_this));
-    _this.renderCellRange = _this.renderCellRange.bind(_assertThisInitialized(_this));
     return _this;
@@ -84,3 +82,3 @@ }
       this.headerRef && this.headerRef.scrollTo(args.scrollLeft);
-      this.bodyRef && this.bodyRef.scrollToPosition(args);
+      this.bodyRef && this.bodyRef.scrollTo(args);
     }
@@ -90,3 +88,3 @@ }, {
     value: function scrollToTop(scrollTop) {
-      this.bodyRef && this.bodyRef.scrollToPosition({
+      this.bodyRef && this.bodyRef.scrollTo({
         scrollTop: scrollTop
@@ -107,5 +105,7 @@ });
       var rowIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-      this.bodyRef && this.bodyRef.scrollToCell({
+      var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
+      this.bodyRef && this.bodyRef.scrollToItem({
         rowIndex: rowIndex,
-        columnIndex: 0
+        columnIndex: 0,
+        align: align
       });
@@ -127,12 +127,2 @@ }
   }, {
-    key: "renderCellRange",
-    value: function renderCellRange(args) {
-      var useIsScrolling = this.props.useIsScrolling;
-      var isScrolling = useIsScrolling ? args.isScrolling : undefined;
-      return (0, _cellRangeRenderer.default)(_objectSpread({}, args, {
-        useIsScrolling: useIsScrolling,
-        isScrolling: isScrolling
-      }));
-    }
-  }, {
     key: "render",
@@ -153,5 +143,7 @@ value: function render() {
           onScroll = _this$props2.onScroll,
+          hoveredRowKey = _this$props2.hoveredRowKey,
+          overscanRowCount = _this$props2.overscanRowCount,
+          style = _this$props2.style,
           onScrollbarPresenceChange = _this$props2.onScrollbarPresenceChange,
-          hoveredRowKey = _this$props2.hoveredRowKey,
-          rest = _objectWithoutProperties(_this$props2, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "onScrollbarPresenceChange", "hoveredRowKey"]);
+          rest = _objectWithoutProperties(_this$props2, ["containerStyle", "classPrefix", "className", "data", "frozenData", "width", "height", "rowHeight", "headerWidth", "bodyWidth", "useIsScrolling", "onScroll", "hoveredRowKey", "overscanRowCount", "style", "onScrollbarPresenceChange"]);
 
@@ -169,6 +161,7 @@ var headerHeight = this._getHeaderHeight();
         className: cls
-      }, containerProps), _react.default.createElement(_Grid.default, _extends({}, rest, {
+      }, containerProps), _react.default.createElement(_reactWindow.FixedSizeGrid, _extends({}, rest, {
         className: "".concat(classPrefix, "__body"),
         ref: this._setBodyRef,
         data: data,
+        itemKey: this._itemKey,
         frozenData: frozenData,
@@ -179,11 +172,11 @@ width: width,
         rowCount: data.length,
+        overscanRowsCount: overscanRowCount,
         columnWidth: bodyWidth,
         columnCount: 1,
-        isScrollingOptOut: !useIsScrolling,
-        cellRenderer: this.renderRow,
-        cellRangeRenderer: this.renderCellRange,
+        overscanColumnsCount: 0,
+        useIsScrolling: useIsScrolling,
         hoveredRowKey: hoveredRowKey,
         onScroll: onScroll,
-        onSectionRendered: this._handleSectionRendered,
-        onScrollbarPresenceChange: onScrollbarPresenceChange
+        onItemsRendered: this._handleItemsRendered,
+        children: this.renderRow
       })), headerHeight + frozenRowsHeight > 0 && // put header after body and reverse the display order via css
@@ -217,2 +210,11 @@ // to prevent header's shadow being covered by body
   }, {
+    key: "_itemKey",
+    value: function _itemKey(_ref) {
+      var rowIndex = _ref.rowIndex;
+      var _this$props3 = this.props,
+          data = _this$props3.data,
+          rowKey = _this$props3.rowKey;
+      return data[rowIndex][rowKey];
+    }
+  }, {
     key: "_getHeaderHeight",
@@ -231,14 +233,13 @@ value: function _getHeaderHeight() {
   }, {
-    key: "_handleSectionRendered",
-    value: function _handleSectionRendered(_ref) {
-      var rowOverscanStartIndex = _ref.rowOverscanStartIndex,
-          rowOverscanStopIndex = _ref.rowOverscanStopIndex,
-          rowStartIndex = _ref.rowStartIndex,
-          rowStopIndex = _ref.rowStopIndex;
-      var onRowsRendered = this.props.onRowsRendered;
-      onRowsRendered({
-        overscanStartIndex: rowOverscanStartIndex,
-        overscanStopIndex: rowOverscanStopIndex,
-        startIndex: rowStartIndex,
-        stopIndex: rowStopIndex
+    key: "_handleItemsRendered",
+    value: function _handleItemsRendered(_ref2) {
+      var overscanRowStartIndex = _ref2.overscanRowStartIndex,
+          overscanRowStopIndex = _ref2.overscanRowStopIndex,
+          visibleRowStartIndex = _ref2.visibleRowStartIndex,
+          visibleRowStopIndex = _ref2.visibleRowStopIndex;
+      this.props.onRowsRendered({
+        overscanStartIndex: overscanRowStartIndex,
+        overscanStopIndex: overscanRowStopIndex,
+        startIndex: visibleRowStartIndex,
+        stopIndex: visibleRowStopIndex
       });
@@ -263,8 +264,11 @@ }
   data: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  rowKey: _propTypes.default.string.isRequired,
   frozenData: _propTypes.default.arrayOf(_propTypes.default.object),
   useIsScrolling: _propTypes.default.bool,
+  overscanRowCount: _propTypes.default.number,
   hoveredRowKey: _propTypes.default.string,
+  style: _propTypes.default.object,
+  onScrollbarPresenceChange: _propTypes.default.func,
   onScroll: _propTypes.default.func,
   onRowsRendered: _propTypes.default.func,
-  onScrollbarPresenceChange: _propTypes.default.func,
   headerRenderer: _propTypes.default.func.isRequired,
@@ -271,0 +275,0 @@ rowRenderer: _propTypes.default.func.isRequired

lib/index.js

@@ -96,2 +96,8 @@ "use strict";
 });
+Object.defineProperty(exports, "getScrollbarSize", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getScrollbarSize;
+  }
+});
 
@@ -98,0 +104,0 @@ var _BaseTable = _interopRequireDefault(require("./BaseTable"));

lib/utils.js

@@ -14,2 +14,4 @@ "use strict";
 exports.cloneArray = cloneArray;
+exports.noop = noop;
+exports.getScrollbarSize = getScrollbarSize;
 
@@ -143,2 +145,25 @@ var _react = _interopRequireDefault(require("react"));
 }
+
+function noop() {} // copied from dom-helpers
+
+
+var scrollbarSize;
+
+function getScrollbarSize(recalculate) {
+  if (!scrollbarSize && scrollbarSize !== 0 || recalculate) {
+    if (typeof window !== 'undefined' && window.document && window.document.createElement) {
+      var scrollDiv = document.createElement('div');
+      scrollDiv.style.position = 'absolute';
+      scrollDiv.style.top = '-9999px';
+      scrollDiv.style.width = '50px';
+      scrollDiv.style.height = '50px';
+      scrollDiv.style.overflow = 'scroll';
+      document.body.appendChild(scrollDiv);
+      scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+      document.body.removeChild(scrollDiv);
+    }
+  }
+
+  return scrollbarSize;
+}
 //# sourceMappingURL=utils.js.map

package.json

 {
   "name": "react-base-table",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "a react table component to display large data set with high performance and flexibility",
@@ -51,3 +51,4 @@ "main": "lib/index.js",
     "react-draggable": "^3.0.5",
-    "react-virtualized": "^9.18.5"
+    "react-virtualized-auto-sizer": "^1.0.2",
+    "react-window": "^1.8.1"
   },
@@ -54,0 +55,0 @@ "peerDependencies": {

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

Worsened metrics

Total package byte prevSize

798636

decreased by-2.56%

Dependency count

9

increased by12.5%

Number of package files

75

decreased by-5.06%

Lines of code

5846

decreased by-2.26%

Dependency changes

• + Addedreact-virtualized-auto-sizer@^1.0.2

• + Addedreact-window@^1.8.1

• + Addedreact-virtualized-auto-sizer@1.0.24(transitive)

• + Addedreact-window@1.8.10(transitive)

• - Removedreact-virtualized@^9.18.5

• - Removedclsx@1.2.1(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removeddom-helpers@5.2.1(transitive)

• - Removedreact-lifecycles-compat@3.0.4(transitive)

• - Removedreact-virtualized@9.22.5(transitive)