app/ayanova/src/components/widgetlist.vue

@@ -1,20 +1,28 @@
 <template>
   <v-flex xs12 md4>
     <v-data-table
+      v-model="selected"
       :headers="headers"
       :items="Items"
+      item-key="id"
       :pagination.sync="pagination"
       :total-items="totalItems"
       :loading="loading"
       class="elevation-1"
+      select-all
     >
       <template slot="items" slot-scope="props">
-        <td>{{ props.item.name }}</td>
-        <td class="text-xs-right">{{ props.item.serial }}</td>
-        <td class="text-xs-right">{{ props.item.dollarAmount }}</td>
-        <td class="text-xs-right">{{ props.item.active }}</td>
-        <td class="text-xs-right">{{ props.item.roles }}</td>
-        <td class="text-xs-right">{{ props.item.startDate }}</td>
+        <td>
+          <v-checkbox v-model="props.selected" color="secondary" hide-details></v-checkbox>
+        </td>
+        <td>
+          <div style="width:200px;">{{ props.item.name }}</div>
+        </td>
+        <td class="text-xs-left">{{ props.item.serial }}</td>
+        <td class="text-xs-left">{{ props.item.dollarAmount }}</td>
+        <td class="text-xs-left">{{ props.item.active }}</td>
+        <td class="text-xs-left">{{ props.item.roles }}</td>
+        <td class="text-xs-left">{{ props.item.startDate }}</td>
       </template>
     </v-data-table>
   </v-flex>
@@ -31,10 +39,10 @@ export default {
       Items: [],
       loading: true,
       pagination: {},
+      selected: [],
       headers: [
         {
           text: "Widget",
-          align: "left",
           value: "name"
         },
         { text: "Serial", value: "serial" },
@@ -66,6 +74,10 @@ export default {
     this.getDataFromApi();
   },
   methods: {
+    toggleAll() {
+      if (this.selected.length) this.selected = [];
+      else this.selected = this.Items.slice();
+    },
     getDataFromApi() {
       var listOptions = {
         Offset: 0,