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 80b1ac3

Browse files
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'],
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+
);
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+
);
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+
);
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)

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