Added DataTableVirtualScroll demo

src/assets/menu/menu.json

@@ -371,6 +371,10 @@
                             "name": "Scroll",
                             "to": "/datatable/scroll"
                         },
+                        {
+                            "name": "VirtualScroll",
+                            "to": "/datatable/virtualscroll"
+                        },
                         {
                             "name": "FlexScroll",
                             "to": "/datatable/flexscroll"

src/router/index.js

@@ -287,6 +287,11 @@ const routes = [
         name: 'datatableflexscroll',
         component: () => import('../views/datatable/DataTableFlexScrollDemo.vue')
     },
+    {
+        path: '/datatable/virtualscroll',
+        name: 'datatablevirtualscroll',
+        component: () => import('../views/datatable/DataTableVirtualScrollDemo.vue')
+    },
     {
         path: '/datatable/style',
         name: 'datatablestyle',
@@ -868,4 +873,4 @@ const router = createRouter({
     routes
 });
 
-export default router;
+export default router;

src/service/CarService.js

@@ -0,0 +1,39 @@
+export default class CarService {
+
+    brands = ['Vapid', 'Carson', 'Kitano', 'Dabver', 'Ibex', 'Morello', 'Akira', 'Titan', 'Dover', 'Norma'];
+
+    colors = ['Black', 'White', 'Red', 'Blue', 'Silver', 'Green', 'Yellow'];
+
+    generateCar(id) {
+        return {
+            id,
+            vin: this.generateVin(),
+            brand: this.generateBrand(),
+            color: this.generateColor(),
+            year: this.generateYear()
+        }
+    }
+
+    generateVin() {
+        let text = "";
+        let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+        for (let i = 0; i < 5; i++) {
+            text += possible.charAt(Math.floor(Math.random() * possible.length));
+        }
+
+        return text;
+    }
+
+    generateBrand() {
+        return this.brands[Math.floor(Math.random() * Math.floor(10))];
+    }
+
+    generateColor() {
+        return this.colors[Math.floor(Math.random() * Math.floor(7))];
+    }
+
+    generateYear() {
+        return 2000 + Math.floor(Math.random() * Math.floor(19));
+    }
+}

src/views/datatable/DataTableVirtualScrollDemo.vue

@@ -0,0 +1,435 @@
+<template>
+	<div>
+		<div class="content-section introduction">
+			<div class="feature-intro">
+				<h1>DataTable <span>VirtualScroll</span></h1>
+				<p>VirtualScroller is a performant approach to handle huge data efficiently.</p>
+			</div>
+            <AppDemoActions />
+		</div>
+
+		<div class="content-section implementation">
+            <div class="card">
+                <h5>Preloaded Data (100000 Rows)</h5>
+                <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }">
+                    <Column field="id" header="Id" style="min-width: '200px'"></Column>
+                    <Column field="vin" header="Vin" style="min-width: '200px'"></Column>
+                    <Column field="year" header="Year" style="min-width: '200px'"></Column>
+                    <Column field="brand" header="Brand" style="min-width: '200px'"></Column>
+                    <Column field="color" header="Color" style="min-width: '200px'"></Column>
+                </DataTable>
+            </div>
+            <div class="card">
+                <h5>Lazy Loading from a Remote Datasource (100000 Rows)</h5>
+                <DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
+                    <Column field="id" header="Id" style="min-width: '200px'">
+                        <template #loading>
+                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                                <Skeleton width="60%" height="1rem" />
+                            </div>
+                        </template>
+                    </Column>
+                    <Column field="vin" header="Vin" style="min-width: '200px'">
+                        <template #loading>
+                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                                <Skeleton width="40%" height="1rem" />
+                            </div>
+                        </template>
+                    </Column>
+                    <Column field="year" header="Year" style="min-width: '200px'">
+                        <template #loading>
+                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                                <Skeleton width="30%" height="1rem" />
+                            </div>
+                        </template>
+                    </Column>
+                    <Column field="brand" header="Brand" style="min-width: '200px'">
+                        <template #loading>
+                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                                <Skeleton width="40%" height="1rem" />
+                            </div>
+                        </template>
+                    </Column>
+                    <Column field="color" header="Color" style="min-width: '200px'">
+                        <template #loading>
+                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                                <Skeleton width="60%" height="1rem" />
+                            </div>
+                        </template>
+                    </Column>
+                </DataTable>
+            </div>
+		</div>
+
+        <AppDoc name="DataTableVirtualScrollDemo" :sources="sources" :service="['CarService']" github="datatable/DataTableVirtualScrollDemo.vue" />
+    </div>
+</template>
+
+<script>
+import CarService from '../../service/CarService';
+
+export default {
+    data() {
+        return {
+            cars: null,
+            virtualCars: Array.from({ length: 100000 }),
+            lazyLoading: false,
+            sources: {
+                'options-api': {
+                    tabName: 'Options API Source',
+                    content: `
+<template>
+	<div>
+         <div class="card">
+            <h5>Preloaded Data (100000 Rows)</h5>
+            <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }">
+                <Column field="id" header="Id" style="min-width: '200px'"></Column>
+                <Column field="vin" header="Vin" style="min-width: '200px'"></Column>
+                <Column field="year" header="Year" style="min-width: '200px'"></Column>
+                <Column field="brand" header="Brand" style="min-width: '200px'"></Column>
+                <Column field="color" header="Color" style="min-width: '200px'"></Column>
+            </DataTable>
+        </div>
+        <div class="card">
+            <h5>Lazy Loading from a Remote Datasource (100000 Rows)</h5>
+            <DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
+                <Column field="id" header="Id" style="min-width: '200px'">
+                    <template #loading>
+                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <Skeleton width="60%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+                <Column field="vin" header="Vin" style="min-width: '200px'">
+                    <template #loading>
+                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <Skeleton width="40%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+                <Column field="year" header="Year" style="min-width: '200px'">
+                    <template #loading>
+                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <Skeleton width="30%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+                <Column field="brand" header="Brand" style="min-width: '200px'">
+                    <template #loading>
+                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <Skeleton width="40%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+                <Column field="color" header="Color" style="min-width: '200px'">
+                    <template #loading>
+                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <Skeleton width="60%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+	</div>
+</template>
+
+<script>
+import CarService from './service/CarService';
+
+export default {
+    data() {
+        return {
+            cars: null,
+            virtualCars: Array.from({ length: 100000 }),
+            lazyLoading: false
+        }
+    },
+    carService: null,
+    loadLazyTimeout: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.cars = Array.from({ length: 100000 }).map((_, i) => this.carService.generateCar(i + 1));
+    },
+    methods: {
+        loadCarsLazy(event) {
+            !this.lazyLoading && (this.lazyLoading = true);
+
+            if (this.loadLazyTimeout) {
+                clearTimeout(this.loadLazyTimeout);
+            }
+
+            //simulate remote connection with a timeout
+            this.loadLazyTimeout = setTimeout(() => {
+                let virtualCars = [...this.virtualCars];
+                let { first, last } = event;
+
+                //load data of required page
+                const loadedCars = this.cars.slice(first, last);
+
+                //populate page of virtual cars
+                Array.prototype.splice.apply(virtualCars, [...[first, last - first], ...loadedCars]);
+
+                this.virtualCars = virtualCars;
+                this.lazyLoading = false;
+            }, Math.random() * 1000 + 250);
+        }
+    }
+}
+<\\/script>
+`
+                },
+                'composition-api': {
+                    tabName: 'Composition API Source',
+                    content: `
+<template>
+	<div>
+         <div class="card">
+            <h5>Preloaded Data (100000 Rows)</h5>
+            <DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }">
+                <Column field="id" header="Id" style="min-width: '200px'"></Column>
+                <Column field="vin" header="Vin" style="min-width: '200px'"></Column>
+                <Column field="year" header="Year" style="min-width: '200px'"></Column>
+                <Column field="brand" header="Brand" style="min-width: '200px'"></Column>
+                <Column field="color" header="Color" style="min-width: '200px'"></Column>
+            </DataTable>
+        </div>
+        <div class="card">
+            <h5>Lazy Loading from a Remote Datasource (100000 Rows)</h5>
+            <DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
+                <Column field="id" header="Id" style="min-width: '200px'">
+                    <template #loading>
+                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <Skeleton width="60%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+                <Column field="vin" header="Vin" style="min-width: '200px'">
+                    <template #loading>
+                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <Skeleton width="40%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+                <Column field="year" header="Year" style="min-width: '200px'">
+                    <template #loading>
+                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <Skeleton width="30%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+                <Column field="brand" header="Brand" style="min-width: '200px'">
+                    <template #loading>
+                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <Skeleton width="40%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+                <Column field="color" header="Color" style="min-width: '200px'">
+                    <template #loading>
+                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <Skeleton width="60%" height="1rem" />
+                        </div>
+                    </template>
+                </Column>
+            </DataTable>
+        </div>
+	</div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import { FilterMatchMode } from 'primevue/api';
+import CustomerService from './service/CustomerService';
+
+export default {
+    setup() {
+        onMounted(() => {
+            cars.value = Array.from({ length: 100000 }).map((_, i) => carService.value.generateCar(i + 1));
+        })
+
+        const cars = ref(null);
+        const virtualCars = ref(Array.from({ length: 100000 }));
+        const lazyLoading = ref(false);
+        const carService = ref(new CarService());
+        const loadLazyTimeout = ref();
+
+        const loadCarsLazy = (event) => {
+            !lazyLoading.value && (lazyLoading.value = true);
+
+            if (loadLazyTimeout.value) {
+                clearTimeout(loadLazyTimeout.value);
+            }
+
+            //simulate remote connection with a timeout
+            loadLazyTimeout.value = setTimeout(() => {
+                let _virtualCars = [...virtualCars.value];
+                let { first, last } = event;
+
+                //load data of required page
+                const loadedCars = cars.value.slice(first, last);
+
+                //populate page of virtual cars
+                Array.prototype.splice.apply(_virtualCars, [...[first, last - first], ...loadedCars]);
+
+                virtualCars.value = _virtualCars;
+                lazyLoading.value = false;
+            }, Math.random() * 1000 + 250);
+        }
+
+        return { cars, virtualCars, lazyLoading, loadCarsLazy };
+    }
+}
+<\\/script>
+`
+                },
+                'browser-source': {
+                    tabName: 'Browser Source',
+                    imports: `<script src="https://unpkg.com/primevue@^3/datatable/datatable.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>
+        <script src="https://unpkg.com/primevue@^3/skeleton/skeleton.min.js"><\\/script>
+        <script src="./CarService.js"><\\/script>`,
+                    content: `<div id="app">
+            <div class="card">
+                <h5>Preloaded Data (100000 Rows)</h5>
+                <p-datatable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }">
+                    <p-column field="id" header="Id" style="min-width: '200px'"></p-column>
+                    <p-column field="vin" header="Vin" style="min-width: '200px'"></p-column>
+                    <p-column field="year" header="Year" style="min-width: '200px'"></p-column>
+                    <p-column field="brand" header="Brand" style="min-width: '200px'"></p-column>
+                    <p-column field="color" header="Color" style="min-width: '200px'"></p-column>
+                </p-datatable>
+            </div>
+            <div class="card">
+                <h5>Lazy Loading from a Remote Datasource (100000 Rows)</h5>
+                <p-datatable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
+                    <p-column field="id" header="Id" style="min-width: '200px'">
+                        <template #loading>
+                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                                <p-skeleton width="60%" height="1rem" />
+                            </div>
+                        </template>
+                    </p-column>
+                    <p-column field="vin" header="Vin" style="min-width: '200px'">
+                        <template #loading>
+                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                                <p-skeleton width="40%" height="1rem" />
+                            </div>
+                        </template>
+                    </p-column>
+                    <p-column field="year" header="Year" style="min-width: '200px'">
+                        <template #loading>
+                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                                <p-skeleton width="30%" height="1rem" />
+                            </div>
+                        </template>
+                    </p-column>
+                    <p-column field="brand" header="Brand" style="min-width: '200px'">
+                        <template #loading>
+                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                                <p-skeleton width="40%" height="1rem" />
+                            </div>
+                        </template>
+                    </p-column>
+                    <p-column field="color" header="Color" style="min-width: '200px'">
+                        <template #loading>
+                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                                <p-skeleton width="60%" height="1rem" />
+                            </div>
+                        </template>
+                    </p-column>
+                </p-datatable>
+            </div>
+        </div>
+
+        <script type="module">
+        const { createApp, ref, onMounted } = Vue;
+
+        const App = {
+            setup() {
+                onMounted(() => {
+                    cars.value = Array.from({ length: 100000 }).map((_, i) => carService.value.generateCar(i + 1));
+                })
+
+                const cars = ref(null);
+                const virtualCars = ref(Array.from({ length: 100000 }));
+                const lazyLoading = ref(false);
+                const carService = ref(new CarService());
+                const loadLazyTimeout = ref();
+
+                const loadCarsLazy = (event) => {
+                    !lazyLoading.value && (lazyLoading.value = true);
+
+                    if (loadLazyTimeout.value) {
+                        clearTimeout(loadLazyTimeout.value);
+                    }
+
+                    //simulate remote connection with a timeout
+                    loadLazyTimeout.value = setTimeout(() => {
+                        let _virtualCars = [...virtualCars.value];
+                        let { first, last } = event;
+
+                        //load data of required page
+                        const loadedCars = cars.value.slice(first, last);
+
+                        //populate page of virtual cars
+                        Array.prototype.splice.apply(_virtualCars, [...[first, last - first], ...loadedCars]);
+
+                        virtualCars.value = _virtualCars;
+                        lazyLoading.value = false;
+                    }, Math.random() * 1000 + 250);
+                }
+
+                return { cars, virtualCars, lazyLoading, loadCarsLazy };
+            },
+            components: {
+                "p-datatable": primevue.datatable,
+                "p-column": primevue.column,
+                "p-skeleton": primevue.skeleton
+            }
+        };
+
+        createApp(App)
+            .use(primevue.config.default)
+            .mount("#app");
+        <\\/script>
+`
+                }
+            }
+        }
+    },
+    carService: null,
+    loadLazyTimeout: null,
+    created() {
+        this.carService = new CarService();
+    },
+    mounted() {
+        this.cars = Array.from({ length: 100000 }).map((_, i) => this.carService.generateCar(i + 1));
+    },
+    methods: {
+        loadCarsLazy(event) {
+            !this.lazyLoading && (this.lazyLoading = true);
+
+            if (this.loadLazyTimeout) {
+                clearTimeout(this.loadLazyTimeout);
+            }
+
+            //simulate remote connection with a timeout
+            this.loadLazyTimeout = setTimeout(() => {
+                let virtualCars = [...this.virtualCars];
+                let { first, last } = event;
+
+                //load data of required page
+                const loadedCars = this.cars.slice(first, last);
+
+                //populate page of virtual cars
+                Array.prototype.splice.apply(virtualCars, [...[first, last - first], ...loadedCars]);
+
+                this.virtualCars = virtualCars;
+                this.lazyLoading = false;
+            }, Math.random() * 1000 + 250);
+        }
+    }
+}
+</script>

src/views/liveeditor/LiveEditorData.js

@@ -85,6 +85,48 @@ export default class ProductService {
 	}
 }
 
