Changed Packages
+This release bump following packages:
+
+react-bootstrap-table-next@0.1.8
+react-bootstrap-table2-filter@0.1.6
+
+Changelog
+Bug fixes
+
+Features
+
+- Programmtically Filters(#287)
+
+Enhancements
+
+- Pass event object to
selectRow.onSelect and selectRow.onSelectAll.(#304)
+
+Changed Packages
This release bump following packages:
react-bootstrap-table-next@0.1.6
diff --git a/docs/basic-filter.html b/docs/basic-filter.html
index e929ee6..b59c193 100644
--- a/docs/basic-filter.html
+++ b/docs/basic-filter.html
@@ -50,7 +50,8 @@
comparator: Comparator.EQ,
caseSensitive: true,
style: { ... },
- delay: 1000
+ delay: 1000,
+ getFilter: (f) => { ... }
});
@@ -90,7 +91,8 @@
comparator: Comparator.LIKE,
caseSensitive: false,
style: { ... },
- withoutEmptyOption: true
+ withoutEmptyOption: true,
+ getFilter: (f) => { ... }
});
@@ -123,9 +125,52 @@
comparatorClassName: 'custom-comparator-class',
numberStyle: { backgroundColor: 'cadetblue', margin: '0px' },
numberClassName: 'custom-number-class',
- defaultValue: { number: 2103, comparator: Comparator.GT }
+ defaultValue: { number: 2103, comparator: Comparator.GT },
+ getFilter: (f) => { ... }
})
+
+Programmatically Filter
+react-bootstrap-table2 allow you to control filter externally, which means user no need to type something on filter!!
+How
+All the filters have a getFilter prop which accept a callback function and pass a filter object to you.
+
class Table extends Components {
+ constructor(props) {
+ super(props);
+ this.filterPrice = this.filterPrice.bind(this);
+ const columns = [
+ ..., {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter({
+
+ getFilter: (filter) => this.priceFilter = filter;
+ })
+ }];
+ }
+
+ filterPrice() {
+
+ this.priceFilter(100);
+ }
+
+ render() {
+ return (
+ <div>
+ <button onClick={ this.filterPrice }>Click to filter</button>
+ <BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+ </div>
+ );
+ }
+}
+
+
+Examples
+
\ No newline at end of file
diff --git a/docs/filter-props.html b/docs/filter-props.html
index 67e0b64..a92a9ab 100644
--- a/docs/filter-props.html
+++ b/docs/filter-props.html
@@ -19,14 +19,12 @@
Comparator
Getting Started
-
$ npm install react-bootstrap-table2-filter
-
-
After installing react-bootstrap-table2-filter, you can configure filter on table as following instruction.
+
Please check Getting Started Guide
How to use
-
You should apply following 2 to enable filter functionality for react-bootstrap-table2.
+
You should apply following two props to enable filter functionality:
filterFactory
-filters (3 types support)
+filters (Available filters)
- textFilter
- selectFilter
diff --git a/docs/getting-started.html b/docs/getting-started.html
index 29e5dcf..3aff5bf 100644
--- a/docs/getting-started.html
+++ b/docs/getting-started.html
@@ -39,4 +39,24 @@
export default () =>
<BootstrapTable keyField='id' data={ products } columns={ columns } />
+
+UMD
+Namespace
+
+- The namespace of
react-bootstrap-table-next is ReactBootstrapTable2
+- The namespace of
react-bootstrap-table2-editor is ReactBootstrapTable2Editor
+- The namespace of
react-bootstrap-table2-filter is ReactBootstrapTable2Filter
+- The namespace of
react-bootstrap-table2-paginator is ReactBootstrapTable2Paginator
+- The namespace of
react-bootstrap-table2-overlay is ReactBootstrapTable2Overlay
+
+npm
+After install from npm, get UMD module from dist folder in the node_modules/PACKAGE_NAME:
+unpkg
+
+- Download
react-bootstrap-table-next from here
+- Download
react-bootstrap-table2-editor from here
+- Download
react-bootstrap-table2-filter from here
+- Download
react-bootstrap-table2-paginator from here
+- Download
react-bootstrap-table2-overlay from here
+