Initial commit

components/pagedTable.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+const props = defineProps<{
+  records: Array<any>,
+  recordKey: string,
+  fields: Array<string>,
+  buttons: boolean,
+}>();
+
+// eslint-disable-next-line func-call-spacing
+defineEmits<{
+  (e: "click", recordKey: string): void,
+  (e: "click:edit", recordKey: string): void,
+  (e: "click:delete", recordKey: string): void,
+}>();
+</script>
+
+<template>
+  <tbody>
+    <tr v-for="record in props.records" :key="record[props.recordKey]">
+      <td
+        v-for="field in props.fields"
+        :key="field"
+        @click="$emit('click', record[recordKey])"
+      >
+        {{ record[field] }}
+      </td>
+      <td v-if="buttons" class="buttons">
+        <div>
+          <VBtn
+            icon="mdi-pencil"
+            variant="text"
+            @click="$emit('click:edit', record[recordKey])"
+          />
+          <VBtn
+            icon="mdi-delete"
+            color="red"
+            variant="text"
+            @click="$emit('click:delete', record[recordKey])"
+          />
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</template>
+
+<style scoped>
+  .buttons {
+    width: 0;
+    padding-right: 4px !important;
+  }
+  .buttons > div {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+</style>