diff --git a/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js b/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js
index bcf56ea..6266303 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js
@@ -10,6 +10,41 @@
   'use strict';
 
   angular.module('xos.uiComponents')
+
+  /**
+    * @ngdoc directive
+    * @name xos.uiComponents.directive:xosPagination
+    * @restrict E
+    * @description The xos-table directive
+    * @param {Number} pageSize Number of elements per page
+    * @param {Number} totalElements Number of total elements in the collection
+    * @param {Function} change The callback to be triggered on page change.
+    * * @element ANY
+    * @scope
+    * @example
+  <example module="samplePagination">
+    <file name="index.html">
+      <div ng-controller="SampleCtrl1 as vm">
+        <xos-pagination
+          page-size="vm.pageSize"
+          total-elements="vm.totalElements"
+          change="vm.change">
+        </xos-pagination>
+      </div>
+    </file>
+    <file name="script.js">
+      angular.module('samplePagination', ['xos.uiComponents'])
+      .controller('SampleCtrl1', function(){
+        this.pageSize = 10;
+        this.totalElements = 35;
+        this.change = (pageNumber) => {
+          console.log(pageNumber);
+        }
+      });
+    </file>
+  </example>
+  **/
+
   .directive('xosPagination', function(){
     return {
       restrict: 'E',
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js b/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
index f5c77ed..daca484 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
@@ -9,17 +9,11 @@
 (function () {
   'use strict';
 
-  /**
-  * @ngdoc overview
-  * @name xos.uiComponents.table
-  * @description A table component
-  **/
-
   angular.module('xos.uiComponents')
 
     /**
     * @ngdoc directive
-    * @name xos.uiComponents.table.directive:xosTable
+    * @name xos.uiComponents.directive:xosTable
     * @restrict E
     * @description The xos-table directive
     * @param {Object} config The configuration for the component.
@@ -51,14 +45,14 @@
     * @scope
     * @example
 
-  <example module="sampleModule1">
+  <example module="sampleTable1">
     <file name="index.html">
       <div ng-controller="SampleCtrl1 as vm">
         <xos-table data="vm.data" config="vm.config"></xos-table>
       </div>
     </file>
     <file name="script.js">
-      angular.module('sampleModule1', ['xos.uiComponents.table'])
+      angular.module('sampleTable1', ['xos.uiComponents'])
       .controller('SampleCtrl1', function(){
         this.config = {
           columns: [
@@ -87,14 +81,14 @@
     </file>
   </example>
 
-  <example module="sampleModule2">
+  <example module="sampleTable2">
     <file name="index.html">
       <div ng-controller="SampleCtrl2 as vm">
         <xos-table data="vm.data" config="vm.config"></xos-table>
       </div>
     </file>
     <file name="script.js">
-      angular.module('sampleModule2', ['xos.uiComponents.table'])
+      angular.module('sampleTable2', ['xos.uiComponents'])
       .controller('SampleCtrl2', function(){
         this.config = {
           columns: [
@@ -136,6 +130,52 @@
     </file>
   </example>
 
+  <example module="sampleTable3">
+    <file name="index.html">
+      <div ng-controller="SampleCtrl3 as vm">
+        <xos-table data="vm.data" config="vm.config"></xos-table>
+      </div>
+    </file>
+    <file name="script.js">
+      angular.module('sampleTable3', ['xos.uiComponents'])
+      .controller('SampleCtrl3', function(){
+        this.config = {
+          columns: [
+            {
+              label: 'First Name', // column title
+              prop: 'name' // property to read in the data array
+            },
+            {
+              label: 'Last Name',
+              prop: 'lastname'
+            }
+          ],
+          pagination: {
+            pageSize: 2
+          }
+        };
+
+        this.data = [
+          {
+            name: 'John',
+            lastname: 'Doe'
+          },
+          {
+            name: 'Gili',
+            lastname: 'Fereydoun'
+          },
+          {
+            name: 'Lucky',
+            lastname: 'Clarkson'
+          },
+          {
+            name: 'Tate',
+            lastname: 'Spalding'
+          }
+        ]
+      });
+    </file>
+  </example>
     **/
 
     .directive('xosTable', function(){
@@ -146,67 +186,73 @@
           config: '='
         },
         template: `
-          <!-- <pre>{{vm.data | json}}</pre> -->
-          <div class="row" ng-if="vm.config.filter == 'fulltext'">
-            <div class="col-xs-12">
-              <input
-                class="form-control"
-                placeholder="Type to search.."
-                type="text"
-                ng-model="vm.query"/>
+          <div ng-show="vm.data.length > 0">
+            <div class="row" ng-if="vm.config.filter == 'fulltext'">
+              <div class="col-xs-12">
+                <input
+                  class="form-control"
+                  placeholder="Type to search.."
+                  type="text"
+                  ng-model="vm.query"/>
+              </div>
+            </div>
+            <table ng-class="vm.classes" ng-show="vm.data.length > 0">
+              <thead>
+                <tr>
+                  <th ng-repeat="col in vm.columns">
+                    {{col.label}}
+                    <span ng-if="vm.config.order">
+                      <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
+                        <i class="glyphicon glyphicon-chevron-up"></i>
+                      </a>
+                      <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
+                        <i class="glyphicon glyphicon-chevron-down"></i>
+                      </a>
+                    </span>
+                  </th>
+                  <th ng-if="vm.config.actions">Actions</th>
+                </tr>
+              </thead>
+              <tbody ng-if="vm.config.filter == 'field'">
+                <tr>
+                  <td ng-repeat="col in vm.columns">
+                    <input
+                      class="form-control"
+                      placeholder="Type to search by {{col.label}}"
+                      type="text"
+                      ng-model="vm.query[col.prop]"/>
+                  </td>
+                  <td ng-if="vm.config.actions"></td>
+                </tr>
+              </tbody>
+              <tbody>
+                <tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse | pagination:vm.currentPage * vm.config.pagination.pageSize | limitTo: (vm.config.pagination.pageSize || vm.data.length) track by $index">
+                  <td ng-repeat="col in vm.columns">{{item[col.prop]}}</td>
+                  <td ng-if="vm.config.actions">
+                    <a href=""
+                      ng-repeat="action in vm.config.actions"
+                      ng-click="action.cb(item)"
+                      title="{{action.label}}">
+                      <i
+                        class="glyphicon glyphicon-{{action.icon}}"
+                        style="color: {{action.color}};"></i>
+                    </a>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <xos-pagination
+              ng-if="vm.config.pagination"
+              page-size="vm.config.pagination.pageSize"
+              total-elements="vm.data.length"
+              change="vm.goToPage">
+              </xos-pagination>
+          </div>
+          <div ng-show="vm.data.length == 0 || !vm.data">
+            <div class="alert alert-info">
+              No data to show.
             </div>
           </div>
-          <table ng-class="vm.classes" ng-show="vm.data.length > 0">
-            <thead>
-              <tr>
-                <th ng-repeat="col in vm.columns">
-                  {{col.label}}
-                  <span ng-if="vm.config.order">
-                    <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
-                      <i class="glyphicon glyphicon-chevron-up"></i>
-                    </a>
-                    <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
-                      <i class="glyphicon glyphicon-chevron-down"></i>
-                    </a>
-                  </span>
-                </th>
-                <th ng-if="vm.config.actions">Actions</th>
-              </tr>
-            </thead>
-            <tbody ng-if="vm.config.filter == 'field'">
-              <tr>
-                <td ng-repeat="col in vm.columns">
-                  <input
-                    class="form-control"
-                    placeholder="Type to search by {{col.label}}"
-                    type="text"
-                    ng-model="vm.query[col.prop]"/>
-                </td>
-                <td ng-if="vm.config.actions"></td>
-              </tr>
-            </tbody>
-            <tbody>
-              <tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse | pagination:vm.currentPage * vm.config.pagination.pageSize | limitTo: vm.config.pagination.pageSize track by $index">
-                <td ng-repeat="col in vm.columns">{{item[col.prop]}}</td>
-                <td ng-if="vm.config.actions">
-                  <a href=""
-                    ng-repeat="action in vm.config.actions"
-                    ng-click="action.cb(item)"
-                    title="{{action.label}}">
-                    <i
-                      class="glyphicon glyphicon-{{action.icon}}"
-                      style="color: {{action.color}};"></i>
-                  </a>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <xos-pagination
-            ng-if="vm.config.pagination"
-            page-size="vm.config.pagination.pageSize"
-            total-elements="vm.data.length"
-            change="vm.goToPage">
-            </xos-pagination>
         `,
         bindToController: true,
         controllerAs: 'vm',