Move table cell selection to table cell component (#2436)

src/plugins/telemetryTable/components/table-cell.vue

@@ -20,7 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 <template>
-    <td>{{formattedValue}}</td>
+    <td @click="selectCell($event.currentTarget, columnKey)">{{formattedValue}}</td>
 </template>
 <script>
 export default {
@@ -33,11 +33,38 @@ export default {
         columnKey: {
             type: String,
             require: true
+        },
+        objectPath: {
+            type: Array,
+            require: false
         }
     },
+    methods: {
+        selectCell(element, columnKey) {
+            if (this.isSelectable) {
+                this.openmct.selection.select([{
+                    element: element,
+                    context: {
+                        type: 'table-cell',
+                        row: this.row.objectKeyString,
+                        column: columnKey
+                    }
+                },{
+                    element: this.openmct.layout.$refs.browseObject.$el,
+                    context: {
+                        item: this.objectPath[0]
+                    }
+                }], false);
+                event.stopPropagation();
+            }
+        },
+    },
     computed: {
         formattedValue() {
             return this.row.getFormattedValue(this.columnKey);
+        },
+        isSelectable() {
+            return this.row.columns[this.columnKey].selectable;
         }
     }
 };

src/plugins/telemetryTable/components/table-row.vue

@@ -34,7 +34,7 @@
         :style="columnWidths[key] === undefined ? {} : { width: columnWidths[key] + 'px', 'max-width': columnWidths[key] + 'px'}"
         :title="formattedRow[key]"
         :class="[cellLimitClasses[key], selectableColumns[key] ? 'is-selectable' : '']"
-        @click="selectCell($event.currentTarget, key)"
+        :objectPath="objectPath"
         :row="row">
     </component>
 </tr>
@@ -86,6 +86,10 @@ export default {
             type: Object,
             required: true
         },
+        objectPath: {
+            type: Array,
+            required: false
+        },
         rowIndex: {
             type: Number,
             required: false,

src/plugins/telemetryTable/components/table.vue

@@ -120,6 +120,7 @@
                         :headers="headers"
                         :columnWidths="columnWidths"
                         :rowIndex="rowIndex"
+                        :objectPath="objectPath"
                         :rowOffset="rowOffset"
                         :rowHeight="rowHeight"
                         :row="row"