react-bootstrap-table2 separate the filter core code base to react-bootstrap-table2-filter. The following are guideline about how to use and the details of props of filterFactory and filters. For more information, please take refer to the samples as link here.
+Content Table
+
+Getting Started
+$ npm install react-bootstrap-table2-filter
+
+After installing react-bootstrap-table2-filter, you can configure filter on table as following instruction.
+How to use
+You should apply following 2 to enable filter functionality for react-bootstrap-table2.
+
+filterFactoryfilters (3 types support)
+
+- textFilter
+- selectFilter
+- numberFilter
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID'
+}, {
+ dataField: 'name',
+ text: 'Product Name'
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+
+Props of FilterFactory
+No Any Available Props Yet
+Props of Filters
+textFilter
+Required: NONE
+Optional:
+textFilter.placeholder - [String]
+
+- custom the input placeholder
+
+textFilter.className - [String]
+
+- custom class name on input
+
+textFilter.defaultValue - [String]
+
+- default filtering value
+
+textFilter.comparator - [Comparator]
+
+- 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.
+
+textFilter.style - [Object]
+
+- your custom inline styles on
input
+
+textFilter.delay - [Number]
+
+- Debounce time, which means how long will trigger filtering after user typing. Default is
500ms.
+
+textFilter.getFilter - [Function]
+
+- export
filter function to allow users to access. For textFilter, filter(value) to filter columns dynamically.
+
+Example
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+const columns = [{
+ dataField: 'id',
+ text: 'Product ID',
+}, {
+ dataField: 'name',
+ text: 'Product Name',
+ filter: textFilter({
+ placeholder: 'My Custom PlaceHolder',
+ className: 'my-custom-text-filter',
+ defaultValue: 'test',
+ comparator: Comparator.EQ,
+ caseSensitive: true,
+ style: { backgroundColor: 'yellow' },
+ delay: 1000,
+ onClick: e => console.log(e),
+ getFilter: (filter) => {
+ nameFilter = filter;
+ }
+ })
+}, {
+ dataField: 'price',
+ text: 'Product Price',
+ filter: textFilter()
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+
+selectFilter
+Required:
+selectFilter.options - [Object]
+
+- (Required) the options for the list of drop down.
+
+Optional:
+selectFilter.className - [String]
+
+- custom class name on input
+
+selectFilter.withoutEmptyOption - [Boolean]
+
+- When it was set to
true, the drop down list would hide the default selection.
+
+selectFilter.defaultValue - [String]
+
+- default filtering value
+
+selectFilter.comparator - [Comparator]
+
+- Specify what kind of comparator to compare. Default is
Comparator.EQ
+
+selectFilter.style - [Object]
+
+- your custom inline styles on
input
+
+selectFilter.getFilter - [Function]
+
+- export
filter function to allow users to access. For selectFilter, filter(value) to filter columns dynamically.
+
+Example
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = {
+ 0: 'good',
+ 1: 'Bad',
+ 2: 'unknown'
+};
+
+const columns = [
+ { ... }, { ... }, {
+ dataField: 'quality',
+ text: 'Product Quailty',
+ formatter: cell => selectOptions[cell],
+ filter: selectFilter({
+ options: selectOptions,
+ className: 'test-classname',
+ withoutEmptyOption: true,
+ defaultValue: 2,
+ comparator: Comparator.LIKE,
+ style: { backgroundColor: 'pink' },
+ getFilter: (filter) => {
+ qualityFilter = filter;
+ }
+ })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+
+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:
+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],
+ delay: 600,
+ placeholder: 'custom placeholder',
+ withoutEmptyComparatorOption: true,
+ withoutEmptyNumberOption: 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',
+ defaultValue: { number: 2103, comparator: Comparator.GT },
+ getFilter: (filter) => {
+ priceFilter = filter;
+ }
+ })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+
+Comparator
+We support the following ways to do the comparison. Each filter has its default comparator. For more information, please take refer to the introduction of props above.
+
+
+ | Comparator | Symbol | description |
|---|
+
+
+| 1 | Comparator.LIKE | N/A | To include filter value |
+| 2 | Comparator.EQ | = | |
+| 3 | Comparator.NE | != | |
+| 4 | Comparator.GT | > | |
+| 5 | Comparator.GE | >= | |
+| 6 | Comparator.LT | < | |
+| 7 | Comparator.LE | <= | |
+
+