[Feature Request] Add expanded slot transition to VDataTable

[Pazza]

Environment

Vuetify Version: 2.0.3
Last working version: 2.0.0-beta.5
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Mac OS 10.14.5

Steps to reproduce

Create a data-table with an expanded-item slot.

Expected Behavior

apply v-expand-transition

Actual Behavior

No transition.

Reproduction Link

https://codepen.io/pazza/pen/ZgKQNa

Other comments

Including the v-expand-transition element manually does not produce expected result.

Documentation for v-expand-transition states that it is used in this application.

[nekosaur]

I forgot to add this to the upgrade guide. Transition was removed for 2.0. The solution in 1.5 required us to define both tr and td (with a colspan equal to header length), always show this row with height zero until transition was triggered, and place the slot inside all of this. It meant that developers had no way of defining individual columns in expanded row, and that we were always showing expanded rows (so things like css nth-child(odd/even) did not work as expected).

Some kind of userland solution should be possible, although it might require a few tweaks from our end. I will try to investigate.

[zherman91]

Hello @nekosaur,
Is there any update on this by chance? I am running into the same issue. Any help provided is greatly appreciated. Thanks!

[Webifi]

Looking for an update on this as well. I'm migrating an old Vuetify 1.x app to 2.x and the client was disappointed that the expand transition on v-data-table was missing.

Tried a few methods of getting a transition after/before the creation/removal of the expanded content but, especially when using single-expand, I really can't find a great way to deal with it.

[nekosaur]

Unfortunately I have not had time to look into user land solutions.

[Webifi]

Thanks.

I've managed to bolt something on, but it's far too ugly and overly complicated for me to want to show here. Involves timeouts and implementing single-expand in "user land" instead of using Vuetify's.

Seems like it would be much cleaner for it to be implemented in vuetify rather than having to hack something on.

[Webifi]

It's not pretty, but here's an example of how I did it:
https://codepen.io/webifi/pen/ExxmXbJ?editors=1010

[johnleider]

As this was intentionally removed, marking as a feature. Also this does not work on 2.0.0-beta.5.

[cvidalsastre]

having the same issue
Is there a solution for this problem?
i tried using the transition component but isn't working ;S

[Webifi]

@peronvidal See my codepen example above. It's a bit more complicated than just using the transition component.

[EJMarrero]

Is there any update about this problem?