add story for column.filterValue

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

@@ -0,0 +1,72 @@
+/* eslint no-unused-vars: 0 */
+import React from 'react';
+import BootstrapTable from 'react-bootstrap-table2';
+import fitlerFactory, { textFilter } from 'react-bootstrap-table2-filter';
+import Code from 'components/common/code-block';
+import { jobsGenerator } from 'utils/common';
+
+const jobs = jobsGenerator(5);
+
+const owners = ['Allen', 'Bob', 'Cat'];
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name',
+  filter: textFilter()
+}, {
+  dataField: 'owner',
+  text: 'Job Owner',
+  filter: textFilter(),
+  formatter: (cell, row) => owners[cell],
+  filterValue: (cell, row) => owners[cell]
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  filter: textFilter(),
+  formatter: (cell, row) => types[cell],
+  filterValue: (cell, row) => types[cell]
+}];
+
+const sourceCode = `\
+const owners = ['Allen', 'Bob', 'Cat'];
+const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
+const columns = [{
+  dataField: 'id',
+  text: 'Job ID'
+}, {
+  dataField: 'name',
+  text: 'Job Name',
+  filter: textFilter()
+}, {
+  dataField: 'owner',
+  text: 'Job Owner',
+  filter: textFilter(),
+  formatter: (cell, row) => owners[cell],
+  filterValue: (cell, row) => owners[cell]
+}, {
+  dataField: 'type',
+  text: 'Job Type',
+  filter: textFilter(),
+  filterValue: (cell, row) => types[cell]
+}];
+
+// shape of job: { id: 0, name: 'Job name 0', owner: 1, type: 3 }
+
+<BootstrapTable keyField='id' data={ jobs } columns={ columns } filter={ fitlerFactory() } />
+`;
+
+export default () => (
+  <div>
+    <BootstrapTable
+      keyField="id"
+      data={ jobs }
+      columns={ columns }
+      filter={ fitlerFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);

packages/react-bootstrap-table2-example/src/utils/common.js

@@ -20,4 +20,12 @@ export const productsGenerator = (quantity = 5, callback) => {
   );
 };
 
+export const jobsGenerator = (quantity = 5) =>
+  Array.from({ length: quantity }, (value, index) => ({
+    id: index,
+    name: `Job name ${index}`,
+    owner: Math.floor(Math.random() * 3),
+    type: Math.floor(Math.random() * 5)
+  }));
+
 export const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

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

@@ -34,6 +34,7 @@ import HeaderColumnAttrsTable from 'examples/header-columns/column-attrs-table';
 
 // column filter
 import TextFilter from 'examples/column-filter/text-filter';
+import CustomFilterValue from 'examples/column-filter/custom-filter-value';
 
 // work on rows
 import RowStyleTable from 'examples/rows/row-style';
@@ -125,7 +126,9 @@ storiesOf('Work on Header Columns', module)
   .add('Customize Column HTML attribute', () => <HeaderColumnAttrsTable />);
 
 storiesOf('Column Filter', module)
-  .add('Text Filter', () => <TextFilter />);
+  .add('Text Filter', () => <TextFilter />)
+  // add another filter type example right here.
+  .add('Custom Filter Value', () => <CustomFilterValue />);
 
 storiesOf('Work on Rows', module)
   .add('Customize Row Style', () => <RowStyleTable />)