オープンソース Web Components グリッド (Grid Lite)

Ignite UI for Web Components Grid Lite は、Infragistics のオープンソース UI コンポーネントセットの一部であり、今後も継続的にサポートおよびメンテナンスされます。これはオープンソースの JavaScript データグリッドで、Web コンポーネントとして構築されているため、Web フレームワークの有無に関係なく依存関係なしで使用できます。現在、Angular、React、Blazor、Web Components 向けに 40 以上の OSS コントロールが MIT ライセンスのもとで利用可能です。

Grid Lite は、必要最小限のオーバーヘッドで本質的なデータ表示機能を提供し、ユーザーが期待するパフォーマンスを実現します。これは、エンタープライズグリッドの複雑さを避けつつ、高速で軽量なデータ表示を必要とする開発者向けに設計されています。

Grid Lite の機能:

列フィルタリング
非表示
サイズ変更
ソート
行仮想化
ユーザー補助
テーマとスタイル設定
列のデータタイプ

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

インストール

Grid Lite をインストールするには、プロジェクトのルートフォルダー (package.json がある場所) に移動し、npm を使用して次のコマンドを実行します。

npm install igniteui-grid-lite --save

または yarn を使用する場合:

yarn add igniteui-grid-lite

Web Components コードでの Grid Lite の使用

Grid Lite を使用するファイルで、コンポーネントクラスまたは関数を宣言する前にインポートして登録します。

<div class="grid-lite-wrapper">
    <igc-grid-lite id="grid-lite"></igc-grid-lite>
</div>

Grid Lite の動作

Grid Lite は、アプリで美しいデータグリッド/データテーブル体験を提供するために必要なコア機能を備えています。パフォーマンスと美しさを重視して設計されており、どのフレームワーク、どのプラットフォームでも動作します。

パフォーマンス内蔵

行レベルの仮想化により、無制限のデータをスムーズなスクロールでレンダリングできます。

自動列タイプ

列タイプは、データソースに基づいて自動的に生成され、各列タイプに合わせた組み込みのフィルタリングが提供されます。

カスタム列テンプレート

列テンプレートを使用して、あらゆるタイプの UX を実現できます。思い描いたものを、グリッド列にそのまま描画できます。

インタラクティブ機能

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

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

Bootstrap、Material、Fluent 向けの組み込みテーマポートに加え、カラーパレット、フォント、エレベーション、表示密度など無限のブランディングオプションがあります。

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

Excel スタイルのフルキーボードナビゲーションにより、大規模なデータセットでも高いパフォーマンスを維持しながら、ユーザーが期待する操作性を提供します。

オープン ソース Web Components グリッド (Grid Lite)