gloomberb 0.10.2 → 0.10.3

package/src/plugins/builtin/options/live-quotes.test.ts

@@ -5,8 +5,8 @@ import type { OptionTableRow } from "./types";
 import {
   buildOptionQuoteKey,
   buildOptionQuoteTargets,
-  hasLiveOptionQuote,
   overlayOptionRowQuotes,
+  resolveOptionQuoteCoverage,
 } from "./live-quotes";
 
 function contract(strike: number, side: "C" | "P"): OptionContract {
@@ -51,22 +51,92 @@ function readyQuote(quote: Quote): QueryEntry<Quote> {
 }
 
 describe("options live quotes", () => {
-  test("bounds selected-expiry subscriptions around the current strike", () => {
+  test("subscribes every visible contract plus non-visible overscan", () => {
     const rows = Array.from({ length: 100 }, (_, index) => row(50 + index));
-    const targets = buildOptionQuoteTargets(rows, 50, 14);
+    const targets = buildOptionQuoteTargets(rows, {
+      fallbackHeight: 14,
+      selectedIndex: 50,
+      visibleRange: { start: 40, end: 64 },
+    });
+    const visibleTargets = targets.filter((target) => target.visible === true);
 
-    expect(targets).toHaveLength(16);
+    expect(targets).toHaveLength(64);
+    expect(visibleTargets).toHaveLength(48);
     expect(
       targets.every(
-        (target) => target.exchange === "OPTIONS" && target.surface === "options" && target.visible === true,
+        (target) => target.exchange === "OPTIONS" && target.surface === "options",
       ),
     ).toBe(true);
     expect(targets.filter((target) => target.selected)).toHaveLength(2);
     expect(targets.some((target) => target.symbol === rows[50]!.call!.contractSymbol)).toBe(true);
+    expect(visibleTargets.some((target) => target.symbol === rows[40]!.call!.contractSymbol)).toBe(true);
+    expect(visibleTargets.some((target) => target.symbol === rows[63]!.put!.contractSymbol)).toBe(true);
+    expect(targets.find((target) => target.symbol === rows[36]!.call!.contractSymbol)?.visible).toBe(false);
     expect(targets.some((target) => target.symbol === rows[0]!.call!.contractSymbol)).toBe(false);
     expect(targets.some((target) => target.symbol === rows.at(-1)!.put!.contractSymbol)).toBe(false);
   });
 
+  test("requires fresh live stream metadata for every visible contract", () => {
+    const rows = [row(100), row(105), row(110)];
+    const targets = buildOptionQuoteTargets(rows, {
+      fallbackHeight: 14,
+      selectedIndex: 1,
+      visibleRange: { start: 1, end: 2 },
+    });
+    const freshness = {
+      chainAsOf: new Date(1_799_999_000_000).toISOString(),
+      chainDataSource: "live" as const,
+      now: 1_800_000_030_000,
+      subscriptionStartedAt: 1_799_999_500_000,
+    };
+    const visibleRow = rows[1]!;
+    const quote = (symbol: string): Quote => ({
+      symbol,
+      providerId: "gloomberb-cloud",
+      price: 2.4,
+      mark: 2.5,
+      bid: 2.45,
+      ask: 2.55,
+      currency: "USD",
+      change: 0,
+      changePercent: 0,
+      lastUpdated: 1_800_000_000_000,
+      receivedAt: 1_800_000_010_000,
+      dataSource: "live",
+      delivery: "stream",
+      stale: false,
+    });
+    const entries = new Map([
+      [buildOptionQuoteKey(visibleRow.call!.contractSymbol), readyQuote(quote(visibleRow.call!.contractSymbol))],
+      [buildOptionQuoteKey(visibleRow.put!.contractSymbol), readyQuote(quote(visibleRow.put!.contractSymbol))],
+      [buildOptionQuoteKey(rows[0]!.call!.contractSymbol), readyQuote(quote(rows[0]!.call!.contractSymbol))],
+    ]);
+
+    expect(resolveOptionQuoteCoverage(targets, entries, freshness)).toEqual({
+      fallbackCount: 0,
+      liveCount: 2,
+      status: "live",
+      totalCount: 2,
+    });
+
+    entries.delete(buildOptionQuoteKey(visibleRow.put!.contractSymbol));
+    expect(resolveOptionQuoteCoverage(targets, entries, freshness)).toMatchObject({
+      liveCount: 1,
+      status: "mixed",
+      totalCount: 2,
+    });
+
+    entries.clear();
+    entries.set(
+      buildOptionQuoteKey(rows[0]!.call!.contractSymbol),
+      readyQuote(quote(rows[0]!.call!.contractSymbol)),
+    );
+    expect(resolveOptionQuoteCoverage(targets, entries, {
+      ...freshness,
+      now: freshness.subscriptionStartedAt + 1_000,
+    })).toMatchObject({ liveCount: 0, status: "connecting", totalCount: 2 });
+  });
+
   test("overlays streamed quote fields while preserving chain-only Greeks and open interest", () => {
     const original = row(100);
     const symbol = original.call!.contractSymbol;
@@ -103,10 +173,9 @@ describe("options live quotes", () => {
       impliedVolatility: 0.25,
       openInterest: 20,
     });
-    expect(hasLiveOptionQuote(entries, freshness)).toBe(true);
   });
 
-  test("rejects cached quotes from before this subscription or the current chain", () => {
+  test("rejects quotes from before this subscription without comparing contracts to a global chain timestamp", () => {
     const original = row(100);
     const symbol = original.call!.contractSymbol;
     const quote: Quote = {
@@ -122,6 +191,8 @@ describe("options live quotes", () => {
       lastUpdated: 1_800_000_000_000,
       receivedAt: 1_800_000_010_000,
       dataSource: "live",
+      delivery: "stream",
+      stale: false,
     };
     const entries = new Map([[buildOptionQuoteKey(symbol), readyQuote(quote)]]);
 
@@ -131,16 +202,33 @@ describe("options live quotes", () => {
       subscriptionStartedAt: 1_800_000_020_000,
     };
     expect(overlayOptionRowQuotes([original], entries, beforeSubscription)[0]!.call!.lastPrice).toBe(1);
-    expect(hasLiveOptionQuote(entries, beforeSubscription)).toBe(false);
+    const targets = buildOptionQuoteTargets([original], {
+      fallbackHeight: 14,
+      selectedIndex: 0,
+      visibleRange: { start: 0, end: 1 },
+    });
+    expect(resolveOptionQuoteCoverage(targets, entries, beforeSubscription).status).not.toBe("live");
 
-    const olderThanChain = {
+    const heterogeneousChainSnapshot = {
       chainAsOf: new Date(1_800_000_005_000).toISOString(),
       chainDataSource: "live" as const,
       now: 1_800_000_030_000,
       subscriptionStartedAt: 1_800_000_000_000,
     };
-    expect(overlayOptionRowQuotes([original], entries, olderThanChain)[0]!.call!.lastPrice).toBe(1);
-    expect(hasLiveOptionQuote(entries, olderThanChain)).toBe(false);
+    expect(overlayOptionRowQuotes([original], entries, heterogeneousChainSnapshot)[0]!.call!.lastPrice).toBe(9);
+    expect(resolveOptionQuoteCoverage(targets, entries, heterogeneousChainSnapshot)).toMatchObject({
+      liveCount: 1,
+      status: "mixed",
+    });
+
+    const newerContract = row(100);
+    newerContract.call = {
+      ...newerContract.call!,
+      lastUpdated: 1_800_000_005_000,
+    };
+    expect(
+      overlayOptionRowQuotes([newerContract], entries, heterogeneousChainSnapshot)[0]!.call!.lastPrice,
+    ).toBe(1);
   });
 
   test("accepts a freshly delivered delayed quote older than the delayed chain fetch", () => {
@@ -171,7 +259,12 @@ describe("options live quotes", () => {
     };
 
     expect(overlayOptionRowQuotes([original], entries, freshness)[0]!.call!.lastPrice).toBe(2.25);
-    expect(hasLiveOptionQuote(entries, freshness)).toBe(false);
+    const targets = buildOptionQuoteTargets([original], {
+      fallbackHeight: 14,
+      selectedIndex: 0,
+      visibleRange: { start: 0, end: 1 },
+    });
+    expect(resolveOptionQuoteCoverage(targets, entries, freshness).status).toBe("delayed");
   });
 
   test("overlays a valid polled quote without reporting a live stream", () => {
@@ -202,7 +295,12 @@ describe("options live quotes", () => {
     };
 
     expect(overlayOptionRowQuotes([original], entries, freshness)[0]!.call!.lastPrice).toBe(2.5);
-    expect(hasLiveOptionQuote(entries, freshness)).toBe(false);
+    const targets = buildOptionQuoteTargets([original], {
+      fallbackHeight: 14,
+      selectedIndex: 0,
+      visibleRange: { start: 0, end: 1 },
+    });
+    expect(resolveOptionQuoteCoverage(targets, entries, freshness).status).toBe("delayed");
   });
 
   test("rejects a freshly received quote marked stale by the server", () => {
@@ -233,6 +331,11 @@ describe("options live quotes", () => {
     };
 
     expect(overlayOptionRowQuotes([original], entries, freshness)[0]!.call!.lastPrice).toBe(1);
-    expect(hasLiveOptionQuote(entries, freshness)).toBe(false);
+    const targets = buildOptionQuoteTargets([original], {
+      fallbackHeight: 14,
+      selectedIndex: 0,
+      visibleRange: { start: 0, end: 1 },
+    });
+    expect(resolveOptionQuoteCoverage(targets, entries, freshness).status).toBe("delayed");
   });
 });

package/src/plugins/builtin/options/live-quotes.ts

@@ -7,14 +7,11 @@ import type { OptionTableRow } from "./types";
 export const OPTIONS_QUOTE_EXCHANGE = "OPTIONS";
 export const OPTIONS_CHAIN_REFRESH_INTERVAL_MS = 10 * 60_000;
 export const OPTIONS_STREAM_FRESHNESS_MS = 2 * 60_000;
+export const OPTIONS_STREAM_CONNECTING_GRACE_MS = 15_000;
 
-const OPTIONS_STREAM_MAX_TARGETS = 16;
-const OPTIONS_STREAM_MAX_ROWS = OPTIONS_STREAM_MAX_TARGETS / 2;
 const OPTIONS_STREAM_OVERSCAN_ROWS = 4;
 
 export interface OptionsQuoteFreshness {
-  chainAsOf?: string;
-  chainDataSource?: "live" | "delayed";
   now: number;
   subscriptionStartedAt: number;
 }
@@ -23,35 +20,64 @@ function isFiniteNumber(value: number | undefined): value is number {
   return typeof value === "number" && Number.isFinite(value);
 }
 
-function optionStreamRowCount(height: number): number {
-  const visibleRows = Math.max(1, Math.floor(height) - 3);
-  return Math.min(
-    OPTIONS_STREAM_MAX_ROWS,
-    visibleRows + OPTIONS_STREAM_OVERSCAN_ROWS,
-  );
+export interface OptionQuoteTargetWindow {
+  fallbackHeight: number;
+  selectedIndex: number;
+  visibleRange: { start: number; end: number } | null;
+}
+
+export type OptionQuoteCoverageStatus = "live" | "mixed" | "connecting" | "delayed";
+
+export interface OptionQuoteCoverage {
+  fallbackCount: number;
+  liveCount: number;
+  status: OptionQuoteCoverageStatus;
+  totalCount: number;
 }
 
-function optionStreamWindow(totalRows: number, selectedIndex: number, height: number): [number, number] {
-  const count = Math.min(totalRows, optionStreamRowCount(height));
+function fallbackVisibleRange(
+  totalRows: number,
+  selectedIndex: number,
+  height: number,
+): { start: number; end: number } {
+  const count = Math.min(totalRows, Math.max(1, Math.floor(height) - 3));
   const clampedIndex = Math.max(0, Math.min(selectedIndex, Math.max(0, totalRows - 1)));
   const start = Math.max(0, Math.min(clampedIndex - Math.floor(count / 2), totalRows - count));
-  return [start, start + count];
+  return { start, end: start + count };
+}
+
+function normalizeVisibleRange(
+  totalRows: number,
+  window: OptionQuoteTargetWindow,
+): { start: number; end: number } {
+  if (!window.visibleRange) {
+    return fallbackVisibleRange(totalRows, window.selectedIndex, window.fallbackHeight);
+  }
+  const start = Math.max(0, Math.min(totalRows, Math.floor(window.visibleRange.start)));
+  const end = Math.max(start, Math.min(totalRows, Math.ceil(window.visibleRange.end)));
+  return { start, end };
 }
 
 export function buildOptionQuoteTargets(
   rows: readonly OptionTableRow[],
-  selectedIndex: number,
-  height: number,
+  window: OptionQuoteTargetWindow,
 ): QuoteSubscriptionTarget[] {
   if (rows.length === 0) return [];
-  const [start, end] = optionStreamWindow(rows.length, selectedIndex, height);
+  const visibleRange = normalizeVisibleRange(rows.length, window);
+  const start = Math.max(0, visibleRange.start - OPTIONS_STREAM_OVERSCAN_ROWS);
+  const end = Math.min(rows.length, visibleRange.end + OPTIONS_STREAM_OVERSCAN_ROWS);
   const targets = new Map<string, QuoteSubscriptionTarget>();
 
-  for (let index = start; index < end; index += 1) {
+  const addRow = (index: number) => {
     const row = rows[index];
-    if (!row) continue;
-    const selected = index === selectedIndex;
-    const distance = Math.abs(index - selectedIndex);
+    if (!row) return;
+    const selected = index === window.selectedIndex;
+    const visible = index >= visibleRange.start && index < visibleRange.end;
+    const distance = visible
+      ? 0
+      : index < visibleRange.start
+        ? visibleRange.start - index
+        : index - visibleRange.end + 1;
     for (const contract of [row.call, row.put]) {
       const symbol = contract?.contractSymbol.trim().toUpperCase();
       if (!symbol) continue;
@@ -59,11 +85,18 @@ export function buildOptionQuoteTargets(
         symbol,
         exchange: OPTIONS_QUOTE_EXCHANGE,
         surface: "options",
-        visible: true,
+        visible,
         selected,
-        weight: Math.max(50, 100 - distance),
+        weight: selected ? 100 : visible ? 80 : Math.max(50, 70 - distance),
       });
     }
+  };
+
+  for (let index = start; index < end; index += 1) {
+    addRow(index);
+  }
+  if (window.selectedIndex < start || window.selectedIndex >= end) {
+    addRow(window.selectedIndex);
   }
 
   return [...targets.values()];
@@ -99,21 +132,11 @@ function freshOptionQuote(entry: QueryEntry<Quote> | undefined, freshness: Optio
   const receivedAt = quote.receivedAt ?? 0;
   if (
     !Number.isFinite(receivedAt) ||
-    receivedAt <= freshness.subscriptionStartedAt ||
+    receivedAt < freshness.subscriptionStartedAt ||
     freshness.now - receivedAt > OPTIONS_STREAM_FRESHNESS_MS
   ) {
     return null;
   }
-  const chainAsOf = freshness.chainAsOf ? Date.parse(freshness.chainAsOf) : Number.NaN;
-  if (
-    freshness.chainDataSource === "live" &&
-    quote.dataSource === "live" &&
-    Number.isFinite(chainAsOf) &&
-    Number.isFinite(quote.lastUpdated) &&
-    quote.lastUpdated < chainAsOf
-  ) {
-    return null;
-  }
   return quote;
 }
 
@@ -135,13 +158,44 @@ export function overlayOptionRowQuotes(
   }));
 }
 
-export function hasLiveOptionQuote(
+export function resolveOptionQuoteCoverage(
+  targets: readonly QuoteSubscriptionTarget[],
   quoteEntries: ReadonlyMap<string, QueryEntry<Quote>>,
   freshness: OptionsQuoteFreshness,
-): boolean {
-  for (const entry of quoteEntries.values()) {
-    const quote = freshOptionQuote(entry, freshness);
-    if (quote?.dataSource === "live" && quote.delivery === "stream") return true;
+): OptionQuoteCoverage {
+  const visibleSymbols = new Set(
+    targets
+      .filter((target) => target.visible === true)
+      .map((target) => target.symbol.trim().toUpperCase())
+      .filter(Boolean),
+  );
+  let liveCount = 0;
+  let fallbackCount = 0;
+  for (const symbol of visibleSymbols) {
+    const quote = freshOptionQuote(
+      quoteEntries.get(buildOptionQuoteKey(symbol)),
+      freshness,
+    );
+    if (
+      quote?.dataSource === "live"
+      && quote.delivery === "stream"
+      && quote.stale === false
+    ) {
+      liveCount += 1;
+    } else if (quote) {
+      fallbackCount += 1;
+    }
   }
-  return false;
+
+  const totalCount = visibleSymbols.size;
+  const status: OptionQuoteCoverageStatus = totalCount > 0 && liveCount === totalCount
+    ? "live"
+    : liveCount > 0
+      ? "mixed"
+      : fallbackCount === 0
+        && totalCount > 0
+        && freshness.now - freshness.subscriptionStartedAt < OPTIONS_STREAM_CONNECTING_GRACE_MS
+        ? "connecting"
+        : "delayed";
+  return { fallbackCount, liveCount, status, totalCount };
 }

package/src/plugins/builtin/options/view.test.tsx

@@ -164,7 +164,7 @@ test("defaults the table around the nearest strike to the current quote", async
   expect(frame).not.toContain(" 50 ");
 });
 
-test("streams a bounded options window and overlays live contract quotes", async () => {
+test("streams every visible option row and overlays live contract quotes", async () => {
   const strikes = Array.from({ length: 100 }, (_, index) => 50 + index);
   const subscriptions: QuoteSubscriptionTarget[][] = [];
   let emitQuote:
@@ -193,8 +193,9 @@ test("streams a bounded options window and overlays live contract quotes", async
   await renderSettled();
 
   const targets = subscriptions.at(-1) ?? [];
-  expect(targets.length).toBeGreaterThan(0);
+  expect(targets.length).toBeGreaterThan(16);
   expect(targets.length).toBeLessThanOrEqual(80);
+  expect(targets.filter((target) => target.visible === true).length).toBeGreaterThan(16);
   expect(
     targets.every(
       (target) => target.exchange === "OPTIONS" && target.surface === "options",
@@ -218,6 +219,8 @@ test("streams a bounded options window and overlays live contract quotes", async
       changePercent: 0,
       lastUpdated: Date.now(),
       dataSource: "live",
+      delivery: "stream",
+      stale: false,
     });
     await Promise.resolve();
     await testSetup!.renderOnce();

package/src/plugins/builtin/options/view.tsx

@@ -5,7 +5,13 @@ import { colors } from "../../../theme/colors";
 import { isPlainKey } from "../../../utils/keyboard";
 import { formatExpDate, resolveOptionsTarget } from "../../../utils/options";
 import { useOptionsQuery, useResolvedEntryValue } from "../../../market-data/hooks";
-import { DataTableView, Spinner, Tabs, type DataTableKeyEvent } from "../../../components";
+import {
+  DataTableView,
+  Spinner,
+  Tabs,
+  type DataTableKeyEvent,
+  type DataTableVisibleRange,
+} from "../../../components";
 import { useShortcut } from "../../../react/input";
 import { useLiveQuoteEntries } from "../../../state/hooks/quote-streaming";
 import {
@@ -19,9 +25,9 @@ import {
 import type { OptionColumn, OptionTableRow, OptionsViewProps } from "./types";
 import {
   buildOptionQuoteTargets,
-  hasLiveOptionQuote,
   OPTIONS_CHAIN_REFRESH_INTERVAL_MS,
   overlayOptionRowQuotes,
+  resolveOptionQuoteCoverage,
 } from "./live-quotes";
 import { useOptionsAccessFooter } from "./footer";
 
@@ -31,6 +37,10 @@ export function OptionsView({ width, height, focused, onCapture = () => {} }: Op
   const [strikeIdx, setStrikeIdx] = useState(0);
   const [autoScrollVersion, setAutoScrollVersion] = useState(0);
   const [scrollToIndexAlign, setScrollToIndexAlign] = useState<"nearest" | "center">("nearest");
+  const [visibleStrikeViewport, setVisibleStrikeViewport] = useState<{
+    key: string;
+    range: DataTableVisibleRange;
+  } | null>(null);
   const [interactive, setInteractive] = useState(false);
   const userSelectedStrikeRef = useRef(false);
   const onCaptureRef = useRef(onCapture);
@@ -54,6 +64,7 @@ export function OptionsView({ width, height, focused, onCapture = () => {} }: Op
   const initialChainEntry = useOptionsQuery(baseRequest);
   const initialChain = useResolvedEntryValue(initialChainEntry);
   const selectedExpiration = initialChain?.expirationDates[expIdx];
+  const viewportKey = `${effectiveTicker}:${selectedExpiration ?? "initial"}`;
   const expirationChainEntry = useOptionsQuery(
     baseRequest && selectedExpiration != null
       ? { ...baseRequest, expirationDate: selectedExpiration }
@@ -131,28 +142,52 @@ export function OptionsView({ width, height, focused, onCapture = () => {} }: Op
     put: putsByStrike.get(strike),
     isPositionStrike: !!parsed && Math.abs(strike - parsed.strike) < 0.01,
   })), [callsByStrike, parsed, putsByStrike, strikes]);
+  const visibleStrikeRange = visibleStrikeViewport?.key === viewportKey
+    ? visibleStrikeViewport.range
+    : null;
+  const handleVisibleStrikeRangeChange = useCallback((range: DataTableVisibleRange) => {
+    setVisibleStrikeViewport((current) => (
+      current?.key === viewportKey
+      && current.range.start === range.start
+      && current.range.end === range.end
+        ? current
+        : { key: viewportKey, range }
+    ));
+  }, [viewportKey]);
   const optionQuoteTargets = useMemo(
-    () => buildOptionQuoteTargets(snapshotRows, strikeIdx, height),
-    [height, snapshotRows, strikeIdx],
+    () => buildOptionQuoteTargets(snapshotRows, {
+      fallbackHeight: height,
+      selectedIndex: strikeIdx,
+      visibleRange: visibleStrikeRange,
+    }),
+    [height, snapshotRows, strikeIdx, visibleStrikeRange],
   );
   const {
     entries: optionQuoteEntries,
     freshnessNow,
     subscriptionStartedAt,
-  } = useLiveQuoteEntries(optionQuoteTargets);
+  } = useLiveQuoteEntries(optionQuoteTargets, {
+    freshnessScopeKey: viewportKey,
+  });
   const optionQuoteFreshness = useMemo(
     () => ({
-      chainAsOf: chain?.asOf,
-      chainDataSource: chain?.dataSource,
       now: freshnessNow,
       subscriptionStartedAt,
     }),
-    [chain?.asOf, chain?.dataSource, freshnessNow, subscriptionStartedAt],
+    [freshnessNow, subscriptionStartedAt],
   );
   const rows = useMemo(
     () => overlayOptionRowQuotes(snapshotRows, optionQuoteEntries, optionQuoteFreshness),
     [optionQuoteEntries, optionQuoteFreshness, snapshotRows],
   );
+  const optionQuoteCoverage = useMemo(
+    () => resolveOptionQuoteCoverage(
+      optionQuoteTargets,
+      optionQuoteEntries,
+      optionQuoteFreshness,
+    ),
+    [optionQuoteEntries, optionQuoteFreshness, optionQuoteTargets],
+  );
   const optionColumns: OptionColumn[] = OPTION_COLUMNS.map((column) => ({
     ...column,
     headerColor: optionColumnColor(column.id, colors.panel),
@@ -162,8 +197,8 @@ export function OptionsView({ width, height, focused, onCapture = () => {} }: Op
     chain,
     error,
     focused,
-    hasLiveQuote: hasLiveOptionQuote(optionQuoteEntries, optionQuoteFreshness),
     loading,
+    quoteCoverage: optionQuoteCoverage,
   });
 
   useEffect(() => {
@@ -333,6 +368,8 @@ export function OptionsView({ width, height, focused, onCapture = () => {} }: Op
         sortDirection="asc"
         onHeaderClick={() => {}}
         onTableMouseDown={enterInteractive}
+        visibleRangeKey={viewportKey}
+        onVisibleRangeChange={handleVisibleStrikeRangeChange}
         getItemKey={(row) => String(row.strike)}
         renderCell={renderOptionCell}
         emptyStateTitle="No strikes available."

package/src/renderers/electrobun/view/data-table/index.tsx

@@ -15,7 +15,9 @@ import { measurePerf } from "../../../../utils/perf-marks";
 import type {
   DataTableColumn,
   DataTableProps,
+  DataTableVisibleRange,
 } from "../../../../components/ui/data-table";
+import { resolveDataTableVisibleRange } from "../../../../components/ui/data-table/visible-range";
 import {
   buildTableGridTemplateColumns,
   getTableWidth,
@@ -57,6 +59,8 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   onSelect,
   onActivate,
   onTableMouseDown,
+  visibleRangeKey,
+  onVisibleRangeChange,
   onRowMouseDown,
   onRowContextMenu,
   rowContextMenuSurface = false,
@@ -80,6 +84,10 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   const dispatch = useAppDispatch();
   const paneInstanceId = usePaneInstance()?.instanceId ?? null;
   const bodyElementRef = useRef<HTMLDivElement | null>(null);
+  const lastVisibleRangeRef = useRef<{
+    key: string | number | undefined;
+    range: DataTableVisibleRange;
+  } | null>(null);
   const headerHorizontal = useScrollbarState(false);
   const headerVertical = useScrollbarState(false);
   const bodyHorizontal = useScrollbarState(showHorizontalScrollbar);
@@ -106,10 +114,32 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     dispatch({ type: "FOCUS_PANE", paneId: paneInstanceId });
   }, [dispatch, paneInstanceId]);
 
+  const emitVisibleRange = useCallback(() => {
+    if (!onVisibleRangeChange) return;
+    const element = bodyElementRef.current;
+    if (!element) return;
+    const range = resolveDataTableVisibleRange({
+      itemCount: items.length,
+      rowSize: WEB_CELL_HEIGHT,
+      scrollOffset: element.scrollTop,
+      viewportSize: Math.max(0, element.clientHeight - WEB_CELL_HEIGHT),
+    });
+    const previous = lastVisibleRangeRef.current;
+    if (
+      previous !== null
+      && previous.key === visibleRangeKey
+      && previous.range.start === range.start
+      && previous.range.end === range.end
+    ) return;
+    lastVisibleRangeRef.current = { key: visibleRangeKey, range };
+    onVisibleRangeChange(range);
+  }, [items.length, onVisibleRangeChange, visibleRangeKey]);
   const handleBodyScrollActivity = useCallback(() => {
     onBodyScrollActivity();
-  }, [onBodyScrollActivity]);
+    emitVisibleRange();
+  }, [emitVisibleRange, onBodyScrollActivity]);
   const scheduleBodyScrollActivity = useRafCallback(handleBodyScrollActivity);
+  const scheduleVisibleRangeMeasure = useRafCallback(emitVisibleRange);
 
   const rowVirtualizer = useVirtualizer({
     count: items.length,
@@ -154,12 +184,20 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
 
   useEffect(() => {
     measureViewportWidth();
+    scheduleVisibleRangeMeasure();
     const element = bodyElementRef.current;
     if (!element || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(scheduleViewportWidthMeasure);
+    const observer = new ResizeObserver(() => {
+      scheduleViewportWidthMeasure();
+      scheduleVisibleRangeMeasure();
+    });
     observer.observe(element);
     return () => observer.disconnect();
-  }, [measureViewportWidth, scheduleViewportWidthMeasure]);
+  }, [measureViewportWidth, scheduleViewportWidthMeasure, scheduleVisibleRangeMeasure]);
+
+  useEffect(() => {
+    scheduleVisibleRangeMeasure();
+  }, [items.length, scheduleVisibleRangeMeasure, visibleRangeKey]);
 
   useEffect(() => {
     if (scrollToIndex == null || items.length === 0) return;
@@ -168,6 +206,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
       rowVirtualizer.scrollToIndex(targetIndex, {
         align: scrollToIndexAlign === "center" ? "center" : "auto",
       });
+      scheduleVisibleRangeMeasure();
       return;
     }
     const element = bodyElementRef.current;
@@ -185,12 +224,14 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     if (nextTop !== currentTop) {
       element.scrollTop = nextTop * WEB_CELL_HEIGHT;
     }
+    scheduleVisibleRangeMeasure();
   }, [
     items.length,
     rowVirtualizer,
     scrollToIndex,
     scrollToIndexAlign,
     scrollToIndexVersion,
+    scheduleVisibleRangeMeasure,
     virtualize,
   ]);