diff --git a/dist/xosUiComponents.js b/dist/xosUiComponents.js
index b49db99..e6b9709 100644
--- a/dist/xosUiComponents.js
+++ b/dist/xosUiComponents.js
@@ -26,7 +26,7 @@
   * - [xosValidation](/#/module/xos.uiComponents.directive:xosValidation)
   **/
 
-  angular.module('xos.uiComponents', ['chart.js', 'RecursionHelper']);
+  angular.module('xos.uiComponents', ['chart.js', 'RecursionHelper', 'dndLists']);
 })();
 //# sourceMappingURL=../maps/ui_components/ui-components.module.js.map
 
@@ -37,227 +37,6 @@
  *
  * 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);
-          }
-
-          props.forEach(function (p) {
-            var fieldConfig = {
-              label: LabelFormatter.format(p),
-              prop: p
-            };
-
-            fieldConfig.type = XosFormHelpers._getFieldFormat(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(p).replace(':', ''),
-              type: XosFormHelpers._getFieldFormat(item[p])
-            };
-          });
-          _this.data = res;
-        });
-      };
-
-      getData();
-    }]
-  });
-})();
-//# sourceMappingURL=../../../maps/ui_components/smartComponents/smartTable/smartTable.component.js.map
-
-'use strict';
-
-/**
- * © OpenCORD
- *
- * Visit http://guide.xosproject.org/devguide/addview/ for more information
- *
  * Created by teone on 4/15/16.
  */
 
@@ -354,245 +133,100 @@
  *
  * Visit http://guide.xosproject.org/devguide/addview/ for more information
  *
