[Bug Report][3.4.4] VDataTableVirtual renders all rows when items are updated

[ttonyh]

Environment

Vuetify Version: 3.4.4
Last working version: 3.3.23
Vue Version: 3.3.9
Browsers: Firefox 119.0, Google Chrome
OS: Linux x86_64

Steps to reproduce

1. Create a ref with empty array
2. Assign it to VDataTableVirtual's :items prop
3. Create a setTimeout and update the ref variable in step 1 with a large number of items
4. Inspect the DOM of the .v-table tbody and count the rows or use the following: document.querySelector('.v-table tbody').querySelectorAll('tr').length in the console

NOTE: This seems to have broken AFTER 3.4.0

Expected Behavior

Only visible rows should render at once.

Actual Behavior

All rows render.

Reproduction Link

UPDATED: https://play.vuetifyjs.com/#...

OLD: https://play.vuetifyjs.com/#...

[shengzhou1216]

+1

[ttonyh]

This looks like it may have been resolved in v3.4.5. @shengzhou1216 Can you please confirm?

[shengzhou1216]

This looks like it may have been resolved in v3.4.5. @shengzhou1216 Can you please confirm?

I have tested the issuse in v3.4.5 and v3.4.6, it seems that the problem still persists.

[ttonyh]

@shengzhou1216 I saw your commit and tried to add the following prop to the VDataTableVirtual, and it had the same effect:

<v-data-table-virtual :item-height="16"></v-data-table-virtual>

Updated Playground Link

[ttonyh]

Temporary workaround posted above seems to work intermittently.

[nanjarapalli]

+1 Waiting for official fix
@ttonyh Thanks temporary solution worked

[tilenpirih]

one temporary solution that worked for me is to rerender v-data-table-virtual when items are updated by using :key property. Every time length changes it rerenders the component.

<template>
  <v-data-table-virtual
    :headers="headers"
    :items="boats"
    height="400"
    item-value="name"
    :key="boats.length"
  ></v-data-table-virtual>
</template>```

[IceflowRE]

Same issue for VirtualScroll

https://play.vuetifyjs.com