開発者の Web アプリケーション用の Ignite UI ロゴ

    高速 React データ グリッド

    Angular データ グリッド/データ テーブルは、一連の行と列で表データを表示するために使用されるコンポーネントです。テーブルとも呼ばれるデータ グリッドは、Microsoft Excel などの一般的なソフトウェアでデスクトップの世界でよく知られています。グリッドはデスクトップ プラットフォームで長い間利用されてきますが、最近 React UI などの Web アプリ UI の一部になりました。最新のグリッドは複雑で、データ バインディング、編集、Excel のようなフィルタリング、カスタム並べ替え、グループ化、行の並べ替え、行と列の固定、行の集計、Excel、CSV、PDF 形式のエクスポートなど、さまざまな機能および機能が含まれる場合があります。

    React Grid 例

    この React グリッドの例では、検索およびフィルタリング、列のソート、サイズ変更、ピン固定と非表示、行のグループ化、グリッド集計、水平および垂直方向のスクロール、セルに組み込まれたリニア プログレス バー インジケーター コンポーネントとスパークライン コンポーネントを含むセル スタイリングなどのグリッドの機能を使用して、ユーザーがデータのビューをカスタマイズする方法を確認できます。

    このサンプルが気に入りましたか? 完全な React ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    React Data Grid の利点

    React データ グリッドは、大量のデータをすばやく保存してソートされる必要がある場合に重要です。これには、大量の高速データ頻繁を使用する財務サービス、銀行および保険などの業界が含まれます。これらの企業の成功は、データ グリッドの機能とパフォーマンスに依存します。たとえば、在庫をマイクロ秒単位で決定する場合、データグ リッドが遅延時間やちらつきのない状態で実行する必要があります。

    React Data Grid 機能

    Ignite UI for React のデータ グリッドは、大量のリアルタイム データのみにとどまるものではありません。これは機能豊富な React グリッドであり、ごくわずかなコードだけでは実現できない機能を提供します。 この例は、データ グリッドの主な機能のいくつかを示しています:

    高速 React データ グリッド例

    Demo

    データの仮想化とパフォーマンス

    データの仮想化とパフォーマンス

    データ グリッドの列と行レベルの仮想化により、React グリッド内の無制限の行と列をシームレスにスクロールします。ローカルまたはリモートのデータソースのサポートにより、データがどこにあっても最高のパフォーマンスを得ることができます。ユーザーは Excel のようなスクロールを体験し、エンタープライズ スピード (ラグ、画面のちらつき、視覚的な遅延) なしで、パフォーマンスを損なうことなく最高のユーザー エクスペリエンス (UX) を提供します。


    すばやく簡単に React テーブルをカスタマイズ、構築および実装

    Ignite UI for React データ グリッドは、データの無制限の行と列を処理できると同時に、カスタム テンプレートとリアルタイムのデータ更新へのアクセスを提供します。簡単なテーマ設定とブランディングのための直感的な API を備えており、最小限のコードでデータにすばやくバインドできます。


    React Grid セルおよび行選択

    React Data Grid のセル選択機能のアニメーション
    React Grid セルおよび行選択

    React データグリッドには、SingleCell、SingleRow、MultipleCell、MultipleRow、RangeCell などのモードを含む、セルおよび行レベルごとのマウスおよびタッチ操作選択のすべてのオプションが含まれています。

    React Grid フィルタリング

    React Data Grid のフィルタリング機能のアイコン
    React Grid フィルタリング

    React データ グリッドには、フィルタリングされる列のデータ型に基づいた列フィルタリングが含まれています。たとえば、列が DateTime フィールドの場合、Last Month、This Quarter、Next Week などのフィルターを使用できます。

    React Grid 列移動

    React Data Grid の列移動機能のアニメーション
    React Grid 列移動

    列の順序の再配置は、React データ グリッドでクリックアンドドラッグするのと同じくらい簡単です。完全なアニメーション エンジンも含まれているため、このインタラクションの UX を制御できます。

    React Grid 列ピン固定

    React Data Grid の列ピン固定機能のアイコン
    React Grid 列ピン固定

    React データグリッドの左右の列ピン固定を使用すると、ユーザーは 1 つの列または複数の任意の順序でロックできるため、水平方向にスクロールしながら列の位置を維持できます。

    React Grid 列サイズ変更

    React Data Grid コンポーネントの列のサイズ変更機能が有効になっているデータ グリッド
    React Grid 列サイズ変更

    React データグリッドは、列のサイズ変更機能をサポートし、テーブル内の他の列に関して、データ グリッド列の表示方法を柔軟に変更できるようにします。

    React Grid 列ソート

    React Data Grid コンポーネントの列のソート機能が有効になっているデータ グリッド
    React Grid 列ソート

    React データ グリッドは、単一、複数、またはトリステート列のソート構成で、昇順および降順の列ソートをサポートします。ソートは、ヘッダーをクリックするか、列オプションのドロップダウンを使用してトリガーされます。

    React Grid 列集計

    React Data Grid の列集計機能のアイコン
    React Grid 列集計

    React データ グリッドは、データ グリッドのフッター領域またはグループ ヘッダー列集計をサポートします。これは、Count、Sum、Min、Max、Avg などの値を表示するのに最適です。

    React Grid 列タイプ

    React Data Grid の列タイプ機能のアイコン表現
    React Grid 列タイプ

    React データ グリッドは、さまざまな列タイプに加えて、テンプレート列タイプとスパークライン テンプレート タイプをサポートしており、グリッド内のデータの表示方法を完全に柔軟に設定できます。

    React グリッドの列アニメーション

    React Data Grid の列アニメーション機能のアニメーション
    React Grid 列アニメーション

    React データ グリッドは、列の非表示や列の移動などのイベント時に列のアニメーションをサポートします。React データ グリッドで列アニメーションが設定されている場合、対応するアニメーションはその列のすべてのセルに対して発生します。

    React Grid 列オプション ダイアログ

    React Data Grid の列オプション ダイアログ機能のアイコン
    React Grid 列オプション ダイアログ

    React データ グリッドは、各列ヘッダに表示される UI による列のグループ化、非表示、移動、固定、フィルター、および並べ替えの機能をサポートします。列オプションは、列ホバーの Kebab メニューを介して、すべての列でデフォルトでオンになっています。

    React 列と行の Outlook スタイルのグループ化

    React Data Grid の Outlook スタイルのグループ化機能のアニメーション
    React Grid 列と行の Outlook スタイルのグループ化

    React データ グリッドを使用すると、行を「固定ヘッダー」行グループにまとめることができます。Microsoft Outlook の Group By 機能と同様に、ユーザーは独自の基準に基づいてデータを視覚的にグループ化する簡単な方法があります。

    React Grid ページング

    React Data Grid のデータ グリッド ページング機能のアイコン
    React Grid Paging

    React データ グリッド ページング コンポーネントは、簡単なナビゲーション UI を使用して、データの配列を取り込み、そのデータの一部をページとして出力するように設計されています。

    React Grid 行ピン固定

    React Data Grid の行ピン固定機能のアニメーション
    React Grid 行ピン固定

    React データ グリッドを使用すると、データ グリッドの上部に行をピン固定できます。行をピン固定するとその行がグリッドの最上部に複製され、薄い灰色の背景で固定されたままになり、実際の (または元の) 行は低い不透明度で描画され、ユーザーにこれは特別な行であることをわかりやすくします。

    React Grid キーボード ナビゲーション

    React Data Grid のキーボード ナビゲーション機能のアニメーション
    React Grid キーボード ナビゲーション

    React データ グリッドは、Excel のような広範なキーボード ナビゲーションをサポートします。上、下、右、左、タブ、および Enter キーを使用して、React データ グリッドで Excel のようなキーボード ナビゲーションを有効にして、アクセシビリティ コンプライアンスを確保し、使いやすさを向上させます。マウスまたはキーボードを使用して単一または複数の行の選択を切り替えて、行全体を選択または選択解除できます。

    React Grid 機能


    高速 React Grid のダウンロード

    ダウンロード
    30 日間無償お試し版。クレジット カードは不要です。

    Ignite UI for React サポートされるブラウザー

    React Data Grid は、すべての最新の Web ブラウザーでサポートされます。
    • Chrome
    • Edge / Edge Chromium
    • Firefox
    • Safari
    • ポリフィルを使用した Internet Explorer 11

    Ignite UI for React サポート オプション

    Infragistics の React 製品の受賞歴のあるサポートにアクセスするための複数のオプションがあります。

    Ignite UI for React 試用ライセンスおよび商用

    Ignite UI for React は、サブスクリプション モデルで利用可能な商用ライセンス製品です。Ignite UI for React 製品は、30 日間トライアル版を無料でお試しいただけます。試用期間が終了したら、弊社 Web サイトからライセンスを購入するかお住まいの地域の営業担当者にお問い合わせください


    FAQ

    Infragistics Ignite UI for React Data Grid を選択する理由とはなんですか?
    Infragistics Ignite UI for React Data Grid の価格について教えてください。
    Ignite UI for React は、サブスクリプション モデルで利用可能な商用ライセンス製品である Ignite UI に含まれています。
    価格の詳細については、価格ページを参照してください。
    複数のプラットフォームでアプリケーションを開発する場合、WPF や Windows Forms などのデスクトップ プラットフォーム、Angular、Web コンポーネント、ASP.NET MVC、ASP.NET Core のすべての最新 Web ツールセットを含む完全なアプリ開発パッケージ Infragistics Ultimate を検討してください。
    Infragistics Ignite UI for React Data Grid コントロールを個別に購入できますか?
    React Data Grid を個別に購入することはできません。これは Ignite UI 製品バンドルの一部です。Ignite UI 製品バンドルは、Angular、ASP.NET MVC、Web コンポーネント、ASP.NET Blazor などのすべての Web プラットフォームに対して、何百ものコントロール、コンポーネント、およびデータの視覚化を提供します。
    Infragistics Ignite UI for React Data Grid コントロールを個別に購入できますか?
    React Data Grid の使用を開始するには、作業の開始ガイドの手順を実行してください。サンプル アプリケーションのライブラリも用意しています。サンプル ライブラリは、React 開発のベスト プラクティス ガイドです。