How to I access item index in ItemContent in Virtualize component in Blazor

Question

How do I access index?

<Virtualize ItemsProvider="@ProvideItems">
    <ItemContent>
       <div>
          Item: @context
          Index: @???
        </div>
    </ItemContent>
</Virtualize>

Answer 1

There isn't an index, you have to set it yourself using the @key="myKey" attribute on the <ItemContent /> child content. Even then, it doesn't exactly solve your problem of knowing the item's index. However, <Virtualize /> can use the @key attribute for tracking purposes when it comes to UI updates like filtering, ordering, adding, deleting, or updating. I use this component for rendering a dynamic dashboard with filtering/sorting capabilities by targeting the key and it works great.

Example:

<Virtualize ItemsProvider="@ProvideItems">
    <ItemContent>
       <div @key="context.ItemId">
          Item: @context
          Index: @context.ItemId
        </div>
    </ItemContent>
</Virtualize>

Reference: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#use-key-to-control-the-preservation-of-elements-and-components