diff --git a/views/ngXosLib/xosHelpers/spec/ui/table.test.js b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
index 9550afa..52c8b6c 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/table.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
@@ -216,10 +216,10 @@
             });
             it('should render a list of key-values', () => {
               let td = $(element).find('tbody tr:first-child')[0];
-              let ageLabel = $(td).find('dl > dt')[0];
-              let ageValue = $(td).find('dl > dd')[0];
-              let heightLabel = $(td).find('dl > dt')[1];
-              let heightValue = $(td).find('dl > dd')[1];
+              let ageLabel = $(td).find('dl dt')[0];
+              let ageValue = $(td).find('dl dd')[0];
+              let heightLabel = $(td).find('dl dt')[1];
+              let heightValue = $(td).find('dl dd')[1];
               expect($(ageLabel).text().trim()).toEqual('age');
               expect($(ageValue).text().trim()).toEqual('20');
               expect($(heightLabel).text().trim()).toEqual('height');
@@ -238,7 +238,7 @@
                     label: 'Categories',
                     prop: 'categories',
                     type: 'custom',
-                    formatter: val => 'Formatted Content'
+                    formatter: () => 'Formatted Content'
                   }
                 ]
               }
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
index c2fe85d..2d3a061 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
@@ -44,7 +44,8 @@
     * @element ANY
     * @scope
     * @example
-
+  
+  # Basic usage
   <example module="sampleTable1">
     <file name="index.html">
       <div ng-controller="SampleCtrl1 as vm">
@@ -53,6 +54,9 @@
     </file>
     <file name="script.js">
       angular.module('sampleTable1', ['xos.uiComponents'])
+      .factory('_', function($window){
+        return $window._;
+      })
       .controller('SampleCtrl1', function(){
         this.config = {
           columns: [
@@ -80,7 +84,8 @@
       });
     </file>
   </example>
-
+  
+  # Filtering
   <example module="sampleTable2" animations="true">
     <file name="index.html">
       <div ng-controller="SampleCtrl2 as vm">
@@ -89,6 +94,9 @@
     </file>
     <file name="script.js">
       angular.module('sampleTable2', ['xos.uiComponents', 'ngAnimate'])
+      .factory('_', function($window){
+        return $window._;
+      })
       .controller('SampleCtrl2', function(){
         this.config = {
           columns: [
@@ -129,7 +137,8 @@
       });
     </file>
   </example>
-
+  
+  # Pagination
   <example module="sampleTable3">
     <file name="index.html">
       <div ng-controller="SampleCtrl3 as vm">
@@ -138,6 +147,9 @@
     </file>
     <file name="script.js">
       angular.module('sampleTable3', ['xos.uiComponents'])
+      .factory('_', function($window){
+        return $window._;
+      })
       .controller('SampleCtrl3', function(){
         this.config = {
           columns: [
@@ -176,6 +188,129 @@
       });
     </file>
   </example>
+  
+  # Field formatter
+  <example module="sampleTable4">
+    <file name="index.html">
+      <div ng-controller="SampleCtrl as vm">
+        <xos-table data="vm.data" config="vm.config"></xos-table>
+      </div>
+    </file>
+    <file name="script.js">
+      angular.module('sampleTable4', ['xos.uiComponents'])
+      .factory('_', function($window){
+        return $window._;
+      })
+      .controller('SampleCtrl', function(){
+        this.config = {
+          columns: [
+            {
+              label: 'First Name',
+              prop: 'name'
+            },
+            {
+              label: 'Enabled',
+              prop: 'enabled',
+              type: 'boolean'
+            },
+            {
+              label: 'Services',
+              prop: 'services',
+              type: 'array'
+            },
+            {
+              label: 'Details',
+              prop: 'details',
+              type: 'object'
+            }
+          ]
+        };
+
+        this.data = [
+          {
+            name: 'John',
+            enabled: true,
+            services: ['Cdn', 'IpTv'],
+            details: {
+              c_tag: '243',
+              s_tag: '444'
+            }
+          },
+          {
+            name: 'Gili',
+            enabled: false,
+            services: ['Cdn', 'IpTv', 'Cache'],
+            details: {
+              c_tag: '675',
+              s_tag: '893'
+            }
+          }
+        ]
+      });
+    </file>
+  </example>
+
+  # Custom formatter
+  <example module="sampleTable5">
+    <file name="index.html">
+      <div ng-controller="SampleCtrl as vm">
+        <xos-table data="vm.data" config="vm.config"></xos-table>
+      </div>
+    </file>
+    <file name="script.js">
+      angular.module('sampleTable5', ['xos.uiComponents'])
+      .factory('_', function($window){
+        return $window._;
+      })
+      .controller('SampleCtrl', function(){
+        this.config = {
+          columns: [
+            {
+              label: 'Username',
+              prop: 'username'
+            },
+            {
+              label: 'Features',
+              prop: 'features',
+              type: 'custom',
+              formatter: (val) => {
+                
+                let cdnEnabled = val.cdn ? 'enabled' : 'disabled';
+                return `
+                  Cdn is ${cdnEnabled},
+                  uplink speed is ${val.uplink_speed}
+                  and downlink speed is ${val.downlink_speed}
+                `;
+              }
+            }
+          ]
+        };
+
+        this.data = [
+          {
+            username: 'John',
+            features: {
+              "cdn": false,
+              "uplink_speed": 1000000000,
+              "downlink_speed": 1000000000,
+              "uverse": true,
+              "status": "enabled"
+            }
+          },
+          {
+            username: 'Gili',
+            features: {
+              "cdn": true,
+              "uplink_speed": 3000000000,
+              "downlink_speed": 2000000000,
+              "uverse": true,
+              "status": "enabled"
+            }
+          }
+        ]
+      });
+    </file>
+  </example>
     **/
 
     .directive('xosTable', function(){
@@ -241,9 +376,11 @@
                       {{item[col.prop] | arrayToList}}
                     </span>
                     <span ng-if="col.type === 'object'">
-                      <dl class="dl-horizontal" ng-repeat="(k,v) in item[col.prop]">
-                        <dt>{{k}}</dt>
-                        <dd>{{v}}</dd>
+                      <dl class="dl-horizontal">
+                        <span ng-repeat="(k,v) in item[col.prop]">
+                          <dt>{{k}}</dt>
+                          <dd>{{v}}</dd>
+                        </span>
                       </dl>
                     </span>
                     <span ng-if="col.type === 'custom'">
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
index 46c4460..70399a9 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.scss
@@ -23,4 +23,16 @@
     opacity:1;
     animation: 0.5s slideInRight ease-in-out;
   }
+
+  td dl {
+    margin-bottom: 0;
+
+    dt {
+      width: 50px !important;
+    }
+
+    dd {
+      margin-left: 60px !important;
+    }
+  }
 }
\ No newline at end of file