diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js b/packages/react-bootstrap-table2-example/examples/column-filter/custom-filter-logic.js new file mode 100644 index 0000000..906d9d0 --- /dev/null +++ b/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 ( +
+ +
+ ); + } +} +`; + +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 ( +
+

Implement a eq filter on product price column

+ + { sourceCode } +
+ ); + } +} diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 9f8fd5d..5061f63 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/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', () => ) .add('Preserved Option Order on Select Filter', () => ) .add('Clear All Filters', () => ) - .add('Filter Hooks', () => ); + .add('Filter Hooks', () => ) + .add('Implement custom filter logic', () => ); storiesOf('Work on Rows', module) .addDecorator(bootstrapStyle())