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 22b2632

Browse files
add clear all filter story
1 parent f2b6dd5 commit 22b2632

File tree

2 files changed

+89
-1
lines changed

2 files changed

+89
-1
lines changed
Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
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 nameFilter;
10+
let priceFilter;
11+
12+
const columns = [{
13+
dataField: 'id',
14+
text: 'Product ID'
15+
}, {
16+
dataField: 'name',
17+
text: 'Product Name',
18+
filter: textFilter({
19+
getFilter: (filter) => {
20+
nameFilter = filter;
21+
}
22+
})
23+
}, {
24+
dataField: 'price',
25+
text: 'Product Price',
26+
filter: textFilter({
27+
getFilter: (filter) => {
28+
priceFilter = filter;
29+
}
30+
})
31+
}];
32+
33+
const handleClick = () => {
34+
nameFilter('');
35+
priceFilter('');
36+
};
37+
38+
const sourceCode = `\
39+
import BootstrapTable from 'react-bootstrap-table-next';
40+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
41+
42+
let nameFilter;
43+
44+
const columns = [{
45+
dataField: 'id',
46+
text: 'Product ID'
47+
}, {
48+
dataField: 'name',
49+
text: 'Product Name',
50+
filter: textFilter({
51+
getFilter: (filter) => {
52+
// nameFilter was assigned once the component has been mounted.
53+
nameFilter = filter;
54+
}
55+
})
56+
}, {
57+
dataField: 'price',
58+
text: 'Product Price',
59+
filter: textFilter()
60+
}];
61+
62+
const handleClick = () => {
63+
nameFilter(0);
64+
};
65+
66+
export default () => (
67+
<div>
68+
<button className="btn btn-lg btn-primary" onClick={ handleClick }> filter columns by 0 </button>
69+
70+
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
71+
</div>
72+
);
73+
`;
74+
75+
export default () => (
76+
<div>
77+
<button className="btn btn-lg btn-primary" onClick={ handleClick }> Clear all filters </button>
78+
<BootstrapTable
79+
keyField="id"
80+
data={ products }
81+
columns={ columns }
82+
filter={ filterFactory() }
83+
/>
84+
<Code>{ sourceCode }</Code>
85+
</div>
86+
);

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ import CustomNumberFilter from 'examples/column-filter/custom-number-filter';
5151
import ProgrammaticallyTextFilter from 'examples/column-filter/programmatically-text-filter';
5252
import ProgrammaticallySelectFilter from 'examples/column-filter/programmatically-select-filter';
5353
import ProgrammaticallyNumberFilter from 'examples/column-filter/programmatically-number-filter';
54+
import ClearAllFilters from 'examples/column-filter/clear-all-filters';
5455

5556
// work on rows
5657
import RowStyleTable from 'examples/rows/row-style';
@@ -177,7 +178,8 @@ storiesOf('Column Filter', module)
177178
.add('Custom Filter Value', () => <CustomFilterValue />)
178179
.add('Programmatically Text Filter ', () => <ProgrammaticallyTextFilter />)
179180
.add('Programmatically Select Filter ', () => <ProgrammaticallySelectFilter />)
180-
.add('Programmatically Number Filter ', () => <ProgrammaticallyNumberFilter />);
181+
.add('Programmatically Number Filter ', () => <ProgrammaticallyNumberFilter />)
182+
.add('Clear All Filters', () => <ClearAllFilters />);
181183

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

0 commit comments

Comments
(0)

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