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="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>
+            style="height: max-content; max-width: 100%"
+        />
     </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,49 +82,43 @@ onMounted(async () => {
         />
     </Teleport>
     <div class="vn-w-sm">
-        <QCard>
-            <!--  -->
-            <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
-                        auto-width
-                        @click.stop
-                        class="flex full-width justify-center items-center"
+        <VnTable
+            :columns="columns"
+            :rows="invoices"
+            :hide-header="!invoices.length"
+        >
+            <template #body-cell-hasPdf="{ row }">
+                <QTd
+                    auto-width
+                    @click.stop
+                    class="flex full-width justify-center items-center"
+                >
+                    <QBtn
+                        v-if="row.hasPdf"
+                        icon="download"
+                        :href="getInvoiceUrl(row.id)"
+                        target="_blank"
+                        flat
+                        round
                     >
-                        <QBtn
-                            v-if="row.hasPdf"
-                            icon="download"
-                            :href="getInvoiceUrl(row.id)"
-                            target="_blank"
-                            flat
-                            round
-                        >
-                            <QTooltip>
-                                {{ t('downloadInvoicePdf') }}
-                            </QTooltip>
-                        </QBtn>
-                        <QIcon
-                            v-else
-                            name="warning"
-                            :title="t('notDownloadable')"
-                            color="warning"
-                            size="sm"
-                        >
-                            <QTooltip>
-                                {{ t('requestTheInvoiceToComercial') }}
-                            </QTooltip>
-                        </QIcon>
-                    </QTd>
-                </template>
-            </QTable>
-        </QCard>
+                        <QTooltip>
+                            {{ t('downloadInvoicePdf') }}
+                        </QTooltip>
+                    </QBtn>
+                    <QIcon
+                        v-else
+                        name="warning"
+                        :title="t('notDownloadable')"
+                        color="warning"
+                        size="sm"
+                    >
+                        <QTooltip>
+                            {{ t('requestTheInvoiceToComercial') }}
+                        </QTooltip>
+                    </QIcon>
+                </QTd>
+            </template>
+        </VnTable>
     </div>
 </template>