vuetifyjs / vuetifyjs/vuetify

[Bug Report][3.8.3] VDataTableVirtual does not show correct number of rows when height is implicitly changed while hidden with v-show

Open
#21,372 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

C: VDataTableVirtual T: bug
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
  1. Create a virtual table inside a container with a fixed size. Set max-height style to be based on containers height (for example 100%). Set item-height prop to height of rows (56 for default density).
  2. Use v-show to hide the table.
  3. Increase the height of the container
  4. Unhide the table
For reproduction link:
  1. Toggle switch to hide the table
  2. Increases the table size to 1500px
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.