Usage with vue

[jonatan-zint-tfs]

Hello!

I'm currently trying to setup a working virtualized table with vue. I recognize that there's still some work to, as there are no docs. However I tried to take a dive in and figured if I have a proper understanding I can even write up the examples and make a PR.

However I'm somewhat stuck. I got it working, but it doesn't seems right to me. It seems that the functioniality is fundamentally dependent on the result of virtualizer.getVirtualItems() being reactive. As I can't find a proper way to get them reactive from vue-virtual I resorted re-evaluation getVirtualItems() on scroll, see here

So what am I getting wrong here? Is there a way to get the virtual items reactively or is it just missing in the vue wrapper and need to be fixed?

Tagging some contributors who worked on the wrapper @PerpetualWar @s-montigny-desautels @salqueng

[PerpetualWar]

I haven't tried to implement vue-virtual in context of the table so far, but maybe this example can help understand the general approach and usage: https://codesandbox.io/s/virtual-test-vue3-3x1gnv?file=/src/App.vue:1385-1403

[PerpetualWar]

I'm not sure why you use it in onMounted , then unref it and put in another ref. It seems you are changing native reactivity with some of your own, and less optimized at that (as underneath wrapper uses shallowRef - mainly for performance improvements).

This is how I use it

const virtualizerOptions = computed(() => {
      return {
        count: items.value.length,
        getScrollElement: () => filterScrollContainer.value,
        estimateSize: () => 40,
        overscan: 10,
        // getItemKey: index => {
        //   return props.selectedItems[index].value;
        // },
        debug: true,
      };
    });
    const virtualizer = useVirtualizer(virtualizerOptions);

    const virtualItems = computed(() => virtualizer.value.getVirtualItems());

And you do not even need to to this last step of making computed, I think in v-for you can directly call v-for=item of virtualizer.getVirtualItems() and it should work just the same imo (need some confirmation though).

[PerpetualWar]

@jonatan-zint-tfs I reworked your example like this: https://codesandbox.io/p/sandbox/vur-table-with-vue-virtual-example-93jih3?selection=%5B%7B%22endColumn%22%3A28%2C%22endLineNumber%22%3A125%2C%22startColumn%22%3A28%2C%22startLineNumber%22%3A125%7D%5D&file=%2Fsrc%2FApp.vue

[jonatan-zint-tfs]

Brilliant, my composition api skills were obviously rusty. unreffing the virtualizer was basically disabling reactivity. I thought I needed to wait for component mount to use the scroll container ref. But computing the options and using the container ref as computation ref is of course the right way, also leading to a working example. Thanks a ton.

I think now I feel competent to write a proper example. I'll come up with a PR next week.