DEV Community

rYOUcerious
rYOUcerious

Posted on

Scrolling 1 Million Rows in the Browser — Building Cerious Grid (Open Source, MIT)

Most web developers have fought with tables at some point. Pagination, virtualization, infinite scrolling — it always feels like a trade-off between performance and usability.

I’ve been working on an open-source Angular grid called Cerious Grid, and I wanted to push it to the limit. The result: a demo scrolling through 1,000,000 rows × 13 columns in the browser, with live metrics for render time, memory usage, and initialization.

⚡ Key Features

Virtual Scrolling → Smooth scrolling even at massive scale (1M rows).

Plugin System → Keep the core lean; add features like Excel export only if you need them.

Built-in Essentials → Multi-sort, drag-and-drop columns, column resizing.

Open Source (MIT) → Available here: GitHub Repo

📊 Performance Metrics

In my 1M row demo:

Grid Init: ~89ms

First Render: ~156ms

Total Render Time: ~291ms

Memory: ~440MB total (~0.44MB per 1k rows)

These numbers hold up outside of StackBlitz (where scrolling performance is limited by the sandbox).

🌍 Why I Built It

Most existing grids (AG Grid, PrimeNG, etc.) are excellent but tend to either:

Struggle at scale on the client side, or

Lock major features behind enterprise licenses.

I wanted something free, open, and performant, but also flexible enough to grow with plugins.

🤔 Question for You

If you’ve worked with large data sets in the browser:

Do you usually virtualize on the client?

Or lean on server-side rendering / pagination?

I’d love to hear how you approach this in your apps — and what features you’d want in a grid that’s built for scale.

Top comments (0)