使用 react-bootstrap-table - 将搜索栏放在左侧答案

【问题标题】：Using react-bootstrap-table - Place search bar to the left使用 react-bootstrap-table - 将搜索栏放在左侧
【发布时间】：2018-02-16 06:55:06
【问题描述】：

正如标题所说，我想将react-bootstrap-table 的搜索栏默认放置在左侧而不是右侧。

示例可以在这里找到，请看页面底部：

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

我在文档中看到您可以创建自己的搜索面板和输入，但是当我不想将搜索字段放在左侧时，这似乎是一个很大的解决方法。

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

当前代码：

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>
    );
}

【问题讨论】：

标签： html css reactjs typescript react-bootstrap-table

【解决方案1】：

这样解决了：

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>
    );
}

【讨论】：