patch docs for table search

This commit is contained in:
AllenFang
2018-06-23 15:10:37 +08:00
parent 46f0ce493b
commit 6eaffe1993
3 changed files with 135 additions and 1 deletions

View File

@@ -28,6 +28,7 @@
* [defaultSortDirection](#defaultSortDirection)
* [pagination](#pagination)
* [filter](#filter)
* [search](#search)
* [onTableChange](#onTableChange)
### <a name='keyField'>keyField(**required**) - [String]</a>
@@ -260,6 +261,46 @@ const columns = [ {
<BootstrapTable data={ data } columns={ columns } filter={ filterFactory() } />
```
### <a name='search'>search - [Object]</a>
Enable the search functionality.
`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.
```sh
$ npm install react-bootstrap-table2-toolkit --save
```
After installation of `react-bootstrap-table2-toolkit`, you can render search field easily:
```js
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
const { SearchBar, searchFactory } = Search;
//...
<ToolkitContext.Provider>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
```
### <a name='onTableChange'>onTableChange - [Function]</a>
This callback function will be called when [`remote`](#remote) enabled only.

View File

@@ -113,6 +113,28 @@ Remember to install [`react-bootstrap-table2-paginator`](https://www.npmjs.com/p
No big changes for pagination, but still can't custom the pagination list, button and sizePerPage dropdown.
## Table Search
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.
- [x] Custom search component and position
- [x] Custom search value
- [ ] Clear search
- [ ] Multiple search
- [ ] Strict search
## Remote
> It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html).
> It's totally different in `react-bootstrap-table2`. Please [see](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-remote.html).
## Row insert/Delete
Not support yet
## Expand row
Not support yet
## Keyboard Navigation
Not support yet
## Export CSV
Not support yet

View File

@@ -0,0 +1,71 @@
# react-bootstrap-table2-toolkit
`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).
In the future, this toolkit will support other feature like row delete, insert and export csv etc. Right now we only support Table Search.
**[Live Demo For Table Search](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Table%20Search)**
**[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/pagination-props.html)**
-----
## Install
```sh
$ npm install react-bootstrap-table2-toolkit --save
```
## Table Search
```js
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
const { SearchBar, searchFactory } = Search;
//...
<ToolkitContext.Provider>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
```
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`
2. `ToolkitContext` is a react context, you are supposed to wrap the `BootstrapTable` and `SearchBar` as the child of `ToolkitContext.Consumer`
3. You should render `SearchBar` with `searchProps` as well.
### Options
# searchFormatted - [bool]
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.
```js
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
search={ searchFactory({
...props.searchProps,
searchFormatted: true
}) }
/>
```