@hrforte/react-pivottable 2.2.1 → 3.0.0

package/dist/TableRenderers.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getPivotTableProps = undefined;
 
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
@@ -20,6 +21,10 @@ var _propTypes2 = _interopRequireDefault(_propTypes);
 
 var _Utilities = require('./Utilities');
 
+var _pivotCompute = require('./pivotCompute');
+
+var _PivotDataWorker = require('./PivotDataWorker');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -28,7 +33,59 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } /* eslint-disable no-inline-comments */
+
+
+var pivotTablePropsByElement = new WeakMap();
+
+var getPivotTableProps = exports.getPivotTableProps = function getPivotTableProps(element) {
+  return pivotTablePropsByElement.get(element);
+};
+
+var VIRTUAL_ROW_HEIGHT = 32;
+var VIRTUAL_ROW_OVERSCAN = 8;
+var VIRTUAL_ROW_BLOCK = 32;
+var VIRTUAL_COLUMN_WIDTH = 100;
+var VIRTUAL_COLUMN_OVERSCAN = 4;
+var VIRTUAL_COLUMN_BLOCK = 16;
+var VIRTUAL_LOADING_PAINT_MS = 16;
+var VIRTUAL_SCROLL_DEBOUNCE_MS = 500;
+var INITIAL_ROW_WINDOW_END = 50;
+var INITIAL_COLUMN_WINDOW_END = 32;
+var FLAT_KEY_SEPARATOR = String.fromCharCode(0);
+
+var _getViewportKeyForProps = function _getViewportKeyForProps(props) {
+  var precomputed = props.precomputedData;
+  return precomputed && typeof precomputed.viewportKey === 'number' && !(0, _pivotCompute.sortersHaveFunctions)(props.sorters) ? precomputed.viewportKey : null;
+};
+
+function PivotLoadingContent() {
+  return _react2.default.createElement(
+    _react2.default.Fragment,
+    null,
+    _react2.default.createElement('div', { className: 'pvtLoadingSpinner', 'aria-hidden': 'true' }),
+    _react2.default.createElement(
+      'div',
+      { className: 'pvtLoadingText' },
+      'Processing'
+    )
+  );
+}
+
+var getScrollParent = function getScrollParent(element) {
+  var parent = element.parentElement;
+  while (parent && parent !== document.body) {
+    var _window$getComputedSt = window.getComputedStyle(parent),
+        overflowX = _window$getComputedSt.overflowX,
+        overflowY = _window$getComputedSt.overflowY;
+
+    if (overflowX === 'auto' || overflowX === 'scroll' || overflowY === 'auto' || overflowY === 'scroll') {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return window;
+};
 
 // helper function for setting row/col-span in pivotTableRenderer
 var spanSize = function spanSize(arr, i, j) {
@@ -64,24 +121,31 @@ var spanSize = function spanSize(arr, i, j) {
   return len;
 };
 
-// ==> Calculate the positions for GroupSegments <==
-function buildHeaderGroupSegments(rowAttrs, rowGroupConfig) {
-  var attrToGroup = {};
+// ==> Build a lookup: name -> group label <==
+// `match` can contain row attribute names, the synthetic 'Values' column
+// (aggregations displayed as rows) and aggregation names/labels
+// (aggregations displayed as columns).
+function buildGroupLookup(rowGroupConfig) {
+  var lookup = {};
   (rowGroupConfig || []).forEach(function (_ref) {
     var label = _ref.label,
         match = _ref.match;
 
     match.forEach(function (name) {
-      attrToGroup[name] = label;
+      lookup[name] = label;
     });
   });
+  return lookup;
+}
+
+// ==> Calculate the positions for GroupSegments <==
+function buildHeaderGroupSegments(attrs, rowGroupConfig) {
+  var lookup = buildGroupLookup(rowGroupConfig);
 
   // Mỗi attribute luôn là 1 segment riêng — không gộp colSpan nữa,
   // để label nhóm (vd "AAA") hiện lặp lại trên từng cột con.
-  return rowAttrs.map(function (name) {
-    // eslint-disable-next-line no-undefined
-    var group = attrToGroup[name] !== undefined ? attrToGroup[name] : null;
-    return { group: group, span: 1 };
+  return attrs.map(function (name) {
+    return { group: lookup[name] || null, span: 1 };
   });
 }
 
@@ -342,18 +406,308 @@ function makeRenderer() {
   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.state = {
+        start: 0,
+        end: INITIAL_ROW_WINDOW_END,
+        rows: null,
+        columnStart: 0,
+        columnEnd: INITIAL_COLUMN_WINDOW_END,
+        columnTotals: null,
+        viewportKey: null,
+        sourceViewportKey: _getViewportKeyForProps(props),
+        scrollPending: false
+      };
+      _this.bodyRef = _react2.default.createRef();
+      _this.scrollParent = null;
+      _this.overlayBounds = null;
+      _this.frameId = null;
+      _this.scrollTimer = null;
+      _this.scrollPending = false;
+      _this.rowCount = 0;
+      _this.columnCount = 0;
+      _this.leadingColumnCount = 0;
+      _this.leadingColumnWidth = 0;
+      _this.pivotProps = null;
+      _this.pivotData = null;
+      _this.requestedWindow = null;
+      _this.viewportTimer = null;
+      _this.unmounted = false;
+      _this.scheduleUpdate = _this.scheduleUpdate.bind(_this);
+      _this.handleScroll = _this.handleScroll.bind(_this);
+      return _this;
     }
 
     _createClass(TableRenderer, [{
+      key: 'componentDidMount',
+      value: function componentDidMount() {
+        this.attachScroll();
+        this.updateWindow();
+      }
+    }, {
+      key: 'componentDidUpdate',
+      value: function componentDidUpdate(prevProps) {
+        if (prevProps === this.props) {
+          return;
+        }
+
+        var previousViewportKey = this.getViewportKeyForProps(prevProps);
+        var nextViewportKey = this.getViewportKey();
+        if (previousViewportKey !== nextViewportKey) {
+          this.invalidateViewportRequest();
+          if (this.scrollTimer !== null) {
+            clearTimeout(this.scrollTimer);
+            this.scrollTimer = null;
+          }
+          this.scrollPending = false;
+        }
+
+        this.attachScroll();
+        this.scheduleUpdate();
+      }
+    }, {
+      key: 'componentWillUnmount',
+      value: function componentWillUnmount() {
+        this.unmounted = true;
+        if (this.viewportTimer !== null) {
+          clearTimeout(this.viewportTimer);
+        }
+        if (this.scrollTimer !== null) {
+          clearTimeout(this.scrollTimer);
+        }
+        if (this.scrollParent) {
+          this.scrollParent.removeEventListener('scroll', this.handleScroll);
+        }
+        window.removeEventListener('resize', this.scheduleUpdate);
+        if (this.frameId !== null) {
+          if (typeof cancelAnimationFrame === 'function') {
+            cancelAnimationFrame(this.frameId);
+          } else {
+            clearTimeout(this.frameId);
+          }
+        }
+      }
+    }, {
+      key: 'attachScroll',
+      value: function attachScroll() {
+        if (!this.props.virtualizeRows) {
+          if (this.scrollParent) {
+            this.scrollParent.removeEventListener('scroll', this.handleScroll);
+            this.scrollParent = null;
+            window.removeEventListener('resize', this.scheduleUpdate);
+          }
+          if (this.scrollTimer !== null) {
+            clearTimeout(this.scrollTimer);
+            this.scrollTimer = null;
+          }
+          this.scrollPending = false;
+          this.invalidateViewportRequest();
+          return;
+        }
+        if (!this.bodyRef.current) {
+          return;
+        }
+        var parent = getScrollParent(this.bodyRef.current);
+        if (parent === this.scrollParent) {
+          return;
+        }
+        if (this.scrollParent) {
+          this.scrollParent.removeEventListener('scroll', this.handleScroll);
+        }
+        this.scrollParent = parent;
+        this.updateOverlayBounds();
+        parent.addEventListener('scroll', this.handleScroll, { passive: true });
+        window.addEventListener('resize', this.scheduleUpdate);
+      }
+    }, {
+      key: 'updateOverlayBounds',
+      value: function updateOverlayBounds() {
+        if (!this.scrollParent) {
+          return;
+        }
+        var bounds = this.scrollParent === window ? {
+          top: 0,
+          left: 0,
+          width: window.innerWidth,
+          height: window.innerHeight
+        } : this.scrollParent.getBoundingClientRect();
+        this.overlayBounds = {
+          top: Math.max(0, bounds.top),
+          left: Math.max(0, bounds.left),
+          width: Math.max(0, Math.min(window.innerWidth, bounds.left + bounds.width) - Math.max(0, bounds.left)),
+          height: Math.max(0, Math.min(window.innerHeight, bounds.top + bounds.height) - Math.max(0, bounds.top))
+        };
+      }
+    }, {
+      key: 'handleScroll',
+      value: function handleScroll() {
+        var _this2 = this;
+
+        if (this.scrollTimer !== null) {
+          clearTimeout(this.scrollTimer);
+        }
+        if (!this.scrollPending) {
+          this.scrollPending = true;
+          this.updateOverlayBounds();
+          this.setState({ scrollPending: true });
+        }
+        this.scrollTimer = setTimeout(function () {
+          _this2.scrollTimer = null;
+          _this2.scrollPending = false;
+          _this2.updateWindow();
+          if (!_this2.unmounted) {
+            _this2.setState({ scrollPending: false });
+          }
+        }, VIRTUAL_SCROLL_DEBOUNCE_MS);
+      }
+    }, {
+      key: 'scheduleUpdate',
+      value: function scheduleUpdate() {
+        var _this3 = this;
+
+        if (this.frameId !== null) {
+          return;
+        }
+        var schedule = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : function (callback) {
+          return setTimeout(callback, 16);
+        };
+        this.frameId = schedule(function () {
+          _this3.frameId = null;
+          _this3.updateOverlayBounds();
+          if (!_this3.props.virtualizeRows && _this3.state.scrollPending) {
+            _this3.setState({ scrollPending: false });
+          }
+          if (!_this3.scrollPending) {
+            _this3.updateWindow();
+          }
+        });
+      }
+    }, {
+      key: 'getViewportKeyForProps',
+      value: function getViewportKeyForProps(props) {
+        return _getViewportKeyForProps(props);
+      }
+    }, {
+      key: 'getViewportKey',
+      value: function getViewportKey() {
+        return this.getViewportKeyForProps(this.props);
+      }
+    }, {
+      key: 'invalidateViewportRequest',
+      value: function invalidateViewportRequest() {
+        this.requestedWindow = null;
+        if (this.viewportTimer !== null) {
+          clearTimeout(this.viewportTimer);
+          this.viewportTimer = null;
+        }
+      }
+    }, {
+      key: 'requestViewportWindow',
+      value: function requestViewportWindow(start, end, columnStart, columnEnd, viewportKey) {
+        var _this4 = this;
+
+        var columnMode = this.props.tableOptions && this.props.tableOptions.aggregationDisplayMode === 'column';
+        var requestKey = viewportKey + ':' + start + ':' + end + ':' + (columnStart + ':' + columnEnd + ':' + columnMode);
+        if (requestKey === this.requestedWindow) {
+          return;
+        }
+        this.requestedWindow = requestKey;
+        if (this.viewportTimer !== null) {
+          clearTimeout(this.viewportTimer);
+        }
+        this.setState({
+          start: start,
+          end: end,
+          columnStart: columnStart,
+          columnEnd: columnEnd,
+          rows: null,
+          columnTotals: null,
+          viewportKey: viewportKey
+        });
+        // Give the browser a frame to paint the loading row before dispatching.
+        this.viewportTimer = setTimeout(function () {
+          _this4.viewportTimer = null;
+          (0, _PivotDataWorker.computePivotViewportInWorker)(viewportKey, start, end, columnMode, columnStart, columnEnd).catch(function (error) {
+            if (error && error.code === 'PIVOT_VIEWPORT_CANCELLED') {
+              return null;
+            }
+            return (0, _pivotCompute.computePivotViewport)(_this4.props.precomputedData, start, end, columnMode, columnStart, columnEnd);
+          }).then(function (viewport) {
+            if (!viewport || _this4.unmounted || _this4.requestedWindow !== requestKey) {
+              return;
+            }
+            _this4.setState({
+              rows: viewport.rows,
+              columnTotals: viewport.colTotals || {}
+            });
+          });
+        }, VIRTUAL_LOADING_PAINT_MS);
+      }
+    }, {
+      key: 'measureLeadingColumnWidth',
+      value: function measureLeadingColumnWidth() {
+        var body = this.bodyRef.current;
+        var table = body && body.parentElement;
+        var firstColumn = table && table.querySelector('thead .pvtColLabel');
+        if (!table || !firstColumn) {
+          return;
+        }
+        var tableBounds = table.getBoundingClientRect();
+        var firstColumnBounds = firstColumn.getBoundingClientRect();
+        var leftSpacer = table.querySelector('thead .pvtVirtualColumnSpacer-left');
+        var leftSpacerWidth = leftSpacer ? leftSpacer.getBoundingClientRect().width : 0;
+        var measuredWidth = firstColumnBounds.left - tableBounds.left - leftSpacerWidth;
+        if (Number.isFinite(measuredWidth) && measuredWidth > 0) {
+          this.leadingColumnWidth = measuredWidth;
+        }
+      }
+    }, {
+      key: 'updateWindow',
+      value: function updateWindow() {
+        if (!this.scrollParent || !this.bodyRef.current || !this.props.virtualizeRows) {
+          return;
+        }
+        var viewportTop = this.scrollParent === window ? 0 : this.scrollParent.getBoundingClientRect().top;
+        var viewportHeight = this.scrollParent === window ? window.innerHeight : this.scrollParent.clientHeight;
+        var viewportLeft = this.scrollParent === window ? 0 : this.scrollParent.getBoundingClientRect().left;
+        var viewportWidth = this.scrollParent === window ? window.innerWidth : this.scrollParent.clientWidth;
+        var bodyBounds = this.bodyRef.current.getBoundingClientRect();
+        var bodyTop = Number.isFinite(bodyBounds.top) ? bodyBounds.top : 0;
+        var bodyLeft = Number.isFinite(bodyBounds.left) ? bodyBounds.left : 0;
+        this.measureLeadingColumnWidth();
+        var offset = viewportTop - bodyTop;
+        var requestedStart = Math.max(0, Math.min(this.rowCount, Math.floor(offset / VIRTUAL_ROW_HEIGHT) - VIRTUAL_ROW_OVERSCAN));
+        var start = Math.floor(requestedStart / VIRTUAL_ROW_BLOCK) * VIRTUAL_ROW_BLOCK;
+        var end = Math.min(this.rowCount, start + Math.ceil(viewportHeight / VIRTUAL_ROW_HEIGHT) + VIRTUAL_ROW_BLOCK + VIRTUAL_ROW_OVERSCAN * 2);
+        var horizontalOffset = Math.max(0, viewportLeft - bodyLeft - (this.leadingColumnWidth || this.leadingColumnCount * VIRTUAL_COLUMN_WIDTH));
+        var requestedColumnStart = Math.max(0, Math.min(this.columnCount, Math.floor(horizontalOffset / VIRTUAL_COLUMN_WIDTH) - VIRTUAL_COLUMN_OVERSCAN));
+        var columnStart = Math.floor(requestedColumnStart / VIRTUAL_COLUMN_BLOCK) * VIRTUAL_COLUMN_BLOCK;
+        var columnEnd = Math.min(this.columnCount, columnStart + Math.ceil(viewportWidth / VIRTUAL_COLUMN_WIDTH) + VIRTUAL_COLUMN_BLOCK + VIRTUAL_COLUMN_OVERSCAN * 2);
+        var viewportKey = this.getViewportKey();
+        if (viewportKey !== null && (this.rowCount > _pivotCompute.VIRTUAL_ROW_THRESHOLD || this.columnCount > _pivotCompute.VIRTUAL_COLUMN_THRESHOLD)) {
+          this.requestViewportWindow(start, end, columnStart, columnEnd, viewportKey);
+          return;
+        }
+        this.invalidateViewportRequest();
+        if (start !== this.state.start || end !== this.state.end || columnStart !== this.state.columnStart || columnEnd !== this.state.columnEnd) {
+          this.setState({ start: start, end: end, columnStart: columnStart, columnEnd: columnEnd });
+        }
+      }
+    }, {
       key: 'render',
       value: function render() {
-        var _this2 = this;
+        var _this5 = this;
 
-        var pivotData = new _Utilities.PivotData(this.props);
+        if (this.pivotProps !== this.props) {
+          var pivotProps = !this.props.virtualizeRows && this.props.precomputedData && this.props.precomputedData.virtualized ? Object.assign({}, this.props, { precomputedData: null }) : this.props;
+          this.pivotData = new _Utilities.PivotData(pivotProps);
+          this.pivotProps = this.props;
+        }
+        var pivotData = this.pivotData;
         var colAttrs = pivotData.props.cols;
         var rowAttrs = pivotData.props.rows;
         var aggregations = pivotData.getAggregations();
@@ -369,16 +723,15 @@ function makeRenderer() {
         var shouldRenderRowHeaderPlaceholder = rowAttrsToRender.length !== 0;
 
         // --- Row group header (rowGroupConfig) ---
+        // `match` may reference row attribute names, 'Values' (aggregations shown
+        // as rows) and aggregation names/labels (aggregations shown as columns).
+        // Every column gets its own <th>, so the group label is repeated on each.
         var rowGroupConfig = this.props.rowGroupConfig;
         var hasHeaderGroup = Boolean(rowGroupConfig && rowGroupConfig.length);
-        var headerGroupSegments = hasHeaderGroup ? buildHeaderGroupSegments(rowAttrs, rowGroupConfig) : [];
-        // extraSpan accounts for the synthetic "Values" column added when there
-        // are multiple aggregators shown as rows; it isn't part of any group.
-        var headerGroupExtraSpan = rowAttrsToRender.length - rowAttrs.length;
+        var groupLookup = buildGroupLookup(rowGroupConfig);
+        var headerGroupSegments = hasHeaderGroup ? buildHeaderGroupSegments(rowAttrsToRender, rowGroupConfig) : [];
         var renderGroupSegments = function renderGroupSegments(rowSpan) {
-          var extraSpan = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
-          var cells = headerGroupSegments.map(function (seg, idx) {
+          return headerGroupSegments.map(function (seg, idx) {
             return _react2.default.createElement(
               'th',
               {
@@ -391,10 +744,6 @@ function makeRenderer() {
               seg.group || ''
             );
           });
-          if (extraSpan > 0) {
-            cells.push(_react2.default.createElement('th', { key: 'hgSegExtra', colSpan: extraSpan, rowSpan: rowSpan }));
-          }
-          return cells;
         };
         // --- End row group header ---
 
@@ -408,7 +757,7 @@ function makeRenderer() {
         // The "No." header cell is rendered in the first header row and spans
         // every header row, so the repeated header rows (column attributes,
         // aggregator labels, row group labels) stay aligned with the body.
-        var numberColumnHeaderRowSpan = colAttrsToRender.length + (renderedAggregationHeaderRow ? 1 : 0) + (rowAttrsToRender.length !== 0 && !renderedAggregationHeaderRow ? 1 : 0) + (hasHeaderGroup && colAttrsToRender.length === 0 && rowAttrsToRender.length !== 0 ? 1 : 0);
+        var numberColumnHeaderRowSpan = colAttrsToRender.length + (renderedAggregationHeaderRow ? 1 : 0) + (rowAttrsToRender.length !== 0 && !renderedAggregationHeaderRow ? 1 : 0) + (hasHeaderGroup && colAttrsToRender.length === 0 && rowAttrsToRender.length !== 0 ? 1 : 0) + (renderedAggregationHeaderRow && hasHeaderGroup ? 1 : 0);
         var numberColumnInGroupRow = hasHeaderGroup && colAttrsToRender.length === 0 && rowAttrsToRender.length !== 0;
         var renderNumberHeaderCell = function renderNumberHeaderCell() {
           var rowSpan = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : numberColumnHeaderRowSpan;
@@ -422,86 +771,96 @@ function makeRenderer() {
 
         var rowKeys = pivotData.getRowKeys();
         var baseRowKeys = hasMultipleAggregators && !isColumnAggregationMode && rowKeys.length === 0 ? [[]] : rowKeys;
-        var renderedRows = hasMultipleAggregators && !isColumnAggregationMode ? baseRowKeys.reduce(function (acc, rowKey) {
-          aggregations.forEach(function (agg) {
-            acc.push({
-              displayKey: rowKey.concat([agg.label || agg.aggregatorName]),
-              actualKey: rowKey,
-              aggregationKey: agg.key
-            });
-          });
-          return acc;
-        }, []) : baseRowKeys.map(function (rowKey) {
-          return {
-            displayKey: rowKey,
-            actualKey: rowKey,
-            aggregationKey: primaryAggregation.key
-          };
-        });
-        var rowKeyValues = renderedRows.map(function (r) {
-          return r.displayKey;
-        });
+        var totalRowCount = this.props.precomputedData && this.props.precomputedData.virtualized && typeof this.props.precomputedData.totalRows === 'number' ? this.props.precomputedData.totalRows : baseRowKeys.length * (hasMultipleAggregators && !isColumnAggregationMode ? aggregations.length : 1);
+        var isRowVirtualized = Boolean(this.props.virtualizeRows) && totalRowCount > _pivotCompute.VIRTUAL_ROW_THRESHOLD;
         var colKeys = pivotData.getColKeys();
         var baseColKeys = isColumnAggregationMode && colKeys.length === 0 ? [[]] : colKeys;
-        var columnMeta = isColumnAggregationMode ? baseColKeys.reduce(function (acc, colKey) {
-          aggregations.forEach(function (agg) {
-            acc.push({
-              displayKey: colKey.concat([agg.label || agg.aggregatorName]),
+        var totalColumnCount = isColumnAggregationMode ? baseColKeys.length * aggregations.length : colKeys.length;
+        var isColumnVirtualized = Boolean(this.props.virtualizeRows) && totalColumnCount > _pivotCompute.VIRTUAL_COLUMN_THRESHOLD;
+        var isVirtualized = isRowVirtualized || isColumnVirtualized;
+        var visibleColumnStart = isColumnVirtualized ? Math.min(this.state.columnStart, totalColumnCount) : 0;
+        var visibleColumnEnd = isColumnVirtualized ? Math.min(Math.max(this.state.columnEnd, visibleColumnStart), totalColumnCount) : totalColumnCount;
+        var columnMeta = [];
+        for (var columnIndex = visibleColumnStart; columnIndex < visibleColumnEnd; columnIndex++) {
+          if (isColumnAggregationMode) {
+            var colKey = baseColKeys[Math.floor(columnIndex / aggregations.length)];
+            var aggregation = aggregations[columnIndex % aggregations.length];
+            columnMeta.push({
+              displayKey: colKey.concat([aggregation.label || aggregation.aggregatorName]),
               actualKey: colKey,
-              aggregationKey: agg.key
+              aggregationKey: aggregation.key,
+              absoluteIndex: columnIndex
             });
-          });
-          return acc;
-        }, []) : colKeys.map(function (colKey) {
-          return {
-            displayKey: colKey,
-            actualKey: colKey,
-            aggregationKey: primaryAggregation.key
-          };
-        });
+          } else {
+            var _colKey = colKeys[columnIndex];
+            columnMeta.push({
+              displayKey: _colKey,
+              actualKey: _colKey,
+              aggregationKey: primaryAggregation.key,
+              absoluteIndex: columnIndex
+            });
+          }
+        }
         var colKeyValues = columnMeta.map(function (col) {
           return col.displayKey;
         });
+        var leftColumnSpacerWidth = isColumnVirtualized ? visibleColumnStart * VIRTUAL_COLUMN_WIDTH : 0;
+        var rightColumnSpacerWidth = isColumnVirtualized ? (totalColumnCount - visibleColumnEnd) * VIRTUAL_COLUMN_WIDTH : 0;
+        var renderColumnSpacer = function renderColumnSpacer(side, width) {
+          var Cell = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'th';
+          return width > 0 ? _react2.default.createElement(Cell, {
+            'aria-hidden': 'true',
+            className: 'pvtVirtualColumnSpacer pvtVirtualColumnSpacer-' + side,
+            key: 'virtual-column-spacer-' + side,
+            style: { width: width, minWidth: width, maxWidth: width }
+          }) : null;
+        };
 
         var renderAggregatorHeaderCells = function renderAggregatorHeaderCells() {
-          return columnMeta.map(function (colMeta, idx) {
-            var label = colMeta.displayKey[colMeta.displayKey.length - 1] || '';
-            // Calculate colspan/rowspan so aggregator headers line up with column groups
-            // aggregator index is the last element in displayKey (after column attrs)
-            var aggIndex = colAttrsToRender.length;
-            // When there are column attributes, each aggregator should appear once per column group,
-            // so each aggregator header should have colSpan = 1.
-            // When there are no column attributes, use spanSize to merge identical aggregator labels.
-            var colSpan = void 0;
-            if (hasColumnAttributes) {
-              // Each aggregator appears once per column group, so colSpan is always 1
-              // This ensures aggregator headers are listed in each column group and align
-              // correctly with the column groups above (which have colSpan = number of aggregators)
-              colSpan = 1;
-            } else {
-              // Use spanSize to merge identical aggregator labels when there are no column attributes
-              colSpan = spanSize(colKeyValues, idx, aggIndex);
-              // If spanSize returned -1 it means this cell is merged into a previous one
-              if (colSpan === -1) {
-                return null;
+          return _react2.default.createElement(
+            _react2.default.Fragment,
+            null,
+            renderColumnSpacer('left', leftColumnSpacerWidth),
+            columnMeta.map(function (colMeta, idx) {
+              var label = colMeta.displayKey[colMeta.displayKey.length - 1] || '';
+              // Calculate colspan/rowspan so aggregator headers line up with column groups
+              // aggregator index is the last element in displayKey (after column attrs)
+              var aggIndex = colAttrsToRender.length;
+              // When there are column attributes, each aggregator should appear once per column group,
+              // so each aggregator header should have colSpan = 1.
+              // When there are no column attributes, use spanSize to merge identical aggregator labels.
+              var colSpan = void 0;
+              if (hasColumnAttributes) {
+                // Each aggregator appears once per column group, so colSpan is always 1
+                // This ensures aggregator headers are listed in each column group and align
+                // correctly with the column groups above (which have colSpan = number of aggregators)
+                colSpan = 1;
+              } else {
+                // Use spanSize to merge identical aggregator labels when there are no column attributes
+                colSpan = spanSize(colKeyValues, idx, aggIndex);
+                // If spanSize returned -1 it means this cell is merged into a previous one
+                if (colSpan === -1) {
+                  return null;
+                }
               }
-            }
 
-            // When there are column attributes, rowSpan should account for the row header row
-            // When there are no column attributes, rowSpan is 1
-            var rowSpan = hasColumnAttributes && rowAttrsToRender.length !== 0 ? 1 : 1;
+              // When there are column attributes, rowSpan should account for the row header row
+              // When there are no column attributes, rowSpan is 1
+              var rowSpan = hasColumnAttributes && rowAttrsToRender.length !== 0 ? 1 : 1;
 
-            return _react2.default.createElement(
-              'th',
-              {
-                className: 'pvtColLabel',
-                key: 'agg-label-' + idx,
-                colSpan: colSpan,
-                rowSpan: rowSpan
-              },
-              label
-            );
-          });
+              return _react2.default.createElement(
+                'th',
+                {
+                  className: 'pvtColLabel',
+                  key: 'agg-label-' + colMeta.absoluteIndex,
+                  colSpan: colSpan,
+                  rowSpan: rowSpan
+                },
+                label
+              );
+            }),
+            renderColumnSpacer('right', rightColumnSpacerWidth)
+          );
         };
 
         var valueCellColors = function valueCellColors() {};
@@ -566,6 +925,52 @@ function makeRenderer() {
           aggregationNameLookup[agg.key] = agg.aggregatorName;
         });
 
+        // Lookup aggregationKey -> aggregation definition (to read `vals`)
+        var aggregationByKey = {};
+        aggregations.forEach(function (agg) {
+          aggregationByKey[agg.key] = agg;
+        });
+
+        // Find the group label for an aggregation. rowGroupConfig `match` is
+        // compared against the aggregation's `vals` (the field names it works
+        // on, e.g. ['Employee Ref']). Falls back to label / aggregatorName.
+        var getAggregationGroup = function getAggregationGroup(aggregationKey) {
+          var agg = aggregationByKey[aggregationKey];
+          if (!agg) {
+            return null;
+          }
+          var vals = Array.isArray(agg.vals) ? agg.vals : [];
+          for (var k = 0; k < vals.length; k++) {
+            if (groupLookup[vals[k]]) {
+              return groupLookup[vals[k]];
+            }
+          }
+          return groupLookup[agg.label] || groupLookup[agg.aggregatorName] || null;
+        };
+
+        // Group label cells for the aggregation columns (column aggregation mode).
+        // Each column renders its own <th>, so the label repeats on every column.
+        var renderAggregatorGroupCells = function renderAggregatorGroupCells() {
+          return _react2.default.createElement(
+            _react2.default.Fragment,
+            null,
+            renderColumnSpacer('left', leftColumnSpacerWidth),
+            columnMeta.map(function (colMeta) {
+              var group = getAggregationGroup(colMeta.aggregationKey);
+              return _react2.default.createElement(
+                'th',
+                {
+                  key: 'aggGrp' + colMeta.absoluteIndex
+                  // eslint-disable-next-line no-undefined
+                  , style: group ? groupLabelStyle : undefined
+                },
+                group || ''
+              );
+            }),
+            renderColumnSpacer('right', rightColumnSpacerWidth)
+          );
+        };
+
         // Helper function to get cell style with conditional formatting
         var getCellStyle = function getCellStyle(value) {
           var heatmapStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -713,41 +1118,41 @@ function makeRenderer() {
 
         var handleColSort = function handleColSort(attr, e) {
           e.stopPropagation();
-          if (_this2.props.onColSort) {
-            var currentSort = _this2.props.colSorts && _this2.props.colSorts[attr];
+          if (_this5.props.onColSort) {
+            var currentSort = _this5.props.colSorts && _this5.props.colSorts[attr];
             var nextSort = 'ASC';
             if (currentSort === 'ASC') {
               nextSort = 'DESC';
             } else if (currentSort === 'DESC') {
               nextSort = null;
             }
-            _this2.props.onColSort(attr, nextSort);
+            _this5.props.onColSort(attr, nextSort);
           }
         };
 
         var handleRowSort = function handleRowSort(attr, e) {
           e.stopPropagation();
-          if (_this2.props.onRowSort) {
-            var currentSort = _this2.props.rowSorts && _this2.props.rowSorts[attr];
+          if (_this5.props.onRowSort) {
+            var currentSort = _this5.props.rowSorts && _this5.props.rowSorts[attr];
             var nextSort = 'ASC';
             if (currentSort === 'ASC') {
               nextSort = 'DESC';
             } else if (currentSort === 'DESC') {
               nextSort = null;
             }
-            _this2.props.onRowSort(attr, nextSort);
+            _this5.props.onRowSort(attr, nextSort);
           }
         };
 
         var getSortButton = function getSortButton(attr, isCol) {
-          var currentSort = isCol ? _this2.props.colSorts && _this2.props.colSorts[attr] : _this2.props.rowSorts && _this2.props.rowSorts[attr];
+          var currentSort = isCol ? _this5.props.colSorts && _this5.props.colSorts[attr] : _this5.props.rowSorts && _this5.props.rowSorts[attr];
           var handleSort = isCol ? handleColSort : handleRowSort;
           var sortIcon = '';
           if (currentSort !== null) {
             if (isCol) {
-              sortIcon = _this2.props.colSortIcons[currentSort] || _this2.props.colSortIcons.DEFAULT;
+              sortIcon = _this5.props.colSortIcons[currentSort] || _this5.props.colSortIcons.DEFAULT;
             } else {
-              sortIcon = _this2.props.rowSortIcons[currentSort] || _this2.props.rowSortIcons.DEFAULT;
+              sortIcon = _this5.props.rowSortIcons[currentSort] || _this5.props.rowSortIcons.DEFAULT;
             }
           }
           return _react2.default.createElement(
@@ -766,10 +1171,29 @@ function makeRenderer() {
 
         var totalRowAggregations = isColumnAggregationMode ? [primaryAggregation] : hasMultipleAggregators ? aggregations : [primaryAggregation];
         var totalsLabelText = 'Totals';
+        this.rowCount = totalRowCount;
+        this.columnCount = totalColumnCount;
+        this.leadingColumnCount = rowAttrsToRender.length + (hasNumberColumn ? 1 : 0) + (showTotalsColumn && colAttrsToRender.length !== 0 && rowAttrsToRender.length !== 0 ? 1 : 0);
+        var visibleStart = isRowVirtualized ? Math.min(this.state.start, totalRowCount) : 0;
+        var visibleEnd = isRowVirtualized ? Math.min(Math.max(this.state.end, visibleStart), totalRowCount) : totalRowCount;
+        var viewportKey = isVirtualized ? this.getViewportKey() : null;
+        var viewportReady = viewportKey !== null && this.state.viewportKey === viewportKey && this.state.start === visibleStart && this.state.end === visibleEnd && this.state.columnStart === visibleColumnStart && this.state.columnEnd === visibleColumnEnd && this.state.columnTotals !== null && this.state.rows !== null;
+        var isViewportLoading = viewportKey !== null && !viewportReady;
+        var viewportColumnTotals = this.state.columnTotals || {};
+        var visibleRows = isViewportLoading ? [] : viewportKey !== null ? this.state.rows : (0, _pivotCompute.computePivotViewport)({ rowKeys: baseRowKeys, aggregations: aggregations }, visibleStart, visibleEnd, isColumnAggregationMode, visibleColumnStart, visibleColumnEnd).rows;
+        var virtualColumnCount = rowAttrsToRender.length + columnMeta.length + (leftColumnSpacerWidth > 0 ? 1 : 0) + (rightColumnSpacerWidth > 0 ? 1 : 0) + (hasNumberColumn ? 1 : 0) + (showTotalsColumn ? 1 : 0);
 
         return _react2.default.createElement(
           'table',
-          { className: 'pvtTable' },
+          {
+            className: 'pvtTable' + (isVirtualized ? ' pvtVirtualized' : '') + ('' + (isColumnVirtualized ? ' pvtVirtualColumns' : '')),
+            'data-pvt-virtualized': isVirtualized ? 'true' : null,
+            ref: function ref(element) {
+              if (element) {
+                pivotTablePropsByElement.set(element, _this5.props);
+              }
+            }
+          },
           _react2.default.createElement(
             'thead',
             null,
@@ -778,7 +1202,7 @@ function makeRenderer() {
                 'tr',
                 { key: 'colAttr' + j },
                 hasNumberColumn && j === 0 && renderNumberHeaderCell(),
-                shouldRenderRowHeaderPlaceholder && (isColumnAggregationMode || j === 0) && !(isColumnAggregationMode && hasColumnAttributes && rowAttrsToRender.length === 1) && (hasHeaderGroup && j === 0 && !isColumnAggregationMode ? renderGroupSegments(colAttrsToRender.length, headerGroupExtraSpan) : _react2.default.createElement('th', {
+                shouldRenderRowHeaderPlaceholder && (isColumnAggregationMode || j === 0) && !(isColumnAggregationMode && hasColumnAttributes && rowAttrsToRender.length === 1) && (hasHeaderGroup && j === 0 && !isColumnAggregationMode ? renderGroupSegments(colAttrsToRender.length) : _react2.default.createElement('th', {
                   colSpan: isColumnAggregationMode && hasColumnAttributes ? rowAttrsToRender.length - 1 : rowAttrsToRender.length,
                   rowSpan: isColumnAggregationMode && hasColumnAttributes ? 1 : colAttrsToRender.length
                 })),
@@ -788,6 +1212,7 @@ function makeRenderer() {
                   c,
                   colAttrs.includes(c) && getSortButton(c, true)
                 ) : null,
+                renderColumnSpacer('left', leftColumnSpacerWidth),
                 colKeyValues.map(function (colKey, i) {
                   var x = spanSize(colKeyValues, i, j);
 
@@ -800,13 +1225,14 @@ function makeRenderer() {
                     'th',
                     {
                       className: 'pvtColLabel',
-                      key: 'colKey' + i,
+                      key: 'colKey' + columnMeta[i].absoluteIndex,
                       colSpan: x,
                       rowSpan: j === colAttrsToRender.length - 1 && rowAttrsToRender.length !== 0 && !isColumnAggregationMode ? 2 : 1
                     },
                     formattedColLabel
                   );
                 }),
+                renderColumnSpacer('right', rightColumnSpacerWidth),
                 showTotalsColumn && j === 0 && _react2.default.createElement(
                   'th',
                   {
@@ -817,12 +1243,18 @@ function makeRenderer() {
                 )
               );
             }),
+            isColumnAggregationMode && hasColumnAttributes && hasHeaderGroup && _react2.default.createElement(
+              'tr',
+              null,
+              renderGroupSegments(1),
+              renderAggregatorGroupCells()
+            ),
             hasHeaderGroup && colAttrsToRender.length === 0 && rowAttrsToRender.length !== 0 && _react2.default.createElement(
               'tr',
               null,
               hasNumberColumn && renderNumberHeaderCell(),
-              renderGroupSegments(1, headerGroupExtraSpan),
-              _react2.default.createElement('th', null)
+              renderGroupSegments(1),
+              isColumnAggregationMode ? renderAggregatorGroupCells() : _react2.default.createElement('th', null)
             ),
             isColumnAggregationMode && hasColumnAttributes && _react2.default.createElement(
               'tr',
@@ -863,20 +1295,61 @@ function makeRenderer() {
           ),
           _react2.default.createElement(
             'tbody',
-            null,
-            renderedRows.map(function (rowMeta, i) {
-              var totalAggregator = pivotData.getAggregator(rowMeta.actualKey, [], rowMeta.aggregationKey);
+            { ref: this.bodyRef },
+            isRowVirtualized && visibleStart > 0 && _react2.default.createElement(
+              'tr',
+              { className: 'pvtVirtualSpacer', 'aria-hidden': 'true' },
+              _react2.default.createElement('td', {
+                colSpan: virtualColumnCount,
+                style: {
+                  height: visibleStart * VIRTUAL_ROW_HEIGHT,
+                  padding: 0,
+                  border: 0
+                }
+              })
+            ),
+            isViewportLoading && _react2.default.createElement(
+              'tr',
+              { className: 'pvtVirtualLoading', 'aria-hidden': 'true' },
+              _react2.default.createElement('td', {
+                colSpan: virtualColumnCount,
+                style: {
+                  height: (visibleEnd - visibleStart) * VIRTUAL_ROW_HEIGHT
+                }
+              })
+            ),
+            isVirtualized && this.overlayBounds && (this.state.scrollPending || isViewportLoading) && _react2.default.createElement(
+              'tr',
+              { className: 'pvtVirtualOverlayRow' },
+              _react2.default.createElement(
+                'td',
+                { colSpan: virtualColumnCount },
+                _react2.default.createElement(
+                  'div',
+                  {
+                    className: 'pvtLoadingOverlay pvtVirtualScrollOverlay',
+                    role: 'status',
+                    style: this.overlayBounds
+                  },
+                  _react2.default.createElement(PivotLoadingContent, null)
+                )
+              )
+            ),
+            visibleRows.map(function (rowMeta, visibleIndex) {
+              var i = visibleStart + visibleIndex;
+              var hasViewportValues = rowMeta.cells !== null;
+              var totalAggregator = hasViewportValues ? pivotData.getPrecomputedAggregator(rowMeta.rowTotal, rowMeta.aggregationKey) : pivotData.getAggregator(rowMeta.actualKey, [], rowMeta.aggregationKey);
               var displayKey = rowMeta.displayKey;
               return _react2.default.createElement(
                 'tr',
-                { key: 'rowKeyRow' + i },
+                { className: 'pvtDataRow', key: 'rowKeyRow' + i },
                 hasNumberColumn && _react2.default.createElement(
                   'th',
                   { className: 'pvtRowNumber', key: 'rowNumber' + i },
                   i + 1
                 ),
                 displayKey.map(function (txt, j) {
-                  var x = spanSize(rowKeyValues, i, j);
+                  var x = rowMeta.spans[j];
                   if (x === -1) {
                     return null;
                   }
@@ -893,22 +1366,24 @@ function makeRenderer() {
                     formattedTxt
                   );
                 }),
-                columnMeta.map(function (colMeta, j) {
+                renderColumnSpacer('left', leftColumnSpacerWidth, 'td'),
+                columnMeta.map(function (colMeta) {
                   var aggregationKeyForCell = isColumnAggregationMode ? colMeta.aggregationKey : rowMeta.aggregationKey;
-                  var aggregator = pivotData.getAggregator(rowMeta.actualKey, colMeta.actualKey, aggregationKeyForCell);
+                  var aggregator = hasViewportValues ? pivotData.getPrecomputedAggregator(rowMeta.cells[colMeta.actualKey.join(FLAT_KEY_SEPARATOR)], aggregationKeyForCell) : pivotData.getAggregator(rowMeta.actualKey, colMeta.actualKey, aggregationKeyForCell);
                   var value = aggregator.value();
                   var heatmapStyle = valueCellColors(rowMeta.actualKey, colMeta.actualKey, value) || {};
                   return _react2.default.createElement(
                     'td',
                     {
                       className: 'pvtVal',
-                      key: 'pvtVal' + i + '-' + j,
+                      key: 'pvtVal' + i + '-' + colMeta.absoluteIndex,
                       onClick: getClickHandler && getClickHandler(value, rowMeta.actualKey, colMeta.actualKey),
                       style: getCellStyle(value, heatmapStyle)
                     },
                     formatCellValue(value, aggregator, aggregationKeyForCell)
                   );
                 }),
+                renderColumnSpacer('right', rightColumnSpacerWidth, 'td'),
                 showTotalsColumn && _react2.default.createElement(
                   'td',
                   {
@@ -920,6 +1395,18 @@ function makeRenderer() {
                 )
               );
             }),
+            isRowVirtualized && visibleEnd < totalRowCount && _react2.default.createElement(
+              'tr',
+              { className: 'pvtVirtualSpacer', 'aria-hidden': 'true' },
+              _react2.default.createElement('td', {
+                colSpan: virtualColumnCount,
+                style: {
+                  height: (totalRowCount - visibleEnd) * VIRTUAL_ROW_HEIGHT,
+                  padding: 0,
+                  border: 0
+                }
+              })
+            ),
             totalRowAggregations.map(function (agg) {
               var grandTotalAggregator = pivotData.getAggregator([], [], isColumnAggregationMode ? primaryAggregation.key : agg.key);
               var totalLabel = hasMultipleAggregators && !isColumnAggregationMode ? 'Totals \u2013 ' + (agg.label || agg.aggregatorName) : totalsLabelText;
@@ -934,20 +1421,23 @@ function makeRenderer() {
                   },
                   totalLabel
                 ),
-                columnMeta.map(function (colMeta, i) {
-                  var totalAggregator = pivotData.getAggregator([], colMeta.actualKey, isColumnAggregationMode ? colMeta.aggregationKey : agg.key);
+                renderColumnSpacer('left', leftColumnSpacerWidth, 'td'),
+                columnMeta.map(function (colMeta) {
+                  var flatColKey = colMeta.actualKey.join(FLAT_KEY_SEPARATOR);
+                  var totalAggregator = viewportKey !== null ? pivotData.getPrecomputedAggregator(viewportColumnTotals[flatColKey], isColumnAggregationMode ? colMeta.aggregationKey : agg.key) : pivotData.getAggregator([], colMeta.actualKey, isColumnAggregationMode ? colMeta.aggregationKey : agg.key);
                   var totalValue = totalAggregator.value();
                   return _react2.default.createElement(
                     'td',
                     {
                       className: 'pvtTotal',
-                      key: 'total' + agg.key + '-' + i,
+                      key: 'total' + agg.key + '-' + colMeta.absoluteIndex,
                       onClick: getClickHandler && getClickHandler(totalValue, [null], colMeta.actualKey),
                       style: getCellStyle(totalValue, rowTotalColors(totalValue) || {})
                     },
                     formatCellValue(totalValue, totalAggregator, agg.key)
                   );
                 }),
+                renderColumnSpacer('right', rightColumnSpacerWidth, 'td'),
                 showTotalsColumn && _react2.default.createElement(
                   'td',
                   {
@@ -962,6 +1452,25 @@ function makeRenderer() {
           )
         );
       }
+    }], [{
+      key: 'getDerivedStateFromProps',
+      value: function getDerivedStateFromProps(nextProps, previousState) {
+        var nextViewportKey = _getViewportKeyForProps(nextProps);
+        if (nextViewportKey === previousState.sourceViewportKey) {
+          return null;
+        }
+        return {
+          start: 0,
+          end: INITIAL_ROW_WINDOW_END,
+          rows: null,
+          columnStart: 0,
+          columnEnd: INITIAL_COLUMN_WINDOW_END,
+          columnTotals: null,
+          viewportKey: null,
+          sourceViewportKey: nextViewportKey,
+          scrollPending: false
+        };
+      }
     }]);
 
     return TableRenderer;
@@ -1008,6 +1517,8 @@ function makeRenderer() {
   // rendered before the row attribute columns.
   TableRenderer.defaultProps.showNumericalOrder = false;
   TableRenderer.propTypes.showNumericalOrder = _propTypes2.default.bool;
+  TableRenderer.defaultProps.virtualizeRows = false;
+  TableRenderer.propTypes.virtualizeRows = _propTypes2.default.bool;
   return TableRenderer;
 }