diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/select-filter-option-type.js b/packages/react-bootstrap-table2-example/examples/column-filter/select-filter-option-type.js new file mode 100644 index 0000000..5591d4a --- /dev/null +++ b/packages/react-bootstrap-table2-example/examples/column-filter/select-filter-option-type.js @@ -0,0 +1,150 @@ +import React from 'react'; +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter'; +import Code from 'components/common/code-block'; +import { productsQualityGenerator } from 'utils/common'; + +const products = productsQualityGenerator(6); + +const selectOptions = { + 0: 'good', + 1: 'Bad', + 2: 'unknown' +}; + +const selectOptionsArr = [{ + value: 0, + label: 'good' +}, { + value: 1, + label: 'Bad' +}, { + value: 2, + label: 'unknown' +}]; + +const columns1 = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'quality', + text: 'Product Quailty', + formatter: cell => selectOptions[cell], + filter: selectFilter({ + options: selectOptions + }) +}]; + +const columns2 = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'quality', + text: 'Product Quailty', + formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '', + filter: selectFilter({ + options: selectOptionsArr + }) +}]; + +const columns3 = [{ + dataField: 'id', + text: 'Product ID' +}, { + dataField: 'name', + text: 'Product Name' +}, { + dataField: 'quality', + text: 'Product Quailty', + formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '', + filter: selectFilter({ + options: () => selectOptionsArr + }) +}]; + +const sourceCode = `\ +import BootstrapTable from 'react-bootstrap-table-next'; +import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter'; + +// Object map options +const selectOptions = { + 0: 'good', + 1: 'Bad', + 2: 'unknown' +}; + +// Array options +const selectOptionsArr = [{ + value: 0, + label: 'good' +}, { + value: 1, + label: 'Bad' +}, { + value: 2, + label: 'unknown' +}]; + +const columns1 = [..., { + dataField: 'quality', + text: 'Product Quailty', + formatter: cell => selectOptions[cell], + filter: selectFilter({ + options: selectOptions + }) +}]; + + +const columns2 = [..., { + dataField: 'quality', + text: 'Product Quailty', + formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '', + filter: selectFilter({ + options: selectOptionsArr + }) +}]; + + +const columns3 = [..., { + dataField: 'quality', + text: 'Product Quailty', + formatter: cell => selectOptionsArr.filter(opt => opt.value === cell)[0].label || '', + filter: selectFilter({ + options: () => selectOptionsArr + }) +}]; + +`; + +export default () => ( +
+

Options as an object

+ +

Options as an array

+ +

Options as a function which return an array

+ + { sourceCode } +
+); diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js index 6acd9b9..0dc7196 100644 --- a/packages/react-bootstrap-table2-example/stories/index.js +++ b/packages/react-bootstrap-table2-example/stories/index.js @@ -68,6 +68,7 @@ import TextFilterCaseSensitive from 'examples/column-filter/text-filter-caseSens import CustomTextFilter from 'examples/column-filter/custom-text-filter'; import CustomFilterValue from 'examples/column-filter/custom-filter-value'; import SelectFilter from 'examples/column-filter/select-filter'; +import ConfigureSelectFilterOptions from 'examples/column-filter/select-filter-option-type'; import SelectFilterWithDefaultValue from 'examples/column-filter/select-filter-default-value'; import SelectFilterComparator from 'examples/column-filter/select-filter-like-comparator'; import SelectFilterWithPreservedOptionsOrder from 'examples/column-filter/select-filter-preserve-option-order'; @@ -300,6 +301,7 @@ storiesOf('Column Filter', module) .add('Text Filter with Case Sensitive', () => ) // add another filter type example right here. .add('Select Filter', () => ) + .add('Configure Select Filter Options', () => ) .add('Select Filter with Default Value', () => ) .add('Select Filter with Comparator', () => ) .add('MultiSelect Filter', () => )