```
<script lang="ts">
     let rowVirtualizer: ReturnType<typeof createVirtualizer>;
     let scrollElement: Element;
     onMount(() => {
          rowVirtualizer = createVirtualizer({
               count: candidates.length,
               getScrollElement: () => scrollElement,
               estimateSize: () => 36,
               getItemKey: (index: number) => candidates[index].id,
               overscan: 10,
               debug: dev
          });
     });

     /**
      * Get rows currently in the viewport (+ overscan).
      */
     $: virtualRows = $rowVirtualizer?.getVirtualItems() ?? [];

     /**
      * Compute the paddingTop that ensures that the table has the correct fake size
      * to render the proper scrollbar size.
      */
     $: paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
     $: paddingBottom =
          virtualRows.length > 0
               ? $rowVirtualizer.getTotalSize() - (virtualRows?.[virtualRows.length - 1]?.end || 0)
               : 0;
</script>


<div bind:this={scrollElement} class="root">
	<Table style="height: {$rowVirtualizer?.getTotalSize()}px">
		<TableHead>
			...
		</TableHead>

		<tbody>
			{#if $rowVirtualizer}

				{#if paddingTop > 0}
					<tr>
						<td style:height="${paddingTop}px" />
					</tr>
				{/if}

				{#each virtualRows as virtualRow}
					{@const row = rows[virtualRow.index]}

					<TableRow data-testid={`candidate-row-${row.getValue('email')}`}>
						{#each row.getVisibleCells() as cell, index}
							<TableCell
								data-testid={cell.column.columnDef.id}
								focusable
								variant={cell.column.columnDef.meta?.variant}
								selected={isSamePosition($activeCellStore.position, { row: row.index, col: index })}
								on:click={() => activeCellStore.select({ row: row.index, col: index })}
								on:dblclick={() => activeCellStore.setMode('edit')}
							>
								<svelte:component
									this={flexRender(cell.column.columnDef.cell, {
										...cell.getContext(),
										position: { row: row.index, col: index }
									})}
								/>
							</TableCell>
						{/each}
						<TableCell />
					</TableRow>
				{/each}

				{#if paddingBottom > 0}
					<tr>
						<td style:height="{paddingBottom}px" />
					</tr>
				{/if}
			{/if}
		</tbody>
	</Table>
</div>

<style>
	.root {
		flex: 1;
		overflow: auto;
		scroll-padding-block-start: var(--spacing-11);
	}
</style>
```