Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report][3.4.8] VDataTableVirtual displays only one row after reloading of items #18926

Closed
09Skyfall opened this issue Dec 24, 2023 · 8 comments
Labels
S: stale This issue is untriaged and hasn't seen any activity in at least six months. S: triage

Comments

@09Skyfall
Copy link

Environment

Vuetify Version: 3.4.8
Vue Version: 3.4.0-beta.4
Browsers: Chrome 120.0.0.0
OS: Windows 10

Steps to reproduce

  1. Scroll down the list until virtualization is 'activated' (as in, rows start to be replaced in the dom)
  2. Set the items to an empty array and subsequently to a new array with new items (to mimic a fetch)

After this, only one item is displayed but if you start scrolling the items appear again.

Notice that this happens even if items is not set to an empty array but instead any array that won't completely fill the displayed table. In this case, the table will display as many rows as the length of the array assigned to items before the fake fetch.

Expected Behavior

The table should be completely filled

Actual Behavior

The table only shows 'n' items where n is the length of the array (or 1 if the array is empty) that is first assigned to items before the fetch result is assigned

Reproduction Link

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

@UglyHobbitFeet

This comment was marked as duplicate.

@UglyHobbitFeet
Copy link

Hi, is there any eta for this being fixed? Thanks!

@IceflowRE
Copy link

IceflowRE commented Feb 29, 2024

Virtual Scroll has the same issue:

Vuetify Version: 3.5.6
Vue Version: 3.4.21

https://play.vuetifyjs.com

@IceflowRE
Copy link

IceflowRE commented Feb 29, 2024

The issue only occures while refreshing while the scrollbar is not at the top.

@github-actions github-actions bot added the S: stale This issue is untriaged and hasn't seen any activity in at least six months. label Aug 30, 2024
@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Sep 15, 2024
@grolu
Copy link

grolu commented Oct 11, 2024

I have a similar issue. This also happens when filtering the table. See this reproduction link: Vuetify Playground

You can either reduce the items using the switch or filter the items using the text input. In both cases the table will not render all items after resetting the switch / filter text. This only happens when the scroll position is not initial (at the top). The issue resolves itself if you start scrolling the table.

I hope that this issue gets some attention as it is blocking our feature right now. It is not even categorized as bug yet. I'll open a new issue for this.

@09Skyfall
Copy link
Author

@grolu A simple fix for this is refreshing the table component with a key when its items change. Although not a good solution, it should work. See example in vuetify playground

@grolu
Copy link

grolu commented Oct 11, 2024

@09Skyfall Thank you for proposing this. However we have real-time data. Most of the time the item data changes. Sometimes items are deleted or added. However, we also have views where items are added and removed more frequently as we only show items with a certain (temporary) classification, e.g. error state. Changing the table key would trigger a rendering of the items and also reset the scroll position. So this won't work in our case.

@09Skyfall
Copy link
Author

@grolu I see. Hopefully this issue gets some attention.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
S: stale This issue is untriaged and hasn't seen any activity in at least six months. S: triage
Projects
None yet
Development

No branches or pull requests

4 participants