diff --git a/packages/react-bootstrap-table2-example/examples/column-filter/select-filter-preserve-option-order.js b/packages/react-bootstrap-table2-example/examples/column-filter/select-filter-preserve-option-order.js
new file mode 100644
index 0000000..f7a0fca
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/examples/column-filter/select-filter-preserve-option-order.js
@@ -0,0 +1,70 @@
+/* eslint max-len: 0 */
+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 = [
+  { label: 0, value: 'good' },
+  { label: 1, value: 'Bad' },
+  { label: 2, value: 'unknown' }
+];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions.find(opt => opt.label === cell).value,
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import filterFactory, { selectFilter } from 'react-bootstrap-table2-filter';
+
+const selectOptions = [
+  { label: 0, value: 'good' },
+  { label: 1, value: 'Bad' },
+  { label: 2, value: 'unknown' }
+];
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'quality',
+  text: 'Product Quailty',
+  formatter: cell => selectOptions.find(opt => opt.label === cell).value,
+  filter: selectFilter({
+    options: selectOptions
+  })
+}];
+
+<BootstrapTable keyField='id' data={ products } columns={ columns } filter={ filterFactory() } />
+`;
+
+export default () => (
+  <div>
+    <h3><code>selectFilter.options</code> accept an Array and we keep that order when rendering the options</h3>
+    <BootstrapTable
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      filter={ filterFactory() }
+    />
+    <Code>{ sourceCode }</Code>
+  </div>
+);
diff --git a/packages/react-bootstrap-table2-example/stories/index.js b/packages/react-bootstrap-table2-example/stories/index.js
index fd04751..2757280 100644
--- a/packages/react-bootstrap-table2-example/stories/index.js
+++ b/packages/react-bootstrap-table2-example/stories/index.js
@@ -55,6 +55,7 @@ import CustomFilterValue from 'examples/column-filter/custom-filter-value';
 import SelectFilter from 'examples/column-filter/select-filter';
 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';
 import CustomSelectFilter from 'examples/column-filter/custom-select-filter';
 import MultiSelectFilter from 'examples/column-filter/multi-select-filter';
 import MultiSelectFilterDefaultValue from 'examples/column-filter/multi-select-filter-default-value';
@@ -263,6 +264,7 @@ storiesOf('Column Filter', module)
   .add('Programmatically Multi Select Filter', () => <ProgrammaticallyMultiSelectFilter />)
   .add('Custom Filter', () => <CustomFilter />)
   .add('Advance Custom Filter', () => <AdvanceCustomFilter />)
+  .add('Preserved Option Order on Select Filter', () => <SelectFilterWithPreservedOptionsOrder />)
   .add('Clear All Filters', () => <ClearAllFilters />);
 
 storiesOf('Work on Rows', module)