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 class="flex-grow-1" />

      <v-btn
        v-if="smAndUp && actions.includes(TABLE_ACTION.ADD)"
        prepend-icon="fa fa-plus"
        class="theme-neutral"
        @click="emit('addClicked')"
      >
        {{ i18n.t('add') }}
      </v-btn>
    </div>

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

          <td class="d-flex flex-row actions-cell">
            <slot name="actions" :item="item">
              <v-btn
                v-if="actions.includes(TABLE_ACTION.EDIT)"
                :flat="true"
                icon="fa fa-pen"
                class="mr-3"
                @click="emit('editClicked', item)"
              />
              <v-btn
                v-if="actions.includes(TABLE_ACTION.DELETE)"
                :flat="true"
                icon="fas fa-trash"
                @click="emit('deleteClicked', item)"
              />
            </slot>
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr class="theme-neutral">
          <td>
            <i>{{ i18n.t('nothing_to_show') }}</i>
          </td>
          <td></td>
        </tr>
      </tbody>
    </v-table>

    <div class="d-flex justify-end my-3" v-if="xs && actions.includes(TABLE_ACTION.ADD)">
      <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 {TABLE_ACTION} from '~/types/enum/enums';
import type {ColumnDefinition} from '~/types/interfaces';
import {useDisplay} from 'vuetify';

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">
.v-table {
  width: 100%;

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

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

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

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