primevue-mirror/doc/datatable/virtualscroll/PreloadVirtualScrollDoc.vue

<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,
            <PrimeVueNuxtLink to="/virtualscroller">VirtualScroller</PrimeVueNuxtLink> 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>
`,
                data: `
{
    id: 1
    vin: tvACo,
    brand: Norma,
    color: Black,
    year: 2002
}`
            }
        };
    },
    mounted() {
        this.cars = Array.from({ length: 100000 }).map((_, i) => CarService.generateCar(i + 1));
    }
};
</script>