Add SmartTable Vue component.

web/package-lock.json

@@ -14675,6 +14675,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vuejs-smart-table": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/vuejs-smart-table/-/vuejs-smart-table-0.0.3.tgz",
+      "integrity": "sha512-I4dJal5f4O0zYrDcrABmZCOrYhL0Xw0J0rkolEe6argj5rRXAv9cquh8oniBIJabPflA5Sx2OVIwhJURWZK/3w==",
+      "requires": {
+        "vue": "^2.5.17"
+      }
+    },
     "vuex": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz",

web/package.json

@@ -23,6 +23,7 @@
     "vue-class-component": "^6.0.0",
     "vue-property-decorator": "^7.0.0",
     "vue-router": "^3.0.1",
+    "vuejs-smart-table": "0.0.3",
     "vuex": "^3.0.1",
     "vuex-module-decorators": "^0.9.8"
   },

web/src/main.ts

@@ -6,9 +6,12 @@ import { store } from './store';
 import router from './router';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
+import SmartTable from 'vuejs-smart-table';
+
 import './registerServiceWorker';
 
 Vue.component('fa-icon', FontAwesomeIcon);
+Vue.use(SmartTable);
 
 new Vue({
   router,

web/src/types/vuejs-smart-table.d.ts

@@ -0,0 +1,8 @@
+declare module 'vuejs-smart-table' {
+  var VTable: any;
+  var VTh: any;
+  var VTr: any;
+  var SmartPagination: any;
+  var defaultExport: any;
+  export default defaultExport;
+}

web/src/views/UserAccount.vue

@@ -10,6 +10,20 @@
     </fieldset>
     <section class=api-tokens>
       <h2>API Tokens</h2>
+      <v-table :data=apiTokens>
+        <thead slot=head>
+          <v-th sortKey="name">Name</v-th>
+          <v-th sortKey="created">Created</v-th>
+          <v-th sortKey="expires">Expires</v-th>
+        </thead>
+        <tbody slot=body slot-scope="{displayData}">
+          <tr v-for="token in displayData" :key="token.id">
+            <td>{{token.name}}</td>
+            <td>{{token.created}}</td>
+            <td>{{token.expires}}</td>
+          </tr>
+        </tbody>
+      </v-table>
     </section>
     <section class=device-data>
       <h2>Data on this Device</h2>