Free & Open-Source Blazor Data Grid (Grid Lite)

    The Ignite UI for Blazor Grid Lite is a lightweight, high-performance Blazor data grid that’s free to use, open-source, and built for modern Blazor applications.

    This free Blazor data grid is open-source JavaScript data grid built as a Web Component, which means you can use it dependency-free with or without a web framework. It delivers essential data-display functionality with minimal overhead and the performance users expect. The Blazor Grid Lite is designed for developers who need fast and lightweight data presentation.

    What You Get with our Free Blazor Data Grid

    Our free, open-source Blazor Grid Lite comes with the following column-based features: sorting, filtering, hiding, resizing and a variety of pre-defined data types. Blazing-fast performance is delivered with the use of row virtualization. In addition, the component supports keyboard navigation and theming through the Ignite UI Theming Framework.

    Install IgniteUI.Blazor.GridLite

    Visual Studio에서 Tools → NuGet Package Manager → Manage NuGet 패키지 for 솔루션 옵션을 선택해 NuGet 패키지 매니저를 엽니다. IgniteUI.Blazor.GridLite NuGet 패키지를 검색해서 설치하세요.

    또는 패키지 관리자 콘솔을 통해 설치할 수도 있습니다:

    Install-Package IgniteUI.Blazor.GridLite

    Or via .NET CLI:

    dotnet add package IgniteUI.Blazor.GridLite

    Using Grid Lite

    1 - Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:

    @using IgniteUI.Blazor.Controls

    2 - 프로젝트 유형에 맞는 위치에 스타일 시트를 추가하세요:

    <head>
       <link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
</head>

    3 - Razor 페이지에 Grid Lite 컴포넌트 추가:

    <IgbGridLite Data="data" AutoGenerateColumns="true">
</IgbGridLite>

@code {
    private object[] data = new object[]
    {
        new { Name = "John", Age = 30, City = "New York" },
        new { Name = "Jane", Age = 25, City = "Los Angeles" },
        new { Name = "Bob", Age = 35, City = "Chicago" }
    };
}

    Grid Lite in Action

    Grid Lite는 앱에서 아름다운 데이터 그리드/데이터 테이블 경험을 제공하는 데 필요한 핵심 기능을 제공하기 위해 설계되었습니다. 성능과 아름다움을 위해 설계된 Grid Lite는 어떤 프레임워크와 플랫폼에서도 작동할 수 있습니다.

    Performance Built In

    행 단위 가상화는 부드러운 스크롤로 무제한 데이터를 렌더링할 수 있게 해줍니다.

    Automatic Column Types

    컬럼 유형은 데이터 소스를 기반으로 자동으로 생성되며, 각 컬럼 유형에 맞춘 내장 필터링이 있습니다.

    Interactive Features

    사용자가 기대하는 모든 핵심 인터랙티브 기능: 열 필터링, 열 숨기기, 열 크기 조정, 열 정렬 등.

    Beautiful UX & Branding

    Bootstrap, Material, Fluent에 대한 내장 테마 지원과 더불어 색상 팔레트, 폰트, 높이도, 디스플레이 밀도 등 무한한 브랜딩 옵션이 제공됩니다.

    Rich Keyboard Navigation

    완전한 엑셀 스타일의 키보드 내비게이션은 사용자가 기대하는 경험을 제공하며, 대규모 데이터셋에서도 높은 성능을 제공합니다.

    Is Grid Lite a Free & Open-Source Blazor Data Grid?

    Yes. Ignite UI Grid Lite is a free, open-source Blazor data grid released under the MIT license. You can use it in commercial or personal projects with no licensing fees. It is part of our initiative to make Ignite UI more open, transparent, and accessible.

    • MIT-licensed

    • Free for commercial use

    • Community-driven development

    • No feature gating

    However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free Blazor data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster.