QuickGrid for Blazor 알아보기 ( .NET 8)

 

가장 일반적인 요구 사항을 가진 Blazor 개발자에게 편리하고 간단하며 유연한 데이터 그리드 구성 요소를 제공합니다 .
Blazor DataGrid 구성 요소를 구축하는 모든 사람에게 참조 아키텍처( reference architecture ) 및 성능 기준( performance baseline) 을 제공합니다 . 

QuickGrid는 상용만큼의 다양한 기능이 아닌, 가장 핵심적인 그리드 기능과 핵심 기본 사항에 필요한 사항만 추가하고 있습니다.

 

• Performance (성능)
• Accessibility (접근성)
• Internationalization (including RTL languages) (국제화)
• Extensibility (확장성)

 

 

표나 그리드를 표시하는 것은 웹 애플리케이션에서 가장 일반적인 요구 사항 중 하나입니다. ASP.NET Core 및 Blazor에 사용할 수 있는 타사 그리드 구성 요소는 많이 있습니다. 그러나 정렬, 페이징 및 필터링 기능이 있는 기본적인 표 표시가 필요한 경우 Blazor 팀에서 개발한 QuickGrid 구성 요소만 있으면 됩니다. 이 문서에서는 QuickGrid의 몇 가지 기능과 기능을 살펴봅니다.

Blazor용 QuickGrid 컴포넌트는 모든 IQueryable의 데이터를 표시하는 데 사용할 수 있으며, GridItemsProvider 콜백에서 데이터를 가져올 수도 있습니다. 다음 예제에서는 주로 EntityFramework Core 의 IQueryable을 데이터 소스로 사용하겠습니다. QuickGrid 컴포넌트는 웹 어셈블리뿐만 아니라 Blazor 서버에서도 사용할 수 있지만 예제에서는 Blazor 서버를 사용하겠습니다.

상세 샘플 설명 예제

 

https://www.binaryintellect.net/articles/7155b7d3-ca08-4d73-bc53-68da88d5e7c5.aspx

Display tabular data using QuickGrid for Blazor | BinaryIntellect Knowledge Base

 

 

Blazor  의 QuickGrid 컴포넌트에 대해 어느 정도는 알고 계실 것 같습니다. 보시다시피 QuickGrid는 표 형식의 데이터를 표시하기 위한 기본 기능을 제공합니다. QuickGrid에 대한 자세한 내용은 공식 문서에서 확인할 수 있습니다.

 

아래는 많은 샘플 예제를 제공합니다. 참고로 QuickGrid는 .NET 8 에서 공식적으로 지원됩니다.

 

https://aspnet.github.io/quickgridsamples/

Intro

 

 

코드 맞보기

 

@inject DataSource Data

<div class="grid">
    <QuickGrid Items="@FilteredItems" Pagination="@pagination">
        <TemplateColumn Title="Rank" SortBy="@rankSort" Align="Align.Center" InitialSortDirection="SortDirection.Ascending" IsDefaultSortColumn="true">
            <img class="flag" src="flags/@(context.Code).svg" />
        </TemplateColumn>
        <PropertyColumn Property="@(c => c.Name)" Sortable="true" Class="country-name">
            <ColumnOptions>
                <div class="search-box">
                    <input type="search" autofocus @bind="nameFilter" @bind:event="oninput" placeholder="Country name..." />
                </div>
            </ColumnOptions>
        </PropertyColumn>
        <PropertyColumn Property="@(c => c.Medals.Gold)" Sortable="true" Align="Align.Right" />
        <PropertyColumn Property="@(c => c.Medals.Silver)" Sortable="true" Align="Align.Right" />
        <PropertyColumn Property="@(c => c.Medals.Bronze)" Sortable="true" Align="Align.Right" />
        <PropertyColumn Property="@(c => c.Medals.Total)" Sortable="true" Align="Align.Right" />
    </QuickGrid>
</div>

<Paginator State="@pagination" />

@code {
    IQueryable<Country>? items;
    PaginationState pagination = new PaginationState { ItemsPerPage = 15 };
    string nameFilter = string.Empty;

    GridSort<Country> rankSort = GridSort<Country>
        .ByDescending(x => x.Medals.Gold)
        .ThenDescending(x => x.Medals.Silver)
        .ThenDescending(x => x.Medals.Bronze);

    IQueryable<Country>? FilteredItems => items?.Where(x => x.Name.Contains(nameFilter, StringComparison.CurrentCultureIgnoreCase));

    protected override async Task OnInitializedAsync()
    {
        items = (await Data.GetCountriesAsync()).AsQueryable();
    }
}

 

 

정렬과, 검색 그리고 페이징을 기반으로 필요한 부분을 지원 합니다.

 

 

 

Blazor   자주 묻는 질문들

 

Blazor 에 대해서 궁금하신 분들은 여기 아래 링크를 통해 확인해 보세요. 참고로 Blazor 는 모던 SPA 앱 프레임워크인 React, Angular, 그리고 Vue에서 영감을 얻어 만든 새로운 프레임워크 입니다.

 

 

https://github.com/rkttu/asp-net-blazor-krguide/blob/master/faq.md