mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Merged new Docs and Demos
This commit is contained in:
Cagatay Civici
parent
296cc217fb
commit
dfcc8ef4e7
1235 changed files with 130757 additions and 122640 deletions
300
doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
Normal file
300
doc/datatable/virtualscroll/LazyVirtualScrollDoc.vue
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>When lazy loading is enabled via the <i>virtualScrollerOptions</i>, data is fetched on demand during scrolling instead of preload.</p>
|
||||
<p>In sample below, an in-memory list and timeout is used to mimic fetching from a remote datasource. The <i>virtualCars</i> is an empty array that is populated on scroll.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<DataTable
|
||||
:value="virtualCars"
|
||||
scrollable
|
||||
scrollHeight="400px"
|
||||
:virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }"
|
||||
tableStyle="min-width: 50rem"
|
||||
>
|
||||
<Column field="id" header="Id" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="vin" header="Vin" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="30%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
<DocSectionCode :code="code" :service="['CarService']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CarService } from '@/service/CarService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
virtualCars: Array.from({ length: 100000 }),
|
||||
lazyLoading: false,
|
||||
loadLazyTimeout: null,
|
||||
code: {
|
||||
basic: `
|
||||
<DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
|
||||
:virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
|
||||
<Column field="id" header="Id" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="vin" header="Vin" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="30%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
|
||||
:virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
|
||||
<Column field="id" header="Id" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="vin" header="Vin" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="30%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CarService } from '@/service/CarService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
virtualCars: Array.from({ length: 100000 }),
|
||||
lazyLoading: false,
|
||||
loadLazyTimeout: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.cars = Array.from({ length: 100000 }).map((_, i) => 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: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataTable :value="virtualCars" scrollable scrollHeight="400px" tableStyle="min-width: 50rem"
|
||||
:virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
|
||||
<Column field="id" header="Id" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="vin" header="Vin" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="30%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color" style="width: 20%">
|
||||
<template #loading>
|
||||
<div class="flex align-items-center" :style="{ height: '17px', 'flex-grow': '1', overflow: 'hidden' }">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { CarService } from '@/service/CarService';
|
||||
|
||||
onMounted(() => {
|
||||
cars.value = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
|
||||
});
|
||||
|
||||
const cars = ref();
|
||||
const virtualCars = ref(Array.from({ length: 100000 }));
|
||||
const lazyLoading = ref(false);
|
||||
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);
|
||||
};
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.cars = Array.from({ length: 100000 }).map((_, i) => 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>
|
||||
94
doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
Normal file
94
doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>
|
||||
Virtual Scrolling is an efficient way to render large amount data. Usage is similar to regular scrolling with the addition of <i>virtualScrollerOptions</i> property to define a fixed <i>itemSize</i>. Internally,
|
||||
<NuxtLink to="/virtualscroller">VirtualScroller</NuxtLink> component is utilized so refer to the API of VirtualScroller for more information about the available options.
|
||||
</p>
|
||||
<p>In this example, <strong>100000</strong> preloaded records are rendered by the Table.</p>
|
||||
</DocSectionText>
|
||||
<div class="card">
|
||||
<DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
|
||||
<Column field="id" header="Id" style="width: 20%"></Column>
|
||||
<Column field="vin" header="Vin" style="width: 20%"></Column>
|
||||
<Column field="year" header="Year" style="width: 20%"></Column>
|
||||
<Column field="brand" header="Brand" style="width: 20%"></Column>
|
||||
<Column field="color" header="Color" style="width: 20%"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
<DocSectionCode :code="code" :service="['CarService']" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CarService } from '@/service/CarService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
code: {
|
||||
basic: `
|
||||
<DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
|
||||
<Column field="id" header="Id" style="width: 20%"></Column>
|
||||
<Column field="vin" header="Vin" style="width: 20%"></Column>
|
||||
<Column field="year" header="Year" style="width: 20%"></Column>
|
||||
<Column field="brand" header="Brand" style="width: 20%"></Column>
|
||||
<Column field="color" header="Color" style="width: 20%"></Column>
|
||||
</DataTable>`,
|
||||
options: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
|
||||
<Column field="id" header="Id" style="width: 20%"></Column>
|
||||
<Column field="vin" header="Vin" style="width: 20%"></Column>
|
||||
<Column field="year" header="Year" style="width: 20%"></Column>
|
||||
<Column field="brand" header="Brand" style="width: 20%"></Column>
|
||||
<Column field="color" header="Color" style="width: 20%"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { CarService } from '@/service/CarService';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
|
||||
}
|
||||
};
|
||||
<\/script>`,
|
||||
composition: `
|
||||
<template>
|
||||
<div class="card">
|
||||
<DataTable :value="cars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ itemSize: 46 }" tableStyle="min-width: 50rem">
|
||||
<Column field="id" header="Id" style="width: 20%"></Column>
|
||||
<Column field="vin" header="Vin" style="width: 20%"></Column>
|
||||
<Column field="year" header="Year" style="width: 20%"></Column>
|
||||
<Column field="brand" header="Brand" style="width: 20%"></Column>
|
||||
<Column field="color" header="Color" style="width: 20%"></Column>
|
||||
</DataTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { CarService } from '@/service/CarService';
|
||||
|
||||
const cars = ref();
|
||||
|
||||
onMounted(() => {
|
||||
cars.value = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
|
||||
});
|
||||
<\/script>`
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue