add story for #445

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

@@ -0,0 +1,81 @@
+/* eslint eqeqeq: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(8);
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+class Table extends React.Component {
+  filterByPrice = filterVal =>
+    products.filter(product => product.price == filterVal);
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name',
+      filter: textFilter()
+    }, {
+      dataField: 'price',
+      text: 'Product Price',
+      filter: textFilter({
+        onFilter: this.filterByPrice
+      })
+    }];
+
+    return (
+      <div>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+        />
+      </div>
+    );
+  }
+}
+`;
+
+export default class Table extends React.Component {
+  filterByPrice = filterVal =>
+    products.filter(product => product.price == filterVal);
+
+  render() {
+    const columns = [{
+      dataField: 'id',
+      text: 'Product ID'
+    }, {
+      dataField: 'name',
+      text: 'Product Name',
+      filter: textFilter()
+    }, {
+      dataField: 'price',
+      text: 'Product Price',
+      filter: textFilter({
+        onFilter: this.filterByPrice
+      })
+    }];
+
+    return (
+      <div>
+        <h2>Implement a eq filter on product price column</h2>
+        <BootstrapTable
+          keyField="id"
+          data={ products }
+          columns={ columns }
+          filter={ filterFactory() }
+        />
+        <Code>{ sourceCode }</Code>
+      </div>
+    );
+  }
+}

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

@@ -87,6 +87,7 @@ import CustomFilter from 'examples/column-filter/custom-filter';
 import AdvanceCustomFilter from 'examples/column-filter/advance-custom-filter';
 import ClearAllFilters from 'examples/column-filter/clear-all-filters';
 import FilterHooks from 'examples/column-filter/filter-hooks';
+import CustomFilterLogic from 'examples/column-filter/custom-filter-logic';
 
 // work on rows
 import RowStyleTable from 'examples/rows/row-style';
@@ -290,7 +291,8 @@ storiesOf('Column Filter', module)
   .add('Advance Custom Filter', () => <AdvanceCustomFilter />)
   .add('Preserved Option Order on Select Filter', () => <SelectFilterWithPreservedOptionsOrder />)
   .add('Clear All Filters', () => <ClearAllFilters />)
-  .add('Filter Hooks', () => <FilterHooks />);
+  .add('Filter Hooks', () => <FilterHooks />)
+  .add('Implement custom filter logic', () => <CustomFilterLogic />);
 
 storiesOf('Work on Rows', module)
   .addDecorator(bootstrapStyle())