today's experiment: silky smooth fixed-height virtual table, rendered with canvas tested with 10^50+ rows of dynamic data

try it → this was inspired by @Antfroze's sql studio (beautiful), @itseieio's everyuuid (fun!), and ideas from @4rcherhume! the bit i like the most is that the scrollbars are real DOM scrollbars, not fake ones :d

very cool. if you mapped each uuid to a oklch and then did a gradual gradient with looping for set (perception is like ~10^6 even ignoring screen gamuts) I think the effect feels even more insane also would your virtualization break if we toggle scroll speed with hotkeys. hmm

> would your virtualization break i don't think so, that's a good idea let me try this oklch idea

Yeah if you don’t get it done by tomorrow would be down to PR this weekend just busy tn

made something with virtual tables too - infinitely scrollable bar chart

very nice! bonus brownie points for oppenheimer soundtrack

when resizable columns though 👀

this is honestly amazing, better than v0 could've ever done

table rendering with canvas ?

yes

interested in implementation, cool

aww yeah

So JS libraries are so bloated nowadays we are now going back to just drawing our interfaces in a canvas. Amazing demo!

well, I found a beautiful csv reader

Maybe I'm dumb, but why does a single scroll tick make it go to some random number that is 100s of millions rows ahead? Or is it not supposed to show me 40-70 on scroll?

been there, done that

damn

hahaha did not mean anything else! seriously every front end engineers could build this as a test of skills

new interview question just dropped...

give it to me

i want dah saource kode

github button at the bottom right

ur so mean to me

i’m sorry🙁

i dont want it anymore </3

very cool. kudos! how does this work for accessibility? Or do screen-readers just default back to OCR?

yeah hm right now there isn't much consideration for accessibility if one were to make it like a proper spreadsheet (e.g editing rows), you might have to put a dom element of some sort behind every visible cell in the virtualisation frame, at which point you could have the text for screenreaders copied into the dom in parallel, maybe throttled updates etc to avoid slowing the scroll/jumping down

now go down row by row

Cool! I have heard that canvas rendered tables are really performant. But the features you need to implement to be useful for real-world scenarios are enormous. I have tried to optimize @tan_stack Table with complex cells using memo tricks and @tan_stack Virtual. It was nice.

The next thing everyone wants is for it to be interactive

Ohhh you tried Jupiter notebooks way of rendering

Next step would be rows with dynamic height. Solved similar task in 2012 with pure dom. It also supported filter, sorting, and grouping. I could write some details related to implementation of any of that features. But it was not canvas and we tested it on 500k rows in ie6

Amazing! Just curious, do other spreadsheet apps like Google Sheets or Microsoft Excel use something like this?

Impressive scale. I wonder about the practical limits of canvas rendering for such large datasets though. Performance must be a challenge.

Dayum

I was wondering when someone would make a smooth version, this is sick

Check out @glideapps's grid!

It gets very intense when you don't get fixed width.

We use Glide Data Grid for this it’s great

based performance mate

You need to stop Sir! if everything renders in Canvas,my ancient html skills will become absolete😢

is this open source?

of course! →

Wow, what O(1) lookup in 1 yottabyte feels like.

can we replace the whole ui with a canvas render

is variable height solved? been trying to find a good library but i've always ended up just needing to implement it myself

bro dont leak my uuid

it’s our uuid now.

cool

variable row height?