@hrforte/react-pivottable 2.2.2 → 3.0.0

package/dist/__tests__/PivotTableUI-processing-test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/__tests__/PivotTableUI-processing-test.js"],"names":["global","IS_REACT_ACT_ENVIRONMENT","records","name","gender","colour","trials","baseProps","data","rows","cols","aggregatorName","vals","rendererName","rerenderPivot","root","props","render","React","createElement","PivotTableUI","describe","containers","beforeEach","afterEach","forEach","container","unmount","node","remove","mount","document","body","appendChild","entry","push","it","expect","querySelector","toBeNull","not","Object","assign","showProcessing","overlay","textContent","toBe","PivotLoadingOverlay","wait","Promise","setTimeout","resolve","ms","actAsync","reject","callback","then","workerInstances","FakeWorker","url","posted","onmessage","message","previousWorker","Worker","workerThreshold","restore","WORKER_DEBOUNCE_MS","worker","toBeDefined","computeMsg","find","m","type","result","id","catch","error"],"mappings":"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","file":"PivotTableUI-processing-test.js","sourcesContent":["import React, {act} from 'react';\nimport {createRoot} from 'react-dom/client';\nimport PivotTableUI, {PivotLoadingOverlay} from '../PivotTableUI';\nimport {\n  computePivotState,\n  createWorkerConfig,\n  materializeData,\n  WORKER_DEBOUNCE_MS,\n} from '../pivotCompute';\n/* eslint-disable no-magic-numbers */\n\n// React 19 needs to be told that this environment supports `act`.\nglobal.IS_REACT_ACT_ENVIRONMENT = true;\n\n// `showProcessing` is a debugging/testing hook that forces the loading\n// overlay on top of the rendered table without running a real worker\n// computation, so the overlay can be inspected while consuming the package.\nconst records = [\n  {name: 'Nick', gender: 'male', colour: 'blue', trials: 103},\n  {name: 'Jane', gender: 'female', colour: 'red', trials: 95},\n  {name: 'John', gender: 'male', colour: 'blue', trials: 112},\n  {name: 'Carol', gender: 'female', colour: 'yellow', trials: 102},\n];\n\nconst baseProps = {\n  data: records,\n  rows: ['name'],\n  cols: [],\n  aggregatorName: 'Count',\n  vals: [],\n  rendererName: 'Table',\n};\n\nfunction rerenderPivot(root, props) {\n  act(() => {\n    root.render(React.createElement(PivotTableUI, props));\n  });\n}\n\ndescribe('  PivotTableUI showProcessing', function() {\n  let containers;\n\n  beforeEach(function() {\n    containers = [];\n  });\n\n  afterEach(function() {\n    containers.forEach(container => {\n      act(() => {\n        container.root.unmount();\n      });\n      container.node.remove();\n    });\n  });\n\n  const mount = props => {\n    const node = document.createElement('div');\n    document.body.appendChild(node);\n    const root = createRoot(node);\n    act(() => {\n      root.render(React.createElement(PivotTableUI, props));\n    });\n    const entry = {node, root};\n    containers.push(entry);\n    return entry;\n  };\n\n  it('does not render the overlay by default', function() {\n    const {node} = mount(baseProps);\n    expect(node.querySelector('.pvtLoadingOverlay')).toBeNull();\n    expect(node.querySelector('.pvtTable')).not.toBeNull();\n  });\n\n  it('renders the overlay on top of the table when showProcessing is true', function() {\n    const {node, root} = mount(baseProps);\n    // Table is rendered from the real data first (no overlay).\n    expect(node.querySelector('.pvtTable')).not.toBeNull();\n    expect(node.querySelector('.pvtLoadingOverlay')).toBeNull();\n\n    rerenderPivot(root, Object.assign({}, baseProps, {showProcessing: true}));\n\n    const overlay = node.querySelector('.pvtLoadingOverlay');\n    expect(overlay).not.toBeNull();\n    // The overlay is layered on top of the table: the table must survive.\n    expect(node.querySelector('.pvtTable')).not.toBeNull();\n    // Only a spinner and a label: progress percentages were removed, the\n    // overlay simply stays until the worker posts its result event.\n    expect(overlay.querySelector('.pvtLoadingSpinner')).not.toBeNull();\n    expect(overlay.querySelector('.pvtLoadingText').textContent).toBe(\n      'Processing…'\n    );\n    expect(overlay.querySelector('.pvtLoadingBar')).toBeNull();\n    expect(overlay.querySelector('.pvtLoadingPercent')).toBeNull();\n\n    // Turning the flag back off removes the overlay.\n    rerenderPivot(root, baseProps);\n    expect(node.querySelector('.pvtLoadingOverlay')).toBeNull();\n  });\n\n  it('renders a spinner without any percentage markup', function() {\n    const node = document.createElement('div');\n    act(() => {\n      createRoot(node).render(React.createElement(PivotLoadingOverlay, null));\n    });\n    expect(node.querySelector('.pvtLoadingOverlay')).not.toBeNull();\n    expect(node.querySelector('.pvtLoadingSpinner')).not.toBeNull();\n    expect(node.querySelector('.pvtLoadingBarWrap')).toBeNull();\n    expect(node.querySelector('.pvtLoadingPercent')).toBeNull();\n    expect(node.querySelector('.pvtLoadingText').textContent).toBe(\n      'Processing…'\n    );\n  });\n\n  it('hides the overlay only after the worker responds and the table renders', function() {\n    const wait = ms => new Promise(resolve => setTimeout(resolve, ms));\n    // React's act() returns a non-standard thenable whose .then() does not\n    // return a promise, so it cannot be chained directly - wrap it first.\n    const actAsync = callback =>\n      new Promise((resolve, reject) => act(callback).then(resolve, reject));\n    const workerInstances = [];\n    class FakeWorker {\n      constructor(url) {\n        this.url = url;\n        this.posted = [];\n        this.onmessage = null;\n        workerInstances.push(this);\n      }\n\n      postMessage(message) {\n        this.posted.push(message);\n      }\n\n      terminate() {}\n    }\n\n    const previousWorker = global.Worker;\n    global.Worker = FakeWorker;\n\n    // workerThreshold: 2 makes this small dataset worker-eligible.\n    const props = Object.assign({}, baseProps, {workerThreshold: 2});\n    const {node} = mount(props);\n\n    const restore = () => {\n      global.Worker = previousWorker;\n    };\n\n    // The overlay is up while the computation is pending.\n    expect(node.querySelector('.pvtLoadingOverlay')).not.toBeNull();\n\n    // Wait out the dispatch debounce so the request reaches the worker.\n    return actAsync(() => wait(WORKER_DEBOUNCE_MS + 50))\n      .then(() => {\n        const worker = workerInstances[0];\n        expect(worker).toBeDefined();\n        const computeMsg = worker.posted.find(m => m.type === 'pivot:compute');\n        expect(computeMsg).toBeDefined();\n        // The worker has not answered yet: the overlay must stay up.\n        expect(node.querySelector('.pvtLoadingOverlay')).not.toBeNull();\n\n        // Worker finishes and posts its result event.\n        const result = computePivotState(\n          materializeData(records, {}),\n          createWorkerConfig(props)\n        );\n        return actAsync(() => {\n          worker.onmessage({\n            data: {type: 'pivot:result', id: computeMsg.id, result},\n          });\n          return wait(0);\n        });\n      })\n      .then(() => {\n        // The overlay is gone only now - and the freshly computed table is\n        // already on screen in the same state where the overlay disappeared.\n        expect(node.querySelector('.pvtLoadingOverlay')).toBeNull();\n        expect(node.querySelector('.pvtTable')).not.toBeNull();\n        restore();\n      })\n      .catch(error => {\n        restore();\n        throw error;\n      });\n  });\n});\n"]}
+{"version":3,"sources":["../../src/__tests__/PivotTableUI-processing-test.js"],"names":["global","IS_REACT_ACT_ENVIRONMENT","records","name","gender","colour","trials","baseProps","data","rows","cols","aggregatorName","vals","rendererName","rerenderPivot","root","props","render","React","createElement","PivotTableUI","describe","containers","beforeEach","afterEach","forEach","container","unmount","node","remove","mount","document","body","appendChild","entry","push","it","expect","querySelector","toBeNull","not","originalWorker","Worker","errorSpy","jest","spyOn","console","mockImplementation","Object","assign","Array","fill","map","_","index","warnings","mock","calls","call","join","filter","message","includes","toEqual","mockRestore","showProcessing","overlay","parentElement","classList","contains","toBe","textContent","PivotLoadingOverlay","wait","Promise","setTimeout","resolve","ms","actAsync","reject","callback","then","workerInstances","FakeWorker","url","posted","onmessage","previousWorker","workerThreshold","restore","WORKER_DEBOUNCE_MS","worker","toBeDefined","computeMsg","find","m","type","result","id","catch","error"],"mappings":"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","file":"PivotTableUI-processing-test.js","sourcesContent":["import React, {act} from 'react';\nimport {createRoot} from 'react-dom/client';\nimport PivotTableUI, {PivotLoadingOverlay} from '../PivotTableUI';\nimport {\n  computePivotState,\n  createWorkerConfig,\n  materializeData,\n  WORKER_DEBOUNCE_MS,\n} from '../pivotCompute';\n/* eslint-disable no-magic-numbers */\n\n// React 19 needs to be told that this environment supports `act`.\nglobal.IS_REACT_ACT_ENVIRONMENT = true;\n\n// `showProcessing` is a debugging/testing hook that forces the loading\n// overlay on top of the rendered table without running a real worker\n// computation, so the overlay can be inspected while consuming the package.\nconst records = [\n  {name: 'Nick', gender: 'male', colour: 'blue', trials: 103},\n  {name: 'Jane', gender: 'female', colour: 'red', trials: 95},\n  {name: 'John', gender: 'male', colour: 'blue', trials: 112},\n  {name: 'Carol', gender: 'female', colour: 'yellow', trials: 102},\n];\n\nconst baseProps = {\n  data: records,\n  rows: ['name'],\n  cols: [],\n  aggregatorName: 'Count',\n  vals: [],\n  rendererName: 'Table',\n};\n\nfunction rerenderPivot(root, props) {\n  act(() => {\n    root.render(React.createElement(PivotTableUI, props));\n  });\n}\n\ndescribe('  PivotTableUI showProcessing', function() {\n  let containers;\n\n  beforeEach(function() {\n    containers = [];\n  });\n\n  afterEach(function() {\n    containers.forEach(container => {\n      act(() => {\n        container.root.unmount();\n      });\n      container.node.remove();\n    });\n  });\n\n  const mount = props => {\n    const node = document.createElement('div');\n    document.body.appendChild(node);\n    const root = createRoot(node);\n    act(() => {\n      root.render(React.createElement(PivotTableUI, props));\n    });\n    const entry = {node, root};\n    containers.push(entry);\n    return entry;\n  };\n\n  it('does not render the overlay by default', function() {\n    const {node} = mount(baseProps);\n    expect(node.querySelector('.pvtLoadingOverlay')).toBeNull();\n    expect(node.querySelector('.pvtTable')).not.toBeNull();\n  });\n\n  it('does not pass undefined attrValues while the worker is pending', function() {\n    const originalWorker = global.Worker;\n    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});\n    global.Worker = class PendingWorker {\n      postMessage() {}\n      terminate() {}\n    };\n    try {\n      mount(\n        Object.assign({}, baseProps, {\n          data: new Array(201).fill(null).map((_, index) => ({\n            name: `Employee ${index}`,\n          })),\n        })\n      );\n      const warnings = errorSpy.mock.calls\n        .map(call => call.join(' '))\n        .filter(message => message.includes('attrValues'));\n      expect(warnings).toEqual([]);\n    } finally {\n      global.Worker = originalWorker;\n      errorSpy.mockRestore();\n    }\n  });\n\n  it('renders the overlay on top of the table when showProcessing is true', function() {\n    const {node, root} = mount(baseProps);\n    // Table is rendered from the real data first (no overlay).\n    expect(node.querySelector('.pvtTable')).not.toBeNull();\n    expect(node.querySelector('.pvtLoadingOverlay')).toBeNull();\n\n    rerenderPivot(root, Object.assign({}, baseProps, {showProcessing: true}));\n\n    const overlay = node.querySelector('.pvtLoadingOverlay');\n    expect(overlay).not.toBeNull();\n    expect(overlay.parentElement.classList.contains('pvtOutput')).toBe(true);\n    // The overlay is layered on top of the table: the table must survive.\n    expect(node.querySelector('.pvtTable')).not.toBeNull();\n    // Only a spinner and a label: progress percentages were removed, the\n    // overlay simply stays until the worker posts its result event.\n    expect(overlay.querySelector('.pvtLoadingSpinner')).not.toBeNull();\n    expect(overlay.querySelector('.pvtLoadingText').textContent).toBe(\n      'Processing'\n    );\n    expect(overlay.querySelector('.pvtLoadingBar')).toBeNull();\n    expect(overlay.querySelector('.pvtLoadingPercent')).toBeNull();\n\n    // Turning the flag back off removes the overlay.\n    rerenderPivot(root, baseProps);\n    expect(node.querySelector('.pvtLoadingOverlay')).toBeNull();\n  });\n\n  it('renders a spinner without any percentage markup', function() {\n    const node = document.createElement('div');\n    act(() => {\n      createRoot(node).render(React.createElement(PivotLoadingOverlay, null));\n    });\n    expect(node.querySelector('.pvtLoadingOverlay')).not.toBeNull();\n    expect(node.querySelector('.pvtLoadingSpinner')).not.toBeNull();\n    expect(node.querySelector('.pvtLoadingBarWrap')).toBeNull();\n    expect(node.querySelector('.pvtLoadingPercent')).toBeNull();\n    expect(node.querySelector('.pvtLoadingText').textContent).toBe(\n      'Processing'\n    );\n  });\n\n  it('hides the overlay only after the worker responds and the table renders', function() {\n    const wait = ms => new Promise(resolve => setTimeout(resolve, ms));\n    // React's act() returns a non-standard thenable whose .then() does not\n    // return a promise, so it cannot be chained directly - wrap it first.\n    const actAsync = callback =>\n      new Promise((resolve, reject) => act(callback).then(resolve, reject));\n    const workerInstances = [];\n    class FakeWorker {\n      constructor(url) {\n        this.url = url;\n        this.posted = [];\n        this.onmessage = null;\n        workerInstances.push(this);\n      }\n\n      postMessage(message) {\n        this.posted.push(message);\n      }\n\n      terminate() {}\n    }\n\n    const previousWorker = global.Worker;\n    global.Worker = FakeWorker;\n\n    // workerThreshold: 2 makes this small dataset worker-eligible.\n    const props = Object.assign({}, baseProps, {workerThreshold: 2});\n    const {node} = mount(props);\n\n    const restore = () => {\n      global.Worker = previousWorker;\n    };\n\n    // The overlay is up while the computation is pending.\n    expect(node.querySelector('.pvtLoadingOverlay')).not.toBeNull();\n\n    // Wait out the dispatch debounce so the request reaches the worker.\n    return actAsync(() => wait(WORKER_DEBOUNCE_MS + 50))\n      .then(() => {\n        const worker = workerInstances[0];\n        expect(worker).toBeDefined();\n        const computeMsg = worker.posted.find(m => m.type === 'pivot:compute');\n        expect(computeMsg).toBeDefined();\n        // The worker has not answered yet: the overlay must stay up.\n        expect(node.querySelector('.pvtLoadingOverlay')).not.toBeNull();\n\n        // Worker finishes and posts its result event.\n        const result = computePivotState(\n          materializeData(records, {}),\n          createWorkerConfig(props)\n        );\n        return actAsync(() => {\n          worker.onmessage({\n            data: {type: 'pivot:result', id: computeMsg.id, result},\n          });\n          return wait(0);\n        });\n      })\n      .then(() => {\n        // The overlay is gone only now - and the freshly computed table is\n        // already on screen in the same state where the overlay disappeared.\n        expect(node.querySelector('.pvtLoadingOverlay')).toBeNull();\n        expect(node.querySelector('.pvtTable')).not.toBeNull();\n        restore();\n      })\n      .catch(error => {\n        restore();\n        throw error;\n      });\n  });\n});\n"]}

