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 64b3710

Browse files
docs for column filter
1 parent 867465c commit 64b3710

File tree

3 files changed

+97
-7
lines changed

3 files changed

+97
-7
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>
@@ -193,6 +194,33 @@ paginator({
193194
})
194195
```
195196

197+
### <a name='filter'>filter - [Object]</a>
198+
`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.
199+
200+
```sh
201+
$ npm install react-bootstrap-table2-filter --save
202+
```
203+
204+
After installation of `react-bootstrap-table2-filter`, you can configure filter on `react-bootstrap-table2` easily:
205+
206+
```js
207+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
208+
209+
// omit...
210+
const columns = [ {
211+
dataField: 'id',
212+
text: 'Production ID'
213+
}, {
214+
dataField: 'name',
215+
text: 'Production Name',
216+
filter: textFilter() // apply text filter
217+
}, {
218+
dataField: 'price',
219+
text: 'Production Price'
220+
} ];
221+
<BootstrapTable data={ data } columns={ columns } filter={ filterFactory() } />
222+
```
223+
196224
### <a name='onTableChange'>onTableChange - [Function]</a>
197225
This callback function will be called when [`remote`](#remote) enabled only.
198226

‎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.
Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# react-bootstrap-table2-filter
2+
3+
## Filters
4+
5+
* Text (`textFilter`)
6+
7+
You can get all of above filters via import and these filters are a factory function to create a individual filter instance.
8+
In addition, for some simple customization reasons, these factory function allow to pass some props.
9+
10+
### Text Filter
11+
12+
```js
13+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
14+
15+
// omit...
16+
const columns = [
17+
..., {
18+
dataField: 'price',
19+
text: 'Product Price',
20+
filter: textFilter()
21+
}];
22+
23+
<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
24+
```
25+
26+
Following we list all the availabe props for `textFilter` function:
27+
28+
```js
29+
import { Comparator } from 'react-bootstrap-table2-filter';
30+
// omit...
31+
32+
const customTextFilter = textFilter({
33+
placeholder: 'My Custom PlaceHolder', // custom the input placeholder
34+
style: { ... }, // your custom styles on input
35+
className: 'my-custom-text-filter', // custom classname on input
36+
defaultValue: 'test', // default filtering value
37+
delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
38+
comparator: Comparator.EQ // default is Comparator.LIKE
39+
});
40+
```

0 commit comments

Comments
(0)

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