app/components/Layout/Parameters/Table.vue

<!--
A data table for the parameters page
-->
<template>
  <div class="container">
    <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" v-if="actions.includes(TABLE_ACTION.ADD)">
      <v-btn
        :flat="true"
        prepend-icon="fa fa-plus"
        class="theme-primary mt-4"
        @click="emit('addClicked')"
      >
        {{ i18n.t('add') }}
      </v-btn>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TABLE_ACTION } from '~/types/enum/enums'
import UrlUtils from '~/services/utils/urlUtils'
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,
  },
  /**
   * 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 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;
}

.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>