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 7c8c008

Browse files
patch docs for table search
1 parent a60fc73 commit 7c8c008

File tree

3 files changed

+135
-1
lines changed

3 files changed

+135
-1
lines changed

‎docs/README.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
* [defaultSortDirection](#defaultSortDirection)
2828
* [pagination](#pagination)
2929
* [filter](#filter)
30+
* [search](#search)
3031
* [onTableChange](#onTableChange)
3132

3233
### <a name='keyField'>keyField(**required**) - [String]</a>
@@ -255,6 +256,46 @@ const columns = [ {
255256
<BootstrapTable data={ data } columns={ columns } filter={ filterFactory() } />
256257
```
257258

259+
### <a name='search'>search - [Object]</a>
260+
Enable the search functionality.
261+
262+
`search` allow user to searhc all the table data. However, search functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-toolkit` firstly.
263+
264+
```sh
265+
$ npm install react-bootstrap-table2-toolkit --save
266+
```
267+
268+
After installation of `react-bootstrap-table2-toolkit`, you can render search field easily:
269+
270+
```js
271+
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
272+
273+
const { SearchBar, searchFactory } = Search;
274+
//...
275+
276+
<ToolkitContext.Provider>
277+
<ToolkitContext.Consumer>
278+
{
279+
props => (
280+
<div>
281+
<h3>Input something at below input field:</h3>
282+
<SearchBar { ...props.searchProps } />
283+
<hr />
284+
<BootstrapTable
285+
keyField="id"
286+
data={ products }
287+
columns={ columns }
288+
search={ searchFactory({
289+
...props.searchProps
290+
}) }
291+
/>
292+
</div>
293+
)
294+
}
295+
</ToolkitContext.Consumer>
296+
</ToolkitContext.Provider>
297+
```
298+
258299
### <a name='onTableChange'>onTableChange - [Function]</a>
259300
This callback function will be called when [`remote`](#remote) enabled only.
260301

‎docs/migration.md

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,28 @@ Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/p
113113

114114
No big changes for pagination, but still can't custom the pagination list, button and sizePerPage dropdown.
115115

116+
## Table Search
117+
the usage of search functionality is a little bit different from legacy search. The mainly different thing is developer have to render the search input field, we do believe it will be very flexible for all the developers who want to custom the search position or search field itself.
118+
119+
- [x] Custom search component and position
120+
- [x] Custom search value
121+
- [ ] Clear search
122+
- [ ] Multiple search
123+
- [ ] Strict search
124+
116125
## Remote
117126

118-
> It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html).
127+
> It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html).
128+
129+
130+
## Row insert/Delete
131+
Not support yet
132+
133+
## Expand row
134+
Not support yet
135+
136+
## Keyboard Navigation
137+
Not support yet
138+
139+
## Export CSV
140+
Not support yet
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# react-bootstrap-table2-toolkit
2+
3+
`react-bootstrap-table2` support some additional features in [`react-bootstrap-table2-toolkit`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-toolkit).
4+
5+
In the future, this toolkit will support other feature like row delete, insert and export csv etc. Right now we only support Table Search.
6+
7+
**[Live Demo For Table Search](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Table%20Search)**
8+
9+
**[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html)**
10+
11+
-----
12+
13+
## Install
14+
15+
```sh
16+
$ npm install react-bootstrap-table2-toolkit --save
17+
```
18+
19+
## Table Search
20+
21+
```js
22+
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
23+
24+
const { SearchBar, searchFactory } = Search;
25+
//...
26+
27+
<ToolkitContext.Provider>
28+
<ToolkitContext.Consumer>
29+
{
30+
props => (
31+
<div>
32+
<h3>Input something at below input field:</h3>
33+
<SearchBar { ...props.searchProps } />
34+
<hr />
35+
<BootstrapTable
36+
keyField="id"
37+
data={ products }
38+
columns={ columns }
39+
search={ searchFactory({
40+
...props.searchProps
41+
}) }
42+
/>
43+
</div>
44+
)
45+
}
46+
</ToolkitContext.Consumer>
47+
</ToolkitContext.Provider>
48+
```
49+
50+
1. You need to enable the search functionality via `search` prop on `BootstrapTable` and pass the result of calling `searchFactory` with custom option and default `searchProps` provided by `ToolkitContext.Provider`
51+
52+
2. `ToolkitContext` is a react context, you are supposed to wrap the `BootstrapTable` and `SearchBar` as the child of `ToolkitContext.Consumer`
53+
54+
3. You should render `SearchBar` with `searchProps` as well.
55+
56+
### Options
57+
58+
# searchFormatted - [bool]
59+
If you want to search on the formatted data, you are supposed to enable it. `react-bootstrap-table2` will check if you define the `column.formatter` when doing search.
60+
61+
```js
62+
<BootstrapTable
63+
keyField="id"
64+
data={ products }
65+
columns={ columns }
66+
search={ searchFactory({
67+
...props.searchProps,
68+
searchFormatted: true
69+
}) }
70+
/>
71+
```

0 commit comments

Comments
(0)

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