高速 Blazor データ グリッド
Blazor データ テーブルは、より一般的に Blazor データ グリッドとして知られており、バインドされたデータを一連の行と列として視覚化できるようにするコンポーネントです。これらのデータ グリッドは、WPF や Windowsフォームなどのデスクトップ関連のプラットフォームでかなり長い間利用されてきましたが、Web アプリケーションの開発に利用できるようになったのはごく最近のことです。最新の Web アプリケーションは、データ バインド、セルと行の選択、セルおよび行の編集とエラーの検証、列集計、インタラクティブな Outlook スタイルのグループ化、Microsoft Excel スタイルのフィルタリング、数百万のレコードのロードを可能にする行と列の仮想化などの豊富な機能を備えたテーブルとデータ グリッドを使用します。
Blazor Grid 例
この Blazor グリッドの例では、検索およびフィルタリング、列のソート、サイズ変更、ピン固定と非表示、行のグループ化、グリッド集計、水平および垂直方向のスクロール、セルに組み込まれたリニア プログレス バー インジケーター コンポーネントとスパークライン コンポーネントを含むセル スタイリングなどのグリッドの機能を使用して、ユーザーがデータのビューをカスタマイズする方法を確認できます。
このサンプルが気に入りましたか? 完全な Blazor ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Blazor Data Grid の利点
Blazor データ グリッドは、大量のデータをすばやく保存してソートされる必要がある場合に重要です。これには、大量の高速データ頻繁を使用する財務サービス、銀行および保険などの業界が含まれます。これらの企業の成功は、データ グリッドの機能とパフォーマンスに依存します。たとえば、在庫をマイクロ秒単位で決定する場合、データグ リッドが遅延時間やちらつきのない状態で実行する必要があります。
Blazor Data Grid 機能
Ignite UI for Blazor のデータ グリッドは、大量のリアルタイム データのみにとどまるものではありません。これは機能豊富な Blazor グリッドであり、ごくわずかなコードだけでは実現できない機能を提供します。 この例は、データ グリッドの主な機能のいくつかを示しています:
- 数百万のレコードをロードできる仮想化された行と列
- セル、行、および一括更新オプションを使用したインライン編集
- Excel スタイル フィルタリングと Excel キーボード ナビゲーション機能
- インタラクティブな Outlook スタイルのようなグループ化
- グリッド セルまたは列のデータに基づいた列集計
- 単一および複数選択のセルと行の選択
- モバイル アプリケーション開発の完全なタッチ操作サポート
高速 Blazor データ グリッド例
Demo
データの仮想化とパフォーマンス
データの仮想化とパフォーマンス
Ignite UI for Blazor データ グリッド コンポーネントには、グリッドの行とセルの仮想化が組み込まれています。つまり、メモリに保持される行とセルは、データ ソースがローカルであるかリモートであるかに関係なく、現在表示されているものだけです。これにより、何百万ものレコードをグリッドにプロットする場合でも、垂直および水平スクロールでExcel のようにシームレスで視覚的な遅延や画面のちらつきのない、最高のパフォーマンスが得られます。
すばやく簡単に Blazor テーブルをカスタマイズ、構築および実装
Ignite UI for Blazor データ グリッドは、データの無制限の行と列を処理できると同時に、カスタム テンプレートとリアルタイムのデータ更新へのアクセスを提供します。簡単なテーマ設定とブランディングのための直感的な API を備えており、最小限のコードでデータにすばやくバインドできます。
Blazor Grid セルおよび行選択
Ignite UI for Blazor データ グリッド コンポーネントには、ユーザーによるマウスとタッチスクリーン操作の両方を使用して行とセルを選択するオプションが含まれています。セルと行の選択で使用できるモードには、MultipleCell、MultipleRow、SingleCell、SingleRow、および RangeCell があります。
Blazor Grid フィルタリング
Ignite UI for Blazor データ グリッドを使用すると、ユーザーは、フィルターが適用されるデータ型に基づいて列をフィルタリングできます。たとえば、列がデータ 項目の文字列型プロパティである場合、Contains、Starts With、EndsWith などのフィルタリング オプションを使用できます。
Blazor Grid 列移動
Blazor データ グリッドには、列をクリックおよびドラッグして列を並べ替えて再配置する機能が組み込まれています。列のドラッグによる移動をアニメーション化する機能を使用して、アプリケーションのユーザー エクスペリエンスをより細かく制御できます。
Blazor Grid 列ピン固定
Blazor データ グリッド コンポーネントには左側または右側に列を固定する機能があります。列が固定またはピン固定されると、ユーザーがグリッドを水平方向にスクロールしている間、列はその位置を維持します。
Blazor Grid 列サイズ変更
Blazor データグリッドを使用すると、ユーザーはグリッドにある列のサイズを変更できます。データ テーブルは、サイズ変更操作がすぐに実行されるように、またはドラッグが解放されるまで延期されるように、ユーザーがサイズ変更モードを構成できる機能を備えています。
Blazor Grid 列ソート
プロジェクト用の Blazor ソート可能グリッドをお探しですか? Ignite UI for Blazor データ グリッド コンポーネントには、列データをソートする機能が組み込まれており、単一、複数、またはトリステートのソートの構成を利用できます。デフォルトでは、グリッド内の特定の列をソートするには、列ヘッダーをクリックしますが、列オプション ダイアログを使用してソートすることもできます。
Blazor Grid 列集計
ユーザーは、Blazor データ グリッド コンポーネントで列集計を適用することができます。これらの集計には、数値データの Sum、Minimum、Maximum などを表示する機能があり、グリッドのフッターまたはグループ ヘッダーに表示するように構成できます。
Blazor Grid 列タイプ
Ignite UI for Blazor データ グリッドを使用すると、ユーザーはさまざまなデータ型固有の列タイプを利用して、データを最も効果的に表示できます。データがもう少し複雑な場合は、追加のテンプレート列があり、グリッドのデータ ソースの特定の部分を表示するための独自のセル コンテンツを定義できます。
Blazor グリッドの列アニメーション
Blazor データ グリッドは、列の非表示や列の移動などのイベント時に列アニメーションをサポートします。Blazor データグリッドで列アニメーションが設定されている場合、対応するアニメーションはその列のすべてのセルに対して発生します。
Blazor Grid 列オプション ダイアログ
Blazor データ グリッドの各列は、同じ場所 (列オプション ダイアログ) からソート、グループ化、非表示、移動、および固定できます。グリッドの各列ヘッダーには、マウスをホバーすると Kebab メニューが表示され、クリックするとこのダイアログが表示されます。
Blazor 列と行の Outlook スタイルのグループ化
Blazor データ グリッド コンポーネントには、Microsoft Outlook でグループが視覚化される方法に影響を受けた列をグループ化する機能が含まれています。グリッド内の複数の列をグループ化して、複数のグループ ヘッダーで表示するか、すべてを 1 つにまとめることもできます。
Blazor Grid 行ピン固定
Ignite UI for Blazor Data Grid コンポーネントには、行をピン固定 をグリッドの最上部に組み込み、ヘッダーの下に表示する組み込みの機能があります。これらの行は、ユーザーがグリッドを垂直方向にスクロールするときに、固定解除されるまで垂直にあります。
Blazor Grid キーボード ナビゲーション
Blazor Data Grid コンポーネントを使用すると、Microsoft Excel と同じように動作するキーボード ナビゲーションを有効にできます。ユーザーのキーボードの矢印、Tab および Enter キーを使用すると、ナビゲーションを考慮してアクセシビリティと使いやすさが向上します。
Blazor Grid 機能
Ignite UI for Blazor サポートされるブラウザー
- Chrome
- Edge / Edge Chromium
- Firefox
- Safari
- ポリフィルを使用した Internet Explorer 11
Ignite UI for Blazor サポート オプション
- Blazor サポート ホーム ページをご覧ください。
- Blazor ドキュメントを読み、Blazor サンプルを試してください。
- 最新の情報は、Blazor ブログをご覧ください。
- アカウントにサインインした後、サポート ケースを送信します。
- Blazor 参照アプリケーションをお試しください。
Ignite UI for Blazor 試用ライセンスおよび商用
Ignite UI for Blazor は、サブスクリプション モデルで利用可能な商用ライセンス製品です。Ignite UI for Blazor 製品は、30 日間トライアル版を無料でお試しいただけます。試用期間が終了したら、弊社 Web サイトからライセンスを購入するか、お住まいの地域の営業担当者にお問い合わせください。
FAQ
- 数百万のレコードをロードできる仮想化された行と列
- セル、行、および一括更新オプションを使用したインライン編集
- Excel スタイル フィルタリングと Excel キーボード ナビゲーション機能
- インタラクティブな Outlook スタイルのようなグループ化
- グリッド セルまたは列のデータに基づいた列集計
- 単一選択および複数選択のセルと行の選択
- モバイル アプリケーション開発の完全なタッチ サポート