Skip to content

Commit 80b1ac3

Browse files
AllenFangAllenFang
authored
fix #147
Implement TextFilter
2 parents 1879d77 + 64b3710 commit 80b1ac3

File tree

37 files changed

+1284
-52
lines changed

37 files changed

+1284
-52
lines changed

‎docs/README.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
* [rowEvents](#rowEvents)
2323
* [defaultSorted](#defaultSorted)
2424
* [pagination](#pagination)
25+
* [filter](#filter)
2526
* [onTableChange](#onTableChange)
2627

2728
### <a name='keyField'>keyField(**required**) - [String]</a>
@@ -198,6 +199,33 @@ paginator({
198199
})
199200
```
200201

202+
### <a name='filter'>filter - [Object]</a>
203+
`filter` allow user to filter data by column. However, filter funcitonality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-filter` firstly.
204+
205+
```sh
206+
$ npm install react-bootstrap-table2-filter --save
207+
```
208+
209+
After installation of `react-bootstrap-table2-filter`, you can configure filter on `react-bootstrap-table2` easily:
210+
211+
```js
212+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
213+
214+
// omit...
215+
const columns = [ {
216+
dataField: 'id',
217+
text: 'Production ID'
218+
}, {
219+
dataField: 'name',
220+
text: 'Production Name',
221+
filter: textFilter() // apply text filter
222+
}, {
223+
dataField: 'price',
224+
text: 'Production Price'
225+
} ];
226+
<BootstrapTable data={ data } columns={ columns } filter={ filterFactory() } />
227+
```
228+
201229
### <a name='onTableChange'>onTableChange - [Function]</a>
202230
This callback function will be called when [`remote`](#remote) enabled only.
203231

‎docs/columns.md‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,20 +31,22 @@ Available properties in a column object:
3131
* [validator](#validator)
3232
* [editCellStyle](#editCellStyle)
3333
* [editCellClasses](#editCellClasses)
34+
* [filter](#filter)
35+
* [filterValue](#filterValue)
3436

3537
Following is a most simplest and basic usage:
3638

3739
```js
3840
const rows = [ { id: 1, name: '...', price: '102' } ];
3941
const columns = [ {
40-
dataField: id,
41-
text: Production ID
42+
dataField: 'id',
43+
text: 'Production ID'
4244
}, {
43-
dataField: name,
44-
text: Production Name
45+
dataField: 'name',
46+
text: 'Production Name'
4547
}, {
46-
dataField: price,
47-
text: Production Price
48+
dataField: 'price',
49+
text: 'Production Price'
4850
}
4951
];
5052
```
@@ -525,4 +527,24 @@ Or take a callback function
525527
// it is suppose to return a string
526528
}
527529
}
528-
```
530+
```
531+
532+
## <a name='filter'>column.filter - [Object]</a>
533+
Configure `column.filter` will able to setup a column level filter on the header column. Currently, `react-bootstrap-table2` support following filters:
534+
535+
* Text(`textFilter`)
536+
537+
We have a quick example to show you how to use `column.filter`:
538+
539+
```
540+
import { textFilter } from 'react-bootstrap-table2-filter';
541+
542+
// omit...
543+
{
544+
dataField: 'price',
545+
text: 'Product Price',
546+
filter: textFilter()
547+
}
548+
```
549+
550+
For some reason of simple customization, `react-bootstrap-table2` allow you to pass some props to filter factory function. Please check [here](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/master/packages/react-bootstrap-table2-filter/README.md) for more detail tutorial.

‎packages/react-bootstrap-table2-example/.storybook/webpack.config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const path = require('path');
33
const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/src');
44
const paginationSourcePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/src');
55
const overlaySourcePath = path.join(__dirname, '../../react-bootstrap-table2-overlay/src');
6+
const filterSourcePath = path.join(__dirname, '../../react-bootstrap-table2-filter/src');
67
const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style');
78
const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
89
const storyPath = path.join(__dirname, '../stories');
@@ -26,7 +27,7 @@ const loaders = [{
2627
test: /\.js?$/,
2728
use: ['babel-loader'],
2829
exclude: /node_modules/,
29-
include: [sourcePath, paginationSourcePath, overlaySourcePath, storyPath],
30+
include: [sourcePath, paginationSourcePath, overlaySourcePath, filterSourcePath, storyPath],
3031
}, {
3132
test: /\.css$/,
3233
use: ['style-loader', 'css-loader'],

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

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/* eslint no-unused-vars: 0 */
2+
import React from 'react';
3+
import BootstrapTable from 'react-bootstrap-table2';
4+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
5+
import Code from 'components/common/code-block';
6+
import { jobsGenerator } from 'utils/common';
7+
8+
const jobs = jobsGenerator(5);
9+
10+
const owners = ['Allen', 'Bob', 'Cat'];
11+
const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
12+
13+
const columns = [{
14+
dataField: 'id',
15+
text: 'Job ID'
16+
}, {
17+
dataField: 'name',
18+
text: 'Job Name',
19+
filter: textFilter()
20+
}, {
21+
dataField: 'owner',
22+
text: 'Job Owner',
23+
filter: textFilter(),
24+
formatter: (cell, row) => owners[cell],
25+
filterValue: (cell, row) => owners[cell]
26+
}, {
27+
dataField: 'type',
28+
text: 'Job Type',
29+
filter: textFilter(),
30+
formatter: (cell, row) => types[cell],
31+
filterValue: (cell, row) => types[cell]
32+
}];
33+
34+
const sourceCode = `\
35+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
36+
37+
const owners = ['Allen', 'Bob', 'Cat'];
38+
const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money'];
39+
const columns = [{
40+
dataField: 'id',
41+
text: 'Job ID'
42+
}, {
43+
dataField: 'name',
44+
text: 'Job Name',
45+
filter: textFilter()
46+
}, {
47+
dataField: 'owner',
48+
text: 'Job Owner',
49+
filter: textFilter(),
50+
formatter: (cell, row) => owners[cell],
51+
filterValue: (cell, row) => owners[cell]
52+
}, {
53+
dataField: 'type',
54+
text: 'Job Type',
55+
filter: textFilter(),
56+
filterValue: (cell, row) => types[cell]
57+
}];
58+
59+
// shape of job: { id: 0, name: 'Job name 0', owner: 1, type: 3 }
60+
61+
<BootstrapTable keyField='id' data={ jobs } columns={ columns } filter={ filterFactory() } />
62+
`;
63+
64+
export default () => (
65+
<div>
66+
<BootstrapTable
67+
keyField="id"
68+
data={ jobs }
69+
columns={ columns }
70+
filter={ filterFactory() }
71+
/>
72+
<Code>{ sourceCode }</Code>
73+
</div>
74+
);

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/* eslint no-console: 0 */
2+
import React from 'react';
3+
import BootstrapTable from 'react-bootstrap-table2';
4+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
5+
import Code from 'components/common/code-block';
6+
import { productsGenerator } from 'utils/common';
7+
8+
const products = productsGenerator(8);
9+
10+
const columns = [{
11+
dataField: 'id',
12+
text: 'Product ID'
13+
}, {
14+
dataField: 'name',
15+
text: 'Product Name',
16+
filter: textFilter()
17+
}, {
18+
dataField: 'price',
19+
text: 'Product Price',
20+
filter: textFilter({
21+
delay: 1000, // default is 500ms
22+
style: {
23+
backgroundColor: 'yellow'
24+
},
25+
className: 'test-classname',
26+
placeholder: 'Custom PlaceHolder',
27+
onClick: e => console.log(e)
28+
})
29+
}];
30+
31+
const sourceCode = `\
32+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
33+
34+
const columns = [{
35+
dataField: 'id',
36+
text: 'Product ID'
37+
}, {
38+
dataField: 'name',
39+
text: 'Product Name',
40+
filter: textFilter()
41+
}, {
42+
dataField: 'price',
43+
text: 'Product Price',
44+
filter: textFilter({
45+
delay: 1000, // default is 500ms
46+
style: {
47+
backgroundColor: 'yellow'
48+
},
49+
className: 'test-classname',
50+
placeholder: 'Custom PlaceHolder',
51+
onClick: e => console.log(e)
52+
})
53+
}];
54+
55+
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
56+
`;
57+
58+
export default () => (
59+
<div>
60+
<BootstrapTable
61+
keyField="id"
62+
data={ products }
63+
columns={ columns }
64+
filter={ filterFactory() }
65+
/>
66+
<Code>{ sourceCode }</Code>
67+
</div>
68+
);

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import BootstrapTable from 'react-bootstrap-table2';
3+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
4+
import Code from 'components/common/code-block';
5+
import { productsGenerator } from 'utils/common';
6+
7+
const products = productsGenerator(8);
8+
9+
const columns = [{
10+
dataField: 'id',
11+
text: 'Product ID'
12+
}, {
13+
dataField: 'name',
14+
text: 'Product Name',
15+
filter: textFilter()
16+
}, {
17+
dataField: 'price',
18+
text: 'Product Price',
19+
filter: textFilter({
20+
defaultValue: '2103'
21+
})
22+
}];
23+
24+
const sourceCode = `\
25+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
26+
27+
const columns = [{
28+
dataField: 'id',
29+
text: 'Product ID',
30+
}, {
31+
dataField: 'name',
32+
text: 'Product Name',
33+
filter: textFilter()
34+
}, {
35+
dataField: 'price',
36+
text: 'Product Price',
37+
filter: textFilter({
38+
defaultValue: '2103'
39+
})
40+
}];
41+
42+
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
43+
`;
44+
45+
export default () => (
46+
<div>
47+
<BootstrapTable
48+
keyField="id"
49+
data={ products }
50+
columns={ columns }
51+
filter={ filterFactory() }
52+
/>
53+
<Code>{ sourceCode }</Code>
54+
</div>
55+
);

‎packages/react-bootstrap-table2-example/examples/column-filter/text-filter-eq-comparator.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from 'react';
2+
import BootstrapTable from 'react-bootstrap-table2';
3+
import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
4+
import Code from 'components/common/code-block';
5+
import { productsGenerator } from 'utils/common';
6+
7+
const products = productsGenerator(8);
8+
9+
const columns = [{
10+
dataField: 'id',
11+
text: 'Product ID'
12+
}, {
13+
dataField: 'name',
14+
text: 'Product Name',
15+
filter: textFilter({
16+
comparator: Comparator.EQ // default is Comparator.LIKE
17+
})
18+
}, {
19+
dataField: 'price',
20+
text: 'Product Price',
21+
filter: textFilter()
22+
}];
23+
24+
const sourceCode = `\
25+
import filterFactory, { textFilter, Comparator } from 'react-bootstrap-table2-filter';
26+
27+
const columns = [{
28+
dataField: 'id',
29+
text: 'Product ID'
30+
}, {
31+
dataField: 'name',
32+
text: 'Product Name',
33+
filter: textFilter({
34+
comparator: Comparator.EQ
35+
})
36+
}, {
37+
dataField: 'price',
38+
text: 'Product Price',
39+
filter: textFilter()
40+
}];
41+
42+
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
43+
`;
44+
45+
export default () => (
46+
<div>
47+
<h3>Product Name filter apply Equal Comparator</h3>
48+
<BootstrapTable
49+
keyField="id"
50+
data={ products }
51+
columns={ columns }
52+
filter={ filterFactory() }
53+
/>
54+
<Code>{ sourceCode }</Code>
55+
</div>
56+
);

0 commit comments

Comments
 (0)