#@item.ToString("N0") Item number @item of one million

``` ```csharp private readonly int[] basicItems = Enumerable.Range(0, 1_000_000).ToArray(); ``` \n**ItemsProvider**: ```razor

@product.Name record #@product.Id.ToString("N0") · loaded at @product.LoadedAt

``` ```csharp private const int TotalProducts = 100_000; private async ValueTask> LoadProducts(BitVirtualizeItemsProviderRequest request) { await Task.Delay(500, request.CancellationToken); // simulate a network fetch var items = Enumerable.Range(request.StartIndex, Math.Min(request.Count, TotalProducts - request.StartIndex)) .Select(i => new Product(i, $"Product {i:N0}", DateTimeOffset.Now.ToString("HH:mm:ss"))) .ToList(); return new(items, TotalProducts); } public record Product(int Id, string Name, string LoadedAt); ``` \n**Dynamic size**: ```razor

@post.Author · @post.Time

@post.Body

``` ```csharp private List posts = []; protected override void OnInitialized() { var random = new Random(42); var words = "lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua".Split(' '); posts = Enumerable.Range(0, 10_000).Select(i => { var body = string.Join(' ', Enumerable.Range(0, random.Next(5, 60)).Select(_ => words[random.Next(words.Length)])); return new Post($"Author {i % 20}", $"{random.Next(1, 59)}m ago", body); }).ToList(); } public record Post(string Author, string Time, string Body); ``` \n**Horizontal**: ```razor

@item.ToString("N0")

``` ```csharp private readonly int[] horizontalItems = Enumerable.Range(0, 100_000).ToArray(); ``` \n**Grid (Lanes)**: ```razor

@item.ToString("N0")

``` ```csharp private readonly int[] gridItems = Enumerable.Range(0, 100_000).ToArray(); private int gridLanes = 4; private bool gridResponsive; ``` \n**Scrolling**: ```razor

#@item.ToString("N0")

``` ```csharp private BitVirtualize scrollRef = default!; private readonly int[] scrollItems = Enumerable.Range(0, 100_000).ToArray(); private int scrollTargetIndex = 5_000; private bool scrollSmooth = true; private (int Start, int End) visibleRange; private bool scrollAtStart; private bool scrollAtEnd; private async Task ScrollToTarget(BitScrollAlignment alignment) { await scrollRef.ScrollToIndexAsync(scrollTargetIndex, alignment, scrollSmooth); } ``` \n**ScrollerSelector**: ```razor

Content above the list scrolls away with it.

Item @item

Content below the list.

``` ```csharp private readonly int[] pageItems = Enumerable.Range(0, 10_000).ToArray(); ``` \n**Keyboard & accessibility**: ```razor

@article.Title @article.Summary

``` ```csharp private readonly Article[] articles = Enumerable.Range(1, 10_000) .Select(i => new Article(i, $"Headline number {i:N0}", $"A short summary of the story number {i:N0}.")) .ToArray(); private static Dictionary ArticleAttributes(Article article) => new() { ["aria-labelledby"] = $"article-title-{article.Id}", ["aria-describedby"] = $"article-summary-{article.Id}", }; public record Article(int Id, string Title, string Summary); ``` \n**Templates**: ```razor

Header · @templateItems.Count.ToString("N0") items

@(context.Index + 1). Item @context.Item

Footer · end of the list

No items to show ``` ```csharp private List templateItems = [.. Enumerable.Range(0, 1_000)]; ``` \n**Infinite scrolling**: ```razor

@item

@(feedLoading ? "Loading more..." : $"{feedItems.Count:N0} items loaded")

``` ```csharp private BitVirtualize feedRef = default!; private readonly List feedItems = [.. Enumerable.Range(0, 25).Select(i => $"Feed item {i:N0}")]; private bool feedLoading; private async Task LoadMoreFeedItems() { if (feedLoading) return; feedLoading = true; StateHasChanged(); await Task.Delay(700); // simulate a network fetch feedItems.AddRange(Enumerable.Range(feedItems.Count, 25).Select(i => $"Feed item {i:N0}")); feedLoading = false; await feedRef.RefreshDataAsync(); } ``` \n**Sticky headers**: ```razor @if (contact.IsHeader) {

@contact.Name

} else {

@contact.Name @contact.Email

}

@contact.Name

``` ```csharp private List contacts = []; protected override void OnInitialized() { var random = new Random(11); var firstNames = "Alice Bruno Chloe Daniel Emma Felix Grace Hugo Isla Jack Kira Liam Maya Noah Olivia Paul Quinn Ruby Sam Tara Umar Vera Will Xena Yusuf Zoe".Split(' '); var lastNames = "Adams Baker Clark Davis Evans Foster Green Hall Irwin Jones King Lewis Moore Nash Owen Price Reed Scott Turner".Split(' '); contacts = []; for (var c = 'A'; c <= 'Z'; c++) { contacts.Add(new Contact(true, c.ToString(), string.Empty)); var count = random.Next(5, lastNames.Length + 1); for (var i = 0; i < count; i++) { var name = $"{firstNames[c - 'A']} {lastNames[i]}"; contacts.Add(new Contact(false, name, $"{name.Replace(' ', '.').ToLower()}@example.com")); } } } public record Contact(bool IsHeader, string Name, string Email); ``` \n**ItemKey**: ```razor

``` ```csharp private List tasks = [.. Enumerable.Range(1, 1_000).Select(i => new TaskItem(i, $"Task {i}"))]; private int nextTaskId = 1_001; private void AddTasks() { tasks = [.. Enumerable.Range(0, 5).Select(_ => new TaskItem(nextTaskId, $"New task {nextTaskId++}")), .. tasks]; } private void RemoveTasks() { tasks = [.. tasks.Skip(5)]; } public record TaskItem(int Id, string Title); ``` \n**Reversed (chat)**: ```razor

@(loadingChatHistory ? "Loading older messages..." : chatHistoryRemaining > 0 ? "Scroll up for older messages" : "This is the beginning of the conversation")

@message.Text

Send

Jump to latest New conversation

``` ```csharp private BitVirtualize chatRef = default!; private List messages = []; private string? draftMessage; private bool loadingChatHistory; private bool chatAtEnd = true; private int chatHistoryRemaining = 381; // count of the older messages (0..380) not loaded yet protected override void OnInitialized() { // The newest messages (381..400); scrolling up loads the older ones down to 0. messages = Enumerable.Range(381, 20).Select(i => new Message(i, i % 3 == 0, $"Message number {i}")).ToList(); } private async Task SendChatMessage() { if (string.IsNullOrWhiteSpace(draftMessage)) return; var id = messages.Count == 0 ? 1000 : Math.Max(1000, messages.Max(m => m.Id) + 1); messages.Add(new Message(id, true, draftMessage.Trim())); draftMessage = string.Empty; await chatRef.RefreshDataAsync(); // Reversed mode keeps the list pinned to the bottom } private async Task LoadChatHistory() { if (loadingChatHistory || chatHistoryRemaining <= 0) return; loadingChatHistory = true; await Task.Delay(600); // simulate fetching older messages var batch = Math.Min(15, chatHistoryRemaining); messages.InsertRange(0, Enumerable.Range(chatHistoryRemaining - batch, batch).Select(i => new Message(i, i % 3 == 0, $"Message number {i}"))); chatHistoryRemaining -= batch; loadingChatHistory = false; await chatRef.RefreshDataAsync(); // the message in view stays where it was } private void NewConversation() { chatHistoryRemaining = 0; messages = [new Message(1000, false, "Hi! How can I help you?")]; } public record Message(int Id, bool Mine, string Text); ``` \n**Cascading parameters**: ```razor

Item @item

``` ```csharp private readonly int[] styleItems = Enumerable.Range(0, 1_000).ToArray(); private readonly BitVirtualizeParams[] virtualizeParams = [ new() { ItemSize = 40, OverscanCount = 5, Classes = new() { Root = "cascaded-list", Item = "cascaded-item" }, } ]; ``` \n**Style & Class**: ```razor

Item @item

Header

@(item % 10 == 0 ? $"Group {item / 10}" : $"Item {item}")

Item @item

Footer

@(item % 10 == 0 ? $"Group {item / 10}" : $"Item {item}")

``` ```csharp private readonly int[] styleItems = Enumerable.Range(0, 1_000).ToArray(); private const string cssVariablesStyle = "--bit-Virtualize-focus-color:crimson;" + "--bit-Virtualize-sticky-background:var(--bit-clr-bg-sec);" + "--bit-Virtualize-sticky-shadow:0 2px 6px rgba(0, 0, 0, 0.2)"; ``` \n**RTL**: ```razor

مورد @item.ToString("N0")

``` ```csharp private readonly int[] horizontalItems = Enumerable.Range(0, 100_000).ToArray(); ```