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