Open Source

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

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

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

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

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

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

Installation

To install Grid Lite, go to the root folder of your project (where package.json is located) and run the following command using npm:

npm install igniteui-react --save

Or using yarn:

yarn add igniteui-react

インストール

In the file where you want to use Grid Lite, first we need to import it:

import { IgrGridLite } from 'igniteui-react/grid-lite';

Add the <IgrGridLite> component to your markup:

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

Grid Lite の使用

1 - IgniteUI.Blazor.Controls 名前空間を _Imports.razor ファイルに追加します。

Grid Lite の動作

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

パフォーマンス内蔵

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

カスタム列テンプレート

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

インタラクティブ機能

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

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

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

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

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

MIT-licensed
Free for commercial use
Community-driven development
No feature gating

However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free React data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster.

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

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