diff --git a/src/ui_components/dumbComponents/table/table.component.js b/src/ui_components/dumbComponents/table/table.component.js
index 1e60458..e8f66b4 100644
--- a/src/ui_components/dumbComponents/table/table.component.js
+++ b/src/ui_components/dumbComponents/table/table.component.js
@@ -330,196 +330,193 @@
   </example>
     **/
 
-    .directive('xosTable', function(){
-      return {
-        restrict: 'E',
-        scope: {
-          data: '=',
-          config: '='
-        },
-        template: `
-          <div ng-show="vm.data.length > 0 && vm.loader == false">
-            <div class="row" ng-if="vm.config.filter == 'fulltext'">
-              <div class="col-xs-12">
-                <input
-                  class="form-control"
-                  placeholder="Type to search.."
-                  type="text"
-                  ng-model="vm.query"/>
-              </div>
+    .component('xosTable', {
+      restrict: 'E',
+      bindings: {
+        data: '=',
+        config: '='
+      },
+      template: `
+        <div ng-show="vm.data.length > 0 && vm.loader == false">
+          <div class="row" ng-if="vm.config.filter == 'fulltext'">
+            <div class="col-xs-12">
+              <input
+                class="form-control"
+                placeholder="Type to search.."
+                type="text"
+                ng-model="vm.query"/>
             </div>
-            <table ng-class="vm.classes" ng-hide="vm.data.length == 0">
-              <thead>
-                <tr>
-                  <th ng-repeat="col in vm.columns">
-                    {{col.label}}
-                    <span ng-if="vm.config.order">
-                      <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
-                        <i class="glyphicon glyphicon-chevron-up"></i>
-                      </a>
-                      <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
-                        <i class="glyphicon glyphicon-chevron-down"></i>
-                      </a>
-                    </span>
-                  </th>
-                  <th ng-if="vm.config.actions">Actions:</th>
-                </tr>
-              </thead>
-              <tbody ng-if="vm.config.filter == 'field'">
-                <tr>
-                  <td ng-repeat="col in vm.columns">
-                    <input
-                      ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
-                      class="form-control"
-                      placeholder="Type to search by {{col.label}}"
-                      type="text"
-                      ng-model="vm.query[col.prop]"/>
-                    <select
-                      ng-if="col.type === 'boolean'"
-                      class="form-control"
-                      ng-model="vm.query[col.prop]">
-                      <option value="">-</option>
-                      <option value="true">True</option>
-                      <option value="false">False</option>
-                    </select>
-                  </td>
-                  <td ng-if="vm.config.actions"></td>
-                </tr>
-              </tbody>
-              <tbody>
-                <tr ng-repeat="item in vm.data | filter:vm.query:vm.comparator | orderBy:vm.orderBy:vm.reverse | pagination:vm.currentPage * vm.config.pagination.pageSize | limitTo: (vm.config.pagination.pageSize || vm.data.length) track by $index">
-                  <td ng-repeat="col in vm.columns" xos-link-wrapper>
-                    <span ng-if="!col.type">{{item[col.prop]}}</span>
-                    <span ng-if="col.type === 'boolean'">
-                      <i class="glyphicon"
-                        ng-class="{'glyphicon-ok': item[col.prop], 'glyphicon-remove': !item[col.prop]}">
-                      </i>
-                    </span>
-                    <span ng-if="col.type === 'date'">
-                      {{item[col.prop] | date:'H:mm MMM d, yyyy'}}
-                    </span>
-                    <span ng-if="col.type === 'array'">
-                      {{item[col.prop] | arrayToList}}
-                    </span>
-                    <span ng-if="col.type === 'object'">
-                      <dl class="dl-horizontal">
-                        <span ng-repeat="(k,v) in item[col.prop]">
-                          <dt>{{k}}</dt>
-                          <dd>{{v}}</dd>
-                        </span>
-                      </dl>
-                    </span>
-                    <span ng-if="col.type === 'custom'">
-                      {{col.formatter(item)}}
-                    </span>
-                    <span ng-if="col.type === 'icon'">
-                      <i class="glyphicon glyphicon-{{col.formatter(item)}}">
-                      </i>
-                    </span>
-                  </td>
-                  <td ng-if="vm.config.actions">
-                    <a href=""
-                      ng-repeat="action in vm.config.actions"
-                      ng-click="action.cb(item)"
-                      title="{{action.label}}">
-                      <i
-                        class="glyphicon glyphicon-{{action.icon}}"
-                        style="color: {{action.color}};"></i>
+          </div>
+          <table ng-class="vm.classes" ng-hide="vm.data.length == 0">
+            <thead>
+              <tr>
+                <th ng-repeat="col in vm.columns">
+                  {{col.label}}
+                  <span ng-if="vm.config.order">
+                    <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = false">
+                      <i class="glyphicon glyphicon-chevron-up"></i>
                     </a>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-            <xos-pagination
-              ng-if="vm.config.pagination"
-              page-size="vm.config.pagination.pageSize"
-              total-elements="vm.data.length"
-              change="vm.goToPage">
-              </xos-pagination>
-          </div>
-          <div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">
-             <xos-alert config="{type: 'info'}">
-              No data to show.
-            </xos-alert>
-          </div>
-          <div ng-show="vm.loader == true">
-            <div class="loader"></div>
-          </div>
-        `,
-        bindToController: true,
-        controllerAs: 'vm',
-        controller: function(_, $scope, Comparator){
+                    <a href="" ng-click="vm.orderBy = col.prop; vm.reverse = true">
+                      <i class="glyphicon glyphicon-chevron-down"></i>
+                    </a>
+                  </span>
+                </th>
+                <th ng-if="vm.config.actions">Actions:</th>
+              </tr>
+            </thead>
+            <tbody ng-if="vm.config.filter == 'field'">
+              <tr>
+                <td ng-repeat="col in vm.columns">
+                  <input
+                    ng-if="col.type !== 'boolean' && col.type !== 'array' && col.type !== 'object' && col.type !== 'custom'"
+                    class="form-control"
+                    placeholder="Type to search by {{col.label}}"
+                    type="text"
+                    ng-model="vm.query[col.prop]"/>
+                  <select
+                    ng-if="col.type === 'boolean'"
+                    class="form-control"
+                    ng-model="vm.query[col.prop]">
+                    <option value="">-</option>
+                    <option value="true">True</option>
+                    <option value="false">False</option>
+                  </select>
+                </td>
+                <td ng-if="vm.config.actions"></td>
+              </tr>
+            </tbody>
+            <tbody>
+              <tr ng-repeat="item in vm.data | filter:vm.query:vm.comparator | orderBy:vm.orderBy:vm.reverse | pagination:vm.currentPage * vm.config.pagination.pageSize | limitTo: (vm.config.pagination.pageSize || vm.data.length) track by $index">
+                <td ng-repeat="col in vm.columns" xos-link-wrapper>
+                  <span ng-if="!col.type">{{item[col.prop]}}</span>
+                  <span ng-if="col.type === 'boolean'">
+                    <i class="glyphicon"
+                      ng-class="{'glyphicon-ok': item[col.prop], 'glyphicon-remove': !item[col.prop]}">
+                    </i>
+                  </span>
+                  <span ng-if="col.type === 'date'">
+                    {{item[col.prop] | date:'H:mm MMM d, yyyy'}}
+                  </span>
+                  <span ng-if="col.type === 'array'">
+                    {{item[col.prop] | arrayToList}}
+                  </span>
+                  <span ng-if="col.type === 'object'">
+                    <dl class="dl-horizontal">
+                      <span ng-repeat="(k,v) in item[col.prop]">
+                        <dt>{{k}}</dt>
+                        <dd>{{v}}</dd>
+                      </span>
+                    </dl>
+                  </span>
+                  <span ng-if="col.type === 'custom'">
+                    {{col.formatter(item)}}
+                  </span>
+                  <span ng-if="col.type === 'icon'">
+                    <i class="glyphicon glyphicon-{{col.formatter(item)}}">
+                    </i>
+                  </span>
+                </td>
+                <td ng-if="vm.config.actions">
+                  <a href=""
+                    ng-repeat="action in vm.config.actions"
+                    ng-click="action.cb(item)"
+                    title="{{action.label}}">
+                    <i
+                      class="glyphicon glyphicon-{{action.icon}}"
+                      style="color: {{action.color}};"></i>
+                  </a>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <xos-pagination
+            ng-if="vm.config.pagination"
+            page-size="vm.config.pagination.pageSize"
+            total-elements="vm.data.length"
+            change="vm.goToPage">
+            </xos-pagination>
+        </div>
+        <div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">
+           <xos-alert config="{type: 'info'}">
+            No data to show.
+          </xos-alert>
+        </div>
+        <div ng-show="vm.loader == true">
+          <div class="loader"></div>
+        </div>
+      `,
+      bindToController: true,
+      controllerAs: 'vm',
+      controller: function(_, $scope, Comparator){
 
-          this.comparator = Comparator;
+        this.comparator = Comparator;
 
-          this.loader = true;
+        this.loader = true;
 
-          $scope.$watch(() => this.data, data => {
-            if(angular.isDefined(data)){
-              this.loader = false;
+        $scope.$watch(() => this.data, data => {
+          if(angular.isDefined(data)){
+            this.loader = false;
+          }
+        });
+
+        if(!this.config){
+          throw new Error('[xosTable] Please provide a configuration via the "config" attribute');
+        }
+
+        if(!this.config.columns){
+          throw new Error('[xosTable] Please provide a columns list in the configuration');
+        }
+
+        // handle default ordering
+        if(this.config.order && angular.isObject(this.config.order)){
+          this.reverse = this.config.order.reverse || false;
+          this.orderBy = this.config.order.field || 'id';
+        }
+
+        // if columns with type 'custom' are provided
+        // check that a custom formatte3 is provided too
+        let customCols = _.filter(this.config.columns, {type: 'custom'});
+        if(angular.isArray(customCols) && customCols.length > 0){
+          _.forEach(customCols, (col) => {
+            if(!col.formatter || !angular.isFunction(col.formatter)){
+              throw new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.');
             }
-          });
+          })
+        }
 
-          if(!this.config){
-            throw new Error('[xosTable] Please provide a configuration via the "config" attribute');
-          }
+        // if columns with type 'icon' are provided
+        // check that a custom formatte3 is provided too
+        let iconCols = _.filter(this.config.columns, {type: 'icon'});
+        if(angular.isArray(iconCols) && iconCols.length > 0){
+          _.forEach(iconCols, (col) => {
+            if(!col.formatter || !angular.isFunction(col.formatter)){
+              throw new Error('[xosTable] You have provided an icon field type, a formatter function should provided too.');
+            }
+          })
+        }
 
-          if(!this.config.columns){
-            throw new Error('[xosTable] Please provide a columns list in the configuration');
-          }
+        // if a link property is passed,
+        // it should be a function
+        let linkedColumns = _.filter(this.config.columns, col => angular.isDefined(col.link));
+        if(angular.isArray(linkedColumns) && linkedColumns.length > 0){
+          _.forEach(linkedColumns, (col) => {
+            if(!angular.isFunction(col.link)){
+              throw new Error('[xosTable] The link property should be a function.');
+            }
+          })
+        }
 
-          // handle default ordering
-          if(this.config.order && angular.isObject(this.config.order)){
-            this.reverse = this.config.order.reverse || false;
-            this.orderBy = this.config.order.field || 'id';
-          }
+        this.columns = this.config.columns;
+        this.classes = this.config.classes || 'table table-striped table-bordered';
 
-          // if columns with type 'custom' are provided
-          // check that a custom formatte3 is provided too
-          let customCols = _.filter(this.config.columns, {type: 'custom'});
-          if(angular.isArray(customCols) && customCols.length > 0){
-            _.forEach(customCols, (col) => {
-              if(!col.formatter || !angular.isFunction(col.formatter)){
-                throw new Error('[xosTable] You have provided a custom field type, a formatter function should provided too.');
-              }
-            })
-          }
-
-          // if columns with type 'icon' are provided
-          // check that a custom formatte3 is provided too
-          let iconCols = _.filter(this.config.columns, {type: 'icon'});
-          if(angular.isArray(iconCols) && iconCols.length > 0){
-            _.forEach(iconCols, (col) => {
-              if(!col.formatter || !angular.isFunction(col.formatter)){
-                throw new Error('[xosTable] You have provided an icon field type, a formatter function should provided too.');
-              }
-            })
-          }
-
-          // if a link property is passed,
-          // it should be a function
-          let linkedColumns = _.filter(this.config.columns, col => angular.isDefined(col.link));
-          if(angular.isArray(linkedColumns) && linkedColumns.length > 0){
-            _.forEach(linkedColumns, (col) => {
-              if(!angular.isFunction(col.link)){
-                throw new Error('[xosTable] The link property should be a function.');
-              }
-            })
-          }
-
-          this.columns = this.config.columns;
-          this.classes = this.config.classes || 'table table-striped table-bordered';
-
-          if(this.config.actions){
-            // TODO validate action format
-          }
-          if(this.config.pagination){
-            this.currentPage = 0;
-            this.goToPage = (n) => {
-              this.currentPage = n;
-            };
-          }
-
+        if(this.config.actions){
+          // TODO validate action format
+        }
+        if(this.config.pagination){
+          this.currentPage = 0;
+          this.goToPage = (n) => {
+            this.currentPage = n;
+          };
         }
       }
     })