app/components/Layout/Parameters/Table.vue

<!--
A data table for the parameters page
-->
<template>
  <div class="container">
    <div class="d-flex flex-row mb-2">
      <h4 v-if="title" class="align-self-center">
        {{ title }}
      </h4>
    </div>

    <v-table>
      <thead>
        <tr>
          <td v-for="(col, index) in columns" :key="index">
            {{ col.label }}
          </td>
          <td>{{ $t('actions') }}</td>
        </tr>
      </thead>
      <tbody v-if="items && items.length > 0">
        <tr v-for="item in items" :key="item.id">
          <td
            v-for="(col, index) in columnsDefinitions"
            :key="index"
            class="cycle-editable-cell"
          >
            {{ item[col.property] }}
          </td>

          <td class="d-flex flex-row justify-center actions-cell">
            <v-menu min-width="120" location="end" class="action-menu">
              <template #activator="{ props: menuProps }">
                <v-btn
                  v-if="
                    actions.includes(TABLE_ACTION.EDIT) ||
                    actions.includes(TABLE_ACTION.DELETE)
                  "
                  v-bind="menuProps"
                  :flat="true"
                  icon="fas fa-ellipsis-vertical"
                />
              </template>

              <v-list>
                <v-list-item
                  v-if="actions.includes(TABLE_ACTION.EDIT)"
                  @click="emit('editClicked', item)"
                >
                  <v-list-item-title>
                    <v-icon>fas fa-pen</v-icon>
                    {{ $t('edit') }}
                  </v-list-item-title>
                </v-list-item>

                <v-list-item
                  v-if="actions.includes(TABLE_ACTION.DELETE)"
                  class="theme-danger"
                  @click="emit('deleteClicked', item)"
                >
                  <v-list-item-title icon="fas fa-trash">
                    <v-icon>fas fa-trash</v-icon>
                    {{ $t('delete') }}
                  </v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td>
            <i>{{ i18n.t('nothing_to_show') }}</i>
          </td>
          <td />
        </tr>
      </tbody>
    </v-table>

    <div
      v-if="actions.includes(TABLE_ACTION.ADD)"
      class="d-flex justify-center my-3"
    >
      <v-btn
        prepend-icon="fa fa-plus"
        class="theme-neutral"
        @click="emit('addClicked')"
      >
        {{ i18n.t('add') }}
      </v-btn>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useDisplay } from 'vuetify'
import { TABLE_ACTION } from '~/types/enum/enums'
import type { ColumnDefinition } from '~/types/interfaces'

const props = defineProps({
  /**
   * Array of objects to display in the table
   */
  items: {
    type: Array as PropType<Array<object>>,
    required: true,
  },
  /** Titre du tableau */
  title: {
    type: String,
    required: false,
    default: null,
  },
  /**
   * If provided, define the columns to show.
   * Else, all the entity's props are shown.
   *
   * Ex: [
   *       { property: 'id', label : 'Identifier'},
   *       { property: 'name', label : 'Full name'},
   *     ]
   */
  columnsDefinitions: {
    type: Array as PropType<Array<ColumnDefinition> | null>,
    required: false,
    default: null,
  },
  /**
   * The property used as identifier (required by 'edition' link)
   */
  identifier: {
    type: String,
    required: false,
    default: 'id',
  },
  /**
   * List of the actions available for each record
   */
  actions: {
    type: Array as PropType<Array<TABLE_ACTION>>,
    required: false,
    default: () => [TABLE_ACTION.EDIT, TABLE_ACTION.DELETE, TABLE_ACTION.ADD],
  },
  /**
   * The URL for the edit / create pages
   * The resulting url will be constructed this way :
   *
   * Edition : {baseUrl}/{id}
   * Creation : {baseUrl}/new
   */
  actionsRoute: {
    type: String,
    required: false,
    default: '/parameters',
  },
})

const i18n = useI18n()

const emit = defineEmits(['editClicked', 'deleteClicked', 'addClicked'])

const { smAndUp, xs } = useDisplay()

const getId = (item: object) => {
  return item[props.identifier]
}

const columns: ComputedRef<Array<ColumnDefinition>> = computed(() => {
  return props.columnsDefinitions.map((col) => {
    return {
      property: col.property,
      label: col.label ?? i18n.t(col.property),
    }
  })
})
</script>

<style scoped lang="scss">
.container {
  //max-width: 1000px;
  //margin: 0 auto;
  display: inline-block;
  min-width: 65%;
}

.v-table {
  thead {
    color: rgb(var(--v-theme-neutral-strong));
    font-weight: 600;

    td {
      border-bottom: thin solid
        rgba(var(--v-border-color), var(--v-border-opacity));
    }

    td:last-of-type {
      padding-left: 30px;
    }
  }

  :deep(tr:hover) {
    .fa-ellipsis-vertical {
      color: rgb(var(--v-theme-on-neutral-soft));
      font-size: 20px;
    }
  }

  th,
  td {
    padding: 10px;
    text-align: left;
  }

  td:last-of-type {
    width: 125px;
  }
}

.action-menu {
  margin: 0 auto;

  .v-list {
    top: 26px;
    left: 2px;
    padding: 0;
  }

  .v-icon {
    opacity: 0.7;
    font-size: 16px;
    margin-right: 12px;
  }
}

:deep(.actions-cell .v-icon) {
  color: rgb(var(--v-theme-on-neutral));
  font-size: 18px;
}
</style>