Skip to content

Commit 68416ef

Browse files
AllenFangAllenFang
committed
Merge branch 'filter' of https://github.com/dana2208/react-bootstrap-table into dana2208-filter
2 parents 79dd442 + 3d9ecd1 commit 68416ef

30 files changed

+1264
-23
lines changed

‎css/react-bootstrap-table-all.css

+37-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
}
88

99
.react-bs-container .table-header{
10-
height: 42px;
1110
border: hidden;
1211
overflow: hidden;
1312
}
@@ -18,12 +17,17 @@
1817
border-right-style: hidden;
1918
border-left-style: hidden;
2019
width: 100%;
20+
margin-bottom: 0;
2121
}
2222

2323
.react-bs-container .table-header > table > thead > tr{
2424
border-bottom-style: hidden;
2525
}
2626

27+
.react-bs-container .table-header > table > thead > tr > th {
28+
vertical-align: inherit;
29+
}
30+
2731
.react-bs-container .table-container > table > tbody > tr > td,
2832
.react-bs-container .table-container > table > thead > tr > th,
2933
.react-bs-container .table-header > table > thead > tr > th .table-header-column{
@@ -34,6 +38,38 @@
3438
white-space: nowrap;
3539
}
3640

41+
.react-bs-container .table-header > table > thead > tr > th .filter{
42+
font-weight: normal;
43+
}
44+
45+
.react-bs-container .table-header > table > thead > tr > th .select-filter option[value=''],
46+
.react-bs-container .table-header > table > thead > tr > th .select-filter.placeholder-selected,
47+
.react-bs-container .table-header > table > thead > tr > th .filter::-webkit-input-placeholder,
48+
.react-bs-container .table-header > table > thead > tr > th .number-filter-input::-webkit-input-placeholder{
49+
color: lightgrey;
50+
font-style: italic;
51+
}
52+
53+
.react-bs-container .table-header > table > thead > tr > th .select-filter.placeholder-selected option:not([value='']) {
54+
color: initial;
55+
font-style: initial;
56+
}
57+
58+
.react-bs-container .table-header > table > thead > tr > th .number-filter {
59+
display: flex;
60+
}
61+
62+
.react-bs-container .table-header > table > thead > tr > th .number-filter-input {
63+
margin-left: 5px;
64+
float: left;
65+
width: calc(100% - 67px - 5px);
66+
}
67+
68+
.react-bs-container .table-header > table > thead > tr > th .number-filter-comparator {
69+
width: 67px;
70+
float: left;
71+
}
72+
3773
.react-bs-container .table-header > table > thead > tr > .sort-column{
3874
cursor: pointer;
3975
}

‎css/react-bootstrap-table-all.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/react-bootstrap-table.css

+37-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
}
77

88
.react-bs-container .table-header{
9-
height: 42px;
109
border: hidden;
1110
overflow: hidden;
1211
}
@@ -17,12 +16,17 @@
1716
border-right-style: hidden;
1817
border-left-style: hidden;
1918
width: 100%;
19+
margin-bottom: 0;
2020
}
2121

2222
.react-bs-container .table-header > table > thead > tr{
2323
border-bottom-style: hidden;
2424
}
2525

26+
.react-bs-container .table-header > table > thead > tr > th {
27+
vertical-align: inherit;
28+
}
29+
2630
.react-bs-container .table-container > table > tbody > tr > td,
2731
.react-bs-container .table-container > table > thead > tr > th,
2832
.react-bs-container .table-header > table > thead > tr > th .table-header-column{
@@ -33,6 +37,38 @@
3337
white-space: nowrap;
3438
}
3539

40+
.react-bs-container .table-header > table > thead > tr > th .filter{
41+
font-weight: normal;
42+
}
43+
44+
.react-bs-container .table-header > table > thead > tr > th .select-filter option[value=''],
45+
.react-bs-container .table-header > table > thead > tr > th .select-filter.placeholder-selected,
46+
.react-bs-container .table-header > table > thead > tr > th .filter::-webkit-input-placeholder,
47+
.react-bs-container .table-header > table > thead > tr > th .number-filter-input::-webkit-input-placeholder{
48+
color: lightgrey;
49+
font-style: italic;
50+
}
51+
52+
.react-bs-container .table-header > table > thead > tr > th .select-filter.placeholder-selected option:not([value='']) {
53+
color: initial;
54+
font-style: initial;
55+
}
56+
57+
.react-bs-container .table-header > table > thead > tr > th .number-filter {
58+
display: flex;
59+
}
60+
61+
.react-bs-container .table-header > table > thead > tr > th .number-filter-input {
62+
margin-left: 5px;
63+
float: left;
64+
width: calc(100% - 67px - 5px);
65+
}
66+
67+
.react-bs-container .table-header > table > thead > tr > th .number-filter-comparator {
68+
width: 67px;
69+
float: left;
70+
}
71+
3672
.react-bs-container .table-header > table > thead > tr > .sort-column{
3773
cursor: pointer;
3874
}