package/dist/__tests__/TableRenderers-showNumericalOrder-test.js

@@ -1,11 +1,17 @@
 'use strict';
 
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
 var _client = require('react-dom/client');
 
+var _tips = require('../../examples/tips');
+
+var _tips2 = _interopRequireDefault(_tips);
+
 var _PivotTable = require('../PivotTable');
 
 var _PivotTable2 = _interopRequireDefault(_PivotTable);
@@ -14,15 +20,33 @@ var _PivotTableUI = require('../PivotTableUI');
 
 var _PivotTableUI2 = _interopRequireDefault(_PivotTableUI);
 
+var _TableRenderers = require('../TableRenderers');
+
+var _PivotDataWorker = require('../PivotDataWorker');
+
+var PivotDataWorker = _interopRequireWildcard(_PivotDataWorker);
+
+var _pivotCompute = require('../pivotCompute');
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable no-magic-numbers */
 
 // React 19 needs to be told that this environment supports `act`.
 global.IS_REACT_ACT_ENVIRONMENT = true;
+global.queueMicrotask = function (callback) {
+  return Promise.resolve().then(callback);
+};
+
+var _require = require('react-dom/server'),
+    renderToStaticMarkup = _require.renderToStaticMarkup;
 
 // `showNumericalOrder` adds a "No." column in front of the row attributes so
 // every data row is prefixed with its 1-based index.
