render value for each column

src/plugins/LADTable/components/LADHead.vue

@@ -0,0 +1,50 @@
+<template>
+<thead>
+    <tr>
+        <th>Name</th>
+        <th>Timestamp</th>
+        <th v-for="name in columnNames"
+            :key="name"
+        >
+            {{ name }}
+        </th>
+        <th v-if="hasUnits">Unit</th>
+    </tr>
+</thead>
+</template>
+
+<script>
+
+export default {
+    props: {
+        item: {
+            type: Object,
+            required: true
+        },
+        columnNames: {
+            type: Array,
+            required: true
+        }
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        hasUnits() {
+            // let itemsWithUnits = this.items.filter((item) => {
+            //     let metadata = this.openmct.telemetry.getMetadata(item.domainObject);
+
+            //     return this.metadataHasUnits(metadata.valueMetadatas);
+
+            // });
+
+            // return itemsWithUnits.length !== 0;
+            return false;
+        }
+    },
+    mounted() {
+        // console.log(this.names);
+    }
+};
+
+</script>

src/plugins/LADTable/components/LADRow.vue

@@ -29,9 +29,11 @@
     <td class="js-first-data">{{ domainObject.name }}</td>
     <td class="js-second-data">{{ formattedTimestamp }}</td>
     <td
+        v-for="name in columnNames"
+        :key="name"
         class="js-third-data"
         :class="valueClass"
-    >{{ value }}</td>
+    >{{ value[name] }}</td>
     <td
         v-if="hasUnits"
         class="js-units"
@@ -63,6 +65,10 @@ export default {
         hasUnits: {
             type: Boolean,
             requred: true
+        },
+        columnNames: {
+            type: Array,
+            required: true
         }
     },
     data() {
@@ -82,6 +88,7 @@ export default {
         }
     },
     mounted() {
+        console.log(this.colNames);
         this.metadata = this.openmct.telemetry.getMetadata(this.domainObject);
         this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
         this.keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
@@ -96,12 +103,17 @@ export default {
 
         this.timestampKey = this.openmct.time.timeSystem().key;
 
+        // this.valueMetadata = this
+        //     .metadata
+        //     .valuesForHints(['range'])[0];
+
+        // this.valueKey = this.valueMetadata.key;
         this.valueMetadata = this
             .metadata
-            .valuesForHints(['range'])[0];
-
-        this.valueKey = this.valueMetadata.key;
-
+            .valuesForHints(['range']);
+        // console.log(this.valueMetadata);
+        this.valueKey = this.valueMetadata.map(value => value.key);
+        // console.log(this.valueKey);
         this.unsubscribe = this.openmct
             .telemetry
             .subscribe(this.domainObject, this.updateValues);
@@ -123,9 +135,18 @@ export default {
             let limit;
 
             if (this.shouldUpdate(newTimestamp)) {
+                // console.log(datum);
                 this.datum = datum;
                 this.timestamp = newTimestamp;
-                this.value = this.formats[this.valueKey].format(datum);
+                // console.log(this.formats);
+                // this.value = this.formats[this.valueKey].format(datum);
+                this.value = {};
+                this.valueKey.forEach(key => {
+                    let formattedDatum = this.formats[key].format(datum);
+                    this.value[key] = formattedDatum;
+                    limit = this.limitEvaluator.evaluate(formattedDatum, this.valueMetadata);
+                });
+                // console.log(this.value);
                 limit = this.limitEvaluator.evaluate(datum, this.valueMetadata);
                 if (limit) {
                     this.valueClass = limit.cssClass;

src/plugins/LADTable/components/LADTable.vue

@@ -22,19 +22,17 @@
 
 <template>
 <div class="c-lad-table-wrapper u-style-receiver js-style-receiver">
-    <table class="c-table c-lad-table">
-        <thead>
-            <tr>
-                <th>Name</th>
-                <th>Timestamp</th>
-                <th>Value</th>
-                <th v-if="hasUnits">Unit</th>
-            </tr>
-        </thead>
+    <table v-for="ladRow in items"
+           :key="ladRow.key"
+           class="c-table c-lad-table"
+    >
+        <lad-head
+            :item="ladRow"
+            :column-names="columnNames(ladRow)"
+        />
         <tbody>
             <lad-row
-                v-for="ladRow in items"
-                :key="ladRow.key"
+                :column-names="columnNames(ladRow)"
                 :domain-object="ladRow.domainObject"
                 :path-to-table="objectPath"
                 :has-units="hasUnits"
@@ -47,10 +45,12 @@
 
 <script>
 import LadRow from './LADRow.vue';
+import LadHead from './LADHead.vue';
 
 export default {
     components: {
-        LadRow
+        LadRow,
+        LadHead
     },
     inject: ['openmct', 'currentView'],
     props: {
@@ -94,6 +94,13 @@ export default {
         this.composition.off('reorder', this.reorder);
     },
     methods: {
+        columnNames(item) {
+            let metadata = this.openmct.telemetry.getMetadata(item.domainObject);
+            let valueMetadata = metadata
+                .valuesForHints(['range']);
+
+            return valueMetadata.map(value => value.key);
+        },
         addItem(domainObject) {
             let item = {};
             item.domainObject = domainObject;