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