Skip to content

Commit 00b1558

Browse files
AllenFangAllenFang
committed
fix #1078 
1 parent 4dc5e60 commit 00b1558

4 files changed

Lines changed: 162 additions & 5 deletions

File tree

‎packages/react-bootstrap-table2-example/examples/search/custom-match-function.js‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
/* eslint react/prop-types: 0 */
2+
/* eslint no-unused-vars: 0 */
3+
import React from 'react';
4+
5+
import BootstrapTable from 'react-bootstrap-table-next';
6+
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
7+
import Code from 'components/common/code-block';
8+
import { productsGenerator } from 'utils/common';
9+
10+
const { SearchBar } = Search;
11+
const products = productsGenerator();
12+
13+
const columns = [{
14+
dataField: 'id',
15+
text: 'Product ID'
16+
}, {
17+
dataField: 'name',
18+
text: 'Product Name'
19+
}, {
20+
dataField: 'price',
21+
text: 'Product Price'
22+
}];
23+
24+
const sourceCode = `\
25+
import BootstrapTable from 'react-bootstrap-table-next';
26+
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
27+
28+
const { SearchBar } = Search;
29+
const columns = [{
30+
dataField: 'id',
31+
text: 'Product ID'
32+
}, {
33+
dataField: 'name',
34+
text: 'Product Name'
35+
}, {
36+
dataField: 'price',
37+
text: 'Product Price'
38+
}];
39+
40+
// Implement startWith instead of contain
41+
function customMatchFunc({
42+
searchText,
43+
value,
44+
column,
45+
row
46+
}) {
47+
if (typeof value !== 'undefined') {
48+
return value.startsWith(searchText);
49+
}
50+
return false;
51+
}
52+
53+
export default () => (
54+
<div>
55+
<ToolkitProvider
56+
keyField="id"
57+
data={ products }
58+
columns={ columns }
59+
search={ { customMatchFunc } }
60+
>
61+
{
62+
props => (
63+
<div>
64+
<h3>Input something at below input field:</h3>
65+
<SearchBar { ...props.searchProps } />
66+
<hr />
67+
<BootstrapTable
68+
{ ...props.baseProps }
69+
/>
70+
</div>
71+
)
72+
}
73+
</ToolkitProvider>
74+
<Code>{ sourceCode }</Code>
75+
</div>
76+
);
77+
`;
78+
79+
// Implement startWith instead of contain
80+
function customMatchFunc({
81+
searchText,
82+
value,
83+
column,
84+
row
85+
}) {
86+
if (typeof value !== 'undefined') {
87+
return `${value}`.toLowerCase().startsWith(searchText.toLowerCase());
88+
}
89+
return false;
90+
}
91+
92+
export default () => (
93+
<div>
94+
<h1>Custom a search match function by startWith instead of contain</h1>
95+
<ToolkitProvider
96+
keyField="id"
97+
data={ products }
98+
columns={ columns }
99+
search={ { onColumnMatch: customMatchFunc } }
100+
>
101+
{
102+
props => (
103+
<div>
104+
<h3>Input something at below input field:</h3>
105+
<SearchBar { ...props.searchProps } />
106+
<hr />
107+
<BootstrapTable
108+
{ ...props.baseProps }
109+
/>
110+
</div>
111+
)
112+
}
113+
</ToolkitProvider>
114+
<Code>{ sourceCode }</Code>
115+
</div>
116+
);

‎packages/react-bootstrap-table2-example/stories/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,7 @@ import FullyCustomSearch from 'examples/search/fully-custom-search';
195195
import SearchFormattedData from 'examples/search/search-formatted';
196196
import CustomSearchValue from 'examples/search/custom-search-value';
197197
import SearchableColumn from 'examples/search/searchable-column';
198+
import CustomMatchFunction from 'examples/search/custom-match-function';
198199

199200
// CSV
200201
import ExportCSV from 'examples/csv';
@@ -451,7 +452,8 @@ storiesOf('Table Search', module)
451452
.add('Searchable Column', () => <SearchableColumn />)
452453
.add('Fully Custom Search', () => <FullyCustomSearch />)
453454
.add('Search Formatted Value', () => <SearchFormattedData />)
454-
.add('Custom Search Value', () => <CustomSearchValue />);
455+
.add('Custom Search Value', () => <CustomSearchValue />)
456+
.add('Custom match function', () => <CustomMatchFunction />);
455457

456458
storiesOf('Column Toggle', module)
457459
.addDecorator(bootstrapStyle())

‎packages/react-bootstrap-table2-toolkit/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,33 @@ Accept a string that will be used for default searching when first time table re
9898
</ToolkitProvider>
9999
```
100100

101+
#### onColumnMatch - [function]
102+
Acccpt a function which will be called when table try to match every cells when search happening. This function accept an object like below example:
103+
104+
```js
105+
function onColumnMatch({
106+
searchText,
107+
value,
108+
column,
109+
row
110+
}) {
111+
// implement your custom match logic on every cell value
112+
}
113+
114+
<ToolkitProvider
115+
keyField="id"
116+
data={ products }
117+
columns={ columns }
118+
search={ {
119+
onColumnMatch
120+
} }
121+
>
122+
// ...
123+
</ToolkitProvider>
124+
```
125+
126+
> Notes: You have to return `true` when your match logic is positive and vice versa.
127+
101128
#### searchFormatted - [bool]
102129
If you want to search on the formatted data, you are supposed to enable this props. `react-bootstrap-table2` will check if you define the `column.formatter` when doing search.
103130

‎packages/react-bootstrap-table2-toolkit/src/search/context.js‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import React from 'react';
88
import PropTypes from 'prop-types';
99

1010
export default (options = {
11-
searchFormatted: false
11+
searchFormatted: false,
12+
onColumnMatch: null
1213
}) => (
1314
_,
1415
isRemoteSearch,
@@ -83,11 +84,22 @@ export default (options = {
8384
} else if (column.filterValue) {
8485
targetValue = column.filterValue(targetValue, row);
8586
}
86-
if (targetValue !== null && typeof targetValue !== 'undefined') {
87-
targetValue = targetValue.toString().toLowerCase();
88-
if (targetValue.indexOf(searchText) > -1) {
87+
if (options.onColumnMatch) {
88+
if (options.onColumnMatch({
89+
searchText,
90+
value: targetValue,
91+
column,
92+
row
93+
})) {
8994
return true;
9095
}
96+
} else {
97+
if (targetValue !== null && typeof targetValue !== 'undefined') {
98+
targetValue = targetValue.toString().toLowerCase();
99+
if (targetValue.indexOf(searchText) > -1) {
100+
return true;
101+
}
102+
}
91103
}
92104
}
93105
return false;

0 commit comments

Comments
 (0)