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

Comparing version 0.8.20 to 0.8.21

docs/api/ColumnAPI.md

@@ -25,2 +25,10 @@ <!-- File generated from "src/FixedDataTableColumn.js" -->
 
+### `fixedRight`
+
+Controls if the column is fixed to the right side of the table when scrolling in the X axis.
+
+type: `bool`
+defaultValue: `false`
+
+
 ### `header`
@@ -27,0 +35,0 @@

docs/api/TableAPI.md

@@ -124,2 +124,16 @@ <!-- File generated from "src/FixedDataTable.js" -->
 
+### `keyboardScrollEnabled`
+
+Boolean flags to control if scrolling with keys is enabled
+
+type: `bool`
+defaultValue: `false`
+
+
+### `keyboardPageEnabled`
+
+type: `bool`
+defaultValue: `false`
+
+
 ### `showScrollbarX`
@@ -130,2 +144,3 @@
 type: `bool`
+defaultValue: `true`
 
@@ -136,2 +151,3 @@
 type: `bool`
+defaultValue: `true`
 
@@ -206,3 +222,3 @@
   rowIndex; number // (the row index)
-  height: number // (supplied from subRowHeight or subRowHeightGetter)
+  height: number // (supplied from the Table or rowHeightGetter)
   width: number // (supplied from the Table)
@@ -242,5 +258,6 @@ }
 type: `number`
+defaultValue: `0`
 
 
-### `headerHeight` (required)
+### `headerHeight`
 
@@ -250,4 +267,27 @@ Pixel height of header.
 type: `number`
+defaultValue: `0`
 
 
+### `cellGroupWrapperHeight`
+
+Pixel height of fixedDataTableCellGroupLayout/cellGroupWrapper.
+Default is headerHeight and groupHeaderHeight.
+
+This can be used with CSS to make a header cell span both the group & normal header row.
+Setting this to a value larger than height will cause the content to
+overflow the height. This is useful when adding a 2nd table as the group
+header and vertically merging the 2 headers when a column is not part
+of a group. Here are the necessary CSS changes:
+
+Both headers:
+ - cellGroupWrapper needs overflow-x: hidden and pointer-events: none
+ - cellGroup needs pointer-events: auto to reenable them on child els
+Group header:
+ - Layout/main needs overflow: visible and a higher z-index
+ - CellLayout/main needs overflow-y: visible
+ - cellGroup needs overflow: visible
+
+type: `number`
+
+
 ### `footerHeight`
@@ -258,2 +298,3 @@
 type: `number`
+defaultValue: `0`
 
@@ -336,2 +377,9 @@
 
+### `onRowContextMenu`
+
+Callback that is called when a contextual-menu event happens on a row.
+
+type: `func`
+
+
 ### `onRowMouseDown`
@@ -344,2 +392,9 @@
 
+### `onRowMouseUp`
+
+Callback that is called when a mouse-up event happens on a row.
+
+type: `func`
+
+
 ### `onRowMouseEnter`
@@ -359,2 +414,23 @@
 
+### `onRowTouchStart`
+
+Callback that is called when a touch-start event happens on a row.
+
+type: `func`
+
+
+### `onRowTouchEnd`
+
+Callback that is called when a touch-end event happens on a row.
+
+type: `func`
+
+
+### `onRowTouchMove`
+
+Callback that is called when a touch-move event happens on a row.
+
+type: `func`
+
+
 ### `onColumnResizeEndCallback`
@@ -416,10 +492,1 @@
 
-
-### `elementHeights`
-
-defaultValue: `{
-  footerHeight: 0,
-  groupHeaderHeight: 0,
-  headerHeight: 0,
-}`
-

internal/columnWidths.js

@@ -104,28 +104,30 @@ 'use strict';
 function flexWidths(columnGroupProps, columnProps, viewportWidth) {
+  var newColumnProps = columnProps;
   var remainingFlexGrow = (0, _widthHelper.getTotalFlexGrow)(columnProps);
-  if (remainingFlexGrow === 0) {
-    return {
-      newColumnGroupProps: columnGroupProps,
-      newColumnProps: columnProps
-    };
-  }
 
-  var columnsWidth = (0, _widthHelper.getTotalWidth)(columnProps);
-  var remainingFlexWidth = Math.max(viewportWidth - columnsWidth, 0);
+  // if any column is a flex column, we'll need to calculate the widths for every column
+  if (remainingFlexGrow !== 0) {
+    var columnsWidth = (0, _widthHelper.getTotalWidth)(columnProps);
+    var remainingFlexWidth = Math.max(viewportWidth - columnsWidth, 0);
 
-  var newColumnProps = (0, _map2.default)(columnProps, function (column) {
-    var flexGrow = column.flexGrow;
+    // calculate and set width for each column
+    newColumnProps = (0, _map2.default)(columnProps, function (column) {
+      var flexGrow = column.flexGrow;
 
-    if (!flexGrow) {
-      return column;
-    }
+      // if no flexGrow is specified, column defaults to original width
 
-    var flexWidth = Math.floor(flexGrow * remainingFlexWidth / remainingFlexGrow);
-    var newWidth = column.width + flexWidth;
-    remainingFlexGrow -= flexGrow;
-    remainingFlexWidth -= flexWidth;
+      if (!flexGrow) {
+        return column;
+      }
 
-    return _extends({}, column, { width: newWidth });
-  });
+      var flexWidth = Math.floor(flexGrow * remainingFlexWidth / remainingFlexGrow);
+      var newWidth = column.width + flexWidth;
+      remainingFlexGrow -= flexGrow;
+      remainingFlexWidth -= flexWidth;
 
+      return _extends({}, column, { width: newWidth });
+    });
+  }
+
+  // calculate width for each column group
   var columnGroupWidths = (0, _map2.default)(columnGroupProps, function () {
@@ -140,2 +142,3 @@ return 0;
 
+  // set the width for each column group
   var newColumnGroupProps = (0, _map2.default)(columnGroupProps, function (columnGroup, idx) {
@@ -142,0 +145,0 @@ if (columnGroupWidths[idx] === columnGroup.width) {

internal/computeRenderedRows.js

@@ -86,6 +86,7 @@ /**
 
-  computeRenderedRowOffsets(newState, rowRange);
+  computeRenderedRowOffsets(newState, rowRange, state.scrolling);
+
   var scrollY = 0;
   if (rowsCount > 0) {
-    scrollY = newState.rowHeights[rowRange.firstViewportIdx] - newState.firstRowOffset;
+    scrollY = newState.rowOffsets[rowRange.firstViewportIdx] - newState.firstRowOffset;
   }
@@ -205,2 +206,3 @@ var scrollJumpedY = scrollAnchor.scrollJumpedY === true && scrollY !== state.scrollY;
   state.firstRowIndex = firstViewportIdx;
+  state.endRowIndex = endViewportIdx;
   state.firstRowOffset = firstOffset;
@@ -229,7 +231,8 @@ return {
  * }} rowRange
+ * @param {boolean} viewportOnly
  * @private
  */
-function computeRenderedRowOffsets(state, rowRange) {
-  var bufferSet = state.bufferSet,
-      rowOffsets = state.rowOffsets,
+function computeRenderedRowOffsets(state, rowRange, viewportOnly) {
+  var rowBufferSet = state.rowBufferSet,
+      rowOffsetIntervalTree = state.rowOffsetIntervalTree,
       storedHeights = state.storedHeights;
@@ -244,3 +247,3 @@ var endBufferIdx = rowRange.endBufferIdx,
   if (renderedRowsCount === 0) {
-    state.rowHeights = {};
+    state.rowOffsets = {};
     state.rows = [];
@@ -250,29 +253,57 @@ return;
 
-  var bufferMapping = []; // state.rows
-  var rowOffsetsCache = {}; // state.rowHeights
-  var runningOffset = rowOffsets.sumUntil(firstBufferIdx);
-  for (var rowIdx = firstBufferIdx; rowIdx < endBufferIdx; rowIdx++) {
+  var startIdx = viewportOnly ? firstViewportIdx : firstBufferIdx;
+  var endIdx = viewportOnly ? endViewportIdx : endBufferIdx;
 
+  // output for this function
+  var rows = []; // state.rows
+  var rowOffsets = {}; // state.rowOffsets
+
+  // incremental way for calculating rowOffset
+  var runningOffset = rowOffsetIntervalTree.sumUntil(startIdx);
+
+  // compute row index and offsets for every rows inside the buffer
+  for (var rowIdx = startIdx; rowIdx < endIdx; rowIdx++) {
+
     // Update the offset for rendering the row
-    rowOffsetsCache[rowIdx] = runningOffset;
+    rowOffsets[rowIdx] = runningOffset;
     runningOffset += storedHeights[rowIdx];
 
-    // Check if row already has a position in the buffer
-    var rowPosition = bufferSet.getValuePosition(rowIdx);
+    // Get position for the viewport row
+    var rowPosition = addRowToBuffer(rowIdx, rowBufferSet, startIdx, endIdx, renderedRowsCount);
+    rows[rowPosition] = rowIdx;
+  }
 
-    // Request a position in the buffer through eviction of another row
-    if (rowPosition === null && bufferSet.getSize() >= renderedRowsCount) {
-      rowPosition = bufferSet.replaceFurthestValuePosition(firstViewportIdx, endViewportIdx - 1, rowIdx);
-    }
+  // now we modify the state with the newly calculated rows and offsets
+  state.rows = rows;
+  state.rowOffsets = rowOffsets;
+}
 
-    // If we can't reuse any existing position, create a new one
-    if (rowPosition === null) {
-      rowPosition = bufferSet.getNewPositionForValue(rowIdx);
-    }
+/**
+ * Add the row to the buffer set if it doesn't exist.
+ * If addition isn't possible due to max buffer size, it'll replace an existing element outside the given range.
+ *
+ * @param {!number} rowIdx
+ * @param {!number} rowBufferSet
+ * @param {!number} startRange
+ * @param {!number} endRange
+ * @param {!number} maxBufferSize
+ *
+ * @return {?number} the position of the row after being added to the buffer set
+ * @private
+ */
+function addRowToBuffer(rowIdx, rowBufferSet, startRange, endRange, maxBufferSize) {
+  // Check if row already has a position in the buffer
+  var rowPosition = rowBufferSet.getValuePosition(rowIdx);
 
-    bufferMapping[rowPosition] = rowIdx;
+  // Request a position in the buffer through eviction of another row
+  if (rowPosition === null && rowBufferSet.getSize() >= maxBufferSize) {
+    rowPosition = rowBufferSet.replaceFurthestValuePosition(startRange, endRange - 1, // replaceFurthestValuePosition uses closed interval from startRange to endRange
+    rowIdx);
   }
 
-  state.rowHeights = rowOffsetsCache;
-  state.rows = bufferMapping;
+  if (rowPosition === null) {
+    rowPosition = rowBufferSet.getNewPositionForValue(rowIdx);
+  }
+
+  return rowPosition;
 }

internal/FixedDataTable.js

@@ -506,2 +506,3 @@ 'use strict';
   componentWillUnmount: function componentWillUnmount() {
+    this._divRef && this._divRef.removeEventListener('wheel', this._wheelHandler.onWheel, { passive: false });
     this._wheelHandler = null;
@@ -608,2 +609,3 @@ this._touchHandler = null;
   componentDidMount: function componentDidMount() {
+    this._divRef && this._divRef.addEventListener('wheel', this._wheelHandler.onWheel, { passive: false });
     this._reportContentHeight();
@@ -627,2 +629,4 @@ },
   _onRef: function _onRef(div) {
+    this._divRef = div;
+
     if (this.props.stopReactWheelPropagation) {
@@ -792,3 +796,2 @@ this._wheelHandler.setRoot(div);
         onKeyDown: this._onKeyDown,
-        onWheel: this._wheelHandler.onWheel,
         onTouchStart: this._touchHandler.onTouchStart,
@@ -795,0 +798,0 @@ onTouchEnd: this._touchHandler.onTouchEnd,

internal/FixedDataTableContainer.js

@@ -124,3 +124,3 @@ 'use strict';
       var state = this.reduxStore.getState();
-      var boundState = (0, _pick2.default)(state, ['columnGroupProps', 'columnProps', 'columnReorderingData', 'columnResizingData', 'elementHeights', 'elementTemplates', 'firstRowIndex', 'isColumnReordering', 'isColumnResizing', 'maxScrollX', 'maxScrollY', 'rows', 'rowHeights', 'rowSettings', 'scrollContentHeight', 'scrollFlags', 'scrollX', 'scrollY', 'scrolling', 'scrollJumpedX', 'scrollJumpedY', 'tableSize']);
+      var boundState = (0, _pick2.default)(state, ['columnGroupProps', 'columnProps', 'columnReorderingData', 'columnResizingData', 'elementHeights', 'elementTemplates', 'firstRowIndex', 'endRowIndex', 'isColumnReordering', 'isColumnResizing', 'maxScrollX', 'maxScrollY', 'rows', 'rowOffsets', 'rowSettings', 'scrollContentHeight', 'scrollFlags', 'scrollX', 'scrollY', 'scrolling', 'scrollJumpedX', 'scrollJumpedY', 'tableSize']);
 
@@ -127,0 +127,0 @@ this.setState(boundState);

internal/FixedDataTableRoot.js

@@ -39,3 +39,3 @@ /**
 
-FixedDataTableRoot.version = '0.8.20';
+FixedDataTableRoot.version = '0.8.21';
 module.exports = FixedDataTableRoot;

internal/reducers.js

@@ -117,3 +117,3 @@ /**
     maxScrollY: 0,
-    rowHeights: {},
+    rowOffsets: {},
     rows: [], // rowsToRender
@@ -133,5 +133,5 @@ scrollContentHeight: 0,
      */
-    bufferSet: new _IntegerBufferSet2.default(),
+    rowBufferSet: new _IntegerBufferSet2.default(),
     storedHeights: [],
-    rowOffsets: null // PrefixIntervalTree
+    rowOffsetIntervalTree: null // PrefixIntervalTree
   };
@@ -151,3 +151,3 @@ }
         var newState = setStateFromProps(state, props);
-        newState = initializeRowHeights(newState);
+        newState = initializeRowHeightsAndOffsets(newState);
         var scrollAnchor = (0, _scrollAnchor3.getScrollAnchor)(newState, props);
@@ -165,3 +165,3 @@ newState = (0, _computeRenderedRows2.default)(newState, scrollAnchor);
         if (oldProps.rowsCount !== newProps.rowsCount || oldProps.rowHeight !== newProps.rowHeight || oldProps.subRowHeight !== newProps.subRowHeight) {
-          _newState = initializeRowHeights(_newState);
+          _newState = initializeRowHeightsAndOffsets(_newState);
         }
@@ -172,3 +172,3 @@
           // we know setStateFromProps clones state internally
-          _newState.bufferSet = new _IntegerBufferSet2.default();
+          _newState.rowBufferSet = new _IntegerBufferSet2.default();
         }
@@ -193,5 +193,12 @@
       {
-        return _extends({}, state, {
+        var _newState2 = _extends({}, state, {
           scrolling: false
         });
+        var previousScrollAnchor = {
+          firstIndex: state.firstRowIndex,
+          firstOffset: state.firstRowOffset,
+          lastIndex: state.lastIndex,
+          scrollJumpedY: state.scrollJumpedY
+        };
+        return (0, _computeRenderedRows2.default)(_newState2, previousScrollAnchor);
       }
@@ -270,3 +277,3 @@ case ActionTypes.SCROLL_JUMP_X:
  */
-function initializeRowHeights(state) {
+function initializeRowHeightsAndOffsets(state) {
   var _state$rowSettings = state.rowSettings,
@@ -278,3 +285,3 @@ rowHeight = _state$rowSettings.rowHeight,
   var defaultFullRowHeight = rowHeight + subRowHeight;
-  var rowOffsets = _PrefixIntervalTree2.default.uniform(rowsCount, defaultFullRowHeight);
+  var rowOffsetIntervalTree = _PrefixIntervalTree2.default.uniform(rowsCount, defaultFullRowHeight);
   var scrollContentHeight = rowsCount * defaultFullRowHeight;
@@ -286,3 +293,3 @@ var storedHeights = new Array(rowsCount);
   return _extends({}, state, {
-    rowOffsets: rowOffsets,
+    rowOffsetIntervalTree: rowOffsetIntervalTree,
     scrollContentHeight: scrollContentHeight,
@@ -289,0 +296,0 @@ storedHeights: storedHeights

internal/scrollAnchor.js

@@ -92,3 +92,3 @@ /**
 
-  var rowOffsets = state.rowOffsets,
+  var rowOffsetIntervalTree = state.rowOffsetIntervalTree,
       rowSettings = state.rowSettings,
@@ -119,5 +119,5 @@ scrollContentHeight = state.scrollContentHeight;
     // Mark the row which will appear first in the viewport
-    // We use this as our "marker" when scrolling even if updating rowHeights
+    // We use this as our "marker" when scrolling even if updating rowOffsets
     // leads to it not being different from the scrollY specified
-    var newRowIdx = rowOffsets.greatestLowerBound(scrollY);
+    var newRowIdx = rowOffsetIntervalTree.greatestLowerBound(scrollY);
     firstIndex = (0, _clamp2.default)(newRowIdx, 0, Math.max(rowsCount - 1, 0));
@@ -128,3 +128,3 @@
     // than the scroll position of the first row in the viewport
-    var firstRowPosition = rowOffsets.sumUntil(firstIndex);
+    var firstRowPosition = rowOffsetIntervalTree.sumUntil(firstIndex);
     firstOffset = firstRowPosition - scrollY;
@@ -163,3 +163,3 @@ }
 
-  var rowOffsets = state.rowOffsets,
+  var rowOffsetIntervalTree = state.rowOffsetIntervalTree,
       rowSettings = state.rowSettings,
@@ -182,3 +182,3 @@ storedHeights = state.storedHeights,
   (0, _updateRowHeight2.default)(state, rowIndex);
-  var rowBegin = rowOffsets.sumUntil(rowIndex);
+  var rowBegin = rowOffsetIntervalTree.sumUntil(rowIndex);
   var rowEnd = rowBegin + storedHeights[rowIndex];
@@ -185,0 +185,0 @@

internal/updateRowHeight.js

@@ -32,3 +32,3 @@ /**
   var storedHeights = state.storedHeights,
-      rowOffsets = state.rowOffsets,
+      rowOffsetIntervalTree = state.rowOffsetIntervalTree,
       rowSettings = state.rowSettings;
@@ -42,3 +42,3 @@ var rowHeightGetter = rowSettings.rowHeightGetter,
   if (newHeight !== oldHeight) {
-    rowOffsets.set(rowIdx, newHeight);
+    rowOffsetIntervalTree.set(rowIdx, newHeight);
     storedHeights[rowIdx] = newHeight;
@@ -45,0 +45,0 @@ state.scrollContentHeight += newHeight - oldHeight;

package.json

 {
   "name": "fixed-data-table-2",
-  "version": "0.8.20",
+  "version": "0.8.21",
   "description": "A React table component designed to allow presenting thousands of rows of data.",
@@ -5,0 +5,0 @@ "main": "main.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1227363

increased by1.51%

Number of package files

123

increased by0.82%

Lines of code

21920

increased by0.93%

No dependency changes