I would like to modify the search in react-bootstrap-table
multiColumnSearch
to require data from two or more columns instead of matching all data in table.
Example:
ID FAMILY YEAR
---------------------
1 FAMILY-1 2010
2 FAMILY-1 2011
3 FAMILY-2 2010
4 FAMILY-2 2011
Query: FAMILY-1 2010
Current result:
ID FAMILY YEAR
---------------------
1 FAMILY-1 2010
2 FAMILY-1 2011
3 FAMILY-2 2010
Desired result:
ID FAMILY YEAR
---------------------
1 FAMILY-1 2010
Current code:
options: Options = {
defaultSortName: 'Id',
defaultSortOrder: 'desc',
noDataText: 'Empty data',
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>
);
}
https://allenfang.github.io/react-bootstrap-table/docs.html#multiColumnSearch
Update:
Thanks to @FiriceNguyen I was able to solve it. Added a pull request for strictSearch
to DefinitelyTyped so that others can use it in the future. Code:
<div>
<BootstrapTable containerStyle={{ marginTop: '10px' }} data={this.state.tableCases} options={this.options} striped={true} hover={true} search multiColumnSearch strictSearch>
<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>
https://github.com/DefinitelyTyped/DefinitelyTyped/pull/19629
In your case, I think you want an AND operator rather than apply 2/3 columns. Your query is to search for
FAMILY-1
OR2010
, so that your current results are correct.Anyway, the
strictSearch
can fit your need. You can refer here for details of search mode. In your case the configuration should bestrict && !multiColumn