fixed-data-table-2 - npm Package Compare versions

Comparing version 0.0.5-experimental-column-virtualization to 0.0.6-experimental-column-virtualization

dist/fixed-data-table.min.js.LICENSE.txt

@@ -1,5 +0,7 @@
-/*! exports provided: Cell, Column, ColumnGroup, DataCell, Table, Plugins, version */
+/*! exports provided: Cell, Column, ColumnGroup, Context, DataCell, Table, Plugins, version */
 
-/*! exports provided: PluginContext */
+/*! exports provided: CellGroupType */
 
+/*! exports provided: FixedDataTableContext */
+
 /*! exports provided: Portal, PortalWithState */
@@ -15,2 +17,4 @@
 
+/*! exports provided: createApi */
+
 /*! exports provided: default */
@@ -26,2 +30,6 @@
 
+/*! exports provided: getApiDataSelector */
+
+/*! exports provided: getApiMethodsSelector */
+
 /*! exports provided: getColumn, getColWidth, updateColWidth */
@@ -31,2 +39,4 @@
 
+/*! exports provided: getScrollActions */
+
 /*! exports provided: getScrollAnchor, scrollTo */
@@ -40,10 +50,12 @@
 
-/*! exports provided: scrollToX, scrollToY, stopScroll */
-
 /*! no static exports found */
 
-/*!************************!*\
-  !*** ./src/Context.js ***!
-  \************************/
+/*!**************************!*\
+  !*** ./src/api/index.js ***!
+  \**************************/
 
+/*!****************************!*\
+  !*** ./src/api/apiData.js ***!
+  \****************************/
+
 /*!*****************************!*\
@@ -58,2 +70,6 @@ !*** ./src/stubs/cssVar.js ***!
 /*!*******************************!*\
+  !*** ./src/api/apiMethods.js ***!
+  \*******************************/
+
+/*!*******************************!*\
   !*** ./src/reducers/index.js ***!
@@ -63,2 +79,6 @@ \*******************************/
 /*!********************************!*\
+  !*** ./src/enums/cellGroup.js ***!
+  \********************************/
+
+/*!********************************!*\
   !*** ./src/stubs/invariant.js ***!
@@ -172,2 +192,6 @@ \********************************/
 /*!**************************************!*\
+  !*** ./src/FixedDataTableContext.js ***!
+  \**************************************/
+
+/*!**************************************!*\
   !*** ./src/actions/scrollActions.js ***!
@@ -928,2 +952,10 @@ \**************************************/
 
+/*!************************************************!*\
+  !*** ./src/plugins/ExternalContextProvider.js ***!
+  \************************************************/
+
+/*!************************************************!*\
+  !*** ./src/plugins/ResizeReorder/DragProxy.js ***!
+  \************************************************/
+
 /*!*************************************************!*\
@@ -1050,6 +1082,2 @@ !*** ./node_modules/lodash/_baseAssignValue.js ***!
 /*!****************************************************!*\
-  !*** ./src/plugins/ResizeReorder/ReorderHandle.js ***!
-  \****************************************************/
-
-/*!****************************************************!*\
   !*** ./src/vendor_upstream/stubs/EventListener.js ***!
@@ -1056,0 +1084,0 @@ \****************************************************/

docs/api/ReorderCell.md

@@ -5,4 +5,12 @@ <!-- File generated from "src/plugins/ResizeReorder/ReorderCell.js" -->
 
+HOC that enables reordering functionality by rendering a handle, which can be used to drag the cell around.
 
+While dragging takes place, this components rerenders a proxy component into a seperate React root, referred here as the "Drag Proxy".
+ReorderCell then hides itself, while the Drag Proxy becomes visible and is what the user actually sees and drags around.
 
+This ensures that even if ReorderCell unmounts (which can happen when the table scrolls far away), the Drag Proxy
+which is rendered in a separate React root is still alive, and hence doesn't break dragging functionality.
+
+Once dragging ends, the proxy is destroyed, and the original ReorderCell becomes visible again.
+
 Props
@@ -60,17 +68,2 @@ -----
 
-### `scrollToX`
-
-Function to change the scroll position by interacting
-with the store.
-
-type: `func`
-
-
-### `isFixed`
-
-Whether the cells belongs to the fixed group
-
-type: `bool`
-
-
 ### `minWidth`
@@ -101,9 +94,2 @@
 
-### `getCellGroupWidth`
-
-Function to return cell group widths
-
-type: `func`
-
-
 ### `onColumnReorderEnd` (required)
@@ -110,0 +96,0 @@

docs/api/TableAPI.md

@@ -376,18 +376,2 @@ <!-- File generated from "src/FixedDataTable.js" -->
 
-### `onViewportChange`
-
-Callback that is called when the set of visible columns/rows inside the viewport changes.
-
-```
-function({
-  firstRowIndex: string, // the first visible row in the viewport
-  lastRowIndex: string, // the last visible row in the viewport
-  firstColumnIndex: string, // the first visible column in the viewport
-  lastColumnIndex: string, // the last visible column in the viewport
-})
-```
-
-type: `func`
-
-
 ### `stopReactWheelPropagation`
@@ -394,0 +378,0 @@

examples/ReorderExample.js

@@ -100,3 +100,3 @@ /**
             <Column
-              allowCellsRecycling={_.get(isReordering, columnKey, true)}
+              allowCellsRecycling={true}
               columnKey={columnKey}
@@ -103,0 +103,0 @@ key={i}

internal/actions/scrollActions.js

@@ -8,7 +8,2 @@ /**
 'use strict';
-/**
- * Scrolls the table horizontally to position
- *
- * @param {number} scrollX
- */
 
@@ -18,21 +13,70 @@ Object.defineProperty(exports, "__esModule", {
 });
-Object.defineProperty(exports, "scrollToX", {
-  enumerable: true,
-  get: function get() {
-    return _reducers.scrollToX;
-  }
-});
-Object.defineProperty(exports, "scrollToY", {
-  enumerable: true,
-  get: function get() {
-    return _reducers.scrollToY;
-  }
-});
-Object.defineProperty(exports, "stopScroll", {
-  enumerable: true,
-  get: function get() {
-    return _reducers.scrollEnd;
-  }
-});
+exports.getScrollActions = void 0;
 
-var _reducers = require('./../reducers');
+var _redux = require('redux');
+
+var _reducers = require('./../reducers');
+
+var getScrollActions = function getScrollActions(store, getProps) {
+  var scrollActions = (0, _redux.bindActionCreators)({
+    scrollToX: _reducers.scrollToX,
+    scrollToY: _reducers.scrollToY,
+    scrollEnd: _reducers.scrollEnd
+  }, store.dispatch);
+  /**
+   * Scrolls the table horizontally to position
+   *
+   * @param {number} scrollX
+   */
+
+  var smartScrollToX = function smartScrollToX(scrollPos) {
+    var _store$getState = store.getState(),
+        scrollX = _store$getState.scrollX,
+        scrolling = _store$getState.scrolling;
+
+    if (scrollPos === scrollX) {
+      return;
+    } // This is a workaround to prevent content blurring. This happens when translate3d
+    // is applied with non-rounded values to elements having text.
+
+
+    var roundedScrollPos = Math.round(scrollPos);
+
+    var _getProps = getProps(),
+        onHorizontalScroll = _getProps.onHorizontalScroll;
+
+    if (onHorizontalScroll ? onHorizontalScroll(roundedScrollPos) : true) {
+      scrollActions.scrollToX(roundedScrollPos);
+    }
+  };
+  /**
+   * Scrolls the table vertically to position
+   *
+   * @param {number} scrollY
+   */
+
+
+  var smartScrollToY = function smartScrollToY(scrollPos) {
+    var _store$getState2 = store.getState(),
+        scrollY = _store$getState2.scrollY;
+
+    if (scrollPos === scrollY) {
+      return;
+    }
+
+    var _getProps2 = getProps(),
+        onVerticalScroll = _getProps2.onVerticalScroll;
+
+    if (onVerticalScroll ? onVerticalScroll(scrollPos) : true) {
+      scrollActions.scrollToY(scrollPos);
+    }
+  };
+
+  return {
+    scrollToX: smartScrollToX,
+    scrollToY: smartScrollToY,
+    stopScroll: scrollActions.scrollEnd
+  };
+};
+
+exports.getScrollActions = getScrollActions;

internal/FixedDataTable.js

