Fast Grid

World's most performant DOM-based web table. Try it! fast-grid.vercel.app/
GitHub
1.55k
Created 2 years ago, last commit a month ago
Number of contributors not available
82 commits
Stars added on GitHub, month by month
N/A
N/A
N/A
N/A
N/A
N/A
N/A
N/A
N/A
N/A
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
Stars added on GitHub, per day, on average
Yesterday
+81
Last week
+20.3
/day
Last month
+15.0
/day
README

World's most performant web table - Try it!

A multithreaded web table, capable of running 120fps while sorting/filtering/scrolling simultaneously.

Posting updates & soon video walk-through: https://x.com/GabrielPeterss4. DMs are open, curious to hear about use-cases or advise on how to use it :)

Capabilites

  • Multithread sorting/filtering using a shared array buffer
  • Display millions rows at O(1), you are only limited by browser RAM
  • 120 fps while cruising the scrollbar
  • Never drop a frame while filtering or sorting

Technical details

The most performant DOM-based grid.

  • Uses a shared array buffer to store order/filtering of rows, computed in a web worker off-thread
  • Resuses all part of DOM-tree
  • Own event loop to prioritize tasks. Never drops a frame, even when filtering millions of rows
  • Non-passive scrolling. Rows will never be seen rows loading into the UI while scrolling
  • Custom virtualization and scrolling. Not limited by browsers 15 million pixel div height limit
  • Custom built scrolling for phones, and runs at 60fps even on older phones

One million rows benchmark (M2 Max Pro)

Benchmark Score
Scroll 40 rows every frame 120fps
Filtering 200ms
Time to initialize grid and show rows 1.5ms
Filter&sort simultaneously every 300ms 120fps

zero copy datatype

TODO

  • iphone safari has a very low memory limit - disable multithreading there
  • expand synthetic event-loop to include scrolling & rendering cell contents
  • can maybe make GC be a bit less expensive by reusing cell classes more..
  • if user zoomed in/out scrollbar will navigate to fast/slow, needs to be relative to the scroll track
  • sort/filter all columns, not just second lol
  • resize columns
  • custom cells (you can kinda already do this though, just add a new cell class)
  • make sure rows are ordered correctly for text selection