From 0cd48143fdfa12c96802f2fc8abbc941028eda28 Mon Sep 17 00:00:00 2001
From: martinRenou <martin.renou@isae.fr>
Date: Wed, 31 May 2017 18:09:48 +0000
Subject: [PATCH 1/6] We now use admin lte tables

---
 bower.json                                 |  2 -
 frontend/vue/toolkit/DataTable.vue         | 46 +++++++++++-----------
 remoteappmanager/templates/admin/page.html |  4 --
 3 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/bower.json b/bower.json
index 30d8b5e50..5dc1df3d1 100644
--- a/bower.json
+++ b/bower.json
@@ -16,8 +16,6 @@
     "font-awesome": "~4.5",
     "ionicons": "~2.0.1",
     "jquery": "components/jquery#~2.0",
-    "datatables.net": "~1.10.12",
-    "datatables.net-dt": "~1.10.12",
     "admin-lte": "~2.3.11",
     "html5shiv": "~3.7.3",
     "respond": "~1.4.2",
diff --git a/frontend/vue/toolkit/DataTable.vue b/frontend/vue/toolkit/DataTable.vue
index 4556c1109..ce5b8be6c 100644
--- a/frontend/vue/toolkit/DataTable.vue
+++ b/frontend/vue/toolkit/DataTable.vue
@@ -3,28 +3,30 @@
     <div class="pull-right">
       <button v-for="action in globalActions" class="btn btn-primary" @click="action.callback">{{action.label}}</button>
     </div>
-    <table id="datatable" class="display dataTable">
-      <thead>
-        <tr>
-          <th v-for="header in headers">{{header}}</th>
-          <th v-if="rowActions.length > 0">Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(row, row_index) in rows">
-          <template v-for="(value, col_index) in row">
-            <td v-if="isBoolean(value)"><i class="fa fa-check" v-if="value"></i></td>
-            <td v-else>{{value}}</td>
-          </template>
-          <td>
-            <button v-for="action in rowActions"
-            :class="buttonClassFromType(action.type)"
-            style="margin-right: 10px"
-            @click="action.callback(row)">{{action.label}}</button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+    <div class="table-responsive">
+      <table class="table no-margin">
+        <thead>
+          <tr>
+            <th v-for="header in headers">{{header}}</th>
+            <th v-if="rowActions.length > 0">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, row_index) in rows">
+            <template v-for="(value, col_index) in row">
+              <td v-if="isBoolean(value)"><i class="fa fa-check" v-if="value"></i></td>
+              <td v-else>{{value}}</td>
+            </template>
+            <td>
+              <button v-for="action in rowActions"
+              :class="buttonClassFromType(action.type)"
+              style="margin-right: 10px"
+              @click="action.callback(row)">{{action.label}}</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
diff --git a/remoteappmanager/templates/admin/page.html b/remoteappmanager/templates/admin/page.html
index 58e182251..0f6b4bb9b 100644
--- a/remoteappmanager/templates/admin/page.html
+++ b/remoteappmanager/templates/admin/page.html
@@ -2,10 +2,6 @@
 
 {% set skin = "skin-red" %}
 
-{% block stylesheet %}
-  <link rel="stylesheet" href="{{ static_url("bower_components/datatables.net-dt/css/jquery.dataTables.css") }}" type="text/css"/>
-{% endblock %}
-
 {% block sidebar %}
   <section class="sidebar">
     <ul class="sidebar-menu" id="adminoptions">

From 3bbf3c4bc83ef53a1d04d3da1626a44b9af446c1 Mon Sep 17 00:00:00 2001
From: martinRenou <martin.renou@isae.fr>
Date: Thu, 1 Jun 2017 09:56:54 +0100
Subject: [PATCH 2/6] Fix python tests

---
 .../handlers/admin/tests/test_admin_handlers.py           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/remoteappmanager/handlers/admin/tests/test_admin_handlers.py b/remoteappmanager/handlers/admin/tests/test_admin_handlers.py
index 7b14807d5..b995fab4c 100644
--- a/remoteappmanager/handlers/admin/tests/test_admin_handlers.py
+++ b/remoteappmanager/handlers/admin/tests/test_admin_handlers.py
@@ -44,22 +44,22 @@ def test_failed_auth(self):
 
 class TestApplicationsHandler(TestBaseAccess):
     url = "/user/johndoe/#/applications/"
