How to add a sub-row to a child row in Datatables

user_15500092 0
Viewed 5333

I would like to add a new sublevel to my secondary row on a table that I have made with the help of Datatables, this time I want to generate a new child to my secondary row, I attach an example with which I want to explain and that I found from Datatables which is a what I want to get to, I just get a bit confused by the syntax used here and the one I use in my current code.

I attach the Javascript code with which I build my Datatable with a single child row:

/* Formatting function for row details - modify as you need */
function format1(d) {
    // `d` is the original data object for the row
    console.log(d);      

      let tabla = `<table cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                    <thead>
                        <tr>
                            <th>
                                Date
                            </th>
                            <th>
                                No. Consecutivo
                            </th>
                        </tr>
                        </thead>
                        <tbody>`;
                            d.Consecutivo.forEach(f => {
                                tabla += `<tr>
                                <td>${f.Date}</td>
                                <td>${f.Consecutivo}</td>                             
                                </tr>`;
                            });
                       tabla += '</tbody></table>';
                       return tabla;

}

$(document).ready(function () {
   $('#example').dataTable( {
        responsive : true,
         ajax : {
             "type": 'POST',
             "url" : './test.php',  
             "dataType": 'JSON',             
             "cache": false,
             "data": {
                 'param' : 1,                       
             },
         },   
         columns: [          
             {
                 "className":      'details-control',
                 "orderable":      false,
                 "data":           null,
                 "defaultContent": ''
             },
             { "data" : "PurchaseOrder" },
             { "data" : "DatePurchaseOrder" },
             { "data" : "Total"},
             { "data" : "Currency" },
             { "data" : "Status" },                  
        ],
         order : [[1, 'desc']],
    } );

    
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
      var tr = $(this).closest('tr');
        var row = $('#example').DataTable().row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child(format1(row.data())).show();
            tr.addClass('shown');
        }
    });
});

I would appreciate if someone can give me some guidance on this topic.

Update 1:

Seeing that some are a bit confused by the purpose of my question, I took the trouble to make a small example by hand of what I want to get to.

enter image description here

I explain a little more, the header where the PurchaseOrder is located is the parent row, the No. Consecutivo header is the daughter row of the parent PurchaseOrder row and the Date header is the child row of the No. Consecutivo

Update 2:

Between searching and searching for documentation I came across another example, but it still doesn't give me a clearer idea, I don't know if it's necessary to modify the code I'm using and adapt it to what I've found in the examples or with the code I'm using. what I have planned can be done.

Update 3:

Improving the code a little more, I have reached this point where I can locate the button to expand the second child row, but when clicking on it, it does not expand. I attach an example and share the code already a little improved:

enter image description here

First in the format1() function I just create the table and return it as jQuery array.

When I manipulate the "child rows" (child table), I fill and activate the DataTable when showing and destroy when hiding.

/* Formatting function for row details - modify as you need */
    function format1(d) {
        // `d` is the original data object for the row
        console.log(d);      
    
          let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                        <thead>
                            <tr>
                            <th>
                                No. Consecutivo
                            </th>
                                <th>
                                    Date
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            </table>`;
                            return $(tabla).toArray();                        
    }

    $(document).ready(function () {
       $('#example').dataTable( {
            responsive : true,
             ajax : {
                 "type": 'POST',
                 "url" : './test.php',  
                 "dataType": 'JSON',             
                 "cache": false,
                "data": {
                     'param' : 1,                       
                 },
             },    
             columns: [          
                 {
                     "className":      'details-control',
                     "orderable":      false,
                     "data":           null,
                     "defaultContent": ''
                 },
                 { "data" : "PurchaseOrder" },
                 { "data" : "DatePurchaseOrder" },
                 { "data" : "Total"},
                 { "data" : "Currency" },
                 { "data" : "Status" },                   
            ],
             order : [[1, 'desc']],
        } );
    
        
        // Add event listener for opening and closing details
        $('#example tbody').on('click', 'td.details-control', function () {
          let tr = $(this).closest('tr');
            let row = $('#example').DataTable().row(tr);
    
            let rowData = row.data();
    
            let tbId = `#tb-${rowData.PurchaseOrder}`;
    
            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
    
                $(tbId).DataTable().destroy();
            }
            else {
                // Open this row
                row.child(format1(rowData)).show();
    
                $(tbId).DataTable({                
                    data: rowData.Consecutivo,
                "searching": false,
                "bPaginate": false,
                "info" : false,
    
                    columns: [
                    {
                        "className": 'details-control1',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    }, 
                        
                        { data: 'Consecutivo' },
                        { data: 'Date' },
                    ],
    
                });

$(tbId).on('click', 'td.details-control', function(){
                var tr = $(this).closest('tr');
                var row = $('#example').DataTable().row(tr);
        
                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child(format1(row.data())).show();
                    tr.addClass('shown');
                } 
            });
                
                tr.addClass('shown');
            }
        });

