DataTables Responsive - Child row sliding animation

Ozz1k

Hi there,

I've been through the forums and found a number of old questions on how to have child rows be expanded and collapsed with a slide animation. Here is an old example of the animation effect I am talking about - https://datatables.net/blog/2014-10-02.

I personally chose to use the DataTables Responsive extension (https://datatables.net/extensions/responsive/), which allowed me to configure and customize everything I needed except this nice animation to slide the child rows down and up as I expand and collapse the parent rows of my table. I am looking for any possible options to get this done while still enjoying the built-in Responsive features.

Here's one related discussion when the author was advised to look into implementing the animation by using a custom Responsive renderer for child rows - https://datatables.net/forums/discussion/37855/sliding-responsive-child-rows I have doubts if that is possible but my JS skills do not allow me to dig much deeper.

I would appreciate any advice, including a reference on how to submit a feature request. I have no doubts I am not alone struggling without a nice sliding animation for Responsive DataTables.

colin

Hi @Ozz1k ,

I just tried to implement a custom render as suggested in that other thread, but it's being a but elusive right now. I'll keep plugging away and hope to report back later today/tomorrow.

Cheers,

Colin

colin

Hi @Ozz1k ,

Here we go - take a look at this. This is pretty much using the code you linked to, but plumbed into the Responsive callbacks.

Hope that does the trick,

Cheers,

Colin

Ozz1k

Hi @colin!

Thank you very much for putting together this example. Worked like a charm for me! Hope others can find this once they face the same need.

One improvement suggestion for your solution - you will want to remove the top and bottom padding from the td.child elements to avoid bumps in sliding animation.

colin

Just an update to this thread - this is the example working with DT2: https://live.datatables.net/qecafuci/149/edit

Colin