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 ff2e48f

Browse files
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)

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