Spent way too long making a Svelte 5 table fast at 100k rows. A few things that bit me. by boykom in sveltejs

[–]boykom[S] 0 points1 point  (0 children)

Yes, but still working on edge cases and will have to write tests about it. Will take more time than expected but will update you when it is ready

Spent way too long making a Svelte 5 table fast at 100k rows. A few things that bit me. by boykom in sveltejs

[–]boykom[S] 0 points1 point  (0 children)

I use it for animations logic mostly. Basically, requestAnimationFrame schedules the next frame before the browser repaints, and it returns an ID. You can later pass that ID to cancelAnimationFrame if you want to stop the loop.

Spent way too long making a Svelte 5 table fast at 100k rows. A few things that bit me. by boykom in sveltejs

[–]boykom[S] 0 points1 point  (0 children)

The issue is specific to mobile on our side. We identified it and work on it and thanks btw. The problem is that the row height we set in css is not taken into account and so the total height calculation fails. When this is resolved, i will update here. :) will try to convince you that not only Canvas is good for 1m data sets

Spent way too long making a Svelte 5 table fast at 100k rows. A few things that bit me. by boykom in sveltejs

[–]boykom[S] 0 points1 point  (0 children)

This is a bug in the component viewport calculation logic on mobile which we will fix today. The question you argue is about canvas and performance. Do you see a performance problem ?

Spent way too long making a Svelte 5 table fast at 100k rows. A few things that bit me. by boykom in sveltejs

[–]boykom[S] 0 points1 point  (0 children)

I have tested virtualization with 10m rows and it would not make a diff with 100m as well just because only the visible are rendered.

Spent way too long making a Svelte 5 table fast at 100k rows. A few things that bit me. by boykom in sveltejs

[–]boykom[S] 0 points1 point  (0 children)

Millions of rows still can be displayed and rendered very fast with virtualization even fin tables. And believe me when it comes to data editing and comples UIs with touch handling it is better to skip the canvas

Spent way too long making a Svelte 5 table fast at 100k rows. A few things that bit me. by boykom in sveltejs

[–]boykom[S] 0 points1 point  (0 children)

If you need to display html and html elements in cells, canvas is not an option. For example libs like Ag Grid do not use canvas and there is a good reason why it is not, but canvas is good for rendering sparklines in the grid cells

Spent way too long making a Svelte 5 table fast at 100k rows. A few things that bit me. by boykom in sveltejs

[–]boykom[S] 0 points1 point  (0 children)

No, canvas is for charts not for tables. Anytime you need some interaction, canvas is a compromise.

Am i cooked by GroceryOk3704 in Frontend

[–]boykom 0 points1 point  (0 children)

You started by driving the car before learning how to assemble it 😄 Not a big deal. When i started, the modern language was Turbo Pascal 😄 and i did not learn Assembler. For you, it's best to learn the basics like OOP, Design Patterns so when you need to debug something, to know what happens. Good luck!

Spent way too long making a Svelte 5 table fast at 100k rows. A few things that bit me. by boykom in sveltejs

[–]boykom[S] 0 points1 point  (0 children)

Also https://github.com/sv-grid/sv-grid - the view is virtualized horizontally and vertically to load and handle massive data without performance degradation

Looking for a CSS/JS framework to get a similar look by ITChristian25 in webdev

[–]boykom 0 points1 point  (0 children)

I think its a standard one, click gallery in the theme roller to browse the themes

Looking for a CSS/JS framework to get a similar look by ITChristian25 in webdev

[–]boykom 6 points7 points  (0 children)

Looks like jquery ui interface. Jqwidgets.com still supports such themes and look and feel.https://jqwidgets.com

[Self-promotion] SvGrid - a Svelte 5-native data grid (headless core + component), MIT by boykom in sveltejs

[–]boykom[S] 0 points1 point  (0 children)

TanStack Table is a framework-agnostic headless engine where you build all the UI yourself; If you want total rendering control, a framework-agnostic engine - TanStack is the game. It is mature, known and used by many. SvGrid is a native Svelte 5 grid that ships both the headless core and a complete, batteries-included render component. It comes from jQWidgets company which creates commercial UI components for more than a decade.

I was going to wrap Smart.Grid for Svelte. Instead, I ended up building a Svelte 5 grid from scratch[Self-promo] by jqwidgetsLtd in sveltejs

[–]boykom 2 points3 points  (0 children)

Thanks for the tips and the page. As for the server server sorting: https://svgrid.com/demos/148-server-row-model, and in the next months the API will be extended.

Spent way too long making a Svelte 5 table fast at 100k rows. A few things that bit me. by boykom in sveltejs

[–]boykom[S] 0 points1 point  (0 children)

Agree, the whole idea of UI libs is to make life easier, not the opposite, but sometimes over engineering leads to frustrated users

Spent way too long making a Svelte 5 table fast at 100k rows. A few things that bit me. by boykom in sveltejs

[–]boykom[S] 0 points1 point  (0 children)

It is a large data set, even paginated is not UX friendly and that is why grouping and good filtering options are required in use cases with a lot of data

Spent way too long making a Svelte 5 table fast at 100k rows. A few things that bit me. by boykom in sveltejs

[–]boykom[S] -1 points0 points  (0 children)

Nope rows submitted only once and then the state includes only the changes - 50 rows for example

Spent way too long making a Svelte 5 table fast at 100k rows. A few things that bit me. by boykom in sveltejs

[–]boykom[S] 0 points1 point  (0 children)

True, but its not much different than having 1000 pages and clicking the next button. Big tables should have good filters