how to return a bootstrap table as a detailFormatter

I've got this code below, and I'm trying to get a table returned as the detailFormatter for a bootstrap table as follows....

        $('#resultsTable').bootstrapTable({
        method: 'get',
        detailView: true,
        detailFormatter: tableDetailFormatter,
        data: data,
        striped: true,
        pagination: data.length > 5,
        pageSize: 5,
        pageList: [5, 10],
        onLoadError: function () { 
          // deal with error
        },
        columns: [
            { field: 'Name', title: '', class: 'col-md-6', sortable: true },
            { field: 'foo', class: 'col-md-3', title: 'foo', sortable: true },
            { field: 'bar', class: 'col-md-3', title: 'bar', sortable: true }
        ]
    });

    function tableDetailFormatter(value, row) {

        var detail = $.ajax({
            type: "GET",
            url: '/foo/foo?name=' + row.Name,
            async: false
        }).responseJSON;

       // how do you return this? there is no element for it ??
        $().bootstrapTable({
            method: 'get',
            data: detail,
            striped: false,
            pagination: sampleDetail.length > 5,
            pageSize: 5,
            pageList: [5, 10],
            onLoadError: function () { // deal with error },
            columns: [
                { field: 'Name', sortable: true }
                .... more columns....
            ]
        });
    };

How do I get the tableDetailFormatter function to return the html into the detail view of the main table please ?

Solution

Data can be loaded from the ajax and bind to the $detail.

$table.on('expand-row.bs.table', function (e, index, row, $detail) {
    $detail.html('Loading from ajax request...');
    $.get('LICENSE', function (res) {
        $detail.html(res.replace(/\n/g, '<br>'));
    });
});