diff --git a/dist/xosUiComponents.js b/dist/xosUiComponents.js
index eb1e43a..985ee85 100644
--- a/dist/xosUiComponents.js
+++ b/dist/xosUiComponents.js
@@ -30,14 +30,228 @@
 })();
 'use strict';
 
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
 /**
  * © OpenCORD
  *
  * Visit http://guide.xosproject.org/devguide/addview/ for more information
  *
- * Created by teone on 3/24/16.
+ * Created by teone on 5/25/16.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('xos.uiComponents')
+  /**
+    * @ngdoc directive
+    * @name xos.uiComponents.directive:xosField
+    * @restrict E
+    * @description The xos-field directive.
+    * This component decide, give a field wich kind of input it need to print.
+    * @param {string} name The field name
+    * @param {object} field The field configuration:
+    * ```
+    * {
+    *   label: 'Label',
+    *   type: 'number', //typeof field
+    *   validators: {} // see xosForm for more details
+    * }
+    * ```
+    * @param {mixed} ngModel The field value
+    *
+    * @example
+    
+    # Basic Example
+    
+      <example module="sampleField1">
+        <file name="script.js">
+          angular.module('sampleField1', ['xos.uiComponents'])
+          .factory('_', function($window){
+            return $window._;
+          })
+          .controller('SampleCtrl', function(){
+            this.name = 'input-name';
+            this.field = {label: 'My String Value:', type: 'string'};
+            this.model = 'my string';
+          });
+        </file>
+        <file name="index.html">
+          <div ng-controller="SampleCtrl as vm">
+            <xos-field ng-model="vm.model" name="vm.name" field="vm.field"></xos-field>
+          </div>
+        </file>
+      </example>
+      
+      # Possible Values
+       <example module="sampleField2">
+        <file name="script.js">
+          angular.module('sampleField2', ['xos.uiComponents'])
+          .factory('_', function($window){
+            return $window._;
+          })
+          .controller('SampleCtrl', function(){
+            this.field1 = {
+              name: 'number-field',
+              field: {label: 'My Number Value:', type: 'number'},
+              model: 2
+            };
+             this.field2 = {
+              name: 'date-field',
+              field: {label: 'My Date Value:', type: 'date'},
+              model: new Date()
+            };
+             this.field3 = {
+              name: 'boolean-field',
+              field: {label: 'My Boolean Value:', type: 'boolean'},
+              model: true
+            };
+             this.field4 = {
+              name: 'email-field',
+              field: {label: 'My Email Value:', type: 'email'},
+              model: 'sample@domain.us'
+            };
+          });
+        </file>
+        <file name="index.html">
+          <div ng-controller="SampleCtrl as vm">
+            <xos-field ng-model="vm.field1.model" name="vm.field1.name" field="vm.field1.field"></xos-field>
+            <xos-field ng-model="vm.field2.model" name="vm.field2.name" field="vm.field2.field"></xos-field>
+            <xos-field ng-model="vm.field3.model" name="vm.field3.name" field="vm.field3.field"></xos-field>
+            <xos-field ng-model="vm.field4.model" name="vm.field4.name" field="vm.field4.field"></xos-field>
+          </div>
+        </file>
+      </example>
+       # This element is recursive
+       <example module="sampleField3">
+        <file name="script.js">
+          angular.module('sampleField3', ['xos.uiComponents'])
+          .factory('_', function($window){
+            return $window._;
+          })
+          .controller('SampleCtrl', function(){
+            this.name1 = 'input-name';
+            this.field1 = {label: 'My Object Field:', type: 'object'};
+            this.model1 = {
+              name: 'Jhon',
+              age: '25',
+              email: 'jhon@thewall.ru',
+              active: true
+            };
+             this.name2 = 'another-name';
+            this.field2 = {
+              label: 'Empty Object Field',
+              type: 'object',
+              properties: {
+                foo: {
+                  label: 'FooLabel:',
+                  type: 'string',
+                  validators: {
+                    required: true
+                  }
+                },
+                bar: {
+                  type: 'number'
+                }
+              }
+            }
+          });
+        </file>
+        <file name="index.html">
+          <div ng-controller="SampleCtrl as vm">
+            <h4>Autogenerated object field</h4>
+            <xos-field ng-model="vm.model1" name="vm.name1" field="vm.field1"></xos-field>
+             <h4>Configured object field</h4>
+            <xos-field ng-model="vm.model2" name="vm.name2" field="vm.field2"></xos-field>
+          </div>
+        </file>
+      </example>
+    */
+  .component('xosField', {
+    restrict: 'E',
+    bindings: {
+      name: '=',
+      field: '=',
+      ngModel: '='
+    },
+    template: '\n      <label ng-if="vm.field.type !== \'object\'">{{vm.field.label}}</label>\n          <input\n            xos-custom-validator custom-validator="vm.field.validators.custom || null"\n            ng-if="vm.field.type !== \'boolean\' && vm.field.type !== \'object\' && vm.field.type !== \'select\'"\n            type="{{vm.field.type}}"\n            name="{{vm.name}}"\n            class="form-control"\n            ng-model="vm.ngModel"\n            ng-minlength="vm.field.validators.minlength || 0"\n            ng-maxlength="vm.field.validators.maxlength || 2000"\n            ng-required="vm.field.validators.required || false" />\n            <select class="form-control" ng-if ="vm.field.type === \'select\'"\n              name = "{{vm.name}}"\n              ng-options="item.id as item.label for item in vm.field.options"\n              ng-model="vm.ngModel"\n              ng-required="vm.field.validators.required || false">\n              </select>\n          <span class="boolean-field" ng-if="vm.field.type === \'boolean\'">\n            <a href="#"\n              class="btn btn-success"\n              ng-show="vm.ngModel"\n              ng-click="vm.ngModel = false">\n              <i class="glyphicon glyphicon-ok"></i>\n            </a>\n            <a href="#"\n              class="btn btn-danger"\n              ng-show="!vm.ngModel"\n              ng-click="vm.ngModel = true">\n              <i class="glyphicon glyphicon-remove"></i>\n            </a>\n          </span>\n          <div\n            class="panel panel-default object-field"\n            ng-if="vm.field.type == \'object\' && (!vm.isEmptyObject(vm.ngModel) || !vm.isEmptyObject(vm.field.properties))"\n            >\n            <div class="panel-heading">{{vm.field.label}}</div>\n            <div class="panel-body">\n              <div ng-if="!vm.field.properties" ng-repeat="(k, v) in vm.ngModel">\n                <xos-field\n                  name="k"\n                  field="{label: vm.formatLabel(k), type: vm.getType(v)}"\n                  ng-model="v">\n                </xos-field>\n              </div>\n              <div ng-if="vm.field.properties" ng-repeat="(k, v) in vm.field.properties">\n                <xos-field\n                  name="k"\n                  field="{\n                    label: v.label || vm.formatLabel(k),\n                    type: v.type,\n                    validators: v.validators\n                  }"\n                  ng-model="vm.ngModel[k]">\n                </xos-field>\n              </div>\n            </div>\n          </div>\n    ',
+    bindToController: true,
+    controllerAs: 'vm',
+    // the compile cicle is needed to support recursion
+    //compile: function (element) {
+    //  return RecursionHelper.compile(element);
+    //},
+    controller: ["$attrs", "XosFormHelpers", "LabelFormatter", function controller($attrs, XosFormHelpers, LabelFormatter) {
+
+      if (!this.name) {
+        throw new Error('[xosField] Please provide a field name');
+      }
+      if (!this.field) {
+        throw new Error('[xosField] Please provide a field definition');
+      }
+      if (!this.field.type) {
+        throw new Error('[xosField] Please provide a type in the field definition');
+      }
+      if (!$attrs.ngModel) {
+        throw new Error('[xosField] Please provide an ng-model');
+      }
+      this.getType = XosFormHelpers._getFieldFormat;
+      this.formatLabel = LabelFormatter.format;
+
+      this.isEmptyObject = function (o) {
+        return o ? Object.keys(o).length === 0 : true;
+      };
+    }]
+  })
+
+  /**
+   * @ngdoc directive
+   * @name xos.uiComponents.directive:xosCustomValidator
+   * @restrict A
+   * @description The xosCustomValidator directive.
+   * This component apply a custom validation function
+   * @param {function} customValidator The function that execute the validation.
+   *
+   * You should do your validation here and return true | false,
+   * or alternatively you can return an array [errorName, true|false]
+   */
+  .directive('xosCustomValidator', function () {
+    return {
+      restrict: 'A',
+      scope: {
+        fn: '=customValidator'
+      },
+      require: 'ngModel',
+      link: function link(scope, element, attr, ctrl) {
+        if (!angular.isFunction(scope.fn)) {
+          return;
+        }
+
+        function customValidatorWrapper(ngModelValue) {
+          var valid = scope.fn(ngModelValue);
+          if (angular.isArray(valid)) {
+            // ES6 spread rocks over fn.apply()
+            ctrl.$setValidity.apply(ctrl, _toConsumableArray(valid));
+          } else {
+            ctrl.$setValidity('custom', valid);
+          }
+          return ngModelValue;
+        }
+
+        ctrl.$parsers.push(customValidatorWrapper);
+      }
+    };
+  });
+})();
+'use strict';
+
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 4/15/16.
  */
 
 (function () {
@@ -46,214 +260,182 @@
   angular.module('xos.uiComponents')
 
   /**
-  * @ngdoc directive
-  * @name xos.uiComponents.directive:xosSmartTable
-  * @link xos.uiComponents.directive:xosTable xosTable
-  * @link xos.uiComponents.directive:xosForm xosForm
-  * @restrict E
-  * @description The xos-table directive
-  * @param {Object} config The configuration for the component,
-  * it is composed by the name of an angular [$resource](https://docs.angularjs.org/api/ngResource/service/$resource)
-  * and an array of fields that shouldn't be printed.
-  * ```
-  * {
-      resource: 'Users',
-      hiddenFields: []
-    }
-  * ```
-  * @scope
+    * @ngdoc directive
+    * @name xos.uiComponents.directive:xosValidation
+    * @restrict E
+    * @description The xos-validation directive
+    * @param {Object} errors The error object
+    * @element ANY
+    * @scope
   * @example
-   <example module="sampleSmartTable">
+  <example module="sampleValidation">
     <file name="index.html">
       <div ng-controller="SampleCtrl as vm">
-        <xos-smart-table config="vm.config"></xos-smart-table>
+        <div class="row">
+          <div class="col-xs-12">
+            <label>Set an error type:</label>
+          </div>
+          <div class="col-xs-2">
+            <a class="btn"
+              ng-click="vm.field.$error.required = !vm.field.$error.required"
+              ng-class="{'btn-default': !vm.field.$error.required, 'btn-success': vm.field.$error.required}">
+              Required
+            </a>
+          </div>
+          <div class="col-xs-2">
+            <a class="btn"
+              ng-click="vm.field.$error.email = !vm.field.$error.email"
+              ng-class="{'btn-default': !vm.field.$error.email, 'btn-success': vm.field.$error.email}">
+              Email
+            </a>
+          </div>
+          <div class="col-xs-2">
+            <a class="btn"
+              ng-click="vm.field.$error.minlength = !vm.field.$error.minlength"
+              ng-class="{'btn-default': !vm.field.$error.minlength, 'btn-success': vm.field.$error.minlength}">
+              Min Length
+            </a>
+          </div>
+          <div class="col-xs-2">
+            <a class="btn"
+              ng-click="vm.field.$error.maxlength = !vm.field.$error.maxlength"
+              ng-class="{'btn-default': !vm.field.$error.maxlength, 'btn-success': vm.field.$error.maxlength}">
+              Max Length
+            </a>
+          </div>
+        </div>
+        <xos-validation field ="vm.field" form = "vm.form"></xos-validation>
       </div>
     </file>
     <file name="script.js">
-      angular.module('sampleSmartTable', ['xos.uiComponents', 'ngResource', 'ngMockE2E'])
-      // This is only for documentation purpose
-      .run(function($httpBackend, _){
-        let datas = [{id: 1, name: 'Jhon', surname: 'Doe'}];
-        let count = 1;
-         let paramsUrl = new RegExp(/\/test\/(.+)/);
-         $httpBackend.whenDELETE(paramsUrl, undefined, ['id']).respond((method, url, data, headers, params) => {
-          data = angular.fromJson(data);
-          let id = url.match(paramsUrl)[1];
-          _.remove(datas, (d) => {
-            return d.id === parseInt(id);
-          })
-          return [204];
-        });
-         $httpBackend.whenGET('/test').respond(200, datas)
-        $httpBackend.whenPOST('/test').respond((method, url, data) => {
-          data = angular.fromJson(data);
-          data.id = ++count;
-          datas.push(data);
-          return [201, data, {}];
-        });
-      })
-      .factory('_', function($window){
-        return $window._;
-      })
-      .service('SampleResource', function($resource){
-        return $resource('/test/:id', {id: '@id'});
-      })
-      // End of documentation purpose, example start
+      angular.module('sampleValidation', ['xos.uiComponents'])
       .controller('SampleCtrl', function(){
-        this.config = {
-          resource: 'SampleResource'
+        this.field = {
+          $error: {}
         };
+        this.form= {
+        $submitted:true
+        }
       });
     </file>
   </example>
-  */
+    */
 
-  .component('xosSmartTable', {
+  .component('xosValidation', {
     restrict: 'E',
     bindings: {
-      config: '='
+      field: '=',
+      form: '='
     },
-    template: '\n        <div class="row" ng-show="vm.data.length > 0">\n          <div class="col-xs-12 text-right">\n            <a href="" class="btn btn-success" ng-click="vm.createItem()">\n              Add\n            </a>\n          </div>\n        </div>\n        <div class="row">\n          <div class="col-xs-12 table-responsive">\n            <xos-table config="vm.tableConfig" data="vm.data"></xos-table>\n          </div>\n        </div>\n        <div class="panel panel-default" ng-show="vm.detailedItem">\n          <div class="panel-heading">\n            <div class="row">\n              <div class="col-xs-11">\n                <h3 class="panel-title" ng-show="vm.detailedItem.id">Update {{vm.config.resource}} {{vm.detailedItem.id}}</h3>\n                <h3 class="panel-title" ng-show="!vm.detailedItem.id">Create {{vm.config.resource}} item</h3>\n              </div>\n              <div class="col-xs-1">\n                <a href="" ng-click="vm.cleanForm()">\n                  <i class="glyphicon glyphicon-remove pull-right"></i>\n                </a>\n              </div>\n            </div>\n          </div>\n          <div class="panel-body">\n            <xos-form config="vm.formConfig" ng-model="vm.detailedItem"></xos-form>\n          </div>\n        </div>\n        <xos-alert config="{type: \'success\', closeBtn: true}" show="vm.responseMsg">{{vm.responseMsg}}</xos-alert>\n        <xos-alert config="{type: \'danger\', closeBtn: true}" show="vm.responseErr">{{vm.responseErr}}</xos-alert>\n      ',
+    template: '\n      <div ng-cloak>\n        <xos-alert config="vm.config" show="vm.field.$error.required !== undefined && vm.field.$error.required !== false  && (vm.field.$touched || vm.form.$submitted)">\n          Field required\n        </xos-alert>\n        <xos-alert config="vm.config" show="vm.field.$error.email !== undefined && vm.field.$error.email !== false && (vm.field.$touched || vm.form.$submitted)">\n          This is not a valid email\n        </xos-alert>\n        <xos-alert config="vm.config" show="vm.field.$error.minlength !== undefined && vm.field.$error.minlength !== false && (vm.field.$touched || vm.form.$submitted)">\n          Too short\n        </xos-alert>\n        <xos-alert config="vm.config" show="vm.field.$error.maxlength !== undefined && vm.field.$error.maxlength !== false && (vm.field.$touched || vm.form.$submitted)">\n          Too long\n        </xos-alert>\n        <xos-alert config="vm.config" show="vm.field.$error.custom !== undefined && vm.field.$error.custom !== false && (vm.field.$touched || vm.form.$submitted)">\n          Field invalid\n        </xos-alert>\n      </div>\n    ',
+    transclude: true,
     bindToController: true,
     controllerAs: 'vm',
-    controller: ["$injector", "LabelFormatter", "_", "XosFormHelpers", function controller($injector, LabelFormatter, _, XosFormHelpers) {
+    controller: function controller() {
+      this.config = {
+        type: 'danger'
+      };
+    }
+  });
+})();
+'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')
+
+  /**
+    * @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>
+  **/
+
+  .component('xosPagination', {
+    restrict: 'E',
+    bindings: {
+      pageSize: '=',
+      totalElements: '=',
+      change: '='
+    },
+    template: '\n      <div class="row" ng-if="vm.pageList.length > 1">\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;
 
-      // TODO
-      // - Validate the config (what if resource does not exist?)
+      this.currentPage = 0;
 
-      // NOTE
-      // Corner case
-      // - if response is empty, how can we generate a form ?
-
-      this.responseMsg = false;
-      this.responseErr = false;
-
-      this.tableConfig = {
-        columns: [],
-        actions: [{
-          label: 'delete',
-          icon: 'remove',
-          cb: function cb(item) {
-            _this.Resource.delete({ id: item.id }).$promise.then(function () {
-              _.remove(_this.data, function (d) {
-                return d.id === item.id;
-              });
-              _this.responseMsg = _this.config.resource + ' with id ' + item.id + ' successfully deleted';
-            }).catch(function (err) {
-              _this.responseErr = err.data.detail || 'Error while deleting ' + _this.config.resource + ' with id ' + item.id;
-            });
-          },
-          color: 'red'
-        }, {
-          label: 'details',
-          icon: 'search',
-          cb: function cb(item) {
-            _this.detailedItem = item;
-          }
-        }],
-        classes: 'table table-striped table-bordered table-responsive',
-        filter: 'field',
-        order: true,
-        pagination: {
-          pageSize: 10
+      this.goToPage = function (n) {
+        if (n < 0 || n === _this.pages) {
+          return;
         }
+        _this.currentPage = n;
+        _this.change(n);
       };
 
-      this.formConfig = {
-        exclude: this.config.hiddenFields,
-        fields: {},
-        formName: this.config.resource + 'Form',
-        actions: [{
-          label: 'Save',
-          icon: 'ok',
-          cb: function cb(item) {
-            var p = void 0;
-            var isNew = true;
-
-            if (item.id) {
-              p = item.$update();
-              isNew = false;
-            } else {
-              p = item.$save();
-            }
-
-            p.then(function (res) {
-              if (isNew) {
-                _this.data.push(angular.copy(res));
-              }
-              delete _this.detailedItem;
-              _this.responseMsg = _this.config.resource + ' with id ' + item.id + ' successfully saved';
-            }).catch(function (err) {
-              _this.responseErr = err.data.detail || 'Error while saving ' + _this.config.resource + ' with id ' + item.id;
-            });
-          },
-          class: 'success'
-        }]
+      this.createPages = function (pages) {
+        var arr = [];
+        for (var i = 0; i < pages; i++) {
+          arr.push(i);
+        }
+        return arr;
       };
 
-      this.cleanForm = function () {
-        delete _this.detailedItem;
-      };
-
-      this.createItem = function () {
-        _this.detailedItem = new _this.Resource();
-      };
-
-      this.Resource = $injector.get(this.config.resource);
-
-      var getData = function getData() {
-        _this.Resource.query().$promise.then(function (res) {
-
-          if (!res[0]) {
-            _this.data = res;
-            return;
-          }
-
-          var item = res[0];
-          var props = Object.keys(item);
-
-          _.remove(props, function (p) {
-            return p === 'id' || p === 'validators';
-          });
-
-          // TODO move out cb,  non sense triggering a lot of times
-          if (angular.isArray(_this.config.hiddenFields)) {
-            props = _.difference(props, _this.config.hiddenFields);
-          }
-
-          var labels = props.map(function (p) {
-            return LabelFormatter.format(p);
-          });
-
-          props.forEach(function (p, i) {
-            var fieldConfig = {
-              label: labels[i],
-              prop: p
-            };
-
-            if (angular.isString(item[p]) && typeof item[p] !== 'undefined') {
-              fieldConfig.type = _typeof(item[p]);
-            }
-
-            _this.tableConfig.columns.push(fieldConfig);
-          });
-
-          // build form structure
-          // TODO move in a pure function for testing purposes
-          props.forEach(function (p, i) {
-            _this.formConfig.fields[p] = {
-              label: LabelFormatter.format(labels[i]).replace(':', ''),
-              type: XosFormHelpers._getFieldFormat(item[p])
-            };
-          });
-
-          _this.data = res;
-        });
-      };
-
-      getData();
+      // watch for data changes
+      $scope.$watch(function () {
+        return _this.totalElements;
+      }, function () {
+        if (_this.totalElements) {
+          _this.pages = Math.ceil(_this.totalElements / _this.pageSize);
+          _this.pageList = _this.createPages(_this.pages);
+        }
+      });
     }]
+  }).filter('pagination', function () {
+    return function (input, start) {
+      if (!input || !angular.isArray(input)) {
+        return input;
+      }
+      start = parseInt(start, 10);
+      return input.slice(start);
+    };
   });
 })();
 'use strict';
@@ -508,100 +690,6 @@
  *
  * Visit http://guide.xosproject.org/devguide/addview/ for more information
  *
- * Created by teone on 4/15/16.
- */
-
-(function () {
-  'use strict';
-
-  angular.module('xos.uiComponents')
-
-  /**
-    * @ngdoc directive
-    * @name xos.uiComponents.directive:xosValidation
-    * @restrict E
-    * @description The xos-validation directive
-    * @param {Object} errors The error object
-    * @element ANY
-    * @scope
-  * @example
-  <example module="sampleValidation">
-    <file name="index.html">
-      <div ng-controller="SampleCtrl as vm">
-        <div class="row">
-          <div class="col-xs-12">
-            <label>Set an error type:</label>
-          </div>
-          <div class="col-xs-2">
-            <a class="btn"
-              ng-click="vm.field.$error.required = !vm.field.$error.required"
-              ng-class="{'btn-default': !vm.field.$error.required, 'btn-success': vm.field.$error.required}">
-              Required
-            </a>
-          </div>
-          <div class="col-xs-2">
-            <a class="btn"
-              ng-click="vm.field.$error.email = !vm.field.$error.email"
-              ng-class="{'btn-default': !vm.field.$error.email, 'btn-success': vm.field.$error.email}">
-              Email
-            </a>
-          </div>
-          <div class="col-xs-2">
-            <a class="btn"
-              ng-click="vm.field.$error.minlength = !vm.field.$error.minlength"
-              ng-class="{'btn-default': !vm.field.$error.minlength, 'btn-success': vm.field.$error.minlength}">
-              Min Length
-            </a>
-          </div>
-          <div class="col-xs-2">
-            <a class="btn"
-              ng-click="vm.field.$error.maxlength = !vm.field.$error.maxlength"
-              ng-class="{'btn-default': !vm.field.$error.maxlength, 'btn-success': vm.field.$error.maxlength}">
-              Max Length
-            </a>
-          </div>
-        </div>
-        <xos-validation field ="vm.field" form = "vm.form"></xos-validation>
-      </div>
-    </file>
-    <file name="script.js">
-      angular.module('sampleValidation', ['xos.uiComponents'])
-      .controller('SampleCtrl', function(){
-        this.field = {
-          $error: {}
-        };
-        this.form= {
-        $submitted:true
-        }
-      });
-    </file>
-  </example>
-    */
-
-  .component('xosValidation', {
-    restrict: 'E',
-    bindings: {
-      field: '=',
-      form: '='
-    },
-    template: '\n      <div ng-cloak>\n        <xos-alert config="vm.config" show="vm.field.$error.required !== undefined && vm.field.$error.required !== false  && (vm.field.$touched || vm.form.$submitted)">\n          Field required\n        </xos-alert>\n        <xos-alert config="vm.config" show="vm.field.$error.email !== undefined && vm.field.$error.email !== false && (vm.field.$touched || vm.form.$submitted)">\n          This is not a valid email\n        </xos-alert>\n        <xos-alert config="vm.config" show="vm.field.$error.minlength !== undefined && vm.field.$error.minlength !== false && (vm.field.$touched || vm.form.$submitted)">\n          Too short\n        </xos-alert>\n        <xos-alert config="vm.config" show="vm.field.$error.maxlength !== undefined && vm.field.$error.maxlength !== false && (vm.field.$touched || vm.form.$submitted)">\n          Too long\n        </xos-alert>\n        <xos-alert config="vm.config" show="vm.field.$error.custom !== undefined && vm.field.$error.custom !== false && (vm.field.$touched || vm.form.$submitted)">\n          Field invalid\n        </xos-alert>\n      </div>\n    ',
-    transclude: true,
-    bindToController: true,
-    controllerAs: 'vm',
-    controller: function controller() {
-      this.config = {
-        type: 'danger'
-      };
-    }
-  });
-})();
-'use strict';
-
-/**
- * © OpenCORD
- *
- * Visit http://guide.xosproject.org/devguide/addview/ for more information
- *
  * Created by teone on 3/24/16.
  */
 
@@ -1032,106 +1120,6 @@
  *
  * Visit http://guide.xosproject.org/devguide/addview/ for more information
  *
- * Created by teone on 4/15/16.
- */
-
-(function () {
-  '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>
-  **/
-
-  .component('xosPagination', {
-    restrict: 'E',
-    bindings: {
-      pageSize: '=',
-      totalElements: '=',
-      change: '='
-    },
-    template: '\n      <div class="row" ng-if="vm.pageList.length > 1">\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.ceil(_this.totalElements / _this.pageSize);
-          _this.pageList = _this.createPages(_this.pages);
-        }
-      });
-    }]
-  }).filter('pagination', function () {
-    return function (input, start) {
-      if (!input || !angular.isArray(input)) {
-        return input;
-      }
-      start = parseInt(start, 10);
-      return input.slice(start);
-    };
-  });
-})();
-'use strict';
-
-/**
- * © OpenCORD
- *
- * Visit http://guide.xosproject.org/devguide/addview/ for more information
- *
  * Created by teone on 4/18/16.
  */
 