+
+
 var records = [{ name: 'Nick', gender: 'male', colour: 'blue', trials: 103 }, { name: 'Jane', gender: 'female', colour: 'red', trials: 95 }, { name: 'John', gender: 'male', colour: 'blue', trials: 112 }, { name: 'Carol', gender: 'female', colour: 'yellow', trials: 102 }];
 
 var baseProps = {
@@ -174,5 +198,430 @@ describe('Table renderer showNumericalOrder', function () {
       expect(numberCells(mounted.node)).toEqual(['1', '2', '3', '4']);
     });
   });
+
+  it('renders only visible rows and updates them while scrolling', function () {
+    var manyRecords = Array.from({ length: 1000 }, function (_, index) {
+      return {
+        name: 'Employee ' + String(index).padStart(4, '0')
+      };
+    });
+    var previousAnimationFrame = global.requestAnimationFrame;
+    var pendingFrame = void 0;
+    global.requestAnimationFrame = function (callback) {
+      pendingFrame = callback;
+      return 1;
+    };
+    jest.useFakeTimers();
+    try {
+      mounted = mount(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, {
+        data: manyRecords,
+        showNumericalOrder: true,
+        virtualizeRows: true
+      })));
+
+      var table = mounted.node.querySelector('.pvtTable');
+      expect(table.getAttribute('data-pvt-virtualized')).toBe('true');
+      expect(table.querySelectorAll('tbody .pvtDataRow').length).toBeLessThan(150);
+      expect(numberCells(mounted.node)[0]).toBe('1');
+
+      var body = table.querySelector('tbody');
+      body.getBoundingClientRect = function () {
+        return { top: -3200 };
+      };
+      (0, _react.act)(function () {
+        window.dispatchEvent(new Event('scroll'));
+        if (pendingFrame) {
+          pendingFrame();
+        }
+      });
+      expect(numberCells(mounted.node)[0]).toBe('1');
+      expect(mounted.node.querySelector('.pvtVirtualScrollOverlay .pvtLoadingText').textContent).toBe('Processing');
+      (0, _react.act)(function () {
+        return jest.runTimersToTime(499);
+      });
+      expect(numberCells(mounted.node)[0]).toBe('1');
+      (0, _react.act)(function () {
+        return jest.runTimersToTime(1);
+      });
+      expect(numberCells(mounted.node)[0]).toBe('65');
+      expect(mounted.node.querySelector('.pvtVirtualScrollOverlay')).toBeNull();
+      expect(table.querySelectorAll('tbody .pvtDataRow').length).toBeLessThan(150);
+    } finally {
+      global.requestAnimationFrame = previousAnimationFrame;
+      jest.useRealTimers();
+    }
+  });
+
+  it('does not update synchronously again when layout shifts during a fast scroll', function () {
+    var manyRecords = Array.from({ length: 1000 }, function (_, index) {
+      return {
+        name: 'Employee ' + index
+      };
+    });
+    var fullPrecomputedData = (0, _pivotCompute.computePivotState)((0, _pivotCompute.materializeData)(manyRecords, {}), (0, _pivotCompute.createWorkerConfig)(baseProps));
+    var precomputedData = (0, _pivotCompute.createVirtualPivotSummary)(fullPrecomputedData, false);
+    precomputedData.viewportKey = 42;
+    var layoutReads = 0;
+    var previousAnimationFrame = global.requestAnimationFrame;
+    var pendingFrame = void 0;
+    global.requestAnimationFrame = function (callback) {
+      pendingFrame = callback;
+      return 1;
+    };
+    jest.useFakeTimers();
+    try {
+      mounted = mount(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, {
+        data: [],
+        precomputedData: precomputedData,
+        virtualizeRows: true
+      })));
+
+      var body = mounted.node.querySelector('.pvtTable tbody');
+      body.getBoundingClientRect = function () {
+        return {
+          top: layoutReads++ % 2 === 0 ? -3200 : -6400
+        };
+      };
+      (0, _react.act)(function () {
+        window.dispatchEvent(new Event('scroll'));
+        if (pendingFrame) {
+          pendingFrame();
+        }
+      });
+      expect(layoutReads).toBe(0);
+      (0, _react.act)(function () {
+        return jest.runTimersToTime(250);
+      });
+      (0, _react.act)(function () {
+        window.dispatchEvent(new Event('scroll'));
+      });
+      (0, _react.act)(function () {
+        return jest.runTimersToTime(499);
+      });
+      expect(layoutReads).toBe(0);
+      (0, _react.act)(function () {
+        return jest.runTimersToTime(1);
+      });
+      expect(layoutReads).toBe(1);
+      (0, _react.act)(function () {
+        return window.dispatchEvent(new Event('scroll'));
+      });
+      (0, _react.act)(function () {
+        return jest.runTimersToTime(500);
+      });
+      expect(layoutReads).toBe(2);
+    } finally {
+      global.requestAnimationFrame = previousAnimationFrame;
+      jest.useRealTimers();
+    }
+  });
+
+  it('renders only the visible columns and updates them after horizontal scrolling', function () {
+    var wideRecords = Array.from({ length: 200 }, function (_, index) {
+      return {
+        employee: 'Employee ' + String(index).padStart(3, '0'),
+        gender: index % 2 === 0 ? 'female' : 'male'
+      };
+    });
+    jest.useFakeTimers();
+    try {
+      mounted = mount(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, {
+        data: wideRecords,
+        rows: ['gender'],
+        cols: ['employee'],
+        virtualizeRows: true
+      })));
+
+      var table = mounted.node.querySelector('.pvtTable');
+      var initialLabels = Array.from(table.querySelectorAll('thead .pvtColLabel')).map(function (cell) {
+        return cell.textContent.trim();
+      });
+      expect(table.classList.contains('pvtVirtualColumns')).toBe(true);
+      expect(initialLabels).toContain('Employee 000');
+      expect(initialLabels).not.toContain('Employee 150');
+      expect(table.querySelectorAll('tbody .pvtVal').length).toBeLessThan(100);
+
+      var body = table.querySelector('tbody');
+      body.getBoundingClientRect = function () {
+        return { top: 0, left: -16000 };
+      };
+      (0, _react.act)(function () {
+        return window.dispatchEvent(new Event('scroll'));
+      });
+      (0, _react.act)(function () {
+        return jest.runTimersToTime(500);
+      });
+
+      var scrolledLabels = Array.from(table.querySelectorAll('thead .pvtColLabel')).map(function (cell) {
+        return cell.textContent.trim();
+      });
+      expect(scrolledLabels).not.toContain('Employee 000');
+      expect(scrolledLabels.some(function (label) {
+        return label >= 'Employee 128';
+      })).toBe(true);
+      expect(table.querySelectorAll('tbody .pvtVal').length).toBeLessThan(100);
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it('renders values after moving a high-cardinality field from rows to columns', function () {
+    var wait = function wait(ms) {
+      return new Promise(function (resolve) {
+        return setTimeout(resolve, ms);
+      });
+    };
+    var actAsync = function actAsync(callback) {
+      return new Promise(function (resolve, reject) {
+        return (0, _react.act)(callback).then(resolve, reject);
+      });
+    };
+    var manyRecords = Array.from({ length: 400 }, function (_, index) {
+      return {
+        employee: 'Employee ' + String(index).padStart(3, '0'),
+        rowLabel: 'Row ' + String(399 - index).padStart(3, '0')
+      };
+    });
+    var aggregation = [{ key: 'count', aggregatorName: 'Count', vals: [] }];
+    var rowConfig = {
+      rows: ['employee'],
+      cols: [],
+      aggregations: aggregation
+    };
+    var columnConfig = {
+      rows: ['rowLabel'],
+      cols: ['employee'],
+      aggregations: aggregation
+    };
+    var materialized = (0, _pivotCompute.materializeData)(manyRecords, {});
+    var rowPivot = (0, _pivotCompute.computePivotState)(materialized, rowConfig);
+    var columnPivot = (0, _pivotCompute.computePivotState)(materialized, columnConfig);
+    expect((0, _pivotCompute.alignSparseColumnsToRows)(columnPivot)).toBe(true);
+    var rowSummary = (0, _pivotCompute.createVirtualPivotSummary)(rowPivot, false);
+    var columnSummary = (0, _pivotCompute.createVirtualPivotSummary)(columnPivot, false);
+    rowSummary.viewportKey = 41;
+    columnSummary.viewportKey = 42;
+    var workerSpy = jest.spyOn(PivotDataWorker, 'computePivotViewportInWorker').mockImplementation(function (viewportKey, start, end, columnMode, columnStart, columnEnd) {
+      return Promise.resolve((0, _pivotCompute.computePivotViewport)(viewportKey === 41 ? rowPivot : columnPivot, start, end, columnMode, columnStart, columnEnd));
+    });
+
+    mounted = mount(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, rowConfig, {
+      data: [],
+      precomputedData: rowSummary,
+      virtualizeRows: true
+    })));
+
+    return actAsync(function () {
+      return wait(30);
+    }).then(function () {
+      (0, _react.act)(function () {
+        // A layout-induced scroll can still be pending when the new worker
+        // result replaces the previous axis configuration. The new viewport
+        // must reset immediately instead of retaining an empty 0..0 column
+        // window until the scroll debounce expires.
+        window.dispatchEvent(new Event('scroll'));
+        mounted.root.render(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, columnConfig, {
+          data: [],
+          precomputedData: columnSummary,
+          virtualizeRows: true
+        })));
+      });
+      return actAsync(function () {
+        return wait(50);
+      });
+    }).then(function () {
+      var values = Array.from(mounted.node.querySelectorAll('.pvtTable tbody .pvtVal')).map(function (cell) {
+        return cell.textContent.trim();
+      });
+      expect(values.length).toBeGreaterThan(0);
+      expect(values).toContain('1');
+      expect(mounted.node.querySelector('.pvtVirtualLoading')).toBeNull();
+      workerSpy.mockRestore();
+    }).catch(function (error) {
+      workerSpy.mockRestore();
+      throw error;
+    });
+  });
+
+  it('renders Employee Ref headers and cells for the example configuration', function () {
+    var wait = function wait(ms) {
+      return new Promise(function (resolve) {
+        return setTimeout(resolve, ms);
+      });
+    };
+    var actAsync = function actAsync(callback) {
+      return new Promise(function (resolve, reject) {
+        return (0, _react.act)(callback).then(resolve, reject);
+      });
+    };
+    var appRows = ['Full Name Local', 'Full Name English', 'Gender', 'Joining Date', 'Last Working Date', 'Seniority Date', 'Contract Type', 'Location Name', 'Job Position Name', 'Cost Center Code', 'Cost Center Name', 'Organization Element Name', 'Nationality', 'Bank Account Number', 'Bank Name', 'Bank Account Holder Name', 'First Name Local', 'First Name English', 'Date Of Birth', 'Passport No.', 'Martial Status', 'Tax Code', 'Social Security No.', 'Pension Fund No'];
+    var appConfig = {
+      rows: appRows,
+      cols: ['Employee Ref'],
+      aggregations: [{ key: 'count', aggregatorName: 'Count', vals: [] }]
+    };
+    var fullPivot = (0, _pivotCompute.computePivotState)((0, _pivotCompute.materializeData)(_tips2.default, {}), appConfig);
+    expect((0, _pivotCompute.alignSparseColumnsToRows)(fullPivot)).toBe(true);
+    var summary = (0, _pivotCompute.createVirtualPivotSummary)(fullPivot, false);
+    summary.viewportKey = 43;
+    var workerSpy = jest.spyOn(PivotDataWorker, 'computePivotViewportInWorker').mockImplementation(function (viewportKey, start, end, columnMode, columnStart, columnEnd) {
+      return Promise.resolve((0, _pivotCompute.computePivotViewport)(fullPivot, start, end, columnMode, columnStart, columnEnd));
+    });
+
+    mounted = mount(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, appConfig, {
+      data: [],
+      precomputedData: summary,
+      virtualizeRows: true
+    })));
+
+    return actAsync(function () {
+      return wait(50);
+    }).then(function () {
+      var headers = Array.from(mounted.node.querySelectorAll('.pvtTable thead .pvtColLabel')).map(function (cell) {
+        return cell.textContent.trim();
+      });
+      var values = Array.from(mounted.node.querySelectorAll('.pvtTable tbody .pvtVal')).map(function (cell) {
+        return cell.textContent.trim();
+      });
+      expect(headers.length).toBeGreaterThan(0);
+      expect(headers[0]).toMatch(/-F$/);
+      expect(values).toContain('1');
+      var firstHeader = headers[0];
+      var table = mounted.node.querySelector('.pvtTable');
+      var body = table.querySelector('tbody');
+      var firstColumn = table.querySelector('thead .pvtColLabel');
+      table.getBoundingClientRect = function () {
+        return { top: 0, left: -5000 };
+      };
+      body.getBoundingClientRect = function () {
+        return { top: 0, left: -5000 };
+      };
+      firstColumn.getBoundingClientRect = function () {
+        return {
+          top: 0,
+          left: -1885,
+          width: 100
+        };
+      };
+      (0, _react.act)(function () {
+        return window.dispatchEvent(new Event('scroll'));
+      });
+      return actAsync(function () {
+        return wait(600);
+      }).then(function () {
+        var scrolledHeaders = Array.from(mounted.node.querySelectorAll('.pvtTable thead .pvtColLabel')).map(function (cell) {
+          return cell.textContent.trim();
+        });
+        expect(scrolledHeaders[0]).toBe(firstHeader);
+        workerSpy.mockRestore();
+      });
+    }).catch(function (error) {
+      workerSpy.mockRestore();
+      throw error;
+    });
+  });
+
+  it('can render every row for a full export from a virtual table', function () {
+    var manyRecords = Array.from({ length: 301 }, function (_, index) {
+      return {
+        name: 'Employee ' + index
+      };
+    });
+    var fullPrecomputedData = (0, _pivotCompute.computePivotState)((0, _pivotCompute.materializeData)(manyRecords, {}), (0, _pivotCompute.createWorkerConfig)(baseProps));
+    var precomputedData = (0, _pivotCompute.createVirtualPivotSummary)(fullPrecomputedData, false);
+    mounted = mount(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, {
+      data: manyRecords,
+      precomputedData: precomputedData,
+      virtualizeRows: true
+    })));
+
+    var table = mounted.node.querySelector('.pvtTable');
+    var pivotProps = (0, _TableRenderers.getPivotTableProps)(table);
+    expect(table.querySelectorAll('tbody .pvtDataRow').length).toBeLessThan(301);
+    var html = renderToStaticMarkup(_react2.default.createElement(_PivotTable2.default, Object.assign({}, pivotProps, { virtualizeRows: false })));
+    var exportedTable = new DOMParser().parseFromString(html, 'text/html').querySelector('.pvtTable');
+    expect(exportedTable.querySelectorAll('tbody .pvtDataRow')).toHaveLength(301);
+  });
+
+  it('shows loading until the worker returns the requested row window', function () {
+    var wait = function wait(ms) {
+      return new Promise(function (resolve) {
+        return setTimeout(resolve, ms);
+      });
+    };
+    var actAsync = function actAsync(callback) {
+      return new Promise(function (resolve, reject) {
+        return (0, _react.act)(callback).then(resolve, reject);
+      });
+    };
+    var manyRecords = Array.from({ length: 301 }, function (_, index) {
+      return {
+        name: 'Employee ' + index
+      };
+    });
+    var fullPrecomputedData = (0, _pivotCompute.computePivotState)((0, _pivotCompute.materializeData)(manyRecords, {}), (0, _pivotCompute.createWorkerConfig)(baseProps));
+    var precomputedData = (0, _pivotCompute.createVirtualPivotSummary)(fullPrecomputedData, false);
+    precomputedData.viewportKey = 42;
+    var resolveWindows = [];
+    var workerSpy = jest.spyOn(PivotDataWorker, 'computePivotViewportInWorker').mockImplementation(function () {
+      return new Promise(function (resolve) {
+        resolveWindows.push(resolve);
+      });
+    });
+
+    mounted = mount(_react2.default.createElement(_PivotTable2.default, Object.assign({}, baseProps, {
+      data: [],
+      precomputedData: precomputedData,
+      virtualizeRows: true
+    })));
+    expect(mounted.node.querySelector('.pvtVirtualLoading')).not.toBeNull();
+
+    return actAsync(function () {
+      return wait(30);
+    }).then(function () {
+      expect(workerSpy).toHaveBeenCalledTimes(1);
+      var body = mounted.node.querySelector('.pvtTable tbody');
+      body.getBoundingClientRect = function () {
+        return { top: -3200 };
+      };
+      (0, _react.act)(function () {
+        return window.dispatchEvent(new Event('scroll'));
+      });
+      expect(mounted.node.querySelector('.pvtVirtualScrollOverlay .pvtLoadingText').textContent).toBe('Processing');
+      return actAsync(function () {
+        return wait(550);
+      });
+    }).then(function () {
+      expect(workerSpy).toHaveBeenCalledTimes(2);
+      expect(mounted.node.querySelector('.pvtVirtualLoading')).not.toBeNull();
+
+      var _workerSpy$mock$calls = _slicedToArray(workerSpy.mock.calls[0], 3),
+          start = _workerSpy$mock$calls[1],
+          end = _workerSpy$mock$calls[2];
+
+      return actAsync(function () {
+        resolveWindows[0]((0, _pivotCompute.computePivotViewport)(fullPrecomputedData, start, end, false));
+        return wait(0);
+      });
+    }).then(function () {
+      expect(mounted.node.querySelector('.pvtVirtualLoading')).not.toBeNull();
+
+      var _workerSpy$mock$calls2 = _slicedToArray(workerSpy.mock.calls[1], 3),
+          start = _workerSpy$mock$calls2[1],
+          end = _workerSpy$mock$calls2[2];
+
+      return actAsync(function () {
+        resolveWindows[1]((0, _pivotCompute.computePivotViewport)(fullPrecomputedData, start, end, false));
+        return wait(0);
+      });
+    }).then(function () {
+      expect(mounted.node.querySelector('.pvtVirtualLoading')).toBeNull();
+      expect(mounted.node.querySelectorAll('.pvtTable tbody .pvtDataRow').length).toBeGreaterThan(0);
+      workerSpy.mockRestore();
+    }).catch(function (error) {
+      workerSpy.mockRestore();
+      throw error;
+    });
+  });
 });
 //# sourceMappingURL=TableRenderers-showNumericalOrder-test.js.map