모든 프로젝트를 위한 오픈 소스 자바스크립트 그리드

Ignite UI for Angular Grid Lite 컴포넌트는 Infragistics 새로운 오픈소스 UI 컴포넌트 세트의 일부로, 적극적으로 지원되고 유지보수됩니다. 웹 컴포넌트로 구축된 오픈소스 JavaScript 데이터 그리드로, 웹 프레임워크 유무 없이 의존성 없이 사용할 수 있습니다. 현재 MIT 라이선스 하에 Angular, React, Blazor, Web Components 전반에 걸쳐 40+ OSS 제어가 제공됩니다.

Angular Grid Lite는 최소한의 오버헤드와 사용자가 기대하는 성능을 갖춘 필수 데이터 표시 기능을 제공합니다. 기업용 그리드의 복잡함 없이 빠르고 가벼운 데이터 표현이 필요한 개발자를 위해 설계되었습니다.

Angular 그리드 라이트의 특징:

열 필터링
숨김
크기 조정
정렬
Row Virtualization
접근성
테마와 스타일링
열 데이터 유형

Grid Lite 제어는 완전히 무료이며, MIT 라이선스를 받아 Ignite UI 더 개방적이고 투명하며 접근성을 높이기 위한 이니셔티브의 일환입니다. 하지만 프로젝트가 확장되고 복잡성과 기능이 증가하며 엔터프라이즈급 애플리케이션이 필요하다면, Grid Lite에서 완전 기능과 고급 Data Grid로의 전환을 위한 업그레이드 전략을 마련해 드립니다.

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

Installation

Angular 애플리케이션에 Grid Lite를 추가하려면 npm에서 패키지를 설치하세요.

npm install igniteui-grid-lite

구성

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

// app.component.ts

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IgcGridLite, ColumnConfiguration } from 'igniteui-grid-lite';

IgcGridLite.register();

@Component({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
  template: `
    <main>
      <igc-grid-lite [columns]="columns" [data]="products">
      </igc-grid-lite>
    </main>
  `
})
export class AppComponent {
  columns: ColumnConfiguration<Products> = [...];
  products: Products[] = [...];
}

Performance Built In

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

Automatic Column Types

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

Custom Column Templates

칼럼 템플릿으로 어떤 종류의 UX든 제공하세요. 상상하는 모든 것을 그리드 열로 렌더링할 수 있습니다!

Interactive Features

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

Beautiful UX & Branding

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

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