TanStack virtual-core windowed item ranges: working versions (tested 2026-10-15)

{
  "name": "tanstack-virtual-core-window",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "node --import tsx --test test/*.test.ts"
  },
  "dependencies": {
    "@tanstack/virtual-core": "3.19.5"
  },
  "devDependencies": {
    "@types/node": "26.6.5",
    "tsx": "4.23.15"
  }
}

import { Virtualizer, defaultRangeExtractor } from "@tanstack/virtual-core";

type FakeEl = {
  clientWidth: number;
  clientHeight: number;
  scrollTop: number;
  scrollLeft: number;
};

export function createListVirtualizer(count: number, estimateSize = 40, height = 200) {
  const el: FakeEl = {
    clientWidth: 320,
    clientHeight: height,
    scrollTop: 0,
    scrollLeft: 0,
  };

  const virtualizer = new Virtualizer<FakeEl, Element>({
    count,
    getScrollElement: () => el,
    estimateSize: () => estimateSize,
    scrollToFn: () => {},
    observeElementRect: (_instance, cb) => {
      cb({ width: el.clientWidth, height: el.clientHeight });
    },
    observeElementOffset: (_instance, cb) => {
      cb(0, false);
    },
    overscan: 2,
    initialRect: { width: 320, height },
    initialOffset: 0,
  });

  virtualizer._didMount();
  virtualizer._willUpdate();
  return virtualizer;
}

export function visibleIndexes(v: Virtualizer<FakeEl, Element>) {
  return v.getVirtualItems().map((i) => i.index);
}

export { defaultRangeExtractor };

import { test } from "node:test";
import assert from "node:assert/strict";
import { createListVirtualizer, defaultRangeExtractor, visibleIndexes } from "../src/virtual.ts";

test("computes a window of visible indexes near the top", () => {
  const virtualizer = createListVirtualizer(100, 40, 200);
  const idxs = visibleIndexes(virtualizer);
  assert.ok(idxs.length >= 5);
  assert.ok(idxs.length < 20);
  assert.equal(idxs[0], 0);
  assert.ok(idxs.includes(4));
  assert.equal(virtualizer.getTotalSize(), 4000);
});

test("total size scales with count and estimate", () => {
  assert.equal(createListVirtualizer(10, 50, 100).getTotalSize(), 500);
  assert.equal(createListVirtualizer(20, 25, 100).getTotalSize(), 500);
});

test("defaultRangeExtractor expands overscan", () => {
  const range = defaultRangeExtractor({
    startIndex: 10,
    endIndex: 14,
    overscan: 2,
    count: 100,
  });
  assert.deepEqual(range, [8, 9, 10, 11, 12, 13, 14, 15, 16]);
});