diff --git a/packages/react-bootstrap-table2-filter/README.md b/packages/react-bootstrap-table2-filter/README.md
index b38007e..46097ba 100644
--- a/packages/react-bootstrap-table2-filter/README.md
+++ b/packages/react-bootstrap-table2-filter/README.md
@@ -115,7 +115,9 @@ const qualityFilter = selectFilter({
// omit...
```
-> Note, the selectOptions can be an array also:
+> Note, the selectOptions can be an array or a function which return an array:
+
+### Array as options
```js
const selectOptions = [
@@ -133,6 +135,24 @@ const columns = [
})
}];
```
+### Function as options
+
+```js
+const selectOptions = [
+ { value: 0, label: 'good' },
+ { value: 1, label: 'Bad' },
+ { value: 2, label: 'unknown' }
+];
+const columns = [
+ ..., {
+ dataField: 'quality',
+ text: 'Product Quailty',
+ formatter: cell => selectOptions.find(opt => opt.value === cell).label,
+ filter: selectFilter({
+ options: () => selectOptions
+ })
+}];
+```
The benifit is `react-bootstrap-table2` will render the select options by the order of array.
diff --git a/packages/react-bootstrap-table2-filter/src/components/select.js b/packages/react-bootstrap-table2-filter/src/components/select.js
index 7b83827..7b49a8c 100644
--- a/packages/react-bootstrap-table2-filter/src/components/select.js
+++ b/packages/react-bootstrap-table2-filter/src/components/select.js
@@ -1,6 +1,7 @@
/* eslint react/require-default-props: 0 */
/* eslint no-return-assign: 0 */
/* eslint react/no-unused-prop-types: 0 */
+/* eslint class-methods-use-this: 0 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { LIKE, EQ } from '../comparison';
@@ -44,7 +45,8 @@ class SelectFilter extends Component {
constructor(props) {
super(props);
this.filter = this.filter.bind(this);
- const isSelected = getOptionValue(props.options, this.getDefaultValue()) !== undefined;
+ this.options = this.getOptions(props);
+ const isSelected = getOptionValue(this.options, this.getDefaultValue()) !== undefined;
this.state = { isSelected };
}
@@ -69,19 +71,30 @@ class SelectFilter extends Component {
componentDidUpdate(prevProps) {
let needFilter = false;
- if (this.props.defaultValue !== prevProps.defaultValue) {
+ const {
+ column,
+ onFilter,
+ defaultValue
+ } = this.props;
+ const nextOptions = this.getOptions(this.props);
+ if (defaultValue !== prevProps.defaultValue) {
needFilter = true;
- } else if (!optionsEquals(this.props.options, prevProps.options)) {
+ } else if (!optionsEquals(nextOptions, this.options)) {
+ this.options = nextOptions;
needFilter = true;
}
if (needFilter) {
const value = this.selectInput.value;
if (value) {
- this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
+ onFilter(column, FILTER_TYPE.SELECT)(value);
}
}
}
+ getOptions(props) {
+ return typeof props.options === 'function' ? props.options(props.column) : props.options;
+ }
+
getDefaultValue() {
const { filterState, defaultValue } = this.props;
if (filterState && typeof filterState.filterVal !== 'undefined') {
@@ -90,25 +103,6 @@ class SelectFilter extends Component {
return defaultValue;
}
- getOptions() {
- const optionTags = [];
- const { options, placeholder, column, withoutEmptyOption } = this.props;
- if (!withoutEmptyOption) {
- optionTags.push((
-
- ));
- }
- if (Array.isArray(options)) {
- options.forEach(({ value, label }) =>
- optionTags.push());
- } else {
- Object.keys(options).forEach(key =>
- optionTags.push()
- );
- }
- return optionTags;
- }
-
cleanFiltered() {
const value = (this.props.defaultValue !== undefined) ? this.props.defaultValue : '';
this.setState(() => ({ isSelected: value !== '' }));
@@ -128,6 +122,26 @@ class SelectFilter extends Component {
this.props.onFilter(this.props.column, FILTER_TYPE.SELECT)(value);
}
+ renderOptions() {
+ const optionTags = [];
+ const { options } = this;
+ const { placeholder, column, withoutEmptyOption } = this.props;
+ if (!withoutEmptyOption) {
+ optionTags.push((
+
+ ));
+ }
+ if (Array.isArray(options)) {
+ options.forEach(({ value, label }) =>
+ optionTags.push());
+ } else {
+ Object.keys(options).forEach(key =>
+ optionTags.push()
+ );
+ }
+ return optionTags;
+ }
+
render() {
const {
style,
@@ -163,7 +177,7 @@ class SelectFilter extends Component {
onClick={ e => e.stopPropagation() }
defaultValue={ this.getDefaultValue() || '' }
>
- { this.getOptions() }
+ { this.renderOptions() }
);