Nested Table view in abp framework

Question

I am trying to implement nested view in abp framework project. Please help me to implement this by looking to the code 

this is my html side code

        <abp-table striped-rows="true" id="QueuesTable">
            <thead>
                <tr>
                    <th>@L["Actions"]</th>
                    <th>@L["Name"]</th>
                    <th>@L["TicketRangeMin"]</th>
                    <th>@L["TicketRangeMax"]</th>
                    <th>@L["TicketCode"]</th>
                    <th>@L["IsDefaultQueue"]</th>
                    <th>@L["LastTicketId"]</th>
                </tr>
            </thead>
        </abp-table>

and the js code from where i am assigning data 

 var _$tenantsTable = $('#QueuesTable');

    var dataTable = _$tenantsTable.DataTable(abp.libs.datatables.normalizeConfiguration({
        processing: true,
        serverSide: true,
        paging: true,
        searching: false,
        scrollX: true,
        autoWidth: true,
        scrollCollapse: true,
        order: [[1, "asc"]],
        ajax: abp.libs.datatables.createAjax(queueService.getList, getFilter),
        columnDefs: dataTableColumns
    }));

 

    var dataTableColumns = [
        {
            rowAction: {
                items:
                    [
                        {
                            text: l("Expand"),
                            visible: abp.auth.isGranted('QueuingSystem.Queues.Edit'),
                            action: function (data) {
                                debugger;
                                // Call the openDetailRow function with the appropriate URL
                                openDetailRow(this, "/Pages/TicketQueues/QueueTickets" + data.record.queue.id);
                            }
                        }

                    ]
            },
            width: "1rem" 
        },
        { data: "queue.name" },
        { data: "queue.ticketRangeMin" },
        { data: "queue.ticketRangeMax" },
        { data: "queue.ticketCode" },
        {
            data: "queue.isDefaultQueue",
            render: function (isDefaultQueue) {
                return isDefaultQueue ? '<i class="fa fa-check"></i>' : '<i class="fa fa-times"></i>';
            }
        },
        { data: "queue.lastTicketId" }
    ];

the below code is the one i am setting to open a row below the clicked row of parent table

 

   var currentOpenedDetailRow;

   function openDetailRow(e, url) {
       var tr = $(e).closest('tr');
       var row = dataTable.row(tr);
       alert("Checked");

       if (row.child.isShown()) {
           row.child.hide();
           tr.removeClass('shown');
           currentOpenedDetailRow = null;
       } else {
           if (currentOpenedDetailRow) {
               currentOpenedDetailRow.child.hide();
               currentOpenedDetailRow.node().classList.remove('shown');
           }

           $.get(url).then((data) => {
               row.child(data).show();
               tr.addClass('shown');
               currentOpenedDetailRow = row;
           }).catch((error) => {
               console.error("Error loading data:", error);
           });
       }
   }

and the js script for loading child data is below

 

(function () {
    $(function () {

        var _$InvoiceTable = $('#QueueTicketTable');
        var _paymentService = window.queuingSystem.queues.queues;

        var dataTable = _$InvoiceTable.DataTable({
            paging: true,
            serverSide: true,
            processing: true,
            listAction: {
                ajaxFunction: _paymentService.queues.,
                inputFilter: function () {
                    return {
                        tenatID: $('#QueueTicket_QueueId').val()
                    };
                }
            },
            columnDefs: [    
                {
                    targets: 0,
                    data: 'SequenceNumber',
                },
                {
                    targets: 1,
                    data: 'TicketNumber',
                },
        
            ],
        });

    });
})();