repeater-virtual-table.js

// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world

import {makeAutoObservable, autorun, toJS} from 'mobx'
import * as uuid from 'uuid'

const fakeData = [
    {
        "name": "blah0",
        "number": "0",
        "_id": "0"
    },
    {
        "name": "blah1",
        "number": "1",
        "_id": "1"
    },
    {
        "name": "blah2",
        "number": "2",
        "_id": "2"
    },
    {
        "name": "blah3",
        "number": "3",
        "_id": "3"
    },
    {
        "name": "blah4",
        "number": "4",
        "_id": "4"
    },
    {
        "name": "blah5",
        "number": "5",
        "_id": "5"
    },
    {
        "name": "blah6",
        "number": "6",
        "_id": "6"
    },
    {
        "name": "blah7",
        "number": "7",
        "_id": "7"
    },
    {
        "name": "blah8",
        "number": "8",
        "_id": "8"
    },
    {
        "name": "blah9",
        "number": "9",
        "_id": "9"
    },
    {
        "name": "blah10",
        "number": "10",
        "_id": "10"
    },
    {
        "name": "blah11",
        "number": "11",
        "_id": "11"
    },
    {
        "name": "blah12",
        "number": "12",
        "_id": "12"
    },
    {
        "name": "blah13",
        "number": "13",
        "_id": "13"
    },
    {
        "name": "blah14",
        "number": "14",
        "_id": "14"
    },
    {
        "name": "blah15",
        "number": "15",
        "_id": "15"
    },
    {
        "name": "blah16",
        "number": "16",
        "_id": "16"
    },
    {
        "name": "blah17",
        "number": "17",
        "_id": "17"
    },
    {
        "name": "blah18",
        "number": "18",
        "_id": "18"
    },
    {
        "name": "blah19",
        "number": "19",
        "_id": "19"
    },
    {
        "name": "blah20",
        "number": "20",
        "_id": "20"
    },
    {
        "name": "blah21",
        "number": "21",
        "_id": "21"
    },
    {
        "name": "blah22",
        "number": "22",
        "_id": "22"
    },
    {
        "name": "blah23",
        "number": "23",
        "_id": "23"
    },
    {
        "name": "blah24",
        "number": "24",
        "_id": "24"
    },
    {
        "name": "blah25",
        "number": "25",
        "_id": "25"
    },
    {
        "name": "blah26",
        "number": "26",
        "_id": "26"
    },
    {
        "name": "blah27",
        "number": "27",
        "_id": "27"
    },
    {
        "name": "blah28",
        "number": "28",
        "_id": "28"
    },
    {
        "name": "blah29",
        "number": "29",
        "_id": "29"
    },
    {
        "name": "blah30",
        "number": "30",
        "_id": "30"
    },
    {
        "name": "blah31",
        "number": "31",
        "_id": "31"
    },
    {
        "name": "blah32",
        "number": "32",
        "_id": "32"
    },
    {
        "name": "blah33",
        "number": "33",
        "_id": "33"
    },
    {
        "name": "blah34",
        "number": "34",
        "_id": "34"
    },
    {
        "name": "blah35",
        "number": "35",
        "_id": "35"
    },
    {
        "name": "blah36",
        "number": "36",
        "_id": "36"
    },
    {
        "name": "blah37",
        "number": "37",
        "_id": "37"
    },
    {
        "name": "blah38",
        "number": "38",
        "_id": "38"
    },
    {
        "name": "blah39",
        "number": "39",
        "_id": "39"
    },
    {
        "name": "blah40",
        "number": "40",
        "_id": "40"
    },
    {
        "name": "blah41",
        "number": "41",
        "_id": "41"
    },
    {
        "name": "blah42",
        "number": "42",
        "_id": "42"
    },
    {
        "name": "blah43",
        "number": "43",
        "_id": "43"
    },
    {
        "name": "blah44",
        "number": "44",
        "_id": "44"
    },
    {
        "name": "blah45",
        "number": "45",
        "_id": "45"
    },
    {
        "name": "blah46",
        "number": "46",
        "_id": "46"
    },
    {
        "name": "blah47",
        "number": "47",
        "_id": "47"
    },
    {
        "name": "blah48",
        "number": "48",
        "_id": "48"
    },
    {
        "name": "blah49",
        "number": "49",
        "_id": "49"
    },
    {
        "name": "blah50",
        "number": "50",
        "_id": "50"
    },
    {
        "name": "blah51",
        "number": "51",
        "_id": "51"
    },
    {
        "name": "blah52",
        "number": "52",
        "_id": "52"
    },
    {
        "name": "blah53",
        "number": "53",
        "_id": "53"
    },
    {
        "name": "blah54",
        "number": "54",
        "_id": "54"
    },
    {
        "name": "blah55",
        "number": "55",
        "_id": "55"
    },
    {
        "name": "blah56",
        "number": "56",
        "_id": "56"
    },
    {
        "name": "blah57",
        "number": "57",
        "_id": "57"
    },
    {
        "name": "blah58",
        "number": "58",
        "_id": "58"
    },
    {
        "name": "blah59",
        "number": "59",
        "_id": "59"
    },
    {
        "name": "blah60",
        "number": "60",
        "_id": "60"
    },
    {
        "name": "blah61",
        "number": "61",
        "_id": "61"
    },
    {
        "name": "blah62",
        "number": "62",
        "_id": "62"
    },
    {
        "name": "blah63",
        "number": "63",
        "_id": "63"
    },
    {
        "name": "blah64",
        "number": "64",
        "_id": "64"
    },
    {
        "name": "blah65",
        "number": "65",
        "_id": "65"
    },
    {
        "name": "blah66",
        "number": "66",
        "_id": "66"
    },
    {
        "name": "blah67",
        "number": "67",
        "_id": "67"
    },
    {
        "name": "blah68",
        "number": "68",
        "_id": "68"
    },
    {
        "name": "blah69",
        "number": "69",
        "_id": "69"
    },
    {
        "name": "blah70",
        "number": "70",
        "_id": "70"
    },
    {
        "name": "blah71",
        "number": "71",
        "_id": "71"
    },
    {
        "name": "blah72",
        "number": "72",
        "_id": "72"
    },
    {
        "name": "blah73",
        "number": "73",
        "_id": "73"
    },
    {
        "name": "blah74",
        "number": "74",
        "_id": "74"
    },
    {
        "name": "blah75",
        "number": "75",
        "_id": "75"
    },
    {
        "name": "blah76",
        "number": "76",
        "_id": "76"
    },
    {
        "name": "blah77",
        "number": "77",
        "_id": "77"
    },
    {
        "name": "blah78",
        "number": "78",
        "_id": "78"
    },
    {
        "name": "blah79",
        "number": "79",
        "_id": "79"
    },
    {
        "name": "blah80",
        "number": "80",
        "_id": "80"
    },
    {
        "name": "blah81",
        "number": "81",
        "_id": "81"
    },
    {
        "name": "blah82",
        "number": "82",
        "_id": "82"
    },
    {
        "name": "blah83",
        "number": "83",
        "_id": "83"
    },
    {
        "name": "blah84",
        "number": "84",
        "_id": "84"
    },
    {
        "name": "blah85",
        "number": "85",
        "_id": "85"
    },
    {
        "name": "blah86",
        "number": "86",
        "_id": "86"
    },
    {
        "name": "blah87",
        "number": "87",
        "_id": "87"
    },
    {
        "name": "blah88",
        "number": "88",
        "_id": "88"
    },
    {
        "name": "blah89",
        "number": "89",
        "_id": "89"
    },
    {
        "name": "blah90",
        "number": "90",
        "_id": "90"
    },
    {
        "name": "blah91",
        "number": "91",
        "_id": "91"
    },
    {
        "name": "blah92",
        "number": "92",
        "_id": "92"
    },
    {
        "name": "blah93",
        "number": "93",
        "_id": "93"
    },
    {
        "name": "blah94",
        "number": "94",
        "_id": "94"
    },
    {
        "name": "blah95",
        "number": "95",
        "_id": "95"
    },
    {
        "name": "blah96",
        "number": "96",
        "_id": "96"
    },
    {
        "name": "blah97",
        "number": "97",
        "_id": "97"
    },
    {
        "name": "blah98",
        "number": "98",
        "_id": "98"
    },
    {
        "name": "blah99",
        "number": "99",
        "_id": "99"
    }
]


$w.onReady(function () {
	const repeater = $w('#repeater1')
	repeater.onItemReady((item, itemData) => {
		item('#text1').text = itemData.name
		item('#text2').text = itemData.number
	})
	let startIndex = 0
	let lastIndex = 10
	repeater.data = fakeData.slice(startIndex, lastIndex)
	repeater.forItems([fakeData[lastIndex-3]._id], (item, itemData) => {
		item('#container1').onViewportEnter(() => {
			debugger
			repeater.data = repeater.data.concat(fakeData.slice(startIndex, lastIndex))
			startIndex += 10
			lastIndex += 10
		})
	})
	startIndex += 10
	lastIndex += 10

});