DataTables Responsive - Child row sliding animation
DataTables Responsive - Child row sliding animation
Ozz1k
Posts: 6Questions: 2Answers: 0
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.
This question has an accepted answers - jump to answer
Answers
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
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
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.childelements to avoid bumps in sliding animation.Just an update to this thread - this is the example working with DT2: https://live.datatables.net/qecafuci/149/edit
Colin