Project
Roulette

Virtualised Data Table

A hundred thousand rows that scroll like a hundred.

AdvancedWeb appUI component16–34hAI-buildable 3/5no setup

A data table that stays smooth at scale: virtualised rows, sticky headers, resizable and reorderable columns, and sorting that doesn't lock the tab. Every serious app needs one, and building it properly teaches you more about browser rendering than almost anything else.

UI
Logic
Useful

Hosting · Free forever

Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.

Deploy it and share a link.

Core features · 7

  • Only visible rows are rendered, regardless of dataset size
  • The header row stays fixed while the body scrolls
  • Columns resize by dragging their edges
  • Columns reorder by dragging their headers
  • Sorting by any column stays fast on large datasets
  • Row selection with shift-click ranges
  • Horizontal scrolling with pinned first columns

The interesting part

  • Virtualisation maths that stays correct during fast scrolling
  • Aligning a sticky header with horizontally scrolling body columns
  • Sorting large arrays without blocking the main thread

Once it works

  • Add variable row heights
  • Add grouped rows with expandable sections
  • Add inline cell editing

Suggested stack

reacttypescripttailwindtanstack-virtual

Track it