An experiment (and soon NPM package) for how performant a web-table can possibly be

• Display unlimited rows at O(1), you are only limited by RAM
• Instant results on filtering millions of rows
• 60 fps while cruising the scrollbar
• TODO: publish npm package

The most performant DOM-based grid.

• Resuses parts of DOM-tree to reduce expensive DOM mutations
• 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

This is the most performant DOM-based table. The fastest table ever built (by far), directly using the GPU and streaming rows efficiently from a custom DB, is dataland.io. It can render billions of rows at ~5x FPS versus a DOM-based table.

In the example web-app, sorting is still blocking main thread, meaning it drops frames. Adding to the custom event loop soon. Also you cannot sort and filter at the same time, a TODO but figuring out how I can do this off-thread and potentially in wasm with a zero copy datatype

• break out filtering into its own package
• config for sort/filter for all columns
• detach scrollbar from logic, & isolate logic in general
• modify cells
• resize columns
• custom cells
• make sure rows are ordered correctly for text selection
• publish npm package

• expand synthetic event-loop to include scrolling & rendering cell contents
• make scrolling one viewport every frame while filtering a million rows at the same time run 40fps (macbook air)
• support filter + sort at same time
• chunk up sorting so it's not blocking main thread