In our project using Vue.js, we have implemented a custom table bound to an array. It is visualized as shown below:
https://i.sstatic.net/FlXCF.png
The crucial part of the HTML code appears like this:
<InfiniteScroll ref="scroller" :disable="finished" @load="onLoad">
<swipeable-table
v-if="waitingList.length"
:headers="headers"
:items="waitingList"
:loading="loading"
custom-width
outerBorder
>
<template slot="rows" slot-scope="{ item: booking }">
<tr>
<td>{{ 0 }}</td>
<td></td>
<td></td>
<td>{{ fullName(booking.user) }}</td>
<td>{{ unitName(booking.search_by) }}</td>
...
</tr>
</template>
</swipeable-table>
...
</InfiniteScroll>
The array waitingList consists of objects.
This snippet of JavaScript code is depicted as follows:
methods: {
fullName(user) {
return fullName.by(user, null, true)
},
unitName(unit) {
return unit?.name ?? ''
},
...
The table has infinite scrolling functionality, displaying 30 items initially and loading the next set of 30 items as you scroll (e.g., 30+30=60).
The object array looks similar to the images displayed here: https://i.sstatic.net/8vEjQ.png, https://i.sstatic.net/t12Ky.png.
If there's a method in JavaScript that can accomplish this functionality, please advise. Otherwise, how can I achieve it?