table headings

src/components/TableView.vue

@@ -4,6 +4,13 @@
     class="table_view"
   >
     <table>
+      <tr v-if="headings.length > 0">
+        <th
+          v-for="(heading,key) of headings"
+          :key="key"
+          v-text="heading"
+        />
+      </tr>
       <tr
         v-for="(item,key) of items"
         :key="key"
@@ -30,6 +37,10 @@ export default {
     columns: {
       type:     Array,
       required: true
+    },
+    headings: {
+      type:    Array,
+      default: () => []
     }
   },
   methods: { resolve_data }
@@ -38,7 +49,7 @@ export default {
 
 <style>
 .table_view {
-  overflow: auto;
+  overflow-y: scoll;
   width: max-content;
   max-width: 100%;
   max-height: 100vh;
@@ -54,7 +65,7 @@ tr:nth-child(odd) {
   color: var(--color-accent);
 }
 
-td {
+td, th {
   border: var(--sub-container-border);
   padding: 3px;
 }

src/components/ViewComponent.vue

@@ -10,6 +10,7 @@
     v-else
     :items="data"
     :columns="config.columns"
+    :headings="config.headings"
   />
 </template>
 

src/default.js

@@ -6,17 +6,10 @@
  */
 
 export default {
-  sources:  [
-    {
-      name:   'default',
-      limit:  140,
-      offset: 0
-    },
-    {
-      name:   'secondary',
-      limit:  10,
-      offset: 0
-    }
+  sources: [
+    { name: 'default', limit: 140, offset: 0 },
+    { name: 'secondary', limit: 10, offset: 0 },
+    { name: 'version', limit: 1, offset: 0 }
   ],
   displays: [
     {
@@ -50,12 +43,31 @@ export default {
       ]
     },
     {
-      source:  'secondary',
-      type:    'table',
+      source:   'secondary',
+      type:     'table',
+      headings: [
+        'timestamp',
+        'temperature',
+        'humidity',
+        'light',
+        'fan'
+      ],
       columns: [
         'timestamp',
-        'data'
+        'data/temperature',
+        'data/humidity',
+        'data/light',
+        'data/latch'
       ]
+    },
+    {
+      source:            'version',
+      type:              'table',
+      headings:          [ 'hardware version' ],
+      columns:           [ 'message' ],
+      x:                 '',
+      y:                 [],
+      remove_duplicates: false
     }
   ]
 };

src/template.js

@@ -47,6 +47,12 @@ export default {
               'chart'
             ]
           },
+          {
+            name:  'headings',
+            type:  'array',
+            child: { type: 'string' },
+            if:    { prop: 'type', op: '=', val: 'table' }
+          },
           {
             name:  'columns',
             type:  'array',