From ee336f9abeb68d5750745414e358e2ea7481bd45 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Wed, 28 Sep 2022 02:17:26 +0200
Subject: [PATCH] feat: add DataTable component

---
 src/components/DataTable.vue | 41 ++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/DataTable.vue

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
new file mode 100644
index 0000000..a5e5ed6
--- /dev/null
+++ b/src/components/DataTable.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+interface Props {
+  headings: string[];
+  data: string[][];
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <table class="data-table">
+    <thead class="data-table__head">
+      <tr class="data-table__row">
+        <th
+          class="data-table__heading"
+          v-for="(heading, idx) in headings"
+          :key="idx"
+        >
+          {{ heading }}
+        </th>
+      </tr>
+    </thead>
+    <tbody class="data-table__body">
+      <tr class="data-table__row" v-for="(row, idx) in data" :key="idx">
+        <td class="data-table__cell" v-for="(cell, idx) in row" :key="idx">
+          {{ cell }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style lang="scss">
+.data-table {
+  table-layout: fixed;
+
+  &__cell:first-child {
+    text-align: right;
+  }
+}
+</style>