What is the best way to display a 360x360 table (129,600 elements)?

Question

JavaScript

It is necessary to display a large table on the page. The contents of the cells are numbers. The cell color depends on the value. At the same time, a field of approximately 20x30 will fit in the viewport. The implementation is supposed to be in Vue. The main request is the speed of work. It is necessary that the user can scroll the table without brakes. In sandboxes after 150x150 slowdowns begin.
Please share your experience. How it is better to implement it? Table or blocks? What to pay attention to? To generate "on the forehead" all at once? Track scroll and show only viewport cells? Render to SVG? Somehow else?

Answer 1

You need to use the approach from https://github.com/tangbc/vue-virtual-scroll-list , if the cells are the same size, then it's easy.

Answer 2

https://github.com/vue-comps/vue-clusterize

Answer 3

Basically, the essence lies behind the load, I think there are a couple of options. It is possible to add a button at which records are loaded there 100-200, well, either the optimal number or when scrolling to do so if possible with Ajax.