As you can see, I still cannot locate Date as the daughter of No. Consecutivo, as I have explained in previous updates to this question.

Update 4:

As some of the comments say, I add here the source of the data along with the html and the css.

/* Formatting function for row details - modify as you need */
    function format1(d) {
        // `d` is the original data object for the row
        console.log(d);      
    
          let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                        <thead>
                            <tr>
                            <th>
                                No. Consecutivo
                            </th>
                                <th>
                                    Date
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                            </table>`;
                            return $(tabla).toArray();                        
    }

    $(document).ready(function () {
       $('#example').dataTable( {
            responsive : true,
             ajax : {
                 "type": 'POST',
                 "url" : './test.php',  
                 "dataType": 'JSON',             
                 "cache": false,
                "data": "data": [
             [
                "789",
              "28/04/2021",
              "$100",
              "USD",
              "Delivered"               
             ],
             [
                "790",
              "27/04/2021",
              "$100",
              "USD",
              "In wait"               
             ],
             [
                "791",
              "28/04/2021",
              "$100",
              "USD",
              "Delivered"               
             ],
             [
                "792",
              "28/04/2021",
              "$100",
              "USD",
              "Delivered"               
             ],
             ]
             },    
             columns: [          
                 {
                     "className":      'details-control',
                     "orderable":      false,
                     "data":           null,
                     "defaultContent": ''
                 },
                 { "data" : "PurchaseOrder" },
                 { "data" : "DatePurchaseOrder" },
                 { "data" : "Total"},
                 { "data" : "Currency" },
                 { "data" : "Status" },                   
            ],
             order : [[1, 'desc']],
        } );
    
        
        // Add event listener for opening and closing details
        $('#example tbody').on('click', 'td.details-control', function () {
          let tr = $(this).closest('tr');
            let row = $('#example').DataTable().row(tr);
    
            let rowData = row.data();
    
            let tbId = `#tb-${rowData.PurchaseOrder}`;
    
            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
    
                $(tbId).DataTable().destroy();
            }
            else {
                // Open this row
                row.child(format1(rowData)).show();
    
                $(tbId).DataTable({                
                    data: rowData.Consecutivo,
                "searching": false,
                "bPaginate": false,
                "info" : false,
    
                    columns: [
                    {
                        "className": 'details-control1',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    }, 
                        
                        { data: 'Consecutivo' },
                        { data: 'Date' },
                    ],
    
                });

$(tbId).on('click', 'td.details-control', function(){
                var tr = $(this).closest('tr');
                var row = $('#example').DataTable().row(tr);
        
                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child(format1(row.data())).show();
                    tr.addClass('shown');
                } 
            });
                
                tr.addClass('shown');
            }
        });
td.details-control {
            background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
            cursor: pointer;
            width: 30px;
            transition: .5s;
        }

        tr.shown td.details-control {
            background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center;
            width: 30px;
            transition: .5s;
        }
<link href="https://cdn.datatables.net/buttons/1.5.4/css/buttons.dataTables.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>


    <section class="content">
             
              <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <div class="box-header">
                            <h3 class="box-title"></h3>
                            </div>
                            <div id="box-body" style="padding: 0px 10px 10px 10px;">  
                                <table id="example" class="table table-bordered table-hover">
                                    <thead>
                                        <tr>  
                                            <th></th>                
                                            <th>PurchaseOrder</th>
                                            <th>DatePurchaseOrder</th>
                                            <th>Total</th>
                                            <th>Currency</th>
                                            <th>Status</th>      
                                        </tr>              
                                    </thead>
                                </table>        
                            </div>             
                        </div>
                    </div>
              </div>

