Renamed DictionaryTable to DataTable

src/components/DataTable.vue

@@ -0,0 +1,64 @@
+<template>
+  <table>
+    <thead>
+      <tr>
+        <template v-for="header in headers">
+          <th :key="header">{{ header }}</th>
+        </template>
+      </tr>
+    </thead>
+    <tbody>
+      <template v-for="dataset in data">
+        <tr :key="dataset[0]">
+          <template v-for="item in dataset">
+            <td :key="item">{{ item }}</td>
+            <template v-if="isHexValue(item)">
+              <td :key="item" :style="'background-color:'+item"></td>
+            </template>
+          </template>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  props: {
+    headers: Array,
+    data: Array
+  },
+  methods: {
+    isHexValue(value) {
+      return /^#[0-9a-f]{6}$/i.test(value) ? value : false;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+table {
+  border-collapse: collapse;
+
+  th,
+  td {
+    padding: 1em;
+  }
+}
+
+thead {
+  tr {
+    background-color: burlywood;
+  }
+}
+
+tbody {
+  tr:nth-child(odd) {
+    background-color: #eee;
+  }
+
+  td:first-child {
+    text-align: right;
+  }
+}
+</style>