Animating an expandable row

[JinwYu]

Current Behavior

I am using this example posted here https://github.com/gregnb/mui-datatables/issues/214#issuecomment-450537961band it is a bit jarring when the table is expanded without a smooth transition. The new table row just appears.

Expected Behavior

Is there a way to animate the transition when a table row is being expanded? Or could it be easily implemented?

I have tried adding a transition by overriding styling as stated in the documentation, by using "createMuiTheme" but I have unfortunately not been able to make it work. My code looks like this:

const getMuiTheme = () => createMuiTheme({ MuiTableCell: { body: { transition: '0.55s', }, }, }, });

I would really appreciate it if anyone can correct me and tell me what I'm doing wrong :)

Thank you for you hard work. I love the tables! 👍

Your Environment

Tech	Version
Material-UI
MUI-datatables
React

[gabrielliwerant]

I think transitions would be a nice feature, and here's my research on the matter.

I found that to animate conditionally rendered items, which is the case with expandable rows, react needs some additional hooks, such as those provided by the react-addons-css-transition-group package. This SO explains it: https://stackoverflow.com/questions/46916118/conditional-rendering-and-reactcsstransitiongroup-animation.

The nex problem would be that the conditionally rendered element needs to be nested inside (I think, directly inside). I believe modifications would have to be made in this file (https://github.com/gregnb/mui-datatables/blob/master/src/components/TableBody.js) to allow that, along with additional options for transitions, which has implications for the API.

Not sure if this constitutes a good first issue for contributions or not, but if so, I can volunteer to work on it.

[JinwYu]

Hi!

Thank you for replying! and thank you so much for researching the issue!

Yes, I agree. Transitions would provide a consistent user experience.

Your findings sound great. I will definitely look into them.

Any work is really appreciated by me at least, so if you decide to work on it and if you make any progress I would be so glad if you could share it with me. Of course, I will share my progress and findings as well. Thanks again sir.

[leducsang97]

I would like to ask if it is possible now to render more than just 1 expandable row?

[samuelhnrq]

Hey been having the same issue lately, not sure if this was a thing back when this issue was opened, but I've had some success using \<Collapse />, it animates in, but then the expansion panel just gets nuked out of existence and can't animate-out I guess if the expansion panel internally used Collapse to render the expansion panel itself, it could wait for the animation to end before removing the expansion panel from the tree.

The tricky thing is, not sure if I'm the only one who noticed this, but currently it seems the expansion panel is slapped right into \<tbody> which has been screaming at me if I try anything other than \<tr>\<td> (which he is right to do it's against HTML's specification). What I mean is that we would need first to surround that with a tr and a td with 100% colspan and then render the collapse and then the expansion panel.

That will be a breaking change IMHO and require a major bump... Not sure how would @patorjk like that... Would love to work on this though.

[patorjk]

I'm not sure how I'd feel about a version bump for a single feature. I'd be curious if there was a way to add a modifier option though that would give expandableRows the behavior you describe. And if this option was true, then expandableRows would work a little differently and allow the collapse/expand animation.

[samuelhnrq]

Okay, so the expand: true option would need a little magic other than simply using or not collapse, other than making the API a little too magical, seems a fine compromise to make. Might send a PR on this...

[kashish-fatima0219]

hello has there been an update on this?