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

Comparing version 0.7.17 to 0.8.0

docs/roadmap.md

@@ -33,5 +33,5 @@ Roadmap
 We're exploring how to support these improvements
-* Dynamic row heights (v0.8)
-* Frozen rows (v1.0)
-* Flexible styling / themes (v1.0)
+* Dynamic row heights (v1.0)
+* Frozen rows (v2.0)
+* Flexible styling / themes (v2.0)
 * Multi-row / multi-column cells (later)
@@ -48,21 +48,26 @@
 ---------------
-### v0.8
-Targeted for Q1 2017  
-Our major focus will be on using redux for state management and adding additional unit tests.  This will enable refactoring and code cleanup which will make it easier for the core team to maintain the library.  
+### v1.0
+Targeted for Q3 2017  
+Our major focus will be on using redux for state management and adding additional unit tests.  This will enable refactoring and code cleanup which will make it easier for the core team to maintain the library.
 
-Dynamic row heights will also be a focus.  rowHeightGetter already exists in the API, but is buggy and difficult to support.  We'll fix the known bugs with this cleanup.  Our top priority following this release will be patching any bugs found by users depending on rowHeightGetter.
+Dynamic row heights will also be a focus.  rowHeightGetter already exists in the API, but is buggy and difficult to support.  With this release we'll start discussing an improved API which avoids many of these issues without sacrificing performance.
 
+Additionally we will include column recycling and other advanced performance enhancements.  
+
 Targeted Items
 * Unit testing
 * Redux for state management
-* Dynamic row heights
+* Begin supporting dynamic row heights
 
-### v1.0
-Targeted for mid 2017  
+### v2.0
+Targeted for Q1 2018  
 Our major focus will be making FDT reusable through composability.  At Schrodinger we've had great success implementing frozen rows, more flexible column groups, and more performant column reordering on top of FDT.  We'd like to improve FDTs examples and demonstrate these capabilities.
 
+We'll also release a new API for specifying row heights and give a stronger commitment to supporting dynamic row heights.  Our top priority following this release will be patching any bugs found by users depending on rowHeightGetter.
+
 We've also had many requests for improved styling.  We'd like to develop an easily extensible plugin system for styling.  This will involve trimming down our default styles and creating easy to build and share themes for styling the grid as an alternative to the headaches of the current system.
 
 Targeted Items
+* Strong support for dynamic row heights
 * Frozen rows
 * Flexible styling & themes

internal/cssVar.js

