Level 70
Sep 28, 2016
9
Level 2
Handling large dataset (1000+) in VueJS
So for the app which I am working on, I am looking at a large data set to be presented in a table format, using VueJS. How large? Well, try around ~1000 rows. I tried a naive implementation first, and at around 500 rows the page already takes about 30 seconds to 1 minute to load. I suppose I can do lazy loading (using AJAX to retrieve more data at a certain event trigger), but that doesn't make the data searchable via the frontend. What other strategies or patterns exist?
Level 2
Looks good, though how do I use it with Vue, or it is stand-alone?
Edit: As it turns out, there's a implementation for Vue : https://github.com/vue-comps/vue-clusterize
Level 16
Beware that it is for Vue 1.0, there seems to be nothing that really works for Vue 2.
Level 80
@Extrakun Don’t. Just load what you need in the initial view, and then load any additional data via AJAX requests.
This isn’t a “Vue”-specific issue. Loading that much data will put strain on web browsers (and the number of nodes it can hold in memory) and spike the RAM usage on your users’ devices. The problem’s just going to be exasperated on devices like smartphones and tablets that have lower amounts of memory, and potentially cripple those devices.
Doing things on the front-end doesn’t mean you get a free pass at having to worry about performance issues. In fact, probably the exact opposite!
Level 18
You can use use vuejs, a searchable table, and ajax all together to only have to show 10,25,100, all whatever you see fit in the display numbers.
You can also allow a search via ajax just the same as doing lazy loading and allowing pagination. You can also do the same for sort.
You are not limited to just paging with ajax, vue, and laravel. Id advise going down this path. Alternatively (and I advise against) you could use a server side jquery datatable, though I have come to dislike jquery datatables in favor of a custom built vuejs datatable plugin.
Level 9
lazy loading for the win on this
the search field could send search request to the backend. DataTables.net does this pretty seamlessly (jQuery) but right tool for the job
Level 8
Adding to the response from @Spillmester there is a nice package for Laravel to ease the implementation of DataTables: yajra/laravel-datatables
Search and pagination are handled server-side through AJAX.
Bootstrap 3 theme included.
This is not VUEjs, but if all you want is to show a table with pagination and searchable, I think as well that using DataTables would be your best solution.
Level 1
One cluserizejs like for Vue 2
Level 47
paginate it
Please or to participate in this conversation.