react-pivottable-secondary - npm Package Compare versions

Comparing version 0.0.16 to 0.1.0

package.json

 {
   "name": "react-pivottable-secondary",
-  "version": "0.0.16",
+  "version": "0.1.0",
   "description": "A React-based pivot table secondary",
@@ -55,5 +55,7 @@ "main": "PivotTableUI.js",
     "prop-types": "^15.5.10",
+    "rc-util": "^5.24.2",
     "react-draggable": "^3.0.3",
     "react-load-script": "0.0.6",
     "react-sortablejs": "^1.3.4",
+    "react-window": "^1.8.7",
     "sortablejs": "^1.6.1"
@@ -60,0 +62,0 @@ },

TableRenderers.js

@@ -21,2 +21,6 @@ 'use strict';
 
+var _raf = require('rc-util/lib/raf');
+
+var _raf2 = _interopRequireDefault(_raf);
+
 var _jquery = require('jquery');
@@ -80,20 +84,69 @@
 
+function getScrollbarWidth() {
+  var scrollDiv = document.createElement('div');
+  scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
+  document.body.appendChild(scrollDiv);
+  var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+
+  return scrollbarWidth;
+}
+
+var DEFAULT_ROW_HEIGHT = 32; // 默认表格单行高度
+var OFFSET_HORIZONTAL = 300; // 横向滚动前、后偏移量
+
+
 function makeRenderer() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
