Skip to content

Commit ff2e48f

Browse files
AllenFangAllenFang
authored
Merge pull request #1277 from react-bootstrap-table/develop
20200307 release
2 parents 1ae9b8a + 094c907 commit ff2e48f

File tree

21 files changed

+129
-50
lines changed

21 files changed

+129
-50
lines changed

‎docs/columns.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -594,6 +594,7 @@ This prop also accept a function:
594594

595595
* `column`
596596
* `columnIndex`
597+
* `props`: It's an object and contain `text` property only.
597598

598599
## <a name='footerClasses'>column.footerClasses - [String | Function]</a>
599600
It's similar to [`column.classes`](#classes), `footerClasses` is available to have customized class on table footer column:

‎packages/react-bootstrap-table2-example/examples/column-filter/clear-all-filters.js

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
import React from 'react';
22
import BootstrapTable from 'react-bootstrap-table-next';
3-
import filterFactory, { textFilter, dateFilter } from 'react-bootstrap-table2-filter';
3+
import filterFactory, { textFilter, dateFilter, selectFilter } from 'react-bootstrap-table2-filter';
44
import Code from 'components/common/code-block';
55
import { stockGenerator } from 'utils/common';
66

77
const products = stockGenerator(8);
88

9+
const selectOptions = {
10+
0: 'good',
11+
1: 'Bad',
12+
2: 'unknown'
13+
};
14+
915
let nameFilter;
1016
let priceFilter;
17+
let qualityFilter;
1118
let stockDateFilter;
1219

