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

    Ignite UI for Angular Grid Lite는 가볍고 고성능 Angular 데이터 그리드로, 무료로 사용할 수 있고 오픈소스이며 현대 Angular 애플리케이션을 위해 설계되었습니다.

    이 무료 Angular 데이터 그리드는 웹 컴포넌트로 구축된 오픈소스 자바스크립트 데이터 그리드로, 웹 프레임워크 유무 없이 의존성 없이 사용할 수 있습니다. 최소한의 오버헤드와 사용자가 기대하는 성능을 갖춘 필수 데이터 표시 기능을 제공합니다. Angular Grid Lite는 빠르고 가벼운 데이터 표현이 필요한 개발자를 위해 설계되었습니다.

    What You Get with our Free Angular Data Grid

    저희의 무료 오픈소스 Angular Grid Lite는 정렬, 필터링, 숨기기, 크기 조절 및 다양한 사전 정의 데이터 타입 등 열 기반 기능을 제공합니다. 행 가상화 기능을 통해 매우 빠른 성능을 제공합니다. 또한, Ignite UI 테마 프레임워크를 통한 키보드 탐색과 테마 설정을 지원합니다.

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

    Grid Lite in Action

    Installation and Setup

    Grid Lite를 애플리케이션에서 사용하려면 이 진입구igniteui-angular를 통해 직접igniteui-angular/grids/lite 가져올 수 있습니다. 하지만 UI를 구동하는 패키지도igniteui-grid-lite 설치해야 합니다. IgxGridLiteComponent는 이벤트, 템플릿, DI, 변경 감지, 파이프 등 Angular 바인딩을 제공하며, 시각적 그리드 라이트 UI는 렌더링igniteui-grid-lite 됩니다. 두 가지를 모두 설치하면 그리드 라이트가 전체 UI를 활용igniteui-grid-lite 하면서 Angular에서 네이티브로 동작하도록 보장합니다.

    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

    무료로 Angular 데이터 그리드를 사용하면 행 단위 가상화를 구현할 수 있습니다. 이를 통해 부드럽게 스크롤하여 무제한 양의 데이터를 렌더링할 수 있습니다.

    Automatic Column Types

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

    Custom Column Templates

    Angular 데이터 그리드 오픈소스 제어를 통해 열 템플릿을 포함한 모든 종류의 UX도 제공할 수 있습니다. 상상하는 모든 것을 그리드 컬럼으로 렌더링할 수 있습니다!

    Interactive Features

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

    Beautiful UX & Branding

    이 무료 Angular 데이터 그리드(Grid Lite)는 Bootstrap, Material, Fluent에 대한 내장 테마 지원과 함께 색상 팔레트, 폰트, 고도, 디스플레이 밀도 등 무한한 브랜딩 옵션을 제공합니다.

    Rich Keyboard Navigation

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

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

    네. Ignite UI Grid Lite는 MIT 라이선스 하에 출시된 무료 오픈소스 Angular 데이터 그리드입니다. 상업적 또는 개인 프로젝트에서 라이선스 비용 없이 사용할 수 있습니다. 이는 Ignite UI를 더 개방적이고 투명하며 접근성 있게 만들기 위한 우리의 이니셔티브의 일환입니다.

    • MIT-licensed

    • 상업적 사용 무료

    • Community-driven development

    • 기능 게이팅 없음

    하지만 프로젝트가 확장되고 복잡성과 기능이 증가하며 엔터프라이즈급 애플리케이션이 필요하다면, 저희는 원활한 업그레이드 전략을 제공합니다. 이로 인해 무료 Angular 데이터 그리드(Grid Lite)에서 완전 기능과 첨단 데이터 그리드로의 전환이 더 쉽고 빠르게 됩니다.

    Angular는 커스텀 요소를 지원하므로 Grid Lite를 쉽게 사용할 수 있습니다.