Get Bootstrap Table column title and filter-control in same row

Question

I have the following Bootstrap Table . Some columns in the table have filter-control and some have title . Neither of the columns have both. Columns that have the title are sortable .

As shown in this fiddle , the filter-control and title are being displayed in different rows. I want to show both in same row. How can I do that?

HTML

<table id="table"></table>

JS

    $('#table').bootstrapTable({
    filterControl: true,
    showSearchClearButton: true,
    columns: [{
        field: 'id',
        title: 'Item ID',
    sortable: true
    }, {
        field: 'name',
        title: 'Item Name',
    sortable: true
    }, {
        field: 'price',
        // title: 'Item Price',
        filterControl: 'select',
    filterControlPlaceholder: 'Item Price'
    }],
    data: [{
        id: 1,
        name: 'Item 1',
        price: '$1'
    }, {
        id: 2,
        name: 'Item 2',
        price: '$2'
    }]
})

Present Output

Answer 1

I could not find a table or column option to do that, so I created some jQuery, that makes the table show both in the same row.

In your example:

$('[data-field=price]').find('.th-inner').append($('[data-field=price]').find('.filterControl'))
$('th').find('.fht-cell').remove()

The first line moves the filter-control into the title field, the second line removes all the original filter-control wrappers, which have a fixed height and would keep the table-head too heigh.