Create VnTable and use it

src/components/ui/VnTable.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const props = defineProps({
+    noDataLabel: {
+        type: String,
+        default: ''
+    },
+    hideBottom: {
+        type: Boolean,
+        default: true
+    },
+    rowsPerPageOptions: {
+        type: Array,
+        default: () => [0]
+    }
+});
+</script>
+
+<template>
+    <QTable
+        v-bind="$attrs"
+        :no-data-label="props.noDataLabel || t('noInvoicesFound')"
+        :hide-bottom="props.hideBottom"
+        :rows-per-page-options="props.rowsPerPageOptions"
+        table-header-class="vnTable-header-default"
+    >
+        <slot />
+    </QTable>
+</template>
+
+<style lang="scss">
+.vnTable-header-default {
+    background-color: $accent !important;
+    color: white;
+}
+</style>

src/pages/Agencies/PackagesView.vue

@@ -2,6 +2,8 @@
 import { ref, inject, onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import VnTable from 'src/components/ui/VnTable.vue';
+
 const jApi = inject('jApi');
 const { t } = useI18n();
 
@@ -53,32 +55,15 @@ onMounted(() => getPackages());
 
 <template>
     <QPage class="flex justify-center q-pa-md">
-        <QTable
+        <VnTable
             :columns="columns"
             :rows="packages"
             :loading="loading"
-            class="q-mt-lg"
+            style="height: max-content; max-width: 100%"
-            style="max-width: 100%; height: max-content"
+        />
-            table-header-class="packages-table-header"
-            hide-bottom
-        >
-            <template #body-cell-id="{ row }">
-                <QTd auto-width @click.stop>
-                    <QBtn flat color="blue">{{ row.id }}</QBtn>
-                    <ItemDescriptorProxy :id="row.id" />
-                </QTd>
-            </template>
-        </QTable>
     </QPage>
 </template>
 
-<style lang="scss">
-.packages-table-header {
-    background-color: $accent !important;
-    color: white;
-}
-</style>
-
 <i18n lang="yaml">
 en-US:
     agency: Agency

src/pages/Ecomerce/InvoicesView.vue

@@ -2,6 +2,8 @@
 import { ref, onMounted, inject, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import VnTable from 'src/components/ui/VnTable.vue';
+
 import { currency } from 'src/lib/filters.js';
 import { date as qdate } from 'quasar';
 import { userStore as useUserStore } from 'stores/user';
@@ -80,15 +82,10 @@ onMounted(async () => {
         />
     </Teleport>
     <div class="vn-w-sm">
-        <QCard>
+        <VnTable
-            <!--  -->
-            <QTable
             :columns="columns"
             :rows="invoices"
-                :no-data-label="t('noInvoicesFound')"
-                row-key="id"
             :hide-header="!invoices.length"
-                :rows-per-page-options="[0]"
         >
             <template #body-cell-hasPdf="{ row }">
                 <QTd
@@ -121,8 +118,7 @@ onMounted(async () => {
                     </QIcon>
                 </QTd>
             </template>
-            </QTable>
+        </VnTable>
-        </QCard>
     </div>
 </template>