patch docs for custom filter

This commit is contained in:
AllenFang 2018-06-24 15:15:57 +08:00
parent cbaec4c655
commit eb74625835
2 changed files with 53 additions and 2 deletions

View File

@ -82,7 +82,7 @@ Please see [available filter configuration](https://react-bootstrap-table.github
- [x] Text Filter
- [x] Custom Text Filter
- [x] Remote Filter
- [ ] Custom Filter Component
- [x] Custom Filter Component
- [ ] Regex Filter
- [x] Select Filter
- [x] Custom Select Filter

View File

@ -20,6 +20,7 @@ You can get all types of filters via import and these filters are a factory func
* SelectFilter
* NumberFilter
* DateFilter
* CustomFilter
* **Coming soon!**
## Add CSS
@ -189,4 +190,54 @@ const dateFilter = dateFilter({
})
// omit...
```
```
## Custom Filter
```js
import filterFactory, { customFilter } from 'react-bootstrap-table2-filter';
const columns = [..., {
dataField: 'date',
text: 'Product Name',
filter: customFilter(),
filterRenderer: (onFilter, column) => .....
}];
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
```
In custom filter case, you are suppose to finish following two steps:
1. Call `customFilter` and pass to `column.filter`
2. Give `column.filterRenderer` as a callback function and return your custom filter element.
### column.filterRenderer
This function will pass two argument to you:
1. `onFilter`: call it to trigger filter when you need.
2. `column`: Just the column object!
In the end, please remember to return your custom filter element!
### customFilter
`customFilter` function just same as `textFilter`, `selectFilter` etc, it is for customization reason. However, in the custom filter case, there's only one props is valid: `type`
```js
import filterFactory, { FILTER_TYPES } from 'react-bootstrap-table2-filter';
const customFilter = customFilter({
type: FILTER_TYPES.NUMBER, // default is FILTER_TYPES.TEXT
})
```
`type` is a way to ask `react-bootstrap-table` to filter you data as number, select, date or normal text.
### FILTER_TYPES
Following properties is valid in `FILTER_TYPES`:
* TEXT
* SELECT
* NUMBER
* DATE