+    `,
+    'CarService': `
+export default class CarService {
+
+    brands = ['Vapid', 'Carson', 'Kitano', 'Dabver', 'Ibex', 'Morello', 'Akira', 'Titan', 'Dover', 'Norma'];
+
+    colors = ['Black', 'White', 'Red', 'Blue', 'Silver', 'Green', 'Yellow'];
+
+    generateCar(id) {
+        return {
+            id,
+            vin: this.generateVin(),
+            brand: this.generateBrand(),
+            color: this.generateColor(),
+            year: this.generateYear()
+        }
+    }
+
+    generateVin() {
+        let text = "";
+        let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+
+        for (let i = 0; i < 5; i++) {
+            text += possible.charAt(Math.floor(Math.random() * possible.length));
+        }
+
+        return text;
+    }
+
+    generateBrand() {
+        return this.brands[Math.floor(Math.random() * Math.floor(10))];
+    }
+
+    generateColor() {
+        return this.colors[Math.floor(Math.random() * Math.floor(7))];
+    }
+
+    generateYear() {
+        return 2000 + Math.floor(Math.random() * Math.floor(19));
+    }
+}
+
     `
 }
 

src/views/virtualscroller/VirtualScrollerDemo.vue

@@ -41,7 +41,7 @@
                                 </div>
                             </template>
                         </VirtualScroller>
-                    </div> 
+                    </div>
                 </div>
             </div>
 
@@ -109,7 +109,7 @@
                 <h5 class="p-mb-0">Lazy</h5>
                 <div class="p-d-flex p-ai-center p-flex-wrap">
                     <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
-                        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" :lazy=true @lazy-load="onLazyLoad">
+                        <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad">
                             <template v-slot:item="{ item, options }">
                                 <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                             </template>
@@ -180,12 +180,12 @@ export default {
             if (this.loadLazyTimeout) {
                 clearTimeout(this.loadLazyTimeout);
             }
-            
+
             //imitate delay of a backend call
             this.loadLazyTimeout = setTimeout(() => {
                 const { first, last } = event;
                 const lazyItems = [...this.lazyItems];
-            
+
                 for (let i = first; i < last; i++) {
                     lazyItems[i] = `Item #${i}`;
                 }
@@ -230,7 +230,7 @@ export default {
             display: flex;
             flex-direction: row;
         }
-        
+
         .scroll-item {
             writing-mode: vertical-lr;
         }
@@ -240,4 +240,4 @@ export default {
         display: block;
     }
 }
-</style>
+</style>