ag-Grid VS Glide Data Grid

In this post I’ll show you how, using the AG Grid component and Ably Spaces, you can create a React application that allows users to see not only who else is currently viewing the grid, but using a Flowbite Avatar Stack component, what row each user currently has selected.

something like ag-grid? https://github.com/ag-grid/ag-grid

I personally use https://www.ag-grid.com/ for all my data grid needs. It has a free community version (that should get you covered imo) as well as a paid one with advanced features.

To be fair, in any GUI toolkit, the "table" is abolutely the most complex general purpose widget. People really under estimate the difficult of an efficient implementation. Qt spents YEARS improving their QTableWidget class. The implementation is mind-bogglingly complex. I am sure many very smart summer interns (PhDs!) have tried to tweak that class to squeeze every bit of performance possible. The table class in GTK+ and MSFT DotNet's WPF are equally, freakishly insane.

Consider this idea: Most people who use a table class in a GUI framework assume it is essentially infinitely scalable (myself included!). I am talking about millions of rows or thousands of columns with all kinds of silly widgets injected into individual cells. It is a crazy hard computer science problem to solve. I would not doubt there are many PhD thesises written on the topic of fast, scalable table widgets.

Beyond desktop GUI toolkits, people have tried to do the same in a browser (HTML/CSS/JS). Have you seen AG-Grid? Woah, it is unbelievable how much goddamn data you can squeeze into that widget. Most Wall Streets web-based trading apps use it one way or another. It's just so hard to beat. Ref: https://www.ag-grid.com/ There must be 1,000 person years of optimisation sunk into that implementation.

Why do you want to render to canvas?

Perspective seems to be the most performant html table. It is more focused on extremely fast updates than styling, although it looks good.

Glide is a newcomer that also renders to canvas.

https://github.com/finos/perspective

https://github.com/glideapps/glide-data-grid

What we are trying to build is a component that will help us to render a million rows in a ReactJs App. We make use of several techniques that are being used by other products such as google sheets and glide data grid app to achieve it.

Can you give examples of better JS renderers?

What is needed for performance of traditional GUI app rendering? I'm particularly interested in table rendering. Glide and Perspective are both canvas based renderers, but I haven't dug into the internals.

[1] https://github.com/glideapps/glide-data-grid

[2] https://github.com/finos/perspective

Much much more...

We ran into the same issue! We actually implemented a feature we joking call clown-car scrolling to handle this. If you want to steal the basics of it you can see it here: https://github.com/glideapps/glide-data-grid/blob/main/packa...

Feel free to steal and improve, we only enable the clown-car mode when the desired scrollable area is larger than what a browser can support. With our implementation scrolling is still handled by the browser, but the scroll location can be subtly recomputed as you go from time to time. We only do this when interacting with the scrollbar directly to avoid weird artifacts like scrolling feeling faster than normal.

I maintain glide-data-grid. I'd love to be in consideration for your use case. If you have features that are not supported in our current or the upcoming 4.0.0 release I would love to hear about it.

Try Glide data grid

Homepage

Home Page / try it now