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>