diff --git a/src/components/table/body/header/cell.js b/src/components/table/body/header/cell.js
index cd5062232..4db524c26 100644
--- a/src/components/table/body/header/cell.js
+++ b/src/components/table/body/header/cell.js
@@ -34,6 +34,16 @@ const rerenderSelector = state => ({
   selecting: state.selectedRows,
 })
 
+export const getHeaderTooltipContent = columnDef => {
+  const headerString =
+    typeof columnDef.headerString === "function" ? columnDef.headerString() : columnDef.headerString
+
+  if (headerString != null) return String(headerString)
+  if (typeof columnDef.header === "string") return columnDef.header
+  if (columnDef.header != null) return ""
+  return undefined
+}
+
 const BodyHeaderCell = ({
   header,
   table,
@@ -63,6 +73,8 @@ const BodyHeaderCell = ({
       ? column.columnDef.meta({}, column, index)
       : column.columnDef.meta
 
+  const headerTooltipContent = getHeaderTooltipContent(column.columnDef)
+
   const headStyles = {
     ...(tableMeta?.styles || {}),
     ...(meta?.styles || {}),
@@ -110,6 +122,7 @@ const BodyHeaderCell = ({
             <Label
               as={column.columnDef.labelAs}
               {...column.columnDef.labelProps}
+              data-table-header-tooltip={headerTooltipContent}
               sorting={column.getIsSorted()}
               sortable={column.getCanSort()}
               strong
diff --git a/src/components/table/body/header/cell.test.js b/src/components/table/body/header/cell.test.js
new file mode 100644
index 000000000..2c2d4fa98
--- /dev/null
+++ b/src/components/table/body/header/cell.test.js
@@ -0,0 +1,20 @@
+import React from "react"
+import { getHeaderTooltipContent } from "./cell"
+
+it("uses the canonical header string before rendered header content", () => {
+  expect(
+    getHeaderTooltipContent({
+      header: <span>Rendered abbreviation</span>,
+      headerString: () => "Complete column name",
+    })
+  ).toBe("Complete column name")
+})
+
+it("uses a literal header when no canonical header string exists", () => {
+  expect(getHeaderTooltipContent({ header: "Complete column name" })).toBe("Complete column name")
+})
+
+it("marks complex headers for lazy visible-text resolution", () => {
+  expect(getHeaderTooltipContent({ header: <span>Complete column name</span> })).toBe("")
+  expect(getHeaderTooltipContent({})).toBeUndefined()
+})
diff --git a/src/components/table/body/index.js b/src/components/table/body/index.js
index a5737b5e9..c7241601b 100644
--- a/src/components/table/body/index.js
+++ b/src/components/table/body/index.js
@@ -1,4 +1,12 @@
-import React, { memo, useCallback, useRef, useEffect, useMemo } from "react"
+import React, {
+  memo,
+  useCallback,
+  useRef,
+  useEffect,
+  useMemo,
+  useLayoutEffect,
+  useState,
+} from "react"
 import { useVirtualizer, defaultRangeExtractor } from "@tanstack/react-virtual"
 import identity from "lodash/identity"
 import Flex from "@/components/templates/flex"
@@ -6,9 +14,44 @@ import { useTableState } from "../provider"
 import Row from "./row"
 import Header from "./header"
 import RowPlaceholdersRenderer from "./rowPLaceholdersRenderer"
+import { getVirtualWindowRange } from "../largeData"
+import { createRowMountController } from "./rowMountController"
+import { measureTableElement } from "./measureElement"
+import OverflowTooltip from "../components/overflowTooltip"
+
+const deferredRowScrollResetDelayMs = 50
 
 const noop = () => {}
 
+const DeferredRow = memo(
+  ({ children, controller, RowPlaceholder, index, placeholderSize }) => {
+    const [ready, setReady] = useState(false)
+
+    useEffect(() => controller.schedule(() => setReady(true)), [controller])
+
+    if (ready) return children
+    return (
+      <div
+        aria-hidden
+        style={{ height: `${placeholderSize}px`, overflow: "hidden", width: "100%" }}
+      >
+        {RowPlaceholder ? <RowPlaceholder index={index} /> : null}
+      </div>
+    )
+  },
+  (previous, next) =>
+    previous.controller === next.controller &&
+    previous.rowKey === next.rowKey &&
+    previous.rowOriginal === next.rowOriginal &&
+    previous.RowPlaceholder === next.RowPlaceholder &&
+    previous.RowWrapper === next.RowWrapper &&
+    previous.GroupRow === next.GroupRow &&
+    previous.onClickRow === next.onClickRow &&
+    previous.directCellContent === next.directCellContent &&
+    previous.placeholderSize === next.placeholderSize &&
+    previous.index === next.index
+)
+
 const rerenderSelector = state => ({
   sorting: state.sorting,
   sizing: state.columnSizing,
@@ -35,28 +78,59 @@ const Body = memo(
     virtualRef,
     initialOffset = 0,
     onScroll,
+    onIsScrollingChange = noop,
+    deferRowMount = false,
+    DeferredRowPlaceholder,
     enableColumnReordering,
     RowPlaceholder,
+    RowWrapper,
     placeholdersLength,
+    largeDataSource,
+    windowStartIndex = 0,
+    onWindowChange,
+    overflowTooltip,
     ...rest
   }) => {
     useTableState(rerenderSelector)
     const ref = useRef()
+    const publishedWindowRef = useRef()
+    const pendingWindowRef = useRef()
+    const rowMountController = useMemo(() => createRowMountController(), [])
+
+    useEffect(() => () => rowMountController.dispose(), [rowMountController])
 
     const { rows } = table.getRowModel()
 
+    const dataRowCount = largeDataSource?.getRowCount() ?? rows.length
+    const rowHeight =
+      (!!meta.styles?.height && parseInt(meta.styles.height)) ||
+      (!!meta.cellStyles?.height && parseInt(meta.cellStyles.height)) ||
+      35
+    const estimateSize = useCallback(
+      index => (index > 0 && largeDataSource?.getEstimatedRowHeight?.(index - 1)) || rowHeight,
+      [largeDataSource, rowHeight]
+    )
+    const resolveItemKey = useCallback(
+      index =>
+        index === 0 ? "header" : (largeDataSource?.getRowId(index - 1) ?? getItemKey(index - 1)),
+      [getItemKey, largeDataSource]
+    )
+    const measureElement = useCallback(
+      (element, entry, instance) => measureTableElement(element, entry, instance),
+      []
+    )
+
     const rowVirtualizer = useVirtualizer({
-      count: rows.length ? rows.length + 1 : 1,
+      count: dataRowCount ? dataRowCount + 1 : 1,
       getScrollElement: () => ref.current,
       enableSmoothScroll: false,
-      estimateSize: () =>
-        (!!meta.styles?.height && parseInt(meta.styles.height)) ||
-        (!!meta.cellStyles?.height && parseInt(meta.cellStyles.height)) ||
-        35,
+      estimateSize,
       overscan: overscan || 15,
       onChange: onVirtualChange,
       initialOffset,
-      getItemKey: index => (index === 0 ? "header" : getItemKey(index - 1)),
+      getItemKey: resolveItemKey,
+      measureElement,
+      ...(deferRowMount ? { isScrollingResetDelay: deferredRowScrollResetDelayMs } : {}),
       rangeExtractor: useCallback(range => {
         if (range.count && range.startIndex >= 0) {
           const next = new Set([0, ...defaultRangeExtractor(range)])
@@ -69,7 +143,40 @@ const Body = memo(
 
     if (virtualRef) virtualRef.current = rowVirtualizer
 
+    useEffect(() => {
+      rowMountController.setScrolling(rowVirtualizer.isScrolling)
+      onIsScrollingChange(rowVirtualizer.isScrolling)
+    }, [onIsScrollingChange, rowMountController, rowVirtualizer.isScrolling])
+
     const virtualRows = rowVirtualizer.getVirtualItems()
+    const nextWindowRange = useMemo(
+      () => (largeDataSource ? getVirtualWindowRange(virtualRows, dataRowCount) : null),
+      [largeDataSource, virtualRows, dataRowCount]
+    )
+
+    useLayoutEffect(() => {
+      if (!nextWindowRange) return
+
+      if (deferRowMount && rowVirtualizer.isScrolling) {
+        pendingWindowRef.current = nextWindowRange
+        return
+      }
+
+      const windowRange = pendingWindowRef.current || nextWindowRange
+      pendingWindowRef.current = undefined
+
+      const publishedWindow = publishedWindowRef.current
+      if (
+        publishedWindow?.startIndex === windowRange.startIndex &&
+        publishedWindow?.endIndex === windowRange.endIndex
+      ) {
+        return
+      }
+
+      publishedWindowRef.current = windowRange
+      onWindowChange(windowRange)
+    }, [deferRowMount, nextWindowRange, onWindowChange, rowVirtualizer.isScrolling])
+
     // index 0 is reserved for the sticky header (see count = rows + 1 and rangeExtractor above)
     const firstVirtualDataIndex = virtualRows[1]?.index ?? 1
     const lastVirtualDataIndex = virtualRows[virtualRows.length - 1]?.index ?? 0
@@ -78,7 +185,7 @@ const Body = memo(
       if (!RowPlaceholder) return { before: [], after: [] }
 
       const firstDataIndex = 1
-      const lastDataIndex = rows.length
+      const lastDataIndex = dataRowCount
 
       // "before" = rows before the virtual window; capped to placeholdersLength when provided
       const beforeEnd = firstVirtualDataIndex
@@ -98,17 +205,20 @@ const Body = memo(
         before: Array.from({ length: beforeEnd - beforeStart }, (_, i) => beforeStart + i),
         after: Array.from({ length: afterEnd - afterStart }, (_, i) => afterStart + i),
       }
-    }, [RowPlaceholder, firstVirtualDataIndex, lastVirtualDataIndex, rows.length, placeholdersLength])
+    }, [
+      RowPlaceholder,
+      firstVirtualDataIndex,
+      lastVirtualDataIndex,
+      dataRowCount,
+      placeholdersLength,
+    ])
 
     const getPlaceholderOffset = useCallback(
       index => {
-        // measurementsCache is populated for all count items on every render
-        // (getTotalSize calls getMeasurements which fills the full cache).
-        // Entries use real sizes for measured rows and estimateSize for the rest.
-        const cached = rowVirtualizer.measurementsCache[index]
-        return cached ? cached.start : 0
+        if (!largeDataSource) return rowVirtualizer.measurementsCache[index]?.start || 0
+        return rowVirtualizer.getOffsetForIndex(index, "start")?.[0] || 0
       },
-      [rowVirtualizer]
+      [largeDataSource, rowVirtualizer]
     )
 
     useEffect(() => {
@@ -118,7 +228,7 @@ const Body = memo(
 
       if (!lastItem) return
 
-      if (lastItem.index >= rows.length && getHasNextPage() && !loading) {
+      if (lastItem.index >= dataRowCount && getHasNextPage() && !loading) {
         loadMore("backward")
       }
     }, [virtualRows, loading])
@@ -158,6 +268,36 @@ const Body = memo(
             getPlaceholderOffset={getPlaceholderOffset}
           />
           {virtualRows.map(virtualRow => {
+            const row =
+              virtualRow.index === 0
+                ? null
+                : rows[virtualRow.index - 1 - (largeDataSource ? windowStartIndex : 0)]
+            const logicalIndex = largeDataSource ? virtualRow.index - 1 : undefined
+            const rowContent = row ? (
+              <Row
+                dataGa={dataGa}
+                table={table}
+                testPrefix={testPrefix}
+                testPrefixCallback={testPrefixCallback}
+                coloredSortedColumn={coloredSortedColumn}
+                meta={meta}
+                row={row}
+                index={virtualRow.index}
+                logicalIndex={logicalIndex}
+                {...rest}
+              />
+            ) : null
+            const wrappedRow =
+              row && RowWrapper ? (
+                <RowWrapper row={row} virtualIndex={virtualRow.index} logicalIndex={logicalIndex}>
+                  {rowContent}
+                </RowWrapper>
+              ) : row ? (
+                rowContent
+              ) : RowPlaceholder ? (
+                <RowPlaceholder index={virtualRow.index - 1} />
+              ) : null
+
             return (
               <div
                 key={virtualRow.key}
@@ -185,18 +325,23 @@ const Body = memo(
                     enableColumnReordering={enableColumnReordering}
                     {...rest}
                   />
+                ) : deferRowMount && row ? (
+                  <DeferredRow
+                    controller={rowMountController}
+                    rowKey={virtualRow.key}
+                    rowOriginal={row.original}
+                    RowPlaceholder={DeferredRowPlaceholder || RowPlaceholder}
+                    RowWrapper={RowWrapper}
+                    GroupRow={rest.GroupRow}
+                    onClickRow={rest.onClickRow}
+                    directCellContent={rest.directCellContent}
+                    index={virtualRow.index - 1}
+                    placeholderSize={virtualRow.size ?? estimateSize(virtualRow.index)}
+                  >
+                    {wrappedRow}
+                  </DeferredRow>
                 ) : (
-                  <Row
-                    dataGa={dataGa}
-                    table={table}
-                    testPrefix={testPrefix}
-                    testPrefixCallback={testPrefixCallback}
-                    coloredSortedColumn={coloredSortedColumn}
-                    meta={meta}
-                    row={rows[virtualRow.index - 1]}
-                    index={virtualRow.index}
-                    {...rest}
-                  />
+                  wrappedRow
                 )}
               </div>
             )
@@ -207,6 +352,7 @@ const Body = memo(
             getPlaceholderOffset={getPlaceholderOffset}
           />
         </div>
+        {overflowTooltip ? <OverflowTooltip containerRef={ref} options={overflowTooltip} /> : null}
       </Flex>
     )
   }
diff --git a/src/components/table/body/index.test.js b/src/components/table/body/index.test.js
new file mode 100644
index 000000000..922797509
--- /dev/null
+++ b/src/components/table/body/index.test.js
@@ -0,0 +1,300 @@
+import React from "react"
+import { renderWithProviders, screen, waitFor } from "testUtilities"
+import TableProvider from "../provider"
+import Body from "."
+import { useVirtualizer } from "@tanstack/react-virtual"
+
+jest.mock("@tanstack/react-virtual", () => ({
+  defaultRangeExtractor: jest.fn(() => []),
+  useVirtualizer: jest.fn(() => ({
+    getTotalSize: () => 0,
+    getVirtualItems: () => [],
+    measureElement: jest.fn(),
+    measurementsCache: [],
+  })),
+}))
+
+jest.mock("./row", () => ({ row }) => (
+  <div data-testid="row-content" data-row-value={row.original?.value} />
+))
+jest.mock("./header", () => () => <div data-testid="header-content" />)
+
+describe("Table Body large-data mode", () => {
+  it("keeps virtual measurement callbacks stable across equivalent renders", () => {
+    const largeDataSource = {
+      getRowCount: () => 50_000,
+      getRowId: index => `node-${index}`,
+    }
+    const props = {
+      largeDataSource,
+      meta: {},
+      onWindowChange: jest.fn(),
+      table: { getRowModel: () => ({ rows: [] }) },
+    }
+    const renderBody = dataGa => (
+      <TableProvider>
+        <Body {...props} dataGa={dataGa} />
+      </TableProvider>
+    )
+    const { rerender } = renderWithProviders(renderBody("first"))
+
+    const firstOptions = useVirtualizer.mock.calls.at(-1)[0]
+    rerender(renderBody("second"))
+    const secondOptions = useVirtualizer.mock.calls.at(-1)[0]
+
+    expect(secondOptions.getItemKey).toBe(firstOptions.getItemKey)
+    expect(secondOptions.estimateSize).toBe(firstOptions.estimateSize)
+  })
+
+  it("shortens the scroll reset delay only for deferred row mounting", () => {
+    const props = {
+      largeDataSource: { getRowCount: () => 50_000, getRowId: index => `node-${index}` },
+      meta: {},
+      onWindowChange: jest.fn(),
+      table: { getRowModel: () => ({ rows: [] }) },
+    }
+    const renderBody = deferRowMount => (
+      <TableProvider>
+        <Body {...props} deferRowMount={deferRowMount} />
+      </TableProvider>
+    )
+    const { rerender } = renderWithProviders(renderBody(false))
+
+    expect(useVirtualizer.mock.calls.at(-1)[0].isScrollingResetDelay).toBeUndefined()
+
+    rerender(renderBody(true))
+
+    expect(useVirtualizer.mock.calls.at(-1)[0].isScrollingResetDelay).toBe(50)
+  })
+
+  it("publishes an unchanged virtual window only once", () => {
+    useVirtualizer.mockImplementation(() => ({
+      getTotalSize: () => 1_750_000,
+      getVirtualItems: () => [
+        { index: 1, key: "node-0", start: 35 },
+        { index: 2, key: "node-1", start: 70 },
+      ],
+      measureElement: jest.fn(),
+      measurementsCache: [],
+    }))
+
+    const onWindowChange = jest.fn()
+    const largeDataSource = {
+      getRowCount: () => 50_000,
+      getRowId: index => `node-${index}`,
+    }
+    const props = {
+      largeDataSource,
+      meta: {},
+      onWindowChange,
+      table: { getRowModel: () => ({ rows: [] }) },
+    }
+    const { rerender } = renderWithProviders(
+      <TableProvider>
+        <Body {...props} dataGa="first" />
+      </TableProvider>
+    )
+
+    rerender(
+      <TableProvider>
+        <Body {...props} dataGa="second" />
+      </TableProvider>
+    )
+
+    expect(onWindowChange).toHaveBeenCalledTimes(1)
+    expect(onWindowChange).toHaveBeenCalledWith({ startIndex: 0, endIndex: 2 })
+  })
+
+  it("publishes the final large-data window after deferred scrolling stops", () => {
+    let isScrolling = true
+    useVirtualizer.mockImplementation(() => ({
+      getTotalSize: () => 1_750_000,
+      getVirtualItems: () => [
+        { index: 10, key: "node-9", start: 350 },
+        { index: 11, key: "node-10", start: 385 },
+      ],
+      isScrolling,
+      measureElement: jest.fn(),
+      measurementsCache: [],
+    }))
+
+    const onWindowChange = jest.fn()
+    const props = {
+      deferRowMount: true,
+      largeDataSource: {
+        getRowCount: () => 50_000,
+        getRowId: index => `node-${index}`,
+      },
+      meta: {},
+      onWindowChange,
+      table: { getRowModel: () => ({ rows: [] }) },
+    }
+    const renderBody = dataGa => (
+      <TableProvider>
+        <Body {...props} dataGa={dataGa} />
+      </TableProvider>
+    )
+    const { rerender } = renderWithProviders(renderBody("scrolling"))
+
+    expect(onWindowChange).not.toHaveBeenCalled()
+
+    isScrolling = false
+    rerender(renderBody("idle"))
+
+    expect(onWindowChange).toHaveBeenCalledTimes(1)
+    expect(onWindowChange).toHaveBeenCalledWith({ startIndex: 9, endIndex: 11 })
+  })
+
+  it("measures large-data rows with wrapped content", () => {
+    const measureElement = jest.fn()
+    useVirtualizer.mockImplementation(() => ({
+      getTotalSize: () => 70,
+      getVirtualItems: () => [
+        { index: 0, key: "header", start: 0 },
+        { index: 1, key: "node-0", start: 35 },
+      ],
+      measureElement,
+      measurementsCache: [],
+    }))
+
+    const largeDataSource = {
+      getRowCount: () => 1,
+      getRowId: () => "node-0",
+    }
+
+    renderWithProviders(
+      <TableProvider>
+        <Body
+          largeDataSource={largeDataSource}
+          meta={{}}
+          onWindowChange={jest.fn()}
+          table={{ getRowModel: () => ({ rows: [{ id: "node-0" }] }) }}
+        />
+      </TableProvider>
+    )
+
+    expect(measureElement.mock.calls.some(([element]) => element?.dataset.index === "1")).toBe(true)
+  })
+
+  it("sizes a deferred placeholder from the virtual row", () => {
+    useVirtualizer.mockImplementation(() => ({
+      getTotalSize: () => 80.4,
+      getVirtualItems: () => [
+        { index: 0, key: "header", size: 46, start: 0 },
+        { index: 1, key: "node-0", size: 34.4, start: 46 },
+      ],
+      isScrolling: true,
+      measureElement: jest.fn(),
+      measurementsCache: [],
+    }))
+
+    const { container } = renderWithProviders(
+      <TableProvider>
+        <Body
+          deferRowMount
+          meta={{}}
+          table={{
+            getRowModel: () => ({
+              rows: [{ id: "node-0", original: { id: "node-0" } }],
+            }),
+          }}
+        />
+      </TableProvider>
+    )
+
+    expect(container.querySelector('[data-index="1"] > [aria-hidden="true"]')).toHaveStyle({
+      height: "34.4px",
+      overflow: "hidden",
+      width: "100%",
+    })
+  })
+
+  it("wraps only data rows with the optional RowWrapper", () => {
+    useVirtualizer.mockImplementation(() => ({
+      getTotalSize: () => 70,
+      getVirtualItems: () => [
+        { index: 0, key: "header", start: 0 },
+        { index: 1, key: "node-0", start: 35 },
+      ],
+      isScrolling: true,
+      measureElement: jest.fn(),
+      measurementsCache: [],
+    }))
+
+    const RowWrapper = ({ children, row, virtualIndex, logicalIndex }) => (
+      <div
+        data-testid="row-wrapper"
+        data-row-id={row.id}
+        data-virtual-index={virtualIndex}
+        data-logical-index={logicalIndex}
+      >
+        {children}
+      </div>
+    )
+    const onIsScrollingChange = jest.fn()
+
+    renderWithProviders(
+      <TableProvider>
+        <Body
+          RowWrapper={RowWrapper}
+          onIsScrollingChange={onIsScrollingChange}
+          largeDataSource={{ getRowCount: () => 1, getRowId: () => "node-0" }}
+          meta={{}}
+          onWindowChange={jest.fn()}
+          table={{ getRowModel: () => ({ rows: [{ id: "node-0" }] }) }}
+        />
+      </TableProvider>
+    )
+
+    expect(document.querySelectorAll('[data-testid="row-wrapper"]')).toHaveLength(1)
+    expect(document.querySelector('[data-testid="row-wrapper"]')).toHaveAttribute(
+      "data-row-id",
+      "node-0"
+    )
+    expect(document.querySelector('[data-testid="row-wrapper"]')).toHaveAttribute(
+      "data-virtual-index",
+      "1"
+    )
+    expect(document.querySelector('[data-testid="row-wrapper"]')).toHaveAttribute(
+      "data-logical-index",
+      "0"
+    )
+    expect(onIsScrollingChange).toHaveBeenCalledWith(true)
+  })
+
+  it("updates a mounted deferred row when its canonical record changes", async () => {
+    useVirtualizer.mockImplementation(() => ({
+      getTotalSize: () => 70,
+      getVirtualItems: () => [
+        { index: 0, key: "header", start: 0 },
+        { index: 1, key: "alert-1", start: 35 },
+      ],
+      isScrolling: false,
+      measureElement: jest.fn(),
+      measurementsCache: [],
+    }))
+
+    const renderBody = value => (
+      <TableProvider>
+        <Body
+          deferRowMount
+          meta={{}}
+          table={{
+            getRowModel: () => ({
+              rows: [{ id: "alert-1", original: { id: "alert-1", value } }],
+            }),
+          }}
+        />
+      </TableProvider>
+    )
+    const { rerender } = renderWithProviders(renderBody("warning"))
+
+    await waitFor(() =>
+      expect(screen.getByTestId("row-content")).toHaveAttribute("data-row-value", "warning")
+    )
+
+    rerender(renderBody("critical"))
+
+    expect(screen.getByTestId("row-content")).toHaveAttribute("data-row-value", "critical")
+  })
+})
diff --git a/src/components/table/body/measureElement.js b/src/components/table/body/measureElement.js
new file mode 100644
index 000000000..700a59587
--- /dev/null
+++ b/src/components/table/body/measureElement.js
@@ -0,0 +1,38 @@
+const getCachedSize = (element, instance) => {
+  const index = instance.indexFromElement(element)
+  const key = instance.options.getItemKey(index)
+
+  return {
+    cached: instance.itemSizeCache.get(key),
+    estimated: instance.options.estimateSize(index),
+  }
+}
+
+const getObservedSize = (entry, horizontal) => {
+  const borderBoxSize = entry?.borderBoxSize
+  const box = Array.isArray(borderBoxSize) ? borderBoxSize[0] : borderBoxSize
+
+  return box?.[horizontal ? "inlineSize" : "blockSize"]
+}
+
+export const measureTableElement = (element, entry, instance) => {
+  const horizontal = instance.options.horizontal
+
+  if (instance.options.useCachedMeasurements) {
+    const { cached, estimated } = getCachedSize(element, instance)
+    return cached ?? estimated
+  }
+
+  const observedSize = getObservedSize(entry, horizontal)
+  if (observedSize) return observedSize
+
+  if (!entry) {
+    const { cached } = getCachedSize(element, instance)
+    if (cached !== undefined) return cached
+  }
+
+  const rect = element.getBoundingClientRect()
+  const measuredSize = horizontal ? rect.width : rect.height
+
+  return measuredSize || instance.options.estimateSize(instance.indexFromElement(element))
+}
diff --git a/src/components/table/body/measureElement.test.js b/src/components/table/body/measureElement.test.js
new file mode 100644
index 000000000..b3ce1b89f
--- /dev/null
+++ b/src/components/table/body/measureElement.test.js
@@ -0,0 +1,46 @@
+import { measureTableElement } from "./measureElement"
+
+const createInstance = ({ cached, estimate = 35, horizontal = false } = {}) => ({
+  indexFromElement: jest.fn(() => 2),
+  itemSizeCache: new Map(cached === undefined ? [] : [["row-2", cached]]),
+  options: {
+    estimateSize: jest.fn(() => estimate),
+    getItemKey: jest.fn(index => `row-${index}`),
+    horizontal,
+    useCachedMeasurements: false,
+  },
+})
+
+describe("measureTableElement", () => {
+  it("preserves a fractional ResizeObserver border-box height", () => {
+    const element = { getBoundingClientRect: jest.fn() }
+    const instance = createInstance()
+    const entry = { borderBoxSize: [{ blockSize: 34.4, inlineSize: 200.8 }] }
+
+    expect(measureTableElement(element, entry, instance)).toBe(34.4)
+    expect(element.getBoundingClientRect).not.toHaveBeenCalled()
+  })
+
+  it("preserves a fractional bounding-client-rect fallback", () => {
+    const element = { getBoundingClientRect: jest.fn(() => ({ height: 52.8, width: 400.8 })) }
+    const instance = createInstance()
+
+    expect(measureTableElement(element, undefined, instance)).toBe(52.8)
+  })
+
+  it("reuses a cached measurement without forcing layout", () => {
+    const element = { getBoundingClientRect: jest.fn() }
+    const instance = createInstance({ cached: 44.8 })
+
+    expect(measureTableElement(element, undefined, instance)).toBe(44.8)
+    expect(element.getBoundingClientRect).not.toHaveBeenCalled()
+  })
+
+  it("measures fractional width for a horizontal virtualizer", () => {
+    const element = { getBoundingClientRect: jest.fn() }
+    const instance = createInstance({ horizontal: true })
+    const entry = { borderBoxSize: { blockSize: 34.4, inlineSize: 200.8 } }
+
+    expect(measureTableElement(element, entry, instance)).toBe(200.8)
+  })
+})
diff --git a/src/components/table/body/row.js b/src/components/table/body/row.js
index cf63849c3..38844e554 100644
--- a/src/components/table/body/row.js
+++ b/src/components/table/body/row.js
@@ -1,11 +1,19 @@
 import React, { memo, useMemo, useCallback } from "react"
-import styled from "styled-components"
+import styled, { useTheme } from "styled-components"
 import Flex from "@/components/templates/flex"
-import { getColor } from "@/theme"
+import { getColor, getRgbColor } from "@/theme"
 import { useTableState } from "../provider"
 import getColumnFlex from "./columnFlex"
 
-const CellGroup = ({ cell, row, table, header, testPrefix, coloredSortedColumn }) => {
+const CellGroup = ({
+  cell,
+  row,
+  table,
+  header,
+  testPrefix,
+  coloredSortedColumn,
+  directCellContent,
+}) => {
   const { column } = cell
 
   const tableMeta = useMemo(
@@ -30,6 +38,7 @@ const CellGroup = ({ cell, row, table, header, testPrefix, coloredSortedColumn }
     ...(tableMeta?.cellStyles || {}),
     ...(meta?.cellStyles || {}),
   }
+  const content = <cell.column.columnDef.cell {...cell.getContext()} row={row} />
 
   return (
     <Flex
@@ -45,15 +54,113 @@ const CellGroup = ({ cell, row, table, header, testPrefix, coloredSortedColumn }
           backgroundOpacity: row.index % 2 === 0 ? "0.2" : "0.4",
         })}
       padding={[1.5, 2]}
+      alignItems={directCellContent ? cell.column.columnDef.align || "start" : undefined}
       {...cellStyles}
     >
-      <Flex flex width="100%" alignItems={cell.column.columnDef.align || "start"}>
-        <cell.column.columnDef.cell {...cell.getContext()} />
-      </Flex>
+      {directCellContent ? (
+        content
+      ) : (
+        <Flex flex width="100%" alignItems={cell.column.columnDef.align || "start"}>
+          {content}
+        </Flex>
+      )}
     </Flex>
   )
 }
 
+const alignment = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  baseline: "baseline",
+  stretch: "stretch",
+}
+
+const getFlexStyle = value => {
+  if (value === true) return "1 1 auto"
+  if (value === false) return "0 0 auto"
+  if (value === "grow") return "1 0 auto"
+  if (value === "shrink") return "0 1 auto"
+  if (typeof value === "number") return `${value} 0 auto`
+  return value
+}
+
+const getInlineCellStyles = (styles, theme) => {
+  const result = { ...styles }
+
+  if (styles.alignItems) result.alignItems = alignment[styles.alignItems] || styles.alignItems
+  if (styles.justifyContent) {
+    result.justifyContent = alignment[styles.justifyContent] || styles.justifyContent
+  }
+  if (styles.flex !== undefined) result.flex = getFlexStyle(styles.flex)
+  if (typeof styles.width === "number") {
+    result.width = `${styles.width * theme.constants.SIZE_SUB_UNIT}px`
+  }
+  if (typeof styles.height === "number") {
+    result.height = `${styles.height * theme.constants.SIZE_SUB_UNIT}px`
+  }
+  if (Array.isArray(styles.padding)) {
+    result.padding = styles.padding
+      .map(value => `${value * theme.constants.SIZE_SUB_UNIT}px`)
+      .join(" ")
+  }
+  if (styles.background) {
+    result.backgroundColor = styles.backgroundOpacity
+      ? getRgbColor(styles.background, styles.backgroundOpacity)({ theme })
+      : getColor(styles.background)({ theme })
+    delete result.background
+    delete result.backgroundOpacity
+  }
+
+  return result
+}
+
+const DirectCellGroup = ({ cell, row, table, header, testPrefix, coloredSortedColumn, theme }) => {
+  const { column } = cell
+  const tableMeta =
+    typeof column.columnDef.tableMeta === "function"
+      ? column.columnDef.tableMeta({}, column, row.index)
+      : column.columnDef.tableMeta
+  const meta =
+    typeof column.columnDef.meta === "function"
+      ? column.columnDef.meta({}, column, row.index)
+      : column.columnDef.meta
+  const cellStyles = getInlineCellStyles(
+    {
+      ...(tableMeta?.styles || {}),
+      ...(meta?.styles || {}),
+      ...(tableMeta?.cellStyles || {}),
+      ...(meta?.cellStyles || {}),
+    },
+    theme
+  )
+  const sorted = column.getCanSort() && coloredSortedColumn && column.getIsSorted()
+
+  return (
+    <div
+      data-testid={`netdata-table-cell-${cell.column.columnDef.id}${testPrefix}`}
+      style={{
+        display: "flex",
+        boxSizing: "border-box",
+        flex: getFlexStyle(
+          getColumnFlex(column, header, table.getState().columnSizing?.[column.id] != null)
+        ),
+        width: `${column.getSize()}px`,
+        position: "relative",
+        overflow: "hidden",
+        padding: `${theme.constants.SIZE_SUB_UNIT * 1.5}px ${theme.constants.SIZE_SUB_UNIT * 2}px`,
+        alignItems: alignment[column.columnDef.align] || "flex-start",
+        backgroundColor: sorted
+          ? getRgbColor("columnHighlight", row.index % 2 === 0 ? 0.2 : 0.4)({ theme })
+          : undefined,
+        ...cellStyles,
+      }}
+    >
+      <cell.column.columnDef.cell {...cell.getContext()} row={row} />
+    </div>
+  )
+}
+
 const rerenderSelector = state => ({
   sizing: state.columnSizing,
   expanded: state.expanded,
@@ -69,156 +176,284 @@ const StyledRow = styled(Flex)`
   }
 `
 
-export default memo(
-  ({
-    disableClickRow,
-    onClickRow,
-    row,
-    table,
-    testPrefix,
-    testPrefixCallback,
-    zIndex,
-    onHoverCell,
-    renderSubComponent,
-    GroupRow,
-    ...rest
-  }) => {
-    useTableState(rerenderSelector)
-
-    const isClickable = useMemo(() => {
-      if (typeof onClickRow !== "function") return false
-
-      return disableClickRow
-        ? !disableClickRow({ data: row.original, table: table, fullRow: row })
-        : true
-    }, [row, onClickRow])
-
-    return (
-      <StyledRow
-        data-testid={`netdata-table-row${testPrefix}${
-          testPrefixCallback ? "-" + testPrefixCallback(row.original) : ""
-        }`}
-        data-id={row.original?.id || row.id}
-        onClick={useCallback(
-          e => {
-            e.stopPropagation()
-
-            if (row.getCanExpand()) {
-              row.getToggleExpandedHandler()(e)
-            } else if (isClickable) {
-              onClickRow({ data: row.original, table: table, fullRow: row }, e)
-            }
-            setTimeout(() => e?.target?.scrollIntoView?.({ behavior: "auto", block: "nearest" }))
-          },
-          [isClickable, row, onClickRow]
+const DirectStyledRow = styled.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  background-color: ${getColor("mainBackground")};
+  border-bottom: 1px solid ${getColor("border")};
+
+  &:hover,
+  &:hover .row-content {
+    background: ${getColor("mainBackgroundHover")};
+  }
+`
+
+const TableRow = ({
+  disableClickRow,
+  onClickRow,
+  row: tableRow,
+  logicalIndex,
+  table,
+  testPrefix,
+  testPrefixCallback,
+  zIndex,
+  onHoverCell,
+  renderSubComponent,
+  GroupRow,
+  directCellContent,
+  ...rest
+}) => {
+  useTableState(rerenderSelector)
+  const theme = useTheme()
+  const row = useMemo(
+    () =>
+      logicalIndex == null || logicalIndex === tableRow.index
+        ? tableRow
+        : { ...tableRow, index: logicalIndex },
+    [logicalIndex, tableRow]
+  )
+
+  const isClickable = useMemo(() => {
+    if (typeof onClickRow !== "function") return false
+
+    return disableClickRow
+      ? !disableClickRow({ data: row.original, table: table, fullRow: row })
+      : true
+  }, [row, onClickRow])
+
+  const onClick = useCallback(
+    e => {
+      e.stopPropagation()
+
+      if (row.getCanExpand()) {
+        row.getToggleExpandedHandler()(e)
+      } else if (isClickable) {
+        onClickRow({ data: row.original, table: table, fullRow: row }, e)
+      }
+      setTimeout(() => e?.target?.scrollIntoView?.({ behavior: "auto", block: "nearest" }))
+    },
+    [isClickable, row, onClickRow]
+  )
+
+  const rowContent =
+    !!GroupRow && !!row.original.isGroup ? (
+      <GroupRow row={row} {...row.original} />
+    ) : directCellContent ? (
+      <div style={{ display: "flex", flex: "1 1 auto" }}>
+        {!!row.getLeftVisibleCells().length && (
+          <div
+            className="row-content"
+            style={{
+              display: "flex",
+              position: "sticky",
+              left: 0,
+              borderRight: `1px solid ${getColor("border")({ theme })}`,
+              zIndex: zIndex || 10,
+              flex: `0 0 ${table.getLeftTotalSize()}px`,
+              backgroundColor: getColor("mainBackground")({ theme }),
+            }}
+          >
+            {row.getLeftVisibleCells().map((cell, index) => (
+              <DirectCellGroup
+                cell={cell}
+                row={row}
+                table={table}
+                key={cell.id}
+                testPrefix={testPrefix}
+                header={table.getLeftLeafHeaders()[index]}
+                coloredSortedColumn={rest.coloredSortedColumn}
+                theme={theme}
+              />
+            ))}
+          </div>
         )}
-        cursor={isClickable ? "pointer" : "default"}
-        onMouseEnter={() => onHoverCell?.({ row: row.index })}
-        onMouseLeave={() => onHoverCell?.({ row: null })}
-        flex
-        column
-        background="mainBackground"
-        _hover={{
-          background: "mainBackgroundHover",
-        }}
-        border={{ side: "bottom" }}
-      >
-        {!!GroupRow && !!row.original.isGroup ? (
-          <GroupRow row={row} {...row.original} />
-        ) : (
-          <Flex flex>
-            {!!row.getLeftVisibleCells().length && (
-              <Flex
-                position="sticky"
-                left={0}
-                border={{ side: "right" }}
-                zIndex={zIndex || 10}
-                basis={`${table.getLeftTotalSize()}px`}
-                flex={false}
-                background="mainBackground"
-                _hover={{
-                  background: "mainBackgroundHover",
-                }}
-                className="row-content"
-              >
-                {row.getLeftVisibleCells().map((cell, index) => (
-                  <CellGroup
-                    cell={cell}
-                    row={row}
-                    table={table}
-                    key={cell.id}
-                    testPrefix={testPrefix}
-                    header={table.getLeftLeafHeaders()[index]}
-                    {...rest}
-                  />
-                ))}
-              </Flex>
-            )}
-            <Flex
-              width={`${table.getCenterTotalSize()}px`}
-              flex="grow"
-              background="mainBackground"
-              _hover={{
-                background: "mainBackgroundHover",
-              }}
-              className="row-content"
-            >
-              <Flex flex>
-                {row.getCenterVisibleCells().map((cell, index) => (
-                  <CellGroup
-                    cell={cell}
-                    row={row}
-                    table={table}
-                    key={cell.id}
-                    testPrefix={testPrefix}
-                    header={table.getCenterLeafHeaders()[index]}
-                    {...rest}
-                  />
-                ))}
-              </Flex>
-            </Flex>
-            {!!row.getRightVisibleCells().length && (
-              <Flex
-                position="sticky"
-                right={0}
-                border={{ side: "left" }}
-                zIndex={zIndex || 10}
-                basis={`${table.getRightTotalSize()}px`}
-                flex={false}
-                background="mainBackground"
-                _hover={{
-                  background: "mainBackgroundHover",
-                }}
-                rowReverse
-                className="row-content"
-              >
-                {row.getRightVisibleCells().map((cell, index) => (
-                  <CellGroup
-                    cell={cell}
-                    row={row}
-                    table={table}
-                    key={cell.id}
-                    testPrefix={testPrefix}
-                    header={table.getRightLeafHeaders()[index]}
-                    {...rest}
-                  />
-                ))}
-              </Flex>
-            )}
+        <div
+          className="row-content"
+          style={{
+            display: "flex",
+            width: `${table.getCenterTotalSize()}px`,
+            flex: "1 0 auto",
+            backgroundColor: getColor("mainBackground")({ theme }),
+          }}
+        >
+          {row.getCenterVisibleCells().map((cell, index) => (
+            <DirectCellGroup
+              cell={cell}
+              row={row}
+              table={table}
+              key={cell.id}
+              testPrefix={testPrefix}
+              header={table.getCenterLeafHeaders()[index]}
+              coloredSortedColumn={rest.coloredSortedColumn}
+              theme={theme}
+            />
+          ))}
+        </div>
+        {!!row.getRightVisibleCells().length && (
+          <div
+            className="row-content"
+            style={{
+              display: "flex",
+              position: "sticky",
+              right: 0,
+              borderLeft: `1px solid ${getColor("border")({ theme })}`,
+              zIndex: zIndex || 10,
+              flex: `0 0 ${table.getRightTotalSize()}px`,
+              flexDirection: "row-reverse",
+              backgroundColor: getColor("mainBackground")({ theme }),
+            }}
+          >
+            {row.getRightVisibleCells().map((cell, index) => (
+              <DirectCellGroup
+                cell={cell}
+                row={row}
+                table={table}
+                key={cell.id}
+                testPrefix={testPrefix}
+                header={table.getRightLeafHeaders()[index]}
+                coloredSortedColumn={rest.coloredSortedColumn}
+                theme={theme}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    ) : (
+      <Flex flex>
+        {!!row.getLeftVisibleCells().length && (
+          <Flex
+            position="sticky"
+            left={0}
+            border={{ side: "right" }}
+            zIndex={zIndex || 10}
+            basis={`${table.getLeftTotalSize()}px`}
+            flex={false}
+            background="mainBackground"
+            _hover={{
+              background: "mainBackgroundHover",
+            }}
+            className="row-content"
+          >
+            {row.getLeftVisibleCells().map((cell, index) => (
+              <CellGroup
+                cell={cell}
+                row={row}
+                table={table}
+                key={cell.id}
+                testPrefix={testPrefix}
+                header={table.getLeftLeafHeaders()[index]}
+                {...rest}
+              />
+            ))}
           </Flex>
         )}
-        {renderSubComponent && row.getIsExpanded() && !row.getIsGrouped() && (
+        <Flex
+          width={`${table.getCenterTotalSize()}px`}
+          flex="grow"
+          background="mainBackground"
+          _hover={{
+            background: "mainBackgroundHover",
+          }}
+          className="row-content"
+        >
+          <Flex flex>
+            {row.getCenterVisibleCells().map((cell, index) => (
+              <CellGroup
+                cell={cell}
+                row={row}
+                table={table}
+                key={cell.id}
+                testPrefix={testPrefix}
+                header={table.getCenterLeafHeaders()[index]}
+                {...rest}
+              />
+            ))}
+          </Flex>
+        </Flex>
+        {!!row.getRightVisibleCells().length && (
           <Flex
-            flex
-            data-testid={`netdata-table-sub-row${testPrefix}${
-              testPrefixCallback ? "-" + testPrefixCallback(row.original) : ""
-            }`}
-            onClick={e => e.stopPropagation()}
+            position="sticky"
+            right={0}
+            border={{ side: "left" }}
+            zIndex={zIndex || 10}
+            basis={`${table.getRightTotalSize()}px`}
+            flex={false}
+            background="mainBackground"
+            _hover={{
+              background: "mainBackgroundHover",
+            }}
+            rowReverse
+            className="row-content"
           >
-            {renderSubComponent({ data: row.original, table, fullRow: row })}
+            {row.getRightVisibleCells().map((cell, index) => (
+              <CellGroup
+                cell={cell}
+                row={row}
+                table={table}
+                key={cell.id}
+                testPrefix={testPrefix}
+                header={table.getRightLeafHeaders()[index]}
+                {...rest}
+              />
+            ))}
           </Flex>
         )}
-      </StyledRow>
+      </Flex>
     )
-  }
-)
+
+  const RowContainer = directCellContent ? DirectStyledRow : StyledRow
+
+  return (
+    <RowContainer
+      data-testid={`netdata-table-row${testPrefix}${
+        testPrefixCallback ? "-" + testPrefixCallback(row.original) : ""
+      }`}
+      data-id={row.original?.id || row.id}
+      onClick={onClick}
+      cursor={directCellContent ? undefined : isClickable ? "pointer" : "default"}
+      style={directCellContent ? { cursor: isClickable ? "pointer" : "default" } : undefined}
+      onMouseEnter={() => onHoverCell?.({ row: row.index })}
+      onMouseLeave={() => onHoverCell?.({ row: null })}
+      {...(!directCellContent && {
+        flex: true,
+        column: true,
+        background: "mainBackground",
+        _hover: { background: "mainBackgroundHover" },
+        border: { side: "bottom" },
+      })}
+    >
+      {rowContent}
+      {renderSubComponent && row.getIsExpanded() && !row.getIsGrouped() && (
+        <Flex
+          flex
+          data-testid={`netdata-table-sub-row${testPrefix}${
+            testPrefixCallback ? "-" + testPrefixCallback(row.original) : ""
+          }`}
+          onClick={e => e.stopPropagation()}
+        >
+          {renderSubComponent({ data: row.original, table, fullRow: row })}
+        </Flex>
+      )}
+    </RowContainer>
+  )
+}
+
+const sameTableRow = (previous, next) =>
+  previous === next ||
+  (previous?.id === next?.id &&
+    previous?.original === next?.original &&
+    previous?.depth === next?.depth &&
+    previous?.parentId === next?.parentId)
+
+export const areRowPropsEqual = (previous, next) => {
+  const previousKeys = Object.keys(previous)
+  const nextKeys = Object.keys(next)
+  if (previousKeys.length !== nextKeys.length) return false
+
+  return previousKeys.every(key =>
+    key === "row" ? sameTableRow(previous.row, next.row) : Object.is(previous[key], next[key])
+  )
+}
+
+export default memo(TableRow, areRowPropsEqual)
diff --git a/src/components/table/body/row.test.js b/src/components/table/body/row.test.js
new file mode 100644
index 000000000..6569b0a67
--- /dev/null
+++ b/src/components/table/body/row.test.js
@@ -0,0 +1,32 @@
+import { areRowPropsEqual } from "./row"
+
+describe("Table row memoization", () => {
+  const original = { id: "node-1" }
+  const makeRow = overrides => ({
+    id: "node-1",
+    original,
+    depth: 0,
+    parentId: undefined,
+    ...overrides,
+  })
+
+  it("keeps an overlapping logical row when only the TanStack wrapper changes", () => {
+    expect(
+      areRowPropsEqual(
+        { row: makeRow(), logicalIndex: 10, table: "table" },
+        { row: makeRow(), logicalIndex: 10, table: "table" }
+      )
+    ).toBe(true)
+  })
+
+  it("rerenders for changed data, hierarchy, logical position, or other props", () => {
+    const base = { row: makeRow(), logicalIndex: 10, table: "table" }
+
+    expect(areRowPropsEqual(base, { ...base, row: makeRow({ original: { id: "node-1" } }) })).toBe(
+      false
+    )
+    expect(areRowPropsEqual(base, { ...base, row: makeRow({ depth: 1 }) })).toBe(false)
+    expect(areRowPropsEqual(base, { ...base, logicalIndex: 11 })).toBe(false)
+    expect(areRowPropsEqual(base, { ...base, table: "next-table" })).toBe(false)
+  })
+})
diff --git a/src/components/table/body/rowMountController.js b/src/components/table/body/rowMountController.js
new file mode 100644
index 000000000..e8d9d5995
--- /dev/null
+++ b/src/components/table/body/rowMountController.js
@@ -0,0 +1,56 @@
+const rowMountIntervalMs = 24
+const rowMountBatchSize = 4
+
+export const createRowMountController = () => {
+  let scrolling = false
+  let timer = null
+  const scheduled = new Set()
+
+  const flush = () => {
+    timer = null
+    if (scrolling) return
+
+    const batch = [...scheduled].slice(0, rowMountBatchSize)
+    if (!batch.length) return
+
+    batch.forEach(entry => {
+      scheduled.delete(entry)
+      entry.callback()
+    })
+    start()
+  }
+
+  const start = () => {
+    if (scrolling || timer !== null || !scheduled.size) return
+    timer = setTimeout(flush, rowMountIntervalMs)
+  }
+
+  const setScrolling = next => {
+    const value = Boolean(next)
+    if (scrolling === value) return
+
+    scrolling = value
+    if (scrolling && timer !== null) {
+      clearTimeout(timer)
+      timer = null
+    } else {
+      start()
+    }
+  }
+
+  const schedule = callback => {
+    const entry = { callback }
+    scheduled.add(entry)
+    start()
+
+    return () => scheduled.delete(entry)
+  }
+
+  const dispose = () => {
+    if (timer !== null) clearTimeout(timer)
+    timer = null
+    scheduled.clear()
+  }
+
+  return { dispose, isScrolling: () => scrolling, schedule, setScrolling }
+}
diff --git a/src/components/table/body/rowMountController.test.js b/src/components/table/body/rowMountController.test.js
new file mode 100644
index 000000000..6f3d92683
--- /dev/null
+++ b/src/components/table/body/rowMountController.test.js
@@ -0,0 +1,60 @@
+import { createRowMountController } from "./rowMountController"
+
+describe("row mount controller", () => {
+  beforeEach(() => jest.useFakeTimers())
+  afterEach(() => jest.useRealTimers())
+
+  it("mounts four queued rows per interval", () => {
+    const controller = createRowMountController()
+    const first = jest.fn()
+    const second = jest.fn()
+    const third = jest.fn()
+    const fourth = jest.fn()
+    const fifth = jest.fn()
+
+    controller.schedule(first)
+    controller.schedule(second)
+    controller.schedule(third)
+    controller.schedule(fourth)
+    controller.schedule(fifth)
+
+    jest.advanceTimersByTime(23)
+    expect(first).not.toHaveBeenCalled()
+
+    jest.advanceTimersByTime(1)
+    expect(first).toHaveBeenCalledTimes(1)
+    expect(second).toHaveBeenCalledTimes(1)
+    expect(third).toHaveBeenCalledTimes(1)
+    expect(fourth).toHaveBeenCalledTimes(1)
+    expect(fifth).not.toHaveBeenCalled()
+
+    jest.advanceTimersByTime(24)
+    expect(fifth).toHaveBeenCalledTimes(1)
+  })
+
+  it("pauses queued mounts while scrolling", () => {
+    const controller = createRowMountController()
+    const callback = jest.fn()
+
+    controller.schedule(callback)
+    controller.setScrolling(true)
+    jest.advanceTimersByTime(1_000)
+    expect(callback).not.toHaveBeenCalled()
+
+    controller.setScrolling(false)
+    jest.advanceTimersByTime(24)
+    expect(callback).toHaveBeenCalledTimes(1)
+  })
+
+  it("cancels its timer and queued mounts when disposed", () => {
+    const controller = createRowMountController()
+    const callback = jest.fn()
+
+    controller.schedule(callback)
+    controller.dispose()
+    jest.advanceTimersByTime(1_000)
+
+    expect(callback).not.toHaveBeenCalled()
+    expect(jest.getTimerCount()).toBe(0)
+  })
+})
diff --git a/src/components/table/components/overflowTooltip.js b/src/components/table/components/overflowTooltip.js
new file mode 100644
index 000000000..3322dadd4
--- /dev/null
+++ b/src/components/table/components/overflowTooltip.js
@@ -0,0 +1,163 @@
+import React, { useCallback, useEffect, useRef, useState } from "react"
+import Drop from "@/components/drops/drop"
+import Container from "@/components/drops/container"
+import dropAlignMap from "@/components/drops/mixins/dropAlignMap"
+
+const defaultSelector = "[data-overflow-tooltip]"
+const defaultGetContent = target => target.dataset.overflowTooltip
+const targetConnectivityCheckIntervalMs = 100
+
+const getTarget = (container, origin, selector, includeDescendant = false) => {
+  if (!(origin instanceof Element)) return null
+
+  const closest = origin.closest(selector)
+  if (closest && container.contains(closest)) return closest
+
+  if (!includeDescendant) return null
+  const nested = origin.querySelector(selector)
+  return nested && container.contains(nested) ? nested : null
+}
+
+const defaultIsOverflowing = target =>
+  target.scrollWidth > target.clientWidth || target.scrollHeight > target.clientHeight
+
+const OverflowTooltip = ({ containerRef, options = {} }) => {
+  const {
+    align = "bottom",
+    closeOnWindowScroll = false,
+    delay = 0,
+    getContent = defaultGetContent,
+    isOverflowing = defaultIsOverflowing,
+    renderContent,
+    selector = defaultSelector,
+    zIndex = 80,
+  } = options
+  const [active, setActive] = useState(null)
+  const activeRef = useRef(null)
+  const pendingTargetRef = useRef(null)
+  const timeoutRef = useRef()
+
+  const clearPending = useCallback(() => {
+    if (timeoutRef.current === undefined) return
+    clearTimeout(timeoutRef.current)
+    timeoutRef.current = undefined
+    pendingTargetRef.current = null
+  }, [])
+
+  const close = useCallback(() => {
+    clearPending()
+    if (!activeRef.current) return
+    activeRef.current = null
+    setActive(null)
+  }, [clearPending])
+
+  const open = useCallback(
+    (target, immediate = false) => {
+      if (activeRef.current?.target === target) return
+      if (!immediate && pendingTargetRef.current === target) return
+      clearPending()
+      if (!target || !isOverflowing(target)) {
+        close()
+        return
+      }
+
+      const content = getContent(target)
+      if (!content) {
+        close()
+        return
+      }
+
+      const activate = () => {
+        timeoutRef.current = undefined
+        pendingTargetRef.current = null
+        const currentContent = getContent(target)
+        if (!target.isConnected || !currentContent || !isOverflowing(target)) return
+        if (activeRef.current?.target === target && activeRef.current.content === currentContent)
+          return
+
+        const next = { content: currentContent, target }
+        activeRef.current = next
+        setActive(next)
+      }
+
+      if (delay && !immediate) {
+        if (activeRef.current?.target !== target) close()
+        pendingTargetRef.current = target
+        timeoutRef.current = setTimeout(activate, delay)
+      } else {
+        activate()
+      }
+    },
+    [clearPending, close, delay, getContent, isOverflowing]
+  )
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return undefined
+
+    const onMouseOver = event => open(getTarget(container, event.target, selector))
+    const onMouseOut = event => {
+      const target = getTarget(container, event.target, selector)
+      if (target?.contains(event.relatedTarget)) return
+      close()
+    }
+    const onFocusIn = event => open(getTarget(container, event.target, selector, true), true)
+    const onFocusOut = event => {
+      const target = getTarget(container, event.target, selector, true)
+      if (target?.contains(event.relatedTarget)) return
+      close()
+    }
+
+    container.addEventListener("mouseover", onMouseOver)
+    container.addEventListener("mouseout", onMouseOut)
+    container.addEventListener("focusin", onFocusIn)
+    container.addEventListener("focusout", onFocusOut)
+    container.addEventListener("scroll", close, { capture: true, passive: true })
+    if (closeOnWindowScroll) {
+      window.addEventListener("scroll", close, { capture: true, passive: true })
+    }
+    window.addEventListener("resize", close, { passive: true })
+
+    return () => {
+      clearPending()
+      container.removeEventListener("mouseover", onMouseOver)
+      container.removeEventListener("mouseout", onMouseOut)
+      container.removeEventListener("focusin", onFocusIn)
+      container.removeEventListener("focusout", onFocusOut)
+      container.removeEventListener("scroll", close, true)
+      if (closeOnWindowScroll) window.removeEventListener("scroll", close, true)
+      window.removeEventListener("resize", close)
+    }
+  }, [clearPending, close, closeOnWindowScroll, containerRef, open, selector])
+
+  useEffect(() => {
+    if (!active) return undefined
+
+    const interval = setInterval(() => {
+      if (!active.target.isConnected) close()
+    }, targetConnectivityCheckIntervalMs)
+
+    return () => clearInterval(interval)
+  }, [active, close])
+
+  if (!active?.target.isConnected) return null
+
+  return (
+    <Drop
+      target={active.target}
+      align={dropAlignMap[align]}
+      stretch={false}
+      zIndex={zIndex}
+      onEsc={close}
+      noEvents
+    >
+      {renderContent ? (
+        renderContent(active.content)
+      ) : (
+        <Container align={align}>{active.content}</Container>
+      )}
+    </Drop>
+  )
+}
+
+export default OverflowTooltip
diff --git a/src/components/table/components/overflowTooltip.test.js b/src/components/table/components/overflowTooltip.test.js
new file mode 100644
index 000000000..d297c89a5
--- /dev/null
+++ b/src/components/table/components/overflowTooltip.test.js
@@ -0,0 +1,198 @@
+import React, { useRef } from "react"
+import { act, fireEvent, renderWithProviders } from "testUtilities"
+import OverflowTooltip from "./overflowTooltip"
+
+const setDimensions = (
+  target,
+  { clientHeight = 16, clientWidth = 100, scrollHeight = 16, scrollWidth = 200 } = {}
+) => {
+  Object.defineProperties(target, {
+    clientHeight: { configurable: true, value: clientHeight },
+    clientWidth: { configurable: true, value: clientWidth },
+    scrollHeight: { configurable: true, value: scrollHeight },
+    scrollWidth: { configurable: true, value: scrollWidth },
+  })
+}
+
+const renderContent = content => <span>{content}</span>
+
+const Fixture = ({ delay = 0, options = {} }) => {
+  const ref = useRef()
+
+  return (
+    <>
+      <div ref={ref} data-testid="container">
+        <span data-overflow-tooltip="Complete value" data-testid="target">
+          Cropped value
+        </span>
+      </div>
+      <OverflowTooltip containerRef={ref} options={{ delay, renderContent, ...options }} />
+    </>
+  )
+}
+
+it("does not measure the target while rendering", () => {
+  const scrollWidth = jest.spyOn(HTMLElement.prototype, "scrollWidth", "get")
+
+  renderWithProviders(<Fixture />)
+
+  expect(scrollWidth).not.toHaveBeenCalled()
+  scrollWidth.mockRestore()
+})
+
+it("shows the tooltip only for overflowing content", () => {
+  const { getByTestId, queryByText } = renderWithProviders(<Fixture />)
+  const target = getByTestId("target")
+
+  setDimensions(target)
+  fireEvent.mouseOver(target)
+  expect(queryByText("Complete value")).toBeInTheDocument()
+
+  fireEvent.mouseOut(target)
+  expect(queryByText("Complete value")).not.toBeInTheDocument()
+
+  setDimensions(target, { scrollWidth: 100 })
+  fireEvent.mouseOver(target)
+  expect(queryByText("Complete value")).not.toBeInTheDocument()
+})
+
+it("waits for the configured hover delay", () => {
+  jest.useFakeTimers()
+  const { getByTestId, queryByText } = renderWithProviders(<Fixture delay={600} />)
+  const target = getByTestId("target")
+
+  setDimensions(target)
+  fireEvent.mouseOver(target)
+  expect(queryByText("Complete value")).not.toBeInTheDocument()
+
+  act(() => jest.advanceTimersByTime(600))
+  expect(queryByText("Complete value")).toBeInTheDocument()
+  jest.useRealTimers()
+})
+
+it("cancels pending and visible tooltips when the table scrolls", () => {
+  jest.useFakeTimers()
+  const { getByTestId, queryByText } = renderWithProviders(<Fixture delay={600} />)
+  const container = getByTestId("container")
+  const target = getByTestId("target")
+
+  setDimensions(target)
+  fireEvent.mouseOver(target)
+  fireEvent.scroll(container)
+  act(() => jest.advanceTimersByTime(600))
+  expect(queryByText("Complete value")).not.toBeInTheDocument()
+
+  fireEvent.focus(target)
+  expect(queryByText("Complete value")).toBeInTheDocument()
+  fireEvent.scroll(container)
+  expect(queryByText("Complete value")).not.toBeInTheDocument()
+  jest.useRealTimers()
+})
+
+it("closes a visible tooltip when the viewport resizes", () => {
+  const { getByTestId, queryByText } = renderWithProviders(<Fixture />)
+  const target = getByTestId("target")
+
+  setDimensions(target)
+  fireEvent.focus(target)
+  expect(queryByText("Complete value")).toBeInTheDocument()
+
+  fireEvent(window, new Event("resize"))
+  expect(queryByText("Complete value")).not.toBeInTheDocument()
+})
+
+it("closes a visible tooltip on window scroll when configured", () => {
+  const { getByTestId, queryByText } = renderWithProviders(
+    <Fixture options={{ closeOnWindowScroll: true }} />
+  )
+  const target = getByTestId("target")
+
+  setDimensions(target)
+  fireEvent.focus(target)
+  expect(queryByText("Complete value")).toBeInTheDocument()
+
+  fireEvent.scroll(window)
+  expect(queryByText("Complete value")).not.toBeInTheDocument()
+})
+
+it("does not resolve an unrelated descendant while hovering the table container", () => {
+  const { getByTestId, queryByText } = renderWithProviders(<Fixture />)
+
+  setDimensions(getByTestId("target"))
+  fireEvent.mouseOver(getByTestId("container"))
+  expect(queryByText("Complete value")).not.toBeInTheDocument()
+})
+
+it("finds an overflowing descendant when its link receives focus", () => {
+  const FocusFixture = () => {
+    const ref = useRef()
+    return (
+      <>
+        <div ref={ref}>
+          <a href="#target" data-testid="link">
+            <span data-overflow-tooltip="Complete value" data-testid="target">
+              Cropped value
+            </span>
+          </a>
+        </div>
+        <OverflowTooltip containerRef={ref} options={{ delay: 600, renderContent }} />
+      </>
+    )
+  }
+  const { getByTestId, queryByText } = renderWithProviders(<FocusFixture />)
+
+  setDimensions(getByTestId("target"))
+  fireEvent.focus(getByTestId("link"))
+  expect(queryByText("Complete value")).toBeInTheDocument()
+})
+
+it("supports custom targets, content resolution, and overflow detection", () => {
+  const HeaderFixture = () => {
+    const ref = useRef()
+    return (
+      <>
+        <div ref={ref}>
+          <span data-table-header-tooltip="Canonical header" data-testid="header">
+            <span data-testid="headerText">Cropped header</span>
+          </span>
+        </div>
+        <OverflowTooltip
+          containerRef={ref}
+          options={{
+            getContent: target => target.dataset.tableHeaderTooltip,
+            isOverflowing: target =>
+              [target, ...target.querySelectorAll("*")].some(
+                element =>
+                  element.scrollWidth > element.clientWidth ||
+                  element.scrollHeight > element.clientHeight
+              ),
+            renderContent,
+            selector: "[data-table-header-tooltip]",
+          }}
+        />
+      </>
+    )
+  }
+  const { getByTestId, queryByText } = renderWithProviders(<HeaderFixture />)
+
+  setDimensions(getByTestId("header"), { scrollWidth: 100 })
+  setDimensions(getByTestId("headerText"))
+  fireEvent.mouseOver(getByTestId("headerText"))
+
+  expect(queryByText("Canonical header")).toBeInTheDocument()
+})
+
+it("removes a visible tooltip when its target disconnects without a controller render", () => {
+  jest.useFakeTimers()
+  const { getByTestId, queryByText } = renderWithProviders(<Fixture />)
+  const target = getByTestId("target")
+
+  setDimensions(target)
+  fireEvent.focus(target)
+  expect(queryByText("Complete value")).toBeInTheDocument()
+
+  target.remove()
+  act(() => jest.advanceTimersByTime(100))
+  expect(queryByText("Complete value")).not.toBeInTheDocument()
+  jest.useRealTimers()
+})
diff --git a/src/components/table/createLargeDataSource.js b/src/components/table/createLargeDataSource.js
new file mode 100644
index 000000000..fc1a6a460
--- /dev/null
+++ b/src/components/table/createLargeDataSource.js
@@ -0,0 +1,229 @@
+import {
+  filterFns as defaultFilterFns,
+  sortingFns as defaultSortingFns,
+} from "@tanstack/react-table"
+
+const getPathValue = (value, path) =>
+  path.split(".").reduce((current, key) => current?.[key], value)
+
+const getColumnsById = columns => {
+  const byId = new Map()
+
+  const addColumns = items => {
+    items.forEach(column => {
+      if (column.id) byId.set(column.id, column)
+      if (column.columns) addColumns(column.columns)
+    })
+  }
+
+  addColumns(columns)
+  return byId
+}
+
+const getColumnValue = (row, index, column) => {
+  if (column.accessorFn) return column.accessorFn(row, index)
+  if (column.accessorKey) return getPathValue(row, column.accessorKey)
+  return row?.[column.id]
+}
+
+const getAutoSortingFn = (rows, column) => {
+  let isString = false
+
+  for (let index = 10; index < rows.length; index += 1) {
+    const value = getColumnValue(rows[index], index, column)
+    if (Object.prototype.toString.call(value) === "[object Date]") {
+      return defaultSortingFns.datetime
+    }
+    if (typeof value !== "string") continue
+    isString = true
+    if (/([0-9]+)/.test(value)) return defaultSortingFns.alphanumeric
+  }
+
+  return isString ? defaultSortingFns.text : defaultSortingFns.basic
+}
+
+const createRowAdapter = columnsById => ({
+  index: 0,
+  original: null,
+  subRows: [],
+  getValue(columnId) {
+    return getColumnValue(this.original, this.index, columnsById.get(columnId))
+  },
+})
+
+const getAutoFilterFn = (rows, column) => {
+  const value = getColumnValue(rows[0], 0, column)
+
+  if (typeof value === "string") return defaultFilterFns.includesString
+  if (typeof value === "number") return defaultFilterFns.inNumberRange
+  if (typeof value === "boolean") return defaultFilterFns.equals
+  if (Array.isArray(value)) return defaultFilterFns.arrIncludes
+  if (value !== null && typeof value === "object") return defaultFilterFns.equals
+  return defaultFilterFns.weakEquals
+}
+
+const filterRows = ({ rows, columnFilters, columnsById, filterFns }) => {
+  if (!columnFilters?.length) return rows
+
+  const filters = columnFilters
+    .map(({ id, value }) => {
+      const column = columnsById.get(id)
+      if (!column) return null
+
+      const filterFn =
+        typeof column.filterFn === "function"
+          ? column.filterFn
+          : column.filterFn === "auto" || !column.filterFn
+            ? getAutoFilterFn(rows, column)
+            : filterFns[column.filterFn] || defaultFilterFns[column.filterFn]
+
+      return filterFn
+        ? {
+            filterFn,
+            id,
+            value: filterFn.resolveFilterValue?.(value) ?? value,
+          }
+        : null
+    })
+    .filter(Boolean)
+
+  if (!filters.length) return rows
+
+  const rowAdapter = createRowAdapter(columnsById)
+  return rows.filter((row, index) => {
+    rowAdapter.index = index
+    rowAdapter.original = row
+    return filters.every(({ filterFn, id, value }) => filterFn(rowAdapter, id, value))
+  })
+}
+
+const sortRows = ({ rows, sorting, columnsById, sortingFns }) => {
+  if (!sorting?.length || rows.length < 2) return rows
+
+  const availableSorting = sorting
+    .map(entry => ({ entry, column: columnsById.get(entry.id) }))
+    .filter(({ column }) => column && column.enableSorting !== false)
+
+  if (!availableSorting.length) return rows
+
+  const columnInfo = availableSorting.map(({ entry, column }) => ({
+    entry,
+    column,
+    sortUndefined: column.sortUndefined ?? 1,
+    sortingFn:
+      typeof column.sortingFn === "function"
+        ? column.sortingFn
+        : column.sortingFn === "auto" || !column.sortingFn
+          ? getAutoSortingFn(rows, column)
+          : sortingFns[column.sortingFn] || defaultSortingFns[column.sortingFn],
+  }))
+  const left = createRowAdapter(columnsById)
+  const right = createRowAdapter(columnsById)
+  const indexedRows = rows.map((row, index) => ({ index, row }))
+
+  indexedRows.sort((a, b) => {
+    left.index = a.index
+    left.original = a.row
+    right.index = b.index
+    right.original = b.row
+
+    for (let index = 0; index < columnInfo.length; index += 1) {
+      const { entry, column, sortUndefined, sortingFn } = columnInfo[index]
+      const aValue = left.getValue(entry.id)
+      const bValue = right.getValue(entry.id)
+      let result = 0
+
+      if (sortUndefined && (aValue === undefined || bValue === undefined)) {
+        if (sortUndefined === "first") return aValue === undefined ? -1 : 1
+        if (sortUndefined === "last") return aValue === undefined ? 1 : -1
+        result =
+          aValue === undefined && bValue === undefined
+            ? 0
+            : aValue === undefined
+              ? sortUndefined
+              : -sortUndefined
+      }
+
+      if (result === 0) result = sortingFn(left, right, entry.id)
+      if (result === 0) continue
+      if (entry.desc) result *= -1
+      if (column.invertSorting) result *= -1
+      return result
+    }
+
+    return a.index - b.index
+  })
+
+  return indexedRows.map(({ row }) => row)
+}
+
+export default ({
+  columns,
+  columnFilters,
+  data,
+  expanded,
+  filterRow,
+  filterFns = {},
+  getEstimatedRowHeight,
+  getRowId,
+  sorting,
+  sortingFns = {},
+}) => {
+  const columnsById = getColumnsById(columns)
+  const displayRows = []
+  const displayIds = []
+  const exportRows = []
+  const exportIds = []
+  const lastDisplayIndexById = new Map()
+  const nearestDisplayIndexById = new Map()
+
+  const forEachRow = (items, callback) => {
+    items.forEach((row, index) => {
+      callback(row, getRowId(row, index))
+      if (row.children?.length) forEachRow(row.children, callback)
+    })
+  }
+
+  const appendRows = (rows, visible, visibleAncestorIndex = -1) => {
+    sortRows({ rows, sorting, columnsById, sortingFns }).forEach((row, index) => {
+      const id = getRowId(row, index)
+      exportRows.push(row)
+      exportIds.push(id)
+      let displayIndex = visibleAncestorIndex
+      if (visible) {
+        displayRows.push(row)
+        displayIds.push(id)
+        displayIndex = displayRows.length - 1
+      }
+      nearestDisplayIndexById.set(id, displayIndex)
+      if (row.children?.length) {
+        appendRows(
+          row.children,
+          visible && (expanded === true || Boolean(expanded?.[id])),
+          displayIndex
+        )
+      }
+      if (visible) lastDisplayIndexById.set(id, displayRows.length - 1)
+    })
+  }
+
+  const columnFilteredRows = filterRows({ rows: data, columnFilters, columnsById, filterFns })
+  appendRows(filterRow ? columnFilteredRows.filter(filterRow) : columnFilteredRows, true)
+
+  const displayIndexById = new Map(displayIds.map((id, index) => [id, index]))
+
+  return {
+    forEachExportRow: callback =>
+      exportRows.forEach((row, index) => callback(row, exportIds[index])),
+    forEachRow: callback => forEachRow(data, callback),
+    getDisplayIndex: (id, { leaf = false } = {}) =>
+      (leaf ? lastDisplayIndexById : displayIndexById).get(id) ??
+      nearestDisplayIndexById.get(id) ??
+      -1,
+    getEstimatedRowHeight: index => getEstimatedRowHeight?.(displayRows[index], index),
+    getFlatRowCount: () => exportRows.length,
+    getRow: index => displayRows[index],
+    getRowCount: () => displayRows.length,
+    getRowId: index => displayIds[index],
+  }
+}
diff --git a/src/components/table/createLargeDataSource.test.js b/src/components/table/createLargeDataSource.test.js
new file mode 100644
index 000000000..b792541c0
--- /dev/null
+++ b/src/components/table/createLargeDataSource.test.js
@@ -0,0 +1,210 @@
+import createLargeDataSource from "./createLargeDataSource"
+import {
+  createTable,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getSortedRowModel,
+} from "@tanstack/react-table"
+
+const columns = [
+  { id: "name", accessorKey: "name", sortingFn: "basic" },
+  {
+    id: "score",
+    accessorKey: "score",
+    sortingFn: (left, right) => left.original.score - right.original.score,
+  },
+]
+
+const data = [
+  {
+    id: "group-b",
+    name: "Group B",
+    isGroup: true,
+    children: [
+      { id: "node-b", name: "Beta", score: 2 },
+      { id: "node-a", name: "Alpha", score: 1 },
+    ],
+  },
+  { id: "node-c", name: "Charlie", score: 3 },
+]
+
+describe("createLargeDataSource", () => {
+  it("owns complete sorting and expansion while exposing a flat display index", () => {
+    const source = createLargeDataSource({
+      columns,
+      data,
+      expanded: { "group-b": true },
+      getRowId: row => row.id,
+      sorting: [{ id: "name", desc: false }],
+    })
+
+    expect(source.getRowCount()).toBe(4)
+    expect(Array.from({ length: 4 }, (_, index) => source.getRowId(index))).toEqual([
+      "node-c",
+      "group-b",
+      "node-a",
+      "node-b",
+    ])
+    expect(source.getDisplayIndex("node-a")).toBe(2)
+    expect(source.getDisplayIndex("group-b", { leaf: true })).toBe(3)
+  })
+
+  it("keeps collapsed descendants available to complete export", () => {
+    const source = createLargeDataSource({
+      columns,
+      data,
+      expanded: {},
+      getRowId: row => row.id,
+      sorting: [{ id: "score", desc: true }],
+    })
+    const exported = []
+
+    source.forEachExportRow(row => exported.push(row.id))
+
+    expect(source.getRowCount()).toBe(2)
+    expect(source.getDisplayIndex("node-a")).toBe(0)
+    expect(exported).toEqual(["group-b", "node-b", "node-a", "node-c"])
+  })
+
+  it("matches TanStack sorting, expansion, and flat export order", () => {
+    const sorting = [
+      { id: "name", desc: false },
+      { id: "score", desc: true },
+    ]
+    const expanded = { "group-b": true }
+    const table = createTable({
+      columns,
+      data,
+      expanded,
+      getCoreRowModel: getCoreRowModel(),
+      getExpandedRowModel: getExpandedRowModel(),
+      getRowId: row => row.id,
+      getSortedRowModel: getSortedRowModel(),
+      getSubRows: row => row.children,
+      onStateChange: () => {},
+      renderFallbackValue: null,
+      state: { expanded, sorting },
+    })
+    const source = createLargeDataSource({
+      columns,
+      data,
+      expanded,
+      getRowId: row => row.id,
+      sorting,
+    })
+    const exported = []
+    source.forEachExportRow(row => exported.push(row.id))
+
+    expect(
+      Array.from({ length: source.getRowCount() }, (_, index) => source.getRowId(index))
+    ).toEqual(table.getRowModel().rows.map(row => row.id))
+    expect(exported).toEqual(table.getRowModel().flatRows.map(row => row.id))
+  })
+
+  it("matches TanStack default undefined-value ordering", () => {
+    const sparseData = [
+      { id: "missing" },
+      { id: "beta", name: "Beta" },
+      { id: "alpha", name: "Alpha" },
+    ]
+    const sorting = [{ id: "name", desc: false }]
+    const sparseColumns = [{ id: "name", accessorKey: "name", sortingFn: "alphanumeric" }]
+    const source = createLargeDataSource({
+      columns: sparseColumns,
+      data: sparseData,
+      getRowId: row => row.id,
+      sorting,
+    })
+    const table = createTable({
+      columns: sparseColumns,
+      data: sparseData,
+      getCoreRowModel: getCoreRowModel(),
+      getRowId: row => row.id,
+      getSortedRowModel: getSortedRowModel(),
+      onStateChange: () => {},
+      renderFallbackValue: null,
+      state: { sorting },
+    })
+
+    const tableIds = table.getRowModel().rows.map(row => row.id)
+    const sourceIds = Array.from({ length: source.getRowCount() }, (_, index) =>
+      source.getRowId(index)
+    )
+
+    expect(tableIds).toEqual(["alpha", "beta", "missing"])
+    expect(sourceIds).toEqual(tableIds)
+  })
+
+  it("keeps complete row identity while filtering display and export rows", () => {
+    const source = createLargeDataSource({
+      columns,
+      data: [
+        { id: "hidden", name: "Hidden", score: 1 },
+        { id: "visible", name: "Visible", score: 2 },
+      ],
+      filterRow: row => row.id === "visible",
+      getRowId: row => row.id,
+    })
+    const allIds = []
+    const exportIds = []
+
+    source.forEachRow((_, id) => allIds.push(id))
+    source.forEachExportRow((_, id) => exportIds.push(id))
+
+    expect(allIds).toEqual(["hidden", "visible"])
+    expect(exportIds).toEqual(["visible"])
+    expect(source.getFlatRowCount()).toBe(1)
+    expect(source.getRowCount()).toBe(1)
+  })
+
+  it("applies existing column filter predicates before sorting and publication", () => {
+    const source = createLargeDataSource({
+      columns: [
+        {
+          id: "state",
+          accessorKey: "state",
+          filterFn: (row, id, values) => values.includes(row.getValue(id)),
+        },
+      ],
+      columnFilters: [{ id: "state", value: ["live"] }],
+      data: [
+        { id: "stale", state: "stale" },
+        { id: "live", state: "live" },
+      ],
+      getRowId: row => row.id,
+    })
+
+    expect(source.getRowCount()).toBe(1)
+    expect(source.getRowId(0)).toBe("live")
+  })
+
+  it("matches TanStack automatic column filtering", () => {
+    const source = createLargeDataSource({
+      columns: [{ id: "name", accessorKey: "name" }],
+      columnFilters: [{ id: "name", value: "alp" }],
+      data: [
+        { id: "alpha", name: "Alpha" },
+        { id: "beta", name: "Beta" },
+      ],
+      getRowId: row => row.id,
+    })
+
+    expect(source.getRowCount()).toBe(1)
+    expect(source.getRowId(0)).toBe("alpha")
+  })
+
+  it("uses array membership filtering for array-valued columns", () => {
+    const source = createLargeDataSource({
+      columns: [{ id: "roles", accessorKey: "roles" }],
+      columnFilters: [{ id: "roles", value: "admin" }],
+      data: [
+        { id: "admin", roles: ["admin", "viewer"] },
+        { id: "viewer", roles: ["viewer"] },
+      ],
+      getRowId: row => row.id,
+    })
+
+    expect(source.getRowCount()).toBe(1)
+    expect(source.getRowId(0)).toBe("admin")
+  })
+})
diff --git a/src/components/table/header/actions/index.js b/src/components/table/header/actions/index.js
index 8051f1349..e133aedb0 100644
--- a/src/components/table/header/actions/index.js
+++ b/src/components/table/header/actions/index.js
@@ -14,18 +14,18 @@ const useSelectedRowsObserver = (table, { onRowSelected = noop, rowSelection })
   const [selectedRows, setActualSelectedRows] = useState([])
 
   useEffect(() => {
-    const { flatRows } = table.getSelectedRowModel()
-    if (flatRows) {
-      const selected = flatRows.reduce((acc, { original }) => {
-        if (original?.disabled || original?.unselectable) return acc
+    const selected = table.getSelectedOriginalRows
+      ? table.getSelectedOriginalRows()
+      : table.getSelectedRowModel().flatRows.reduce((acc, { original }) => {
+          if (original?.disabled || original?.unselectable) return acc
 
-        acc.push(original)
-        return acc
-      }, [])
-      setActualSelectedRows(selected)
-      onRowSelected(selected)
-    }
-  }, [rowSelection, table])
+          acc.push(original)
+          return acc
+        }, [])
+
+    setActualSelectedRows(selected)
+    onRowSelected(selected)
+  }, [rowSelection, table, table.largeDataSource])
 
   return selectedRows
 }
diff --git a/src/components/table/headerOverflowTooltip.test.js b/src/components/table/headerOverflowTooltip.test.js
new file mode 100644
index 000000000..5bd122ed6
--- /dev/null
+++ b/src/components/table/headerOverflowTooltip.test.js
@@ -0,0 +1,36 @@
+import React from "react"
+import { renderWithProviders, waitFor } from "testUtilities"
+import Table from "./table"
+
+it("publishes canonical overflow content without replacing column drag handles", async () => {
+  const { container } = renderWithProviders(
+    <Table
+      data={[]}
+      dataColumns={[
+        {
+          id: "dynamic",
+          accessorKey: "dynamic",
+          header: <span>XYZ…</span>,
+          headerString: () => "XYZ complete dynamic column name",
+        },
+        {
+          id: "literal",
+          accessorKey: "literal",
+          header: "Complete literal column name",
+        },
+      ]}
+      enableColumnReordering
+    />
+  )
+
+  await waitFor(() => {
+    expect(
+      container.querySelector('[data-table-header-tooltip="XYZ complete dynamic column name"]')
+    ).toBeInTheDocument()
+    expect(
+      container.querySelector('[data-table-header-tooltip="Complete literal column name"]')
+    ).toBeInTheDocument()
+    expect(container.querySelectorAll(".drag-handle[role=button]")).toHaveLength(2)
+    expect(container.querySelectorAll("[data-table-header-tooltip] .drag-handle")).toHaveLength(0)
+  })
+})
diff --git a/src/components/table/helpers/downloadCsv.js b/src/components/table/helpers/downloadCsv.js
index a063d0726..679ff42c2 100644
--- a/src/components/table/helpers/downloadCsv.js
+++ b/src/components/table/helpers/downloadCsv.js
@@ -15,6 +15,28 @@ const escapeForCSV = value => {
 const convertToCSV = data =>
   data.reduce((h, row) => h + row.map(v => escapeForCSV(formatValue(v))).join(",") + "\n", "")
 
+const getPathValue = (value, path) =>
+  path.split(".").reduce((current, key) => current?.[key], value)
+
+const createExportRow = (original, index, headers, columnsById) => {
+  const row = {
+    index,
+    original,
+    getValue: columnId => {
+      const column = columnsById.get(columnId)
+      const { accessorFn, accessorKey } = column?.columnDef || {}
+      if (accessorFn) return accessorFn(original, index)
+      if (accessorKey) return getPathValue(original, accessorKey)
+      return original?.[columnId]
+    },
+  }
+
+  row.getAllCells = () =>
+    headers.map(header => ({ column: header.column, row, getValue: () => row.getValue(header.id) }))
+
+  return row
+}
+
 export default (name = "netdata") =>
   (_, table) => {
     const headers = table
@@ -22,6 +44,7 @@ export default (name = "netdata") =>
       .filter(
         header => !header.subHeaders?.length && header.id !== "checkbox" && header.id !== "actions"
       )
+    const columnsById = new Map(headers.map(header => [header.id, header.column]))
 
     let data = [
       headers.map(header => {
@@ -39,7 +62,7 @@ export default (name = "netdata") =>
         return parentLabel ? `${parentLabel} ${label}` : label
       }),
     ]
-    table.getRowModel().rows.forEach(row =>
+    const appendRow = row =>
       data.push(
         headers.map(header => {
           const value = row.getValue(header.id)
@@ -53,7 +76,16 @@ export default (name = "netdata") =>
           return header.column.columnDef.renderString(cell.row)
         })
       )
-    )
+
+    if (table.forEachExportRow) {
+      let index = 0
+      table.forEachExportRow(original => {
+        appendRow(createExportRow(original, index, headers, columnsById))
+        index += 1
+      })
+    } else {
+      table.getRowModel().rows.forEach(appendRow)
+    }
 
     const url = window.URL.createObjectURL(
       new Blob([convertToCSV(data)], { type: "text/csv;charset=utf-8;" })
diff --git a/src/components/table/helpers/downloadCsv.test.js b/src/components/table/helpers/downloadCsv.test.js
new file mode 100644
index 000000000..69a4b7680
--- /dev/null
+++ b/src/components/table/helpers/downloadCsv.test.js
@@ -0,0 +1,30 @@
+import downloadCsvAction from "./downloadCsv"
+
+describe("downloadCsvAction", () => {
+  beforeEach(() => {
+    window.URL.createObjectURL = jest.fn(() => "blob:csv")
+    HTMLAnchorElement.prototype.click = jest.fn()
+  })
+
+  it("exports every logical row without requesting the rendered row model", () => {
+    const rows = [
+      { id: "a", name: "Alpha" },
+      { id: "b", name: "Beta" },
+    ]
+    const column = {
+      id: "name",
+      parent: null,
+      columnDef: { accessorKey: "name", headerString: () => "Name" },
+    }
+    const table = {
+      forEachExportRow: callback => rows.forEach(callback),
+      getFlatHeaders: () => [{ id: "name", subHeaders: [], column }],
+      getRowModel: jest.fn(),
+    }
+
+    downloadCsvAction("nodes")(null, table)
+
+    expect(table.getRowModel).not.toHaveBeenCalled()
+    expect(window.URL.createObjectURL).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/src/components/table/index.d.ts b/src/components/table/index.d.ts
index 8fded3d31..dc35ca7d0 100644
--- a/src/components/table/index.d.ts
+++ b/src/components/table/index.d.ts
@@ -1,16 +1,87 @@
 import {
   ColumnDef,
   FilterFnOption,
+  ColumnFiltersState,
   PaginationState,
   ColumnPinningState,
   VisibilityTableState,
   Table,
+  Row,
 } from "@tanstack/table-core"
+import { ComponentType, Key, MutableRefObject, ReactNode, RefObject, UIEventHandler } from "react"
+import { Virtualizer } from "@tanstack/react-virtual"
 import { supportedBulkActions } from "./header/actions/useActions"
 import { supportedRowActions } from "./useColumns/useRowActions"
 
 type NetdataCoreColumns<T = any> = Pick<ColumnDef<T>, "id" | "header" | "cell" | "filterFn">
 
+export type LargeDataSource<D = any> = {
+  forEachExportRow?: (callback: (row: D, id: string) => void) => void
+  forEachRow?: (callback: (row: D, id: string) => void) => void
+  getDisplayIndex?: (rowId: string, options?: { leaf?: boolean }) => number
+  getEstimatedRowHeight?: (index: number) => number | undefined
+  getFlatRowCount?: () => number
+  getRow: (index: number) => D
+  getRowCount: () => number
+  getRowId: (index: number) => string
+}
+
+export type TableVirtualizer = Virtualizer<HTMLDivElement, Element>
+
+export type TableRowWrapperProps<D = any> = {
+  children: ReactNode
+  row: Row<D>
+  virtualIndex: number
+  logicalIndex?: number
+}
+
+export type TableVirtualizeOptions = {
+  DeferredRowPlaceholder?: ComponentType<{ index: number }>
+  RowPlaceholder?: ComponentType<{ index: number }>
+  deferRowMount?: boolean
+  directCellContent?: boolean
+  getHasNextPage?: () => boolean
+  getHasPrevPage?: () => boolean
+  getItemKey?: (index: number) => Key
+  initialOffset?: number
+  loading?: boolean
+  loadMore?: (direction: "forward" | "backward") => void
+  onIsScrollingChange?: (isScrolling: boolean) => void
+  onScroll?: UIEventHandler<HTMLDivElement>
+  onVirtualChange?: (instance: TableVirtualizer, sync: boolean) => void
+  overscan?: number
+  placeholdersLength?: number
+  virtualRef?: MutableRefObject<TableVirtualizer | null>
+  warning?: ReactNode
+}
+
+export type LargeDataOptions<D = any> = {
+  enabled?: boolean
+  filterRow?: (row: D, globalFilter: any) => boolean
+  getEstimatedRowHeight?: (row: D, index: number) => number | undefined
+  initialRowCount?: number
+  sortingFns?: Record<string, Function>
+  source?: LargeDataSource<D>
+}
+
+export type OverflowTooltipOptions = {
+  align?: "top" | "right" | "bottom" | "left"
+  closeOnWindowScroll?: boolean
+  delay?: number
+  getContent?: (target: HTMLElement) => string | null | undefined
+  isOverflowing?: (target: HTMLElement) => boolean
+  renderContent?: (content: string) => ReactNode
+  selector?: string
+  zIndex?: number
+}
+
+export type TableOverflowTooltipOptions = OverflowTooltipOptions
+
+export type OverflowTooltipProps = {
+  containerRef: RefObject<HTMLElement | null>
+  options?: OverflowTooltipOptions
+}
+
 export type TableProps<T = any, D = any> = {
   data: Array<D>
   dataColumns: Array<NetdataCoreColumns<T>>
@@ -57,14 +128,31 @@ export type TableProps<T = any, D = any> = {
   onClickRow?: (value: any) => void
   onHoverCell?: (value: any) => void
   disableClickRow?: (value: any) => void
+  RowWrapper?: ComponentType<TableRowWrapperProps<D>>
+  virtualizeOptions?: TableVirtualizeOptions
+  overflowTooltip?: TableOverflowTooltipOptions
 
   /**This is an escape hatch test id generator, we use this when we want to have
    * dynamic generator tesids depending on the row values
    */
   testPrefixCallback?: (rowData: D) => string
+  largeDataOptions?: LargeDataOptions<D>
 }
 
 declare const Table: (props: TableProps) => JSX.Element
+declare const OverflowTooltip: (props: OverflowTooltipProps) => JSX.Element
+declare const createLargeDataSource: <D = any>(options: {
+  columns: Array<any>
+  columnFilters?: ColumnFiltersState
+  data: Array<D>
+  expanded?: boolean | Record<string, boolean>
+  filterFns?: Record<string, Function>
+  filterRow?: (row: D, index: number) => boolean
+  getEstimatedRowHeight?: (row: D, index: number) => number | undefined
+  getRowId: (row: D, index: number) => string
+  sorting?: Array<{ id: string; desc?: boolean }>
+  sortingFns?: Record<string, Function>
+}) => LargeDataSource<D>
 
-export { Table }
+export { Table, createLargeDataSource, OverflowTooltip }
 export default Table
diff --git a/src/components/table/index.js b/src/components/table/index.js
index afab4697c..1b7ee6a48 100644
--- a/src/components/table/index.js
+++ b/src/components/table/index.js
@@ -1,2 +1,4 @@
 export { default as Table } from "./table"
 export { default as downloadCsvAction } from "./helpers/downloadCsv"
+export { default as createLargeDataSource } from "./createLargeDataSource"
+export { default as OverflowTooltip } from "./components/overflowTooltip"
diff --git a/src/components/table/largeData.js b/src/components/table/largeData.js
new file mode 100644
index 000000000..b6cea38f6
--- /dev/null
+++ b/src/components/table/largeData.js
@@ -0,0 +1,47 @@
+const clamp = (value, minimum, maximum) => Math.min(Math.max(value, minimum), maximum)
+
+const normalizeRange = ({ startIndex = 0, endIndex = startIndex }, count) => {
+  const start = clamp(startIndex, 0, count)
+  const end = clamp(Math.max(start, endIndex), start, count)
+
+  return { startIndex: start, endIndex: end }
+}
+
+export const containsWindowRange = (windowRange, range) =>
+  range.startIndex >= windowRange.startIndex && range.endIndex <= windowRange.endIndex
+
+export const getBufferedWindowRange = (range, count, buffer = 50) =>
+  normalizeRange(
+    {
+      startIndex: range.startIndex - buffer,
+      endIndex: range.endIndex + buffer,
+    },
+    count
+  )
+
+export const getVirtualWindowRange = (virtualItems, count) => {
+  let startIndex
+  let endIndex
+
+  virtualItems.forEach(item => {
+    if (item.index === 0) return
+    const index = item.index - 1
+    startIndex = startIndex === undefined ? index : Math.min(startIndex, index)
+    endIndex = endIndex === undefined ? index + 1 : Math.max(endIndex, index + 1)
+  })
+
+  return normalizeRange({ startIndex, endIndex }, count)
+}
+
+export const getWindowPublication = (source, range) => {
+  const normalized = normalizeRange(range, source.getRowCount())
+  const rows = []
+  const rowIds = []
+
+  for (let index = normalized.startIndex; index < normalized.endIndex; index += 1) {
+    rows.push(source.getRow(index))
+    rowIds.push(source.getRowId(index))
+  }
+
+  return { ...normalized, rows, rowIds }
+}
diff --git a/src/components/table/largeData.test.js b/src/components/table/largeData.test.js
new file mode 100644
index 000000000..2f132b1b0
--- /dev/null
+++ b/src/components/table/largeData.test.js
@@ -0,0 +1,65 @@
+import {
+  containsWindowRange,
+  getBufferedWindowRange,
+  getVirtualWindowRange,
+  getWindowPublication,
+} from "./largeData"
+
+describe("large-data table window", () => {
+  it("keeps a virtual range inside its current materialized window", () => {
+    expect(
+      containsWindowRange({ startIndex: 100, endIndex: 200 }, { startIndex: 120, endIndex: 180 })
+    ).toBe(true)
+    expect(
+      containsWindowRange({ startIndex: 100, endIndex: 200 }, { startIndex: 80, endIndex: 180 })
+    ).toBe(false)
+  })
+
+  it("buffers a new materialized window within the logical row count", () => {
+    expect(getBufferedWindowRange({ startIndex: 100, endIndex: 130 }, 50_000)).toEqual({
+      startIndex: 50,
+      endIndex: 180,
+    })
+    expect(getBufferedWindowRange({ startIndex: 49_990, endIndex: 50_000 }, 50_000)).toEqual({
+      startIndex: 49_940,
+      endIndex: 50_000,
+    })
+  })
+
+  it("publishes only the requested rows from a 50k logical source", () => {
+    const getRow = jest.fn(index => ({ id: `node-${index}` }))
+    const source = {
+      getRowCount: () => 50_000,
+      getRow,
+      getRowId: index => `node-${index}`,
+    }
+
+    const publication = getWindowPublication(source, {
+      startIndex: 12_345,
+      endIndex: 12_375,
+    })
+
+    expect(publication.startIndex).toBe(12_345)
+    expect(publication.rows).toHaveLength(30)
+    expect(publication.rowIds).toEqual(
+      Array.from({ length: 30 }, (_, index) => `node-${12_345 + index}`)
+    )
+    expect(getRow).toHaveBeenCalledTimes(30)
+  })
+
+  it("uses the complete virtual range instead of classifying range overlap", () => {
+    const virtualItems = [{ index: 0 }, { index: 20_001 }, { index: 20_002 }, { index: 20_003 }]
+
+    expect(getVirtualWindowRange(virtualItems, 50_000)).toEqual({
+      startIndex: 20_000,
+      endIndex: 20_003,
+    })
+  })
+
+  it("clamps stale virtual indexes when the logical source shrinks", () => {
+    expect(getVirtualWindowRange([{ index: 0 }, { index: 10 }], 5)).toEqual({
+      startIndex: 5,
+      endIndex: 5,
+    })
+  })
+})
diff --git a/src/components/table/largeDataBodyIntegration.test.js b/src/components/table/largeDataBodyIntegration.test.js
new file mode 100644
index 000000000..04c0a559e
--- /dev/null
+++ b/src/components/table/largeDataBodyIntegration.test.js
@@ -0,0 +1,40 @@
+import React from "react"
+import { renderWithProviders, waitFor } from "testUtilities"
+import Table from "./table"
+
+const columns = [
+  {
+    id: "name",
+    accessorKey: "name",
+    header: "Name",
+    cell: ({ getValue }) => getValue(),
+  },
+]
+
+const getRowId = row => row.id
+const largeDataOptions = { enabled: true }
+
+describe("Table large-data body integration", () => {
+  it("settles after publishing the initial virtual window", async () => {
+    const data = Array.from({ length: 50_000 }, (_, index) => ({
+      id: `node-${index}`,
+      name: `Node ${index}`,
+    }))
+
+    const { getByTestId } = renderWithProviders(
+      <div style={{ height: 500 }}>
+        <Table
+          bulkActions={{ download: { handleAction: jest.fn() } }}
+          data={data}
+          dataColumns={columns}
+          enableColumnVisibility
+          enableSelection
+          getRowId={getRowId}
+          largeDataOptions={largeDataOptions}
+        />
+      </div>
+    )
+
+    await waitFor(() => expect(getByTestId("netdata-table")).toBeInTheDocument())
+  })
+})
diff --git a/src/components/table/largeDataSelection.js b/src/components/table/largeDataSelection.js
new file mode 100644
index 000000000..22687702a
--- /dev/null
+++ b/src/components/table/largeDataSelection.js
@@ -0,0 +1,36 @@
+export const getSelectedOriginalRows = (source, rowSelection) => {
+  if (!Object.keys(rowSelection).length) return []
+
+  const rows = []
+  source.forEachRow((row, id) => {
+    if (rowSelection[id] && !row?.disabled && !row?.unselectable) rows.push(row)
+  })
+  return rows
+}
+
+export const getIsAllRowsSelected = (source, rowSelection) => {
+  if (!source.getFlatRowCount() || !Object.keys(rowSelection).length) return false
+
+  let allSelected = true
+  source.forEachExportRow((_, id) => {
+    if (!rowSelection[id]) allSelected = false
+  })
+  return allSelected
+}
+
+export const getIsSomeRowsSelected = (source, rowSelection) => {
+  const selectedCount = Object.keys(rowSelection).length
+  return selectedCount > 0 && selectedCount < source.getFlatRowCount()
+}
+
+export const getNextRowSelection = (source, rowSelection, value) => {
+  const selected = value ?? !getIsAllRowsSelected(source, rowSelection)
+  const next = { ...rowSelection }
+
+  source.forEachExportRow((_, id) => {
+    if (selected) next[id] = true
+    else delete next[id]
+  })
+
+  return next
+}
diff --git a/src/components/table/largeDataSelection.test.js b/src/components/table/largeDataSelection.test.js
new file mode 100644
index 000000000..0ac0f9725
--- /dev/null
+++ b/src/components/table/largeDataSelection.test.js
@@ -0,0 +1,50 @@
+import createLargeDataSource from "./createLargeDataSource"
+import {
+  getIsAllRowsSelected,
+  getIsSomeRowsSelected,
+  getNextRowSelection,
+  getSelectedOriginalRows,
+} from "./largeDataSelection"
+
+const rows = [
+  { id: "outside", name: "Outside" },
+  { id: "enabled", name: "Enabled" },
+  { id: "disabled", name: "Disabled", disabled: true },
+]
+
+const source = createLargeDataSource({
+  columns: [{ id: "name", accessorKey: "name" }],
+  data: rows,
+  filterRow: row => row.id !== "outside",
+  getRowId: row => row.id,
+})
+
+describe("large-data row selection", () => {
+  it("resolves offscreen selections in core-row order and excludes disabled rows", () => {
+    expect(
+      getSelectedOriginalRows(source, { disabled: true, outside: true, enabled: true })
+    ).toEqual([rows[0], rows[1]])
+  })
+
+  it("evaluates all and some against the complete filtered result", () => {
+    expect(getIsAllRowsSelected(source, { outside: true })).toBe(false)
+    expect(getIsSomeRowsSelected(source, { outside: true })).toBe(true)
+    expect(getIsAllRowsSelected(source, { outside: true, enabled: true, disabled: true })).toBe(
+      true
+    )
+    expect(getIsSomeRowsSelected(source, { outside: true, enabled: true, disabled: true })).toBe(
+      false
+    )
+  })
+
+  it("toggles only the filtered result and preserves selections outside it", () => {
+    expect(getNextRowSelection(source, { outside: true }, true)).toEqual({
+      outside: true,
+      enabled: true,
+      disabled: true,
+    })
+    expect(
+      getNextRowSelection(source, { outside: true, enabled: true, disabled: true }, false)
+    ).toEqual({ outside: true })
+  })
+})
diff --git a/src/components/table/largeDataTable.test.js b/src/components/table/largeDataTable.test.js
new file mode 100644
index 000000000..f1764af46
--- /dev/null
+++ b/src/components/table/largeDataTable.test.js
@@ -0,0 +1,105 @@
+import React from "react"
+import { act, renderWithProviders, waitFor } from "testUtilities"
+import Table from "./table"
+
+jest.mock("./body", () => {
+  const ReactModule = require("react")
+  const MockBody = props => {
+    const { onWindowChange, table } = props
+    const rows = table.getRowModel().rows
+
+    ReactModule.useEffect(() => {
+      const rowCount = props.largeDataSource?.getRowCount() || rows.length
+      const startIndex = Math.min(10_000, Math.max(0, rowCount - 30))
+      onWindowChange({ startIndex, endIndex: Math.min(rowCount, startIndex + 30) })
+    }, [onWindowChange, props.largeDataSource, rows.length])
+
+    return (
+      <div
+        data-testid="large-data-body"
+        data-row-count={rows.length}
+        data-first-row={rows[0]?.original.id || ""}
+      />
+    )
+  }
+
+  return { __esModule: true, default: MockBody }
+})
+
+describe("Table large-data mode", () => {
+  it("gives TanStack Table only the active logical window", async () => {
+    const getRow = jest.fn(index => ({ id: `node-${index}`, name: `Node ${index}` }))
+    const source = {
+      getRowCount: () => 50_000,
+      getRow,
+      getRowId: index => `node-${index}`,
+    }
+
+    const { getByTestId } = renderWithProviders(
+      <Table
+        data={[]}
+        dataColumns={[{ id: "name", accessorKey: "name", header: "Name", cell: () => null }]}
+        largeDataOptions={{ source }}
+      />
+    )
+
+    await waitFor(() => {
+      expect(getByTestId("large-data-body")).toHaveAttribute("data-row-count", "130")
+      expect(getByTestId("large-data-body")).toHaveAttribute("data-first-row", "node-9950")
+    })
+
+    expect(getRow).toHaveBeenCalledTimes(180)
+  })
+
+  it("owns filtering and whole-result selection outside the visible window", async () => {
+    const data = [
+      { id: "outside", name: "Outside" },
+      { id: "enabled", name: "Inside" },
+      { id: "disabled", name: "Inside disabled", disabled: true },
+    ]
+    const tableRef = { current: null }
+    const onRowSelected = jest.fn()
+
+    renderWithProviders(
+      <Table
+        data={data}
+        dataColumns={[
+          {
+            id: "name",
+            accessorKey: "name",
+            header: "Name",
+            cell: () => null,
+            filterFn: (row, id, value) => row.getValue(id).toLowerCase().includes(value),
+          },
+        ]}
+        enableColumnVisibility
+        enableSelection
+        getRowId={row => row.id}
+        globalFilter="inside"
+        largeDataOptions={{
+          enabled: true,
+          filterRow: (row, value) => row.name.toLowerCase().includes(value),
+        }}
+        onRowSelected={onRowSelected}
+        rowSelection={{ outside: true }}
+        tableRef={tableRef}
+      />
+    )
+
+    await waitFor(() => expect(tableRef.current?.largeDataSource.getRowCount()).toBe(2))
+
+    act(() => tableRef.current.getColumn("name").setFilterValue("disabled"))
+    await waitFor(() => expect(tableRef.current.largeDataSource.getRowCount()).toBe(1))
+    act(() => tableRef.current.getColumn("name").setFilterValue(undefined))
+    await waitFor(() => expect(tableRef.current.largeDataSource.getRowCount()).toBe(2))
+
+    act(() => tableRef.current.toggleAllRowsSelected(true))
+
+    await waitFor(() => expect(onRowSelected).toHaveBeenLastCalledWith([data[0], data[1]]))
+    expect(tableRef.current.getIsAllRowsSelected()).toBe(true)
+
+    act(() => tableRef.current.toggleAllRowsSelected(false))
+
+    await waitFor(() => expect(onRowSelected).toHaveBeenLastCalledWith([data[0]]))
+  })
+})
diff --git a/src/components/table/table.js b/src/components/table/table.js
index be9b6ed84..79619482b 100644
--- a/src/components/table/table.js
+++ b/src/components/table/table.js
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useLayoutEffect, useMemo, useRef } from "react"
+import React, { memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react"
 import {
   getCoreRowModel,
   getFilteredRowModel,
@@ -32,6 +32,14 @@ import useSelecting from "./useSelecting"
 import useSorting from "./useSorting"
 import useGrouping from "./useGrouping"
 import useColumnOrder from "./useColumnOrder"
+import { containsWindowRange, getBufferedWindowRange, getWindowPublication } from "./largeData"
+import createLargeDataSource from "./createLargeDataSource"
+import {
+  getIsAllRowsSelected,
+  getIsSomeRowsSelected,
+  getNextRowSelection,
+  getSelectedOriginalRows,
+} from "./largeDataSelection"
 
 const noop = () => {}
 const emptyObj = {}
@@ -127,15 +135,24 @@ const Table = memo(props => {
     meta: tableMeta = tableDefaultProps.meta,
     title,
     virtualizeOptions = tableDefaultProps.virtualizeOptions,
+    largeDataOptions,
     tableRef,
     className,
     width,
+    overflowTooltip,
     getRowCanExpand,
     getRowId,
     ref,
     ...rest
   } = { ...tableDefaultProps, ...props }
 
+  const [largeDataRange, setLargeDataRange] = useState(() => ({
+    startIndex: 0,
+    endIndex: largeDataOptions?.initialRowCount || 50,
+  }))
+  const largeDataRangeRef = useRef(largeDataRange)
+  largeDataRangeRef.current = largeDataRange
+
   const [columnVisibility, onColumnVisibilityChange] = useVisibility(
     defaultColumnVisibility,
     visibilityChangeCb
@@ -161,6 +178,7 @@ const Table = memo(props => {
   const [globalFilter, onGlobalFilterChange] = useSearching(defaultGlobalFilter, onSearch)
 
   const [columnOrder, onColumnOrderChange] = useColumnOrder(defaultColumnOrder, columnOrderChangeCb)
+  const [largeDataColumnFilters, setLargeDataColumnFilters] = useState([])
 
   const columns = useColumns(dataColumns, {
     testPrefix,
@@ -172,9 +190,54 @@ const Table = memo(props => {
     tableMeta,
   })
 
+  const largeDataSource = useMemo(() => {
+    if (largeDataOptions?.source) return largeDataOptions.source
+    if (!largeDataOptions?.enabled) return null
+    if (!getRowId) throw new Error("Large-data Table requires getRowId")
+
+    const filterRow = largeDataOptions.filterRow
+
+    return createLargeDataSource({
+      columns: dataColumns,
+      columnFilters: largeDataColumnFilters,
+      data,
+      expanded,
+      filterRow: globalFilter && filterRow ? row => filterRow(row, globalFilter) : undefined,
+      filterFns,
+      getEstimatedRowHeight: largeDataOptions.getEstimatedRowHeight,
+      getRowId,
+      sorting,
+      sortingFns: largeDataOptions.sortingFns,
+    })
+  }, [
+    data,
+    dataColumns,
+    expanded,
+    getRowId,
+    globalFilter,
+    largeDataColumnFilters,
+    largeDataOptions,
+    sorting,
+  ])
+  const largeDataPublication = useMemo(
+    () => (largeDataSource ? getWindowPublication(largeDataSource, largeDataRange) : null),
+    [largeDataSource, largeDataRange]
+  )
+  const handleLargeDataRangeChange = useCallback(
+    nextRange => {
+      if (containsWindowRange(largeDataRangeRef.current, nextRange)) return
+
+      const bufferedRange = getBufferedWindowRange(nextRange, largeDataSource.getRowCount())
+      largeDataRangeRef.current = bufferedRange
+      setLargeDataRange(bufferedRange)
+    },
+    [largeDataSource]
+  )
+  const tableData = largeDataPublication?.rows || data
+
   const table = useReactTable({
     columns,
-    data,
+    data: tableData,
     manualPagination: !enablePagination,
     columnResizeMode: "onEnd",
     filterFns,
@@ -195,6 +258,7 @@ const Table = memo(props => {
         [grouping]
       ),
       columnOrder,
+      ...(largeDataSource ? { columnFilters: largeDataColumnFilters } : {}),
     },
     onExpandedChange,
     ...(!enableCustomSearch && globalFilterFn ? { globalFilterFn } : {}),
@@ -203,7 +267,10 @@ const Table = memo(props => {
     onRowSelectionChange,
     onGlobalFilterChange: enableCustomSearch ? undefined : onGlobalFilterChange,
     onSortingChange,
-    manualSorting,
+    manualSorting: Boolean(largeDataSource) || manualSorting,
+    manualFiltering: Boolean(largeDataSource),
+    manualGrouping: Boolean(largeDataSource),
+    manualExpanding: Boolean(largeDataSource),
     enableMultiSorting: true,
     isMultiSortEvent: e => e.ctrlKey || e.shiftKey || e.metaKey,
     getSortedRowModel: getSortedRowModel(),
@@ -212,17 +279,32 @@ const Table = memo(props => {
     getRowCanExpand,
     autoResetExpanded,
     getGroupedRowModel: getGroupedRowModel(),
-    getSubRows: useCallback(row => row.children, []),
+    getSubRows: useCallback(row => (largeDataSource ? undefined : row.children), [largeDataSource]),
     onPaginationChange,
     onColumnVisibilityChange,
     onColumnSizingChange,
     onColumnPinningChange,
     onColumnOrderChange,
+    ...(largeDataSource ? { onColumnFiltersChange: setLargeDataColumnFilters } : {}),
     enableSubRowSelection,
     columnGroupingMode: "reorder",
-    getRowId,
+    getRowId: largeDataSource ? (_, index) => String(largeDataPublication.rowIds[index]) : getRowId,
   })
 
+  table.largeDataSource = largeDataSource
+  table.forEachExportRow = largeDataSource?.forEachExportRow
+  if (
+    largeDataSource?.forEachRow &&
+    largeDataSource?.forEachExportRow &&
+    largeDataSource?.getFlatRowCount
+  ) {
+    table.getSelectedOriginalRows = () => getSelectedOriginalRows(largeDataSource, rowSelection)
+    table.getIsAllRowsSelected = () => getIsAllRowsSelected(largeDataSource, rowSelection)
+    table.getIsSomeRowsSelected = () => getIsSomeRowsSelected(largeDataSource, rowSelection)
+    table.toggleAllRowsSelected = value =>
+      onRowSelectionChange(current => getNextRowSelection(largeDataSource, current, value))
+  }
+
   const prevStateRef = useRef(table.getState())
   table.isEqual = (selector = identity) => {
     if (!prevStateRef.current) {
@@ -304,6 +386,10 @@ const Table = memo(props => {
         testPrefix={testPrefix}
         meta={tableMeta}
         enableColumnReordering={enableColumnReordering}
+        largeDataSource={largeDataSource}
+        windowStartIndex={largeDataPublication?.startIndex || 0}
+        onWindowChange={handleLargeDataRangeChange}
+        overflowTooltip={overflowTooltip}
         {...rest}
         {...virtualizeOptions}
       />
diff --git a/src/components/tabs/__snapshots__/tabs.test.js.snap b/src/components/tabs/__snapshots__/tabs.test.js.snap
index aede8b190..839d8ea0e 100644
--- a/src/components/tabs/__snapshots__/tabs.test.js.snap
+++ b/src/components/tabs/__snapshots__/tabs.test.js.snap
@@ -18,9 +18,11 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
   padding: 0 2px;
   color: #526161;
   border-bottom: 1px solid #E4E8E8;
+  overflow-y: hidden;
+  overflow-x: auto;
 }
 
-.c2 {
+.c3 {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -29,7 +31,16 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
   color: #526161;
 }
 
-.c3 {
+.c2 {
+  -ms-overflow-style: none;
+  overflow: -moz-scrollbars-none;
+}
+
+.c2::-webkit-scrollbar {
+  height: 0px;
+}
+
+.c4 {
   white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-style: solid;
@@ -45,15 +56,15 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
   background: #F1FFF7;
 }
 
-.c3>span {
+.c4>span {
   color: #00AB44;
 }
 
-.c3:hover {
+.c4:hover {
   border-bottom-color: #00AB44;
 }
 
-.c4 {
+.c5 {
   white-space: nowrap;
   border-bottom-width: 1px;
   border-bottom-style: solid;
@@ -69,11 +80,11 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
   background: #F6F7F7;
 }
 
-.c4>span {
+.c5>span {
   color: #708585;
 }
 
-.c4:hover {
+.c5:hover {
   border-bottom-color: #00AB44;
 }
 
@@ -83,13 +94,15 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
   <nav
     alignitems="center"
     border="[object Object]"
-    class="c1 tabs"
+    class="c1 c2 tabs"
+    flex="0"
     justifycontent="start"
+    overflow="[object Object]"
     padding="0,0.5"
   >
     <div
       alignitems="center"
-      class="c2 c3"
+      class="c3 c4"
       justifycontent="center"
       label="hi"
       padding="0,6"
@@ -98,7 +111,7 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
     </div>
     <div
       alignitems="center"
-      class="c2 c4"
+      class="c3 c5"
       justifycontent="center"
       label="Hi again"
       padding="0,6"
@@ -107,7 +120,7 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
     </div>
     <div
       alignitems="center"
-      class="c2 c4"
+      class="c3 c5"
       justifycontent="center"
       label="Bye"
       padding="0,6"
@@ -116,7 +129,7 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
     </div>
     <div
       alignitems="center"
-      class="c2 c4"
+      class="c3 c5"
       justifycontent="center"
       label="Bye Bye"
       padding="0,6"
diff --git a/src/index.js b/src/index.js
index 26178d368..ff7fcfece 100644
--- a/src/index.js
+++ b/src/index.js
@@ -121,7 +121,12 @@ export { default as Modal } from "./components/modal"
 
 export { ConfirmationDialog } from "./components/confirmation-dialog"
 
-export { Table, downloadCsvAction } from "./components/table"
+export {
+  Table,
+  createLargeDataSource,
+  downloadCsvAction,
+  OverflowTooltip,
+} from "./components/table"
 
 export { default as Select } from "./components/select"
 export { default as SearchInput } from "./components/search"
diff --git a/src/organisms/navigation/sortable/item.js b/src/organisms/navigation/sortable/item.js
index 93d561433..17d10a5ac 100644
--- a/src/organisms/navigation/sortable/item.js
+++ b/src/organisms/navigation/sortable/item.js
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useCallback } from "react"
 import { useSortable } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
 
@@ -36,10 +36,13 @@ const SortableItem = ({
     transition,
   }
 
-  const setRef = el => {
-    setNodeRef(el)
-    if (lastTabRef) lastTabRef.current = el
-  }
+  const setRef = useCallback(
+    el => {
+      setNodeRef(el)
+      if (lastTabRef) lastTabRef.current = el
+    },
+    [lastTabRef, setNodeRef]
+  )
 
   return (
     <Item
diff --git a/src/organisms/navigation/sortable/item.test.js b/src/organisms/navigation/sortable/item.test.js
new file mode 100644
index 000000000..69bd10236
--- /dev/null
+++ b/src/organisms/navigation/sortable/item.test.js
@@ -0,0 +1,36 @@
+import React from "react"
+import { renderWithProviders, screen } from "testUtilities"
+import { useSortable } from "@dnd-kit/sortable"
+import SortableItem from "./item"
+
+jest.mock("@dnd-kit/sortable", () => ({
+  ...jest.requireActual("@dnd-kit/sortable"),
+  useSortable: jest.fn(),
+}))
+
+const Item = ({ ref }) => <span ref={ref} data-testid="sortable-item" />
+
+const useSortableWithStateRef = () => {
+  const [, setNodeRef] = React.useState(null)
+
+  return {
+    attributes: {},
+    isDragging: false,
+    isSorting: false,
+    listeners: {},
+    setActivatorNodeRef: jest.fn(),
+    setNodeRef,
+    transform: null,
+    transition: null,
+  }
+}
+
+describe("SortableItem", () => {
+  it("keeps its callback ref stable when the sortable ref updates state", () => {
+    useSortable.mockImplementation(useSortableWithStateRef)
+
+    renderWithProviders(<SortableItem draggable id="node" index={0} itemProps={{}} Item={Item} />)
+
+    expect(screen.getByTestId("sortable-item")).toBeInTheDocument()
+  })
+})