feat(ui): show/hide node table columns

src/components/nodes-table/index.vue

@@ -1,6 +1,6 @@
 <template>
   <v-data-table
-    :headers="headers"
+    :headers="activeHeaders"
     :items="tableNodes"
     :mobile-breakpoint="0"
     :footer-props="{
@@ -29,16 +29,50 @@
       </v-layout>
       <v-layout row ma-2 justify-start>
         <v-flex xs12>
-          <v-btn
-            color="blue darken-1"
-            text
-            @click.native="filterSelected()"
-            :disabled="selected.length === 0"
-            >Filter Selected</v-btn
-          >
-          <v-btn color="blue darken-1" text @click.native="resetFilters()"
-            >Reset Filters</v-btn
-          >
+          <v-menu v-model="headersMenu" :close-on-content-click="false">
+            <template v-slot:activator="{ on }">
+              <v-btn v-on="on">
+                <v-icon>menu</v-icon>
+                Columns
+              </v-btn>
+            </template>
+            <v-card>
+              <v-card-text>
+                <v-checkbox
+                  v-for="col in selectableHeaders"
+                  :key="col.value"
+                  hide-details
+                  :label="col.text"
+                  v-model="col.active"
+                ></v-checkbox>
+              </v-card-text>
+            </v-card>
+          </v-menu>
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-btn
+                color="blue darken-1"
+                text
+                v-on="on"
+                @click.native="filterSelected()"
+                :disabled="selected.length === 0"
+                >Filter Selected</v-btn
+              >
+            </template>
+            <span>Show only selected nodes</span>
+          </v-tooltip>
+          <v-tooltip bottom>
+            <template v-slot:activator="{ on }">
+              <v-btn
+                color="blue darken-1"
+                text
+                v-on="on"
+                @click.native="resetFilters()"
+                >Reset Filters</v-btn
+              >
+            </template>
+            <span>Reset all column filters</span>
+          </v-tooltip>
           <v-tooltip bottom>
             <template v-slot:activator="{ on }">
               <v-btn text color="green" v-on="on" @click="$emit('importNodes')">
@@ -64,7 +98,7 @@
       </v-layout>
     </template>
     <template
-      v-for="column in headers"
+      v-for="column in activeHeaders"
       v-slot:[`header.${column.value}`]="{ header }"
     >
       <span :key="column.value">

src/components/nodes-table/nodes-table.js

@@ -23,23 +23,93 @@ export default {
     filters: {},
     sorting: {},
     selected: [],
+    headersMenu: false,
     headers: [
-      { text: 'ID', type: 'number', value: 'id', groupable: false },
-      { text: 'Manufacturer', type: 'string', value: 'manufacturer' },
-      { text: 'Product', type: 'string', value: 'productDescription' },
-      { text: 'Product code', type: 'string', value: 'productLabel' },
-      { text: 'Name', type: 'string', value: 'name' },
-      { text: 'Location', type: 'string', value: 'loc' },
-      { text: 'Secure', type: 'boolean', value: 'isSecure' },
-      { text: 'Beaming', type: 'boolean', value: 'isBeaming' },
-      { text: 'Failed', type: 'boolean', value: 'failed' },
-      { text: 'Status', type: 'string', value: 'status' },
-      { text: 'Interview stage', type: 'string', value: 'interviewStage' },
+      {
+        text: 'ID',
+        type: 'number',
+        value: 'id',
+        groupable: false,
+        selectable: false,
+        active: true
+      },
+      {
+        text: 'Manufacturer',
+        type: 'string',
+        value: 'manufacturer',
+        selectable: true,
+        active: true
+      },
+      {
+        text: 'Product',
+        type: 'string',
+        value: 'productDescription',
+        selectable: true,
+        active: true
+      },
+      {
+        text: 'Product code',
+        type: 'string',
+        value: 'productLabel',
+        selectable: true,
+        active: false
+      },
+      {
+        text: 'Name',
+        type: 'string',
+        value: 'name',
+        selectable: true,
+        active: true
+      },
+      {
+        text: 'Location',
+        type: 'string',
+        value: 'loc',
+        selectable: true,
+        active: true
+      },
+      {
+        text: 'Secure',
+        type: 'boolean',
+        value: 'isSecure',
+        selectable: true,
+        active: false
+      },
+      {
+        text: 'Beaming',
+        type: 'boolean',
+        value: 'isBeaming',
+        selectable: true,
+        active: false
+      },
+      {
+        text: 'Failed',
+        type: 'boolean',
+        value: 'failed',
+        selectable: true,
+        active: false
+      },
+      {
+        text: 'Status',
+        type: 'string',
+        value: 'status',
+        selectable: true,
+        active: true
+      },
+      {
+        text: 'Interview stage',
+        type: 'string',
+        value: 'interviewStage',
+        selectable: true,
+        active: true
+      },
       {
         text: 'Last Active',
         type: 'date',
         value: 'lastActive',
-        groupable: false
+        groupable: false,
+        selectable: true,
+        active: true
       }
     ]
   }),
@@ -115,6 +185,12 @@ export default {
     }
   },
   computed: {
+    activeHeaders () {
+      return this.headers.filter(col => col.active)
+    },
+    selectableHeaders () {
+      return this.headers.filter(col => col.selectable)
+    },
     nodeCollection () {
       return new NodeCollection(this.nodes)
     },