Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0903234

Browse files
[example] example for programmatically filter by text, number and select
1 parent 4dd39ae commit 0903234

File tree

4 files changed

+268
-1
lines changed

4 files changed

+268
-1
lines changed
Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React from 'react';
2+
import BootstrapTable from 'react-bootstrap-table-next';
3+
import filterFactory, { numberFilter, 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+
let filterBy;
10+
11+
const columns = [{
12+
dataField: 'id',
13+
text: 'Product ID'
14+
}, {
15+
dataField: 'name',
16+
text: 'Product Name'
17+
}, {
18+
dataField: 'price',
19+
text: 'Product Price',
20+
filter: numberFilter({
21+
getFilterBy: (filterByFunc) => {
22+
filterBy = filterByFunc;
23+
}
24+
})
25+
}];
26+
27+
const handleClick = () => {
28+
filterBy({
29+
number: 2103,
30+
comparator: Comparator.GT
31+
});
32+
};
33+
34+
const sourceCode = `\
35+
import BootstrapTable from 'react-bootstrap-table-next';
36+
import filterFactory, { numberFilter } from 'react-bootstrap-table2-filter';
37+
38+
let filterBy;
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: numberFilter({
50+
getFilterBy: (filterByFunc) => {
51+
filterBy = filterByFunc;
52+
}
53+
})
54+
}];
55+
56+
const handleClick = () => {
57+
filterBy({
58+
number: 2103,
59+
comparator: Comparator.GT
60+
});
61+
};
62+
63+
<button className="btn btn-lg btn-primary" onClick={ handleClick }> filter all columns which is greater than 2103 </button>
64+
65+
export default () => (
66+
<div>
67+
<button className="btn btn-lg btn-primary" onClick={ handleClick }> filter all columns which is greater than 2103 </button>
68+
69+
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
70+
</div>
71+
);
72+
`;
73+
74+
export default () => (
75+
<div>
76+
<button className="btn btn-lg btn-primary" onClick={ handleClick }> filter all columns which is greater than 2103 </button>
77+
<BootstrapTable
78+
keyField="id"
79+
data={ products }
80+
columns={ columns }
81+
filter={ filterFactory() }
82+
/>
83+
<Code>{ sourceCode }</Code>
84+
</div>
85+
);
Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
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+
let filterBy;
10+
11+
const selectOptions = {
12+
0: 'good',
13+
1: 'Bad',
14+
2: 'unknown'
15+
};
16+
17+
const columns = [{
18+
dataField: 'id',
19+
text: 'Product ID'
20+
}, {
21+
dataField: 'name',
22+
text: 'Product Name'
23+
}, {
24+
dataField: 'quality',
25+
text: 'Product Quailty',
26+
formatter: cell => selectOptions[cell],
27+
filter: selectFilter({
28+
options: selectOptions,
29+
getFilterBy: (filterByFunc) => {
30+
// filterBy was assigned to onFilter once the component has mount
31+
filterBy = filterByFunc;
32+
}
33+
})
34+
}];
35+
36+
const handleClick = () => {
37+
filterBy('0');
38+
};
39+
40+
const sourceCode = `\
41+
import BootstrapTable from 'react-bootstrap-table-next';
42+
import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
43+
44+
let filterBy;
45+
46+
const selectOptions = {
47+
0: 'good',
48+
1: 'Bad',
49+
2: 'unknown'
50+
};
51+
52+
const columns = [{
53+
dataField: 'id',
54+
text: 'Product ID'
55+
}, {
56+
dataField: 'name',
57+
text: 'Product Name'
58+
}, {
59+
dataField: 'quality',
60+
text: 'Product Quailty',
61+
formatter: cell => selectOptions[cell],
62+
filter: selectFilter({
63+
options: selectOptions,
64+
getFilterBy: (filterByFunc) => {
65+
// filterBy was assigned to onFilter once the component has mount
66+
filterBy = filterByFunc;
67+
}
68+
})
69+
}];
70+
71+
const handleClick = () => {
72+
filterBy('0');
73+
};
74+
75+
export default () => (
76+
<div>
77+
<button className="btn btn-lg btn-primary" onClick={ handleClick }>{' filter columns by option "good" '}</button>
78+
79+
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
80+
</div>
81+
);
82+
`;
83+
84+
export default () => (
85+
<div>
86+
<button className="btn btn-lg btn-primary" onClick={ handleClick }>{' filter columns by option "good" '}</button>
87+
88+
<BootstrapTable
89+
keyField="id"
90+
data={ products }
91+
columns={ columns }
92+
filter={ filterFactory() }
93+
/>
94+
<Code>{ sourceCode }</Code>
95+
</div>
96+
);
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, { 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+
let filterBy;
10+
11+
const columns = [{
12+
dataField: 'id',
13+
text: 'Product ID'
14+
}, {
15+
dataField: 'name',
16+
text: 'Product Name',
17+
filter: textFilter({
18+
getFilterBy: (filterByFunc) => {
19+
filterBy = filterByFunc;
20+
}
21+
})
22+
}, {
23+
dataField: 'price',
24+
text: 'Product Price',
25+
filter: textFilter()
26+
}];
27+
28+
const handleClick = () => {
29+
filterBy('0');
30+
};
31+
32+
const sourceCode = `\
33+
import BootstrapTable from 'react-bootstrap-table-next';
34+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
35+
36+
let filterBy;
37+
38+
const columns = [{
39+
dataField: 'id',
40+
text: 'Product ID'
41+
}, {
42+
dataField: 'name',
43+
text: 'Product Name',
44+
filter: textFilter({
45+
getFilterBy: (filterByFunc) => {
46+
// filterBy was assigned to onFilter once the component has mount
47+
filterBy = filterByFunc;
48+
}
49+
})
50+
}, {
51+
dataField: 'price',
52+
text: 'Product Price',
53+
filter: textFilter()
54+
}];
55+
56+
const handleClick = () => {
57+
filterBy('0');
58+
};
59+
60+
export default () => (
61+
<div>
62+
<button className="btn btn-lg btn-primary" onClick={ handleClick }> filter columns by 0 </button>
63+
64+
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
65+
</div>
66+
);
67+
`;
68+
69+
export default () => (
70+
<div>
71+
<button className="btn btn-lg btn-primary" onClick={ handleClick }> filter columns by 0 </button>
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/stories/index.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ import CustomSelectFilter from 'examples/column-filter/custom-select-filter';
4848
import NumberFilter from 'examples/column-filter/number-filter';
4949
import NumberFilterWithDefaultValue from 'examples/column-filter/number-filter-default-value';
5050
import CustomNumberFilter from 'examples/column-filter/custom-number-filter';
51+
import ProgrammaticallyTextFilter from 'examples/column-filter/programmatically-text-filter';
52+
import ProgrammaticallySelectFilter from 'examples/column-filter/programmatically-select-filter';
53+
import ProgrammaticallyNumberFilter from 'examples/column-filter/programmatically-number-filter';
5154

5255
// work on rows
5356
import RowStyleTable from 'examples/rows/row-style';
@@ -166,7 +169,10 @@ storiesOf('Column Filter', module)
166169
.add('Custom Text Filter', () => <CustomTextFilter />)
167170
.add('Custom Select Filter', () => <CustomSelectFilter />)
168171
.add('Custom Number Filter', () => <CustomNumberFilter />)
169-
.add('Custom Filter Value', () => <CustomFilterValue />);
172+
.add('Custom Filter Value', () => <CustomFilterValue />)
173+
.add('Programmatically Text Filter ', () => <ProgrammaticallyTextFilter />)
174+
.add('Programmatically Select Filter ', () => <ProgrammaticallySelectFilter />)
175+
.add('Programmatically Number Filter ', () => <ProgrammaticallyNumberFilter />);
170176

171177
storiesOf('Work on Rows', module)
172178
.add('Customize Row Style', () => <RowStyleTable />)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /