mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-06-29 05:30:05 +00:00
patch docs for table search
This commit is contained in:
@@ -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.
|
||||
|
||||
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user