diff --git a/views/ngXosLib/xosHelpers/spec/ui/table.test.js b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
index 0b7fffb..50a5d72 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/table.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/table.test.js
@@ -78,6 +78,19 @@
           expect(tr.length).toEqual(3);
         });
 
+        describe('when no data are provided', () => {
+          beforeEach(() => {
+            isolatedScope.data = [];
+            scope.$digest();
+          });
+          it('should render an alert', () => {
+            let alert = element[0].getElementsByClassName('alert');
+            let table = element[0].getElementsByTagName('table');
+            expect(alert.length).toEqual(1);
+            expect(table.length).toEqual(1);
+          });
+        });
+
         describe('when actions are passed', () => {
 
           let cb = jasmine.createSpy('callback')
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',
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
index 9cfab06..bd07908 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
@@ -13,7 +13,6 @@
   * @ngdoc overview
   * @name xos.uiComponents
   * @description A collection of UI components useful for Dashboard development
-  * @requires xos.uiComponents.table
   **/
 
   angular.module('xos.uiComponents', [
diff --git a/views/ngXosViews/sampleView/src/js/main.js b/views/ngXosViews/sampleView/src/js/main.js
index 222882b..798cb0e 100644
--- a/views/ngXosViews/sampleView/src/js/main.js
+++ b/views/ngXosViews/sampleView/src/js/main.js
@@ -54,15 +54,15 @@
         ],
         filter: 'field',
         order: true,
-        pagination: {
-          pageSize: 6
-        }
+        // pagination: {
+        //   pageSize: 6
+        // }
       };
 
       // retrieving user list
       Users.query().$promise
       .then((users) => {
-        this.users = users.concat(users, users, users);
+        this.users = users;
       })
       .catch((e) => {
         throw new Error(e);
diff --git a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
index ad4d783..3722b8a 100644
--- a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
+++ b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
@@ -15,7 +15,6 @@
   * @ngdoc overview
   * @name xos.uiComponents
   * @description A collection of UI components useful for Dashboard development
-  * @requires xos.uiComponents.table
   **/
 
   angular.module('xos.uiComponents', []);
@@ -35,17 +34,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.
@@ -76,14 +69,14 @@
   * @element ANY
   * @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: [
@@ -110,14 +103,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: [
@@ -157,7 +150,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 () {
     return {
@@ -166,7 +204,7 @@
         data: '=',
         config: '='
       },
-      template: '\n          <!-- <pre>{{vm.data | json}}</pre> -->\n          <div class="row" ng-if="vm.config.filter == \'fulltext\'">\n            <div class="col-xs-12">\n              <input\n                class="form-control"\n                placeholder="Type to search.."\n                type="text"\n                ng-model="vm.query"/>\n            </div>\n          </div>\n          <table ng-class="vm.classes" ng-show="vm.data.length > 0">\n            <thead>\n              <tr>\n                <th ng-repeat="col in vm.columns">\n                  {{col.label}}\n                  <span ng-if="vm.config.order">\n                    <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">\n                      <i class="glyphicon glyphicon-chevron-up"></i>\n                    </a>\n                    <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">\n                      <i class="glyphicon glyphicon-chevron-down"></i>\n                    </a>\n                  </span>\n                </th>\n                <th ng-if="vm.config.actions">Actions</th>\n              </tr>\n            </thead>\n            <tbody ng-if="vm.config.filter == \'field\'">\n              <tr>\n                <td ng-repeat="col in vm.columns">\n                  <input\n                    class="form-control"\n                    placeholder="Type to search by {{col.label}}"\n                    type="text"\n                    ng-model="vm.query[col.prop]"/>\n                </td>\n                <td ng-if="vm.config.actions"></td>\n              </tr>\n            </tbody>\n            <tbody>\n              <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">\n                <td ng-repeat="col in vm.columns">{{item[col.prop]}}</td>\n                <td ng-if="vm.config.actions">\n                  <a href=""\n                    ng-repeat="action in vm.config.actions"\n                    ng-click="action.cb(item)"\n                    title="{{action.label}}">\n                    <i\n                      class="glyphicon glyphicon-{{action.icon}}"\n                      style="color: {{action.color}};"></i>\n                  </a>\n                </td>\n              </tr>\n            </tbody>\n          </table>\n          <xos-pagination\n            ng-if="vm.config.pagination"\n            page-size="vm.config.pagination.pageSize"\n            total-elements="vm.data.length"\n            change="vm.goToPage">\n            </xos-pagination>\n        ',
+      template: '\n          <div ng-show="vm.data.length > 0">\n            <div class="row" ng-if="vm.config.filter == \'fulltext\'">\n              <div class="col-xs-12">\n                <input\n                  class="form-control"\n                  placeholder="Type to search.."\n                  type="text"\n                  ng-model="vm.query"/>\n              </div>\n            </div>\n            <table ng-class="vm.classes" ng-show="vm.data.length > 0">\n              <thead>\n                <tr>\n                  <th ng-repeat="col in vm.columns">\n                    {{col.label}}\n                    <span ng-if="vm.config.order">\n                      <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">\n                        <i class="glyphicon glyphicon-chevron-up"></i>\n                      </a>\n                      <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">\n                        <i class="glyphicon glyphicon-chevron-down"></i>\n                      </a>\n                    </span>\n                  </th>\n                  <th ng-if="vm.config.actions">Actions</th>\n                </tr>\n              </thead>\n              <tbody ng-if="vm.config.filter == \'field\'">\n                <tr>\n                  <td ng-repeat="col in vm.columns">\n                    <input\n                      class="form-control"\n                      placeholder="Type to search by {{col.label}}"\n                      type="text"\n                      ng-model="vm.query[col.prop]"/>\n                  </td>\n                  <td ng-if="vm.config.actions"></td>\n                </tr>\n              </tbody>\n              <tbody>\n                <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">\n                  <td ng-repeat="col in vm.columns">{{item[col.prop]}}</td>\n                  <td ng-if="vm.config.actions">\n                    <a href=""\n                      ng-repeat="action in vm.config.actions"\n                      ng-click="action.cb(item)"\n                      title="{{action.label}}">\n                      <i\n                        class="glyphicon glyphicon-{{action.icon}}"\n                        style="color: {{action.color}};"></i>\n                    </a>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n            <xos-pagination\n              ng-if="vm.config.pagination"\n              page-size="vm.config.pagination.pageSize"\n              total-elements="vm.data.length"\n              change="vm.goToPage">\n              </xos-pagination>\n          </div>\n          <div ng-show="vm.data.length == 0 || !vm.data">\n            <div class="alert alert-info">\n              No data to show.\n            </div>\n          </div>\n        ',
       bindToController: true,
       controllerAs: 'vm',
       controller: function controller() {
@@ -211,7 +249,43 @@
 (function () {
   'use strict';
 
-  angular.module('xos.uiComponents').directive('xosPagination', function () {
+  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',
       scope: {