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

    高速 Web Components データ グリッド

    Web Components データ グリッドは Web Components データ テーブルとも呼ばれ、データを一連の行と列としてバインドおよび表示できるようにするデータ視覚化コンポーネントです。これらは、Web アプリケーションのユーザー インターフェイスの世界ではやや新しいものですが、デスクトップ プラットフォームでは、Microsoft Excel など、さまざまな形式でかなり長い間利用されてきました。これらのグリッドとテーブルは通常、セルと行の選択、フィルタリング、編集、行と列の非表示、列の集計、検索、データをタイプ固有の列に表示する機能など、非常に複雑な機能を備えています。

    Web コンポーネントの概要

    Web コンポーネントは、既存の Web 標準に準拠した Web ベースの API のライブラリであり、Web アプリケーションやページで使用する再利用可能なカスタム HTML オブジェクトとタグを作成できます。これらのコンポーネントは、Javascript ライブラリまたは HTML を利用するフレームワークで動作する最新の Web アプリケーション内で使用できます。

    Web Components Grid 例

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

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

    Web Components Data Grid の利点

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

    Web Components Data Grid 機能

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

    高速 Web Components データ グリッド例

    Demo

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

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

    Web Components データ グリッドは、パフォーマンスを高速かつ流動的に保つと同時に、無限の数のレコードをプロットする機能を提供します。これは、メモリ フットプリントに表示されているセルと行のみを残すという、組み込みの積極的な行と列の仮想化技術によって行われます。エンド ユーザーは、Microsoft Excel のようなスクロールで、ラグや視覚的な遅延、または画面のちらつきがなく、可能な限り最高のユーザー エクスペリエンスを得ることができます。


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

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


    Web Components Grid セルおよび行選択

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

    Web Components データ グリッドには、セルと行の両方に対してマウスおよびタッチ操作選択を構成する機能があります。単一または複数のセルと行を選択でき、範囲選択を使用する機能も利用できます。

    Web Components Grid フィルタリング

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

    ユーザーは、Web Components データ グリッドのデータ型に基づいて列をフィルタリングすることができます。たとえば、列が数値型プロパティである場合、Greater Than、Less Than、Equal To などのフィルタリング オプションを使用できます。

    Web Components Grid 列移動

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

    ユーザーは、列ヘッダーをクリックしてドラッグするだけで、Web Components データ グリッドに表示される列の順序を変更できます。この列の動作に組み込みのアニメーションを使用するオプションも含まれています。

    Web Components Grid 列ピン固定

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

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

    Web Components Grid 列サイズ変更

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

    Ignite UI for Web Components データ グリッドは、列の境界線をクリックおよびドラッグして[列のサイズを変更する]機能をユーザーに提供します。オプションで、列のサイズ変更をアニメーション化するアニメーション エンジンもあります。

    Web Components Grid 列ソート

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

    列データのソートを昇順または降順で実行する機能は、Web Components データ グリッドで利用できます。ユーザーは、単一、複数、またはトリステートのソート構成でソートすることができ、ヘッダーをクリックするとソートがデフォルトでトリガーされます。

    Web Components Grid 列集計

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

    列集計 は、Web Components データ グリッドのフッター領域に表示でき、グループ ヘッダーにも表示するように構成可能なオプションもあります。これは、他の集計オプションの中でも、数値データの Sum、Minimum、および Maximum を表示するのに役立ちます。

    Web Components Grid 列タイプ

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

    Web Components データ グリッドには、データ ソースで使用される多様なデータ型に固有のさまざまな列タイプがあります。さらに、テンプレート列を使用すると、その列のセル内にほぼすべてのものを配置することが可能で、ユーザーは UI を完全に柔軟に変更できます。

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

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

    Ignite UI for Web Components データ グリッド コンポーネントには、ユーザーが実行できるさまざまなアクションに応じて列ヘッダーとセルをアニメーション化する機能が組み込まれています。たとえば、列の追加、非表示、移動アクションなどに使用できるさまざまなアニメーションがあります。

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

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

    Kebab メニューは、Ignite UI for Web Components データ グリッドの列ヘッダーで使用できます。クリックすると、その列のオプション ダイアログが開きます。このダイアログを使用すると、ユーザーは、そのダイアログの対象列をグループ化、ソート、非表示、移動、固定、およびフィルタリングできます。

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

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

    Ignite UI for Web Components データ グリッドを使用すると、行を「固定ヘッダー」行グループにまとめることができます。 ユーザーは、Microsoft Outlook スタイルの方法で、類似したデータ エントリを持つ列でグループ化することにより、類似したデータ項目を視覚化できます。

    Web Components Grid 行ピン固定

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

    ユーザーは、Web Components Data Grid の上部に行をピン固定できます。行がピン固定されると、グリッドの一番上にコピーされ、ユーザーが垂直にスクロールする間、カスタマイズ可能な背景でその位置にロックされたままになります。コピーされた元の行は元の位置に表示されますが、不透明度は低くなります。

    Web Components Grid キーボード ナビゲーション

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

    ユーザーは左矢印、右矢印、上矢印、下矢印、Enter、および Tab キーを使用して、Web Components データ グリッドで Excel のようなキーボード ナビゲーションを実行できます。これにより、グリッドのエンドユーザー操作が向上し、グリッド全体でよりアクセスしやすい編集が可能になります。

    Web Components Grid 機能


    高速 Web Components Grid のダウンロード

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

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

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

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

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

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

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


    FAQ

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