diff --git a/views/ngXosLib/karma.conf.js b/views/ngXosLib/karma.conf.js
index e3c1cbb..b602d66 100644
--- a/views/ngXosLib/karma.conf.js
+++ b/views/ngXosLib/karma.conf.js
@@ -13,7 +13,7 @@
 
 var files = bowerComponents.concat([
   'api/**/*.js',
-  'xosHelpers/src/*.module.js',
+  'xosHelpers/src/**/*.module.js',
   'xosHelpers/src/**/*.js',
   'xosHelpers/spec/**/*.test.js'
 ]);
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js b/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js
new file mode 100644
index 0000000..0f7099b
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/ui_components/table/pagination.component.js
@@ -0,0 +1,88 @@
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 4/15/16.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('xos.uiComponents')
+  .directive('xosPagination', function(){
+    return {
+      restrict: 'E',
+      scope: {
+        pageSize: '=',
+        totalElements: '=',
+        change: '='
+      },
+      template: `
+        <div class="row">
+          <div class="col-xs-12 text-center">
+            <ul class="pagination">
+              <li
+                ng-click="vm.goToPage(vm.currentPage - 1)"
+                ng-class="{disabled: vm.currentPage == 0}">
+                <a href="" aria-label="Previous">
+                    <span aria-hidden="true">&laquo;</span>
+                </a>
+              </li>
+              <li ng-repeat="i in vm.pageList" ng-class="{active: i === vm.currentPage}">
+                <a href="" ng-click="vm.goToPage(i)">{{i + 1}}</a>
+              </li>
+              <li
+                ng-click="vm.goToPage(vm.currentPage + 1)"
+                ng-class="{disabled: vm.currentPage == vm.pages - 1}">
+                <a href="" aria-label="Next">
+                    <span aria-hidden="true">&raquo;</span>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      `,
+      bindToController: true,
+      controllerAs: 'vm',
+      controller: function($scope){
+        
+        this.currentPage = 0;
+
+        this.goToPage = (n) => {
+          if(n < 0 || n === this.pages){
+            return;
+          }
+          this.currentPage = n;
+          this.change(n);
+        }
+
+        this.createPages = (pages) => {
+          let arr = [];
+          for(var i = 0; i < pages; i++){
+            arr.push(i);
+          }
+          return arr;
+        }
+
+        // watch for data changes
+        $scope.$watch(() => this.totalElements, () => {
+          if(this.totalElements){
+            this.pages = Math.round(this.totalElements / this.pageSize);
+            this.pageList = this.createPages(this.pages);
+          }
+          // scope.getPages();
+        });
+      }
+    }
+  })
+  .filter('pagination', function(){
+    return function(input, start) {
+      if(!input || !angular.isArray(input)){
+        return input;
+      }
+      start = parseInt(start, 10);
+      return input.slice(start);
+    };
+  });
+})();
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 3a75464..f5c77ed 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/table/table.component.js
@@ -15,7 +15,7 @@
   * @description A table component
   **/
 
-  angular.module('xos.uiComponents.table', [])
+  angular.module('xos.uiComponents')
 
     /**
     * @ngdoc directive
@@ -186,7 +186,7 @@
               </tr>
             </tbody>
             <tbody>
-              <tr ng-repeat="item in vm.data | filter:vm.query | orderBy:vm.orderBy:vm.reverse">
+              <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=""
@@ -201,6 +201,12 @@
               </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',
@@ -218,7 +224,13 @@
           this.classes = this.config.classes || 'table table-striped table-bordered';
 
           if(this.config.actions){
-
+            // TODO validate action format
+          }
+          if(this.config.pagination){
+            this.currentPage = 0;
+            this.goToPage = (n) => {
+              this.currentPage = n;
+            };
           }
 
         }
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 fd08421..9cfab06 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/ui-components.module.js
@@ -17,6 +17,5 @@
   **/
 
   angular.module('xos.uiComponents', [
-    'xos.uiComponents.table'
   ])
 })();
diff --git a/views/ngXosViews/sampleView/src/js/main.js b/views/ngXosViews/sampleView/src/js/main.js
index 90374ab..e2e367d 100644
--- a/views/ngXosViews/sampleView/src/js/main.js
+++ b/views/ngXosViews/sampleView/src/js/main.js
@@ -53,13 +53,16 @@
           }
         ],
         filter: 'field',
