diff --git a/package.json b/package.json
index d3cc155..f10666e 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     ],
     "testEnvironment": "node",
     "testMatch": [
-      "**/test/*.js"
+      "**/test/**/*.js"
     ]
   }
 }
diff --git a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js b/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
index c30b7b0..cf7afd1 100644
--- a/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
+++ b/packages/react-bootstrap-table2-example/.storybook/webpack.config.js
@@ -4,10 +4,13 @@ const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/src');
 const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style');
 const storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
+const srcPath = path.join(__dirname, '../src');
 const aliasPath = {
   examples: examplesPath,
-  common: path.join(examplesPath, 'common'),
   stories: storyPath,
+  src: srcPath,
+  components: path.join(srcPath, 'components'),
+  utils: path.join(srcPath, 'utils'),
 };
 
 const loaders = [{
diff --git a/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js b/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js
index fdc07c7..f029661 100644
--- a/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js
+++ b/packages/react-bootstrap-table2-example/examples/basic/borderless-table.js
@@ -1,23 +1,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/basic/index.js b/packages/react-bootstrap-table2-example/examples/basic/index.js
index f76dcad..096eb77 100644
--- a/packages/react-bootstrap-table2-example/examples/basic/index.js
+++ b/packages/react-bootstrap-table2-example/examples/basic/index.js
@@ -1,23 +1,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js b/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js
index 0ed9f60..8c341d2 100644
--- a/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js
+++ b/packages/react-bootstrap-table2-example/examples/basic/no-data-table.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js b/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js
index da0384f..bd1aa90 100644
--- a/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js
+++ b/packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js
@@ -1,23 +1,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js
index c274308..55ad2aa 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-align-table.js
@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js
index 6b7dcc7..44029ae 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-class-table.js
@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js
index 4b3e0a2..2ffc74a 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-event-table.js
@@ -3,23 +3,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js
index 5717bb5..1d6ece6 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-format-table.js
@@ -1,24 +1,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i,
-      onSale: Math.random() >= 0.5
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 function priceFormatter(cell, row) {
   if (row.onSale) {
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js
index 754a71d..7e5c683 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js
@@ -2,23 +2,14 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      rank: Math.random() < 0.5 ? 'down' : 'up'
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator(5, (value, index) => ({
+  id: index,
+  name: `User Name ${index}`,
+  rank: Math.random() < 0.5 ? 'down' : 'up'
+}));
 
 function rankFormatter(cell, row, rowIndex, formatExtraData) {
   return (
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js
index 8fd175f..24565e4 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js
@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js
index dcdd64b..157193b 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-style-table.js
@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js b/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js
index 140ae71..ec2ee76 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/column-title-table.js
@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js b/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js
index c7d4774..2852c7c 100644
--- a/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js
+++ b/packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js
@@ -1,27 +1,18 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `User Name ${id}`,
-      phone: 21009831 + i,
-      address: {
-        city: 'New York',
-        postCode: '1111-4512'
-      }
-    });
+const products = productsGenerator(5, (value, index) => ({
+  id: index,
+  name: `User Name ${index}`,
+  phone: 21009831 + index,
+  address: {
+    city: 'New York',
+    postCode: '1111-4512'
   }
-}
-
-addProducts(5);
+}));
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js
index 536b075..cbdfcdd 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js
@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js
index ed3b463..a317da1 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js
@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
index 002f527..3e892ef 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js
@@ -3,23 +3,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js
index 703e2c5..b9d6373 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js
@@ -2,24 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i,
-      onSale: Math.random() >= 0.5
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 function priceFormatter(column, colIndex) {
   return (
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js
index 665e957..5098481 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js
@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js b/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js
index b936a21..41884ab 100644
--- a/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js
+++ b/packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js
@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',
diff --git a/packages/react-bootstrap-table2-example/examples/common/codeBlock.js b/packages/react-bootstrap-table2-example/src/components/common/code-block.js
similarity index 100%
rename from packages/react-bootstrap-table2-example/examples/common/codeBlock.js
rename to packages/react-bootstrap-table2-example/src/components/common/code-block.js
diff --git a/packages/react-bootstrap-table2-example/src/utils/common.js b/packages/react-bootstrap-table2-example/src/utils/common.js
new file mode 100644
index 0000000..8d95013
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/src/utils/common.js
@@ -0,0 +1,21 @@
+/**
+ * products generator for stories
+ * 
+ * @param {Number} quantity - quantity of products
+ * @param {Function} callback - callback func which is similiar to 'mapFunction'
+ * aims to customize product format
+ * 
+ * @return {Array} - products array
+ */
+export const productsGenerator = (quantity = 5, callback) => {
+  if (callback) return Array.from({ length: quantity }, callback);
+
+  // if no given callback, retrun default product format.
+  return (
+    Array.from({ length: quantity }, (value, index) => ({
+      id: index,
+      name: `Item name ${index}`,
+      price: 2100 + index
+    }))
+  );
+};
diff --git a/packages/react-bootstrap-table2-example/test/utils/common.test.js b/packages/react-bootstrap-table2-example/test/utils/common.test.js
new file mode 100644
index 0000000..ca8ecab
--- /dev/null
+++ b/packages/react-bootstrap-table2-example/test/utils/common.test.js
@@ -0,0 +1,36 @@
+import { productsGenerator } from '../../src/utils/common';
+
+describe('Utils', () => {
+  describe('productsGenerator', () => {
+    const quantity = 2;
+
+    it('should return an array', () => {
+      expect(Array.isArray(productsGenerator())).toBe(true);
+    });
+
+    it('should return 5 products without params', () => {
+      expect(productsGenerator().length).toEqual(5);
+    });
+
+    it('should return an array with given quntity', () => {
+      expect(productsGenerator(quantity).length).toEqual(quantity);
+    });
+
+    describe('when callback is defined', () => {
+      const callback = (value, index) => ({
+        id: index,
+        name: 'react-bootstrap-table-2'
+      });
+
+      it('should return customized products format', () => {
+        const products = productsGenerator(quantity, callback);
+        const product = products[0];
+
+        expect(Array.isArray(products)).toBe(true);
+        expect(products.length).toBe(quantity);
+        expect(product).toHaveProperty('id', 0);
+        expect(product).toHaveProperty('name', 'react-bootstrap-table-2');
+      });
+    });
+  });
+});