From 9a2dc319ce8b91b0a18384ca484dafb215fc6904 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Wed, 14 Feb 2018 16:26:01 +0800 Subject: [PATCH] 20180214 --- docs/basic-filter.md | 42 +++++++++++++++++++++++++ docs/basic-sort.md | 14 +++++++++ docs/column-props.md | 14 +++++++++ docs/migration.md | 3 +- website/blog/2018-02-14-version-bump.md | 26 +++++++++++++++ 5 files changed, 98 insertions(+), 1 deletion(-) create mode 100644 website/blog/2018-02-14-version-bump.md diff --git a/docs/basic-filter.md b/docs/basic-filter.md index eee8e1d..7e9698d 100644 --- a/docs/basic-filter.md +++ b/docs/basic-filter.md @@ -31,6 +31,7 @@ You can get all types of filters via import and these filters are a factory func * TextFilter * SelectFilter +* NumberFilter * **Coming soon!** ## Text Filter @@ -61,6 +62,7 @@ const priceFilter = textFilter({ className: 'my-custom-text-filter', // custom classname on input defaultValue: 'test', // default filtering value 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 }); @@ -106,9 +108,49 @@ const qualityFilter = selectFilter({ className: 'my-custom-text-filter', // custom classname on input defaultValue: '2', // default filtering value 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 }); +// omit... +``` + +## Number Filter + +```js +import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter'; + +const columns = [..., { + dataField: 'price', + text: 'Product Price', + filter: numberFilter() +}]; + + +``` + +Numner filter is same as other filter, you can custom the number filter via `numberFilter` factory function: + +```js +import filterFactory, { selectFilter, Comparator } from 'react-bootstrap-table2-filter'; +// omit... + +const numberFilter = numberFilter({ + options: [2100, 2103, 2105], // if options defined, will render number select instead of number input + delay: 600, // how long will trigger filtering after user typing, default is 500 ms + placeholder: 'custom placeholder', // placeholder for number input + withoutEmptyComparatorOption: true, // dont render empty option for comparator + withoutEmptyNumberOption: true, // dont render empty option for numner select if it is defined + comparators: [Comparator.EQ, Comparator.GT, Comparator.LT], // Custom the comparators + style: { display: 'inline-grid' }, // custom the style on number filter + className: 'custom-numberfilter-class', // custom the class on number filter + comparatorStyle: { backgroundColor: 'antiquewhite' }, // custom the style on comparator select + 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 +}) + // omit... ``` \ No newline at end of file diff --git a/docs/basic-sort.md b/docs/basic-sort.md index a6d2b4c..7ecbab0 100644 --- a/docs/basic-sort.md +++ b/docs/basic-sort.md @@ -37,6 +37,20 @@ After table rendered, you can see the Product ID and Product Name will have a ca ### Default Sort `react-bootstrap-table2` will only apply the default sort at first time rendering, you can achieve the default sorting on table easily via [`defaultSorted`](./table-props.html#defaultsorted-array). +### Sort Event Listener +Defined [`onSort`](./column-props.html#columnonsort-function) on target column: + +```js +{ + dataField: 'id', + text: 'Product ID', + sort: true, + onSort: (field, order) => { + // ... + } +} +``` + ### Manage Sorting Externally **Coming Soon!** diff --git a/docs/column-props.md b/docs/column-props.md index 42124dc..5857c0f 100644 --- a/docs/column-props.md +++ b/docs/column-props.md @@ -15,6 +15,7 @@ Definition of columns props on BootstrapTable * [formatExtraData](#columnformatextradata-any) * [sort](#columnsort-bool) * [sortFunc](#columnsortfunc-function) +* [onSort](#columnonsort-function) * [classes](#columnclasses-string-function) * [style](#columnstyle-object-function) * [title](#columntitle-bool-function) @@ -108,6 +109,19 @@ Enable the column sort via a `true` value given. ``` > The possible value of `order` argument is **`asc`** and **`desc`**. +## column.onSort - [Function] +`column.onSort` is an event listener for subscribing the event of sort: + +```js +{ + // omit... + sort: true, + onSort: (field, order) => { + // .... + } +} +``` + ## column.classes - [String | Function] It's availabe to have custom class on table column: diff --git a/docs/migration.md b/docs/migration.md index 52b078b..aaaf1d8 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -66,6 +66,7 @@ Please see [Work with table sort](./basic-sort.html). - [x] Default Sort - [x] Remote mode - [x] Custom the sorting header +- [x] Sort event listener - [ ] Custom the sort caret - [ ] Sort management - [ ] Multi sort @@ -91,7 +92,7 @@ Please see [available filter configuration](./filter-props.html). - [ ] Regex Filter - [x] Select Filter - [x] Custom Select Filter -- [ ] Number Filter +- [x] Number Filter - [ ] Date Filter - [ ] Array Filter - [ ] Programmatically Filter diff --git a/website/blog/2018-02-14-version-bump.md b/website/blog/2018-02-14-version-bump.md new file mode 100644 index 0000000..8884630 --- /dev/null +++ b/website/blog/2018-02-14-version-bump.md @@ -0,0 +1,26 @@ +--- +title: New Release (2018-02-14) +author: Allen Fang +authorURL: https://twitter.com/allenfang_tw +--- + +## Changed Packages + +This release bump following packages: + +* `react-bootstrap-table-next@0.1.3` +* `react-bootstrap-table-filter@0.1.3` + +## Changelog + +### Bug fixes +* Fixed TextFilter contains an input of type text with both value and defaultValue props([a0af964](https://github.com/react-bootstrap-table/react-bootstrap-table2/commit/a0af964d76c3643c212a81c68e91970afd16d536)) + +### Features +* Support Number Filter([#200](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/200)) +* Support `caseSensitive` on Text and Select filter([#201](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/201)) +* Support sort event listener([#202](https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/202)) + +### Enhancements +* Text Filter right now is case insensitive which same as `react-bootstrap-table`[#201](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/201) +* `rowEvents.onClick` will be wrapped so that funcation can recieve additional informatnion like: `row` and `rowIndex`([#187](https://github.com/react-bootstrap-table/react-bootstrap-table2/pull/187)) \ No newline at end of file