Update 5:

In the ajax call I am using the following statement where I use console.log to get the response through ajax

$(document).ready(function () {
   $('#example').dataTable( {
        responsive : true,
         ajax : {
             "type": 'POST',
             "url" : './test.php',  
             "dataType": 'JSON',             
             "cache": false,
            "data": {
                 function (d) { 
                     console.log(d); 
                    }       
             },
         },

But when using console.log I get the following message in console

undefined
datatables javascript
2 Answers

I found some issues:

  • in your format1 function you declare just two columns, but in the datatable you try to fill three columns
  • the data that you offer for the inner datatable is only the value of rowData['Consecutivo'] which is "1000" but the datatable expects the data to be an array of objects; therefor you should offer the rowData object wrapped in square brackets: [rowData]
  • with every click on a green button a new event handler is declared for the third table; therefor you should close it with off('click') before destroying the inner datatable
  • the document ready function is not closed (in the example); therefor i added });
  • responsive : true in the main datatable hides the status column; therefor i deleted it
  • the class details-control1 is not defined in css and therefor is no visible button like details-control; therefor i deleted the last char 1 although the button is without a function since there seems to be no deeper nested data to show in a second level datatable (at least there was none mentioned in the question)

Since the ajax call isn't working in the stack snippet i hardcoded the data i could see in the images of your example (as purchase_data) and imagined more "No. Consecutivo" and "Date" values for the other three purchase orders. So i replaced for that example

ajax : {
    "type": 'POST',
    "url" : './test.php',  
    "dataType": 'JSON',             
    "cache": false,
    "data": {
        'param' : 1,                       
    },
},

with

data: purchase_data,

Working example:

var purchase_data = [
    {
        PurchaseOrder: 789,
        DatePurchaseOrder: "27/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 999,
        Date: "26/04/2021"
    }, {
        PurchaseOrder: 790,
        DatePurchaseOrder: "27/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "In Wait",
        Consecutivo: 1000,
        Date: "26/04/2021"
    }, {
        PurchaseOrder: 791,
        DatePurchaseOrder: "28/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 1001,
        Date: "27/04/2021"
    }, {
        PurchaseOrder: 792,
        DatePurchaseOrder: "28/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 1002,
        Date: "27/04/2021"
    },
];

/* Formatting function for row details - modify as you need */
function format1(d) {
    // `d` is the original data object for the row
    console.log(d);      

    let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                    <thead>
                        <tr>
                            <th></th>
                            <th>
                                No. Consecutivo
                            </th>
                            <th>
                                Date
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>`;
                    
    return $(tabla).toArray();                        
}

$(document).ready(function () {


    $('#example').DataTable({
        data: purchase_data,  
        columns: [          
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data" : "PurchaseOrder" },
            { "data" : "DatePurchaseOrder" },
            { "data" : "Total"},
            { "data" : "Currency" },
            { "data" : "Status" }               
        ],
        order : [[1, 'desc']]
    });

    
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
    
        let tr = $(this).closest('tr');
        let row = $('#example').DataTable().row(tr);
        let rowData = row.data();
        let tbId = `#tb-${rowData.PurchaseOrder}`;

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');

            $(tbId).DataTable().destroy();
        }
        else {
            // Open this row
            row.child(format1(rowData)).show();

            $(tbId).DataTable({                
                data: [rowData],
                "searching": false,
                "bPaginate": false,
                "info" : false,

                columns: [
                    {
                        "className": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    }, 
                    { data: 'Consecutivo' },
                    { data: 'Date' }
                ]
            });
            
            tr.addClass('shown');
        }
        
    });
    
    
});
.content {
    padding: 15px;
}

td.details-control {
    background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
    cursor: pointer;
    width: 30px;
    transition: .5s;
}

tr.shown td.details-control {
    background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center;
    width: 30px;
    transition: .5s;
}

