[Bug Report][3.7.2] v-data-table-virtual jumps rows if a cell has content with dynamic height
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.7.2
Vue Version: 3.5.9
Browsers: Chrome 128.0.0.0
OS: Mac OS 10.15.7
Steps to reproduce
- Place content in v-virtual-data-table cell of different sizes (making the row heights dynamic).
- Cause the computed property populating the items prop to recalculate.
- Notice the table jumps off the row you were on
Expected Behavior
The virtual data table should handle dynamic heights and stay on the the row when an edit occurs.
Actual Behavior
The visible row jumps significantly leading to a bad user experience.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
Content is dynamic so setting a fixed height is not viable.
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 v-data-table-virtual behavior described in the issue, focusing on the computed property that recalculates the items prop. Reproduce the jump with dynamically sized cell content; done means the table preserves the current visible row after an edit or items recalculation without requiring a fixed height.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100