Animating an expandable row

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

[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…

[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.