table.dataTable td table.dataTable,
table.dataTable td table.dataTable * {
    border: none;
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<section class="content">
             
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Stackoverflow Test</h3>
                </div>
                <div id="box-body" style="padding: 0px 10px 10px 10px;">  
                    <table id="example" class="table table-bordered table-hover">
                        <thead>
                            <tr>  
                                <th></th>                
                                <th>PurchaseOrder</th>
                                <th>DatePurchaseOrder</th>
                                <th>Total</th>
                                <th>Currency</th>
                                <th>Status</th>      
                            </tr>              
                        </thead>
                    </table>        
                </div>             
            </div>
        </div>
    </div>
    
</section>

By the way: If there is really no deeper nested data (like the images suggest), the second datatable isn't necessary since there is only one row in the inner table. So an ordinary html table would be enough and can be made with the format1 function since it already has got the rowData.

Working example:

var purchase_data = [
    {
        PurchaseOrder: 789,
        DatePurchaseOrder: "27/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 999,
        Date: "26/04/2021"
    }, {
        PurchaseOrder: 790,
        DatePurchaseOrder: "27/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "In Wait",
        Consecutivo: 1000,
        Date: "26/04/2021"
    }, {
        PurchaseOrder: 791,
        DatePurchaseOrder: "28/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 1001,
        Date: "27/04/2021"
    }, {
        PurchaseOrder: 792,
        DatePurchaseOrder: "28/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 1002,
        Date: "27/04/2021"
    },
];

var tabla;

$(document).ready(function () {

    /* Formatting function for row details - modify as you need */
    function format(d) {
        // `d` is the original data object for the row

        let tabla = '<table id="tb-' + d.PurchaseOrder + '" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">' + 
                        '<thead>' + 
                            '<tr>' + 
                                '<th>No. Consecutivo</th>' + 
                                '<th>Date</th>' + 
                            '</tr>' + 
                        '</thead>' + 
                        '<tbody>' + 
                            '<tr>' + 
                                '<td>' + d.Consecutivo + '</td>' + 
                                '<td>' + d.Date + '</td>' + 
                            '</tr>' + 
                        '</tbody>' + 
                    '</table>';
        return $(tabla).toArray();                        
    }

    var table = $('#example').DataTable({
        data: purchase_data,
        columns: [          
            {
                className:      'details-control',
                orderable:      false,
                data:           null,
                defaultContent: ''
            },
            { data: "PurchaseOrder" },
            { data: "DatePurchaseOrder" },
            { data: "Total"},
            { data: "Currency" },
            { data: "Status" }
        ],
        order: [[1, 'desc']]
    });

    
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
    
        let tr = $(this).closest('tr');
        let row = table.row(tr);
        let rowData = row.data();
        let tbId = '#tb-' + rowData.PurchaseOrder;
        
        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');

            $(tbId).DataTable().destroy();
        }
        else {
            // Open this row
            row.child(format(rowData)).show();
            
            tr.addClass('shown');
        }
        
    });
    
    
});
.content {
    padding: 15px;
}

td.details-control {
    background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
    cursor: pointer;
    width: 30px;
    transition: .5s;
}

tr.shown td.details-control {
    background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center;
    width: 30px;
    transition: .5s;
}

