How to add a column to bootstrap table from javascript

I have the following table in the html:

<table id="table-labresult"
                       data-toggle="table"
                       data-search="true"
                       data-click-to-select="true"
                       data-pagination="true"
                       data-page-list="[5, 10, 15, 25, ALL]"
                       data-show-footer="false"
                       class="table table-hover">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th> 
            <th data-sortable="true" data-field="date">Date</th>
            <th data-sortable="true" data-field="orderedby">Ordered By</th>
            <th data-sortable="true" data-field="testname">Test Name</th>
            <th data-sortable="true" data-field="notes">Notes</th>
        </tr>
    </thead>

</table>

In my javascript I have the following:

var $table = $('#table-labresult');
$table.bootstrapTable('refreshOptions', {
    pageSize: 5
});

var mydata = [
               { "date": "2018-06-16", "orderedby": "Medez, Support", "testname": "Calcium, Serum", "notes": "Notes written by the doctor"}
             ]

$table.bootstrapTable({
                data: mydata,
                columns: [{}, {}, {}, {},
                {
                    field: 'operate',
                    title: 'Edit',
                    align: 'center',
                    valign: 'middle',
                    clickToSelect: false,
                    formatter: function (value, row, index) {
                        //return '<input name="elementname"  value="'+value+'"/>';
                        return '<button class=\'btn btn-primary \' date="' + row.date + '" testname="' + row.testname + '"  >Edit</button> ';
                    }
                }
                ]
            });

Right now I do not upload the data or add me in a new field, please if someone could help me. I'm using bootstrap-table - v1.11.1

Thanks in advance.