DataTables Responsive - Child row sliding animation

DataTables Responsive - Child row sliding animation

Ozz1kOzz1k 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

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    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

  • Ozz1kOzz1k Posts: 6Questions: 2Answers: 0

    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.

This discussion has been closed.