https://github.com/gabrielpetersson/fast-grid

World's most performant DOM-based web table. Try it! fast-grid.vercel.app/
https://github.com/gabrielpetersson/fast-grid

Last synced: about 1 month ago
JSON representation

World's most performant DOM-based web table. Try it! fast-grid.vercel.app/

• Host: GitHub
• URL: https://github.com/gabrielpetersson/fast-grid
• Owner: gabrielpetersson
• License: mit
• Created: 2023-04-28T06:52:39.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-10-31T00:22:03.000Z (2 months ago)
• Last Synced: 2024-11-10T06:44:57.763Z (2 months ago)
• Language: TypeScript
• Homepage: https://fast-grid.vercel.app/
• Size: 244 KB
• Stars: 1,121
• Watchers: 17
• Forks: 15
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-list - fast-grid - based web table. Try it! fast-grid.vercel.app/ | gabrielpetersson | 1845 | (TypeScript)
• jimsghstars - gabrielpetersson/fast-grid - World's most performant DOM-based web table. Try it! fast-grid.vercel.app/ (TypeScript)

README

        
# World's most performant web table - [Try it!](https://fast-grid.vercel.app)

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