Animated Row Details

rpmccormick

@colin

I was trying to implement slide-open row details. I saw you have worked on this before:
https://datatables.net/forums/discussion/52735/datatables-responsive-child-row-sliding-animation

I implemented your code:

function DTformat(api, rowIdx, columns)  
   {var data = $.map(columns, function(col, i) 
                               {return col.hidden ?
                                  '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
                                    '<td><b>' + col.title + '</b></td> ' +
                                    '<td>' + col.data + '</td>' +
                                  '</tr>' :
                                  '';
                               }
                    ).join('');
    return data ? '<div class="slider"><table>' + data + '</table></div>' : undefined;
   }

//$dtResponsive   = 'responsive: {orthogonal: \'responsive\'}, deferRender: true, ';
  $dtResponsive   = 'responsive: {details: {renderer: function(api, rowIdx, columns) '
                  .                                   '{var data = DTformat(api, rowIdx, columns); '
                  .                                    'return data ? data : false; '
                  .                                   '}, '
                  .                         'display: function(row, update, render) '
                  .                                   '{if (update) '
                  .                                     '{if ($(row.node()).hasClass(\'parent\')) '
                  .                                       '{row.child(render(), \'child\').show(); '
                  .                                        '$(\'div.slider\', row.child()).slideDown(0); '
                  .                                        'return true; '
                  .                                       '} '
                  .                                     '} '
                  .                                    'else '
                  .                                     '{if (!row.child.isShown()) '
                  .                                       '{row.child(render(), \'child\').show(); '
                  .                                        '$(row.node()).addClass(\'parent shown\'); '
                  .                                        '$(\'div.slider\', row.child()).slideDown(); '
                  .                                        'return true; '
                  .                                       '} '
                  .                                      'else '
                  .                                       '{$(\'div.slider\', row.child()).slideUp(function() '
                  .                                                                              '{row.child(false); '
                  .                                                                               '$(row.node()).removeClass(\'parent shown\'); '
                  .                                                                              '} '
                  .                                                                            '); '
                  .                                        'return false; '
                  .                                   '} } }'
                  .             '}         }, deferRender: true, ';

There is the slide-closed animation I want, but there is no slide open animation.

Also the detail row contents look totally different with the headers on the left (I kinda like it for desktop, but I would need to re-design, and I need to stick to the vertical layout if the details row is opened on mobile).

What is the current recommended way to slide-open/close a responsive details row (without changing the layout)? When there are multiple tables with multiple open details rows on a single page, the animation really helps users.

colin

There's an example in that original link you referred to - could you update that please to show what you've done so far. It would be easier to use that as the starting point, and then we can compare the behaviour of the open and close.

Colin

colin

Ignore that, I noticed the example didn't work with DT2 - so I've updated it: https://live.datatables.net/qecafuci/149/edit

Here, the sliding seems to work for both open and close. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Colin