Hello all,
This is my post and I wrote this to seek some help or advice from you. I am rendering a table in which the header and rows are dynamic. Each cell is a different Vue component. The cell is a select drop-down and the options can contain 10k items. I have started testing this table with larger dataset say 100 thead and 50 rows. Each cell has about 5k options. The page becomes simply unresponsive. How would I tackle this situation? Should I load dataset in the cell only when focused? Moreover, when I click on the drop-down, it takes time to expand and retract.
Top comments (4)
Have you looked at using a virtual scroller? github.com/Akryum/vue-virtual-scro...
Your issue, as you suspect, is that you have far too many components/DOM elements for the browser to render efficiently so you need to chunk them and only load what's relevant.
Yes I have already looked upon it and will try to implement it. Thanks for your reply.
Select dropdown with 10k items is bad. You should create your own with virtual scroll (render on scroll), and perhaps caching.
Definitely need some kind of virtual scroll. Will try to use Vue virtual scroller