table.dataTable td table,
table.dataTable td table * {
    border: none !important;
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<section class="content">
             
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Stackoverflow Test</h3>
                </div>
                <div id="box-body" style="padding: 0px 10px 10px 10px;">  
                    <table id="example" class="table table-bordered table-hover">
                        <thead>
                            <tr>  
                                <th></th>                
                                <th>PurchaseOrder</th>
                                <th>DatePurchaseOrder</th>
                                <th>Total</th>
                                <th>Currency</th>
                                <th>Status</th>      
                            </tr>              
                        </thead>
                    </table>        
                </div>             
            </div>
        </div>
    </div>
    
</section>

If you want the inner table split in two nested inner tables with only one row and only one key value pair (like the first image suggests) you need a second format function.

Working example:

var purchase_data = [
    {
        PurchaseOrder: 789,
        DatePurchaseOrder: "27/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 999,
        Date: "26/04/2021"
    }, {
        PurchaseOrder: 790,
        DatePurchaseOrder: "27/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "In Wait",
        Consecutivo: 1000,
        Date: "26/04/2021"
    }, {
        PurchaseOrder: 791,
        DatePurchaseOrder: "28/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 1001,
        Date: "27/04/2021"
    }, {
        PurchaseOrder: 792,
        DatePurchaseOrder: "28/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 1002,
        Date: "27/04/2021"
    },
];

/* Formatting function for row details - modify as you need */
function format1(d) {
    // `d` is the original data object for the row  

    let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                    <thead>
                        <tr>
                            <th></th>
                            <th>
                                No. Consecutivo
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>`;
                    
    return $(tabla).toArray();                        
}

function format2(d) {
    // `d` is the original data object for the row

    let tabla = `<table id="tb-${d.Consecutivo}" cellpadding="5" cellspacing="0" style="border-collapse: separate; border-spacing: 40px 5px;">
                    <thead>
                        <tr>
                            <th></th>
                            <th>
                                Date
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td>
                                ${d.Date}
                            </td>
                        </tr>
                    </tbody>
                </table>`;
                    
    return $(tabla).toArray();                        
}

$(document).ready(function () {


    $('#example').DataTable({
        data: purchase_data,  
        columns: [          
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data" : "PurchaseOrder" },
            { "data" : "DatePurchaseOrder" },
            { "data" : "Total"},
            { "data" : "Currency" },
            { "data" : "Status" }               
        ],
        order : [[1, 'desc']]
    });

    
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
    
        let tr = $(this).closest('tr');
        let row = $('#example').DataTable().row(tr);
        let rowData = row.data();
        let tbId = `#tb-${rowData.PurchaseOrder}`;

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
            
            $(tbId).off('click');
            $(tbId).DataTable().destroy();
        }
        else {
            // Open this row
            row.child(format1(rowData)).show();

            $(tbId).DataTable({                
                data: [rowData],
                "searching": false,
                "bPaginate": false,
                "info" : false,

                columns: [
                    {
                        "className": 'details-control1',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    }, 
                    { data: 'Consecutivo' }
                ]
            });
            
            tr.addClass('shown');
    
            // Add event listener for opening and closing details
            $(tbId).on('click', 'td.details-control1', function () {
                let tr = $(this).closest('tr');
                let row = $(tbId).DataTable().row(tr);
                let rowData = row.data();

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child(format2(rowData)).show();
                    
                    tr.addClass('shown');
                }
            });
        }
        
    });
    
    
});
.content {
    padding: 15px;
}

td.details-control1, 
td.details-control {
    background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
    cursor: pointer;
    width: 30px;
    transition: .5s;
}

tr.shown td.details-control1, 
tr.shown td.details-control {
    background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center;
    width: 30px;
    transition: .5s;
}

