wenzhixin bootstrap-table detailView (child row) not initializing

Question

I am using the wenzhixin bootstrap table and I am trying to get another bootstrap table to initialize in the child row which is referred to in the code as 'detailView'.

I was using datatables but this, so far, seems simpler and more straight forward to work with.

I will be passing the key from the parent row to the child row. Right now I am just using a static table that I got to initialize outside of the child row, now I am simply moving it to the child row, trying to get it to initialize, and then I will make the content dynamic.

The data is passing, but it does not seem the table is initializing. I'm wondering if I need to hide a table somewhere that I can initialize behind the scenes and then pass the content to the row (seems messy, but I can't think of another way to pull this off).

my code to initalize the detailView in the main table;

detailView: true,
detailFormatter: 'compExtInfo',

here is what I am returning to the child row (detailView)

function compExtInfo(index, row) {
    var pAPI = row.api;

    var hOut = '<table data-toggle="table" data-url="./completion/getcompletionext.php?api=49-037-28606">'+
            '<thead>'+
                '<tr>'+
                    '<th data-field="api" data-visible=false>API</th>'+
                    '<th data-field="finalfieldreport">Last Fld Rp</th>'+
                    '<th data-field="onbase">OnBase</th>'+
                    '<th data-field="tbg">Tbg</th>'+
                    '<th data-field="active">Actv</th>'+
                '</tr>'+
            '</thead>'+
        '</table>';
        console.log(hOut);
    return hOut;
}

here is the table / grid that will fully initialize if placed alone outside of a child table (same code as above, literally copied and pasted into the function).

        <table data-toggle="table" data-url="./completion/getcompletionext.php?api=49-037-28606">
            <thead>
                <tr>
                    <th data-field="api" data-visible=false>API</th>
                    <th data-field="finalfieldreport">Last Fld Rp</th>
                    <th data-field="onbase">OnBase</th>
                    <th data-field="tbg">Tbg</th>
                    <th data-field="active">Actv</th>
                </tr>
            </thead>
        </table>

Answer 1

I found a solution for this finally, code is listed below.

Main table initializations for the child row listed below;

detailView: true,    
onExpandRow: function (index, row, $detail) {
            compExtInfo($detail, row);}

Function called from the main table; get row key and pass to table builder

function compExtInfo($detail, row) {
    pAPI = row.api;

    buildTable($detail.html('<table></table>').find('table'), pAPI);
}

Table builder function

function buildTable($ext, api) {

    $ext.bootstrapTable({
        url: './completion/getcompletionext.php?api='+api,
        columns: [
            {
                field: 'api',
                visible: false,
                title: 'API'
            },{
                field: 'finalfieldreport',
                title: 'Last Fld Rp'
            ...
        ]
    });
}