- * Created by teone on 3/24/16.
+ * Created by teone on 4/15/16.
  */
 
 (function () {
   'use strict';
 
   angular.module('xos.uiComponents')
+
   /**
     * @ngdoc directive
-    * @name xos.uiComponents.directive:xosSmartPie
+    * @name xos.uiComponents.directive:xosPagination
     * @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 a field name that is used to group the data.
-    * ```
-    * {
-        resource: 'Users',
-        groupBy: 'fieldName',
-        classes: 'my-custom-class',
-        labelFormatter: (labels) => {
-          // here you can format your label,
-          // you should return an array with the same order
-          return labels;
-        }
-      }
-    * ```
+    * @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
-    
-    Displaying Local data
-     <example module="sampleSmartPieLocal">
-      <file name="index.html">
-        <div ng-controller="SampleCtrlLocal as vm">
-          <xos-smart-pie config="vm.configLocal"></xos-smart-pie>
-        </div>
-      </file>
-      <file name="script.js">
-        angular.module('sampleSmartPieLocal', ['xos.uiComponents'])
-        .factory('_', function($window){
-          return $window._;
-        })
-        .controller('SampleCtrlLocal', function($timeout){
-          
-          this.datas = [
-            {id: 1, first_name: 'Jon', last_name: 'aaa', category: 2},
-            {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 1},
-            {id: 3, first_name: 'Aria', last_name: 'Stark', category: 2}
-          ];
-           this.configLocal = {
-            data: [],
-            groupBy: 'category',
-            classes: 'local',
-            labelFormatter: (labels) => {
-              return labels.map(l => l === '1' ? 'North' : 'Dragon');
-            }
-          };
-          
-          $timeout(() => {
-            // this need to be triggered in this way just because of ngDoc,
-            // otherwise you can assign data directly in the config
-            this.configLocal.data = this.datas;
-          }, 1)
-        });
-      </file>
-    </example>
-     Fetching data from API
-     <example module="sampleSmartPieResource">
-      <file name="index.html">
-        <div ng-controller="SampleCtrl as vm">
-          <xos-smart-pie config="vm.config"></xos-smart-pie>
-        </div>
-      </file>
-      <file name="script.js">
-        angular.module('sampleSmartPieResource', ['xos.uiComponents', 'ngResource', 'ngMockE2E'])
-        .controller('SampleCtrl', function(){
-          this.config = {
-            resource: 'SampleResource',
-            groupBy: 'category',
-            classes: 'resource',
-            labelFormatter: (labels) => {
-              return labels.map(l => l === '1' ? 'North' : 'Dragon');
-            }
-          };
-        });
-      </file>
-      <file name="backendPoll.js">
-        angular.module('sampleSmartPieResource')
-        .run(function($httpBackend, _){
-          let datas = [
-            {id: 1, first_name: 'Jon', last_name: 'Snow', category: 1},
-            {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 2},
-            {id: 3, first_name: 'Aria', last_name: 'Stark', category: 1}
-          ];
-           $httpBackend.whenGET('/test').respond(200, datas)
-        })
-        .factory('_', function($window){
-          return $window._;
-        })
-        .service('SampleResource', function($resource){
-          return $resource('/test/:id', {id: '@id'});
-        })
-      </file>
-    </example>
-     Polling data from API
-     <example module="sampleSmartPiePoll">
-      <file name="index.html">
-        <div ng-controller="SampleCtrl as vm">
-          <xos-smart-pie config="vm.config"></xos-smart-pie>
-        </div>
-      </file>
-      <file name="script.js">
-        angular.module('sampleSmartPiePoll', ['xos.uiComponents', 'ngResource', 'ngMockE2E'])
-        .controller('SampleCtrl', function(){
-          this.config = {
-            resource: 'SampleResource',
-            groupBy: 'category',
-            poll: 2,
-            labelFormatter: (labels) => {
-              return labels.map(l => l === '1' ? 'Active' : 'Banned');
-            }
-          };
-        });
-      </file>
-      <file name="backend.js">
-        angular.module('sampleSmartPiePoll')
-        .run(function($httpBackend, _){
-          let mock = [
-            [
-              {id: 1, first_name: 'Jon', last_name: 'Snow', category: 1},
-              {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 2},
-              {id: 3, first_name: 'Aria', last_name: 'Stark', category: 1},
-              {id: 3, first_name: 'Tyrion', last_name: 'Lannister', category: 1}
-            ],
-             [
-              {id: 1, first_name: 'Jon', last_name: 'Snow', category: 1},
-              {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 2},
-              {id: 3, first_name: 'Aria', last_name: 'Stark', category: 2},
-              {id: 3, first_name: 'Tyrion', last_name: 'Lannister', category: 2}
-            ],
-             [
-              {id: 1, first_name: 'Jon', last_name: 'Snow', category: 1},
-              {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 2},
-              {id: 3, first_name: 'Aria', last_name: 'Stark', category: 1},
-              {id: 3, first_name: 'Tyrion', last_name: 'Lannister', category: 2}
-            ]
-          ];
-          $httpBackend.whenGET('/test').respond(function(method, url, data, headers, params) {
-            return [200, mock[Math.round(Math.random() * 3)]];
-          });
-        })
-        .factory('_', function($window){
-          return $window._;
-        })
-        .service('SampleResource', function($resource){
-          return $resource('/test/:id', {id: '@id'});
-        })
-      </file>
-    </example>
-    */
-  .component('xosSmartPie', {
+  <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: {
-      config: '='
+      pageSize: '=',
+      totalElements: '=',
+      change: '='
     },
-    template: '\n      <canvas\n        class="chart chart-pie {{vm.config.classes}}"\n        chart-data="vm.data" chart-labels="vm.labels"\n        chart-legend="{{vm.config.legend}}">\n      </canvas>\n    ',
+    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: ["$injector", "$interval", "$scope", "$timeout", "_", function controller($injector, $interval, $scope, $timeout, _) {
+    controller: ["$scope", function controller($scope) {
       var _this = this;
 
-      if (!this.config.resource && !this.config.data) {
-        throw new Error('[xosSmartPie] Please provide a resource or an array of data in the configuration');
-      }
+      this.currentPage = 0;
 
-      var groupData = function groupData(data) {
-        return _.groupBy(data, _this.config.groupBy);
-      };
-      var formatData = function formatData(data) {
-        return _.reduce(Object.keys(data), function (list, group) {
-          return list.concat(data[group].length);
-        }, []);
-      };
-      var formatLabels = function formatLabels(data) {
-        return angular.isFunction(_this.config.labelFormatter) ? _this.config.labelFormatter(Object.keys(data)) : Object.keys(data);
+      this.goToPage = function (n) {
+        if (n < 0 || n === _this.pages) {
+          return;
+        }
+        _this.currentPage = n;
+        _this.change(n);
       };
 
-      var prepareData = function prepareData(data) {
-        // group data
-        var grouped = groupData(data);
-        _this.data = formatData(grouped);
-        // create labels
-        _this.labels = formatLabels(grouped);
+      this.createPages = function (pages) {
+        var arr = [];
+        for (var i = 0; i < pages; i++) {
+          arr.push(i);
+        }
+        return arr;
       };
 
-      if (this.config.resource) {
-        (function () {
-
-          _this.Resource = $injector.get(_this.config.resource);
-          var getData = function getData() {
-            _this.Resource.query().$promise.then(function (res) {
-
-              if (!res[0]) {
-                return;
-              }
-
-              prepareData(res);
-            });
-          };
-
-          getData();
-
-          if (_this.config.poll) {
-            $interval(function () {
-              getData();
-            }, _this.config.poll * 1000);
-          }
-        })();
-      } else {
-        $scope.$watch(function () {
-          return _this.config.data;
-        }, function (data) {
-          if (data) {
-            prepareData(_this.config.data);
-          }
-        }, true);
-      }
-
-      $scope.$on('create', function (event, chart) {
-        console.log('create: ' + chart.id);
-      });
-
-      $scope.$on('destroy', function (event, chart) {
-        console.log('destroy: ' + chart.id);
+      // 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);
+    };
   });
 })();
-//# sourceMappingURL=../../../maps/ui_components/smartComponents/smartPie/smartPie.component.js.map
+//# sourceMappingURL=../../../maps/ui_components/dumbComponents/pagination/pagination.component.js.map
 
 'use strict';
 
@@ -1302,326 +936,6 @@
 
   /**
     * @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);
-    };
-  });
-})();
-//# sourceMappingURL=../../../maps/ui_components/dumbComponents/pagination/pagination.component.js.map
-
-'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);
-      }
-    };
-  });
-})();
-//# sourceMappingURL=../../../maps/ui_components/dumbComponents/field/field.component.js.map
-
-'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:xosAlert
     * @restrict E
     * @description The xos-alert directive
@@ -1744,6 +1058,709 @@
 
 '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'
+            };
+             this.field5 = {
+              name: 'select',
+              label: 'Select field:',
+              type: 'select',
+              model: 1,
+              options: [
+                {id: 1, label: 'One'},
+                {id: 2, label: 'Two'},
+                {id: 3, label: 'Three'},
+              ]
+            };
+          });
+        </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>
+            <xos-field ng-model="vm.field5.model" name="vm.field5.name" field="vm.field5.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.type !== \'array\'">{{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\' && vm.field.type !== \'array\'"\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      <div\n        class="panel panel-default array-field"\n        ng-if="vm.field.type == \'array\'">\n        <div class="panel-heading">{{vm.field.label}}</div>\n        <div class="panel-body selected">\n          <ul class="draggable" dnd-list="vm.ngModel">\n            <li\n              class="array-element"\n              ng-repeat="item in vm.ngModel"\n              dnd-draggable="item"\n              dnd-moved="vm.ngModel.splice($index, 1)"\n              dnd-effect-allowed="move"\n              dnd-selected="models.selected = item"\n              >\n              <div class="well well-sm text-center">\n                {{item}}\n              </div>\n            </li>\n            <div class="clearfix"></div>\n          </ul>\n        </div>\n        <div class="panel-body unselected">\n          <ul class="draggable" dnd-list="vm.field.availableOptions">\n            <li\n              class="array-element"\n              ng-repeat="item in vm.field.availableOptions"\n              dnd-draggable="item"\n              dnd-moved="vm.field.availableOptions.splice($index, 1)"\n              dnd-effect-allowed="move"\n              dnd-selected="models.selected = item"\n              >\n              <div class="well well-sm text-center">\n                {{item}}\n              </div>\n            </li>\n            <div class="clearfix"></div>\n          </ul>\n        </div>\n      </div>\n    ',
+    bindToController: true,
+    controllerAs: 'vm',
+    controller: ["$attrs", "$scope", "XosFormHelpers", "LabelFormatter", "_", function controller($attrs, $scope, XosFormHelpers, LabelFormatter, _) {
+      var _this = this;
+
+      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;
+      };
+
+      if (this.field.type === 'array') {
+        $scope.$watch(function () {
+          return _this.ngModel.length;
+        }, function () {
+          _this.field.availableOptions = _.difference(_this.field.options, _this.ngModel);
+        });
+      }
+    }]
+  })
+
+  /**
+   * @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);
+      }
+    };
+  });
+})();
+//# sourceMappingURL=../../../maps/ui_components/dumbComponents/field/field.component.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';
+
+  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);
+          }
+
+          props.forEach(function (p) {
+            var fieldConfig = {
+              label: LabelFormatter.format(p),
+              prop: p
+            };
+
+            fieldConfig.type = XosFormHelpers._getFieldFormat(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(p).replace(':', ''),
+              type: XosFormHelpers._getFieldFormat(item[p])
+            };
+          });
+          _this.data = res;
+        });
+      };
+
+      getData();
+    }]
+  });
+})();
+//# sourceMappingURL=../../../maps/ui_components/smartComponents/smartTable/smartTable.component.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';
+
+  angular.module('xos.uiComponents')
+  /**
+    * @ngdoc directive
+    * @name xos.uiComponents.directive:xosSmartPie
+    * @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 a field name that is used to group the data.
+    * ```
+    * {
+        resource: 'Users',
+        groupBy: 'fieldName',
+        classes: 'my-custom-class',
+        labelFormatter: (labels) => {
+          // here you can format your label,
+          // you should return an array with the same order
+          return labels;
+        }
+      }
+    * ```
+    * @scope
+    * @example
+    
+    Displaying Local data
+     <example module="sampleSmartPieLocal">
+      <file name="index.html">
+        <div ng-controller="SampleCtrlLocal as vm">
+          <xos-smart-pie config="vm.configLocal"></xos-smart-pie>
+        </div>
+      </file>
+      <file name="script.js">
+        angular.module('sampleSmartPieLocal', ['xos.uiComponents'])
+        .factory('_', function($window){
+          return $window._;
+        })
+        .controller('SampleCtrlLocal', function($timeout){
+          
+          this.datas = [
+            {id: 1, first_name: 'Jon', last_name: 'aaa', category: 2},
+            {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 1},
+            {id: 3, first_name: 'Aria', last_name: 'Stark', category: 2}
+          ];
+           this.configLocal = {
+            data: [],
+            groupBy: 'category',
+            classes: 'local',
+            labelFormatter: (labels) => {
+              return labels.map(l => l === '1' ? 'North' : 'Dragon');
+            }
+          };
+          
+          $timeout(() => {
+            // this need to be triggered in this way just because of ngDoc,
+            // otherwise you can assign data directly in the config
+            this.configLocal.data = this.datas;
+          }, 1)
+        });
+      </file>
+    </example>
+     Fetching data from API
+     <example module="sampleSmartPieResource">
+      <file name="index.html">
+        <div ng-controller="SampleCtrl as vm">
+          <xos-smart-pie config="vm.config"></xos-smart-pie>
+        </div>
+      </file>
+      <file name="script.js">
+        angular.module('sampleSmartPieResource', ['xos.uiComponents', 'ngResource', 'ngMockE2E'])
+        .controller('SampleCtrl', function(){
+          this.config = {
+            resource: 'SampleResource',
+            groupBy: 'category',
+            classes: 'resource',
+            labelFormatter: (labels) => {
+              return labels.map(l => l === '1' ? 'North' : 'Dragon');
+            }
+          };
+        });
+      </file>
+      <file name="backendPoll.js">
+        angular.module('sampleSmartPieResource')
+        .run(function($httpBackend, _){
+          let datas = [
+            {id: 1, first_name: 'Jon', last_name: 'Snow', category: 1},
+            {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 2},
+            {id: 3, first_name: 'Aria', last_name: 'Stark', category: 1}
+          ];
+           $httpBackend.whenGET('/test').respond(200, datas)
+        })
+        .factory('_', function($window){
+          return $window._;
+        })
+        .service('SampleResource', function($resource){
+          return $resource('/test/:id', {id: '@id'});
+        })
+      </file>
+    </example>
+     Polling data from API
+     <example module="sampleSmartPiePoll">
+      <file name="index.html">
+        <div ng-controller="SampleCtrl as vm">
+          <xos-smart-pie config="vm.config"></xos-smart-pie>
+        </div>
+      </file>
+      <file name="script.js">
+        angular.module('sampleSmartPiePoll', ['xos.uiComponents', 'ngResource', 'ngMockE2E'])
+        .controller('SampleCtrl', function(){
+          this.config = {
+            resource: 'SampleResource',
+            groupBy: 'category',
+            poll: 2,
+            labelFormatter: (labels) => {
+              return labels.map(l => l === '1' ? 'Active' : 'Banned');
+            }
+          };
+        });
+      </file>
+      <file name="backend.js">
+        angular.module('sampleSmartPiePoll')
+        .run(function($httpBackend, _){
+          let mock = [
+            [
+              {id: 1, first_name: 'Jon', last_name: 'Snow', category: 1},
+              {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 2},
+              {id: 3, first_name: 'Aria', last_name: 'Stark', category: 1},
+              {id: 3, first_name: 'Tyrion', last_name: 'Lannister', category: 1}
+            ],
+             [
+              {id: 1, first_name: 'Jon', last_name: 'Snow', category: 1},
+              {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 2},
+              {id: 3, first_name: 'Aria', last_name: 'Stark', category: 2},
+              {id: 3, first_name: 'Tyrion', last_name: 'Lannister', category: 2}
+            ],
+             [
+              {id: 1, first_name: 'Jon', last_name: 'Snow', category: 1},
+              {id: 2, first_name: 'Danaerys', last_name: 'Targaryen', category: 2},
+              {id: 3, first_name: 'Aria', last_name: 'Stark', category: 1},
+              {id: 3, first_name: 'Tyrion', last_name: 'Lannister', category: 2}
+            ]
+          ];
+          $httpBackend.whenGET('/test').respond(function(method, url, data, headers, params) {
+            return [200, mock[Math.round(Math.random() * 3)]];
+          });
+        })
+        .factory('_', function($window){
+          return $window._;
+        })
+        .service('SampleResource', function($resource){
+          return $resource('/test/:id', {id: '@id'});
+        })
+      </file>
+    </example>
+    */
+  .component('xosSmartPie', {
+    restrict: 'E',
+    bindings: {
+      config: '='
+    },
+    template: '\n      <canvas\n        class="chart chart-pie {{vm.config.classes}}"\n        chart-data="vm.data" chart-labels="vm.labels"\n        chart-legend="{{vm.config.legend}}">\n      </canvas>\n    ',
+    bindToController: true,
+    controllerAs: 'vm',
+    controller: ["$injector", "$interval", "$scope", "$timeout", "_", function controller($injector, $interval, $scope, $timeout, _) {
+      var _this = this;
+
+      if (!this.config.resource && !this.config.data) {
+        throw new Error('[xosSmartPie] Please provide a resource or an array of data in the configuration');
+      }
+
+      var groupData = function groupData(data) {
+        return _.groupBy(data, _this.config.groupBy);
+      };
+      var formatData = function formatData(data) {
+        return _.reduce(Object.keys(data), function (list, group) {
+          return list.concat(data[group].length);
+        }, []);
+      };
+      var formatLabels = function formatLabels(data) {
+        return angular.isFunction(_this.config.labelFormatter) ? _this.config.labelFormatter(Object.keys(data)) : Object.keys(data);
+      };
+
+      var prepareData = function prepareData(data) {
+        // group data
+        var grouped = groupData(data);
+        _this.data = formatData(grouped);
+        // create labels
+        _this.labels = formatLabels(grouped);
+      };
+
+      if (this.config.resource) {
+        (function () {
+
+          _this.Resource = $injector.get(_this.config.resource);
+          var getData = function getData() {
+            _this.Resource.query().$promise.then(function (res) {
+
+              if (!res[0]) {
+                return;
+              }
+
+              prepareData(res);
+            });
+          };
+
+          getData();
+
+          if (_this.config.poll) {
+            $interval(function () {
+              getData();
+            }, _this.config.poll * 1000);
+          }
+        })();
+      } else {
+        $scope.$watch(function () {
+          return _this.config.data;
+        }, function (data) {
+          if (data) {
+            prepareData(_this.config.data);
+          }
+        }, true);
+      }
+
+      $scope.$on('create', function (event, chart) {
+        console.log('create: ' + chart.id);
+      });
+
+      $scope.$on('destroy', function (event, chart) {
+        console.log('destroy: ' + chart.id);
+      });
+    }]
+  });
+})();
+//# sourceMappingURL=../../../maps/ui_components/smartComponents/smartPie/smartPie.component.js.map
+
+'use strict';
+
 (function () {
   'use strict';