diff --git a/docs/filter-props.md b/docs/filter-props.md index 1d92f66..6196e2d 100644 --- a/docs/filter-props.md +++ b/docs/filter-props.md @@ -61,7 +61,7 @@ const columns = [{ * default filtering value ### textFilter.comparator - [Comparator] -* What kind of comparator to compare. Default is Comparator.LIKE +* Specify what kind of comparator to compare. Default is Comparator.LIKE ### textFilter.caseSensitive - [Boolean] * default is `false`, and `true` will only work when comparator is `LIKE`. @@ -124,7 +124,7 @@ const columns = [{ * default filtering value ### selectFilter.comparator - [Comparator] -* What kind of comparator to compare. Default is `Comparator.EQ` +* Specify what kind of comparator to compare. Default is `Comparator.EQ` ### selectFilter.style - [Object] * your custom inline styles on `input` @@ -165,3 +165,81 @@ const columns = [ ``` ## (3). numberFilter +**Required**: NONE + +**Optional**: + +### numberFilter.options - [Array] +* Once the `options` has been defined, it will render number `select` drop down instead of number input field. + +### numberFilter.delay - [Number] +* Debounce time, which means how long will trigger filtering after user typing. Default is `500ms`. + +### numberFilter.placeholder - [String] +* customized placeholder for number input. + +### numberFilter.withoutEmptyComparatorOption - [Boolean] +* When it was set to `true`, the drop down list of `comparator` would hide the default selection. + +### numberFilter.withoutEmptyNumberOption - [Boolean] +* When it was set to `true`, the drop down list of `number` would hide the default selection. Besides, before picking up this prop, please make sure that you've defined the `props.options` correctly. + +### numberFilter.defaultValue - [Object] +* It is the default filtering value. Furthermore, it accepts **2** attributes: + * number: filter value + * comparator: what kind of comparator to compare + +### numberFilter.comparator - [[Comparator]] +* Specify what kind of comparator to compare. Default is to list `all` of comparators. + +### numberFilter.className - [String] +* custom class name on the `wrapper` of number input and comparator drop down. + +### numberFilter.comparatorClassName - [String] +* custom class name on the `comparator` drop down. + +### numberFilter.numberClassName - [String] +* custom class name on the number `input`. + +### numberFilter.style - [Object] +* custom inline styles on the `wrapper` of number input and comparator drop down. + +### numberFilter.comparatorStyle - [Object] +* custom inline styles on the `comparator` drop down. + +### numberFilter.numberStyle - [Object] +* custom inline styles on the number `input`. + +### numberFilter.getFilter - [Function] +* export `filter` function to allow users to access. For numberFilter,
`filter({ number, comparator })` to filter columns dynamically. + +**Example**: +```js +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter'; + +const columns = [{ ... }, { ... }, { + dataField: 'price', + text: 'Product Price', + filter: 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 number 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 + getFilter: (filter) => { // priceFilter was assigned once the component has been mounted. + priceFilter = filter; + } + }) +}]; + + +```