0

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

Ogglas
  • 62,132
  • 37
  • 328
  • 418

1 Answers1

1

In your case, I think you want an AND operator rather than apply 2/3 columns. Your query is to search for FAMILY-1 OR 2010, 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 be strict && !multiColumn

An Nguyen
  • 1,487
  • 10
  • 21
  • Marked your answer as correct but to achieve the desired result it was `strict && multiColumn` since my values were in different columns. – Ogglas Sep 08 '17 at 09:16