How I made Google’s data grid scroll faster with a line of CSS

Post by craftinator » Thu, Oct 28, 2021, 2:12 PM UTC

wildrhythms wrote: post #63

lxe wrote: post #3

I've been doing web development for 20 years now. I don't know if it's strictly endemic to web or frontend, but I feel like we're solving the same problems over and over again, using the same low levels of abstraction. There's no reason for lists to scroll slowly after so many years of scrolling lists. There should just be one way to do a scrolling list, implemented natively and left alone. Yet, in web development, t…

I work in UX, I am constantly being given designs that don't work well with native/semantic elements- a great example is tables. As soon as the table needs some kind of animation, drag-drop behavior, anything like that, I can't use a anymore; or it becomes some frankenstein kafkaesque amalgamation that is impossible to maintain. Does the table really need an animation? (probably not) drag and drop? (probably not) But…

Post by sebazzz » Thu, Oct 28, 2021, 4:08 PM UTC

jeroenhd wrote: post #33

cxcorp wrote: post #11

Earlier quoted context omitted.

Unfortunately, as is often the case when one learns of a new CSS property or a Web API, the browser support is just not there yet. Safari, for example, doesn't support this at all: https://caniuse.com/mdn-css_properties_contain

I don't think this matter much? It's just a performance optimization, Safari can remain slow while all modern browsers benefit. Unknown CSS values should be ignored so there should be no impact on actual usability. Seems to me like it's excellent for daily use despite the lack of compatibility of outdated browsers.

Post by rasz » Thu, Oct 28, 2021, 8:49 PM UTC

robbiejs wrote: post #205

rasz wrote: post #162

Earlier quoted context omitted.

>table with 40k rows Oh I have one with 6K rows, 300ms to insert into a page if I try to measure, but in reality browser freezes for 3 seconds (1.8s style, 900ms layout, 300ms update tree). Freezing goes away with position: absolute, but it still takes 3 seconds to show up after .appendChild. I tried replacing Table with Flex divs, even worse speed.

If your table is simple (values, no markup), try DataGridXL: here's a One Million Cells Demo that loads in an eyeblink: https://www.datagridxl.com/demos/one-million-cells . (Disclaimer: I am the maker)

Post by nextaccountic » Fri, Oct 29, 2021, 5:14 AM UTC

bla3 wrote: post #108

dfabulich wrote: post #77

Earlier quoted context omitted.

What you need is Open UI. The browser vendors are working on it. https://open-ui.org/ > The purpose of Open UI to the web platform is to allow web developers to style and extend built-in web UI controls, such as dropdowns, checkboxes, radio buttons, and date/color pickers. > To do that, we'll need to fully specify the component parts, states, and behaviors of the built-in controls, as well as necessary accessibility…

https://open-ui.org/charter > Most recent revision: April 1, 2020 That doesn't inspire confidence...

Post by robbiejs » Fri, Oct 29, 2021, 10:11 AM UTC

rasz wrote: post #215

robbiejs wrote: post #205

Earlier quoted context omitted.

If your table is simple (values, no markup), try DataGridXL: here's a One Million Cells Demo that loads in an eyeblink: https://www.datagridxl.com/demos/one-million-cells . (Disclaimer: I am the maker)

Its not real. What good is virtual table if I cant search for contents of last row, "2000;1", after loading the page :( Still, this gives me an idea. Dump contents of my table as text under virtual one so search will at least scroll down to appropriate offsets.