correct layout, add chart

src/components/TableView.vue

@@ -1,16 +1,21 @@
 <template>
-  <table>
-    <tr
-      v-for="(item,key) of items"
-      :key="key"
-    >
-      <td
-        v-for="i_key of Object.keys(item)"
-        :key="i_key"
-        v-text="item[i_key]"
-      />
-    </tr>
-  </table>
+  <div
+    ref="view"
+    class="table_view"
+  >
+    <table>
+      <tr
+        v-for="(item,key) of items"
+        :key="key"
+      >
+        <td
+          v-for="(col,c_key) of columns"
+          :key="c_key"
+          v-text="item[col]"
+        />
+      </tr>
+    </table>
+  </div>
 </template>
 
 <script>
@@ -19,11 +24,35 @@ export default {
     items: {
       type:     Array,
       required: true
+    },
+    columns: {
+      type:     Array,
+      required: true
     }
   }
 };
 </script>
 
 <style>
+.table_view {
+  overflow: auto;
+  border: 1px solid blue;
+  width: max-content;
+  max-width: 100%;
+  max-height: 100vh;
+  font-size: 12px;
+}
 
+table {
+  border-collapse: collapse;
+}
+
+tr:nth-child(odd) {
+  background-color: #ddd;
+}
+
+td {
+  border: 1px solid black;
+  margin: 0;
+}
 </style>