How to calculate/recalculate row height with expandable content?

[ghost]

I need to build expandable table, on button click content as sub-row must appear. I have big problem figuring out how to calculate dynamic height on render (page crashes) and to recalculate height on row expand. Please give me some hint.

<script>
    import VirtualList from 'svelte-tiny-virtual-list';
    let virtualList;
    let expanded = [1, 5];
        let rows = [1,2,3,4,5,6,7,8,9,10]
    let columns = [
        {
            id: 'testCol'
        }
    ];

    let heights = [];
    $: console.log(heights);
</script>

<div>
    <div class="w-[500px]">
        <VirtualList
            width="100%"
            height={600}
            itemCount={rows.length}
            itemSize={(i) => heights[i]}
            bind:this={virtualList}
        >
            <div class="" slot="item" let:index let:style {style} bind:clientHeight={heights[index]}>
                {#each columns as column}
                    {@const row = rows[index]}
                    <div class=" px-sm table-cell">
                        <button
                            on:click={() => {
                                let newArr = [];

                                if (!expanded.includes(index)) {
                                    expanded = [...expanded, index];
                                    return;
                                }

                                expanded.map((i) => {
                                    if (i != index) {
                                        newArr.push(i);
                                    }
                                });
                                expanded = newArr;

                                virtualList.recomputeSizes(0);
                            }}>Expand trigger button</button
                        >
                    </div>
                {/each}
                {#if expanded.includes(index)}
                    <div class="bg-red-200 w-full">
                        <div class="text-right">Expended row content</div>
                    </div>
                {/if}
            </div>
        </VirtualList>
    </div>
</div>