Sliding animation for sub rows in a table - html

Question

I want to add a sliding animation for sub rows inside a table structure. When using the div tag inside a table, it does not works like a div outside of the table structure. The animation is missing and it is formatting every sub td in the first td of the parent row.
Source code - here the StackBlitz example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr (click)="show = !show">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<ng-container *ngIf="show">
<div class="box" [class.opened]="show">
<tr>
<td>Sam</td>
<td>Sample</td>
<td>35</td>
</tr>
<tr>
<tr>
<td>Piet</td>
<td>Miller</td>
<td>42</td>
</tr>
</div>
</ng-container>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<div style="margin-top: 20px" class="box" [class.opened]="show">
Here the animation is working proper. <br> <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque ornare aenean euismod elementum nisi quis eleifend. Vivamus at augue eget arcu dictum. Dui sapien eget mi proin sed libero enim sed faucibus. Justo laoreet sit amet cursus sit amet dictum sit. Varius sit amet mattis vulputate. Lorem ipsum dolor sit amet consectetur adipiscing elit. Convallis tellus id interdum velit laoreet id donec ultrices. Tempus urna et pharetra pharetra massa massa. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Semper auctor neque vitae tempus quam pellentesque nec nam. Mauris nunc congue nisi vitae suscipit tellus mauris. Eget magna fermentum iaculis eu. Mi in nulla posuere sollicitudin. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Nam libero justo laoreet sit amet. Aliquam faucibus purus in massa. Velit ut tortor pretium viverra suspendisse potenti nullam ac.
</div>
CSS
.box {
background-color: #FFCC55;
max-height: 0px;
overflow-y: hidden;
transition: ease-in-out 400ms max-height;
}
.box.opened {
max-height: 500px;
transition: ease-in-out 600ms max-height;
}

Answer 1

You only have to remove 'ng-container'. It will solve your problem.
Replace this code
<ng-container *ngIf="show">
<div class="box" [class.opened]="show">
<tr>
<td><div>Sam</div></td>
<td><div>Sample</div></td>
<td><div>35</div></td>
</tr>
<tr></tr>
<tr>
<td><div>Piet</div></td>
<td><div>Miller</div></td>
<td><div>42</div></td>
</tr>
</div>
</ng-container>
With this one
<div class="box" [class.opened]="show">
<tr>
<td><div>Sam</div></td>
<td><div>Sample</div></td>
<td><div>35</div></td>
</tr>
<tr></tr>
<tr>
<td><div>Piet</div></td>
<td><div>Miller</div></td>
<td><div>42</div></td>
</tr>
</div>
If you want 'ng-container' should be in your code then put it inside of div (which has the class box). But it slows your animation.

Answer 2

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr (click)="show = !show">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<ng-container *ngIf="show">
<tr class="box" [class.opened]="show">
<td><div>Sam</div></td>
<td><div>Sample</div></td>
<td><div>35</div></td>
</tr>
<tr>
<td><div>Piet</div></td>
<td><div>Miller</div></td>
<td><div>42</div></td>
</tr>
</ng-container>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<div style="margin-top: 20px" class="box" [class.opened]="show">
Here the animation is working proper. <br> <br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque ornare aenean euismod elementum nisi quis eleifend. Vivamus at augue eget arcu dictum. Dui sapien eget mi proin sed libero enim sed faucibus. Justo laoreet sit amet cursus sit amet dictum sit. Varius sit amet mattis vulputate. Lorem ipsum dolor sit amet consectetur adipiscing elit. Convallis tellus id interdum velit laoreet id donec ultrices. Tempus urna et pharetra pharetra massa massa. Tempor commodo ullamcorper a lacus vestibulum sed arcu non odio. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Semper auctor neque vitae tempus quam pellentesque nec nam. Mauris nunc congue nisi vitae suscipit tellus mauris. Eget magna fermentum iaculis eu. Mi in nulla posuere sollicitudin. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Nam libero justo laoreet sit amet. Aliquam faucibus purus in massa. Velit ut tortor pretium viverra suspendisse potenti nullam ac.
</div>
well removed the div from ur table!

Answer 3

I am not quite sure how angular works, but here is the correct way you should implement a collapsible row; just add a new row and a <td colspan="100"> so that this cell expands to the full table width and insert your content there:
<tr>
<td colspan="100">
<div class="box">
your markup here
</div>
</td>
</tr>

Answer 4

Please refer the below URL for the complete reference for your( #FanaticTyp ) expandable tableview.
https://datatables.net/blog/2014-10-02
Script
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<div class="slider">'+
'<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>'+
'</div>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "/examples/ajax/data/objects.txt",
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
$('div.slider', row.child()).slideUp( function () {
row.child.hide();
tr.removeClass('shown');
} );
}
else {
// Open this row
row.child( format(row.data()), 'no-padding' ).show();
tr.addClass('shown');
$('div.slider', row.child()).slideDown();
}
} );
} );
Expanded View Design
<div class="slider">
... Data to be shown ...
</div>
<style>
div.slider {
display: none;
}
td.details-control {
background: url('/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('/examples/resources/details_close.png') no-repeat center center;
}
div.slider {
display: none;
}
table.dataTable tbody td.no-padding {
padding: 0;
}
</style>