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>

src/components/DictionaryTable.vue

@@ -1,84 +0,0 @@
-<template>
-  <table>
-    <thead>
-      <tr>
-        <th>{{ keyHeader }}</th>
-        <th>{{ valueHeader }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <template v-for="item in collection">
-        <tr :key="item[0]">
-          <td>{{ item[0] }}</td>
-          <td>
-            {{ item[1] }}
-            <template v-if="isHexValue(item[1])">
-              <span
-                :class="{ 'hex-color': isHexValue(item[1]) }"
-                :style="`background-color: ${isHexValue(item[1])}`"
-              ></span>
-            </template>
-          </td>
-        </tr>
-      </template>
-    </tbody>
-  </table>
-</template>
-
-<script>
-export default {
-  props: {
-    keyHeader: String,
-    valueHeader: String,
-    collection: Array
-  },
-  methods: {
-    isHexValue(value) {
-      return /^#[0-9a-f]{6}$/i.test(value) ? value : false;
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-table {
-  width: 100%;
-  border-collapse: collapse;
-
-  th,
-  td {
-    padding: 1em;
-    width: 50%;
-  }
-}
-
-thead {
-  tr {
-    background-color: burlywood;
-  }
-}
-
-tbody {
-  tr:nth-child(odd) {
-    background-color: #eee;
-  }
-
-  td:first-child {
-    text-align: right;
-  }
-}
-
-.hex-color {
-  display: inline-block;
-  width: 50%;
-  height: 100%;
-}
-
-@function high-contrast-text-color($color) {
-  @if (lightness($color) > 50) {
-    @return #000000;
-  } @else {
-    @return #ffffff;
-  }
-}
-</style>