mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2025-10-16 11:55:39 +00:00
patch docs for multiselect filter
This commit is contained in:
parent
4e204f1ccd
commit
38d3e2df05
@ -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.
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user