diff --git a/docs/basic-filter.md b/docs/basic-filter.md index 7e9698d..7dc6e21 100644 --- a/docs/basic-filter.md +++ b/docs/basic-filter.md @@ -64,7 +64,8 @@ const priceFilter = textFilter({ comparator: Comparator.EQ, // default is Comparator.LIKE caseSensitive: true, // default is false, and true will only work when comparator is LIKE style: { ... }, // your custom styles on input - delay: 1000 // how long will trigger filtering after user typing, default is 500 ms + delay: 1000, // how long will trigger filtering after user typing, default is 500 ms + getFilter: (f) => { ... } // accept callback function and you can call it for filter programmtically }); // omit... @@ -110,7 +111,8 @@ const qualityFilter = selectFilter({ comparator: Comparator.LIKE, // default is Comparator.EQ caseSensitive: false, // default is true style: { ... }, // your custom styles on input - withoutEmptyOption: true // hide the default select option + withoutEmptyOption: true, // hide the default select option + getFilter: (f) => { ... } // accept callback function and you can call it for filter programmtically }); // omit... @@ -149,8 +151,56 @@ const numberFilter = numberFilter({ comparatorClassName: 'custom-comparator-class', // custom the class on comparator select numberStyle: { backgroundColor: 'cadetblue', margin: '0px' }, // custom the style on number input/select numberClassName: 'custom-number-class', // custom the class on ber input/select - defaultValue: { number: 2103, comparator: Comparator.GT } // default value + defaultValue: { number: 2103, comparator: Comparator.GT }, // default value + getFilter: (f) => { ... } // accept callback function and you can call it for filter programmtically }) // omit... -``` \ No newline at end of file +``` + +
+ +## 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. + +```js +class Table extends Components { + constructor(props) { + super(props); + this.filterPrice = this.filterPrice.bind(this); + const columns = [ + ..., { + dataField: 'price', + text: 'Product Price', + filter: textFilter({ + // preserve filter instance + getFilter: (filter) => this.priceFilter = filter; + }) + }]; + } + + filterPrice() { + // call it anywhere when you want!! + this.priceFilter(100); + } + + render() { + return ( +
+ + +
+ ); + } +} + +``` + +### Examples +* [Example For Programmtically Text Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Text%20Filter%20) +* [Example For Programmtically Select Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Select%20Filter%20) +* [Example For Programmtically Number Filter](../storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Number%20Filter%20) diff --git a/docs/filter-props.md b/docs/filter-props.md index b9e358e..14a5d11 100644 --- a/docs/filter-props.md +++ b/docs/filter-props.md @@ -16,15 +16,12 @@ title: Column Filter Props * [Comparator](#comparator) ## **Getting Started** -``` -$ npm install react-bootstrap-table2-filter --save -``` -After installing `react-bootstrap-table2-filter`, you can configure `filter` on table as following instruction. +Please check [Getting Started Guide](./basic-filter.html) ## **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 * numberFilter diff --git a/docs/getting-started.md b/docs/getting-started.md index a1a7207..0798920 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -46,3 +46,26 @@ const columns = [{ export default () => ``` +
+ +## 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](https://unpkg.com/dist/react-bootstrap-table-next.min.js) +* Download `react-bootstrap-table2-editor` from [here](https://unpkg.com/react-bootstrap-table2-editor/dist/react-bootstrap-table2-editor.min.js) +* Download `react-bootstrap-table2-filter` from [here](https://unpkg.com/react-bootstrap-table2-filter/dist/react-bootstrap-table2-filter.min.js) +* Download `react-bootstrap-table2-paginator` from [here](https://unpkg.com/react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.js) +* Download `react-bootstrap-table2-overlay` from [here](https://unpkg.com/react-bootstrap-table2-overlay/dist/react-bootstrap-table2-overlay.min.js) diff --git a/docs/row-select-props.md b/docs/row-select-props.md index bf743f7..0e69234 100644 --- a/docs/row-select-props.md +++ b/docs/row-select-props.md @@ -157,13 +157,13 @@ const selectRow = { ``` ## selectRow.onSelect - [Function] -This callback function will be called when a row is select/unselect and pass following three arguments: -`row`, `isSelect` and `rowIndex`. +This callback function will be called when a row is select/unselect and pass following four arguments: +`row`, `isSelect`, `rowIndex` and `e`. ```js const selectRow = { mode: 'checkbox', - onSelect: (row, isSelect, rowIndex) => { + onSelect: (row, isSelect, rowIndex, e) => { // ... } }; @@ -175,7 +175,7 @@ This callback function will be called when select/unselect all and it only work ```js const selectRow = { mode: 'checkbox', - onSelectAll: (isSelect, results) => { + onSelectAll: (isSelect, results, e) => { // ... } }; diff --git a/website/blog/2018-04-15-version-bump.md b/website/blog/2018-04-15-version-bump.md new file mode 100644 index 0000000..3bbb4d1 --- /dev/null +++ b/website/blog/2018-04-15-version-bump.md @@ -0,0 +1,26 @@ +--- +title: New Release (2018-04-15) +author: Allen Fang +authorURL: https://twitter.com/allenfang_tw +--- + +## Changed Packages + +This release bump following packages: + +* `react-bootstrap-table-next@0.1.8` +* `react-bootstrap-table2-editor@0.1.6` +* `react-bootstrap-table2-filter@0.1.6` +* `react-bootstrap-table2-paginator@0.1.2` +* `react-bootstrap-table2-overlay@0.1.2` + +## Changelog + +### Bug fixes +* Support UMD([#298](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/298)) + +### Features +* Programmtically Filters([#287](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/287)) + +### Enhancements +* Pass event object to `selectRow.onSelect` and `selectRow.onSelectAll`.([#304](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/304))