demo version prepped

frontend/src/components/Table.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+const router = useRouter()
+defineProps<{
+  data: []
+  link_prefix?: string
+}>()
+</script>
+
+<template>
+  <div class="table_wrapper">
+    <table v-if="data.length > 0">
+      <thead>
+        <tr>
+          <th v-for="key in Object.keys(data[0])" :key="key">{{ key }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(row, index) in data" :key="index">
+          <td v-for="key in Object.keys(data[0])" :key="key">
+            <a
+              v-if="key === 'id' && link_prefix"
+              href="#"
+              @click.prevent="router.push(`${link_prefix}/${row[key]}`)"
+            >
+              {{ row[key] }}
+            </a>
+            <span v-else>{{ row[key] }}</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-else>No data.</p>
+  </div>
+</template>
+
+<style scoped>
+.table_wrapper {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+  min-width: 600px;
+}
+
+thead {
+    border-bottom: 2px solid var(--theme-dim);
+}
+
+th {
+  text-align: left;
+  padding: 0.75rem 1rem;
+  color: var(--theme);
+  font-weight: normal;
+  white-space: nowrap;
+}
+
+td {
+  padding: 0.6rem 1rem;
+  border-bottom: 1px solid var(--theme-faint);
+  white-space: nowrap;
+}
+
+tbody tr:hover {
+  background-color: var(--theme-bg);
+}
+
+a {
+  color: var(--theme);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: white;
+}
+
+@media (max-width: 768px) {
+  th, td {
+    padding: 0.5rem 0.6rem;
+    font-size: 0.8rem;
+  }
+}
+</style>