diff --git a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
index 4a0ecd9..734c54b 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
@@ -28,26 +28,53 @@
         config: '='
       },
       template: `
+        <pre>{{vm.responseErr}}</pre>
         <xos-table config="vm.tableConfig" data="vm.data"></xos-table>
+        <div class="panel panel-default" ng-show="vm.detailedItem">
+          <div class="panel-heading">
+            <h3 class="panel-title">Update {{vm.config.resource}} {{vm.detailedItem.id}}</h3>
+          </div>
+          <div class="panel-body">
+            <xos-form config="vm.formConfig" ng-model="vm.detailedItem"></xos-form>
+          </div>
+        </div>
+        <xos-alert config="{type: 'success', closeBtn: true}" show="vm.responseMsg">{{vm.responseMsg}}</xos-alert>
+        <xos-alert config="{type: 'danger', closeBtn: true}" show="vm.responseErr">{{vm.responseErr}}</xos-alert>
       `,
       bindToController: true,
       controllerAs: 'vm',
       controller: function($injector, LabelFormatter, _){
         
+        this.responseMsg = false;
+        this.responseErr = false;
+
         this.tableConfig = {
           columns: [
           ],
-          // actions: [
-          //   {
-          //     label: 'delete',
-          //     icon: 'remove',
-          //     cb: (user) => {
-          //       console.log(user);
-          //       // _.remove(this.users, {id: user.id});
-          //     },
-          //     color: 'red'
-          //   }
-          // ],
+          actions: [
+            {
+              label: 'delete',
+              icon: 'remove',
+              cb: (item) => {
+                this.Resource.delete({id: item.id}).$promise
+                .then(() => {
+                  console.log(this.config.resource);
+                  this.responseMsg = `${this.config.resource} with id ${item.id} successfully deleted`;
+                })
+                .catch(err => {
+                  this.responseErr = err.data.detail || `Error while deleting ${this.config.resource} with id ${item.id}`;
+                });
+              },
+              color: 'red'
+            },
+            {
+              label: 'details',
+              icon: 'search',
+              cb: (item) => {
+                this.detailedItem = item;
+              }
+            }
+          ],
           classes: 'table table-striped table-bordered table-responsive',
           filter: 'field',
           order: true,
@@ -56,6 +83,27 @@
           }
         };
 
+        this.formConfig = {
+          exclude: this.config.hiddenFields,
+          formName: `${this.config.resource}Form`,
+          actions: [
+            {
+              label: 'Save',
+              icon: 'ok',
+              cb: (item) => {
+                item.$save()
+                .then(() => {
+                  this.responseMsg = `${this.config.resource} with id ${item.id} successfully saved`;
+                })
+                .catch((err) => {
+                  this.responseErr = err.data.detail || `Error while saving ${this.config.resource} with id ${item.id}`;
+                })
+              },
+              class: 'success'
+            }
+          ]
+        }
+
         this.Resource = $injector.get(this.config.resource);
 
         this.Resource.query().$promise
@@ -71,6 +119,7 @@
             return p == 'id' || p == 'password' || p == 'validators'
           });
 
+          // TODO move out cb
           if(angular.isArray(this.config.hiddenFields)){
             props = _.difference(props, this.config.hiddenFields)
           }