Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ba9ea8e

Browse files
fix #1365 
1 parent 2aef4eb commit ba9ea8e

File tree

4 files changed

+115
-2
lines changed

4 files changed

+115
-2
lines changed
Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/* eslint react/prop-types: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table-next';
5+
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
6+
import Code from 'components/common/code-block';
7+
import { productsGenerator } from 'utils/common';
8+
9+
const { SearchBar } = Search;
10+
const products = productsGenerator();
11+
12+
const columns = [{
13+
dataField: 'id',
14+
text: 'Product ID'
15+
}, {
16+
dataField: 'name',
17+
text: 'Product Name'
18+
}, {
19+
dataField: 'price',
20+
text: 'Product Price'
21+
}];
22+
23+
const sourceCode = `\
24+
import BootstrapTable from 'react-bootstrap-table-next';
25+
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
26+
27+
const { SearchBar } = Search;
28+
const columns = [{
29+
dataField: 'id',
30+
text: 'Product ID'
31+
}, {
32+
dataField: 'name',
33+
text: 'Product Name'
34+
}, {
35+
dataField: 'price',
36+
text: 'Product Price'
37+
}];
38+
39+
const afterSearch = (newResult) => {
40+
console.log(newResult);
41+
};
42+
43+
<ToolkitProvider
44+
keyField="id"
45+
data={ products }
46+
columns={ columns }
47+
search={ { afterSearch } }
48+
>
49+
{
50+
props => (
51+
<div>
52+
<h3>Input something at below input field:</h3>
53+
<SearchBar { ...props.searchProps } />
54+
<hr />
55+
<BootstrapTable
56+
{ ...props.baseProps }
57+
/>
58+
</div>
59+
)
60+
}
61+
</ToolkitProvider>
62+
`;
63+
64+
const afterSearch = (newResult) => {
65+
console.log(newResult);
66+
};
67+
68+
export default () => (
69+
<div>
70+
<ToolkitProvider
71+
keyField="id"
72+
data={ products }
73+
columns={ columns }
74+
search={ { afterSearch } }
75+
>
76+
{
77+
props => (
78+
<div>
79+
<h3>Input something at below input field:</h3>
80+
<SearchBar { ...props.searchProps } />
81+
<hr />
82+
<BootstrapTable
83+
{ ...props.baseProps }
84+
/>
85+
</div>
86+
)
87+
}
88+
</ToolkitProvider>
89+
<Code>{ sourceCode }</Code>
90+
</div>
91+
);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,7 @@ import CustomePaginationWithSearch from 'examples/pagination/custom-page-list-wi
197197
import SearchTable from 'examples/search';
198198
import ClearSearchButton from 'examples/search/clear-search-button';
199199
import DefaultSearch from 'examples/search/default-search';
200+
import SearchHooks from 'examples/search/search-hook';
200201
import DefaultCustomSearch from 'examples/search/default-custom-search';
201202
import FullyCustomSearch from 'examples/search/fully-custom-search';
202203
import SearchFormattedData from 'examples/search/search-formatted';
@@ -464,6 +465,7 @@ storiesOf('Table Search', module)
464465
.add('Clear Search Button', () => <ClearSearchButton />)
465466
.add('Default Search Table', () => <DefaultSearch />)
466467
.add('Default Custom Search', () => <DefaultCustomSearch />)
468+
.add('Search Hooks', () => <SearchHooks />)
467469
.add('Searchable Column', () => <SearchableColumn />)
468470
.add('Fully Custom Search', () => <FullyCustomSearch />)
469471
.add('Search Formatted Value', () => <SearchFormattedData />)

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,22 @@ If you want to search on the formatted data, you are supposed to enable this pro
141141
</ToolkitProvider>
142142
```
143143

144+
#### afterSearch - [Function]
145+
After search done, this callback function will be called with newest result.
146+
147+
```js
148+
<ToolkitProvider
149+
keyField="id"
150+
data={ products }
151+
columns={ columns }
152+
search={ {
153+
afterSearch: (newResult) => console.log(newResult)
154+
} }
155+
>
156+
// ...
157+
</ToolkitProvider>
158+
```
159+
144160
### Clear Search Button
145161
We have a built-in clear search function which allow user clear search status via clicking button:
146162

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
99

1010
export default (options = {
1111
searchFormatted: false,
12+
afterSearch: null,
1213
onColumnMatch: null
1314
}) => (
1415
_,
@@ -32,7 +33,7 @@ export default (options = {
3233
handleRemoteSearchChange(this.props.searchText);
3334
} else {
3435
initialData = this.search(props);
35-
this.triggerListener(initialData);
36+
this.triggerListener(initialData,true);
3637
}
3738
this.state = { data: initialData };
3839
}
@@ -41,7 +42,10 @@ export default (options = {
4142
return this.state.data;
4243
}
4344

44-
triggerListener(result) {
45+
triggerListener(result, skipInit) {
46+
if (options.afterSearch && !skipInit) {
47+
options.afterSearch(result);
48+
}
4549
if (this.props.dataChangeListener) {
4650
this.props.dataChangeListener.emit('filterChanged', result.length);
4751
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /