正如标题所示,我希望将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>
);
}
答案 0 :(得分:0)
解决这个问题:
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>
);
}