-    body_string = "datatable"
+    body_string = '<section class="content">'
 
 
 class TestUsersHandler(TestBaseAccess):
     url = "/user/johndoe/#/users/"
-    body_string = "datatable"
+    body_string = '<section class="content">'
 
 
 class TestContainersHandler(TestBaseAccess):
     url = "/user/johndoe/#/containers/"
-    body_string = "datatable"
+    body_string = '<section class="content">'
 
 
 class TestAccountingHandler(TestBaseAccess):
     url = "/user/johndoe/#/users/0/accounting/"
-    body_string = "datatable"
+    body_string = '<section class="content">'
 
     def test_unknown_id(self):
         self._app.db.unexistent_user_id = 123422

From 4db6a1e43a5637fa853671adea85bc15551b1be6 Mon Sep 17 00:00:00 2001
From: martinRenou <martin.renou@isae.fr>
Date: Thu, 1 Jun 2017 12:05:22 +0100
Subject: [PATCH 3/6] Improve visual aspect of adminlte header and clear code

---
 frontend/admin/vue-components/AccountingView.vue | 3 +--
 frontend/vue/toolkit/AdminLTEBox.vue             | 4 +++-
 frontend/vue/toolkit/DataTable.vue               | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/admin/vue-components/AccountingView.vue b/frontend/admin/vue-components/AccountingView.vue
index 1d40a2661..c8e092616 100644
--- a/frontend/admin/vue-components/AccountingView.vue
+++ b/frontend/admin/vue-components/AccountingView.vue
@@ -1,6 +1,5 @@
 <template>
-  <adminlte-box>
-    <div slot="header">Accounting for user {{ $route.params.id }} </div>
+  <adminlte-box :title="'Accounting for user ' + $route.params.id">
     <div>
       <div class="alert alert-danger" v-if="communicationError">
         <strong>Error:</strong> {{communicationError}}
diff --git a/frontend/vue/toolkit/AdminLTEBox.vue b/frontend/vue/toolkit/AdminLTEBox.vue
index 9a190e6be..88a86071d 100644
--- a/frontend/vue/toolkit/AdminLTEBox.vue
+++ b/frontend/vue/toolkit/AdminLTEBox.vue
@@ -2,7 +2,9 @@
   <div class="row">
     <div class="col-md-12">
       <div class="box">
-        <div class="box-header with-border"><slot name="header">{{title}}</slot></div>
+        <div class="box-header with-border">
+          <h3 class="box-title">{{title}}</h3>
+        </div>
         <div class="box-body"><slot></slot></div>
       </div>
     </div>
diff --git a/frontend/vue/toolkit/DataTable.vue b/frontend/vue/toolkit/DataTable.vue
index ce5b8be6c..9f37ae9f8 100644
--- a/frontend/vue/toolkit/DataTable.vue
+++ b/frontend/vue/toolkit/DataTable.vue
@@ -4,7 +4,7 @@
       <button v-for="action in globalActions" class="btn btn-primary" @click="action.callback">{{action.label}}</button>
     </div>
     <div class="table-responsive">
-      <table class="table no-margin">
+      <table class="table table-hover no-margin">
         <thead>
           <tr>
             <th v-for="header in headers">{{header}}</th>

From b516650c8d38daf9f9323182a3dd5267b6c7652f Mon Sep 17 00:00:00 2001
From: martinRenou <martin.renou@isae.fr>
Date: Thu, 1 Jun 2017 12:21:51 +0100
Subject: [PATCH 4/6] Move global action of datatable in the header of the
 adminlte box

gain of space
---
 .../admin/vue-components/AccountingView.vue   | 60 +++++++++----------
 .../admin/vue-components/ApplicationsView.vue | 56 ++++++++---------
 frontend/admin/vue-components/UsersView.vue   |  8 +--
 frontend/vue/toolkit/AdminLTEBox.vue          |  1 +
 frontend/vue/toolkit/DataTable.vue            | 53 ++++++++--------
 5 files changed, 82 insertions(+), 96 deletions(-)

diff --git a/frontend/admin/vue-components/AccountingView.vue b/frontend/admin/vue-components/AccountingView.vue
index c8e092616..4c40c6aa9 100644
--- a/frontend/admin/vue-components/AccountingView.vue
+++ b/frontend/admin/vue-components/AccountingView.vue
@@ -1,34 +1,34 @@
 <template>
   <adminlte-box :title="'Accounting for user ' + $route.params.id">
