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>