vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Added DataTableVirtualScroll demo

pull/1846/head
mertsincan 2021-12-05 20:21:38 +03:00
parent 605424d3c3
commit 8f8c97f8ad
6 changed files with 532 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/menu/menu.json
View File

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

5
src/router/index.js
View File

@ -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',

39
src/service/CarService.js Normal file
View File

@ -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));
}
}

435
src/views/datatable/DataTableVirtualScrollDemo.vue Normal file
View File

@ -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>

42
src/views/liveeditor/LiveEditorData.js
View File

@ -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));
}
}
`
}

2
src/views/virtualscroller/VirtualScrollerDemo.vue
View File

@ -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>