BlazorDatasheet 사용하기

BlazorDataSheet

BlazorDataSheet 는 Blazor 에서 사용할 수 있는 액셀과 같은 기능을 제공하는 라이브러리입니다.

https://github.com/anmcgrath/BlazorDatasheet

GitHub - anmcgrath/BlazorDatasheet: Simple excel-like datasheet Blazor component

Simple excel-like datasheet Blazor component. Contribute to anmcgrath/BlazorDatasheet development by creating an account on GitHub.

github.com

대략적인 기능은 아래와 같습니다.

데이터 편집 및 표시
- 셀 편집 기능
- 다양한 데이터 타입 지원 (텍스트, 숫자, 날짜 등)
- 사용자 정의 셀 렌더러
스프레드시트 기능
- 셀 범위 선택
- 복사 및 붙여넣기
- 셀 병합
- 셀 서식 지정
수식 지원
- 기본적인 수학 함수 계산
- 셀 참조 기능
UI 기능
- 데이터 필터링
- 정렬 기능
- 컬럼 리사이징
데이터 바인딩
- Blazor 데이터 모델과 연동
- 양방향 데이터 바인딩 지원
확장성
- 사용자 정의 컴포넌트 추가
- 이벤트 처리 시스템

설치 및 설정

Blazor SSR 프로젝트 생성 후 BlazorDatasheet Nuget package 를 설치합니다.

Program.cs 에 builder.Services.AddBlazorDatasheet(); 코드를 추가합니다.

using BlazorDatasheet.Extensions;

using BlazorSheetTest.Components;

namespace BlazorSheetTest;

public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);

        // 추가
        builder.Services.AddBlazorDatasheet();

        // Add services to the container.
        builder.Services.AddRazorComponents()
            .AddInteractiveServerComponents();

        var app = builder.Build();

        // Configure the HTTP request pipeline.
        if (!app.Environment.IsDevelopment())
        {
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }

        app.UseHttpsRedirection();

        app.UseAntiforgery();

        app.MapStaticAssets();
        app.MapRazorComponents<App>()
            .AddInteractiveServerRenderMode();

        app.Run();
    }
}

App.razor 파일에 style 과 script 를 추가합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <link rel="stylesheet" href="@Assets["BlazorSheetTest.styles.css"]" />

    @* 추가 *@
    <link href="_content/BlazorDatasheet/sheet-styles.css" rel="stylesheet" />

    <HeadOutlet /> 
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>

    @* 추가 *@
    <script src="_content/BlazorDatasheet/blazor-datasheet.js" type="text/javascript"></script>
</body>

</html>

데이터 바인딩 예시

List<T> 형태의 데이터를 바인딩하는 방법을 알아봅니다.

@page "/"

@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<Datasheet Sheet="sheet"/>

@code {

    private Sheet sheet = new Sheet(0,0);

    protected override void OnInitialized()
    {
        TestBinding();
        base.OnInitialized();
    }

    private void TestBinding()
    {
        sheet.Commands.PauseHistory();
        sheet.BatchUpdates();

        // 제품 데이터 리스트
        List<Product> products = new List<Product>
        {
            new Product { Name = "Laptop", Price = 1200, Quantity = 5 },
            new Product { Name = "Keyboard", Price = 50, Quantity = 20 },
            new Product { Name = "Mouse", Price = 30, Quantity = 15 }
        };

        sheet = new Sheet(products.Count, typeof(Product).GetProperties().Count());

        // 데이터를 object[][] 배열로 변환
        object[][] values = products
            .Select(p => new object[] { p.Name, p.Price, p.Quantity })
            .ToArray();
            
        sheet.Cells.SetValues(0, 0, values);

        sheet.EndBatchUpdates();
        sheet.Commands.ResumeHistory();
        sheet.ScreenUpdating = true;

        base.OnInitialized();
    }

    private class Product
    {
        public string Name { get; set; }
        public double Price { get; set; }
        public int Quantity { get; set; }
    }
}

위 코드를 보면 알수 있듯이 Product class 데이터를 바인딩하게되는데 SetValues 를 이용하게됩니다.

sheet 는 초기화는 아래 코드를 이용하면 모두 초기화됩니다.

sheet = new Sheet(0,0);

결과

참고

아래 사이트로 가면 많은 정보가 있습니다.

https://blazorhelpwebsite.com/

Blazor-Blogs

Search 2/3/2025 - Story Book Cabin Blazor Godot Story Book Cabin is an interactive Blazor Godot project that allows users to drag and drop characters into a virtual environment. Users can give natural language prompts to an AI, which interprets the inst

blazorhelpwebsite.com

728x90

저작자표시 비영리 변경금지

'코딩 > Blazor' 카테고리의 다른 글

BlazorDatasheet 로 ComboBox 데이터 표시하기 (0)	2025.03.03
BlazorDatasheet 에 동적 dynamic 바인딩 처리하기 - SQLiteDB/Dapper 이용 (0)	2025.03.03
Page 를 별도의 프로젝트로 분리하는 방법 (0)	2025.02.24
MudBlazor 가상화 처리 (0)	2025.01.12
MubBlazor 사용하기 (0)	2025.01.11