-    <div>
-      <div class="alert alert-danger" v-if="communicationError">
-        <strong>Error:</strong> {{communicationError}}
-      </div>
-      <data-table
-      :headers.once="table.headers"
-      :rows="table.rows"
-      :globalActions="table.globalActions"
-      :rowActions="table.rowActions">
-      </data-table>
-
-      <new-accounting-dialog
-      v-if="newAccountingDialog.visible"
-      :visible="newAccountingDialog.visible"
-      :userId="newAccountingDialog.userId"
-      @created="newAccountingCreated"
-      @closed="newAccountingDialog.visible = false">
-      </new-accounting-dialog>
-
-      <confirm-dialog
-      v-if="removeAccountingDialog.visible"
-      title="Remove Accounting"
-      :okCallback="removeAccounting"
-      :closeCallback="closeRemoveAccountingDialog">
-        <div>Do you want to remove accounting
-          {{ removeAccountingDialog.accountingToRemove }}?
-        </div>
-      </confirm-dialog>
+    <div class="alert alert-danger" v-if="communicationError">
+      <strong>Error:</strong> {{communicationError}}
     </div>
+
+    <button slot="tools" class="btn btn-primary" @click="newAccountingDialog.visible = true">Create New Entry</button>
+
+    <data-table
+    :headers.once="table.headers"
+    :rows="table.rows"
+    :rowActions="table.rowActions">
+    </data-table>
+
+    <new-accounting-dialog
+    v-if="newAccountingDialog.visible"
+    :visible="newAccountingDialog.visible"
+    :userId="newAccountingDialog.userId"
+    @created="newAccountingCreated"
+    @closed="newAccountingDialog.visible = false">
+    </new-accounting-dialog>
+
+    <confirm-dialog
+    v-if="removeAccountingDialog.visible"
+    title="Remove Accounting"
+    :okCallback="removeAccounting"
+    :closeCallback="closeRemoveAccountingDialog">
+      <div>Do you want to remove accounting
+        {{ removeAccountingDialog.accountingToRemove }}?
+      </div>
+    </confirm-dialog>
   </adminlte-box>
 </template>
 
@@ -48,10 +48,6 @@
             "ID", "Image", "Workspace", "Vol. source", "Vol. target", "Readonly"
           ],
           rows: [],
