Trusted by the world’s leading companies
概要
Blazor DataGridは、Blazor Gridとも呼ばれ、データを表形式で表示するための機能豊富なコンポーネントです。データバインディング、すべてのデバイスに対応するアダプティブUIレイアウト、編集、Excelのようなフィルタリング、カスタムソート、行の集計、選択、Excel、CSV、PDF形式のサポートなど、幅広い機能を提供します。
Syncfusion Essential Studio® Blazor DataGridを選ぶ理由
高パフォーマンス
綿密な設計により、数百万件のレコードをわずか1秒で読み込む高速パフォーマンスに重点を置いています。
シームレスなデータバインディング
IEnumerable/List、RESTfulサービス、ODataサービス、WCFサービス、Observable Collection、ExpandoObject、DynamicObjectなど、さまざまなローカルおよびリモートのデータソースとシームレスにデータをバインドします。
あらゆる解像度に適応
DataGridは応答性の高いレイアウトと、デスクトップ、タッチスクリーン、スマートフォン向けに最適化されたデザインを備えています。iOS、Android、Windows OSを使用するあらゆる携帯電話で問題なく動作します。
柔軟な編集
Blazor Gridは、Data Managerの助けを借りて、ビジネスオブジェクトのリストまたはリモートデータサービスを使用して、作成、読み取り、更新、削除操作をより簡単に行えます。
独自のテンプレートデザインを作成
幅広いテンプレートオプションを使用して、アプリケーションのニーズに基づいたカスタムユーザーエクスペリエンスをBlazor Grid内で作成することを可能にします。
魅力的なカスタマイズ可能なテーマ
Fluent、Tailwind CSS、Bootstrap、Material、Fabricなど、5つ以上の組み込みテーマを備えた最先端のデザイン。テーマを簡単にカスタマイズするには、オンラインTheme Studioツールをご利用ください。
簡単なエクスポートと印刷
Data GridをExcel、PDF、CSVなどのさまざまなファイル形式でエクスポートします。ページ数に関係なく、すべての行と現在表示されているページを印刷します。
グローバリゼーションとローカリゼーション
日付、通貨、番号を好みに合わせてフォーマットすることで、異なるロケールのユーザーが利用できるようにします。
AI対応グリッドでよりスマートなデータ管理
AI機能をすぐにサポートするDataGridで、よりスマートなBlazorアプリケーションを構築しましょう。セマンティック検索と異常検知を追加して、洞察を明らかにし、データの信頼性を向上させます。
-
セマンティック検索: 自然言語処理（NLP）モデルを接続して、自然言語クエリを可能にし、正確なキーワードの必要性を排除します。
- セマンティック検索の追加方法はこちら
-
異常検知: 機械学習（ML）サービスを統合して、不規則な傾向を特定し、データの問題を防ぎます。
- 異常検知の追加方法はこちら
Blazor DataGridコード例
以下に示すように、わずか数行のC#コードを使用して、Blazor DataGridを簡単に使い始めることができます。また、Blazor Gridのレンダリングと構成方法を示すBlazor DataGridの例もご覧ください。
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@Orders">
</SfGrid>
@code{
public List<Order> Orders { get; set; }
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
OrderID = 1000 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
}).ToList();
}
public class Order {
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
}アダプティブUIレイアウト
Blazor Data Gridのユーザーインターフェースは、小さな画面での優れたビューと使いやすさのためにカスタマイズされ、再設計されています。その機能には、フィルター、ソート、検索、列選択、列メニュー、ページャードロップダウン、編集ダイアログが含まれており、画面サイズに適応し、行要素を垂直方向にレンダリングします。
列
列は、Blazor DataGridコンポーネント内のデータソースのスキーマを定義します。書式設定、列の自動生成、列定義、行と列の固定、列スパン、テキスト折り返し、列選択、列メニュー、その他の機能をサポートしています。
ページング
ページングを通じて、割り当てられたデータソースからデータのセグメントを表示できます。Blazor DataGridは、組み込みのページャーUIと、そのUI全体をカスタマイズするオプションを提供します。また、リモートWebサービスからデータを効率的に取得するためのオンデマンドページングモードもあります。
ソート
ヘッダーをクリックするだけで、列を基準にして行を昇順または降順にソートできます。Ctrlキーを押しながらヘッダーをクリックすると、複数の列のデータをソートできます。さらに、Blazor DataGridでは、アプリケーションのニーズに基づいて独自のカスタムソートロジックを定義できます。
フィルタリング
フィルタリングは、データグリッドで特定の条件を満たす特定のレコードまたは関連レコードを表示するのに役立ちます。Blazor DataGridは、強力なExcelのようなフィルターを含むさまざまなフィルタータイプをサポートしています。適切なフィルタータイプを選択し、独自のカスタムフィルタリングロジックを定義し、アプリケーションのニーズに基づいてフィルタリングUIをカスタマイズします。分音記号もフィルタリングできます。
選択
Blazor DataGridは、行またはセルを選択できます。CtrlキーまたはCommandキーを押すか、プログラムで、1つまたは複数の行またはセルを選択することもできます。
編集
Blazor DataGridは、作成、読み取り、更新、削除（CRUD）操作を完全にサポートしています。特定の列値を編集するための組み込みエディターコンポーネントに加えて、アプリケーションのニーズに応じてテンプレートを使用してカスタムエディターコンポーネントを作成できます。Data Managerの助けを借りて、配列コレクションまたはリモートデータサービスを使用して編集操作を実行できます。
グループ化
行をグループ化すると、データを整理された階層構造で昇順または降順に表示し、レコードの展開と折り畳みを容易にします。インタラクティブなドロップ領域に目的の列をドラッグアンドドロップするだけで、その列のレコードをグループ化するオプションもあります。
集計
集計機能を使用して、列値の集計を簡単に表示できます。集計は、個別のサマリー行、個別のグループサマリー行、またはグループキャプション行に値を表示するようにカスタマイズできます。
固定行と列
固定された行と列は、それぞれ上部と左、右、両方、または固定位置に表示され、残りのグリッドコンテンツはスクロール可能です。この機能は、主にJavaScript DataGridコンポーネント内のセル値を比較するために使用されます。
スティッキーヘッダー
Blazor Data Gridのヘッダーは、ドキュメントを垂直方向にスクロールするときに固定位置にある必要があり、列ヘッダーとともにData Gridコンテンツを視覚化します。
行のドラッグアンドドロップ
Blazor Gridを使用すると、ユーザーは行を別のDataGridまたはカスタムコンポーネントにドラッグアンドドロップできます。ユーザーは、ドラッグアイコンを使用して同じDataGrid内で行をドラッグアンドドロップしたり、異なるグループ間でC行を転送したりすることもできます。
BlazorライブDataGrid
BlazorライブDataGridは、リアルタイムでの大量のレコードの処理と更新に最適化されており、金融レコードなどのバインディングに適しています。
その他の機能
行の高さ
行の高さはビューポートに表示されるレコード数に大きく影響する要素であり、アプリケーションのUI要件に基づいて簡単にカスタマイズできます。条件付きで行の高さを設定することも可能です。
クリップボードにコピー
クリップボードを使用すると、選択した行またはセルのデータをコピーできます。Ctrl + CおよびCtrl + Shift + Hのキーの組み合わせをそれぞれ使用して、ヘッダーの有無にかかわらずデータをコピーします。
コンテキストメニュー
セル、ヘッダー、またはページャーを右クリックすると表示されるポップアップメニューを使用して、JavaScript DataGridでさまざまなアクションを実行します。組み込みのデフォルトメニュー項目に加えて、カスタムコンテキストメニュー項目を追加できます。
幅と高さ
幅と高さのプロパティを設定して、Data Gridのサイズを変更します。コンテンツがグリッド要素からはみ出すと、水平および垂直スクロールバーが表示されます。Data Gridの親コンテナを埋めるには、高さと幅を100%に設定するだけです。
積み重ねられたヘッダー
積み重ねられたヘッダーを使用すると、列ヘッダーを積み重ねてグループ化し、視覚化できます。積み重ねられる列の数に制限はありません。列が積み重ねられている場合でも、すべてのBlazor Data Gridアクションを実行できます。
ツールチップ
Blazor DataGridの豊富なコンテンツをサポートするツールチップでユーザーエクスペリエンスを向上させます。画像、アイコン、カスタムコンポーネントをプレーンテキストとともに表示することで、より状況に応じた視覚的に魅力的なインタラクションを実現し、グリッドインターフェース内の明瞭さと使いやすさを向上させます。
アクセシビリティ
キーボードナビゲーション
Blazor DataGridは、すべてのセルがキーボードでアクセスできることを保証します。ソート、選択、編集などの主要な機能は、マウス操作なしでキーボードコマンドのみで実行できます。これにより、このコンポーネントを使用してアクセシビリティの高いアプリケーションを作成できます。
スクリーンリーダー
Blazor DataGridビューは、完全なWAI-ARIAアクセシビリティをサポートしています。Blazor Data Grid UIには、高コントラストの視覚要素が含まれており、視覚障害のある人が最高の表示体験を得られるように役立ちます。また、有効なUIの説明は、スクリーンリーダーなどの補助技術を通じて簡単にアクセスできます。
右から左（RTL）
右から左へのレンダリングにより、Blazor DataGridのテキストとレイアウトを右から左に表示できます。これにより、RTL言語のユーザーエクスペリエンスとアクセシビリティが向上します。
モバイル最適化とタッチフレンドリー
Blazor Gridは、デスクトップ、タッチスクリーン、スマートフォン向けに高度にレスポンシブなレイアウトと最適化されたデザインを備えています。
タッチサポート
ユーザーフレンドリーなタッチジェスチャーとインタラクティブなUIデザインにより、最高のユーザーエクスペリエンスが実現します。すべてのBlazor Grid機能は、設定不要でタッチデバイスで動作します。
レスポンシブページャー
Blazor DataGridページャーは、グリッドの寸法に基づいてUI全体を知的に変化させます。その最適化されたデザインは、さまざまなデバイスで最高のUIインタラクションを提供します。
145+ UI components
1200+ interactive Blazor demos
3.3M+ downloads
その他のサポート対象フレームワーク
DataGridは、React、Angular、JavaScript、およびVueフレームワークで利用できます。以下のリンクから、プラットフォーム固有のオプションをご覧ください。
対応ブラウザ
Blazor DataGridは、Chrome、Firefox、Edge、Safari、Operaなどのすべての最新のWebブラウザで動作します。
Blazor Components – 145+ UI and DataViz Components
ALL COMPONENTS
SMART COMPONENTS
GRIDS
DATA VISUALIZATION
FILE VIEWERS & EDITORS
DROPDOWNS
NAVIGATION
INPUTS
BUTTONS
INTERACTIVE CHAT
Frequently Asked Questions
Syncfusion Essential Studio® Blazor DataGridを選ぶべき理由は何ですか？
Syncfusion Blazor Gridコンポーネントは、次の機能をサポートしています。
数百万件のレコードをわずか1秒でロードします。
Web API、OData、Entity Frameworkなどのデータソースを使用することをサポートする柔軟なデータバインディング。
サーバーサイドとクライアントサイド（WebAssembly）のBlazorアプリの両方での豊富なUIインタラクションとキーボードナビゲーション。
複雑な大規模アプリケーションの構築に適したカスタマイズオプションを備えた豊富な機能。
- ソフトウェアとインタラクションするための機能豊富なUIを提供する市場で最高のBlazor DataGridの1つ。
簡単な構成とAPI。
- すべての最新ブラウザをサポートします。
- モバイルタッチ対応で応答性があります。
Syncfusion Blazor DataGridの価格はいくらですか？
Blazor DataGridは単品では販売しておりません。DataGridを含め145以上のBlazorコンポーネントを含むSyncfusionチームライセンスの一部としてのみ購入可能です。チームライセンスの価格は、5人の開発者で月額395ドルからで、サブスクリプションの有効期限までサポートとアップデートが含まれます。これに加えて、現在のプロモーションに基づいて追加の割引を提供できる場合があります。弊社の製品スペシャリストに今すぐお問い合わせください。追加の割引が適用されるかどうかご確認ください。
Syncfusion Blazor DataGridのデモはどこで見つけられますか？
DataGridのレンダリングと構成方法を示すBlazor DataGridのデモをご参照ください。
Syncfusion Blazor DataGridコンポーネントを個別に購入できますか？
いいえ、弊社のBlazor DataGridを含むweb、モバイル、デスクトップ向けの1,600以上のコンポーネントとフレームワークは個別に販売されていません。これらはチームライセンスの一部としてのみ利用可能です。ただし、弊社は競合他社がDataGridコンポーネント単体に対して請求する金額とほぼ変わらないように製品を競争力のある価格設定をしています。また、弊社の経験から、お客様は通常、弊社の製品のいずれかを使い始め、すぐに複数の製品に拡大するため、5人の開発者チームに対しては、月額395ドルから始まるサブスクリプション料金ですべての1,600以上のコンポーネントとフレームワークを提供するのが最善であると判断しました。さらに、現在のプロモーションに基づいて割引を提供できる場合があります。弊社の製品スペシャリストに今すぐお問い合わせください。追加の割引が適用されるかどうかご確認ください。
Syncfusion Blazor DataGridを無料でダウンロードして利用できますか？
いいえ、これは商用製品であり、有料ライセンスが必要です。ただし、年間売上高が100万米ドル未満で、開発者が5人以下の企業や個人向けには、無料コミュニティライセンスもご利用いただけます。
Syncfusion Blazor DataGridを始めるにはどうすればよいですか？
まずは私たちの包括的な入門ドキュメントをご覧ください。
Our Customers Love Us
Having an excellent set of tools and a great support team, Syncfusion® reduces customers’ development time.Here are some of their experiences.
The best tool to operate grid-like data out there
Good documentation helps you with everything you need to know. What I like the most is that it takes you from configuration to usage. I have mainly used grid and toolbar options along with dashboard.
Ivan G,
Business Application Developer
Superior components:any day anytime
Essential Studio is one of a kind. The fact that they give us the community developer license has always shown how much they value the small teams creating their own startups. Essential Studio has helped a lot in my almost ready business intelligence platform for the healthcare industry. The grid and the kanban components are what made us fall in love with all the other components.
Kelvin M.
Software Development Engineer
See Real Success Stories
Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.
Explore Case StudiesIndustry
Software development
75% Cost reduction
50% Faster development
Industry
Utilities (oil and gas)
450+ hours saved
Streamlined processes and hours of development effort saved.
Advanced, flexible features
Empowered users through robust and versatile functionality.
Industry
Software and technology
1000+ of hours saved
Accelerated development with enterprise-ready UI components.
Efficient file management
Streamlined workflows with document libraries without building them from scratch.
Industry
Software and technology
2 Years of delay avoided
Two years of delays prevented with proactive planning.
On-time delivery
Projects delivered on schedule using trusted controls.
Industry
IT services and IT consulting
Improved performance
Large datasets handled with easy customization and quick debugging.
Highly customizable
Plug-and-play controls with quick template integration.
Industry
Professional services
Instant access
Quick availability of features and resources.
Reduced dependencies
Fewer dependencies for faster development.
Rated by users across the globe
Syncfusion Blazor DataGridリソース
Awards
Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.
Blazor DataGridチュートリアルとブログの最近のアクティビティ
Blazor DataGridのチュートリアルビデオとブログ記事は、Blazorコンポーネントを使用して最初のアプリを作成するのに役立ちます。これらは、問題解決のアイデアを提供し、機能とその機能について説明し、新機能の利用可能性を発表し、Blazor DataGridコンポーネントのベストプラクティスを説明し、Blazor DataGridコンポーネントを使用した例のシナリオを説明します。Blazor DataGridに関する最新の活動については、ブログとチュートリアルビデオチャンネルをご覧ください。
