quasar-factory-lib 0.1.19 → 0.1.21

package/package.json

@@ -98,6 +98,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -1,7 +1,7 @@
 <template lang="">
   <div>
     <q-table
-      v-show="!showSkeleton"
+      v-if="!showSkeleton && rowsData.length"
       ref="myTable"
       v-model:selected="selected"
       v-model:pagination="pagination"
@@ -9,7 +9,7 @@
       :style="tableStyle"
       flat
       bordered
-      :rows="rowsData"
+      :rows="rowsDataComputed"
       :columns="columns"
       :filter-method="customFilter"
       :filter="filterComputed"
@@ -25,9 +25,13 @@
       :selected-rows-label="getSelectedString"
       :loading="loading"
       virtual-scroll
+      :virtual-scroll-item-size="48"
+      :virtual-scroll-sticky-size-start="48"
+      @virtual-scroll="onVirtualScroll"
       @update:selected="(details) => {
         $emit('onUpdateSelected', details)
       }"
+      
     >
       <template #top-right="props">
         <q-separator />
@@ -270,7 +274,8 @@ export default defineComponent({
       draggableInstance: null,
       disabled: false,
       enableDragAndDrop: false,
-      dragAndDropDelay: 0
+      dragAndDropDelay: 0,
+      nextPage: 2,
     }
   },
   computed: {
@@ -298,7 +303,13 @@ export default defineComponent({
     },
     pageLength (): number {
       return (this.totalPage + 1) * this.pageSize
-    }
+    },
+    lastPage () {
+      return Math.ceil(this.rowsData.length / this.pageSize)
+     },
+     rowsDataComputed () {
+      return this.rowsData.slice(0, this.pageSize * (this.nextPage - 1))
+     } 
   },
   watch: {
     rows (val) {
@@ -321,16 +332,6 @@ export default defineComponent({
         this.dragAndDropDelay = 0
       }
     },
-    /* showSkeleton (val: boolean): void {
-      if (!val) {
-        this.handleInfiniteScrollTableCompositionAPi()
-      }
-    },
-    '$q.screen.width' (): void {
-      setTimeout(() => {
-        this.handleInfiniteScrollTableCompositionAPi()
-      }, 500)
-    } */
   },
   mounted () {
     this.getAdvancedFilterColumns()
@@ -558,6 +559,21 @@ export default defineComponent({
         elementToScroll.removeEventListener('scroll', fnAddScroll)
         elementToScroll.addEventListener('scroll', fnAddScroll)
       })
+    },
+    onVirtualScroll ({to, ref}) {
+      const lastIndex = this.rowsDataComputed.length - 1
+      console.log(to, lastIndex)
+      if (!this.loading && this.nextPage < this.lastPage && to === lastIndex) {
+        this.loading = true
+
+        setTimeout(async () => {
+          this.nextPage++
+         await this.$nextTick(() => {
+            ref.refresh()
+            this.loading = false
+          })
+        }, 500)
+      }
     }
   }
 })

package/src/components/Table/css/table.css

@@ -61,6 +61,10 @@
 .my-table  .itemsFontSize{
   font-size: 14px;
 }
+.my-table tbody {
+  /* height of all previous header rows */
+  scroll-margin-top: 48px;
+}
 @media only screen and (max-width: 1100px) {
 
   .my-table .q-table__grid-content {