feat: virtualize data table rows when pagination is disabled

[kirangadhave]

📝 Summary

• Add virtualization when data-table pagination is disabled and number of rows exceed 100.
• Only visible rows (set to 15) and overscan (10 above and 10 below) are rendered in DOM
• Header is stick similar to if maxHeight is provided

🔍 Description of Changes

• Added a useScrollContainerHeight hook

  • includes the pervious logic for maxHeight (updated to useLayoutEffect to prevent flickering)
  • added logic to compute height when virtualization is enabled, but maxHeight is not specified
    • reads the header/row height from DOM

• DataTableBody now uses the useVirtualizer hook from @tanstack/react-virtual for rendering virtualized row

• added constants for default row height, header height, etc. based on tailwind css values. In practice these are just fallbacks, we read from DOM.

• Scrollbar currently spans the full container (header + body) due to sticky header inside the scroll container (happens with virtualize and maxHeight). Ideally we would separate the header and body rendering so scroll bar is show only for body, but it adds complexity to sync column widths in two tables.

• Find won't work for offscreen rows, but table search should help with that.

No API change

---

Screen.Recording.2026-03-27.at.11.24.21.AM.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	Mar 27, 2026 7:31pm

[codecov]

Bundle Report

Changes will increase total bundle size by 15.86kB (0.06%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
marimo-esm	24.8MB	15.86kB (0.06%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: marimo-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
assets/dist-*.js	-1.28kB	337.93kB	-0.38%
assets/dist-*.js	-8 bytes	58.31kB	-0.01%
assets/JsonOutput-*.js	17.34kB	324.66kB	5.64% ⚠️
assets/panels-*.js	-187 bytes	48.31kB	-0.39%

Files in assets/JsonOutput-*.js:

• ./src/components/data-table/renderers.tsx → Total Size: 7.51kB

• ./src/components/data-table/types.ts → Total Size: 565 bytes

• ./src/components/data-table/hooks/use-scroll-container-height.ts → Total Size: 2.94kB

• ./src/components/data-table/TableActions.tsx → Total Size: 3.94kB

• ./src/components/data-table/data-table.tsx → Total Size: 5.54kB

[mscolnick]

nice, looks very good!

[Copilot]

Pull request overview

Adds row virtualization to the frontend data table when pagination is disabled and the dataset is large, reducing DOM load while keeping headers sticky.

Changes:

• Introduce @tanstack/react-virtual and wire DataTableBody to render virtualized rows (with overscan) when pagination=false and rows exceed a threshold.
• Add useScrollContainerHeight to manage the table wrapper’s max-height for sticky headers and virtualization (including header-size observation).
• Add tests and a global ResizeObserver stub for the vitest/jsdom environment.

Reviewed changes

Copilot reviewed 8 out of 9 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Locks new @tanstack/react-virtual dependency and updated resolution graph.
frontend/package.json	Adds @tanstack/react-virtual.
frontend/src/components/data-table/types.ts	Adds constants for virtualization thresholds and fallback measurements.
frontend/src/components/data-table/renderers.tsx	Implements virtualized rendering in DataTableBody via useVirtualizer.
frontend/src/components/data-table/hooks/use-scroll-container-height.ts	New hook to manage wrapper max-height and observe header resize when virtualizing.
frontend/src/components/data-table/data-table.tsx	Enables virtualization when pagination is disabled and row count exceeds threshold; uses new hook.
frontend/src/components/data-table/tests/data-table.test.tsx	Adds basic tests covering virtualization on/off conditions.
frontend/src/tests/setup.ts	Adds a global ResizeObserver stub for tests.

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

[github-actions]

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.21.2-dev79