Vuetify: [Enhancement] Allow disable transition for VDataTable expand row

[pwang2]

What problem does this feature solve?

As requested here https://github.com/vuetifyjs/vuetify/issues/2890, expand all is quite helpful to implement some treeview rows.

The current transition of expand rows makes workaround solution like https://codepen.io/anon/pen/aEJeVo perform very slow. I saw 300ms Recalculate Style in performance profiler.

What is your proposed solution?

Expose the transition as an props to opt in by user.

[KaelWD]

Use css for this.

Also, I'm not seeing any performance issues in your example.

[pwang2]

@KaelWD , Thanks for replying. Could you help clarify what do you mean by use css for this?

In my case for a nested table with 200 rows(maximum 3 levels, 20 columns), use dropdown select to re-grouping the rows takes 500ms to display the transitions.

in the code here, https://github.com/vuetifyjs/vuetify/blob/cf90d333b76f5f69f3f2ad48db40a8f293e5610a/src/components/transitions/expand-transition.js#L16. scrollHeight access will reflow the whole DOM again and again. This is a huge performance issue even in a not so extreme scenario.

ref: https://gist.github.com/paulirish/5d52fb081b3570c81e3a

[pwang2]

To be clear, single row expand will not be an issue. The bottleneck comes with the expandAll workaround code here https://codepen.io/anon/pen/aEJeVo.

  for (let i = 0; i < this.items.length; i += 1) {
      const item = this.items[i];
      this.$set(this.$refs.dTable.expanded, item.name, true)
    }

[pwang2]

More information here FYI.

Besides vuetify's transition, vue's global update lifecyle method also adds a unconditional getTransitionInfo getComputedStyle hard query for all browser better than IE9 which aggravated the situation here. In short, we can not overburden it by adding transition too much element here.

https://github.com/vuejs/vue/blob/b7445a2b945dcded287601ace8e711ab5cf35ab5/src/platforms/web/runtime/transition-util.js#L124

[husayt]

This is affecting us too, is there any workaround for time being?

[jacekkarczmarczyk]

@pwang2 expand transition has been refactored in 1.3.10, is the issue still valid?

[KaelWD]

New codepens with more rows:
0.17: https://codepen.io/anon/pen/GwLMEX?editors=1010
1.3: https://codepen.io/anon/pen/VVNMzX?editors=1010

Seems the new transition is even slower, because it has to reflow the page twice for each element. I wonder if we could batch the reflows with requestAnimationFrame somehow so it only has to be done once for the whole page.

[pwang2]

@jacekkarczmarczyk, sorry for the so late response. I quick checked the code and it seems the performance issue is still there.
@KaelWD , please let me know if you need any help from my side. I finally have some change to working on a related project again.

[amanbolat]

I have same problem. My application have VTable with 100 rows. Even expanding a single row will create some lag.

[AakifMushtaq]

@amanbolat This is what I did to get rid of the transition because we didn't really need that effect. Not sure if this is the right solution but it worked for me.
.v-datatable__expand-content { transition: unset !important; }

[jacekkarczmarczyk]

v-data-table doesn't have transition on expanded row in 2.x, see https://github.com/vuetifyjs/vuetify/issues/8197