MatthewAry
commented
4 days ago I have noticed some perf issues with data tables in the past. However, you should be aware that input components when used in this way can be heavy. Each row has 6 different input components which can put quite a strain on things. If perf is paramount, you could try putting an edit button on each row, which when clicked will replace the cells with input field components. This should greatly speed things up I think.
Often it's a best practice to keep the contents of your rows fairly simple. What you're doing wouldn't recommended. Using VDataTableVirtual is a great idea though. It should help lower the DOM overhead in exchange for computation on scroll. I opened up your reproduction and saw it render in < 1 second, however my machine is fairly beefy.
Last parting thoughts. If you really want perf for this use case, you'll probably want to try something else. I eventually settled on using tabulator for this kind of thing over using VDataTable with VInputField, VSelect, VAutocomplete, VCombobox, etc.
I'll leave this issue open for now though. The team might be able to use this to find opportunities for perf improvements.
Environment
Vuetify Version: 3.7.3 Vue Version: 3.5.12 Browsers: Chrome 129.0.0.0 OS: Mac OS 10.15.7
Steps to reproduce
Create a data-table inside of v-dialog, with more than 100 items
Expected Behavior
not to lag and not to stuck on open and scroll in case the virtual is used.
Actual Behavior
the tab becomes unresponsive on open. The items are not being rendered on scroll in time and it takes ~ 1-2 seconds for them to appear.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
maybe there is a limit for v-data-table, IMHO 200 items is very small amount of data for that component. I tried use v-data-virtual however the difference is 300-400 ms not much difference