Implement number filter

docs/migration.md

@@ -85,7 +85,7 @@ Please see [available filter configuration](https://react-bootstrap-table.github
 - [ ] Regex Filter
 - [x] Select Filter
 - [x] Custom Select Filter
-- [ ] Number Filter
+- [X] Number Filter
 - [ ] Date Filter
 - [ ] Array Filter
 - [ ] Programmatically Filter

packages/react-bootstrap-table2-example/examples/column-filter/custom-number-filter.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: numberFilter({
+ options: [2100, 2103, 2105],
+ delay: 600,
+ placeholder: 'custom placeholder',
+ withoutEmptyComparatorOption: true,
+ comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],
+ style: { display: 'inline-grid' },
+ className: 'custom-numberfilter-class',
+ comparatorStyle: { backgroundColor: 'antiquewhite' },
+ comparatorClassName: 'custom-comparator-class',
+ numberStyle: { backgroundColor: 'cadetblue', margin: '0px' },
+ numberClassName: 'custom-number-class'
+ })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: numberFilter({
+ options: [2100, 2103, 2105],
+ delay: 600,
+ placeholder: 'custom placeholder',
+ withoutEmptyComparatorOption: true,
+ comparators: [Comparator.EQ, Comparator.GT, Comparator.LT],
+ style: { display: 'inline-grid' },
+ className: 'custom-numberfilter-class',
+ comparatorStyle: { backgroundColor: 'antiquewhite' },
+ comparatorClassName: 'custom-comparator-class',
+ numberStyle: { backgroundColor: 'cadetblue', margin: '0px' },
+ numberClassName: 'custom-number-class'
+ })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+ <div>
+ <BootstrapTable
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ filter={ filterFactory() }
+ />
+ <Code>{ sourceCode }</Code>
+ </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/number-filter-default-value.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: numberFilter({
+ defaultValue: { number: 2103, comparator: Comparator.GT }
+ })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter, Comparator } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: numberFilter({
+ defaultValue: { number: 2103, comparator: Comparator.GT }
+ })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+ <div>
+ <BootstrapTable
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ filter={ filterFactory() }
+ />
+ <Code>{ sourceCode }</Code>
+ </div>
+);

packages/react-bootstrap-table2-example/examples/column-filter/number-filter.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: numberFilter()
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: numberFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+ <div>
+ <BootstrapTable
+ keyField="id"
+ data={ products }
+ columns={ columns }
+ filter={ filterFactory() }
+ />
+ <Code>{ sourceCode }</Code>
+ </div>
+);

packages/react-bootstrap-table2-example/stories/index.js

@@ -43,6 +43,9 @@ import SelectFilter from 'examples/column-filter/select-filter';
 import SelectFilterWithDefaultValue from 'examples/column-filter/select-filter-default-value';
 import SelectFilterComparator from 'examples/column-filter/select-filter-like-comparator';
 import CustomSelectFilter from 'examples/column-filter/custom-select-filter';
+import NumberFilter from 'examples/column-filter/number-filter';
+import NumberFilterWithDefaultValue from 'examples/column-filter/number-filter-default-value';
+import CustomNumberFilter from 'examples/column-filter/custom-number-filter';
 
 // work on rows
 import RowStyleTable from 'examples/rows/row-style';
@@ -143,12 +146,15 @@ storiesOf('Column Filter', module)
  .add('Text Filter', () => <TextFilter />)
  .add('Text Filter with Default Value', () => <TextFilterWithDefaultValue />)
  .add('Text Filter with Comparator', () => <TextFilterComparator />)
- .add('Custom Text Filter', () => <CustomTextFilter />)
  // add another filter type example right here.
  .add('Select Filter', () => <SelectFilter />)
  .add('Select Filter with Default Value', () => <SelectFilterWithDefaultValue />)
  .add('Select Filter with Comparator', () => <SelectFilterComparator />)
+ .add('Number Filter', () => <NumberFilter />)
+ .add('Number Filter with Default Value', () => <NumberFilterWithDefaultValue />)
+ .add('Custom Text Filter', () => <CustomTextFilter />)
  .add('Custom Select Filter', () => <CustomSelectFilter />)
+ .add('Custom Number Filter', () => <CustomNumberFilter />)
  .add('Custom Filter Value', () => <CustomFilterValue />);
 
 storiesOf('Work on Rows', module)

packages/react-bootstrap-table2-filter/README.md

@@ -18,6 +18,7 @@ You can get all types of filters via import and these filters are a factory func
 
 * TextFilter
 * SelectFilter
+* NumberFilter
 * **Coming soon!**
 
 ## Add CSS
@@ -107,5 +108,44 @@ const qualityFilter = selectFilter({
  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()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+```
+
+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...
 ```

packages/react-bootstrap-table2-filter/index.js

@@ -1,5 +1,6 @@
 import TextFilter from './src/components/text';
 import SelectFilter from './src/components/select';
+import NumberFilter from './src/components/number';
 import wrapperFactory from './src/wrapper';
 import * as Comparison from './src/comparison';
 
@@ -19,3 +20,8 @@ export const selectFilter = (props = {}) => ({
  Filter: SelectFilter,
  props
 });
+
+export const numberFilter = (props = {}) => ({
+ Filter: NumberFilter,
+ props
+});

packages/react-bootstrap-table2-filter/src/comparison.js

@@ -1,2 +1,7 @@
 export const LIKE = 'LIKE';
 export const EQ = '=';
+export const NE = '!=';
+export const GT = '>';
+export const GE = '>=';
+export const LT = '<';
+export const LE = '<=';