‎css/react-bootstrap-table.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/react-bootstrap-table.min.js

+14-12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/js/app.js

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const routes = (
2121
<Route path="column" component={require('./column/demo')} />
2222
<Route path="sort" component={require('./sort/demo')} />
2323
<Route path="column-format" component={require('./column-format/demo')} />
24+
<Route path="column-filter" component={require('./column-filter/demo')} />
2425
<Route path="selection" component={require('./selection/demo')} />
2526
<Route path="pagination" component={require('./pagination/demo')} />
2627
<Route path="manipulation" component={require('./manipulation/demo')} />

‎examples/js/column-filter/all-filters.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
'use strict';
2+
import React from 'react';
3+
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
4+
5+
var products = [];
6+
7+
var qualityType = {
8+
0: "good",
9+
1: "bad",
10+
2: "unknown"
11+
};
12+
13+
function addProducts(quantity) {
14+
var startId = products.length;
15+
const startDate = new Date(2015, 0, 1);
16+
const endDate = new Date();
17+
for (var i = 0; i < quantity; i++) {
18+
const date = new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()));
19+
var id = startId + i;
20+
products.push({
21+
id: id,
22+
name: "Item name " + id,
23+
quality: i%3,
24+
price: Math.floor((Math.random() * 100) + 1),
25+
satisfaction: Math.floor(Math.random() * 6),
26+
inStockDate: date
27+
});
28+
}
29+
}
30+
31+
addProducts(5);
32+
33+
function enumFormatter(cell, row, enumObject){
34+
return enumObject[cell];
35+
}
36+
37+
function dateFormatter(cell, row) {
38+
return `${("0" + cell.getDate()).slice(-2)}/${("0" + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`;
39+
}
40+
41+
var satisfaction = [0, 1, 2, 3, 4, 5];
42+
43+
export default class AllFilters extends React.Component{
44+
render(){
45+
return (
46+
<BootstrapTable data={products}>
47+
<TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn>
48+
<TableHeaderColumn dataField="name" filter={{type: "TextFilter", placeholder: "Please enter a value"}}>Product Name</TableHeaderColumn>
49+
<TableHeaderColumn dataField="quality" filter={{type: "SelectFilter", options: qualityType}} dataFormat={enumFormatter} formatExtraData={qualityType}>Product Quality</TableHeaderColumn>
50+
<TableHeaderColumn dataField="price" filter={{type: "NumberFilter", delay: 1000}}>Product Price</TableHeaderColumn>
51+
<TableHeaderColumn dataField="satisfaction" filter={{type: "NumberFilter", options: satisfaction}}>Buyer Satisfaction</TableHeaderColumn>
52+
<TableHeaderColumn dataField="inStockDate" filter={{type: "DateFilter"}} dataFormat={dateFormatter}>In Stock From</TableHeaderColumn>
53+
</BootstrapTable>
54+
);
55+
}
56+
};

