[Bug Report][3.7.13] VDataTableVirtual: Ui breaks when headers with children exceed 99 entries. (regardless of the amount of children)
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.13
Vue Version: 3.5.13
Browsers: Chrome 133.0.0.0
OS: Mac OS 10.15.7
Steps to reproduce
Create a VDataTableVirtual and bind the headers prop to an array with >=100 entries. If the entries have children, the UI for the table will break.
Expected Behavior
The table displays all the headers with the children under their respective parent
Actual Behavior
After 99 headers, all the children from the upcoming headers will be placed on a new row at the beginning of the table.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
In the interest of keeping it simple, the example I created only has 1 child per header. Up to 99 headers, everything seems fine regardless of the amount of children.
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 VDataTableVirtual implementation and reproduce the issue from the linked Vuetify Playground using a headers array with at least 100 entries, including children. Confirm that the table keeps each child under its parent after the fix and that the existing behavior still works with fewer than 100 headers.
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
- 45/100