1320
const columns = [{
@@ -19,15 +26,28 @@ const columns = [{
1926
filter: textFilter({
2027
getFilter: (filter) => {
2128
nameFilter = filter;
22-
}
29+
},
30+
onFilter: filterVal => console.log(`Filter product name ${filterVal}`)
31+
})
32+
}, {
33+
dataField: 'quality',
34+
text: 'Product Quailty',
35+
formatter: cell => selectOptions[cell],
36+
filter: selectFilter({
37+
options: selectOptions,
38+
getFilter: (filter) => {
39+
qualityFilter = filter;
40+
},
41+
onFilter: filterVal => console.log(`Filter quality ${filterVal}`)
2342
})
2443
}, {
2544
dataField: 'price',
2645
text: 'Price',
2746
filter: textFilter({
2847
getFilter: (filter) => {
2948
priceFilter = filter;
30-
}
49+
},
50+
onFilter: filterVal => console.log(`Filter Price: ${filterVal}`)
3151
})
3252
}, {
3353
dataField: 'inStockDate',
@@ -36,13 +56,15 @@ const columns = [{
3656
filter: dateFilter({
3757
getFilter: (filter) => {
3858
stockDateFilter = filter;
39-
}
59+
},
60+
onFilter: filterVal => console.log(`Filter date: ${filterVal}`)
4061
})
4162
}];
4263

4364
const handleClick = () => {
4465
nameFilter('');
4566
priceFilter('');
67+
qualityFilter('');
4668
stockDateFilter();
4769
};
4870

‎packages/react-bootstrap-table2-example/examples/column-filter/text-filter.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ const columns = [{
1414
dataField: 'name',
1515
text: 'Product Name',
1616
footer: 'hello',
17-
filter: textFilter()
17+
filter: textFilter({
18+
id: 'identify'
19+
})
1820
}, {
1921
dataField: 'price',
2022
text: 'Product Price',
@@ -54,7 +56,6 @@ export default () => (
5456
data={ products }
5557
columns={ columns }
5658
filter={ filterFactory() }
57-
filterPosition="bottom"
5859
selectRow={ selectRow }
5960
/>
6061
<Code>{ sourceCode }</Code>

‎packages/react-bootstrap-table2-example/examples/footer/column-format-table.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { productsGenerator } from 'utils/common';
77

88
const products = productsGenerator();
99

10-
function priceFormatter(column, colIndex) {
10+
function priceFormatter(column, colIndex, { text }) {
1111
return (
1212
<h5>
1313
<strong>$$ {column.text} $$</strong>
@@ -37,7 +37,7 @@ const columns = [
3737
const sourceCode = `\
3838
import BootstrapTable from 'react-bootstrap-table-next';
3939
40-
function priceFormatter(column, colIndex) {
40+
function priceFormatter(column, colIndex, { text }) {
4141
return (
4242
<h5><strong>$$ { column.text } $$</strong></h5>
4343
);

‎packages/react-bootstrap-table2-example/src/utils/common.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ export const stockGenerator = (quantity = 5) =>
7777
name: `Stock Name ${index}`,
7878
price: Math.floor((Math.random() * 2) + 1),
7979
visible: Math.random() > 0.5,
80+
quality: index % 3,
8081
inStockDate:
8182
new Date(startDate.getTime() + Math.random() * (endDate.getTime() - startDate.getTime()))
8283
}));

‎packages/react-bootstrap-table2-filter/README.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@ const priceFilter = textFilter({
6464
comparator: Comparator.EQ, // default is Comparator.LIKE
6565
caseSensitive: true, // default is false, and true will only work when comparator is LIKE
6666
style: { ... }, // your custom styles on input
67-
delay: 1000 // how long will trigger filtering after user typing, default is 500 ms
67+
delay: 1000, // how long will trigger filtering after user typing, default is 500 ms
68+
id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
6869
});
6970

7071
// omit...
@@ -110,6 +111,7 @@ const qualityFilter = selectFilter({
110111
comparator: Comparator.LIKE, // default is Comparator.EQ
111112
style: { ... }, // your custom styles on input
112113
withoutEmptyOption: true // hide the default select option
114+
id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
113115
});
114116

115117
// omit...
@@ -197,6 +199,7 @@ const qualityFilter = multiSelectFilter({
197199
comparator: Comparator.LIKE, // default is Comparator.EQ
198200
style: { ... }, // your custom styles on input
199201
withoutEmptyOption: true // hide the default select option
202+
id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
200203
});
201204

202205
// omit...
@@ -236,6 +239,7 @@ const numberFilter = numberFilter({
236239
numberStyle: { backgroundColor: 'cadetblue', margin: '0px' }, // custom the style on number input/select
237240
numberClassName: 'custom-number-class', // custom the class on ber input/select
238241
defaultValue: { number: 2103, comparator: Comparator.GT } // default value
242+
id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
239243
})
240244

241245
// omit...
@@ -275,6 +279,7 @@ const dateFilter = dateFilter({
275279
dateStyle: { backgroundColor: 'cadetblue', margin: '0px' }, // custom the style on date input
276280
dateClassName: 'custom-date-class', // custom the class on date input
277281
defaultValue: { date: new Date(2018, 0, 1), comparator: Comparator.GT } // default value
282+
id: 'id', // assign a unique value for htmlFor attribute, it's useful when you have same dataField across multiple table in one page
278283
})
279284

280285
// omit...

‎packages/react-bootstrap-table2-filter/src/components/date.js

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,9 @@ class DateFilter extends Component {
128128

129129
render() {
130130
const {
131+
id,
131132
placeholder,
132-
column: { text },
133+
column: { dataField, text },
133134
style,
134135
comparatorStyle,
135136
dateStyle,
@@ -138,6 +139,9 @@ class DateFilter extends Component {
138139
dateClassName
139140
} = this.props;
140141

142+
const comparatorElmId = `date-filter-comparator-${dataField}${id ? `-${id}` : ''}`;
143+
const inputElmId = `date-filter-column-${dataField}${id ? `-${id}` : ''}`;
144+
141145
return (
142146
<div
143147
onClick={ e => e.stopPropagation() }
@@ -146,12 +150,12 @@ class DateFilter extends Component {
146150
>
147151
<label
148152
className="filter-label"
149-
htmlFor={ `date-filter-comparator-${text}` }
153+
htmlFor={ comparatorElmId }
150154
>
151155
<span className="sr-only">Filter comparator</span>
152156
<select
153157
ref={ n => this.dateFilterComparator = n }
154-
id={ `date-filter-comparator-${text}` }
158+
id={ comparatorElmId }
155159
style={ comparatorStyle }
156160
className={ `date-filter-comparator form-control ${comparatorClassName}` }
157161
onChange={ this.onChangeComparator }
@@ -160,11 +164,11 @@ class DateFilter extends Component {
160164
{ this.getComparatorOptions() }
161165
</select>
162166
</label>
163-
<label htmlFor={ `date-filter-column-${text}` }>
167+
<label htmlFor={ inputElmId }>
164168
<span className="sr-only">Enter ${ text }</span>
165169
<input
166170
ref={ n => this.inputDate = n }
167-
id={ `date-filter-column-${text}` }
171+
id={ inputElmId }
168172
className={ `filter date-filter-input form-control ${dateClassName}` }
169173
style={ dateStyle }
170174
type="date"
@@ -181,6 +185,7 @@ class DateFilter extends Component {
181185
DateFilter.propTypes = {
182186
onFilter: PropTypes.func.isRequired,
183187
column: PropTypes.object.isRequired,
188+
id: PropTypes.string,
184189
filterState: PropTypes.object,
185190
delay: PropTypes.number,
186191
defaultValue: PropTypes.shape({
@@ -232,7 +237,8 @@ DateFilter.defaultProps = {
232237
comparatorStyle: undefined,
233238
comparatorClassName: '',
234239
dateStyle: undefined,
235-
dateClassName: ''
240+
dateClassName: '',
241+
id: null
236242
};
237243

238244

‎packages/react-bootstrap-table2-filter/src/components/multiselect.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ class MultiSelectFilter extends Component {
112112

113113
render() {
114114
const {
115+
id,
115116
style,
116117
className,
117118
filterState,
@@ -128,17 +129,18 @@ class MultiSelectFilter extends Component {
128129

129130
const selectClass =
130131
`filter select-filter form-control ${className} ${this.state.isSelected ? '' : 'placeholder-selected'}`;
132+
const elmId = `multiselect-filter-column-${column.dataField}${id ? `-${id}` : ''}`;
131133

132134
return (
133135
<label
134136
className="filter-label"
135-
htmlFor={ `multiselect-filter-column-${column.text}` }
137+
htmlFor={ elmId }
136138
>
137139
<span className="sr-only">Filter by {column.text}</span>
138140
<select
139141
{ ...rest }
140142
ref={ n => this.selectInput = n }
141-
id={ `multiselect-filter-column-${column.text}` }
143+
id={ elmId }
142144
style={ style }
143145
multiple
144146
className={ selectClass }
@@ -157,6 +159,7 @@ MultiSelectFilter.propTypes = {
157159
onFilter: PropTypes.func.isRequired,
158160
column: PropTypes.object.isRequired,
159161
options: PropTypes.object.isRequired,
162+
id: PropTypes.string,
160163
filterState: PropTypes.object,
161164
comparator: PropTypes.oneOf([LIKE, EQ]),
162165
placeholder: PropTypes.string,
@@ -174,7 +177,8 @@ MultiSelectFilter.defaultProps = {
174177
className: '',
175178
withoutEmptyOption: false,
176179
comparator: EQ,
177-
caseSensitive: true
180+
caseSensitive: true,
181+
id: null
178182
};
179183

180184
export default MultiSelectFilter;

‎packages/react-bootstrap-table2-filter/src/components/number.js

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ class NumberFilter extends Component {
170170
render() {
171171
const { isSelected } = this.state;
172172
const {
173+
id,
173174
column,
174175
options,
175176
style,
@@ -188,6 +189,9 @@ class NumberFilter extends Component {
188189
${!isSelected ? 'placeholder-selected' : ''}
189190
`;
190191

192+
const comparatorElmId = `number-filter-comparator-${column.dataField}${id ? `-${id}` : ''}`;
193+
const inputElmId = `number-filter-column-${column.dataField}${id ? `-${id}` : ''}`;
194+
191195
return (
192196
<div
193197
onClick={ e => e.stopPropagation() }
@@ -196,13 +200,13 @@ class NumberFilter extends Component {
196200
>
197201
<label
198202
className="filter-label"
199-
htmlFor={ `number-filter-comparator-${column.text}` }
203+
htmlFor={ comparatorElmId }
200204
>
201205
<span className="sr-only">Filter comparator</span>
202206
<select
203207
ref={ n => this.numberFilterComparator = n }
204208
style={ comparatorStyle }
205-
id={ `number-filter-comparator-${column.text}` }
209+
id={ comparatorElmId }
206210
className={ `number-filter-comparator form-control ${comparatorClassName}` }
207211
onChange={ this.onChangeComparator }
208212
defaultValue={ this.getDefaultComparator() }
@@ -214,12 +218,12 @@ class NumberFilter extends Component {
214218
options ?
215219
<label
216220
className="filter-label"
217-
htmlFor={ `number-filter-column-${column.text}` }
221+
htmlFor={ inputElmId }
218222
>
219223
<span className="sr-only">{`Select ${column.text}`}</span>
220224
<select
221225
ref={ n => this.numberFilter = n }
222-
id={ `number-filter-column-${column.text}` }
226+
id={ inputElmId }
223227
style={ numberStyle }
224228
className={ selectClass }
225229
onChange={ this.onChangeNumberSet }
@@ -228,11 +232,11 @@ class NumberFilter extends Component {
228232
{ this.getNumberOptions() }
229233
</select>
230234
</label> :
231-
<label htmlFor={ `number-filter-column-${column.text}` }>
235+
<label htmlFor={ inputElmId }>
232236
<span className="sr-only">{`Enter ${column.text}`}</span>
233237
<input
234238
ref={ n => this.numberFilter = n }
235-
id={ `number-filter-column-${column.text}` }
239+
id={ inputElmId }
236240
type="number"
237241
style={ numberStyle }
238242
className={ `number-filter-input form-control ${numberClassName}` }
@@ -250,6 +254,7 @@ class NumberFilter extends Component {
250254
NumberFilter.propTypes = {
251255
onFilter: PropTypes.func.isRequired,
252256
column: PropTypes.object.isRequired,
257+
id: PropTypes.string,
253258
filterState: PropTypes.object,
254259
options: PropTypes.arrayOf(PropTypes.number),
255260
defaultValue: PropTypes.shape({
@@ -305,7 +310,8 @@ NumberFilter.defaultProps = {
305310
comparatorStyle: undefined,
306311
comparatorClassName: '',
307312
numberStyle: undefined,
308-
numberClassName: ''
313+
numberClassName: '',
314+
id: null
309315
};
310316

311317
export default NumberFilter;

0 commit comments

Comments
 (0)