[Bug Report][3.8.3] VDataTableVirtual does not show correct number of rows when height is implicitly changed while hidden with v-show
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 41k
- Forks
- 7.1k
- Avg merge
- 1d 21h
- Merged PRs (30d)
- 11
Description
Environment
Vuetify Version: 3.8.3
Vue Version: 3.5.13
Browsers: Chrome 136.0.0.0
OS: Windows 10
Steps to reproduce
- Create a virtual table inside a container with a fixed size. Set
max-heightstyle to be based on containers height (for example100%). Setitem-heightprop to height of rows (56 for default density). - Use
v-showto hide the table. - Increase the height of the container
- Unhide the table
For reproduction link:
- Toggle switch to hide the table
- Increases the table size to 1500px
- Toggle switch to show the table
The table only shows up to row 14 after being unhidden. If you scroll the table at all, it updates and shows the correct number of rows. Need to destroy and recreate table to recreate issue a second time (can refresh page).
Expected Behavior
Table shows correct amount of rows to fill the visible table
Actual Behavior
Table shows too few rows resulting in empty space in the table
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
The item-height prop seems to have an effect on this issue. It needs to be set to get around this bug, but even with it unset, the issue is still present, just need the change in size to be much larger to be observed. In reproduction link, can change the height to 15000px, and then only up to row 50 will be visible until the table is scrolled.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction and the VDataTableVirtual component, focusing on its sizing and visible-row calculation when hidden with v-show and later resized. Verify the behavior with item-height set and unset: after unhiding, the table should show enough rows to fill the visible height without requiring a scroll.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100