mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-03-31 18:04:36 +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
|
||||
71
packages/react-bootstrap-table2-toolkit/README.md
Normal file
71
packages/react-bootstrap-table2-toolkit/README.md
Normal 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
|
||||
}) }
|
||||
/>
|
||||
```
|
||||
Reference in New Issue
Block a user