Animation that allows for smooth sliding of sub rows within a table

Question

Animation that allows for smooth sliding of sub rows within a table

I am trying to implement a sliding animation for sub rows within a table structure. However, I have noticed that when using the div tag within a table, the animation does not work as expected compared to using the div outside of the table structure. The animation seems to be missing and it is formatting every sub td in the first td of the parent row.

You can find the source code for this issue in the following 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;
    }

html css angular css-animations

Answer 1

Answer №1

To fix the issue, all you need to do is remove the 'ng-container' tag from your code.

Here is the code before:

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

And here is the updated code:

    <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 still want to use 'ng-container', place it inside the div with the class box. However, keep in mind that this may slow down your animation.

Answer 2

To fix the issue, all you need to do is remove the 'ng-container' tag from your code.

Here is the code before:

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

And here is the updated code:

    <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 still want to use 'ng-container', place it inside the div with the class box. However, keep in mind that this may slow down your animation.

Answer 3

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>

Here is a table without the wrapping div!

<div style="margin-top: 20px" class="box" [class.opened]="show">
    The animation works well here.  <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 4

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

Here is a table without the wrapping div!

<div style="margin-top: 20px" class="box" [class.opened]="show">
    The animation works well here.  <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 5

Answer №3

I don't have a complete understanding of how angular operates, but I can show you the proper method for implementing a collapsible row. Simply include another row and a <td colspan="100">, allowing this cell to stretch across the entire table width. Place your content inside this section:

<tr>
  <td colspan="100">
    <div class="container">
      insert your markup here
    </div>
  </td>
</tr>

Answer 6

I don't have a complete understanding of how angular operates, but I can show you the proper method for implementing a collapsible row. Simply include another row and a <td colspan="100">, allowing this cell to stretch across the entire table width. Place your content inside this section:

<tr>
  <td colspan="100">
    <div class="container">
      insert your markup here
    </div>
  </td>
</tr>

Answer 7

Answer №4

To get a comprehensive guide on how to create an expandable tableview, please visit the following URL:

https://datatables.net/blog/2014-10-02

Custom Script

/* Customize this function to format row details as needed */
function customFormat ( data ) {
    // 'data' represents 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>'+data.name+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extension Number:</td>'+
                '<td>'+data.extn+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extra Info:</td>'+
                '<td>Add any additional details here (such as images)...</td>'+
            '</tr>'+
        '</table>'+
    '</div>';
}

$(document).ready(function() {
    var exampleTable = $('#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']]
    } );

    // Event listener for expanding and collapsing row details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = exampleTable.row( tr );

        if ( row.child.isShown() ) {
            // Close the already open row
            $('div.slider', row.child()).slideUp( function () {
                row.child.hide();
                tr.removeClass('shown');
            } );
        }
        else {
            // Open the selected row
            row.child( customFormat(row.data()), 'no-padding' ).show();
            tr.addClass('shown');

            $('div.slider', row.child()).slideDown();
        }
    } );
} );

Enhanced View Styling

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

Answer 8

To get a comprehensive guide on how to create an expandable tableview, please visit the following URL:

https://datatables.net/blog/2014-10-02

Custom Script

/* Customize this function to format row details as needed */
function customFormat ( data ) {
    // 'data' represents 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>'+data.name+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extension Number:</td>'+
                '<td>'+data.extn+'</td>'+
            '</tr>'+
            '<tr>'+
                '<td>Extra Info:</td>'+
                '<td>Add any additional details here (such as images)...</td>'+
            '</tr>'+
        '</table>'+
    '</div>';
}

$(document).ready(function() {
    var exampleTable = $('#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']]
    } );

    // Event listener for expanding and collapsing row details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = exampleTable.row( tr );

        if ( row.child.isShown() ) {
            // Close the already open row
            $('div.slider', row.child()).slideUp( function () {
                row.child.hide();
                tr.removeClass('shown');
            } );
        }
        else {
            // Open the selected row
            row.child( customFormat(row.data()), 'no-padding' ).show();
            tr.addClass('shown');

            $('div.slider', row.child()).slideDown();
        }
    } );
} );

Enhanced View Styling

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

Animation that allows for smooth sliding of sub rows within a table

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Dealing with a vast Angular 12 project - what strategies can I employ to handle JavaScript files

Guide to accessing a menu through Long press or Right click in Angular2

Using Angular's ng-repeat directive without the need for an HTML element

Adjust selections in dynamic reactive forms with mat-select updates

Creating a customized design for your jQuery UI modal dialog box using CSS

Discover the power of jQuery: Incorporating unique dynamic inputs within dynamic divs

Tips for creating extra space on both sides of a Bootstrap container

Modify HTML tags based on the sum of <li> elements using jQuery

Sometimes onblur is triggered repeatedly, other times it doesn't fire at all

Steps for modifying the [disabled] attribute of an Angular element

Deactivate Pagination with a Button-Based Approach

You can tab through form input boxes on an Adobe Muse website, but they cannot be clicked

Error in Angular: Attempting to read the length property of null within a Promise subscribe() operation

transforming bootstrap 3 column into bootstrap 2

Thymeleaf causing Spring IO POST form to redirect to incorrect URL

What is the best way to eliminate a selector from Html.TextBoxFor?

Facebook pages that exceed 700px in length without the need for scrollbars

The design of the Angular2 bootstrap navbar is very underwhelming

Struggling to implement a Datepicker in the date column of a table created using HTML and JavaScript

What is the best way to utilize CSS 'ids' with server controls in ASP.NET?