WorkshopTasker/components/pagedTable.vue

<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;
  }

  tr:hover {
    background-color: rgba(var(--v-theme-on-background), calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier)));
  }
</style>