src/components/common/VnTable.vue

@@ -45,7 +45,8 @@ const stateStore = useStateStore();
 
 const mode = ref('list');
 const selected = ref([]);
-const filters = ref({});
+const params = ref({});
+const VnPaginateRef = ref();
 const tableModes = computed(() => {
     const modes = [
         {
@@ -84,10 +85,11 @@ function columnsCard(cols) {
 <template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
+            {{ params }}
             <VnFilterPanel
                 :data-key="$attrs['data-key']"
                 :search-button="true"
-                :params="filters"
+                v-model:params="params"
             >
                 <template #body>
                     <VnTableFilter
@@ -95,13 +97,19 @@ function columnsCard(cols) {
                         :data-key="$attrs['data-key']"
                         v-for="col of columns"
                         :key="col.id"
-                        v-model="filters[col.field]"
+                        v-model="params[col.field]"
                     />
                 </template>
             </VnFilterPanel>
         </QScrollArea>
     </QDrawer>
-    <VnPaginate v-bind="$attrs" class="q-px-md">
+    <VnPaginate
+        v-bind="$attrs"
+        class="q-px-md"
+        :limit="20"
+        ref="VnPaginateRef"
+        :disable-infinite-scroll="mode == 'table'"
+    >
         <template #body="{ rows }">
             <!-- :grid="($q.screen.lt.md && reponsive) || mode != 'table'"  -->
             <QTable
@@ -113,14 +121,15 @@ function columnsCard(cols) {
                 v-model:selected="selected"
                 :grid="mode != 'table'"
                 table-header-class="bg-grey-8"
-                :virtual-scroll-item-size="48"
-                :pagination="pagination"
-                :rows-per-page-options="[0]"
-                style="max-height: 90vh"
                 :card-container-class="
                     mode == 'list' || $q.screen.lt.md ? 'grid-one' : 'grid-three'
                 "
                 flat
+                :style="mode == 'table' && 'max-height: 92vh'"
+                virtual-scroll
+                @virtual-scroll="
+                    (event) => event.index > rows.length - 2 && VnPaginateRef.paginate()
+                "
             >
                 <template #top-left>
                     <VnBreadcrumbs />
@@ -154,7 +163,7 @@ function columnsCard(cols) {
                             :column="col"
                             :show-title="true"
                             :data-key="$attrs['data-key']"
-                            v-model="filters[col.field]"
+                            v-model="params[col.field]"
                         />
                     </QTh>
                 </template>
@@ -309,7 +318,7 @@ function columnsCard(cols) {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1px));
     max-width: 100%;
-    grid-gap: 10px;
+    grid-gap: 12px;
     margin: 0 auto;
 }
 
@@ -383,6 +392,9 @@ function columnsCard(cols) {
     thead tr:first-child th {
         top: 0;
     }
+    .q-table__top {
+        top: 0;
+    }
 }
 
 .vn-label-value {

src/components/ui/VnPaginate.vue

@@ -145,7 +145,7 @@ async function onLoad(index, done) {
     done(isDone);
 }
 
-defineExpose({ fetch, addFilter });
+defineExpose({ fetch, addFilter, paginate });
 </script>
 
 <template>