[Bug Report] Data Table render performance

[rogeralsing]

Environment

Vuetify Version: 2.1.14
Vue Version: 2.6.9
Browsers: Chrome 78.0.3904.108
OS: Mac OS 10.15.1

Steps to reproduce

Click the green button on the Code pen example.
This renders 100 items in the Vuetify Data Table.

Expected Behavior

100 items with buttons and icons is an artificial use case, but the long render time hints that something is not as expected.

I would expect 100 items to render within milliseconds.

Actual Behavior

Render time is within 0.5 - 1 seconds

Reproduction Link

https://codepen.io/rogeralsing/pen/MWYyVXz

[rogeralsing]

Issue seems to be more related to Vuetify base components than the Data Grid itself.

Another codepen here https://codepen.io/rogeralsing/pen/GRgZzZz

This renders the same 100 rows with buttons, but in a simple div.
The performance issue is still there.

Same with other components such as the Vuetify text field.

Replacing the content with standard html buttons makes the render speed as fast as one would expect.

[KaelWD]

It just has way too many props, as well as checking if it's inside a v-btn-toggle. If fab, speed-dial, and toggle button were all split up it would be a lot faster.

[saeedtabrizi]

Is there any update or workaround ? i have same issue unfortunately .

[saeedtabrizi]

Hi @johnleider , i guess this bug related to vuejs/vue#9371 issue .

[KaelWD]

This is about 50% faster now in v3. It still takes around a second with 4x cpu slowdown so if you're targeting mobile devices you should try to avoid rendering thousands of components at once, consider using a recycler list instead.

[devonik]

@KaelWD What do you mean with recycler list? Something like https://vuetifyjs.com/en/components/virtual-scroller/ ? With this component we would have to build pagination and other things needed from data-table isn't it?

I'm looking forward to the new v3 data-table 😃