mirror of
https://github.com/gosticks/react-bootstrap-table2.git
synced 2026-08-11 19:50:17 +00:00
patch for 20180624 release
This commit is contained in:
@@ -33,6 +33,7 @@ You can get all types of filters via import and these filters are a factory func
|
||||
* SelectFilter
|
||||
* NumberFilter
|
||||
* DateFilter
|
||||
* CustomFilter
|
||||
* **Coming soon!**
|
||||
|
||||
## Text Filter
|
||||
@@ -198,6 +199,48 @@ 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're only few props are valid:
|
||||
|
||||
|
||||
```js
|
||||
import filterFactory, { FILTER_TYPES, Comparator } from 'react-bootstrap-table2-filter';
|
||||
|
||||
const customFilter = customFilter({
|
||||
type: FILTER_TYPES.NUMBER, // default is FILTER_TYPES.TEXT
|
||||
comparator: Comparator.EQ, // only work if type is FILTER_TYPES.SELECT
|
||||
caseSensitive: false, // default is true
|
||||
})
|
||||
```
|
||||
|
||||
<hr />
|
||||
|
||||
## Programmatically Filter
|
||||
|
||||
+31
-2
@@ -14,18 +14,24 @@ title: Column Filter Props
|
||||
* [selectFilter](#selectFilter)
|
||||
* [numberFilter](#numberFilter)
|
||||
* [dateFilter](#dateFilter)
|
||||
* [customFilter](#customFilter)
|
||||
* [Comparator](#comparator)
|
||||
* [FILTER_TYPES](#filter-types)
|
||||
|
||||
## **Getting Started**
|
||||
Please check [Getting Started Guide](./basic-filter.html)
|
||||
|
||||
## **How to use**
|
||||
You should apply following two props to enable filter functionality:
|
||||
* `filterFactory`
|
||||
* `filters` (Available filters)
|
||||
* Give `filter` prop on `BootstrapTable` which value is the return value from calling `filterFactory` function
|
||||
* Add `filter` property on `column` object:
|
||||
* textFilter
|
||||
* selectFilter
|
||||
* numberFilter
|
||||
* dateFilter
|
||||
* customFilter
|
||||
|
||||
For example:
|
||||
|
||||
```js
|
||||
import BootstrapTable from 'react-bootstrap-table-next';
|
||||
@@ -318,6 +324,19 @@ const columns = [{ ... }, { ... }, {
|
||||
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
|
||||
```
|
||||
|
||||
## customFilter
|
||||
**Required**: NONE
|
||||
|
||||
**Optional**:
|
||||
### customFilter.type - [String]
|
||||
* Assign the filter mode when `react-bootstrap-table` filering your data, please check [FILTER_TYPES](#filter-types) for available values.
|
||||
### customFilter.comparator - [Comparator]
|
||||
* Specify what kind of comparator to compare. Default is `Comparator.LIKE`. But if `customFilter.type` is `FILTER_TYPES.SELECT`, this default value will be `Comparator.EQ`
|
||||
|
||||
### customFilter.caseSensitive - [Boolean]
|
||||
* default is `false`, and `true` will only work when comparator is `LIKE`.
|
||||
|
||||
|
||||
## **Comparator**
|
||||
We support the following ways to do the comparison. Each `filter` has its default comparator. For more information, please take refer to the introduction of props above.
|
||||
|
||||
@@ -330,3 +349,13 @@ We support the following ways to do the comparison. Each `filter` has its defaul
|
||||
| 5 | Comparator.GE | >= | |
|
||||
| 6 | Comparator.LT | < | |
|
||||
| 7 | Comparator.LE | <= | |
|
||||
|
||||
## **FILTER_TYPES**
|
||||
|
||||
Following properties is valid in `FILTER_TYPES`:
|
||||
* TEXT
|
||||
* SELECT
|
||||
* NUMBER
|
||||
* DATE
|
||||
|
||||
You will only need the `FILTER_TYPES` when you are customize the filter component and you want to assign a specify filter mode.
|
||||
+1
-1
@@ -88,7 +88,7 @@ Please see [available filter configuration](./filter-props.html).
|
||||
- [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
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
---
|
||||
title: New Release (2018-06-24)
|
||||
author: Allen Fang
|
||||
authorURL: https://twitter.com/allenfang_tw
|
||||
---
|
||||
|
||||
## Changed Packages
|
||||
|
||||
This release bump following packages:
|
||||
|
||||
* `react-bootstrap-table-next@0.1.14`
|
||||
* `react-bootstrap-table2-paginator@0.1.5`
|
||||
* `react-bootstrap-table2-filter@0.3.0`
|
||||
|
||||
## Changelog
|
||||
|
||||
### Bug fixes
|
||||
* Fix table will jump to first page after cell editing in remote mode([42c6bc0](https://github.com/react-bootstrap-table/react-bootstrap-table2/commit/42c6bc03370fa5ac0cdbefb69503e5b72c48cb53))
|
||||
* Click on filter will trigger sorting([#380](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/380))
|
||||
|
||||
### Features
|
||||
* Support custom filter([#389](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/389))
|
||||
|
||||
### Enhancements
|
||||
N/A
|
||||
Reference in New Issue
Block a user