← Back to context

Comment by jitl

2 months ago

How do you virtualize rendering of a table with 100,000 items with Hyper?

I would recommend pagination for a table of that size.

When you go pass 100k-200k records on the client side, typically fetched with event sourcing pattern, you must resort to WASM. Here's a RUST based example with 150k records to tackle the situation: https://mpa.nuejs.org/app/?rust

  • The React example w/ the complicated table API will work fine for zillions of records. Virtualization is not complex math, and there are many libraries that will implement it for you in various languages.

    I just tried making an array w/ 1 million items in it in my browser console `Array.from({ length: 1_000_000 }, () => ({ id: ++nextId, data: Math.random() }))` without issue. Virtualization is just simple arithmetic to select the firstRender and lastRender indexes in the array. I don't think you need WASM for this.

  • > you must resort to WASM

    Where does the 'must' come from? A react component will trivially handle 200k records with list virtualisation with just javascript

    • There is an offset (depending on the app) where JS crashes with stack overflow exception, and only WASM can continue from there. On the Nue example with user records the treshold was around 150k records (only slightly depending on the browser).

      3 replies →