Nested Child Rows?

LearningStuff

Hi,

I'm looking to do a data table with nested child rows for a parent.
Parent1
...Child1
......ChildsChild1
......ChildsChild2
...Child2
Parent2
etc etc.

I came across this post from 2015 in researching whether this was possible and it states that it isn't possible.
https://datatables.net/forums/discussion/28700/multi-nested-child-rows

However, other posts say it is possible but only provide a parent/child row as an example. I also don't see anything in the documentation showing that it's possible.

Would appreciate some insight, thank you!

trendsic

It is possible, but maybe not the way you're wanting? I did this by creating a extra column that allows the user to expand the extra data. I believe I found this page is what helped push me into coming up with the solution below: https://datatables.net/examples/api/row_details.html

Here's a raw code dump of how I did it. Let me know if you have questions about it:

$('#tblReport tbody').off('click', 'td.details-control .gimme-more-data');
$('#tblReport tbody').on('click', 'td.details-control .gimme-more-data', function () {
    $('.nested-table').remove();
    var tr = $(this).closest('tr');
    var row = tbl.row(tr);

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

        dataservice.getASAPReportDateRange(startDate().replace('/', '-').replace('/', '-') + "/" + endDate().replace('/', '-').replace('/', '-') + "/" + selectedAgentID() + "/" + row.data().AgentId).then(function (data) {
            // Open this row
            row.child('<table id="sub-data" class="bg-white nested-table"></table>').show();

            $('#sub-data').DataTable({
                dom: "t",
                responsive: true,
                data: data.ASAPReport,
                columns: [
                    { data: "AdjustmentDate", title: 'Adjustment Date' },
                    { data: "ApptAgent", title: 'Agent' },
                    { data: "Reason", title: 'Reason' },
                    { data: "Amount", title: 'Amount' },
                ],
            }).columns.adjust().responsive.recalc();

            tr.addClass('shown');
        }).then(function() {
            shared.contentLoading(false);
        });
    }
});

kthorngren

This thread has some options that may help:
https://datatables.net/forums/discussion/42045/nested-tables#latest

Kevin