-        order: true
+        order: true,
+        pagination: {
+          pageSize: 3
+        }
       };
 
       // retrieving user list
       Users.query().$promise
       .then((users) => {
-        this.users = users;
+        this.users = users.concat(users, 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 97cc0a0..45fab65 100644
--- a/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
+++ b/xos/core/xoslib/static/js/vendor/ngXosHelpers.js
@@ -13,11 +13,35 @@
 
   /**
   * @ngdoc overview
+  * @name xos.uiComponents
+  * @description A collection of UI components useful for Dashboard development
+  * @requires xos.uiComponents.table
+  **/
+
+  angular.module('xos.uiComponents', []);
+})();
+//# sourceMappingURL=../maps/ui_components/ui-components.module.js.map
+
+'use strict';
+
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 3/24/16.
+ */
+
+(function () {
+  'use strict';
+
+  /**
+  * @ngdoc overview
   * @name xos.uiComponents.table
   * @description A table component
   **/
 
-  angular.module('xos.uiComponents.table', [])
+  angular.module('xos.uiComponents')
 
   /**
   * @ngdoc directive
@@ -142,10 +166,11 @@
         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">\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        ',
+      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        ',
       bindToController: true,
       controllerAs: 'vm',
       controller: function controller() {
+        var _this = this;
 
         if (!this.config) {
           throw new Error('[xosTable] Please provide a configuration via the "config" attribute');
@@ -158,7 +183,15 @@
         this.columns = this.config.columns;
         this.classes = this.config.classes || 'table table-striped table-bordered';
 
-        if (this.config.actions) {}
+        if (this.config.actions) {
+          // TODO validate action format
+        }
+        if (this.config.pagination) {
+          this.currentPage = 0;
+          this.goToPage = function (n) {
+            _this.currentPage = n;
+          };
+        }
       }
     };
   });
@@ -167,6 +200,75 @@
 
 'use strict';
 
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 4/15/16.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('xos.uiComponents').directive('xosPagination', function () {
+    return {
+      restrict: 'E',
+      scope: {
+        pageSize: '=',
+        totalElements: '=',
+        change: '='
+      },
+      template: '\n        <div class="row">\n          <div class="col-xs-12 text-center">\n            <ul class="pagination">\n              <li\n                ng-click="vm.goToPage(vm.currentPage - 1)"\n                ng-class="{disabled: vm.currentPage == 0}">\n                <a href="" aria-label="Previous">\n                    <span aria-hidden="true">&laquo;</span>\n                </a>\n              </li>\n              <li ng-repeat="i in vm.pageList" ng-class="{active: i === vm.currentPage}">\n                <a href="" ng-click="vm.goToPage(i)">{{i + 1}}</a>\n              </li>\n              <li\n                ng-click="vm.goToPage(vm.currentPage + 1)"\n                ng-class="{disabled: vm.currentPage == vm.pages - 1}">\n                <a href="" aria-label="Next">\n                    <span aria-hidden="true">&raquo;</span>\n                </a>\n              </li>\n            </ul>\n          </div>\n        </div>\n      ',
+      bindToController: true,
+      controllerAs: 'vm',
+      controller: ["$scope", function controller($scope) {
+        var _this = this;
+
+        this.currentPage = 0;
+
+        this.goToPage = function (n) {
+          if (n < 0 || n === _this.pages) {
+            return;
+          }
+          _this.currentPage = n;
+          _this.change(n);
+        };
+
+        this.createPages = function (pages) {
+          var arr = [];
+          for (var i = 0; i < pages; i++) {
+            arr.push(i);
+          }
+          return arr;
+        };
+
+        // watch for data changes
+        $scope.$watch(function () {
+          return _this.totalElements;
+        }, function () {
+          if (_this.totalElements) {
+            _this.pages = Math.round(_this.totalElements / _this.pageSize);
+            _this.pageList = _this.createPages(_this.pages);
+          }
+          // scope.getPages();
+        });
+      }]
+    };
+  }).filter('pagination', function () {
+    return function (input, start) {
+      if (!input || !angular.isArray(input)) {
+        return input;
+      }
+      start = parseInt(start, 10);
+      return input.slice(start);
+    };
+  });
+})();
+//# sourceMappingURL=../../maps/ui_components/table/pagination.component.js.map
+
+'use strict';
+
 (function () {
   'use strict';
 
@@ -370,30 +472,6 @@
 
 'use strict';
 
-/**
- * © OpenCORD
- *
- * Visit http://guide.xosproject.org/devguide/addview/ for more information
- *
- * Created by teone on 3/24/16.
- */
-
-(function () {
-  'use strict';
-
-  /**
-  * @ngdoc overview
-  * @name xos.uiComponents
-  * @description A collection of UI components useful for Dashboard development
-  * @requires xos.uiComponents.table
-  **/
-
-  angular.module('xos.uiComponents', ['xos.uiComponents.table']);
-})();
-//# sourceMappingURL=../maps/ui_components/ui-components.module.js.map
-
-'use strict';
-
 (function () {
   'use strict';