Angular Data Grid – 最新アプリのための強力なグリッド
- 数百万件のレコードをわずか1秒で読み込み。
- あらゆる解像度に対応するモバイルファーストデザイン。
- 柔軟な編集と直感的なレコード選択モード。
- Excelライクなフィルタリングおよびグループ化オプションを標準で提供。
- 数え切れないほどの列のカスタマイズとデータ集計。
- PDF、CSV、Excelなどのシームレスなデータエクスポートオプション。
Quick Overview Video
Trusted by the world’s leading companies
Angular Data Grid の概要
Angular Grid は、データを表形式で表示するための機能豊富なデータグリッドコンポーネントです。データバインディング、編集、Excelライクなフィルタリング、カスタムソート、グループ化、行の並べ替え、行と列の固定、行の集計、Excel、CSV、PDF形式へのエクスポートなど、幅広い機能を備えています。
Syncfusion Essential Studio® Angular Data Grid を選ぶ理由
高いパフォーマンス
綿密に検討された工夫と高速な パフォーマンス に重点を置き、数百万件のレコードをわずか1秒で読み込みます。
シームレスなデータバインディング
データマネージャーの助けを借りて、JSON、OData、WCF、RESTful Webサービスなど、さまざまなローカルおよびリモートデータソースとのデータバインディングをシームレスに行えます。
あらゆる解像度に対応
データグリッドは、高い応答性を持つレイアウトと、デスクトップ、タッチスクリーン、スマートフォン向けに最適化されたデザインを特徴としています。iOS、Android、Windows OSを使用するすべての携帯電話でうまく機能します。
柔軟な編集
Angular Grid は、データマネージャーの助けを借りて、ビジネスオブジェクトのリストまたはリモートデータサービスを使用して、作成、読み取り、更新、および削除操作（CRUD）をより簡単に行うことができます。
独自のテンプレートデザインを作成
幅広いテンプレートオプションを使用して、アプリケーションのニーズに基づいてAngular Grid でカスタムユーザーエクスペリエンスを作成できます。
魅力的なカスタマイズ可能なテーマ
Fluent、Tailwind CSS、Bootstrap、Material、Fabric など、5つ以上の組み込みテーマを備えた最先端のデザインです。オンラインの Theme Studio ツールを使用して、テーマを簡単にカスタマイズできます。
簡単なエクスポートと印刷
データグリッドを Excel、PDF、CSVなどのさまざまなファイル形式でエクスポートできます。ページ数に関係なくすべての行と現在表示されているページを印刷することも可能です。
グローバル化とローカライズ
日付、通貨、数字の書式設定を好みに合わせて調整することで、さまざまなロケールのユーザーが使用できるようにします。
AI-Ready Grid エンタープライズデータ分析のために
Angularアプリで、AI強化のために設計されたDataGridを使用してデータ分析を加速します。セマンティック検索と異常検出を簡単に組み込み、よりスマートなデータワークフローを実現します。
-
セマンティック検索: 自然言語処理（NLP）モデルを使用して、ユーザーが日常的なフレーズで検索できるようにし、使いやすさを向上させ、正確なキーワードを必要としません。
- セマンティック検索を追加する方法を見る
-
異常検出: 機械学習（ML）ツールを追加して、データの異常を強調し、自動的に一貫性を確保します。 異常検出を追加する方法を見る
- 異常検出を追加する方法を見る
Angular Data Grid コード例
以下の HTML および TS コードの数行で、Angular Data Grid を簡単に使い始めることができます。また、Angular で Data Grid をレンダリングおよび構成する方法を示す Angular Data Grid の例も参照してください。
<div class="control-section">
<ejs-grid [dataSource]='data' height='350'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'/>
<e-column field='CustomerName' headerText='Customer Name' width='150'/>
<e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'/>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'/>
<e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'/>
<e-column field='ShipCountry' headerText='Ship Country' width='150'/>
</e-columns>
</ejs-grid>
</div>import { Component, OnInit } from '@angular/core';
import { orderDetails } from './data';
@Component({
selector: 'ej2-grid-container',
templateUrl: 'default.html'
})
export class DefaultComponent implements OnInit {
public data: Object[] = [];
ngOnInit(): void {
this.data = orderDetails;
}
}
スケルトンローディングインジケーター
Data Grid は、最初のレンダリング、更新時、またはソート、フィルタリング、グループ化などのグリッドアクションの実行後にデータをフェッチしてグリッドにバインドする際に、ローディングインジケーターとしてシマー効果を表示します。データグリッドは、スピナーとシマーの2種類のローディングインジケーター効果を提供します。
アダプティブ UI レイアウト
Data Grid のユーザーインターフェースは、小さな画面での優れた表示と使いやすさのためにカスタマイズおよび再設計されています。フィルタ、ソート、検索、列選択、列メニュー、ページャードロップダウン、編集ダイアログなどの機能は、画面サイズに適応し、行要素を垂直方向にレンダリングします。
列
列は、Data Grid のデータソースのスキーマを定義します。書式設定、列の自動生成、列定義、行と列の固定、列のスパン、テキストラッピング、列選択、列メニューなどの機能をサポートしています。
ページング
ページングは、割り当てられたデータソースからデータのセグメントを表示するために使用されます。Angular Data Grid は、組み込みのページャー UI を提供し、その UI 全体をカスタマイズするオプションも備えています。また、リモート Web サービスからのデータ取得を効率的に行うためのオンデマンドページングモードも備えています。
ソート
ヘッダーを単にクリックするだけで、行を昇順または降順で列に対してソートできます。Ctrl キーを押しながらヘッダーをクリックすると、複数の列のデータをソートできます。さらに、アプリケーションのニーズに基づいて独自のカスタムソートロジックを定義できます。
フィルタリング
フィルタリングは、データグリッドで特定の基準を満たすレコードを表示するのに役立ちます。データグリッドは、強力な Excel ライクなフィルターを含むさまざまなフィルタータイプをサポートしています。適切なフィルタータイプを選択し、独自のカスタムフィルタリングロジックを定義し、アプリケーションのニーズに基づいてフィルタリング UI をカスタマイズできます。ダイアクリティカル文字もフィルタリングできます。
選択
チェックボックスまたはクリックするだけで行やセルを選択できます。Ctrl、Shift、Command キーを押しながら、またはプログラムで複数の行やセルを選択できます。
編集
Angular Data Grid は、作成、読み取り、更新、削除操作 (CRUD) をサポートしています。特定の列値を編集するための組み込みエディターコンポーネントに加えて、アプリケーションのニーズに応じてテンプレートを使用してカスタムエディターコンポーネントを作成できます。データマネージャーを使用すると、配列コレクションまたはリモートデータサービスで編集操作を実行できます。
グループ化
行をグループ化して、整理された階層構造でデータを昇順または降順で表示し、レコードの展開と折りたたみを容易にします。インタラクティブなドロップ領域にその列をドラッグアンドドロップするだけで、目的の列のレコードをグループ化するオプションもあります。
集計
要約オプションを使用して、Data Grid の列値の集計を簡単に視覚化できます。集計は、個々の要約行、個々のグループ要約行、またはグループキャプション行に値を表示するようにカスタマイズできます。
固定行と固定列
固定行と固定列は、それぞれ上部、左、右、両方、または固定位置に表示され、残りのグリッドコンテンツはスクロール可能です。この機能は、主にセル値を比較するために使用されます。
スティッキーヘッダー
Angular Data Grid のヘッダーは、列ヘッダーとともにグリッドコンテンツを視覚化するために、ドキュメントを垂直方向にスクロールするときに固定位置にある必要があります。
行のドラッグ & ドロップ
Angular Grid は、ユーザーが他の Data Grid またはカスタムコンポーネントに行をドラッグアンドドロップできるようにします。ユーザーは、ドラッグアイコンを使用して同じ Data Grid 内で行をドラッグアンドドロップしたり、異なるグループ間で相互に移行することもできます。
マスター・ディテール・グリッド
Angular マスター・ディテール・グリッドは、レコードの詳細を特定の行をクリックすることで別のデータグリッドで表示するユースケースシナリオです。
状態管理
Angular Data Grid コンポーネントの状態管理機能を使用すると、ブラウザの更新後や同じブラウザセッション内で別のページに移動した場合でも、グリッドの状態を維持できます。この機能は、ページのリロード後もグリッドの構成とデータを保持するのに特に役立ちます。
ライブアップデート
Data Grid は、特定の時間間隔でセル内のライブデータを更新します。これらの更新は、ラグや速度低下を引き起こすことなく行われ、システムが非常に応答性が高く効率的であることを保証します。
その他の機能
クリップボードにコピー
クリップボードを使用すると、選択した行またはセルからデータをコピーできます。Ctrl+C と Ctrl+Shift+H のキーの組み合わせは、それぞれヘッダーありとなしでデータをコピーします。
コンテキストメニュー
セル、ヘッダー、またはページャーを右クリックすると表示されるポップアップメニューを使用して、Data Grid でさまざまなアクションを実行します。組み込みのデフォルトメニュー項目に加えて、カスタムコンテキストメニュー項目を追加できます。
幅と高さ
データグリッドのサイズを変更するには、width および height プロパティを設定します。コンテンツがグリッド要素に収まらない場合、水平および垂直スクロールバーが表示されます。データグリッドの親コンテナいっぱいに表示するには、height と width を 100% に設定するだけです。
スタックヘッダー
スタックヘッダーにより、列ヘッダーをスタックされた方法でグループ化して視覚化できます。スタックできる列の数に制限はありません。列がスタックされていても、すべての Data Grid アクションを実行できます。
アクセシビリティ
キーボードナビゲーション
Angular Grid コンポーネントは、すべてのセルにキーボードでアクセスできるようにします。ソート、選択、編集などの主要な機能は、キーボードコマンドのみで実行できます。マウス操作は必要ありません。これにより、このコンポーネントを使用して高度なアクセシビリティを持つアプリケーションを作成することができます。
スクリーンリーダー
Angular Data Grid ビューは、完全な WAI-ARIA アクセシビリティをサポートしています。その UI には高コントラストの視覚要素が含まれており、視覚障害のある人が最良の視聴体験を得るのに役立ちます。また、有効な UI 説明は、スクリーンリーダーなどの支援技術を介して簡単にアクセスできます。
右から左（RTL）
右から左へのレンダリングにより、Data Grid のテキストとレイアウトを右から左に表示できます。これにより、RTL 言語のユーザーエクスペリエンスとアクセシビリティが向上します。
モバイルに最適化され、タッチフレンドリー
Data Grid コンポーネントは、使いやすさを向上させ、iOS、Android、Windows を含むすべてのオペレーティングシステムで、デスクトップ、タッチスクリーン、電話向けに最適化された応答性の高いデザインを提供します。
タッチサポート
ユーザーフレンドリーなタッチジェスチャーとインタラクティブな UI デザインが最高のユーザーエクスペリエンスを提供します。すべての Data Grid 機能は、ゼロコンフィグレーションでタッチデバイスで動作します。
レスポンシブページャー
Data Grid のページャーはインテリジェントに動作し、そのディメンションに基づいて完全に UI を応答的に変更します。最適化されたデザインは、さまざまなデバイスで最高の UI インタラクションを提供します。
Angular バージョンの互換性
Angular のバージョンが継続的に改善される中、Angular Data Grid は、バージョン4から最新バージョンまで互換性を持つように常に最新の状態に保たれています。
その他のサポートされるフレームワーク
Data Grid は、Blazor、React、JavaScript、および Vue フレームワークで利用できます。以下のリンクから、プラットフォーム固有のオプションをご覧ください。
サポートされるブラウザ
Angular Data Grid は、Chrome、Firefox、Edge、Safari、Operaを含むすべての最新のWebブラウザでうまく動作します。
145+ 以上のAngular UIコンポーネント
すべてのコンポーネント
スマートコンポーネント
データ可視化
ドロップダウン
ファイルビューア & エディタ
ボタン
インタラクティブチャット
入力
ナビゲーション
フォーム
よくある質問
なぜ Syncfusion Essential Studio® Angular Data Grid を選ぶべきですか？
Syncfusion Data Grid は、以下の機能を提供する最高の Angular Data Grid です。
数百万件のレコードをわずか1秒で読み込みます。
- あらゆる解像度に対応するモバイルファーストデザイン。
JSON、RESTful サービス、OData サービス、WCF サービスなどのローカルおよびリモートデータソースを使用できる柔軟なデータバインディング。
標準で提供されるExcelライクなフィルタリングおよびグループ化オプション。
PDF、CSV、Excel などのシームレスなデータエクスポートオプション。
- ソフトウェアと対話するための機能豊富な UI を提供する市場で最高の Angular Data Grid の一つ。
シンプルな構成と API。
- すべての最新ブラウザをサポート。
デモ、ドキュメント、ビデオなどの豊富な学習リソースで、Angular Data Grid をすぐに学び、使い始めることができます。
Syncfusion Angular Data Grid の価格はいくらですか？
Angular Data Grid は単体では販売していません。Syncfusion チームライセンスの一部としてのみ購入可能です。これには、Angular Data Grid を含む 1,600 以上のコンポーネントとフレームワークが含まれています。チームライセンスの価格は、開発者5人で月額395ドルからで、サブスクリプションの有効期限までサポートとアップデートが含まれます。さらに、現在実施中のプロモーションに基づいて割引が適用される場合があります。弊社の製品スペシャリストに今すぐお問い合わせいただき、追加割引の対象となるかをご確認ください。
Syncfusion Angular Grid のデモはどこで入手できますか？
グリッドのレンダリングと構成方法を示す Angular Grid のデモをご覧いただけます。
Angular Grid と Angular Data Grid の違いは何ですか？
Angular Grid は基本的なテーブル実装 (table や *ngFor のようなもの) であるのに対し、Angular Data Grid (Syncfusion の Angular Grid のようなもの) は、複雑なデータ処理のためのソート、フィルタリング、仮想化、インライン編集などの高度な機能を提供します。Syncfusion のグリッドは、エンタープライズアプリケーションでの高性能とスケーラビリティを最適化しています。
Syncfusion Angular Grid コンポーネントを個別に購入できますか？
いいえ、弊社の 1,600+ 個の Web、モバイル、デスクトップ用コンポーネントおよびフレームワーク（Angular Data Grid を含む）は個別に販売されていません。チームライセンスの一部としてのみご利用いただけます。ただし、競合他社の Data Grid コンポーネント単体の価格をわずかに上回る程度に、競争力のある価格設定をしています。また、経験上、お客様は通常、弊社の製品のいずれかを使用し始め、すぐに複数の製品に拡張するため、チーム5人分の開発者で月額395ドルから始まるサブスクリプション料金で、1,600+ 個すべてのコンポーネントとフレームワークを提供することが最善であると考えました。さらに、現在実施中のプロモーションに基づいて割引を提供できる場合があります。弊社の製品スペシャリストに今すぐお問い合わせいただき、追加割引の対象となるかをご確認ください。
Syncfusion Angular Data Grid を無料でダウンロードして利用できますか？
いいえ、これは商用製品であり、有料ライセンスが必要です。ただし、年間総収入が100万米ドル未満で、開発者が5人以下の企業や個人組織向けに、無料のコミュニティライセンスも提供しています。
Syncfusion Angular Grid を始めるにはどうすればよいですか？
まず、包括的な 入門ドキュメントをご覧になるのが良いでしょう。
Angular Data Grid とは何ですか？
Angular Data Grid は、大規模なデータセットを効率的に表示および管理するために設計された高度なテーブルコンポーネントです。その機能には、ソート、フィルタリング、ページネーション、リアルタイム更新が含まれます。Syncfusion のようなライブラリは、Excel ライクな機能、サーバーサイド処理、シームレスな Angular 統合によってパフォーマンスを向上させます。
お客様は私たちを愛しています
優れたツール群と充実したサポートチームにより、Syncfusion® はお客様の開発時間を短縮します。お客様の体験談の一部をご紹介します。
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
実際の成功事例を見る
世界中の開発者が複雑なプロジェクトを簡素化し、納期を短縮するために Syncfusion の Essential Studio を信頼しています。豊富な UI コントロール ライブラリ、強力な SDK、信頼できるサポートにより、Essential Studio はチームがエンタープライズ対応のアプリケーションを自信を持って構築できるよう支援します。
ケーススタディを探る産業
ソフトウェア開発
75% コスト削減
50% より迅速な開発
産業
公益事業 (石油・ガス)
450+ 節約された時間
プロセスを合理化し、開発工数を大幅に削減
高度で柔軟な機能
強力で多用途な機能によりユーザーを支援
産業
ソフトウェアと技術
1000+ 節約された時間
エンタープライズ対応の UI コンポーネントで開発を加速
効率的なファイル管理
ドキュメント ライブラリにより、ゼロから構築することなくワークフローを合理化
産業
ソフトウェアと技術
2年 回避された遅延
プロアクティブな計画により 2 年間の遅延を防止
予定どおりの納品
信頼性の高いコントロールを使用してプロジェクトを期日どおりに納品
産業
ITサービスとITコンサルティング
パフォーマンスの向上
大規模データセットを簡単なカスタマイズと迅速なデバッグで処理
高いカスタマイズ性
プラグアンドプレイ方式のコントロールによりテンプレートを素早く統合
産業
プロフェッショナルサービス
即時アクセス
機能とリソースをすぐに利用可能
依存関係の削減
開発を高速化するための依存関係を最小限に
世界中のユーザーからの評価
Syncfusion Angular Data Grid リソース
UIキット
Figma のダウンロード
Figma のダウンロード
受賞歴
偉大さ—自分で言うのではなく、他の人が認めるからこそ意味があります。 シンクフュージョンは以下の賞をいただきました。
Angular Data Grid のチュートリアルとブログの最近のアクティビティ
Angular Data Grid のチュートリアルビデオとブログ記事は、Angular コンポーネントを使用した最初のアプリの構築をガイドします。問題解決戦略を提供し、機能と機能性を説明し、新機能のリリースを発表し、ベストプラクティスを説明し、シナリオ例を紹介します。Angular Data Grid の更新については、ブログとチュートリアルビデオチャンネルで最新の投稿をご覧ください。
