diff --git a/packages/react-bootstrap-table2-example/examples/search/custom-match-function.js b/packages/react-bootstrap-table2-example/examples/search/custom-match-function.js
new file mode 100644
index 0000000..afcccd1
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/search/custom-match-function.js
@@ -0,0 +1,116 @@
+/* eslint react/prop-types: 0 */
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const products = productsGenerator();
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar } = Search;
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price'
+}];
+
+// Implement startWith instead of contain
+function customMatchFunc({
+ searchText,
+ value,
+ column,
+ row
+}) {
+ if (typeof value !== 'undefined') {
+ return value.startsWith(searchText);
+ }
+ return false;
+}
+
+export default () => (
+
+
+ {
+ props => (
+
+
Input something at below input field:
+
+
+
+
+ )
+ }
+
+
{ sourceCode }
+
+);
+`;
+
+// Implement startWith instead of contain
+function customMatchFunc({
+ searchText,
+ value,
+ column,
+ row
+}) {
+ if (typeof value !== 'undefined') {
+ return `${value}`.toLowerCase().startsWith(searchText.toLowerCase());
+ }
+ return false;
+}
+
+export default () => (
+
+
Custom a search match function by startWith instead of contain
+
+ {
+ props => (
+
+
Input something at below input field:
+
+
+
+
+ )
+ }
+
+
{ sourceCode }
+
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index 283278c..c58f70a 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -195,6 +195,7 @@ import FullyCustomSearch from 'examples/search/fully-custom-search';
import SearchFormattedData from 'examples/search/search-formatted';
import CustomSearchValue from 'examples/search/custom-search-value';
import SearchableColumn from 'examples/search/searchable-column';
+import CustomMatchFunction from 'examples/search/custom-match-function';
// CSV
import ExportCSV from 'examples/csv';
@@ -451,7 +452,8 @@ storiesOf('Table Search', module)
.add('Searchable Column', () => )
.add('Fully Custom Search', () => )
.add('Search Formatted Value', () => )
- .add('Custom Search Value', () => );
+ .add('Custom Search Value', () => )
+ .add('Custom match function', () => );
storiesOf('Column Toggle', module)
.addDecorator(bootstrapStyle())
diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md
index 444d10e..c28a623 100644
--- a/packages/react-bootstrap-table2-toolkit/README.md
+++ b/packages/react-bootstrap-table2-toolkit/README.md
@@ -98,6 +98,33 @@ Accept a string that will be used for default searching when first time table re
```
+#### onColumnMatch - [function]
+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:
+
+```js
+function onColumnMatch({
+ searchText,
+ value,
+ column,
+ row
+}) {
+ // implement your custom match logic on every cell value
+}
+
+
+ // ...
+
+```
+
+> Notes: You have to return `true` when your match logic is positive and vice versa.
+
#### searchFormatted - [bool]
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.
diff --git a/packages/react-bootstrap-table2-toolkit/src/search/context.js b/packages/react-bootstrap-table2-toolkit/src/search/context.js
index 50dafc4..ec94da7 100644
--- a/packages/react-bootstrap-table2-toolkit/src/search/context.js
+++ b/packages/react-bootstrap-table2-toolkit/src/search/context.js
@@ -8,7 +8,8 @@ import React from 'react';
import PropTypes from 'prop-types';
export default (options = {
- searchFormatted: false
+ searchFormatted: false,
+ onColumnMatch: null
}) => (
_,
isRemoteSearch,
@@ -83,11 +84,22 @@ export default (options = {
} else if (column.filterValue) {
targetValue = column.filterValue(targetValue, row);
}
- if (targetValue !== null && typeof targetValue !== 'undefined') {
- targetValue = targetValue.toString().toLowerCase();
- if (targetValue.indexOf(searchText) > -1) {
+ if (options.onColumnMatch) {
+ if (options.onColumnMatch({
+ searchText,
+ value: targetValue,
+ column,
+ row
+ })) {
return true;
}
+ } else {
+ if (targetValue !== null && typeof targetValue !== 'undefined') {
+ targetValue = targetValue.toString().toLowerCase();
+ if (targetValue.indexOf(searchText) > -1) {
+ return true;
+ }
+ }
}
}
return false;