@@ -1384,222 +1372,6 @@
 })();
 'use strict';
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-/**
- * © OpenCORD
- *
- * Visit http://guide.xosproject.org/devguide/addview/ for more information
- *
- * Created by teone on 5/25/16.
- */
-
-(function () {
-  'use strict';
-
-  angular.module('xos.uiComponents')
-  /**
-    * @ngdoc directive
-    * @name xos.uiComponents.directive:xosField
-    * @restrict E
-    * @description The xos-field directive.
-    * This component decide, give a field wich kind of input it need to print.
-    * @param {string} name The field name
-    * @param {object} field The field configuration:
-    * ```
-    * {
-    *   label: 'Label',
-    *   type: 'number', //typeof field
-    *   validators: {} // see xosForm for more details
-    * }
-    * ```
-    * @param {mixed} ngModel The field value
-    *
-    * @example
-    
-    # Basic Example
-    
-      <example module="sampleField1">
-        <file name="script.js">
-          angular.module('sampleField1', ['xos.uiComponents'])
-          .factory('_', function($window){
-            return $window._;
-          })
-          .controller('SampleCtrl', function(){
-            this.name = 'input-name';
-            this.field = {label: 'My String Value:', type: 'string'};
-            this.model = 'my string';
-          });
-        </file>
-        <file name="index.html">
-          <div ng-controller="SampleCtrl as vm">
-            <xos-field ng-model="vm.model" name="vm.name" field="vm.field"></xos-field>
-          </div>
-        </file>
-      </example>
-      
-      # Possible Values
-       <example module="sampleField2">
-        <file name="script.js">
-          angular.module('sampleField2', ['xos.uiComponents'])
-          .factory('_', function($window){
-            return $window._;
-          })
-          .controller('SampleCtrl', function(){
-            this.field1 = {
-              name: 'number-field',
-              field: {label: 'My Number Value:', type: 'number'},
-              model: 2
-            };
-             this.field2 = {
-              name: 'date-field',
-              field: {label: 'My Date Value:', type: 'date'},
-              model: new Date()
-            };
-             this.field3 = {
-              name: 'boolean-field',
-              field: {label: 'My Boolean Value:', type: 'boolean'},
-              model: true
-            };
-             this.field4 = {
-              name: 'email-field',
-              field: {label: 'My Email Value:', type: 'email'},
-              model: 'sample@domain.us'
-            };
-          });
-        </file>
-        <file name="index.html">
-          <div ng-controller="SampleCtrl as vm">
-            <xos-field ng-model="vm.field1.model" name="vm.field1.name" field="vm.field1.field"></xos-field>
-            <xos-field ng-model="vm.field2.model" name="vm.field2.name" field="vm.field2.field"></xos-field>
-            <xos-field ng-model="vm.field3.model" name="vm.field3.name" field="vm.field3.field"></xos-field>
-            <xos-field ng-model="vm.field4.model" name="vm.field4.name" field="vm.field4.field"></xos-field>
-          </div>
-        </file>
-      </example>
-       # This element is recursive
-       <example module="sampleField3">
-        <file name="script.js">
-          angular.module('sampleField3', ['xos.uiComponents'])
-          .factory('_', function($window){
-            return $window._;
-          })
-          .controller('SampleCtrl', function(){
-            this.name1 = 'input-name';
-            this.field1 = {label: 'My Object Field:', type: 'object'};
-            this.model1 = {
-              name: 'Jhon',
-              age: '25',
-              email: 'jhon@thewall.ru',
-              active: true
-            };
-             this.name2 = 'another-name';
-            this.field2 = {
-              label: 'Empty Object Field',
-              type: 'object',
-              properties: {
-                foo: {
-                  label: 'FooLabel:',
-                  type: 'string',
-                  validators: {
-                    required: true
-                  }
-                },
-                bar: {
-                  type: 'number'
-                }
-              }
-            }
-          });
-        </file>
-        <file name="index.html">
-          <div ng-controller="SampleCtrl as vm">
-            <h4>Autogenerated object field</h4>
-            <xos-field ng-model="vm.model1" name="vm.name1" field="vm.field1"></xos-field>
-             <h4>Configured object field</h4>
-            <xos-field ng-model="vm.model2" name="vm.name2" field="vm.field2"></xos-field>
-          </div>
-        </file>
-      </example>
-    */
-  .component('xosField', {
-    restrict: 'E',
-    bindings: {
-      name: '=',
-      field: '=',
-      ngModel: '='
-    },
-    template: '\n      <label ng-if="vm.field.type !== \'object\'">{{vm.field.label}}</label>\n          <input\n            xos-custom-validator custom-validator="vm.field.validators.custom || null"\n            ng-if="vm.field.type !== \'boolean\' && vm.field.type !== \'object\' && vm.field.type !== \'select\'"\n            type="{{vm.field.type}}"\n            name="{{vm.name}}"\n            class="form-control"\n            ng-model="vm.ngModel"\n            ng-minlength="vm.field.validators.minlength || 0"\n            ng-maxlength="vm.field.validators.maxlength || 2000"\n            ng-required="vm.field.validators.required || false" />\n            <select class="form-control" ng-if ="vm.field.type === \'select\'"\n              name = "{{vm.name}}"\n              ng-options="item.id as item.label for item in vm.field.options"\n              ng-model="vm.ngModel"\n              ng-required="vm.field.validators.required || false">\n              </select>\n          <span class="boolean-field" ng-if="vm.field.type === \'boolean\'">\n            <a href="#"\n              class="btn btn-success"\n              ng-show="vm.ngModel"\n              ng-click="vm.ngModel = false">\n              <i class="glyphicon glyphicon-ok"></i>\n            </a>\n            <a href="#"\n              class="btn btn-danger"\n              ng-show="!vm.ngModel"\n              ng-click="vm.ngModel = true">\n              <i class="glyphicon glyphicon-remove"></i>\n            </a>\n          </span>\n          <div\n            class="panel panel-default object-field"\n            ng-if="vm.field.type == \'object\' && (!vm.isEmptyObject(vm.ngModel) || !vm.isEmptyObject(vm.field.properties))"\n            >\n            <div class="panel-heading">{{vm.field.label}}</div>\n            <div class="panel-body">\n              <div ng-if="!vm.field.properties" ng-repeat="(k, v) in vm.ngModel">\n                <xos-field\n                  name="k"\n                  field="{label: vm.formatLabel(k), type: vm.getType(v)}"\n                  ng-model="v">\n                </xos-field>\n              </div>\n              <div ng-if="vm.field.properties" ng-repeat="(k, v) in vm.field.properties">\n                <xos-field\n                  name="k"\n                  field="{\n                    label: v.label || vm.formatLabel(k),\n                    type: v.type,\n                    validators: v.validators\n                  }"\n                  ng-model="vm.ngModel[k]">\n                </xos-field>\n              </div>\n            </div>\n          </div>\n    ',
-    bindToController: true,
-    controllerAs: 'vm',
-    // the compile cicle is needed to support recursion
-    //compile: function (element) {
-    //  return RecursionHelper.compile(element);
-    //},
-    controller: ["$attrs", "XosFormHelpers", "LabelFormatter", function controller($attrs, XosFormHelpers, LabelFormatter) {
-
-      if (!this.name) {
-        throw new Error('[xosField] Please provide a field name');
-      }
-      if (!this.field) {
-        throw new Error('[xosField] Please provide a field definition');
-      }
-      if (!this.field.type) {
-        throw new Error('[xosField] Please provide a type in the field definition');
-      }
-      if (!$attrs.ngModel) {
-        throw new Error('[xosField] Please provide an ng-model');
-      }
-      this.getType = XosFormHelpers._getFieldFormat;
-      this.formatLabel = LabelFormatter.format;
-
-      this.isEmptyObject = function (o) {
-        return o ? Object.keys(o).length === 0 : true;
-      };
-    }]
-  })
-
-  /**
-   * @ngdoc directive
-   * @name xos.uiComponents.directive:xosCustomValidator
-   * @restrict A
-   * @description The xosCustomValidator directive.
-   * This component apply a custom validation function
-   * @param {function} customValidator The function that execute the validation.
-   *
-   * You should do your validation here and return true | false,
-   * or alternatively you can return an array [errorName, true|false]
-   */
-  .directive('xosCustomValidator', function () {
-    return {
-      restrict: 'A',
-      scope: {
-        fn: '=customValidator'
-      },
-      require: 'ngModel',
-      link: function link(scope, element, attr, ctrl) {
-        if (!angular.isFunction(scope.fn)) {
-          return;
-        }
-
-        function customValidatorWrapper(ngModelValue) {
-          var valid = scope.fn(ngModelValue);
-          if (angular.isArray(valid)) {
-            // ES6 spread rocks over fn.apply()
-            ctrl.$setValidity.apply(ctrl, _toConsumableArray(valid));
-          } else {
-            ctrl.$setValidity('custom', valid);
-          }
-          return ngModelValue;
-        }
-
-        ctrl.$parsers.push(customValidatorWrapper);
-      }
-    };
-  });
-})();
-'use strict';
-
 /**
  * © OpenCORD
  *
@@ -1735,6 +1507,234 @@
 })();
 'use strict';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 3/24/16.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('xos.uiComponents')
+
+  /**
+  * @ngdoc directive
+  * @name xos.uiComponents.directive:xosSmartTable
+  * @link xos.uiComponents.directive:xosTable xosTable
+  * @link xos.uiComponents.directive:xosForm xosForm
+  * @restrict E
+  * @description The xos-table directive
+  * @param {Object} config The configuration for the component,
+  * it is composed by the name of an angular [$resource](https://docs.angularjs.org/api/ngResource/service/$resource)
+  * and an array of fields that shouldn't be printed.
+  * ```
+  * {
+      resource: 'Users',
+      hiddenFields: []
+    }
+  * ```
+  * @scope
+  * @example
+   <example module="sampleSmartTable">
+    <file name="index.html">
+      <div ng-controller="SampleCtrl as vm">
+        <xos-smart-table config="vm.config"></xos-smart-table>
+      </div>
+    </file>
+    <file name="script.js">
+      angular.module('sampleSmartTable', ['xos.uiComponents', 'ngResource', 'ngMockE2E'])
+      // This is only for documentation purpose
+      .run(function($httpBackend, _){
+        let datas = [{id: 1, name: 'Jhon', surname: 'Doe'}];
+        let count = 1;
+         let paramsUrl = new RegExp(/\/test\/(.+)/);
+         $httpBackend.whenDELETE(paramsUrl, undefined, ['id']).respond((method, url, data, headers, params) => {
+          data = angular.fromJson(data);
+          let id = url.match(paramsUrl)[1];
+          _.remove(datas, (d) => {
+            return d.id === parseInt(id);
+          })
+          return [204];
+        });
+         $httpBackend.whenGET('/test').respond(200, datas)
+        $httpBackend.whenPOST('/test').respond((method, url, data) => {
+          data = angular.fromJson(data);
+          data.id = ++count;
+          datas.push(data);
+          return [201, data, {}];
+        });
+      })
+      .factory('_', function($window){
+        return $window._;
+      })
+      .service('SampleResource', function($resource){
+        return $resource('/test/:id', {id: '@id'});
+      })
+      // End of documentation purpose, example start
+      .controller('SampleCtrl', function(){
+        this.config = {
+          resource: 'SampleResource'
+        };
+      });
+    </file>
+  </example>
+  */
+
+  .component('xosSmartTable', {
+    restrict: 'E',
+    bindings: {
+      config: '='
+    },
+    template: '\n        <div class="row" ng-show="vm.data.length > 0">\n          <div class="col-xs-12 text-right">\n            <a href="" class="btn btn-success" ng-click="vm.createItem()">\n              Add\n            </a>\n          </div>\n        </div>\n        <div class="row">\n          <div class="col-xs-12 table-responsive">\n            <xos-table config="vm.tableConfig" data="vm.data"></xos-table>\n          </div>\n        </div>\n        <div class="panel panel-default" ng-show="vm.detailedItem">\n          <div class="panel-heading">\n            <div class="row">\n              <div class="col-xs-11">\n                <h3 class="panel-title" ng-show="vm.detailedItem.id">Update {{vm.config.resource}} {{vm.detailedItem.id}}</h3>\n                <h3 class="panel-title" ng-show="!vm.detailedItem.id">Create {{vm.config.resource}} item</h3>\n              </div>\n              <div class="col-xs-1">\n                <a href="" ng-click="vm.cleanForm()">\n                  <i class="glyphicon glyphicon-remove pull-right"></i>\n                </a>\n              </div>\n            </div>\n          </div>\n          <div class="panel-body">\n            <xos-form config="vm.formConfig" ng-model="vm.detailedItem"></xos-form>\n          </div>\n        </div>\n        <xos-alert config="{type: \'success\', closeBtn: true}" show="vm.responseMsg">{{vm.responseMsg}}</xos-alert>\n        <xos-alert config="{type: \'danger\', closeBtn: true}" show="vm.responseErr">{{vm.responseErr}}</xos-alert>\n      ',
+    bindToController: true,
+    controllerAs: 'vm',
+    controller: ["$injector", "LabelFormatter", "_", "XosFormHelpers", function controller($injector, LabelFormatter, _, XosFormHelpers) {
+      var _this = this;
+
+      // TODO
+      // - Validate the config (what if resource does not exist?)
+
+      // NOTE
+      // Corner case
+      // - if response is empty, how can we generate a form ?
+
+      this.responseMsg = false;
+      this.responseErr = false;
+
+      this.tableConfig = {
+        columns: [],
+        actions: [{
+          label: 'delete',
+          icon: 'remove',
+          cb: function cb(item) {
+            _this.Resource.delete({ id: item.id }).$promise.then(function () {
+              _.remove(_this.data, function (d) {
+                return d.id === item.id;
+              });
+              _this.responseMsg = _this.config.resource + ' with id ' + item.id + ' successfully deleted';
+            }).catch(function (err) {
+              _this.responseErr = err.data.detail || 'Error while deleting ' + _this.config.resource + ' with id ' + item.id;
+            });
+          },
+          color: 'red'
+        }, {
+          label: 'details',
+          icon: 'search',
+          cb: function cb(item) {
+            _this.detailedItem = item;
+          }
+        }],
+        classes: 'table table-striped table-bordered table-responsive',
+        filter: 'field',
+        order: true,
+        pagination: {
+          pageSize: 10
+        }
+      };
+
+      this.formConfig = {
+        exclude: this.config.hiddenFields,
+        fields: {},
+        formName: this.config.resource + 'Form',
+        actions: [{
+          label: 'Save',
+          icon: 'ok',
+          cb: function cb(item) {
+            var p = void 0;
+            var isNew = true;
+
+            if (item.id) {
+              p = item.$update();
+              isNew = false;
+            } else {
+              p = item.$save();
+            }
+
+            p.then(function (res) {
+              if (isNew) {
+                _this.data.push(angular.copy(res));
+              }
+              delete _this.detailedItem;
+              _this.responseMsg = _this.config.resource + ' with id ' + item.id + ' successfully saved';
+            }).catch(function (err) {
+              _this.responseErr = err.data.detail || 'Error while saving ' + _this.config.resource + ' with id ' + item.id;
+            });
+          },
+          class: 'success'
+        }]
+      };
+
+      this.cleanForm = function () {
+        delete _this.detailedItem;
+      };
+
+      this.createItem = function () {
+        _this.detailedItem = new _this.Resource();
+      };
+
+      this.Resource = $injector.get(this.config.resource);
+
+      var getData = function getData() {
+        _this.Resource.query().$promise.then(function (res) {
+
+          if (!res[0]) {
+            _this.data = res;
+            return;
+          }
+
+          var item = res[0];
+          var props = Object.keys(item);
+
+          _.remove(props, function (p) {
+            return p === 'id' || p === 'validators';
+          });
+
+          // TODO move out cb,  non sense triggering a lot of times
+          if (angular.isArray(_this.config.hiddenFields)) {
+            props = _.difference(props, _this.config.hiddenFields);
+          }
+
+          var labels = props.map(function (p) {
+            return LabelFormatter.format(p);
+          });
+
+          props.forEach(function (p, i) {
+            var fieldConfig = {
+              label: labels[i],
+              prop: p
+            };
+
+            if (angular.isString(item[p]) && typeof item[p] !== 'undefined') {
+              fieldConfig.type = _typeof(item[p]);
+            }
+
+            _this.tableConfig.columns.push(fieldConfig);
+          });
+
+          // build form structure
+          // TODO move in a pure function for testing purposes
+          props.forEach(function (p, i) {
+            _this.formConfig.fields[p] = {
+              label: LabelFormatter.format(labels[i]).replace(':', ''),
+              type: XosFormHelpers._getFieldFormat(item[p])
+            };
+          });
+
+          _this.data = res;
+        });
+      };
+
+      getData();
+    }]
+  });
+})();
+'use strict';
+
 (function () {
   'use strict';