How to set toggle gridview in boilerplate razor page using javascript

Question

Hi All, 

i am working on a page to implement toggle grid. Please go through the code and help me to implement the toggle functionality.

Thanks in advance.

sample data i am putting here:-

This is my view code(boilerplate)
 

<abp-card>
    <abp-card-body>
        <abp-row class="mb-3">
            <abp-column size-md="_12">
                <form id="SearchForm" autocomplete="off">
                    <div class="input-group">
                        <input class="form-control page-search-filter-text" id="FilterText" placeholder="@L["Search"]" />
                        <abp-button button-type="Primary" type="submit" icon="search" />
                    </div>
                </form>
        <abp-table striped-rows="true" id="QueuesTable">
            <thead>
                <tr>
                    <th>@L["Actions"]</th>
                    <th>@L["Id"]</th>
                    <th>@L["Name"]</th>
                    <th>@L["TicketRangeMin"]</th>
                    <th>@L["TicketRangeMax"]</th>
                    <th>@L["TicketCode"]</th>
                    <th>@L["IsDefaultQueue"]</th>
                </tr>
            </thead>
        </abp-table>
    </abp-card-body>
</abp-card>

And my javascript code is given below:-

var dataTable = $("#QueuesTable").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: [
        {
            rowAction: {
                items:
                    [
                        {
                            text: l("Expand"),
                            action: function (data) {
                                var queueId = data.record.queue.id;
                                alert(queueId);
                                if (dataTableOne) {
                                    //--- need to show toggle grid when click on this button
                                     
                                } else {
                                    
                                    alert('DataTableOne is not initialized.');
                                }

                            }
                        }


                    ]
            }
        },
        { data: "queue.id", visible: false },
        { data: "queue.name" },
        { data: "queue.ticketRangeMin" },
        { data: "queue.ticketRangeMax" },
        { data: "queue.ticketCode" },
        {
            data: "queue.isDefaultQueue",
            render: function (isDefaultQueue) {
                
            }
        }
    ]
}));