MudBlazor 가상화 처리

MudBlazor 가상화 처리

 

이전 시간에 MudBlazor 초기 설정하는 방법에 대해서 알아봤습니다.

2025.01.10 - [코딩/Blazor] - MubBlazor 사용하기

위 링크에도 있지만 가상화를 위해서는 반드시 HeadOutlet, Routes 는 InteractiveServer 로 설정해야합니다.

 

MudDataGrid, MudTable 컨트롤을 사용해 virtualize 처리하는 방법입니다.

@page "/weather"
@attribute [StreamRendering]
@using System.Collections.Generic

<MudText Typo="Typo.h5" Class="mb-4">가상화된 MudDataGrid</MudText>
<MudDataGrid Items="@_items" FixedHeader="true" Height="350px" Virtualize="true">
    <Columns>
        <PropertyColumn Property="x => x.Column1" />
        <PropertyColumn Property="x => x.Column2" />
        <PropertyColumn Property="x => x.Column3" />
        <PropertyColumn Property="x => x.Column4" />
        <PropertyColumn Property="x => x.Column5" />
    </Columns>
</MudDataGrid>
<br/>
<MudText Typo="Typo.h5" Class="mb-4">가상화된 MudTable</MudText>
<MudTable Items="forecasts" Hover="true" SortLabel="Sort By" Elevation="0" AllowUnsorted="false" Virtualize="true" Height="350px">
    <HeaderContent>
        <MudTh><MudTableSortLabel InitialDirection="SortDirection.Ascending" SortBy="new Func<WeatherForecast, object>(x=>x.Date)">Date</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureC)">Temp. (C)</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.TemperatureF)">Temp. (F)</MudTableSortLabel></MudTh>
        <MudTh><MudTableSortLabel SortBy="new Func<WeatherForecast, object>(x=>x.Summary!)">Summary</MudTableSortLabel></MudTh>
    </HeaderContent>
    <RowTemplate>
        <MudTd DataLabel="Date">@context.Date</MudTd>
        <MudTd DataLabel="Temp. (C)">@context.TemperatureC</MudTd>
        <MudTd DataLabel="Temp. (F)">@context.TemperatureF</MudTd>
        <MudTd DataLabel="Summary">@context.Summary</MudTd>
    </RowTemplate>
    @* <PagerContent>
        <MudTablePager PageSizeOptions="new int[]{50, 100}" />
    </PagerContent> *@
</MudTable>

@code {

    private WeatherForecast[]? forecasts;

    public record Model(string Column1, string Column2, string Column3, string Column4, string Column5);

    private List<Model> _items = new List<Model>();

    protected override void OnInitialized()
    {
        for (var i = 0; i < 200; i++)
        {
            _items.Add(new Model($"Value_{i}", $"Value_{i}", $"Value_{i}", $"Value_{i}", $"Value_{i}"));
        }

        StateHasChanged();

        var startDate = DateOnly.FromDateTime(DateTime.Now);
        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
        forecasts = Enumerable.Range(1, 500).Select(index => new WeatherForecast
            {
                Date = startDate.AddDays(index),
                TemperatureC = Random.Shared.Next(-20, 55),
                Summary = summaries[Random.Shared.Next(summaries.Length)]
            }).ToArray();
    }


    private class WeatherForecast
    {
        public DateOnly Date { get; set; }
        public int TemperatureC { get; set; }
        public string? Summary { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}

결과

소스

https://github.com/kei-soft/FluentMudBlazorTest/tree/master/MudBlazorSample

FluentMudBlazorTest/MudBlazorSample at master · kei-soft/FluentMudBlazorTest