使用react-bootstrap-table - 將搜索欄放在左邊

Question

正如標題所示，我想將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> 
    ); 
} 

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