v-data-table-server dynamically loads data on scroll

50 views Asked by At

After migrating to Vue3 v-data-table-server taking too much time to render rows. We are using vuetify3. I want to add lazy loading in v-data-table-server and render more data on scroll. How can I achieve this ?

this is my data table.

<v-data-table-server
    :items="items"
    hide-default-header
    :items-per-page-text="$t('lang.common.labels.rowPerPage')"
    :footer-props="{ 'items-per-page-options': [50, 100, 500] }"
    :items-per-page="pagination.itemsPerPage"
    :page="pagination.page"
    @update:options="(e) => updateTicketListPagination(e)"
    :items-length="totalItems"
    :loading-text="$t('lang.common.loaders.loadingTickets')"
    no-data-text="No item(s) found"
    item-key="itemId"
    class="base"
    item-value="itemId"
    first-icon
    last-icon
>
<template v-slot:headers></template>
    <template v-slot:item="props">
            <item-component
                :key="`list-item-key-${props.item.itemId}`"
                v-bind:item="props.item"
            ></item-component>
    </template>
</v-data-table-server>

I tried v-lazy but its not rendering rows on scroll. Am I using it correctly? or is there any other better way to achieve it ?

<v-data-table-server
    :items="items"
    hide-default-header
    :items-per-page-text="$t('lang.common.labels.rowPerPage')"
    :footer-props="{ 'items-per-page-options': [50, 100, 500] }"
    :items-per-page="pagination.itemsPerPage"
    :page="pagination.page"
    @update:options="(e) => updateTicketListPagination(e)"
    :items-length="totalItems"
    :loading-text="$t('lang.common.loaders.loadingTickets')"
    no-data-text="No item(s) found"
    item-key="itemId"
    class="base"
    item-value="itemId"
    first-icon
    last-icon
>
<template v-slot:headers></template>
    <template v-slot:item="props">
        <v-lazy  
            :options="{'threshold':0.8}"
            :transition="false"
            >
            <item-component
                :key="`list-item-key-${props.item.itemId}`"
                v-bind:item="props.item"
            ></item-component>
        </v-lazy>
    </template>
</v-data-table-server>
0

There are 0 answers