@@ -15,2 +15,4 @@ /**
 
+// If you change these, you'll need to restart the dev server for it to take effect.
+
 var CSS_VARS = {
@@ -23,3 +25,4 @@ 'scrollbar-face-active-color': '#7d7d7d',
   'scrollbar-size-large': '17px',
-  'scrollbar-track-color': 'rgba(255, 255, 255, 0.8)',
+  'scrollbar-track-color': '#fff',
+  'border-color': '#d3d3d3',
   'fbui-white': '#fff',
@@ -26,0 +29,0 @@ 'fbui-desktop-background-light': '#f6f7f8'

internal/FixedDataTable.js

@@ -246,2 +246,36 @@ 'use strict';
     /**
+     * Pixel height of sub-row unless `subRowHeightGetter` is specified and returns
+     * different value.  Defaults to 0 and no sub-row being displayed.
+     */
+    subRowHeight: _propTypes2.default.number,
+
+    /**
+     * If specified, `subRowHeightGetter(index)` is called for each row and the
+     * returned value overrides `subRowHeight` for particular row.
+     */
+    subRowHeightGetter: _propTypes2.default.func,
+
+    /**
+     * The row expanded for table row.
+     * This can either be a React element, or a function that generates
+     * a React Element. By default, the React element passed in can expect to
+     * receive the following props:
+     *
+     * ```
+     * props: {
+     *   rowIndex; number // (the row index)
+     *   height: number // (supplied from the Table or rowHeightGetter)
+     *   width: number // (supplied from the Table)
+     * }
+     * ```
+     *
+     * Because you are passing in your own React element, you can feel free to
+     * pass in whatever props you may want or need.
+     *
+     * If you pass in a function, you will receive the same props object as the
+     * first argument.
+     */
+    rowExpanded: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.func]),
+
+    /**
      * To get any additional CSS classes that should be added to a row,
@@ -405,3 +439,3 @@ * `rowClassNameGetter(index)` is called.
     var viewportHeight = (props.height === undefined ? props.maxHeight : props.height) - (props.headerHeight || 0) - (props.footerHeight || 0) - (props.groupHeaderHeight || 0);
-    this._scrollHelper = new _FixedDataTableScrollHelper2.default(props.rowsCount, props.rowHeight, viewportHeight, props.rowHeightGetter);
+    this._scrollHelper = new _FixedDataTableScrollHelper2.default(props.rowsCount, props.rowHeight, viewportHeight, props.rowHeightGetter, props.subRowHeight, props.subRowHeightGetter);
 
@@ -670,2 +704,5 @@ this._didScrollStop = (0, _debounceCore2.default)(this._didScrollStop, 200, this);
       rowHeightGetter: state.rowHeightGetter,
+      subRowHeight: state.subRowHeight,
+      subRowHeightGetter: state.subRowHeightGetter,
+      rowExpanded: state.rowExpanded,
       rowKeyGetter: state.rowKeyGetter,
@@ -866,2 +903,5 @@ scrollLeft: state.scrollX,
 
+    // Allow room for the scrollbar, less 1px for the last column's border
+    var adjustedWidth = props.width - _Scrollbar2.default.SIZE - _Scrollbar2.default.OFFSET;
+
     var useGroupHeader = false;
@@ -892,3 +932,3 @@ if (children.length && children[0].type.__TableColumnGroup__) {
 
-      this._scrollHelper = new _FixedDataTableScrollHelper2.default(props.rowsCount, props.rowHeight, viewportHeight, props.rowHeightGetter);
+      this._scrollHelper = new _FixedDataTableScrollHelper2.default(props.rowsCount, props.rowHeight, viewportHeight, props.rowHeightGetter, props.subRowHeight, props.subRowHeightGetter);
       scrollState = this._scrollHelper.scrollToRow(firstRowIndex, firstRowOffset);
@@ -898,4 +938,9 @@ firstRowIndex = scrollState.index;
       scrollY = scrollState.position;
-    } else if (oldState && props.rowHeightGetter !== oldState.rowHeightGetter) {
-      this._scrollHelper.setRowHeightGetter(props.rowHeightGetter);
+    } else if (oldState) {
+      if (props.rowHeightGetter !== oldState.rowHeightGetter) {
+        this._scrollHelper.setRowHeightGetter(props.rowHeightGetter);
+      }
+      if (props.subRowHeightGetter !== oldState.subRowHeightGetter) {
+        this._scrollHelper.setSubRowHeightGetter(props.subRowHeightGetter);
+      }
     }
@@ -930,7 +975,7 @@
     if (useGroupHeader) {
-      var columnGroupSettings = _FixedDataTableWidthHelper2.default.adjustColumnGroupWidths(children, props.width);
+      var columnGroupSettings = _FixedDataTableWidthHelper2.default.adjustColumnGroupWidths(children, adjustedWidth);
       columns = columnGroupSettings.columns;
       columnGroups = columnGroupSettings.columnGroups;
     } else {
-      columns = _FixedDataTableWidthHelper2.default.adjustColumnWidths(children, props.width);
+      columns = _FixedDataTableWidthHelper2.default.adjustColumnWidths(children, adjustedWidth);
     }
@@ -952,4 +997,7 @@
 
+        // Convert column index (0 indexed) to scrollable index (0 indexed)
+        // and clamp to max scrollable index
         var scrollableColumnIndex = Math.min(props.scrollToColumn - fixedColumnsCount, columnInfo.bodyScrollableColumns.length - 1);
 
+        // Sum width for all columns before column
         var previousColumnsWidth = 0;
@@ -961,6 +1009,14 @@ for (i = 0; i < scrollableColumnIndex; ++i) {
 
-        var availableScrollWidth = props.width - totalFixedColumnsWidth;
+        // Get width of scrollable columns in viewport
+        var availableScrollWidth = adjustedWidth - totalFixedColumnsWidth;
+
+        // Get width of specified column
         var selectedColumnWidth = columnInfo.bodyScrollableColumns[scrollableColumnIndex].props.width;
+
+        // Must scroll at least far enough for end of column (prevColWidth + selColWidth)
+        // to be in viewport (availableScrollWidth = viewport width)
         var minAcceptableScrollPosition = previousColumnsWidth + selectedColumnWidth - availableScrollWidth;
 
+        // If scrolled less than minimum amount, scroll to minimum amount
+        // so column on right of viewport
         if (scrollX < minAcceptableScrollPosition) {
@@ -970,2 +1026,4 @@ scrollX = minAcceptableScrollPosition;
 
+        // If scrolled more than previous columns, at least part of column will be offscreen to left
+        // Scroll so column is flush with left edge of viewport
         if (scrollX > previousColumnsWidth) {
@@ -985,3 +1043,3 @@ scrollX = previousColumnsWidth;
 
-    var horizontalScrollbarVisible = scrollContentWidth > props.width && props.overflowX !== 'hidden' && props.showScrollbarX !== false;
+    var horizontalScrollbarVisible = scrollContentWidth > adjustedWidth && props.overflowX !== 'hidden' && props.showScrollbarX !== false;
 
@@ -994,3 +1052,3 @@ if (horizontalScrollbarVisible) {
 
-    var maxScrollX = Math.max(0, scrollContentWidth - props.width);
+    var maxScrollX = Math.max(0, scrollContentWidth - adjustedWidth);
     var maxScrollY = Math.max(0, scrollContentHeight - bodyHeight);
@@ -997,0 +1055,0 @@ scrollX = Math.min(scrollX, maxScrollX);

internal/FixedDataTableBufferedRows.js

@@ -69,2 +69,5 @@ 'use strict';
     rowHeightGetter: _propTypes2.default.func,
+    subRowHeight: _propTypes2.default.number,
+    subRowHeightGetter: _propTypes2.default.func,
+    rowExpanded: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.func]),
     rowKeyGetter: _propTypes2.default.func,
@@ -144,2 +147,3 @@ rowPositionGetter: _propTypes2.default.func.isRequired,
       var currentRowHeight = this._getRowHeight(rowIndex);
+      var currentSubRowHeight = this._getSubRowHeight(rowIndex);
       var rowOffsetTop = baseOffsetTop + rowPositions[rowIndex];
@@ -156,2 +160,4 @@ var rowKey = props.rowKeyGetter ? props.rowKeyGetter(rowIndex) : i;
         height: currentRowHeight,
+        subRowHeight: currentSubRowHeight,
+        rowExpanded: props.rowExpanded,
         scrollLeft: Math.round(props.scrollLeft),
@@ -181,2 +187,5 @@ offsetTop: Math.round(rowOffsetTop),
     return this.props.rowHeightGetter ? this.props.rowHeightGetter(index) : this.props.defaultRowHeight;
+  },
+  _getSubRowHeight: function _getSubRowHeight( /*number*/index) /*number*/{
+    return this.props.subRowHeightGetter ? this.props.subRowHeightGetter(index) : this.props.subRowHeight;
   }
@@ -183,0 +192,0 @@ });

internal/FixedDataTableRoot.js

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

internal/FixedDataTableRow.js

@@ -76,2 +76,19 @@ /**
       return width;
+    }, _this._getRowExpanded = function ( /*number*/subRowHeight) /*?object*/{
+      if (_this.props.rowExpanded) {
+        var rowExpandedProps = {
+          rowIndex: _this.props.index,
+          height: subRowHeight,
+          width: _this.props.width
+        };
+
+        var rowExpanded;
+        if (_React2.default.isValidElement(_this.props.rowExpanded)) {
+          rowExpanded = _React2.default.cloneElement(_this.props.rowExpanded, rowExpandedProps);
+        } else if (typeof _this.props.rowExpanded === 'function') {
+          rowExpanded = _this.props.rowExpanded(rowExpandedProps);
+        }
+
+        return rowExpanded;
+      }
     }, _this._renderColumnsLeftShadow = function ( /*number*/left) /*?object*/{
@@ -113,7 +130,7 @@ var className = (0, _cx2.default)({
     value: function render() /*object*/{
+      var subRowHeight = this.props.subRowHeight || 0;
       var style = {
         width: this.props.width,
-        height: this.props.height
+        height: this.props.height + subRowHeight
       };
-
       var className = (0, _cx2.default)({
@@ -165,2 +182,8 @@ 'fixedDataTableRowLayout/main': true,
       var columnsRightShadow = this._renderColumnsRightShadow(fixedColumnsWidth + scrollableColumnsWidth);
+      var rowExpanded = this._getRowExpanded(subRowHeight);
+      var rowExpandedStyle = {
+        height: subRowHeight,
+        top: this.props.height,
+        width: this.props.width
+      };
 
@@ -184,2 +207,9 @@ return _React2.default.createElement(
         ),
+        rowExpanded && _React2.default.createElement(
+          'div',
+          {
+            className: (0, _cx2.default)('fixedDataTableRowLayout/rowExpanded'),
+            style: rowExpandedStyle },
+          rowExpanded
+        ),
         columnsRightShadow
@@ -208,2 +238,12 @@ );
   /**
+   * Height of the content to be displayed below the row.
+   */
+  subRowHeight: _propTypes2.default.number,
+
+  /**
+   * the row expanded.
+   */
+  rowExpanded: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.func]),
+
+  /**
    * The row index.
@@ -210,0 +250,0 @@ */

internal/FixedDataTableScrollHelper.js

@@ -43,15 +43,26 @@ /**
   /*?function*/rowHeightGetter) {
+    var _this = this;
+
+    var defaultSubRowHeight = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+    var
+    /*?function*/subRowHeightGetter = arguments[5];
+
     _classCallCheck(this, FixedDataTableScrollHelper);
 
-    this._rowOffsets = _PrefixIntervalTree2.default.uniform(rowCount, defaultRowHeight);
+    var defaultFullRowHeight = defaultRowHeight + defaultSubRowHeight;
+    this._rowOffsets = _PrefixIntervalTree2.default.uniform(rowCount, defaultFullRowHeight);
     this._storedHeights = new Array(rowCount);
     for (var i = 0; i < rowCount; ++i) {
-      this._storedHeights[i] = defaultRowHeight;
+      this._storedHeights[i] = defaultFullRowHeight;
     }
     this._rowCount = rowCount;
     this._position = 0;
-    this._contentHeight = rowCount * defaultRowHeight;
-    this._defaultRowHeight = defaultRowHeight;
-    this._rowHeightGetter = rowHeightGetter ? rowHeightGetter : function () {
-      return defaultRowHeight;
+    this._contentHeight = rowCount * defaultFullRowHeight;
+
+    this._rowHeightGetter = rowHeightGetter;
+    this._subRowHeightGetter = subRowHeightGetter;
+    this._fullRowHeightGetter = function (rowIdx) {
+      var rowHeight = _this._rowHeightGetter ? _this._rowHeightGetter(rowIdx) : defaultRowHeight;
+      var subRowHeight = _this._subRowHeightGetter ? _this._subRowHeightGetter(rowIdx) : defaultSubRowHeight;
+      return rowHeight + subRowHeight;
     };
@@ -65,2 +76,3 @@ this._viewportHeight = viewportHeight;
     this.setRowHeightGetter = this.setRowHeightGetter.bind(this);
+    this.setSubRowHeightGetter = this.setSubRowHeightGetter.bind(this);
     this.getContentHeight = this.getContentHeight.bind(this);
@@ -78,2 +90,7 @@ this.getRowPosition = this.getRowPosition.bind(this);
   }, {
+    key: 'setSubRowHeightGetter',
+    value: function setSubRowHeightGetter( /*function*/subRowHeightGetter) {
+      this._subRowHeightGetter = subRowHeightGetter;
+    }
+  }, {
     key: 'setViewportHeight',
@@ -117,3 +134,3 @@ value: function setViewportHeight( /*number*/viewportHeight) {
       }
-      var newHeight = this._rowHeightGetter(rowIndex);
+      var newHeight = this._fullRowHeightGetter(rowIndex);
       if (newHeight !== this._storedHeights[rowIndex]) {
@@ -298,2 +315,3 @@ var change = newHeight - this._storedHeights[rowIndex];
       rowIndex = (0, _clamp2.default)(rowIndex, 0, Math.max(this._rowCount - 1, 0));
+      this._updateRowHeight(rowIndex);
       var rowBegin = this._rowOffsets.sumUntil(rowIndex);
@@ -300,0 +318,0 @@ var rowEnd = rowBegin + this._storedHeights[rowIndex];

internal/Scrollbar.js

@@ -463,3 +463,4 @@ 'use strict';
 Scrollbar.SIZE = parseInt((0, _cssVar2.default)('scrollbar-size'), 10);
+Scrollbar.OFFSET = FACE_MARGIN / 2 + 1;
 
 module.exports = Scrollbar;

package.json

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

README.md

@@ -37,6 +37,6 @@ Fixed Data Table 2 for React ![Travic CI status](https://api.travis-ci.org/schrodinger/fixed-data-table-2.svg?branch=master) [![npm version](https://badge.fury.io/js/fixed-data-table-2.svg)](https://www.npmjs.com/package/fixed-data-table-2)
 ```
-Add the default stylesheet `dist/fixed-data-table.css`, then import it into any module.
+Add the default stylesheet `dist/fixed-data-table.css` using a link tag or import it with a CSS module.
 
-### Basic Example
-
+### Code Sample
+Note this doesn't include a definition for MyCustomCell and won't work out of the box. For more detailed examples, please see the [examples section](http://schrodinger.github.io/fixed-data-table-2/example-object-data.html) of the documentation. If you need help getting started with a React build system, we recommend [create-react-app](https://github.com/facebookincubator/create-react-app).  
 ```javascript
@@ -43,0 +43,0 @@ import React from 'react';

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

6554181

increased by659.99%

Number of package files

105

increased by5%

Lines of code

39465

increased by128.19%

No dependency changes