Child rows not aligning with parent row

saranya1

I need to display multiple child rows from same dataset as parent row but the columns of child rows not getting aligned with parent row. Please suggest me a solution

rf1234

as per the forum rules please post a test case. thank you.

saranya1

@rf1234 Please find the test case

$('#reportTableId .reportTableBody').on('click','td.details-control', function(){
            var tr = $(this).closest('tr');
            var table1= $('#reportTableId').DataTable();    
            
            var row = table1.row(tr);
            if (row.child.isShown()){
                tr.removeClass('shown');
                row.child.hide();
            } else {
                 const tmpRow = table1.row.add(row.data()).draw().node();
                 const childNode = $(tmpRow).clone(true);

                /**
                 * @description
                 * Append the child to the parent row
                 */
                row.child(childNode).show();
                tr.addClass('shown');

                /**
                 * @description
                 * Remove the `tmpRow` from the table
                 */
                table1.row(tmpRow).remove().draw();
            }
        } );

In this the child row is just blinking and gone

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Here is information on building a running test case:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Why do you have table1.row(tmpRow).remove().draw(); inside the row click event? The draw() part of this is probably why the child row immediately closes.

Kevin