Using react-bootstrap-table - Place search bar to the left

Question

As the title says I would like to place the search bar for react-bootstrap-table to the left instead of to the right as default.

Example can be found here, look at the bottom of the page:

https://allenfang.github.io/react-bootstrap-table/example.html#others

I have seen in docs that you can create your own search panel and input but that seems like a big workaround when I only wan't to position the search field to the left.

http://allenfang.github.io/react-bootstrap-table/custom.html#searchpanel

Current code:

options: Options = {
    defaultSortName: 'Id',
    defaultSortOrder: 'desc', 
    noDataText: 'Empty',
    onRowClick: this.onRowClick.bind(this)
};
render() {
    return (
        <div>
            <BootstrapTable containerStyle={{ marginTop: '10px' }} data={this.state.tableCases} options={this.options} striped={true} hover={true} search multiColumnSearch>
                <TableHeaderColumn dataField='Id' isKey={true} dataSort={true}>Case ID</TableHeaderColumn>
                <TableHeaderColumn dataField='CompanyName' dataSort={true}>Company Name</TableHeaderColumn>
                <TableHeaderColumn dataField='Title' dataSort={true}>Title</TableHeaderColumn>
                <TableHeaderColumn dataField='Family' dataSort={true}>Family</TableHeaderColumn>
                <TableHeaderColumn dataField='ApplicationDate' dataSort={true}>Application Date</TableHeaderColumn>
            </BootstrapTable>
        </div>
    );
}

Answer 1

Solved it like this:

css: string = `.react-bs-table-tool-bar .col-xs-6.col-sm-6.col-md-6.col-lg-8 {
display: none;
}`

render() {
    return (
        <div>
            <style>
                {this.css}
            </style>
            <BootstrapTable containerStyle={{ marginTop: '10px' }} data={this.state.tableCases} options={this.options} striped={true} hover={true} search>
                <TableHeaderColumn dataField='Id' isKey={true} dataSort={true}>Case ID</TableHeaderColumn>
                <TableHeaderColumn dataField='CompanyName' dataSort={true}>Company Name</TableHeaderColumn>
                <TableHeaderColumn dataField='Title' dataSort={true}>Title</TableHeaderColumn>
                <TableHeaderColumn dataField='Family' dataSort={true}>Family</TableHeaderColumn>
                <TableHeaderColumn dataField='ApplicationDate' dataSort={true}>Application Date</TableHeaderColumn>
            </BootstrapTable>
        </div>
    );
}