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

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

    This free Angular 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 Angular Grid Lite is designed for developers who need fast and lightweight data presentation.

    What You Get with our Free Angular Data Grid

    Our free, open-source Angular 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.

    Angular 커스텀 요소를 지원 해서 Grid Lite를 쉽게 사용할 수 있습니다.

    Grid Lite in Action

    Installation and Setup

    To use Grid Lite in your application you can import it directly from igniteui-angular through this entry point igniteui-angular/grids/lite. But you also need to install the igniteui-grid-lite package that powers the UI. IgxGridLiteComponent provides Angular bindings (events, templates, DI, change detection, pipes), while the visual grid lite UI is rendered by igniteui-grid-lite. Installing both ensures the grid lite behaves natively in Angular while leveraging the full igniteui-grid-lite UI.

    npm install igniteui-grid-lite

    애플리케이션을 시작하기 전에 아래에 표시된 맞춤 요소 스키마를 가져오고 전달하는 것을 반드시 확인하세요.

    // app.component.ts

import { Component } from '@angular/core';
import { IgxGridLiteComponent, IgxGridLiteColumnComponent } from 'igniteui-angular/grids/lite';

@Component({
  ...
  imports: [IgxGridLiteComponent, IgxGridLiteColumnComponent],
  template: `
    <div>
      <igx-grid-lite [data]="products">
        <igx-grid-lite-column field="id" header="ID" dataType="number"></igx-grid-lite-column>
        <igx-grid-lite-column field="name" header="Name"></igx-grid-lite-column>
        <!-- Additional columns -->
      </igx-grid-lite>
    </div>
  `
})
export class AppComponent {
  products: Products[] = [...];
}

    특징

    Performance Built In

    When you use our Angular data grid for free, you are enabled to implement row-level virtualization. This allows you to render unlimited amounts of data with smooth scrolling.

    Automatic Column Types

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

    Custom Column Templates

    With our Angular data grid open-source control you can also deliver any type of UX with column templates. Anything you imagine can render in a grid column!

    Interactive Features

    사용자가 기대하는 모든 핵심 인터랙티브 기능, 예를 들어 열 필터링, 열 숨기기, 열 크기 조정, 열 정렬 등 다양한 기능들이 모두 제공됩니다!

    Beautiful UX & Branding

    This free Angular data grid (Grid Lite) comes with built-in theme support for Bootstrap, Material & Fluent, plus endless branding options in color palettes, fonts, elevation, display density & more.

    Rich Keyboard Navigation

    완전한 엑셀 스타일 키보드 내비게이션은 사용자에게 기대하는 고성능 키보드 내비게이션 경험을 제공합니다.

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

    Yes. Ignite UI Grid Lite is a free, open-source Angular 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 Angular data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster.

    Angular supports custom elements, so you can use Grid Lite with ease.