+  var POSITION_TABLE_BODY = 'tableBody'; // 表示纵向滚动响应位置在表格内容上
+
   var TableRenderer = function (_React$PureComponent) {
     _inherits(TableRenderer, _React$PureComponent);
 
-    function TableRenderer() {
+    function TableRenderer(props) {
       _classCallCheck(this, TableRenderer);
 
-      return _possibleConstructorReturn(this, (TableRenderer.__proto__ || Object.getPrototypeOf(TableRenderer)).apply(this, arguments));
+      var _this = _possibleConstructorReturn(this, (TableRenderer.__proto__ || Object.getPrototypeOf(TableRenderer)).call(this, props));
+
+      _this.getHorizontalDom = function (dom) {
+        _this.horizontalDom = dom || _this.horizontalDom;
+      };
+      _this.getVirtualTableRef = function (dom) {
+        _this.virtualTable = dom || _this.virtualTable;
+        _this.setVirtualSize(dom);
+      };
+      _this.valueCellColors = function () {};
+      _this.rowTotalColors = function () {};
+      _this.colTotalColors = function () {};
+      _this.getClickHandler = null;
+      _this.virtualTable = null;
+      _this.tableHeader = null;
+      _this.virtualTableWidth = 0; // 虚拟表格宽度
+      _this.scrollBarWidth = getScrollbarWidth(); // 滚动条宽度
+      _this.scrollDom = null; // 纵向假滚动条节点
+      _this.horizontalDom = null; // 横向滚动节点
+      _this.verticalDom = null; // 纵向滚动节点
+      _this.mousePosition = ''; // 鼠标所在位置，用于区别纵向滚动由哪个节点相应的
+      _this.state = {
+        totalHeight: 0, // 表格内容区域总高度
+        totalWidth: 0, // 表格内容区域总宽度
+        hiddenLeftStyle: { // 左侧隐藏样式
+          width: '0px'
+        },
+        hiddenRightStyle: { // 右侧隐藏样式
+          width: '0px'
+        },
+        colSize: [0, 0] // 可视区域显示的列号
+      };
+      return _this;
     }
 
     _createClass(TableRenderer, [{
-      key: 'handleScriptLoad',
-      value: function handleScriptLoad() {
-        (0, _jquery2.default)(document).ready(function () {
-          (0, _jquery2.default)('.pivotTable').dataTable({ scrollY: '50vh', scrollCollapse: true, paging: false });
-        });
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        this.setVirtualSize();
+        this.setHorizontalData();
+        // 同步两边的滚动
+        (0, _jquery2.default)('.pivot-table-body').on('scroll', this.asyncTableScroll);
       }
@@ -106,9 +159,417 @@ }, {
       }
+      // 设置虚拟表格高度、宽度
+
     }, {
-      key: 'componentDidMount',
-      value: function componentDidMount() {
-        // 同步两边的滚动
-        (0, _jquery2.default)('.pivot-table-body').on('scroll', this.asyncTableScroll);
+      key: 'setVirtualSize',
+      value: function setVirtualSize(dom) {
+        var virtualTable = dom || this.virtualTable;
+        var width = virtualTable.clientWidth;
+        if (width) {
+          this.virtualTableWidth = width;
+        }
       }
     }, {
+      key: 'getTableHeaderDom',
+
+
+      // getVirtualTableRef(dom) {
+      //   this.virtualTable = dom || this.virtualTable;
+      //   this.setVirtualSize(dom);
+      // };
+
+      value: function getTableHeaderDom(dom) {
+        this.tableHeader = dom || this.tableHeader;
+      }
+    }, {
+      key: 'getVerticalDom',
+      value: function getVerticalDom(dom) {
+        this.verticalDom = dom || this.verticalDom;
+      }
+    }, {
+      key: 'setHorizontalData',
+
+
+      // 设置虚拟表格横向数据；在横向滚动时使用
+      value: function setHorizontalData() {
+        var scrollLeft = this.horizontalDom && this.horizontalDom.scrollLeft;
+        var pivotData = new _Utilities.PivotData(this.props);
+        var rowAttrs = pivotData.props.rows;
+        var colKeys = pivotData.getColKeys();
+        var aggregatorGather = this.props.aggregatorGather;
+        var part1 = rowAttrs.length ? rowAttrs : [undefined];
+        var part2 = rowAttrs.length !== 0 && colKeys.length !== 0 ? [undefined] : [];
+        var part3 = colKeys;
+        var part4 = aggregatorGather;
+        var columns = [].concat(_toConsumableArray(part1), part2, _toConsumableArray(part3), _toConsumableArray(part4));
+        var oColSize = this.state.colSize;
+        // 表格内容可视区域的宽度
+
+        var width = this.virtualTableWidth;
+        var colSize = [];
+        var totalWidth = 0;
+        var hiddenLeftWidth = 0; // 左侧隐藏未被渲染的宽度
+        var hiddenRigthWidth = 0; // 右侧隐藏未被渲染的宽度
+        var currentStep = 0; // 0: 前面被隐藏阶段；1: 可视区域阶段；2: 后面不可见区域
+        if (!width) {
+          return;
+        }
+        columns.forEach(function (item, i) {
+          // const { width: colWidth = 150 } = item;
+          var colWidth = 120;
+          totalWidth += colWidth;
+          if (currentStep === 0) {
+            if (totalWidth >= scrollLeft - OFFSET_HORIZONTAL) {
+              // 根据 scrollLeft 算出可视区域起始行号
+              colSize[0] = i;
+              currentStep += 1;
+            } else {
+              hiddenLeftWidth += colWidth;
+            }
+          }
+          if (currentStep === 1 && totalWidth > scrollLeft + width + OFFSET_HORIZONTAL) {
+            // 计算出可视区域结束列号
+            colSize[1] = i;
+            currentStep += 1;
+          }
+          if (currentStep === 2) {
+            hiddenRigthWidth += colWidth;
+          }
+        });
+
+        if (oColSize.join() !== colSize.join()) {
+          // 可视区域的列号有了变化才重新进行渲染
+          this.setState({
+            hiddenLeftStyle: { width: hiddenLeftWidth + 'px' },
+            hiddenRightStyle: { width: hiddenRigthWidth + 'px' },
+            colSize: colSize,
+            totalWidth: totalWidth
+          });
+        }
+      }
+    }, {
+      key: 'handleHorizontalScroll',
+      value: function handleHorizontalScroll(e) {
+        e.stopPropagation();
+        var scrollLeft = e.target.scrollLeft;
+        // this.scrollDom && (this.scrollDom.scrollLeft = scrollLeft);
+        this.setHorizontalData();
+      }
+    }, {
+      key: 'handleBodyMouseEnter',
+      value: function handleBodyMouseEnter() {
+        this.mousePosition = POSITION_TABLE_BODY;
+      }
+    }, {
+      key: 'tableHeaderRender',
+      value: function tableHeaderRender() {
+        var pivotData = new _Utilities.PivotData(this.props);
+        var colAttrs = pivotData.props.cols.length ? (0, _lodash.concat)(pivotData.props.cols, undefined) : [undefined, undefined];
+        var rowAttrs = pivotData.props.rows;
+        var colKeys = pivotData.getColKeys();
+        var aggregatorGather = this.props.aggregatorGather;
+        return _react2.default.createElement(
+          'div',
+          { className: 'pivot-table-header' },
+          _react2.default.createElement(
+            'table',
+            { className: 'pivotTable' },
+            _react2.default.createElement(
+              'colgroup',
+              null,
+              rowAttrs.length === 0 && colKeys.length === 0 && _react2.default.createElement('col', { style: { width: '120px' } }),
+              rowAttrs.length !== 0 && rowAttrs.map(function (r, i) {
+                return _react2.default.createElement('col', { style: { width: '120px' } });
+              }),
+              colKeys.length && _react2.default.createElement('col', { style: { width: '120px' } }) || null,
+              colKeys.map(function (colKey, i) {
+                return _react2.default.createElement('col', { style: { width: '120px' } });
+              }),
+              aggregatorGather.map(function (_, o) {
+                return _react2.default.createElement('col', { style: { width: '120px' } });
+              }) || _react2.default.createElement(_react2.default.Fragment, null)
+            ),
+            _react2.default.createElement(
+              'thead',
+              null,
+              colAttrs.map(function (c, j) {
+                return _react2.default.createElement(
+                  'tr',
+                  { key: '' + c + j },
+                  rowAttrs.length === 0 && colKeys.length === 0 && _react2.default.createElement('th', { colSpan: rowAttrs.length, rowSpan: colAttrs.length - 1 }) || null,
+                  j === 0 && rowAttrs.length !== 0 && _react2.default.createElement('th', { colSpan: rowAttrs.length, rowSpan: colAttrs.length - 1, style: { position: 'sticky', zIndex: 2, left: 0, top: 0 } }) || rowAttrs.length !== 0 && j === colAttrs.length - 1 && rowAttrs.map(function (r, i) {
+                    return _react2.default.createElement(
+                      'th',
+                      { style: { position: 'sticky', zIndex: 2, left: i * 120 + 'px' }, className: 'pivotAxisLabel', key: 'rowAttr' + i },
+                      r
+                    );
+                  }),
+                  colKeys.length && _react2.default.createElement(
+                    'th',
+                    { style: { position: 'sticky', zIndex: 2, left: rowAttrs.length * 120 + 'px', top: j * 30 + 'px' }, className: 'pvtAxisLabel' },
+                    c
+                  ) || null,
+                  colKeys.map(function (colKey, i) {
+                    var x = spanSize(colKeys, i, j);
+                    if (x === -1) {
+                      return null;
+                    }
+                    return _react2.default.createElement(
+                      'th',
+                      {
+                        className: 'pivotColLabel',
+                        key: 'colKey' + i + j,
+                        colSpan: x,
+                        style: { position: 'sticky', zIndex: 1, top: j * 30 + 'px' }
+                      },
+                      colKey[j]
+                    );
+                  }),
+                  j === 0 && _react2.default.createElement(
+                    'th',
+                    {
+                      className: 'pivotTotalLabel',
+                      key: 'pivotTotalLabel' + j,
+                      colSpan: aggregatorGather.length,
+                      rowSpan: colAttrs.length - (aggregatorGather.length === 0 ? 0 : 1)
+                    },
+                    'Totals'
+                  ) || _react2.default.createElement(_react2.default.Fragment, null),
+                  j === colAttrs.length - 1 && aggregatorGather.map(function (_, o) {
+                    return _react2.default.createElement(
+                      'th',
+                      {
+                        key: 'Total' + j + o,
+                        className: 'pivotColLabel pivotRowTotal'
+                      },
+                      _.vals.join(' ') + '(' + _.aggregatorName + ')'
+                    );
+                  }) || _react2.default.createElement(_react2.default.Fragment, null)
+                );
+              })
+            )
+          )
+        );
+      }
+    }, {
+      key: 'tableBodyRender',
+      value: function tableBodyRender() {
+        var _this2 = this;
+
+        var _state = this.state,
+            hiddenBottomStyle = _state.hiddenBottomStyle,
+            hiddenLeftStyle = _state.hiddenLeftStyle,
+            hiddenRightStyle = _state.hiddenRightStyle,
+            colSize = _state.colSize,
+            totalHeight = _state.totalHeight;
+
+        var pivotData = new _Utilities.PivotData(this.props);
+        var colAttrs = pivotData.props.cols.length ? (0, _lodash.concat)(pivotData.props.cols, undefined) : [undefined, undefined];
+        var rowAttrs = pivotData.props.rows;
+        var rowKeys = pivotData.getRowKeys();
+        var colKeys = pivotData.getColKeys();
+        var aggregatorGather = this.props.aggregatorGather;
+
+        var part1 = rowAttrs.length ? rowAttrs : [undefined];
+        var part2 = rowAttrs.length !== 0 && colKeys.length !== 0 ? [undefined] : [];
+        var part3 = colKeys;
+        var part4 = aggregatorGather;
+        var columns = [].concat(_toConsumableArray(part1), part2, _toConsumableArray(part3), _toConsumableArray(part4));
+
+        // const showCols = columns.slice(...colSize);
+        var showCols = columns;
+        var cols = [];
+        // if (colSize[0]) {
+        //   cols.push(<col key="first" width={hiddenLeftStyle.width} />);
+        // }
+        showCols.forEach(function (col, i) {
+          var width = 120;
+          cols.push(_react2.default.createElement('col', { key: '' + (colSize[0] + i), width: width + 'px' }));
+        });
+        // if (colSize[1]) {
+        //   cols.push(<col key="last" width={hiddenRightStyle.width} />);
+        // }
+
+        return _react2.default.createElement(
+          'div',
+          { className: 'pivot-table-body', ref: this.getHorizontalDom, onMouseEnter: function onMouseEnter() {
+              return _this2.handleBodyMouseEnter();
+            } },
+          _react2.default.createElement(
+            'div',
+            { className: 'table-body-total' },
+            _react2.default.createElement(
+              'table',
+              { className: 'pivotTable' },
+              _react2.default.createElement(
+                'colgroup',
+                null,
+                cols
+              ),
+              _react2.default.createElement(
+                'thead',
+                null,
+                colAttrs.map(function (c, j) {
+                  return _react2.default.createElement(
+                    'tr',
+                    { key: '' + c + j },
+                    rowAttrs.length === 0 && colKeys.length === 0 && _react2.default.createElement('th', { colSpan: rowAttrs.length, rowSpan: colAttrs.length - 1 }) || null,
+                    j === 0 && rowAttrs.length !== 0 && _react2.default.createElement('th', { colSpan: rowAttrs.length, rowSpan: colAttrs.length - 1, style: { position: 'sticky', zIndex: 3, left: 0, top: 0 } }) || rowAttrs.length !== 0 && j === colAttrs.length - 1 && rowAttrs.map(function (r, i) {
+                      return _react2.default.createElement(
+                        'th',
+                        { style: { position: 'sticky', zIndex: 2, left: i * 120 + 'px', top: j * 30 + 'px' }, className: 'pivotAxisLabel', key: 'rowAttr' + i },
+                        r
+                      );
+                    }),
+                    colKeys.length && _react2.default.createElement(
+                      'th',
+                      { style: { position: 'sticky', zIndex: 2, left: rowAttrs.length * 120 + 'px', top: j * 30 + 'px' }, className: 'pvtAxisLabel' },
+                      c
+                    ) || null,
+                    colKeys.map(function (colKey, i) {
+                      var x = spanSize(colKeys, i, j);
+                      if (x === -1) {
+                        return null;
+                      }
+                      return _react2.default.createElement(
+                        'th',
+                        {
+                          className: 'pivotColLabel',
+                          key: 'colKey' + i + j,
+                          colSpan: x,
+                          style: { position: 'sticky', zIndex: 1, top: j * 30 + 'px' }
+                        },
+                        colKey[j]
+                      );
+                    }),
+                    j === 0 && _react2.default.createElement(
+                      'th',
+                      {
+                        className: 'pivotTotalLabel',
+                        key: 'pivotTotalLabel' + j,
+                        colSpan: aggregatorGather.length,
+                        rowSpan: colAttrs.length - (aggregatorGather.length === 0 ? 0 : 1),
+                        style: { position: 'sticky', zIndex: 2, top: j * 30 + 'px' }
+                      },
+                      'Totals'
+                    ) || _react2.default.createElement(_react2.default.Fragment, null),
+                    j === colAttrs.length - 1 && aggregatorGather.map(function (_, o) {
+                      return _react2.default.createElement(
+                        'th',
+                        {
+                          key: 'Total' + j + o,
+                          className: 'pivotColLabel pivotRowTotal',
+                          style: { position: 'sticky', zIndex: 2, top: j * 30 + 'px' }
+                        },
+                        _.vals.join(' ') + '(' + _.aggregatorName + ')'
+                      );
+                    }) || _react2.default.createElement(_react2.default.Fragment, null)
+                  );
+                })
+              ),
+              _react2.default.createElement(
+                'tbody',
+                null,
+                rowKeys.map(function (rowKey, i) {
+                  return _react2.default.createElement(
+                    'tr',
+                    { key: 'rowKeyRow' + i },
+                    rowKey.length && rowKey.map(function (txt, j) {
+                      var x = spanSize(rowKeys, i, j);
+                      if (x === -1) {
+                        return null;
+                      }
+                      return _react2.default.createElement(
+                        'th',
+                        {
+                          key: 'rowKeyLabel' + i + '-' + j,
+                          className: 'pivotRowLabel',
+                          rowSpan: x,
+                          colSpan: j === rowAttrs.length - 1 && colKeys.length !== 0 ? 2 : 1,
+                          style: { position: 'sticky', zIndex: 1, left: j * 120 + 'px' }
+                        },
+                        txt
+                      );
+                    }) || _react2.default.createElement('th', {
+                      key: 'rowKeyLabel' + i,
+                      className: 'pivotRowLabel'
+                    }),
+                    colKeys.map(function (colKey, j) {
+                      var aggregator = pivotData.getAggregator(rowKey, colKey);
+                      return _react2.default.createElement(
+                        'td',
+                        {
+                          className: 'pivotVal',
+                          key: 'pivotVal' + i + '-' + j,
+                          onClick: _this2.getClickHandler && _this2.getClickHandler(aggregator.value(), rowKey, colKey),
+                          style: _this2.valueCellColors(rowKey, colKey, aggregator.value())
+                        },
+                        aggregator.format(aggregator.value())
+                      );
+                    }),
+                    aggregatorGather.map(function (_, j) {
+                      var totalAggregator = pivotData.getAggregator([].concat(_toConsumableArray(rowKey), [_.aggregatorName]), []);
+                      return _react2.default.createElement(
+                        'td',
+                        {
+                          className: 'pivotTotal pivotRowTotal',
+                          key: 'pivotTotal' + i + '-' + j + '-' + _.aggregatorName,
+                          onClick: _this2.getClickHandler && _this2.getClickHandler(totalAggregator.value(), rowKey, [null]),
+                          style: _this2.colTotalColors(totalAggregator.value())
+                        },
+                        totalAggregator.format(totalAggregator.value())
+                      );
+                    })
+                  );
+                }),
+                _react2.default.createElement(
+                  'tr',
+                  null,
+                  _react2.default.createElement(
+                    'th',
+                    {
+                      className: 'pivotTotalLabel',
+                      colSpan: rowAttrs.length + (colKeys.length === 0 ? 0 : 1),
+                      style: { position: 'sticky', zIndex: 2, left: 0 }
+                    },
+                    'Totals'
+                  ) || _react2.default.createElement(_react2.default.Fragment, null),
+                  colKeys.map(function (colKey, i) {
+                    var totalAggregator = pivotData.getAggregator([], colKey);
+                    return _react2.default.createElement(
+                      'td',
+                      {
+                        className: 'pivotTotal',
+                        key: 'total' + i,
+                        onClick: _this2.getClickHandler && _this2.getClickHandler(totalAggregator.value(), [null], colKey),
+                        style: _this2.rowTotalColors(totalAggregator.value())
+                      },
+                      totalAggregator.format(totalAggregator.value())
+                    );
+                  }),
+                  aggregatorGather.map(function (_, o) {
+                    var grandTotalAggregator = pivotData.getAggregator([], [], _.aggregatorName);
+                    return _react2.default.createElement(
+                      'td',
+                      {
+                        key: 'aggregatorGather' + o,
+                        onClick: _this2.getClickHandler && _this2.getClickHandler(grandTotalAggregator.value(), [null], [null]),
+                        className: 'pivotGrandTotal pivotRowTotal'
+                      },
+                      grandTotalAggregator.format(grandTotalAggregator.value())
+                    );
+                  }) || _react2.default.createElement(_react2.default.Fragment, null)
+                )
+              )
+            )
+          )
+        );
+      }
+    }, {
+      key: 'handleScriptLoad',
+      value: function handleScriptLoad() {
+        (0, _jquery2.default)(document).ready(function () {
+          (0, _jquery2.default)('.pivotTable').dataTable({ scrollY: '50vh', scrollCollapse: true, paging: false });
+        });
+      }
+    }, {
       key: 'componentWillUnmount',
@@ -121,3 +582,3 @@ value: function componentWillUnmount() {
       value: function render() {
-        var _this2 = this;
+        var _this3 = this;
 
@@ -130,18 +591,9 @@ var pivotData = new _Utilities.PivotData(this.props);
         var aggregatorGather = this.props.aggregatorGather;
-        // const grandTotalAggregator = pivotData.getAggregator([], []);
 
-        var valueCellColors = function valueCellColors() {};
-        var rowTotalColors = function rowTotalColors() {};
-        var colTotalColors = function colTotalColors() {};
+        this.valueCellColors = function () {};
+        this.rowTotalColors = function () {};
+        this.colTotalColors = function () {};
         // todo
         if (opts.heatmapMode) {
           var colorScaleGenerator = this.props.tableColorScaleGenerator;
-          // const rowTotalValues = colKeys.map(x =>
-          //   pivotData.getAggregator([], x).value()
-          // );
-          // rowTotalColors = colorScaleGenerator(rowTotalValues);
-          // const colTotalValues = rowKeys.map(x =>
-          //   pivotData.getAggregator(x, []).value()
-          // );
-          // colTotalColors = colorScaleGenerator(colTotalValues);
           if (opts.heatmapMode === 'full') {
@@ -155,3 +607,3 @@ var allValues = [];
             var colorScale = colorScaleGenerator(allValues);
-            valueCellColors = function valueCellColors(r, c, v) {
+            this.valueCellColors = function (r, c, v) {
               return colorScale(v);
@@ -167,3 +619,3 @@ };
             });
-            valueCellColors = function valueCellColors(r, c, v) {
+            this.valueCellColors = function (r, c, v) {
               return rowColorScales[r](v);
@@ -179,3 +631,3 @@ };
             });
-            valueCellColors = function valueCellColors(r, c, v) {
+            this.valueCellColors = function (r, c, v) {
               return colColorScales[c](v);
@@ -186,3 +638,3 @@ };
 
-        var getClickHandler = this.props.tableOptions && this.props.tableOptions.clickCallback ? function (value, rowValues, colValues) {
+        this.getClickHandler = this.props.tableOptions && this.props.tableOptions.clickCallback ? function (value, rowValues, colValues) {
           var filters = {};
@@ -246,3 +698,3 @@ var _iteratorNormalCompletion = true;
           return function (e) {
-            return _this2.props.tableOptions.clickCallback(e, value, filters, pivotData);
+            return _this3.props.tableOptions.clickCallback(e, value, filters, pivotData);
           };
@@ -253,203 +705,9 @@ } : null;
           'div',
-          { className: 'pivot-table-warp' },
+          { className: 'use-virtual-table', ref: this.getVirtualTableRef, onScroll: function onScroll(e) {
+              return _this3.handleHorizontalScroll(e);
+            } },
           _react2.default.createElement(
             'div',
-            { className: 'pivot-table-container' },
-            _react2.default.createElement(
-              'div',
-              { className: 'pivot-table-header' },
-              _react2.default.createElement(
-                'table',
-                { className: 'pivotTable' },
-                _react2.default.createElement(
-                  'colgroup',
-                  null,
-                  rowAttrs.length === 0 && colKeys.length === 0 && _react2.default.createElement('col', { style: { width: '120px' } }),
-                  rowAttrs.length !== 0 && rowAttrs.map(function (r, i) {
-                    return _react2.default.createElement('col', { style: { width: '120px' } });
-                  }),
-                  colKeys.length && _react2.default.createElement('col', { style: { width: '120px' } }) || null,
-                  colKeys.map(function (colKey, i) {
-                    return _react2.default.createElement('col', { style: { width: '120px' } });
-                  }),
-                  aggregatorGather.map(function (_, o) {
-                    return _react2.default.createElement('col', { style: { width: '120px' } });
-                  }) || _react2.default.createElement(_react2.default.Fragment, null)
-                ),
-                _react2.default.createElement(
-                  'thead',
-                  null,
-                  colAttrs.map(function (c, j) {
-                    return _react2.default.createElement(
-                      'tr',
-                      { key: '' + c + j },
-                      rowAttrs.length === 0 && colKeys.length === 0 && _react2.default.createElement('th', { colSpan: rowAttrs.length, rowSpan: colAttrs.length - 1 }) || null,
-                      j === 0 && rowAttrs.length !== 0 && _react2.default.createElement('th', { colSpan: rowAttrs.length, rowSpan: colAttrs.length - 1, style: { position: 'sticky', zIndex: 2, left: 0 } }) || rowAttrs.length !== 0 && j === colAttrs.length - 1 && rowAttrs.map(function (r, i) {
-                        return _react2.default.createElement(
-                          'th',
-                          { style: { position: 'sticky', zIndex: 2, left: i * 120 + 'px' }, className: 'pivotAxisLabel', key: 'rowAttr' + i },
-                          r
-                        );
-                      }),
-                      colKeys.length && _react2.default.createElement(
-                        'th',
-                        { style: { position: 'sticky', zIndex: 2, left: rowAttrs.length * 120 + 'px' }, className: 'pvtAxisLabel' },
-                        c
-                      ) || null,
-                      colKeys.map(function (colKey, i) {
-                        var x = spanSize(colKeys, i, j);
-                        if (x === -1) {
-                          return null;
-                        }
-                        return _react2.default.createElement(
-                          'th',
-                          {
-                            className: 'pivotColLabel',
-                            key: 'colKey' + i + j,
-                            colSpan: x
-                          },
-                          colKey[j]
-                        );
-                      }),
-                      j === 0 && _react2.default.createElement(
-                        'th',
-                        {
-                          className: 'pivotTotalLabel',
-                          key: 'pivotTotalLabel' + j,
-                          colSpan: aggregatorGather.length,
-                          rowSpan: colAttrs.length - (aggregatorGather.length === 0 ? 0 : 1)
-                        },
-                        'Totals'
-                      ) || _react2.default.createElement(_react2.default.Fragment, null),
-                      j === colAttrs.length - 1 && aggregatorGather.map(function (_, o) {
-                        return _react2.default.createElement(
-                          'th',
-                          {
-                            key: 'Total' + j + o,
-                            className: 'pivotColLabel pivotRowTotal'
-                          },
-                          _.vals.join(' ') + '(' + _.aggregatorName + ')'
-                        );
-                      }) || _react2.default.createElement(_react2.default.Fragment, null)
-                    );
-                  })
-                )
-              )
-            ),
-            _react2.default.createElement(
-              'div',
-              { className: 'pivot-table-body' },
-              _react2.default.createElement(
-                'table',
-                { className: 'pivotTable' },
-                _react2.default.createElement(
-                  'colgroup',
-                  null,
-                  rowAttrs.length && rowAttrs.map(function (txt, j) {
-                    return _react2.default.createElement('col', { style: { width: '120px' } });
-                  }) || _react2.default.createElement('col', { style: { width: '120px' } }),
-                  rowAttrs.length !== 0 && colKeys.length !== 0 && _react2.default.createElement('col', { style: { width: '120px' } }),
-                  colKeys.map(function (colKey, j) {
-                    return _react2.default.createElement('col', { style: { width: '120px' } });
-                  }),
-                  aggregatorGather.map(function (_, j) {
-                    return _react2.default.createElement('col', { style: { width: '120px' } });
-                  })
-                ),
-                _react2.default.createElement(
-                  'tbody',
-                  null,
-                  rowKeys.map(function (rowKey, i) {
-                    return _react2.default.createElement(
-                      'tr',
-                      { key: 'rowKeyRow' + i },
-                      rowKey.length && rowKey.map(function (txt, j) {
-                        var x = spanSize(rowKeys, i, j);
-                        if (x === -1) {
-                          return null;
-                        }
-                        return _react2.default.createElement(
-                          'th',
-                          {
-                            key: 'rowKeyLabel' + i + '-' + j,
-                            className: 'pivotRowLabel',
-                            rowSpan: x,
-                            colSpan: j === rowAttrs.length - 1 && colKeys.length !== 0 ? 2 : 1,
-                            style: { position: 'sticky', zIndex: 2, left: j * 120 + 'px' }
-                          },
-                          txt
-                        );
-                      }) || _react2.default.createElement('th', {
-                        key: 'rowKeyLabel' + i,
-                        className: 'pivotRowLabel'
-                      }),
-                      colKeys.map(function (colKey, j) {
-                        var aggregator = pivotData.getAggregator(rowKey, colKey);
-                        return _react2.default.createElement(
-                          'td',
-                          {
-                            className: 'pivotVal',
-                            key: 'pivotVal' + i + '-' + j,
-                            onClick: getClickHandler && getClickHandler(aggregator.value(), rowKey, colKey),
-                            style: valueCellColors(rowKey, colKey, aggregator.value())
-                          },
-                          aggregator.format(aggregator.value())
-                        );
-                      }),
-                      aggregatorGather.map(function (_, j) {
-                        var totalAggregator = pivotData.getAggregator([].concat(_toConsumableArray(rowKey), [_.aggregatorName]), []);
-                        return _react2.default.createElement(
-                          'td',
-                          {
-                            className: 'pivotTotal pivotRowTotal',
-                            key: 'pivotTotal' + i + '-' + j + '-' + _.aggregatorName,
-                            onClick: getClickHandler && getClickHandler(totalAggregator.value(), rowKey, [null]),
-                            style: colTotalColors(totalAggregator.value())
-                          },
-                          totalAggregator.format(totalAggregator.value())
-                        );
-                      })
-                    );
-                  }),
-                  _react2.default.createElement(
-                    'tr',
-                    null,
-                    _react2.default.createElement(
-                      'th',
-                      {
-                        className: 'pivotTotalLabel',
-                        colSpan: rowAttrs.length + (colKeys.length === 0 ? 0 : 1),
-                        style: { position: 'sticky', zIndex: 2, left: 0 }
-                      },
-                      'Totals'
-                    ) || _react2.default.createElement(_react2.default.Fragment, null),
-                    colKeys.map(function (colKey, i) {
-                      var totalAggregator = pivotData.getAggregator([], colKey);
-                      return _react2.default.createElement(
-                        'td',
-                        {
-                          className: 'pivotTotal',
-                          key: 'total' + i,
-                          onClick: getClickHandler && getClickHandler(totalAggregator.value(), [null], colKey),
-                          style: rowTotalColors(totalAggregator.value())
-                        },
-                        totalAggregator.format(totalAggregator.value())
-                      );
-                    }),
-                    aggregatorGather.map(function (_, o) {
-                      var grandTotalAggregator = pivotData.getAggregator([], [], _.aggregatorName);
-                      return _react2.default.createElement(
-                        'td',
-                        {
-                          key: 'aggregatorGather' + o,
-                          onClick: getClickHandler && getClickHandler(grandTotalAggregator.value(), [null], [null]),
-                          className: 'pivotGrandTotal pivotRowTotal'
-                        },
-                        grandTotalAggregator.format(grandTotalAggregator.value())
-                      );
-                    }) || _react2.default.createElement(_react2.default.Fragment, null)
-                  )
-                )
-              )
-            )
+            { className: 'use-virtual-table-body' },
+            this.tableBodyRender()
           )
@@ -456,0 +714,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

307006

increased by9.65%

Lines of code

3166

increased by8.28%

Worsened metrics

Dependency count

15

increased by15.38%

Dependency changes

• + Addedrc-util@^5.24.2

• + Addedreact-window@^1.8.7

• + Added@babel/runtime@7.24.7(transitive)

• + Addedmemoize-one@5.2.1(transitive)

• + Addedrc-util@5.42.0(transitive)

• + Addedreact-is@18.3.1(transitive)

• + Addedreact-window@1.8.10(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)