From 3440797555e26c5f8a0aab1d324213b4b7a61e44 Mon Sep 17 00:00:00 2001
From: Finn <finn@hering.sh>
Date: Sun, 22 Aug 2021 16:23:54 +0200
Subject: [PATCH] add header prop and handling of that

---
 src/components/HeaderlessKeyValueTable.vue | 34 ------------
 src/components/KeyValueTable.vue           | 63 ++++++++++++++++++++++
 2 files changed, 63 insertions(+), 34 deletions(-)
 delete mode 100644 src/components/HeaderlessKeyValueTable.vue
 create mode 100644 src/components/KeyValueTable.vue

diff --git a/src/components/HeaderlessKeyValueTable.vue b/src/components/HeaderlessKeyValueTable.vue
deleted file mode 100644
index 3a7d888..0000000
--- a/src/components/HeaderlessKeyValueTable.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-	<table>
-		<tr v-for="(value, key, i) in dataRows" :key="i">
-			<td>{{ key }}</td>
-			<td>{{ value }}</td>
-		</tr>
-	</table>
-</template>
-
-<script>
-export default {
-	name: 'HeaderlessKeyValueTable',
-	props: {
-		dataRows: {
-			type: Object,
-			default: () => ({}),
-		},
-	},
-}
-</script>
-
-<style scoped>
-	table {
-		width: 100%;
-	}
-
-	td {
-		border-bottom: solid #000 1px;
-	}
-
-	tr:nth-child(2n) {
-		background: #f0f0f0;
-	}
-</style>
diff --git a/src/components/KeyValueTable.vue b/src/components/KeyValueTable.vue
new file mode 100644
index 0000000..8b90399
--- /dev/null
+++ b/src/components/KeyValueTable.vue
@@ -0,0 +1,63 @@
+<template>
+	<table>
+		<thead>
+			<tr v-for="(value, key, i) in getHeaders" :key="i">
+				<th>{{ key }}</th>
+				<th>{{ value }}</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="(value, key, i) in dataRows" :key="i+1">
+				<td>{{ key }}</td>
+				<td>{{ value }}</td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+
+<script>
+export default {
+	name: 'KeyValueTable',
+	props: {
+		dataRows: {
+			type: Object,
+			default: () => ({}),
+		},
+		header: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	computed: {
+		getHeaders() {
+			const key = Object.keys(this.header)[0]
+			const value = this.header[key]
+			if (key && value) return { [key]: value }
+
+			return {}
+		},
+	},
+}
+</script>
+
+<style scoped>
+	table {
+		width: 100%;
+	}
+
+	td, th {
+		border-bottom: solid #000 1px;
+	}
+
+	th {
+		font-weight: bold;
+	}
+
+	thead {
+		background: #f0f0f0;
+	}
+
+	tbody tr:nth-child(2n) {
+		background: #f0f0f0;
+	}
+</style>