table.dataTable td table,
table.dataTable td table * {
    border: none !important;
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<section class="content">
             
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Stackoverflow Test</h3>
                </div>
                <div id="box-body" style="padding: 0px 10px 10px 10px;">  
                    <table id="example" class="table table-bordered table-hover">
                        <thead>
                            <tr>  
                                <th></th>                
                                <th>PurchaseOrder</th>
                                <th>DatePurchaseOrder</th>
                                <th>Total</th>
                                <th>Currency</th>
                                <th>Status</th>      
                            </tr>              
                        </thead>
                    </table>        
                </div>             
            </div>
        </div>
    </div>
    
</section>

If it is important for you that the inner tables are as wide as the main table (like suggested in the first image) there is a bit more css necessary.

Working example:

var purchase_data = [
    {
        PurchaseOrder: 789,
        DatePurchaseOrder: "27/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 999,
        Date: "26/04/2021"
    }, {
        PurchaseOrder: 790,
        DatePurchaseOrder: "27/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "In Wait",
        Consecutivo: 1000,
        Date: "26/04/2021"
    }, {
        PurchaseOrder: 791,
        DatePurchaseOrder: "28/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 1001,
        Date: "27/04/2021"
    }, {
        PurchaseOrder: 792,
        DatePurchaseOrder: "28/04/2021",
        Total: "$100",
        Currency: "USD",
        Status: "Delivered",
        Consecutivo: 1002,
        Date: "27/04/2021"
    },
];

/* Formatting function for row details - modify as you need */
function format1(d) {
    // `d` is the original data object for the row  

    let tabla = `<table id="tb-${d.PurchaseOrder}" cellpadding="5" cellspacing="0" style="width: 100%;">
                    <thead>
                        <tr>
                            <th class="details"></th>
                            <th>
                                No. Consecutivo
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>`;
                    
    return $(tabla).toArray();                        
}

function format2(d) {
    // `d` is the original data object for the row

    let tabla = `<table id="tb-${d.Consecutivo}" cellpadding="5" cellspacing="0" style="width: 100%; border-collapse: separate;">
                    <thead>
                        <tr>
                            <th class="details"></th>
                            <th>
                                Date
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td>
                                ${d.Date}
                            </td>
                        </tr>
                    </tbody>
                </table>`;
                    
    return $(tabla).toArray();                        
}

$(document).ready(function () {


    $('#example').DataTable({
        data: purchase_data,  
        columns: [          
            {
                className:      'details-control',
                orderable:      false,
                data:           null,
                defaultContent: ''
            },
            { data: "PurchaseOrder" },
            { data: "DatePurchaseOrder" },
            { data: "Total"},
            { data: "Currency" },
            { data: "Status" }               
        ],
        order: [[1, 'desc']]
    });

    
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
    
        let tr = $(this).closest('tr');
        let row = $('#example').DataTable().row(tr);
        let rowData = row.data();
        let tbId = `#tb-${rowData.PurchaseOrder}`;

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
            
            $(tbId).off('click');
            $(tbId).DataTable().destroy();
        }
        else {
            // Open this row
            row.child(format1(rowData)).show();

            $(tbId).DataTable({                
                data: [rowData],
                searching: false,
                bPaginate: false,
                info: false,

                columns: [
                    {
                        className: 'details details-control1',
                        orderable: false,
                        data: null,
                        defaultContent: ''
                    }, 
                    { data: 'Consecutivo' }
                ],
                order: []
            });
            
            tr.addClass('shown');
    
            // Add event listener for opening and closing details
            $(tbId).on('click', 'td.details-control1', function () {
                let tr = $(this).closest('tr');
                let row = $(tbId).DataTable().row(tr);
                let rowData = row.data();

                if (row.child.isShown()) {
                    // This row is already open - close it
                    row.child.hide();
                    
                    tr.removeClass('shown');
                }
                else {
                    // Open this row
                    row.child(format2(rowData)).show();
                    
                    tr.addClass('shown');
                }
            });
        }
        
    });
    
    
});
.content {
    padding: 15px;
}

.details {
    width: 16px;
}

table.dataTable tbody td[colspan] {
    padding: 0px;
    border: none;
}

table.dataTable.no-footer {
    border: none;
}

table.dataTable tbody th, table.dataTable tbody td {
    border-bottom-color: #dee2e6;
}

td.details-control1, 
td.details-control {
    background: url(https://www.datatables.net/examples/resources/details_open.png) no-repeat center center;
    cursor: pointer;
    transition: .5s;
}

tr.shown td.details-control1, 
tr.shown td.details-control {
    background: url(https://www.datatables.net/examples/resources/details_close.png) no-repeat center center;
    transition: .5s;
}

table.dataTable td table {
    width: 100%;
}
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<section class="content">
             
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">Stackoverflow Test</h3>
                </div>
                <div id="box-body" style="padding: 0px 10px 10px 10px;">  
                    <table id="example" class="table table-bordered table-hover">
                        <thead>
                            <tr>  
                                <th></th>                
                                <th>PurchaseOrder</th>
                                <th>DatePurchaseOrder</th>
                                <th>Total</th>
                                <th>Currency</th>
                                <th>Status</th>      
                            </tr>              
                        </thead>
                    </table>        
                </div>             
            </div>
        </div>
    </div>
    
</section>

user_153773550

One option is to create the child row as a Datatable. Then create a second format function for the child Datatable. You can start with this blog to see how to create a child Datatable. You can ignore the Editor configuration. Also take a look at this example from this thread.

The parent Datatable doesn't know about the content of the child row and the Datatables API's like row().child().show() (here)aren't available. If you don't want the child to be a Datatable then you will need to create the code to show the sub-child rows.

user_96216860
Related