@@ -314,57 +314,18 @@ "use strict";
     scrollY) {
-      _this._scrollToX(scrollX);
+      _this.props.scrollActions.scrollToX(scrollX);
 
-      _this._scrollToY(scrollY);
+      _this.props.scrollActions.scrollToY(scrollY);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "_scrollToX", function (
-    /*number*/
-    scrollPos) {
+    _defineProperty(_assertThisInitialized(_this), "_didScroll", function (
+    /* !object */
+    prevProps) {
       var _this$props4 = _this.props,
+          onScrollStart = _this$props4.onScrollStart,
+          scrollX = _this$props4.scrollX,
+          scrollY = _this$props4.scrollY,
           onHorizontalScroll = _this$props4.onHorizontalScroll,
-          scrollActions = _this$props4.scrollActions,
-          scrollX = _this$props4.scrollX,
+          onVerticalScroll = _this$props4.onVerticalScroll,
+          ownerHeight = _this$props4.tableSize.ownerHeight,
           scrolling = _this$props4.scrolling;
-
-      if (scrollPos === scrollX) {
-        return;
-      } // This is a workaround to prevent content blurring. This happens when translate3d
-      // is applied with non-rounded values to elements having text.
-
-
-      var roundedScrollPos = Math.round(scrollPos);
-
-      if (onHorizontalScroll ? onHorizontalScroll(roundedScrollPos) : true) {
-        scrollActions.scrollToX(roundedScrollPos);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "_scrollToY", function (
-    /*number*/
-    scrollPos) {
-      var _this$props5 = _this.props,
-          onVerticalScroll = _this$props5.onVerticalScroll,
-          scrollActions = _this$props5.scrollActions,
-          scrollY = _this$props5.scrollY;
-
-      if (scrollPos === scrollY) {
-        return;
-      }
-
-      if (onVerticalScroll ? onVerticalScroll(scrollPos) : true) {
-        scrollActions.scrollToY(scrollPos);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "_didScroll", function (
-    /* !object */
-    prevProps) {
-      var _this$props6 = _this.props,
-          onScrollStart = _this$props6.onScrollStart,
-          scrollX = _this$props6.scrollX,
-          scrollY = _this$props6.scrollY,
-          onHorizontalScroll = _this$props6.onHorizontalScroll,
-          onVerticalScroll = _this$props6.onVerticalScroll,
-          ownerHeight = _this$props6.tableSize.ownerHeight,
-          scrolling = _this$props6.scrolling;
       var oldEndRowIndex = prevProps.endRowIndex,
@@ -403,12 +364,12 @@ oldFirstRowIndex = prevProps.firstRowIndex,
     _defineProperty(_assertThisInitialized(_this), "_didScrollStopSync", function () {
-      var _this$props7 = _this.props,
-          endColumnIndex = _this$props7.endColumnIndex,
-          endRowIndex = _this$props7.endRowIndex,
-          firstColumnIndex = _this$props7.firstColumnIndex,
-          firstRowIndex = _this$props7.firstRowIndex,
-          onScrollEnd = _this$props7.onScrollEnd,
-          scrollActions = _this$props7.scrollActions,
-          scrollX = _this$props7.scrollX,
-          scrollY = _this$props7.scrollY,
-          scrolling = _this$props7.scrolling;
+      var _this$props5 = _this.props,
+          endColumnIndex = _this$props5.endColumnIndex,
+          endRowIndex = _this$props5.endRowIndex,
+          firstColumnIndex = _this$props5.firstColumnIndex,
+          firstRowIndex = _this$props5.firstRowIndex,
+          onScrollEnd = _this$props5.onScrollEnd,
+          scrollActions = _this$props5.scrollActions,
+          scrollX = _this$props5.scrollX,
+          scrollY = _this$props5.scrollY,
+          scrolling = _this$props5.scrolling;
 
@@ -553,7 +514,7 @@ if (!scrolling) {
 
-      var _this$props8 = this.props,
-          width = _this$props8.tableSize.width,
-          scrollContentHeight = _this$props8.scrollContentHeight,
-          scrollY = _this$props8.scrollY,
-          scrollX = _this$props8.scrollX;
+      var _this$props6 = this.props,
+          width = _this$props6.tableSize.width,
+          scrollContentHeight = _this$props6.scrollContentHeight,
+          scrollY = _this$props6.scrollY,
+          scrollX = _this$props6.scrollX;
       var newScrollState = {
@@ -569,4 +530,4 @@ viewportHeight: visibleRowsHeight,
         scrollTo: this._scrollTo,
-        scrollToX: this._scrollToX,
-        scrollToY: this._scrollToY
+        scrollToX: this.props.scrollActions.scrollToX,
+        scrollToY: this.props.scrollActions.scrollToY
       };
@@ -591,9 +552,9 @@
 
-      var _this$props9 = this.props,
-          fixedColumnGroups = _this$props9.fixedColumnGroups,
-          fixedColumns = _this$props9.fixedColumns,
-          fixedRightColumnGroups = _this$props9.fixedRightColumnGroups,
-          fixedRightColumns = _this$props9.fixedRightColumns,
-          scrollableColumnGroups = _this$props9.scrollableColumnGroups,
-          scrollableColumns = _this$props9.scrollableColumns;
+      var _this$props7 = this.props,
+          fixedColumnGroups = _this$props7.fixedColumnGroups,
+          fixedColumns = _this$props7.fixedColumns,
+          fixedRightColumnGroups = _this$props7.fixedRightColumnGroups,
+          fixedRightColumns = _this$props7.fixedRightColumns,
+          scrollableColumnGroups = _this$props7.scrollableColumnGroups,
+          scrollableColumns = _this$props7.scrollableColumns;
 
@@ -608,17 +569,17 @@ var _tableHeightsSelector4 = (0, _tableHeights["default"])(this.props),
 
-      var _this$props10 = this.props,
-          className = _this$props10.className,
-          elementHeights = _this$props10.elementHeights,
-          gridAttributesGetter = _this$props10.gridAttributesGetter,
-          maxScrollX = _this$props10.maxScrollX,
-          maxScrollY = _this$props10.maxScrollY,
-          onColumnReorderEndCallback = _this$props10.onColumnReorderEndCallback,
-          onColumnResizeEndCallback = _this$props10.onColumnResizeEndCallback,
-          scrollContentHeight = _this$props10.scrollContentHeight,
-          scrollX = _this$props10.scrollX,
-          scrollY = _this$props10.scrollY,
-          scrolling = _this$props10.scrolling,
-          tableSize = _this$props10.tableSize,
-          touchScrollEnabled = _this$props10.touchScrollEnabled,
-          scrollbarYWidth = _this$props10.scrollbarYWidth;
+      var _this$props8 = this.props,
+          className = _this$props8.className,
+          elementHeights = _this$props8.elementHeights,
+          gridAttributesGetter = _this$props8.gridAttributesGetter,
+          maxScrollX = _this$props8.maxScrollX,
+          maxScrollY = _this$props8.maxScrollY,
+          onColumnReorderEndCallback = _this$props8.onColumnReorderEndCallback,
+          onColumnResizeEndCallback = _this$props8.onColumnResizeEndCallback,
+          scrollContentHeight = _this$props8.scrollContentHeight,
+          scrollX = _this$props8.scrollX,
+          scrollY = _this$props8.scrollY,
+          scrolling = _this$props8.scrolling,
+          tableSize = _this$props8.tableSize,
+          touchScrollEnabled = _this$props8.touchScrollEnabled,
+          scrollbarYWidth = _this$props8.scrollbarYWidth;
       var ownerHeight = tableSize.ownerHeight,
@@ -675,3 +636,3 @@ width = tableSize.width;
           fixedRightColumnsWidth: this.props.fixedRightColumnsWidth,
-          scrollToX: this._scrollToX
+          isGroupHeader: true
         });
@@ -756,3 +717,2 @@ }
         isHeader: true,
-        scrollToX: this._scrollToX,
         columnsToRender: this.props.columnsToRender,
@@ -759,0 +719,0 @@ fixedColumnsToRender: this.props.fixedColumnsToRender,

internal/FixedDataTableBufferedRows.js

@@ -149,3 +149,5 @@ "use strict";
 
-      var style = {};
+      var style = {
+        position: 'relative'
+      };
       (0, _FixedDataTableTranslateDOMPosition["default"])(style, 0, containerOffsetTop, false); // NOTE (pradeep): Sort the rows by row index so that they appear with the right order in the DOM (see #221)
@@ -152,0 +154,0 @@

internal/FixedDataTableCell.js

@@ -28,5 +28,7 @@ "use strict";
 
+var _cellGroup = require('././enums/cellGroup');
+
 var _excluded = ["cell"],
     _excluded2 = ["cell"],
-    _excluded3 = ["height", "width", "columnKey", "isHeaderOrFooter", "visible"];
+    _excluded3 = ["height", "width", "columnIndex", "columnKey", "isHeaderOrFooter", "visible"];
 
@@ -133,7 +135,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
     {
-      var _this = this;
-
       var _this$props2 = this.props,
           height = _this$props2.height,
           width = _this$props2.width,
+          columnIndex = _this$props2.columnIndex,
           columnKey = _this$props2.columnKey,
@@ -166,17 +167,12 @@ isHeaderOrFooter = _this$props2.isHeaderOrFooter,
       var cellProps = {
-        columnKey: columnKey,
-        height: height,
-        width: width
+        isHeader: this.props.isHeader,
+        isGroupHeader: this.props.isGroupHeader,
+        cellGroupType: this.props.cellGroupType,
+        columnIndex: this.props.columnIndex,
+        columnKey: this.props.columnKey,
+        height: this.props.height,
+        width: this.props.width,
+        left: this.props.left
       };
 
-      if (this.props.isHeader) {
-        cellProps = _objectSpread(_objectSpread({}, cellProps), {}, {
-          left: this.props.left,
-          isFixed: this.props.isFixed,
-          scrollToX: this.props.scrollToX,
-          getCellGroupWidth: this.props.getCellGroupWidth,
-          columnGroupWidth: this.props.columnGroupWidth
-        });
-      }
-
       if (props.rowIndex >= 0) {
@@ -191,15 +187,8 @@ cellProps.rowIndex = props.rowIndex;
         if (this.props.onColumnResizeEnd && this.props.onColumnReorderEnd) {
+          cellProps = _objectSpread(_objectSpread({}, cellProps), {}, {
+            minWidth: this.props.minWidth,
+            maxWidth: this.props.maxWidth
+          });
           content = /*#__PURE__*/_react["default"].createElement(_ReorderCell["default"], _extends({}, cellProps, {
-            onColumnReorderStart: function onColumnReorderStart(
-            /*string*/
-            columnKey) {
-              _this.props.toggleCellsRecycling(false, columnKey);
-            },
-            onColumnReorderEnd: function onColumnReorderEnd(
-            /*object*/
-            val) {
-              _this.props.toggleCellsRecycling(true);
-
-              _this.props.onColumnReorderEnd(val);
-            }
+            onColumnReorderEnd: this.props.onColumnReorderEnd
           }), /*#__PURE__*/_react["default"].createElement(_ResizeCell["default"], {
@@ -210,14 +199,3 @@ onColumnResizeEnd: this.props.onColumnResizeEnd
           content = /*#__PURE__*/_react["default"].createElement(_ReorderCell["default"], _extends({}, cellProps, {
-            onColumnReorderStart: function onColumnReorderStart(
-            /*string*/
-            columnKey) {
-              _this.props.toggleCellsRecycling(false, columnKey);
-            },
-            onColumnReorderEnd: function onColumnReorderEnd(
-            /*object*/
-            val) {
-              _this.props.toggleCellsRecycling(true);
-
-              _this.props.onColumnReorderEnd(val);
-            }
+            onColumnReorderEnd: this.props.onColumnReorderEnd
           }), props.cell);
@@ -297,2 +275,4 @@ } else {
   /**
+   * @deprecated
+   *
    * Callback that is called when resizer has been released
@@ -315,2 +295,4 @@ * and column needs to be updated.
   /**
+   * @deprecated
+   *
    * Callback that is called when reordering has been completed
@@ -337,23 +319,5 @@ * and columns need to be updated.
   /**
-   * Function to change the scroll position by interacting
-   * with the store.
-   */
-  scrollToX: _propTypes["default"].func,
-
-  /**
    * Whether the cells belongs to the fixed group
    */
-  isFixed: _propTypes["default"].bool,
-
-  /**
-   * Function which returns object consisting of keys and widths of the columns
-   * in the current cell group.
-   */
-  getCellGroupWidth: _propTypes["default"].func.isRequired,
-
-  /**
-   * @deprecated
-   * Functions which toggles cells recycling for a cell
-   */
-  toggleCellsRecycling: _propTypes["default"].func
+  cellGroupType: _propTypes["default"].oneOf([_cellGroup.CellGroupType.FIXED, _cellGroup.CellGroupType.FIXED_RIGHT, _cellGroup.CellGroupType.SCROLLABLE])
 });
@@ -360,0 +324,0 @@

internal/FixedDataTableCellDefault.js

@@ -18,3 +18,3 @@ "use strict";
 
-var _excluded = ["height", "width", "style", "className", "children", "columnKey", "rowIndex", "left", "isFixed", "scrollToX", "getCellGroupWidth", "columnGroupWidth", "maxWidth", "minWidth"];
+var _excluded = ["height", "width", "style", "className", "children", "columnKey", "columnIndex", "rowIndex", "left", "cellGroupType", "isHeader", "isGroupHeader", "maxWidth", "minWidth"];
 
@@ -100,8 +100,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
           columnKey = _this$props.columnKey,
+          columnIndex = _this$props.columnIndex,
           rowIndex = _this$props.rowIndex,
           left = _this$props.left,
-          isFixed = _this$props.isFixed,
-          scrollToX = _this$props.scrollToX,
-          getCellGroupWidth = _this$props.getCellGroupWidth,
-          columnGroupWidth = _this$props.columnGroupWidth,
+          cellGroupType = _this$props.cellGroupType,
+          isHeader = _this$props.isHeader,
+          isGroupHeader = _this$props.isGroupHeader,
           maxWidth = _this$props.maxWidth,
@@ -108,0 +108,0 @@ minWidth = _this$props.minWidth,

internal/FixedDataTableCellDefaultDeprecated.js

@@ -18,3 +18,3 @@ "use strict";
 
-var _excluded = ["height", "width", "style", "className", "children", "columnKey", "rowIndex", "left", "isFixed", "scrollToX", "getCellGroupWidth", "columnGroupWidth", "maxWidth", "minWidth"];
+var _excluded = ["height", "width", "style", "className", "children", "columnKey", "columnIndex", "rowIndex", "left", "cellGroupType", "isHeader", "isGroupHeader", "maxWidth", "minWidth"];
 
@@ -103,8 +103,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
           columnKey = _this$props.columnKey,
+          columnIndex = _this$props.columnIndex,
           rowIndex = _this$props.rowIndex,
           left = _this$props.left,
-          isFixed = _this$props.isFixed,
-          scrollToX = _this$props.scrollToX,
-          getCellGroupWidth = _this$props.getCellGroupWidth,
-          columnGroupWidth = _this$props.columnGroupWidth,
+          cellGroupType = _this$props.cellGroupType,
+          isHeader = _this$props.isHeader,
+          isGroupHeader = _this$props.isGroupHeader,
           maxWidth = _this$props.maxWidth,
@@ -111,0 +111,0 @@ minWidth = _this$props.minWidth,

internal/FixedDataTableCellGroup.js

@@ -82,35 +82,2 @@ /**
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      /**
-       * @deprecated
-       * @type {Object<string, boolean>}
-       */
-      isCellRecyclableByColumnId: {}
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getCellGroupWidth", function () {
-      var columns = _this.props.columns;
-      var cellGroupColumnWidths = {
-        keys: [],
-        widths: []
-      };
-      var columnsToRender = _this.props.columnsToRender || [];
-
-      if (_this.props.isHeader) {
-        for (var i = 0; i < columnsToRender.length; i++) {
-          var idx = columnsToRender[i];
-
-          if (idx === undefined) {
-            idx = _this._staticCells[i] && _this._staticCells[i].props.index;
-          }
-
-          var key = columns[idx].props.columnKey || 'cell_' + idx;
-          cellGroupColumnWidths.keys.push(key);
-          cellGroupColumnWidths.widths.push(columns[idx].props.width);
-        }
-      }
-
-      return cellGroupColumnWidths;
-    });
-
     _defineProperty(_assertThisInitialized(_this), "_renderCell", function
@@ -123,2 +90,4 @@ /*object*/
     columnIndex) {
+      var _React$createElement;
+
       var visible = (0, _inRange["default"])(columnIndex, _this.props.firstViewportColumnIndex, _this.props.endViewportColumnIndex);
@@ -131,45 +100,15 @@ var columnProps = _this.props.columns[columnIndex].props;
       var onColumnResizeEndCallback = columnProps.isResizable ? _this.props.onColumnResizeEndCallback : null;
-      return /*#__PURE__*/_react["default"].createElement(_FixedDataTableCell["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_FixedDataTableCell["default"], (_React$createElement = {
+        columnIndex: columnIndex,
         isScrolling: _this.props.isScrolling,
         isHeaderOrFooter: _this.props.isHeaderOrFooter,
         isHeader: _this.props.isHeader,
+        isGroupHeader: _this.props.isGroupHeader,
         align: columnProps.align,
         className: className,
         height: _this.props.rowHeight,
-        key: key,
-        columnIndex: columnIndex,
-        maxWidth: columnProps.maxWidth,
-        minWidth: columnProps.minWidth,
-        touchEnabled: _this.props.touchEnabled,
-        onColumnResizeEnd: onColumnResizeEndCallback,
-        onColumnReorderEnd: onColumnReorderEndCallback,
-        rowIndex: _this.props.rowIndex,
-        columnKey: columnProps.columnKey,
-        width: columnProps.width,
-        left: _this.props.columnOffsets[columnIndex],
-        cell: cellTemplate,
-        columnGroupWidth: _this.props.contentWidth,
-        pureRendering: pureRendering,
-        isRTL: _this.props.isRTL,
-        visible: visible,
-        isFixed: _this.props.isFixed,
-        scrollToX: _this.props.scrollToX,
-        toggleCellsRecycling: _this.toggleCellsRecycling,
-        getCellGroupWidth: _this.getCellGroupWidth
-      });
+        key: key
+      }, _defineProperty(_React$createElement, "columnIndex", columnIndex), _defineProperty(_React$createElement, "maxWidth", columnProps.maxWidth), _defineProperty(_React$createElement, "minWidth", columnProps.minWidth), _defineProperty(_React$createElement, "touchEnabled", _this.props.touchEnabled), _defineProperty(_React$createElement, "onColumnResizeEnd", onColumnResizeEndCallback), _defineProperty(_React$createElement, "onColumnReorderEnd", onColumnReorderEndCallback), _defineProperty(_React$createElement, "rowIndex", _this.props.rowIndex), _defineProperty(_React$createElement, "columnKey", columnProps.columnKey), _defineProperty(_React$createElement, "width", columnProps.width), _defineProperty(_React$createElement, "left", _this.props.columnOffsets[columnIndex]), _defineProperty(_React$createElement, "cell", cellTemplate), _defineProperty(_React$createElement, "pureRendering", pureRendering), _defineProperty(_React$createElement, "isRTL", _this.props.isRTL), _defineProperty(_React$createElement, "visible", visible), _defineProperty(_React$createElement, "cellGroupType", _this.props.cellGroupType), _React$createElement));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "toggleCellsRecycling", function (value, columnKey) {
-      // Only set in state, when value is false, means reordering has started
-      if (!value) {
-        _this.setState({
-          isCellRecyclableByColumnId: _defineProperty({}, columnKey, value)
-        });
-      } else {
-        _this.setState({
-          isCellRecyclableByColumnId: {}
-        });
-      }
-    });
-
     _this._initialRender = true;
@@ -185,9 +124,2 @@ _this._staticCells = [];
     }
-    /**
-     * Returns Object consisting of keys and widths of the columns in the current cell group.
-     *
-     * // TODO (pradeep): This is currently broken until the API changes for column virtualization are merged in.
-     * @returns {{keys: [], widths: []}}
-     */
-
   }, {
@@ -222,6 +154,2 @@ key: "render",
 
-        var columnProps = columns[columnIndex].props; // TODO (pradeep): Why check for columnProps ?
-
-        var recyclable = columnProps && _lodash["default"].get(this.state.isCellRecyclableByColumnId, [columnProps.columnKey], columnProps.allowCellsRecycling);
-
         this._staticCells[i] = this._renderCell(i, columnIndex);
@@ -312,13 +240,2 @@ }
   /**
-   * Function to change the scroll position by interacting
-   * with the store.
-   */
-  scrollToX: _propTypes["default"].func,
-
-  /**
-   * Whether the cells belongs to the fixed group
-   */
-  isFixed: _propTypes["default"].bool.isRequired,
-
-  /**
    * Type of the cell renderer to be used for each column in the cell group
@@ -325,0 +242,0 @@ */

internal/FixedDataTableContainer.js

@@ -12,4 +12,2 @@ "use strict";
 
-var _redux = require('redux');
-
 var _invariant = _interopRequireDefault(require('././stubs/invariant'));
@@ -19,3 +17,3 @@
 
-var scrollActions = _interopRequireWildcard(require('././actions/scrollActions'));
+var _scrollActions = require('././actions/scrollActions');
 
@@ -30,5 +28,5 @@ var _FixedDataTable = _interopRequireDefault(require('././FixedDataTable'));
 
-var _Context = require('././Context');
+var _FixedDataTableContext = require('././FixedDataTableContext');
 
-var _shallowEqualSelector = _interopRequireDefault(require('././helper/shallowEqualSelector'));
+var _api = require('././api');
 
@@ -39,6 +37,2 @@ var _reducers = require('././reducers');
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -74,28 +68,2 @@
 
-var memoizeContext = (0, _shallowEqualSelector["default"])([function (state) {
-  return state.maxScrollX;
-}, function (state) {
-  return state.scrollX;
-}, function (state) {
-  return state.tableSize.height;
-}, function (state) {
-  return state.bodyWidth;
-} // TODO (pradeep): This is wrongly named
-], function (
-/*number*/
-maxScrollX,
-/*number*/
-scrollX,
-/*number*/
-tableHeight,
-/*number*/
-availableScrollWidth) {
-  return {
-    maxScrollX: maxScrollX,
-    scrollX: scrollX,
-    tableHeight: tableHeight,
-    availableScrollWidth: availableScrollWidth
-  };
-});
-
 var FixedDataTableContainer = /*#__PURE__*/function (_React$Component) {
@@ -113,3 +81,5 @@ _inherits(FixedDataTableContainer, _React$Component);
     _this.reduxStore = _FixedDataTableStore["default"].get();
-    _this.scrollActions = (0, _redux.bindActionCreators)(scrollActions, _this.reduxStore.dispatch);
+    _this.scrollActions = (0, _scrollActions.getScrollActions)(_this.reduxStore, function () {
+      return _this.props;
+    });
 
@@ -127,2 +97,4 @@ _this.reduxStore.dispatch((0, _reducers.initialize)(props));
     };
+    _this.fixedDataTableApi = (0, _api.createApi)();
+    _this.previousApiValue = null;
     return _this;
@@ -142,8 +114,36 @@ }
   }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.notifyApiValueChanges();
+    }
+    /**
+     * Returns FDT's public API.
+     *
+     * @public
+     * @returns
+     */
+
+  }, {
+    key: "getApi",
+    value: function getApi() {
+      return this.fixedDataTableApi.getValue(_objectSpread(_objectSpread({}, this.props), this.reduxStore.getState()), this.scrollActions);
+    }
+    /**
+     * Notify all subscribers of the API if API value got changed.
+     */
+
+  }, {
+    key: "notifyApiValueChanges",
+    value: function notifyApiValueChanges() {
+      var fixedDataTableContextValue = this.getApi();
+
+      if (this.previousApiValue !== fixedDataTableContextValue) {
+        this.fixedDataTableApi.notify();
+        this.previousApiValue = fixedDataTableContextValue;
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
-      var contextValue = _objectSpread(_objectSpread({}, memoizeContext(_objectSpread(_objectSpread({}, this.state.boundState), this.props))), {}, {
-        isRTL: this.props.isRTL,
-        touchEnabled: this.props.touchEnabled
-      });
+      var fixedDataTableContextValue = this.getApi();
 
@@ -156,9 +156,9 @@ var fdt = /*#__PURE__*/_react["default"].createElement(_FixedDataTable["default"], _extends({}, this.props, this.state.boundState, {
       if (this.props.defaultScrollbars) {
-        return /*#__PURE__*/_react["default"].createElement(_Context.PluginContext.Provider, {
-          value: contextValue
+        return /*#__PURE__*/_react["default"].createElement(_FixedDataTableContext.FixedDataTableContext.Provider, {
+          value: fixedDataTableContextValue
         }, /*#__PURE__*/_react["default"].createElement(_ScrollContainer["default"], this.props, fdt));
       }
 
-      return /*#__PURE__*/_react["default"].createElement(_Context.PluginContext.Provider, {
-        value: contextValue
+      return /*#__PURE__*/_react["default"].createElement(_FixedDataTableContext.FixedDataTableContext.Provider, {
+        value: fixedDataTableContextValue
       }, fdt);
@@ -165,0 +165,0 @@ }

internal/FixedDataTableRoot.js

@@ -34,2 +34,8 @@ /**
 });
+Object.defineProperty(exports, "Context", {
+  enumerable: true,
+  get: function get() {
+    return _FixedDataTableContext.FixedDataTableContext;
+  }
+});
 Object.defineProperty(exports, "DataCell", {
@@ -60,3 +66,3 @@ enumerable: true,
 
-var _Context = require('././Context');
+var _FixedDataTableContext = require('././FixedDataTableContext');
 
@@ -69,6 +75,5 @@ var _ResizeCell = _interopRequireDefault(require('././plugins/ResizeReorder/ResizeCell'));
 
-var version = '0.0.5-experimental-column-virtualization';
+var version = '0.0.6-experimental-column-virtualization';
 exports.version = version;
 var Plugins = {
-  PluginContext: _Context.PluginContext,
   ResizeCell: _ResizeCell["default"],
@@ -75,0 +80,0 @@ ReorderCell: _ReorderCell["default"]

internal/FixedDataTableRow.js

@@ -33,2 +33,4 @@ /**
 
+var _cellGroup = require('././enums/cellGroup');
+
 var _excluded = ["offsetTop", "zIndex"];
@@ -317,9 +319,9 @@
         isHeader: this.props.isHeader,
+        isGroupHeader: this.props.isGroupHeader,
         isRTL: this.props.isRTL,
-        scrollX: this.props.scrollLeft,
-        isFixed: true,
         columnsToRender: this.props.fixedColumnsToRender,
         columnOffsets: this.props.fixedColumnOffsets,
         firstViewportColumnIndex: 0,
-        endViewportColumnIndex: _.size(this.props.fixedColumns)
+        endViewportColumnIndex: _.size(this.props.fixedColumns),
+        cellGroupType: _cellGroup.CellGroupType.FIXED
       });
@@ -349,8 +351,9 @@
         isHeader: this.props.isHeader,
+        isGroupHeader: this.props.isGroupHeader,
         isRTL: this.props.isRTL,
-        scrollX: this.props.scrollLeft,
         columnsToRender: this.props.fixedRightColumnsToRender,
         columnOffsets: this.props.fixedRightColumnOffsets,
         firstViewportColumnIndex: 0,
-        endViewportColumnIndex: _.size(this.props.fixedRightColumns)
+        endViewportColumnIndex: _.size(this.props.fixedRightColumns),
+        cellGroupType: _cellGroup.CellGroupType.FIXED_RIGHT
       });
@@ -380,9 +383,9 @@
         isHeader: this.props.isHeader,
-        scrollX: this.props.scrollLeft,
+        isGroupHeader: this.props.isGroupHeader,
         isRTL: this.props.isRTL,
-        scrollToX: this.props.scrollToX,
         columnsToRender: this.props.columnsToRender,
         columnOffsets: this.props.columnOffsets,
         firstViewportColumnIndex: this.props.firstViewportColumnIndex,
-        endViewportColumnIndex: this.props.endViewportColumnIndex
+        endViewportColumnIndex: this.props.endViewportColumnIndex,
+        cellGroupType: _cellGroup.CellGroupType.SCROLLABLE
       });
@@ -567,3 +570,3 @@
   /**
-   * Whether these cells belong to the header/group-header
+   * Whether these cells belong to the header
    */
@@ -573,5 +576,5 @@ isHeader: _propTypes["default"].bool,
   /**
-   * Function to change the scroll position by interacting with the store.
+   * Whether these cells belong to the group-header
    */
-  scrollToX: _propTypes["default"].func,
+  isGroupHeader: _propTypes["default"].bool,
 
@@ -578,0 +581,0 @@ /**

internal/FixedDataTableTranslateDOMPosition.js

@@ -47,2 +47,3 @@ "use strict";
 
+    style.left = 0;
     (0, _translateDOMPositionXY["default"])(style, x, y);
@@ -49,0 +50,0 @@ }

internal/plugins/ResizeReorder/ReorderCell.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _joinClasses = _interopRequireDefault(require('./../../vendor_upstream/core/joinClasses'));
@@ -19,6 +21,8 @@
 
-var _Context = require('./../../Context');
+var _FixedDataTableContext = require('./../../FixedDataTableContext');
 
-var _ReorderHandle = _interopRequireDefault(require('././ReorderHandle'));
+var _DragProxy = _interopRequireDefault(require('././DragProxy'));
 
+var _ExternalContextProvider = _interopRequireDefault(require('./../ExternalContextProvider'));
+
 var _lodash = _interopRequireDefault(require('lodash'));
@@ -30,3 +34,3 @@
 
-var _excluded = ["children", "minWidth", "maxWidth", "onColumnReorderEnd", "rowIndex", "left", "touchEnabled", "isFixed", "scrollToX", "getCellGroupWidth", "onColumnReorderStart", "columnGroupWidth"];
+var _excluded = ["onColumnReorderStart", "onColumnReorderEnd", "reorderStartEvent"];
 
@@ -37,6 +41,2 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -69,2 +69,13 @@
 var BORDER_WIDTH = 1;
+/**
+ * HOC that enables reordering functionality by rendering a handle, which can be used to drag the cell around.
+ *
+ * While dragging takes place, this components rerenders a proxy component into a seperate React root, referred here as the "Drag Proxy".
+ * ReorderCell then hides itself, while the Drag Proxy becomes visible and is what the user actually sees and drags around.
+ *
+ * This ensures that even if ReorderCell unmounts (which can happen when the table scrolls far away), the Drag Proxy
+ * which is rendered in a separate React root is still alive, and hence doesn't break dragging functionality.
+ *
+ * Once dragging ends, the proxy is destroyed, and the original ReorderCell becomes visible again.
+ */
 
@@ -88,29 +99,102 @@ var ReorderCell = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "state", {
-      isReordering: false,
-      displacement: 0
+      isReordering: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onColumnReorderStart", function (columnKey) {
-      _this.setState({
-        isReordering: true
-      });
+    _defineProperty(_assertThisInitialized(_this), "dragContainer", null);
 
-      _this.props.onColumnReorderStart(columnKey);
+    _defineProperty(_assertThisInitialized(_this), "cellRef", /*#__PURE__*/_react["default"].createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "isMounted", false);
+
+    _defineProperty(_assertThisInitialized(_this), "onTouchStart", function (ev) {
+      if (!_this.props.touchEnabled) {
+        return;
+      }
+
+      _this.onMouseDown(ev);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "translateCell", function (displacement) {
-      _this.setState({
-        displacement: displacement
-      });
+    _defineProperty(_assertThisInitialized(_this), "onMouseDown", function (event) {
+      _this.onDragStart(event);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onDragStart", function (event) {
+      _this.createDragContainer();
+
+      _this.renderDragProxy(event);
+
+      _this.props.onColumnReorderStart(_this.props.columnKey);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onColumnReorderEnd", function (ev) {
-      _this.setState({
-        isReordering: false,
-        displacement: 0
-      });
+      if (_this.isMounted) {
+        _this.setState({
+          isReordering: false
+        });
+      }
 
+      _this.removeDragContainer();
+
       _this.props.onColumnReorderEnd(ev);
     });
 
+    _defineProperty(_assertThisInitialized(_this), "createDragContainer", function () {
+      // create a container for the drag proxy
+      _this.dragContainer = document.createElement('div'); // store the column key in the DOM to easily identify what column is being dragged around
+
+      _this.dragContainer.dataset.columnKey = _this.props.columnKey;
+      _this.dragContainer.style.position = 'absolute';
+      _this.dragContainer.style.zIndex = 2; // Place the container inside the parent cell group so that our dragged cell ends up in the correct heirarchy.
+      // This is important for correct styling and layout calculations.
+
+      var cellGroup = _this.cellRef.current.closest('.fixedDataTableCellGroupLayout_cellGroup');
+
+      cellGroup.appendChild(_this.dragContainer);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getDragContainer", function () {
+      if (_this.dragContainer) {
+        return _this.dragContainer;
+      } // get the cell group containing our cell
+
+
+      var cellGroup = _this.cellRef.current.closest('.fixedDataTableCellGroupLayout_cellGroup'); // find the drag container within the cell group
+
+
+      _this.dragContainer = cellGroup.querySelector("[data-column-key=\"".concat(_this.props.columnKey, "\"]"));
+      return _this.dragContainer;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "removeDragContainer", function () {
+      // since the drag container is going to be removed, also unmount the drag proxy
+      _reactDom["default"].unmountComponentAtNode(_this.dragContainer);
+
+      _this.dragContainer.remove();
+
+      _this.dragContainer = null;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "checkIfProxyIsDragged", function () {
+      /**
+       * NOTE (pradeep): Important! Check if this cell was "already" being dragged by the user.
+       * This is a slightly rare case, and happens under the following steps:
+       *   1. User starts reordering on cell "A", which creates the draggable proxy cell "B".
+       *   2. If cell B is dragged far away such that the column associated with the cell goes outside the viewport, this effectively unmounts all cells in that column, including cell "A".
+       *   2. Now if the user drags cell "B" back such that the column associated with the cell becomes visible, then another instance of cell "A" will be mounted.
+       *   3. The new instance of cell "A" now needs to figure out that the dragged proxy cell "B" already exists, and if so it should be in a reordering state.
+       */
+      var draggedCellColumnKey = _lodash["default"].get(_this.getDragContainer(), 'dataset.columnKey');
+
+      var isReordering = _lodash["default"].toString(_this.props.columnKey) === draggedCellColumnKey;
+
+      if (isReordering) {
+        // NOTE (pradeep): rerender the drag proxy to alert it that this instance is the new parent
+        _this.renderDragProxy({});
+
+        _this.setState({
+          isReordering: true
+        });
+      }
+    });
+
     return _this;
@@ -120,19 +204,36 @@ }
   _createClass(ReorderCell, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.isMounted = true;
+      this.checkIfProxyIsDragged();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps.columnKey !== this.props.columnKey) {
+        this.checkIfProxyIsDragged();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.isMounted = false;
+    }
+  }, {
     key: "render",
     value: function render() {
+      if (this.state.isReordering) {
+        // If we're in the middle of reordering then return null here.
+        // The rendering responsibility will instead be taken care of by the drag proxy instead.
+        return null;
+      }
+
       var _this$props = this.props,
-          children = _this$props.children,
-          minWidth = _this$props.minWidth,
-          maxWidth = _this$props.maxWidth,
+          onColumnReorderStart = _this$props.onColumnReorderStart,
           onColumnReorderEnd = _this$props.onColumnReorderEnd,
-          rowIndex = _this$props.rowIndex,
-          left = _this$props.left,
-          touchEnabled = _this$props.touchEnabled,
-          isFixed = _this$props.isFixed,
-          scrollToX = _this$props.scrollToX,
-          getCellGroupWidth = _this$props.getCellGroupWidth,
-          onColumnReorderStart = _this$props.onColumnReorderStart,
-          columnGroupWidth = _this$props.columnGroupWidth,
+          reorderStartEvent = _this$props.reorderStartEvent,
           props = _objectWithoutProperties(_this$props, _excluded);
 
+      var children = props.children,
+          left = props.left;
       var className = (0, _joinClasses["default"])((0, _cx["default"])({
@@ -142,24 +243,12 @@ 'public/fixedDataTableCell/resizeReorderCellContainer': true
       var reorderClasses = (0, _joinClasses["default"])(className, (0, _cx["default"])({
-        'public/fixedDataTableCell/hasReorderHandle': true,
-        'public/fixedDataTableCell/reordering': this.state.isReordering
+        'public/fixedDataTableCell/hasReorderHandle': true
       }));
-      var DIR_SIGN = this.context.isRTL ? -1 : 1;
       var style = {
         height: props.height,
-        width: props.width - BORDER_WIDTH,
-        transform: "translateX(".concat(this.state.displacement * DIR_SIGN, "px) translateZ(0)")
+        width: props.width - BORDER_WIDTH
       };
-
-      if (this.context.isRTL) {
-        style.right = left;
-      } else {
-        style.left = left;
-      }
-
       var content;
 
       if ( /*#__PURE__*/_react["default"].isValidElement(children)) {
-        if (children.type === _ResizeCell["default"]) {
-          content = /*#__PURE__*/_react["default"].cloneElement(children, _objectSpread(_objectSpread({}, children.props), this.props));
-        } else content = /*#__PURE__*/_react["default"].cloneElement(children, props);
+        content = /*#__PURE__*/_react["default"].cloneElement(children, props);
       } else if (typeof children === 'function') {
@@ -173,14 +262,52 @@ content = children(props);
         className: reorderClasses,
+        style: style,
+        ref: this.cellRef
+      }, this.renderReorderHandle(), content);
+    }
+  }, {
+    key: "renderReorderHandle",
+    value: function renderReorderHandle() {
+      var style = {
+        height: this.props.height
+      };
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _cx["default"])({
+          'fixedDataTableCellLayout/columnReorderContainer': true,
+          'fixedDataTableCellLayout/columnReorderContainer/active': false
+        }),
+        onMouseDown: this.onMouseDown,
+        onTouchStart: this.onTouchStart,
         style: style
-      }, /*#__PURE__*/_react["default"].createElement(_ReorderHandle["default"], _extends({}, this.props, {
-        translateCell: this.translateCell,
-        onColumnReorderStart: this.onColumnReorderStart,
-        touchEnabled: this.props.touchEnabled,
-        height: this.props.height,
-        isRTL: this.context.isRTL,
-        columnKey: this.props.columnKey,
-        left: this.props.left,
-        onColumnReorderEndCallback: this.onColumnReorderEnd
-      })), content);
+      });
     }
+  }, {
+    key: "renderDragProxy",
+    value:
+    /**
+     * Render a proxy version of our cell that can be dragged around without repercussions to component unmounts.
+     */
+    function renderDragProxy(reorderStartEvent) {
+      var _this2 = this;
+
+      var additionalProps = {
+        isDragProxy: true,
+        reorderStartEvent: reorderStartEvent,
+        onColumnReorderEnd: this.onColumnReorderEnd,
+        contents: this.cellRef.current
+      };
+
+      _reactDom["default"].render(
+      /*#__PURE__*/
+      // Since we're effectively rendering the proxy in a separate VDOM root, we cannot directly pass in our context.
+      // To solve this, we use ExternalContextProvider to pass down the context value.
+      // ExternalContextProvider also ensures that even if our cell gets unmounted, the dragged cell still receives updates from context.
+      _react["default"].createElement(_ExternalContextProvider["default"], {
+        value: this.context
+      }, /*#__PURE__*/_react["default"].createElement(_DragProxy["default"], _extends({}, this.props, additionalProps))), this.getDragContainer(), // we consider our cell in a reordering state as soon as the drag proxy gets mounted
+      function () {
+        return _this2.setState({
+          isReordering: true
+        });
+      });
+    }
   }]);
@@ -191,3 +318,3 @@
 
-ReorderCell.contextType = _Context.PluginContext;
+ReorderCell.contextType = _FixedDataTableContext.FixedDataTableContext;
 ReorderCell.defaultProps = {
@@ -235,13 +362,2 @@ onColumnReorderStart: _lodash["default"].noop
   /**
-   * Function to change the scroll position by interacting
-   * with the store.
-   */
-  scrollToX: _propTypes["default"].func,
-
-  /**
-   * Whether the cells belongs to the fixed group
-   */
-  isFixed: _propTypes["default"].bool,
-
-  /**
    * The minimum width of the column.
@@ -265,7 +381,2 @@ */
   /**
-   * Function to return cell group widths
-   */
-  getCellGroupWidth: _propTypes["default"].func,
-
-  /**
    * Callback function which is called when reordering ends
@@ -272,0 +383,0 @@ * ```

internal/plugins/ResizeReorder/ResizeCell.js

@@ -16,7 +16,7 @@ "use strict";
 
-var _Context = require('./../../Context');
+var _FixedDataTableContext = require('./../../FixedDataTableContext');
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _excluded = ["children", "minWidth", "maxWidth", "onColumnResizeEnd", "onColumnReorderEnd", "rowIndex", "left", "touchEnabled", "isFixed", "scrollToX", "getCellGroupWidth", "onColumnReorderStart", "columnGroupWidth"];
+var _excluded = ["children", "minWidth", "maxWidth", "onColumnResizeEnd", "onColumnReorderEnd", "rowIndex", "left", "touchEnabled", "cellGroupType", "onColumnReorderStart"];
 
@@ -74,7 +74,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
           touchEnabled = _this$props.touchEnabled,
-          isFixed = _this$props.isFixed,
-          scrollToX = _this$props.scrollToX,
-          getCellGroupWidth = _this$props.getCellGroupWidth,
+          cellGroupType = _this$props.cellGroupType,
           onColumnReorderStart = _this$props.onColumnReorderStart,
-          columnGroupWidth = _this$props.columnGroupWidth,
           props = _objectWithoutProperties(_this$props, _excluded);
@@ -120,3 +117,3 @@
 
-ResizeCell.contextType = _Context.PluginContext;
+ResizeCell.contextType = _FixedDataTableContext.FixedDataTableContext;
 ResizeCell.propTypes = {
@@ -123,0 +120,0 @@ /**

internal/reducers/computeRenderedCols.js

@@ -66,5 +66,5 @@ /**
   var _tableHeightsSelector = (0, _tableHeights["default"])(state),
-      bodyWidth = _tableHeightsSelector.bodyWidth;
+      availableScrollWidth = _tableHeightsSelector.availableScrollWidth;
 
-  var _computeRenderedFixed = computeRenderedFixedColumnsAndGroups(state, state.fixedColumns, state.fixedColumnGroups),
+  var _computeRenderedFixed = computeRenderedFixedColumnsAndGroups(state, state.fixedColumns, state.fixedColumnGroups, state.columnSettings.getFixedColumnGroup),
       fixedColumnsToRender = _computeRenderedFixed.columnsToRender,
@@ -75,3 +75,3 @@ fixedColumnOffsets = _computeRenderedFixed.columnOffsets,
 
-  var _computeRenderedFixed2 = computeRenderedFixedColumnsAndGroups(state, state.fixedRightColumns, state.fixedRightColumnGroups),
+  var _computeRenderedFixed2 = computeRenderedFixedColumnsAndGroups(state, state.fixedRightColumns, state.fixedRightColumnGroups, state.columnSettings.getFixedRightColumnGroup),
       fixedRightColumnsToRender = _computeRenderedFixed2.columnsToRender,
@@ -82,3 +82,3 @@ fixedRightColumnOffsets = _computeRenderedFixed2.columnOffsets,
 
-  var maxScrollX = scrollContentWidth - bodyWidth;
+  var maxScrollX = scrollContentWidth - availableScrollWidth;
   var firstColumnOffset; // NOTE (jordan) This handles #115 where resizing the viewport may
@@ -150,3 +150,3 @@ // leave only a subset of columns shown, but no scrollbar to scroll up to the first columns.
 
-function computeRenderedFixedColumnsAndGroups(state, columnsContainer, columnsGroupsContainer) {
+function computeRenderedFixedColumnsAndGroups(state, columnsContainer, columnsGroupsContainer, columnGroupGetter) {
   var tableWidth = state.tableSize.width;
@@ -184,3 +184,3 @@ var widthUsed = 0;
       if (_.isNil(columnsGroupsContainer[columnGroupIndex])) {
-        columnsGroupsContainer[columnGroupIndex] = (0, _convertColumnElementsToData["default"])(state.columnSettings.getColumnGroup(columnGroupIndex));
+        columnsGroupsContainer[columnGroupIndex] = (0, _convertColumnElementsToData["default"])(columnGroupGetter(columnGroupIndex));
       }
@@ -187,0 +187,0 @@

internal/reducers/index.js

@@ -121,3 +121,5 @@ /**
       scrollableColumnsCount: 0,
-      getColumnGroup: function getColumnGroup() {},
+      getFixedColumnGroup: function getFixedColumnGroup() {},
+      getFixedRightColumnGroup: function getFixedRightColumnGroup() {},
+      getScrollableColumnGroup: function getScrollableColumnGroup() {},
       getFixedColumn: function getFixedColumn() {},
@@ -352,2 +354,3 @@ getFixedRightColumn: function getFixedRightColumn() {},
     fixedColumns[idx] = (0, _convertColumnElementsToData["default"])(columnSettings.getFixedColumn(idx));
+    fixedColumns[idx].props.index = idx;
     fixedColumnsWidth += fixedColumns[idx].props.width;
@@ -358,2 +361,3 @@ }
     fixedRightColumns[_idx] = (0, _convertColumnElementsToData["default"])(columnSettings.getFixedRightColumn(_idx));
+    fixedRightColumns[_idx].props.index = _idx;
     fixedRightColumnsWidth += fixedRightColumns[_idx].props.width;
@@ -420,3 +424,3 @@ }
   state.rowSettings.rowAttributesGetter = props.rowAttributesGetter;
-  state.columnSettings = _extends({}, state.columnSettings, (0, _pick["default"])(props, ['bufferColCount', 'scrollableColumnsCount', 'fixedColumnsCount', 'fixedRightColumnsCount', 'getScrollableColumn', 'getFixedColumn', 'getFixedRightColumn', 'getColumnGroup']));
+  state.columnSettings = _extends({}, state.columnSettings, (0, _pick["default"])(props, ['bufferColCount', 'scrollableColumnsCount', 'fixedColumnsCount', 'fixedRightColumnsCount', 'getScrollableColumn', 'getFixedColumn', 'getFixedRightColumn', 'getScrollableColumnGroup', 'getFixedColumnGroup', 'getFixedRightColumnGroup']));
   state.scrollFlags = _extends({}, state.scrollFlags, (0, _pick["default"])(props, ['overflowX', 'overflowY', 'showScrollbarX', 'showScrollbarY']));
@@ -423,0 +427,0 @@ state.tableSize = _extends({}, state.tableSize, (0, _pick["default"])(props, ['height', 'maxHeight', 'ownerHeight', 'width']));

internal/reducers/updateColWidth.js

@@ -47,3 +47,4 @@ /**
   var columnProps = state.columnSettings.getScrollableColumn(colIdx);
-  var column = (0, _convertColumnElementsToData["default"])(columnProps); // update column groups associated with the current column
+  var column = (0, _convertColumnElementsToData["default"])(columnProps);
+  column.props.index = colIdx; // update column groups associated with the current column
 
@@ -53,3 +54,3 @@ var columnGroupIndex = column.props.columnGroupIndex;
   if (!(0, _isNil["default"])(columnGroupIndex)) {
-    var columnGroupProps = state.columnSettings.getColumnGroup(columnGroupIndex);
+    var columnGroupProps = state.columnSettings.getScrollableColumnGroup(columnGroupIndex);
     var columnGroup = (0, _convertColumnElementsToData["default"])(columnGroupProps);
@@ -59,3 +60,4 @@ var storedColumnGroup = state.storedScrollableColumnGroups.object[columnGroupIndex]; // update first and last child column indexes of the column group
     columnGroup.props.firstChildIdx = _.min([colIdx, _.get(storedColumnGroup, 'props.firstChildIdx')]);
-    columnGroup.props.lastChildIdx = _.max([colIdx, _.get(storedColumnGroup, 'props.lastChildIdx')]); // cache the column group
+    columnGroup.props.lastChildIdx = _.max([colIdx, _.get(storedColumnGroup, 'props.lastChildIdx')]);
+    columnGroup.props.index = columnGroupIndex; // cache the column group
 
@@ -62,0 +64,0 @@ state.storedScrollableColumnGroups.object[columnGroupIndex] = columnGroup;

internal/selectors/tableHeights.js

@@ -70,3 +70,3 @@ "use strict";
   var bodyHeight = Math.min(availableHeight, scrollContentHeight);
-  var bodyWidth = Math.min(availableWidth, scrollContentWidth); // If using max height, component should only be sized to content.
+  var availableScrollWidth = Math.min(availableWidth, scrollContentWidth); // If using max height, component should only be sized to content.
   // Otherwise use all available height.
@@ -104,4 +104,4 @@
   return {
+    availableScrollWidth: availableScrollWidth,
     bodyHeight: bodyHeight,
-    bodyWidth: bodyWidth,
     bodyOffsetTop: bodyOffsetTop,
@@ -108,0 +108,0 @@ componentHeight: componentHeight,

package.json

 {
   "name": "fixed-data-table-2",
-  "version": "0.0.5-experimental-column-virtualization",
+  "version": "0.0.6-experimental-column-virtualization",
   "description": "A React table component designed to allow presenting thousands of rows of data.",
@@ -47,3 +47,3 @@ "main": "main.js",
     "husky": "^4.2.3",
-    "jsdom": "9.12.0",
+    "jsdom": "^19.0.0",
     "less": "3.10.3",
@@ -50,0 +50,0 @@ "less-loader": "5.0.0",

test/FixedDataTableRoot-test.js

@@ -348,10 +348,11 @@ /**
           assert.equal(
-            scrollableCellGroup.style.right,
-            `${scroll}px`,
-            "should translate the cell's right value when in RTL"
+            scrollableCellGroup.style.transform,
+            `translate(${-scroll}px,0px)`,
+            'should translate the cell horizontally value when in RTL'
           );
+
           assert.equal(
             scrollableCellGroup.style.left,
             '',
-            "should negate the cell's left value when in RTL"
+            'the left property should not be defined when in RTL'
           );
@@ -465,10 +466,11 @@
           assert.equal(
-            scrollableCellGroup.style.left,
-            `${-scroll}px`,
-            "should translate the cell's left value when in LTR"
+            scrollableCellGroup.style.transform,
+            `translate(-${scroll}px,0px)`,
+            'should translate the cell horizontally when in LTR'
           );
+
           assert.equal(
             scrollableCellGroup.style.right,
             '',
-            "should negate the cell's right value when in LTR"
+            'the right property should not be defined when in RTL'
           );
@@ -475,0 +477,0 @@

test/plugins/ReorderCell-test.js

@@ -9,2 +9,3 @@ import React from 'react';
   findRenderedComponentWithType,
+  findRenderedDOMComponentWithClass,
   findRenderedDOMComponentWithTag,
@@ -17,3 +18,5 @@ isElement,
 import ReorderCell from '../../src/plugins/ResizeReorder/ReorderCell';
-import ReorderHandle from '../../src/plugins/ResizeReorder/ReorderHandle';
+import cx from '../../src/vendor_upstream/stubs/cx';
+import sinon from 'sinon';
+import DOMMouseMoveTracker from '../../src/vendor_upstream/dom/DOMMouseMoveTracker';
 
@@ -66,3 +69,2 @@ const columnTitles = {
       ],
-      recycling: {},
     };
@@ -92,14 +94,5 @@ }
 
-  onColumnReorderStart = (columnKey) => {
-    this.setState({
-      recycling: {
-        [columnKey]: false,
-      },
-    });
-  };
-
   render() {
-    const { dataList, recycling } = this.state;
+    const { dataList } = this.state;
     const onColumnReorderEndCallback = this._onColumnReorderEndCallback;
-    const onColumnReorderStart = this.onColumnReorderStart;
     return (
@@ -118,3 +111,3 @@ <Table
             <Column
-              allowCellsRecycling={_.get(recycling, columnKey, true)}
+              allowCellsRecycling={true}
               columnKey={columnKey}
@@ -124,3 +117,2 @@ key={i}
                 <Plugins.ReorderCell
-                  onColumnReorderStart={onColumnReorderStart}
                   onColumnReorderEnd={onColumnReorderEndCallback}
@@ -189,4 +181,8 @@ >
       const cell = reorderCells[0];
-      const reorderHandle = findRenderedComponentWithType(cell, ReorderHandle);
-      const reorderDiv = findRenderedDOMComponentWithTag(reorderHandle, 'div');
+      const reorderDiv = findRenderedDOMComponentWithClass(
+        cell,
+        cx('fixedDataTableCellLayout/columnReorderContainer')
+      );
+
+      // start dragging
       const clickEvent = new window.MouseEvent('mousedown', {
@@ -197,6 +193,30 @@ bubbles: true,
       reorderDiv.dispatchEvent(clickEvent);
+
+      // Reordering cell should cross more than half of the next cell for swapping order
       const nextCellWidth = 150;
-      // Reordering cell should cross more than half of the next cell for swapping order
-      reorderHandle.onMouseMove(nextCellWidth / 2 + 1);
-      reorderHandle.onMouseUp();
+      const targetMouseOffset = nextCellWidth / 2 + 1;
+
+      // drag until required position
+      const mouseMoveEvent = new window.MouseEvent('mousemove', {
+        bubbles: true,
+        cancelable: true,
+        clientX: targetMouseOffset,
+      });
+
+      // NOTE (pradeep): JSDOM doesn't seem to pass in clientX for `mousemove` events,
+      // which is crucial for DOMMouseMoveTracker to figure out the mouse position.
+      // I'm fixing this by rewiring DOMMouseMoveTracker.
+      DOMMouseMoveTracker.__Rewire__('FixedDataTableEventHelper', {
+        getCoordinatesFromEvent: () => ({ x: targetMouseOffset, y: 0 }),
+      });
+      document.body.dispatchEvent(mouseMoveEvent);
+      DOMMouseMoveTracker.__Rewire__.reset;
+
+      // finish dragging
+      let mouseUpEvent = new window.MouseEvent('mouseup', {
+        bubbles: true,
+        cancelable: true,
+      });
+      document.body.dispatchEvent(mouseUpEvent);
+
       const newOrderCells = scryRenderedComponentsWithType(
@@ -203,0 +223,0 @@ renderedTree,

test/reducers/columnStateHelper-test.js

@@ -9,2 +9,3 @@ /**
 import columnStateHelper from '../../src/reducers/columnStateHelper';
+import cloneDeep from 'lodash/cloneDeep';
 
@@ -15,2 +16,4 @@ describe('columnStateHelper', function () {
     let oldState;
+    let newState;
+
     beforeEach(function () {
@@ -24,2 +27,3 @@ oldState = {
       };
+      newState = cloneDeep(oldState);
       availableWidth = 200;
@@ -44,6 +48,6 @@
     it('should initialize column state as expected', function () {
-      const result = columnStateHelper.initialize(oldState, {}, {});
+      columnStateHelper.initialize(newState, {}, {});
 
       assert.deepEqual(
-        result,
+        newState,
         Object.assign(
@@ -59,7 +63,7 @@ {
     it('should clamp scrollX to maxScrollX', function () {
-      oldState.scrollX = 700;
-      const result = columnStateHelper.initialize(oldState, {}, {});
+      newState.scrollX = 700;
+      columnStateHelper.initialize(newState, {}, {});
 
       assert.deepEqual(
-        result,
+        newState,
         Object.assign({}, oldState, {
@@ -73,12 +77,6 @@ maxScrollX: 400,
     it('should use scrollLeft when specified', function () {
-      const result = columnStateHelper.initialize(
-        oldState,
-        {
-          scrollLeft: 100,
-        },
-        {}
-      );
+      columnStateHelper.initialize(newState, { scrollLeft: 100 }, {});
 
       assert.deepEqual(
-        result,
+        newState,
         Object.assign({}, oldState, {
@@ -92,12 +90,7 @@ maxScrollX: 400,
     it('should overwrite column resizing from props', function () {
-      const result = columnStateHelper.initialize(
-        oldState,
-        {
-          isColumnResizing: false,
-        },
-        {}
-      );
+      newState.isColumnResizing = false;
+      columnStateHelper.initialize(newState, {}, {});
 
       assert.deepEqual(
-        result,
+        newState,
         Object.assign({}, oldState, {
@@ -112,14 +105,8 @@ columnResizingData: {},
     it('should scroll to column when specified via prop', function () {
-      oldState.scrollX = 0;
+      newState.scrollX = 0;
       availableWidth = 350;
-      const result = columnStateHelper.initialize(
-        oldState,
-        {
-          scrollToColumn: 2,
-        },
-        {}
-      );
+      columnStateHelper.initialize(newState, { scrollToColumn: 2 }, {});
 
       assert.deepEqual(
-        result,
+        newState,
         Object.assign({}, oldState, {
@@ -133,6 +120,6 @@ maxScrollX: 250,
     it('should scroll to column when behind existing scroll', function () {
-      oldState.scrollX = 250;
+      newState.scrollX = 250;
       availableWidth = 350;
-      const result = columnStateHelper.initialize(
-        oldState,
+      columnStateHelper.initialize(
+        newState,
         {
@@ -145,3 +132,3 @@ scrollToColumn: 2,
       assert.deepEqual(
-        result,
+        newState,
         Object.assign({}, oldState, {
@@ -155,6 +142,6 @@ maxScrollX: 250,
     it('should not change scroll when column already on screen', function () {
-      oldState.scrollX = 125;
+      newState.scrollX = 125;
       availableWidth = 350;
-      const result = columnStateHelper.initialize(
-        oldState,
+      columnStateHelper.initialize(
+        newState,
         {
@@ -167,3 +154,3 @@ scrollToColumn: 2,
       assert.deepEqual(
-        result,
+        newState,
         Object.assign({}, oldState, {
@@ -177,6 +164,6 @@ maxScrollX: 250,
     it('should not change scroll when column is fixed', function () {
-      oldState.scrollX = 250;
+      newState.scrollX = 250;
       availableWidth = 350;
-      const result = columnStateHelper.initialize(
-        oldState,
+      columnStateHelper.initialize(
+        newState,
         {
@@ -189,3 +176,3 @@ scrollToColumn: 0,
       assert.deepEqual(
-        result,
+        newState,
         Object.assign({}, oldState, {
@@ -199,6 +186,6 @@ maxScrollX: 250,
     it('should not change scroll when column is unchanged', function () {
-      oldState.scrollX = 250;
+      newState.scrollX = 250;
       availableWidth = 350;
-      const result = columnStateHelper.initialize(
-        oldState,
+      columnStateHelper.initialize(
+        newState,
         {
@@ -213,3 +200,3 @@ scrollToColumn: 2,
       assert.deepEqual(
-        result,
+        newState,
         Object.assign({}, oldState, {
@@ -216,0 +203,0 @@ maxScrollX: 250,

test/reducers/computeRenderedRows-test.js

@@ -8,2 +8,3 @@ /**
 import sinon from 'sinon';
+import clone from 'lodash/clone';
 
@@ -34,2 +35,3 @@ import computeRenderedRows from '../../src/reducers/computeRenderedRows';
     let oldState;
+    let newState;
     beforeEach(function () {
@@ -52,2 +54,3 @@ const initialStoredHeights = {};
       };
+      newState = clone(oldState);
     });
@@ -66,3 +69,3 @@
 
-      const newState = computeRenderedRows(oldState, scrollAnchor);
+      computeRenderedRows(newState, scrollAnchor);
 
@@ -117,3 +120,3 @@ const expectedRowOffsets = {};
 
-      const newState = computeRenderedRows(oldState, scrollAnchor);
+      computeRenderedRows(newState, scrollAnchor);
 
@@ -169,3 +172,3 @@ const expectedRowOffsets = {};
 
-      const newState = computeRenderedRows(oldState, scrollAnchor);
+      computeRenderedRows(newState, scrollAnchor);
 
@@ -193,3 +196,3 @@ assert.deepEqual(
 
-      const newState = computeRenderedRows(oldState, scrollAnchor);
+      computeRenderedRows(newState, scrollAnchor);
 
@@ -253,3 +256,3 @@ const expectedRowOffsets = {};
 
-      const newState = computeRenderedRows(oldState, scrollAnchor);
+      computeRenderedRows(newState, scrollAnchor);
       rowOffsetIntervalTreeMock.verify();
@@ -256,0 +259,0 @@

No alert changes

Improved metrics

Total package byte prevSize

3979681

increased by2.88%

Number of package files

146

increased by3.55%

Lines of code

33295

increased by2.63%

No dependency changes