‎examples/js/column-filter/custom-filter.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
'use strict';
2+
import React from 'react';
3+
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
4+
5+
var products = [];
6+
7+
function addProducts(quantity) {
8+
var startId = products.length;
9+
for (var i = 0; i < quantity; i++) {
10+
var id = startId + i;
11+
products.push({
12+
id: id,
13+
name: "Item name " + id,
14+
isInStock: (i%3 == 0) ? "yes" : "no"
15+
});
16+
}
17+
}
18+
19+
addProducts(5);
20+
21+
class CheckboxFilter extends React.Component {
22+
constructor(props) {
23+
super(props);
24+
this.filter = this.filter.bind(this);
25+
this.isFiltered = this.isFiltered.bind(this);
26+
}
27+
28+
filter(event) {
29+
if (this.refs.nokCheckbox.checked && this.refs.okCheckbox.checked) {
30+
// all checkboxes are checked means we want to remove the filter for this column
31+
this.props.filterHandler();
32+
} else {
33+
this.props.filterHandler({callback: this.isFiltered});
34+
}
35+
}
36+
37+
isFiltered(targetValue) {
38+
if (targetValue === "no") {
39+
return (this.refs.nokCheckbox.checked);
40+
} else {
41+
return (this.refs.okCheckbox.checked);
42+
}
43+
}
44+
45+
render() {
46+
return (
47+
<div>
48+
<input ref="okCheckbox" type="checkbox" className="filter" onChange={this.filter} defaultChecked={true} /><label>{this.props.textOK}</label>
49+
<input ref="nokCheckbox" type="checkbox" className="filter" onChange={this.filter} defaultChecked={true} style={{marginLeft: 30 + "px"}} /><label>{this.props.textNOK}</label>
50+
</div>
51+
);
52+
}
53+
};
54+
55+
CheckboxFilter.propTypes = {
56+
filterHandler: React.PropTypes.func.isRequired,
57+
textOK: React.PropTypes.string,
58+
textNOK: React.PropTypes.string
59+
};
60+
61+
CheckboxFilter.defaultProps = {
62+
textOK: "OK",
63+
textNOK: "Not OK"
64+
}
65+
66+
function getCustomFilter(filterHandler, customFilterParameters){
67+
return (
68+
<CheckboxFilter filterHandler={filterHandler} textOK={customFilterParameters.textOK} textNOK={customFilterParameters.textNOK} />
69+
);
70+
}
71+
72+
export default class CustomFilter extends React.Component{
73+
render(){
74+
return (
75+
<BootstrapTable data={products}>
76+
<TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn>
77+
<TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
78+
<TableHeaderColumn dataField="isInStock" filter={{type: "CustomFilter", getElement: getCustomFilter, customFilterParameters: {textOK: 'yes', textNOK: 'no'} }}>Product Is In Stock</TableHeaderColumn>
79+
</BootstrapTable>
80+
);
81+
}
82+
};

‎examples/js/column-filter/date-filter-with-default-value.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
'use strict';
2+
import React from 'react';
3+
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
4+
5+
var products = [];
6+
7+
function addProducts(quantity) {
8+
var startId = products.length;
9+
const startDate = new Date(2015, 0, 1);
10+
const endDate = new Date();
11+
for (var i = 0; i < quantity; i++) {
12+
const date = new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()));
13+
var id = startId + i;
14+
products.push({
15+
id: id,
16+
name: "Item name " + id,
17+
inStockDate: date
18+
});
19+
}
20+
}
21+
22+
addProducts(5);
23+
24+
function dateFormatter(cell, row) {
25+
return `${("0" + cell.getDate()).slice(-2)}/${("0" + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`;
26+
}
27+
28+
export default class DateFilterWithDefaultValue extends React.Component{
29+
render(){
30+
return (
31+
<BootstrapTable data={products}>
32+
<TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn>
33+
<TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
34+
<TableHeaderColumn dataField="inStockDate" dataFormat={dateFormatter} filter={{type: "DateFilter", defaultValue: new Date(2015,7,22)}}>In Stock From</TableHeaderColumn>
35+
</BootstrapTable>
36+
);
37+
}
38+
};

‎examples/js/column-filter/date-filter.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
'use strict';
2+
import React from 'react';
3+
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
4+
5+
var products = [];
6+
7+
function addProducts(quantity) {
8+
var startId = products.length;
9+
const startDate = new Date(2015, 0, 1);
10+
const endDate = new Date();
11+
for (var i = 0; i < quantity; i++) {
12+
const date = new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()));
13+
var id = startId + i;
14+
products.push({
15+
id: id,
16+
name: "Item name " + id,
17+
inStockDate: date
18+
});
19+
}
20+
}
21+
22+
addProducts(5);
23+
24+
function dateFormatter(cell, row) {
25+
return `${("0" + cell.getDate()).slice(-2)}/${("0" + (cell.getMonth() + 1)).slice(-2)}/${cell.getFullYear()}`;
26+
}
27+
28+
export default class DateFilter extends React.Component{
29+
render(){
30+
return (
31+
<BootstrapTable data={products}>
32+
<TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn>
33+
<TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
34+
<TableHeaderColumn dataField="inStockDate" dataFormat={dateFormatter} filter={{type: "DateFilter"}}>In Stock From</TableHeaderColumn>
35+
</BootstrapTable>
36+
);
37+
}
38+
};

0 commit comments

Comments
 (0)