add header prop and handling of that

src/components/HeaderlessKeyValueTable.vue

@@ -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>

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>