Table performance issues/Blocking UI

[jcunhafonte]

Overview of the problem

Buefy version: [0.9.2]
Vuejs version: [2.6.11]
OS/Browser: Chrome 85

Description

Buefy Table with 1000 rows has bad performance and blocks UI when mutating columns/data object.

Steps to reproduce

1. Define a data object with 1000 rows
2. Update a certain columns (for instance visibility).
3. Notice the performance decreasing and UI blocked

Expected behavior

I'd expect the performance to be better when rendering/updating a certain column.

Actual behavior

Example JSFiddled:
https://jsfiddle.net/jcunhafonte/e0L8gzxo/13/

[service-paradis]

Maybe you should use Pagination (https://buefy.org/documentation/table#pagination-and-sorting) if you want to display that much data.

[jcunhafonte]

Thank you @service-paradis. Is that the only solution? Can't I have 1000 rows on the same page?

[jtommy]

@jcunhafonte I'll investigate about it, thanks for the example

[jcunhafonte]

@jtommy Virtual scrolling would be a good solution for these elements. Let me know if you need help with it.

[jtommy]

Virtual scroll is a feature in my mind, but I wanted to implement it without external dependencies. You can make a PR or discuss about it on Discord.
Btw I want to investigate on current code to understand if there's a leak or other.

[nockstarr]

Tested this problem "extensively" a year ago and this is a virtual dom problem as far as I can see. You can reproduce the same performance issue (1000+ rows) just by creating a normal html table and try to highlight a selected row. Same problem in all the major vue css component libraries. A Virtual Scroll seems to be the fix in my experience.

[nockstarr]

Any news about Virtual scroll?

[jtommy]

@jcunhafonte news ?

[AcidRaZor]

@jtommy Has any progress been made on virtual scrolling?

[pedrosimao]

Hey, Virtual scroll is really highly needed? Anyone would like to work on this with me?

[jtommy]

@pedrosimao you are welcome

[pedrosimao]

@jtommy what do you think of using this library as an optional prop of b-table component https://github.com/Akryum/vue-virtual-scroller? If you think it might be accepted as a PR I will work on it.

[jtommy]

No, as you can read in the docs and readme I wanted to avoid external dependencies

[pedrosimao]

The library is actually very small, why avoiding it? We could always copy and paste some code from it, but the result is almost the same. Isn't Bulma itself an external dependency?

[jtommy]

Yes, the only dependencies are Vue and Bulma.
I know it might be a big work but I prefer to maintain in this way