buefy
Table performance issues/Blocking UI
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
- Define a data object with 1000 rows
- Update a certain columns (for instance visibility).
- 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/
Maybe you should use Pagination (https://buefy.org/documentation/table#pagination-and-sorting) if you want to display that much data.
Thank you @service-paradis. Is that the only solution? Can't I have 1000 rows on the same page?
@jtommy Virtual scrolling would be a good solution for these elements. Let me know if you need help with it.
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.
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.
Hey, Virtual scroll is really highly needed? Anyone would like to work on this with me?
@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.
No, as you can read in the docs and readme I wanted to avoid external dependencies
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?
Yes, the only dependencies are Vue and Bulma. I know it might be a big work but I prefer to maintain in this way