VirtualizationTable.razor

<p>This is to show we can use an HTML table with Virtualize, despite it having particular rules about the element hierarchy.</p>
<p>We're also using the document root as the scroll container. Other tests cover having a different scroll container, such as a div with overflow:scroll.</p>

<table id="virtualized-table">
    <thead style="position: sticky; top: 0; background-color: silver">
        <tr>
            <th>Item</th>
            <th>Another col</th>
        </tr>
    </thead>
    <tbody>
        <Virtualize Items="@fixedItems" ItemSize="30" SpacerElement="tr" OverscanCount="3">
            <tr @key="context" style="height: 30px;" id="row-@context">
                <td>Item @context</td>
                <td>Another value</td>
            </tr>
        </Virtualize>
    </tbody>
</table>

<style>
    /* Represents https://github.com/dotnet/aspnetcore/issues/37659 */
    html, body { overflow-y: scroll }
</style>

@code {
    List<int> fixedItems = Enumerable.Range(0, 1000).ToList();
}