開発者の 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 グリッドであり、ごくわずかなコードだけでは実現できない機能を提供します。 この例は、データ グリッドの主な機能のいくつかを示しています:

    • 数百万のレコードをロードできる[仮想化された行と列](data-grid/live-data.md)
    • セル、行、および一括更新オプションを使用した[インライン編集](data-grid/cell-editing.md)
    • [Excel スタイル フィルタリング](data-grid/column-filtering.md)と [Excel キーボード ナビゲーション](data-grid/cell-activation.md)機能
    • インタラクティブな [Outlook スタイルのようなグループ化](data-grid/row-grouping.md)
    • グリッド セルまたは列のデータに基づいた[列集計](data-grid/column-summaries.md)
    • Excel へのエクスポート ([データ可視化](..\excel-library-working-with-charts.md)を含む)
    • 単一および複数選択の[セルと行の選択](data-grid/cell-selection.md)
    • モバイル アプリケーション開発の完全なタッチ操作サポート

    高速 React データ グリッド例

    Demo

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

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

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


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

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


    React Grid セルおよび行選択

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

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

    React Grid フィルタリング

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

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

    React Grid 列移動

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

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

    React Grid 列ピン固定

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

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

    React Grid 列サイズ変更

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

    React データグリッドは、[列のサイズ変更](data-grid/column-resizing.md)機能をサポートし、テーブル内の他の列に関して、データ グリッド列の表示方法を柔軟に変更できるようにします。

    React Grid 列ソート

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

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

    React Grid 列集計

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

    React データ グリッドは、データ グリッドのフッター領域またはグループ ヘッダー[列集計](data-grid/column-summaries.md)をサポートします。これは、Count、Sum、Min、Max、Avg などの値を表示するのに最適です。

    React Grid 列タイプ

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

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

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

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

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

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

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

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

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

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

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

    React Grid ページング

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

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

    React Grid 行ピン固定

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

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

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

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

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

    React Grid 機能

    • [グリッド編集](data-grid/cell-editing.md)
    • [セル選択](data-grid/cell-selection.md)
    • [セル テンプレート](data-grid/column-types.md#template-column)
    • [列フィルタリング](data-grid/column-filtering.md)
    • [列の非表示](data-grid/column-chooser.md)
    • [列の移動](data-grid/column-moving.md)
    • [列の集計](data-grid/column-summaries.md)
    • [カスタム ツールバー](data-grid/column-chooser.md#toolbars-column-chooser-ui)
    • [ピン固定列](data-grid/column-pinning.md)
    • [グリッド ページング](data-grid/row-paging.md)
    • [グリッドのソート](data-grid/column-sorting.md)
    • [リアルタイム/ライブ データ](data-grid/live-data.md)
    • [リモート データのロードオンデマンド](data-grid/remote-data.md)
    • [サイズ変更可能な列](data-grid/column-resizing.md)
    • [行のグループ化](data-grid/row-grouping.md)
    • [行選択](data-grid/cell-selection.md)
    • [仮想化とパフォーマンス](data-grid/performance.md)

    高速 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 を選択する理由とはなんですか?
    • 数百万のレコードをロードできる[仮想化された行と列](data-grid/live-data.md)
    • セル、行、および一括更新オプションを使用した[インライン編集](data-grid/cell-editing.md)
    • [Excel スタイル フィルタリング](data-grid/column-filtering.md)と [Excel キーボード ナビゲーション](data-grid/cell-activation.md)機能
    • インタラクティブな [Outlook スタイルのようなグループ化](data-grid/row-grouping.md)
    • グリッド セルまたは列のデータに基づいた[列集計](data-grid/column-summaries.md)
    • Excel へのエクスポート ([データ可視化](..\excel-library-working-with-charts.md)を含む)
    • 単一選択および複数選択の[セルと行の選択](data-grid/cell-selection.md)
    • モバイル アプリケーション開発の完全なタッチ サポート
    Infragistics Ignite UI for React Data Grid の価格について教えてください。
    Ignite UI for React コンポーネントは、Ignite UI バンドルの一部として含まれています。
    Ignite UI for React は、サブスクリプション モデルで利用可能な商用ライセンス製品です。このサブスクリプションには、React グリッド、React チャート、その他の React 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 for React 製品の一部です。Ignite UI for React 製品は、Angular、ASP.NET MVC、Web コンポーネント、ASP.NET Blazor などのすべての Web プラットフォームに対して、何百ものコントロール、コンポーネント、およびデータの視覚化を提供します。
    Infragistics Ignite UI for React Data Grid コントロールを個別に購入できますか?
    React Data Grid の使用を開始するには、[作業の開始ガイド](..\general-getting-started.md)の手順を実行してください。サンプル アプリケーションのライブラリも用意しています。サンプル ライブラリは、React 開発のベスト プラクティス ガイドです。