add row actions

src/views/lists/userlist.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="Userlist">
         <h1>Userlist</h1>
-        <scroll-table :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="id" :orderDesc="true" limit="50"></scroll-table>
+        <scroll-table :actions="actions" :columns="columns" :new-rows="newRows" :has-more="hasMore" :loading="loading" :handler="more" orderBy="username" :orderDesc="false" limit="50"></scroll-table>
     </div>
 </template>
 
@@ -15,51 +15,63 @@ export default {
     },
     data() {
         return {
-           columns: [
-               {
-                   heading: 'ID',
-                   prop: 'ID',
-                   orderBy: 'id'
-               },
-               {
-                   heading: 'Benutzername',
-                   prop: 'Username',
-                   orderBy: 'username'
-               },
-               {
-                   heading: 'Firma',
-                   prop: 'Company',
-                   orderBy: 'company'
-               },
-               {
-                   heading: 'Nachname',
-                   prop: 'Lastname',
-                   orderBy: 'lastname'
-               },
-               {
-                   heading: 'Vorname',
-                   prop: 'Firstname',
-                   orderBy: 'firstname'
-               },
-               {
-                   heading: 'Email',
-                   prop: 'Email',
-                   orderBy: 'email'
-               },
-               {
-                   heading: 'Reseller',
-                   prop: 'Reseller.Username'
-               },
-               {
-                   heading: 'Render',
-                   render(row) {
-                       return 'ID:' + row.ID;
-                   }
-               }
-           ],
-           newRows: [ ],
-           hasMore: true,
-           loading: false
+            actions: [{
+                title: 'Edit',
+                icon: 'icon-pencil',
+                action(row) {
+                    console.log("yay edit", row);
+                }
+            }, {
+                title: 'Duplicate',
+                icon: 'icon-docs',
+                action(row) {
+                    console.log("yay duplicate", row);
+                }
+            }, {
+                title: 'Hide',
+                icon: 'icon-eye-off',
+                action(row) {
+                    console.log("yay hide", row);
+                }
+            }],
+            columns: [{
+                heading: 'ID',
+                prop: 'ID',
+                orderBy: 'id',
+                align: 'left'
+            }, {
+                heading: 'Benutzername',
+                prop: 'Username',
+                orderBy: 'username',
+                align: 'center'
+            }, {
+                heading: 'Firma',
+                prop: 'Company',
+                orderBy: 'company'
+            }, {
+                heading: 'Nachname',
+                prop: 'Lastname',
+                orderBy: 'lastname'
+            }, {
+                heading: 'Vorname',
+                prop: 'Firstname',
+                orderBy: 'firstname'
+            }, {
+                heading: 'Email',
+                prop: 'Email',
+                orderBy: 'email'
+            }, {
+                heading: 'Reseller',
+                prop: 'Reseller.Username'
+            }, {
+                heading: 'Render',
+                render(row) {
+                   return 'ID:' + row.ID;
+                }
+            }],
+            newRows: [ ],
+            hasMore: true,
+            loading: false
         }
     },
     methods: {