patch docs for multiselect filter

This commit is contained in:
AllenFang 2018-07-31 16:57:34 +08:00
parent 4e204f1ccd
commit 38d3e2df05
2 changed files with 48 additions and 1 deletions

View File

@ -88,7 +88,7 @@ Please see [available filter configuration](https://react-bootstrap-table.github
- [x] Custom Select Filter
- [X] Number Filter
- [X] Date Filter
- [ ] Array Filter
- [X] Array Filter
- [X] Programmatically Filter
Remember to install [`react-bootstrap-table2-filter`](https://www.npmjs.com/package/react-bootstrap-table2-filter) firstly.

View File

@ -18,6 +18,7 @@ You can get all types of filters via import and these filters are a factory func
* TextFilter
* SelectFilter
* MultiSelectFilter
* NumberFilter
* DateFilter
* CustomFilter
@ -114,6 +115,52 @@ const qualityFilter = selectFilter({
// omit...
```
## MultiSelect Filter
A quick example:
```js
import filterFactory, { multiSelectFilter } from 'react-bootstrap-table2-filter';
// omit...
const selectOptions = {
0: 'good',
1: 'Bad',
2: 'unknown'
};
const columns = [
..., {
dataField: 'quality',
text: 'Product Quailty',
formatter: cell => selectOptions[cell],
filter: multiSelectFilter({
options: selectOptions
})
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
```
Following is an example for custom select filter:
```js
import filterFactory, { multiSelectFilter, Comparator } from 'react-bootstrap-table2-filter';
// omit...
const qualityFilter = multiSelectFilter({
options: selectOptions,
placeholder: 'My Custom PlaceHolder', // custom the input placeholder
className: 'my-custom-text-filter', // custom classname on input
defaultValue: '2', // default filtering value
comparator: Comparator.LIKE, // default is Comparator.EQ
style: { ... }, // your custom styles on input
withoutEmptyOption: true // hide the default select option
});
// omit...
```
## Number Filter
```js