4

I'd like you to recommend me a package that can take advantage of a virtual scroll / recycler scroll for a table in Vue.

I tried these two libraries:

I was able to generate a virtual scrolling list of items, but I'd like to implement this kind of behavior for a table.

My table is a Vuetify Simpletable, which has a <thead> and a <tbody> component

Dusan
  • 3,284
  • 6
  • 25
  • 46
  • 1
    Why doesn't `vue-virtual-scroller` work for you? See this tutorial https://www.digitalocean.com/community/tutorials/vuejs-vue-virtual-scroller. If it doesn't work based on how the component is set up, maybe you need a different table component. – stellr42 Nov 23 '22 at 15:03
  • 1
    You also may try to use a pure js virtual scroll engine https://github.com/dhilt/vscroll. The example of its integration with Vue is here: https://stackblitz.com/edit/vscroll-vue-integration?file=App.vue -- just replace divs with table stuff – dhilt Nov 23 '22 at 16:55

1 Answers1

0

I looked at 2 virtual tables for Vue 3. Element Plus has one that is currently beta. I urge caution using it since I was getting event errors when I tested it and it is beta still. https://element-plus.org/en-US/component/table-v2.html

I ended up going with Ag-grid data table. It is very well regarded and the performance is awesome. I loaded 5k rows of complex data into it and using filters with computed values it updated in milliseconds. I used the free community version. There is a paid commercial version also if you need support. https://www.ag-grid.com/vue-data-grid/getting-started/

mbokil
  • 3,202
  • 30
  • 22