app_vue2/components/Form/DataTableComponent.vue

<template>
    <v-col
      cols="12"
      sm="12"
    >
      <BottomSheetComponent :openSheet="openSheet" v-on:close-bottom-sheet="openSheet=$event">
          <slot name="sheet.content" v-bind="{itemId}"></slot>
      </BottomSheetComponent>

      <v-data-table
        :headers="headersWithItem"
        :items="entries"
        :server-items-length="totalEntries"
        :loading="loading"
        class="elevation-1"
      >

        <template v-for="header in headersWithItem" v-slot:[header.item]="props">
          <slot :name="header.item" v-bind="props">
            {{props.item[header.value]}}
          </slot>
        </template>

        <template v-slot:item.actions="{ item }">
          <v-icon
            small
            class="mr-2"
            @click="editItem(item)"
          >
            mdi-pencil
          </v-icon>
          <v-icon
            small
            @click="deleteItem(item)"
          >
            mdi-delete
          </v-icon>
        </template>

      </v-data-table>
    </v-col>
</template>

<script lang="ts">
  import {defineComponent, ref, useContext, useFetch, computed, toRefs, onUnmounted} from '@nuxtjs/composition-api'
  import {Query} from "@vuex-orm/core";
  import {$dataProvider} from "~/services/dataProvider/dataProvider";
  import {AnyJson} from "~/types/types";
  import {useQueryHelper} from "~/use/store/useQuery";

  export default defineComponent({
    props: {
      rootModel:{
        type: Function,
        required: true
      },
      rootId:{
        type: Number,
        required: true
      },
      model:{
        type: Function,
        required: true
      },
      query:{
        type: Object as () => Query,
        required: true
      },
      headers:{
        type: Array,
        required: true
      }
    },
    setup(props) {
      const {rootModel, rootId, model, headers, query} = toRefs(props);

      const headersWithItem = computed(()=>{
        return headers.value.map((header:any)=>{
          header['item'] = 'item.' + header.value
          return header
        })
      })

      const totalEntries = ref(0)
      const entries = ref([] as Array<AnyJson>)
      const loading = ref(true)

      const {store, $rest} = useContext()
      const {fetch, fetchState} = useFetch(async ()=>{
        await $dataProvider(store, $rest).getSubResourceCollection(
          rootModel.value,
          rootId.value,
          model.value
        )
        entries.value = useQueryHelper.getFlattenEntries(query.value);
        totalEntries.value = entries.value.length
        loading.value = false
      })

      const openSheet = ref(false);
      const itemId = ref(0);

      const editItem = (item: AnyJson) => {
        itemId.value=item.id;
        openSheet.value = true;
      }

      // onUnmounted( useRepositoryHelper.cleanRepository(repository.value) )

      return {
        entries,
        totalEntries,
        loading,
        headersWithItem,
        editItem,
        itemId,
        openSheet
      }
    }
  })
</script>