Skip to content

Commit ee4eb8f

Browse files
AllenFangAllenFang
authored
Merge pull request #183 from react-bootstrap-table/feat/select-filter
Select filter
2 parents 280c423 + 8fa6389 commit ee4eb8f

File tree

18 files changed

+811
-7
lines changed

18 files changed

+811
-7
lines changed

‎docs/columns.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,7 @@ Or take a callback function
542542
Configure `column.filter` will able to setup a column level filter on the header column. Currently, `react-bootstrap-table2` support following filters:
543543

544544
* Text(`textFilter`)
545+
* Select(`selectFilter`)
545546

546547
We have a quick example to show you how to use `column.filter`:
547548

‎docs/migration.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ Please see [available filter configuration](https://react-bootstrap-table.github
8383
- [x] Remote Filter
8484
- [ ] Custom Filter Component
8585
- [ ] Regex Filter
86-
- [ ] Select Filter
86+
- [x] Select Filter
87+
- [x] Custom Select Filter
8788
- [ ] Number Filter
8889
- [ ] Date Filter
8990
- [ ] Array Filter

‎gulpfile.babel.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ const JS_SKIPS = `+(${TEST}|${LIB}|${DIST}|${NODE_MODULES})`;
2424

2525
const STYLE_PKGS = [
2626
'react-bootstrap-table2',
27+
'react-bootstrap-table2-filter',
2728
'react-bootstrap-table2-paginator'
2829
].reduce((pkg, curr) => `${curr}|${pkg}`, '');
2930

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const filterSourcePath = path.join(__dirname, '../../react-bootstrap-table2-filt
77
const editorSourcePath = path.join(__dirname, '../../react-bootstrap-table2-editor/index.js');
88
const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style');
99
const paginationStylePath = path.join(__dirname, '../../react-bootstrap-table2-paginator/style');
10+
const filterStylePath = path.join(__dirname, '../../react-bootstrap-table2-filter/style');
1011
const storyPath = path.join(__dirname, '../stories');
1112
const examplesPath = path.join(__dirname, '../examples');
1213
const srcPath = path.join(__dirname, '../src');
@@ -40,7 +41,7 @@ const loaders = [{
4041
}, {
4142
test: /\.scss$/,
4243
use: ['style-loader', 'css-loader', 'sass-loader'],
43-
include: [storyPath, sourceStylePath, paginationStylePath],
44+
include: [storyPath, sourceStylePath, paginationStylePath, filterStylePath],
4445
}, {
4546
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
4647
loader: 'url-loader?limit=100000',

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from 'react';
2+
import BootstrapTable from 'react-bootstrap-table-next';
3+
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
4+
import Code from 'components/common/code-block';
5+
import { productsQualityGenerator } from 'utils/common';
6+
7+
const products = productsQualityGenerator(6);
8+
9+
const selectOptions = {
10+
0: 'good',
11+
1: 'Bad',
12+
2: 'unknown'
13+
};
14+
15+
const columns = [{
16+
dataField: 'id',
17+
text: 'Product ID'
18+
}, {
19+
dataField: 'name',
20+
text: 'Product Name'
21+
}, {
22+
dataField: 'quality',
23+
text: 'Product Quailty',
24+
formatter: cell => selectOptions[cell],
25+
filter: selectFilter({
26+
options: selectOptions,
27+
withoutEmptyOption: true,
28+
style: {
29+
backgroundColor: 'pink'
30+
},
31+
className: 'test-classname',
32+
datamycustomattr: 'datamycustomattr'
33+
})
34+
}];
35+
36+
const sourceCode = `\
37+
import BootstrapTable from 'react-bootstrap-table-next';
38+
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
39+
40+
const selectOptions = {
41+
0: 'good',
42+
1: 'Bad',
43+
2: 'unknown'
44+
};
45+
46+
const columns = [{
47+
dataField: 'id',
48+
text: 'Product ID'
49+
}, {
50+
dataField: 'name',
51+
text: 'Product Name'
52+
}, {
53+
dataField: 'quality',
54+
text: 'Product Quailty',
55+
formatter: cell => selectOptions[cell],
56+
filter: selectFilter({
57+
options: selectOptions,
58+
withoutEmptyOption: true,
59+
style: {
60+
backgroundColor: 'pink'
61+
},
62+
className: 'test-classname',
63+
datamycustomattr: 'datamycustomattr'
64+
})
65+
}];
66+
67+
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
68+
`;
69+
70+
export default () => (
71+
<div>
72+
<BootstrapTable
73+
keyField="id"
74+
data={ products }
75+
columns={ columns }
76+
filter={ filterFactory() }
77+
/>
78+
<Code>{ sourceCode }</Code>
79+
</div>
80+
);

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

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from 'react';
2+
import BootstrapTable from 'react-bootstrap-table-next';
3+
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
4+
import Code from 'components/common/code-block';
5+
import { productsQualityGenerator } from 'utils/common';
6+
7+
const products = productsQualityGenerator(6);
8+
9+
const selectOptions = {
10+
0: 'good',
11+
1: 'Bad',
12+
2: 'unknown'
13+
};
14+
15+
const columns = [{
16+
dataField: 'id',
17+
text: 'Product ID'
18+
}, {
19+
dataField: 'name',
20+
text: 'Product Name'
21+
}, {
22+
dataField: 'quality',
23+
text: 'Product Quailty',
24+
formatter: cell => selectOptions[cell],
25+
filter: selectFilter({
26+
options: selectOptions,
27+
defaultValue: 2
28+
})
29+
}];
30+
31+
const sourceCode = `\
32+
import BootstrapTable from 'react-bootstrap-table-next';
33+
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
34+
35+
const selectOptions = {
36+
0: 'good',
37+
1: 'Bad',
38+
2: 'unknown'
39+
};
40+
41+
const columns = [{
42+
dataField: 'id',
43+
text: 'Product ID'
44+
}, {
45+
dataField: 'name',
46+
text: 'Product Name'
47+
}, {
48+
dataField: 'quality',
49+
text: 'Product Quailty',
50+
formatter: cell => selectOptions[cell],
51+
filter: selectFilter({
52+
options: selectOptions,
53+
defaultValue: 2
54+
})
55+
}];
56+
57+
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
58+
`;
59+
60+
export default () => (
61+
<div>
62+
<BootstrapTable
63+
keyField="id"
64+
data={ products }
65+
columns={ columns }
66+
filter={ filterFactory() }
67+
/>
68+
<Code>{ sourceCode }</Code>
69+
</div>
70+
);

‎packages/react-bootstrap-table2-example/examples/column-filter/select-filter-like-comparator.js‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react';
2+
import BootstrapTable from 'react-bootstrap-table-next';
3+
import filterFactory, { selectFilter, 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(6);
8+
9+
const selectOptions = {
10+
'03': '03',
11+
'04': '04',
12+
'01': '01'
13+
};
14+
15+
const columns = [{
16+
dataField: 'id',
17+
text: 'Product ID'
18+
}, {
19+
dataField: 'name',
20+
text: 'Product Name'
21+
}, {
22+
dataField: 'price',
23+
text: 'Product Price',
24+
filter: selectFilter({
25+
options: selectOptions,
26+
comparator: Comparator.LIKE // default is Comparator.EQ
27+
})
28+
}];
29+
30+
const sourceCode = `\
31+
import BootstrapTable from 'react-bootstrap-table-next';
32+
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
33+
34+
const selectOptions = {
35+
'03': '03',
36+
'04': '04',
37+
'01': '01'
38+
};
39+
40+
const columns = [{
41+
dataField: 'id',
42+
text: 'Product ID'
43+
}, {
44+
dataField: 'name',
45+
text: 'Product Name'
46+
}, {
47+
dataField: 'price',
48+
text: 'Product Price',
49+
filter: selectFilter({
50+
options: selectOptions,
51+
comparator: Comparator.LIKE // default is Comparator.EQ
52+
})
53+
}];
54+
55+
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
56+
`;
57+
58+
export default () => (
59+
<div>
60+
<h3>Select Filter with LIKE Comparator</h3>
61+
<BootstrapTable
62+
keyField="id"
63+
data={ products }
64+
columns={ columns }
65+
filter={ filterFactory() }
66+
/>
67+
<Code>{ sourceCode }</Code>
68+
</div>
69+
);

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import React from 'react';
2+
import BootstrapTable from 'react-bootstrap-table-next';
3+
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
4+
import Code from 'components/common/code-block';
5+
import { productsQualityGenerator } from 'utils/common';
6+
7+
const products = productsQualityGenerator(6);
8+
9+
const selectOptions = {
10+
0: 'good',
11+
1: 'Bad',
12+
2: 'unknown'
13+
};
14+
15+
const columns = [{
16+
dataField: 'id',
17+
text: 'Product ID'
18+
}, {
19+
dataField: 'name',
20+
text: 'Product Name'
21+
}, {
22+
dataField: 'quality',
23+
text: 'Product Quailty',
24+
formatter: cell => selectOptions[cell],
25+
filter: selectFilter({
26+
options: selectOptions
27+
})
28+
}];
29+
30+
const sourceCode = `\
31+
import BootstrapTable from 'react-bootstrap-table-next';
32+
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
33+
34+
const selectOptions = {
35+
0: 'good',
36+
1: 'Bad',
37+
2: 'unknown'
38+
};
39+
40+
const columns = [{
41+
dataField: 'id',
42+
text: 'Product ID'
43+
}, {
44+
dataField: 'name',
45+
text: 'Product Name'
46+
}, {
47+
dataField: 'quality',
48+
text: 'Product Quailty',
49+
formatter: cell => selectOptions[cell],
50+
filter: selectFilter({
51+
options: selectOptions
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/src/utils/common.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,13 @@ export const productsGenerator = (quantity = 5, callback) => {
2020
);
2121
};
2222

23+
export const productsQualityGenerator = (quantity = 5) =>
24+
Array.from({ length: quantity }, (value, index) => ({
25+
id: index,
26+
name: `Item name ${index}`,
27+
quality: index % 3
28+
}));
29+
2330
export const jobsGenerator = (quantity = 5) =>
2431
Array.from({ length: quantity }, (value, index) => ({
2532
id: index,

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,10 @@ import TextFilterWithDefaultValue from 'examples/column-filter/text-filter-defau
3939
import TextFilterComparator from 'examples/column-filter/text-filter-eq-comparator';
4040
import CustomTextFilter from 'examples/column-filter/custom-text-filter';
4141
import CustomFilterValue from 'examples/column-filter/custom-filter-value';
42+
import SelectFilter from 'examples/column-filter/select-filter';
43+
import SelectFilterWithDefaultValue from 'examples/column-filter/select-filter-default-value';
44+
import SelectFilterComparator from 'examples/column-filter/select-filter-like-comparator';
45+
import CustomSelectFilter from 'examples/column-filter/custom-select-filter';
4246

4347
// work on rows
4448
import RowStyleTable from 'examples/rows/row-style';
@@ -98,6 +102,7 @@ import 'stories/stylesheet/tomorrow.min.css';
98102
import 'stories/stylesheet/storybook.scss';
99103
import '../../react-bootstrap-table2/style/react-bootstrap-table2.scss';
100104
import '../../react-bootstrap-table2-paginator/style/react-bootstrap-table2-paginator.scss';
105+
import '../../react-bootstrap-table2-filter/style/react-bootstrap-table2-filter.scss';
101106

102107
// import { action } from '@storybook/addon-actions';
103108

@@ -140,6 +145,10 @@ storiesOf('Column Filter', module)
140145
.add('Text Filter with Comparator', () => <TextFilterComparator />)
141146
.add('Custom Text Filter', () => <CustomTextFilter />)
142147
// add another filter type example right here.
148+
.add('Select Filter', () => <SelectFilter />)
149+
.add('Select Filter with Default Value', () => <SelectFilterWithDefaultValue />)
150+
.add('Select Filter with Comparator', () => <SelectFilterComparator />)
151+
.add('Custom Select Filter', () => <CustomSelectFilter />)
143152
.add('Custom Filter Value', () => <CustomFilterValue />);
144153

145154
storiesOf('Work on Rows', module)

0 commit comments

Comments
 (0)