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

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

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

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

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

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

インストール

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

npm install igniteui-grid-lite --save

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

yarn add igniteui-grid-lite

React コードでの Grid Lite の使用

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

import { IgcGridLite } from 'igniteui-grid-lite';

IgcGridLite.register();

マークアップに <igc-grid-lite> 要素を追加します。

return (
  <div className="container sample ig-typography">
    <div className="grid-lite-wrapper">
      <igc-grid-lite ref={this.gridRef} id="grid-lite"></igc-grid-lite>
    </div>
  </div>
);

Grid Lite の動作

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

パフォーマンス内蔵

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

自動列タイプ

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

インタラクティブ機能

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

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

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

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

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

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

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

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

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

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

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