Open Source

無料のオープンソース Angular データグリッド (Grid Lite)

Ignite UI for Angular Grid Lite は、軽量で高パフォーマンスな Angular データグリッドであり、無料で使用でき、オープンソースで、最新の Angular アプリケーション向けに構築されています。

この無料の Angular データグリッドはオープンソースの JavaScript データグリッドで、Web コンポーネントとして構築されているため、Web フレームワークの有無に関係なく依存関係なしで使用できます。必要最小限のオーバーヘッドで本質的なデータ表示機能を提供し、ユーザーが期待するパフォーマンスを実現します。Angular Grid Lite は、高速で軽量なデータ表示を必要とする開発者向けに設計されています。

無料 Angular データグリッドで利用可能な機能

無料のオープンソース Angular Grid Lite には、次の列ベースの機能が含まれています: ソート、フィルタリング、非表示、サイズ変更、およびさまざまな事前定義されたデータタイプ。行仮想化を使用することで、非常に高速なパフォーマンスが実現されます。さらに、コンポーネントはキーボードナビゲーションと Ignite UI のテーマフレームワークを通じたテーマ化をサポートしています。

Angular はカスタム要素をサポートしているため、Grid Lite を容易に利用できます。

Grid Lite の動作

インストールとセットアップ

アプリケーションで Grid Lite を使用するには、エントリポイント igniteui-angular/grids/lite を通じて igniteui-angular から直接インポートできます。ただし、UI を提供する igniteui-grid-lite パッケージもインストールする必要があります。IgxGridLite は Angular バインディング (イベント、テンプレート、DI、変更検出、パイプ) を提供し、視覚的なグリッドライト UI は igniteui-grid-lite によってレンダリングされます。両方をインストールすることで、igniteui-grid-lite の完全な UI を活用しながら、グリッドライトが 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[] = [...];
}

機能

パフォーマンス内蔵

無料で提供される Angular データグリッドを使用すると、行レベルの仮想化を実装できます。これにより、無制限のデータをスムーズなスクロールでレンダリングできます。

自動列タイプ

列タイプはデータソースに基づいて自動生成され、列タイプに応じたフィルタリング機能が組み込まれています。

カスタム列テンプレート

オープンソースの Angular データグリッドコントロールでは、列テンプレートを使用してあらゆる種類の UX を提供できます。想像したものはすべて、グリッドの列内にレンダリング可能です!

インタラクティブ機能

ユーザーが期待するすべてのコアなインタラクティブ機能を提供します。列のフィルタリング、列の非表示、列のリサイズ、列のソートなどが含まれます。

美しい UX とブランディング

この無料の Angular データグリッド (Grid Lite) には、Bootstrap、Material、Fluent 向けの組み込みテーマサポートが含まれており、カラーパレット、フォント、エレベーション、表示密度など、無限のブランディングオプションがあります。

高度なキーボードナビゲーション

Excel スタイルのフルキーボードナビゲーションにより、ユーザーは期待通りの操作体験を得られます。高パフォーマンスなキーボード操作が可能です。

Grid Lite は無料のオープンソース Angular データグリッドですか?

はい。Ignite UI Grid Lite は、MIT ライセンスのもとでリリースされた無料のオープンソース Angular データグリッドです。ライセンス料なしで、商用またはパーソナルプロジェクトで使用できます。これは、Ignite UI をよりオープンで透明性が高く、アクセスしやすいものにするための取り組みの一環です。

MIT ライセンス
商用利用無料
コミュニティ主導の開発
機能制限なし

ただし、プロジェクトの規模が拡大し、複雑さと機能が増大し、エンタープライズグレードのアプリケーションが必要になった場合、シームレスなアップグレード戦略が用意されています。これにより、無料の Angular データグリッド (Grid Lite) からフル機能の高度なデータグリッドへの移行がよりシンプルかつ迅速になります。