-          globalActions: [{
-            label: "Create New Entry",
-            callback: () => { this.newAccountingDialog.visible = true; }
-          }],
           rowActions: [{
             label: "Remove",
             callback: this.removeAction
diff --git a/frontend/admin/vue-components/ApplicationsView.vue b/frontend/admin/vue-components/ApplicationsView.vue
index d7682fa7c..8a02e23f0 100644
--- a/frontend/admin/vue-components/ApplicationsView.vue
+++ b/frontend/admin/vue-components/ApplicationsView.vue
@@ -1,32 +1,32 @@
 <template>
   <adminlte-box title="Applications">
-    <div>
-      <div class="alert alert-danger" v-if="communicationError">
-        <strong>Error:</strong> {{communicationError}}
-      </div>
-      <data-table
-      :headers.once="table.headers"
-      :rows="table.rows"
-      :globalActions="table.globalActions"
-      :rowActions="table.rowActions">
-      </data-table>
-
-      <new-application-dialog
-      v-if="newApplicationDialog.visible"
-      :visible="newApplicationDialog.visible"
-      @created="newApplicationCreated"
-      @closed="newApplicationDialogClosed"></new-application-dialog>
-
-      <confirm-dialog
-      v-if="removeApplicationDialog.visible"
-      title="Remove Application"
-      :okCallback="removeApplication"
-      :closeCallback="closeRemoveApplicationDialog">
-        <div>Do you want to remove Application
-          {{removeApplicationDialog.applicationToRemove.name}}
-          ({{removeApplicationDialog.applicationToRemove.id}})</div>
-      </confirm-dialog>
+    <div class="alert alert-danger" v-if="communicationError">
+      <strong>Error:</strong> {{communicationError}}
     </div>
+
+    <button slot="tools" class="btn btn-primary" @click="newApplicationDialog.visible = true">Create New Entry</button>
+
+    <data-table
+    :headers.once="table.headers"
+    :rows="table.rows"
+    :rowActions="table.rowActions">
+    </data-table>
+
+    <new-application-dialog
+    v-if="newApplicationDialog.visible"
+    :visible="newApplicationDialog.visible"
+    @created="newApplicationCreated"
+    @closed="newApplicationDialogClosed"></new-application-dialog>
+
+    <confirm-dialog
+    v-if="removeApplicationDialog.visible"
+    title="Remove Application"
+    :okCallback="removeApplication"
+    :closeCallback="closeRemoveApplicationDialog">
+      <div>Do you want to remove Application
+        {{removeApplicationDialog.applicationToRemove.name}}
+        ({{removeApplicationDialog.applicationToRemove.id}})</div>
+    </confirm-dialog>
   </adminlte-box>
 </template>
 
@@ -44,10 +44,6 @@
         table: {
           headers: ["ID", "Image"],
           rows: [],
-          globalActions: [{
-            label: "Create New Entry",
-            callback: () => { this.newApplicationDialog.visible = true; }
-          }],
           rowActions: [{
             label: "Remove",
             callback: this.removeAction
diff --git a/frontend/admin/vue-components/UsersView.vue b/frontend/admin/vue-components/UsersView.vue
index f77315866..f5ad49c11 100644
--- a/frontend/admin/vue-components/UsersView.vue
+++ b/frontend/admin/vue-components/UsersView.vue
@@ -3,10 +3,12 @@
     <div class="alert alert-danger" v-if="communicationError">
       <strong>Error:</strong> {{communicationError}}
     </div>
+
+    <button slot="tools" class="btn btn-primary" @click="newUserDialog.visible = true">Create New Entry</button>
+
     <data-table
     :headers.once="table.headers"
     :rows="table.rows"
-    :globalActions="table.globalActions"
     :rowActions="table.rowActions">
     </data-table>
     <new-user-dialog
@@ -38,10 +40,6 @@
         table: {
           headers: ["ID", "Username"],
           rows: [],
-          globalActions: [{
-            label: "Create New Entry",
-            callback: () => { this.newUserDialog.visible = true; }
-          }],
           rowActions: [{
             label: "Policies",
             callback: this.showPolicyAction,
diff --git a/frontend/vue/toolkit/AdminLTEBox.vue b/frontend/vue/toolkit/AdminLTEBox.vue
index 88a86071d..a0763f37c 100644
--- a/frontend/vue/toolkit/AdminLTEBox.vue
+++ b/frontend/vue/toolkit/AdminLTEBox.vue
@@ -4,6 +4,7 @@
       <div class="box">
         <div class="box-header with-border">
           <h3 class="box-title">{{title}}</h3>
+          <div class="box-tools"><slot name="tools"></slot></div>
         </div>
         <div class="box-body"><slot></slot></div>
       </div>
diff --git a/frontend/vue/toolkit/DataTable.vue b/frontend/vue/toolkit/DataTable.vue
index 9f37ae9f8..0428715ae 100644
--- a/frontend/vue/toolkit/DataTable.vue
+++ b/frontend/vue/toolkit/DataTable.vue
@@ -1,39 +1,34 @@
 <template>
-  <div>
-    <div class="pull-right">
-      <button v-for="action in globalActions" class="btn btn-primary" @click="action.callback">{{action.label}}</button>
-    </div>
-    <div class="table-responsive">
-      <table class="table table-hover no-margin">
-        <thead>
-          <tr>
-            <th v-for="header in headers">{{header}}</th>
-            <th v-if="rowActions.length > 0">Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(row, row_index) in rows">
-            <template v-for="(value, col_index) in row">
-              <td v-if="isBoolean(value)"><i class="fa fa-check" v-if="value"></i></td>
-              <td v-else>{{value}}</td>
-            </template>
-            <td>
-              <button v-for="action in rowActions"
-              :class="buttonClassFromType(action.type)"
-              style="margin-right: 10px"
-              @click="action.callback(row)">{{action.label}}</button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+  <div class="table-responsive">
+    <table class="table table-hover no-margin">
+      <thead>
+        <tr>
+          <th v-for="header in headers">{{header}}</th>
+          <th v-if="rowActions.length > 0">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, row_index) in rows">
+          <template v-for="(value, col_index) in row">
+            <td v-if="isBoolean(value)"><i class="fa fa-check" v-if="value"></i></td>
+            <td v-else>{{value}}</td>
+          </template>
+          <td>
+            <button v-for="action in rowActions"
+            :class="buttonClassFromType(action.type)"
+            style="margin-right: 10px"
+            @click="action.callback(row)">{{action.label}}</button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
 
 <script>
   module.exports = {
     props: [
-      "headers", "rows", "globalActions", "rowActions"
+      "headers", "rows", "rowActions"
     ],
     methods: {
       isBoolean: function(value) {

From 6a890e09eca0779ec47e1a933cdb29774d503810 Mon Sep 17 00:00:00 2001
From: martinRenou <martin.renou@isae.fr>
Date: Fri, 2 Jun 2017 11:28:05 +0100
Subject: [PATCH 5/6] Fix jstests

---
 frontend/tests/tests/vue/components/test_DataTable.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/tests/tests/vue/components/test_DataTable.js b/frontend/tests/tests/vue/components/test_DataTable.js
index 93b0cd496..cdaf51e96 100644
--- a/frontend/tests/tests/vue/components/test_DataTable.js
+++ b/frontend/tests/tests/vue/components/test_DataTable.js
@@ -6,13 +6,9 @@ QUnit.test("rendering", function (assert) {
   assert.equal(helpers.getRenderedText(DataTable, {
     headers: ["foo", "bar"],
     rows: [[1,2], [3,4]],
-    globalActions: [{
-      label: "New",
-      callback: function() {}
-    }],
     rowActions: [{
       label: "Remove",
       callback: function() {}
     }]
-  }), "New foobar Actions 12 Remove34 Remove");
+  }), "foobar Actions 12 Remove34 Remove");
 });

From dccf9884baa80b3ac89263118984d96c31ab14ba Mon Sep 17 00:00:00 2001
From: martinRenou <martin.renou@isae.fr>
Date: Fri, 2 Jun 2017 16:20:57 +0100
Subject: [PATCH 6/6] Review

---
 .../admin/vue-components/AccountingView.vue   |  7 +-
 .../admin/vue-components/ApplicationsView.vue |  7 +-
 frontend/admin/vue-components/UsersView.vue   |  7 +-
 .../tests/vue/components/test_DataTable.js    |  6 +-
 frontend/vue/toolkit/DataTable.vue            | 64 ++++++++++++-------
 5 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/frontend/admin/vue-components/AccountingView.vue b/frontend/admin/vue-components/AccountingView.vue
index 4c40c6aa9..042b93431 100644
--- a/frontend/admin/vue-components/AccountingView.vue
+++ b/frontend/admin/vue-components/AccountingView.vue
@@ -4,11 +4,10 @@
       <strong>Error:</strong> {{communicationError}}
     </div>
 
-    <button slot="tools" class="btn btn-primary" @click="newAccountingDialog.visible = true">Create New Entry</button>
-
     <data-table
     :headers.once="table.headers"
     :rows="table.rows"
+    :globalActions="table.globalActions"
     :rowActions="table.rowActions">
     </data-table>
 
@@ -48,6 +47,10 @@
             "ID", "Image", "Workspace", "Vol. source", "Vol. target", "Readonly"
           ],
           rows: [],
+          globalActions: [{
+            label: "Create New Entry",
+            callback: () => {this.newAccountingDialog.visible = true;}
+          }],
           rowActions: [{
             label: "Remove",
             callback: this.removeAction
diff --git a/frontend/admin/vue-components/ApplicationsView.vue b/frontend/admin/vue-components/ApplicationsView.vue
index 8a02e23f0..0ea68d17f 100644
--- a/frontend/admin/vue-components/ApplicationsView.vue
+++ b/frontend/admin/vue-components/ApplicationsView.vue
@@ -4,11 +4,10 @@
       <strong>Error:</strong> {{communicationError}}
     </div>
 
-    <button slot="tools" class="btn btn-primary" @click="newApplicationDialog.visible = true">Create New Entry</button>
-
     <data-table
     :headers.once="table.headers"
     :rows="table.rows"
+    :globalActions="table.globalActions"
     :rowActions="table.rowActions">
     </data-table>
 
@@ -44,6 +43,10 @@
         table: {
           headers: ["ID", "Image"],
           rows: [],
+          globalActions: [{
+            label: "Create New Entry",
+            callback: () => {this.newApplicationDialog.visible = true;}
+          }],
           rowActions: [{
             label: "Remove",
             callback: this.removeAction
diff --git a/frontend/admin/vue-components/UsersView.vue b/frontend/admin/vue-components/UsersView.vue
index f5ad49c11..4661d784c 100644
--- a/frontend/admin/vue-components/UsersView.vue
+++ b/frontend/admin/vue-components/UsersView.vue
@@ -4,11 +4,10 @@
       <strong>Error:</strong> {{communicationError}}
     </div>
 
-    <button slot="tools" class="btn btn-primary" @click="newUserDialog.visible = true">Create New Entry</button>
-
     <data-table
     :headers.once="table.headers"
     :rows="table.rows"
+    :globalActions="table.globalActions"
     :rowActions="table.rowActions">
     </data-table>
     <new-user-dialog
@@ -40,6 +39,10 @@
         table: {
           headers: ["ID", "Username"],
           rows: [],
+          globalActions: [{
+            label: "Create New Entry",
+            callback: () => {this.newUserDialog.visible = true;}
+          }],
           rowActions: [{
             label: "Policies",
             callback: this.showPolicyAction,
diff --git a/frontend/tests/tests/vue/components/test_DataTable.js b/frontend/tests/tests/vue/components/test_DataTable.js
index cdaf51e96..93b0cd496 100644
--- a/frontend/tests/tests/vue/components/test_DataTable.js
+++ b/frontend/tests/tests/vue/components/test_DataTable.js
@@ -6,9 +6,13 @@ QUnit.test("rendering", function (assert) {
   assert.equal(helpers.getRenderedText(DataTable, {
     headers: ["foo", "bar"],
     rows: [[1,2], [3,4]],
+    globalActions: [{
+      label: "New",
+      callback: function() {}
+    }],
     rowActions: [{
       label: "Remove",
       callback: function() {}
     }]
-  }), "foobar Actions 12 Remove34 Remove");
+  }), "New foobar Actions 12 Remove34 Remove");
 });
diff --git a/frontend/vue/toolkit/DataTable.vue b/frontend/vue/toolkit/DataTable.vue
index 0428715ae..c8941d2fe 100644
--- a/frontend/vue/toolkit/DataTable.vue
+++ b/frontend/vue/toolkit/DataTable.vue
@@ -1,34 +1,39 @@
 <template>
-  <div class="table-responsive">
-    <table class="table table-hover no-margin">
-      <thead>
-        <tr>
-          <th v-for="header in headers">{{header}}</th>
-          <th v-if="rowActions.length > 0">Actions</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(row, row_index) in rows">
-          <template v-for="(value, col_index) in row">
-            <td v-if="isBoolean(value)"><i class="fa fa-check" v-if="value"></i></td>
-            <td v-else>{{value}}</td>
-          </template>
-          <td>
-            <button v-for="action in rowActions"
-            :class="buttonClassFromType(action.type)"
-            style="margin-right: 10px"
-            @click="action.callback(row)">{{action.label}}</button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <div class="column-container">
+    <div class="align-right">
+      <button v-for="action in globalActions" class="btn btn-primary" @click="action.callback">{{action.label}}</button>
+    </div>
+    <div class="table-responsive">
+      <table class="table table-hover no-margin">
+        <thead>
+          <tr>
+            <th v-for="header in headers">{{header}}</th>
+            <th v-if="rowActions.length > 0">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, row_index) in rows">
+            <template v-for="(value, col_index) in row">
+              <td v-if="isBoolean(value)"><i class="fa fa-check" v-if="value"></i></td>
+              <td v-else>{{value}}</td>
+            </template>
+            <td>
+              <button v-for="action in rowActions"
+              :class="buttonClassFromType(action.type)"
+              style="margin-right: 10px"
+              @click="action.callback(row)">{{action.label}}</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
 <script>
   module.exports = {
     props: [
-      "headers", "rows", "rowActions"
+      "headers", "rows", "globalActions", "rowActions"
     ],
     methods: {
       isBoolean: function(value) {
@@ -42,3 +47,14 @@
     }
   };
 </script>
+
+<style scoped>
+  .column-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .align-right {
+    align-self: flex-end;
+  }
+</style>