2018 Q1
0.1.0
- First drop
diff --git a/docs/basic-filter.html b/docs/basic-filter.html
index 8871871..5be9963 100644
--- a/docs/basic-filter.html
+++ b/docs/basic-filter.html
@@ -24,6 +24,7 @@
- SelectFilter
- NumberFilter
- DateFilter
+- CustomFilter
- Coming soon!
Text Filter
@@ -166,6 +167,40 @@
+Custom Filter
+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:
+
+- Call
customFilter and pass to column.filter
+- Give
column.filterRenderer as a callback function and return your custom filter element.
+
+column.filterRenderer
+This function will pass two argument to you:
+
+onFilter: call it to trigger filter when you need.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:
+import filterFactory, { FILTER_TYPES, Comparator } from 'react-bootstrap-table2-filter';
+
+const customFilter = customFilter({
+ type: FILTER_TYPES.NUMBER,
+ comparator: Comparator.EQ,
+ caseSensitive: false,
+})
+
Programmatically Filter
react-bootstrap-table2 allow you to control filter externally, which means user no need to type something on filter!!
diff --git a/docs/filter-props.html b/docs/filter-props.html
index 3a22b87..478c0a9 100644
--- a/docs/filter-props.html
+++ b/docs/filter-props.html
@@ -16,22 +16,27 @@
selectFilter
numberFilter
dateFilter
+customFilter
Comparator
+FILTER_TYPES
Getting Started
Please check Getting Started Guide
How to use
You should apply following two props to enable filter functionality:
-filterFactoryfilters (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:
import BootstrapTable from 'react-bootstrap-table-next';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
@@ -350,6 +355,21 @@
<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 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.
@@ -366,4 +386,13 @@
| 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.