React Data Grid - リッチなUIを備えた柔軟なデータテーブル
- 数百万件のレコードを1秒で読み込み。
- あらゆる解像度に対応するモバイルファーストデザイン。
- 柔軟な編集と直感的なレコード選択モード。
- 既成のExcelのようなフィルタリングとグループ化オプション。
- 無数の列のカスタマイズとデータ集計。
- PDF、CSV、Excelなどのシームレスなデータエクスポートオプション。
Quick Overview Video
Trusted by the world’s leading companies
概要
ライブデモを見る
React Data Gridは、データを表形式で表示するための機能豊富なグリッドコンポーネントです。その幅広い機能には、データバインディング、編集、Excelのようなフィルタリング、カスタムソート、行の集計、選択、およびExcel、CSV、PDF形式のサポートが含まれます。
Syncfusion React Data Gridを選ぶ理由
高性能
綿密な検討と努力により、数百万件のレコードを1秒で読み込む高速なパフォーマンスに重点を置いています。
シームレスなデータバインディング
データマネージャーを使用して、JSON、OData、WCF、RESTfulWebサービスなどのさまざまなローカルおよびリモートデータソースとデータをシームレスに結合します。
あらゆる解像度に対応
DataGridは、デスクトップ、タッチスクリーン、スマートフォン向けに非常に応答性の高いレイアウトと最適化されたデザインを備えています。iOS、Android、Windows OSを使用するすべてのモバイルフォンでうまく機能します。
柔軟な編集
React Data Gridは、データマネージャーの助けを借りて、ビジネスオブジェクトのリストやリモートデータサービスを使用して、作成、読み取り、更新、削除操作（CRUD）をより簡単に行います。
独自のテンプレートデザインを作成
幅広いテンプレートオプションを使用して、アプリケーションのニーズに基づいたReact Gridでのカスタムユーザーエクスペリエンスの作成をユーザーに許可します。
魅力的なカスタマイズ可能なテーマ
Fluent、Tailwind CSS、Bootstrap、Material、Fabricなど、5つ以上の組み込みテーマを備えた最先端のデザインです。オンラインのテーマスタジオツールを使用して、テーマを簡単にカスタマイズできます。
グローバル化とローカライズ
日付、通貨、および番号付けを好みに合わせてフォーマットすることで、異なるロケールのユーザーがそれらを使用できるようにします。
より高速なインサイトのためのAI対応DataGrid
当社のDataGridは、すぐにAI対応です。セマンティック検索、異常検出、または必要なその他のAI操作で簡単に拡張できます。高速な回答とスマートなデータ探索をすべて1つのグリッドで実現します。
-
セマンティック検索： お好みのNLPモデルを接続して、ユーザーが正確なキーワードを必要とせず、自然なフレーズでクエリを実行できるようにします。
- セマンティック検索の追加方法
-
異常検出： MLサービスを接続して、異常なトレンドやエラーを迅速に検出し、ビジネスを軌道に乗せます。
- 異常検出の追加方法
React DataGridコード例
以下のTSXコードの数行で、React Data Gridを簡単に使い始めることができます。また、ReactでDataGridをレンダリングおよび設定する方法を示すReact DataGridの例もご覧ください。
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { orderDetails } from './data';
import { SampleBase } from '../common/sample-base';
export class Default extends SampleBase<{}, {}> {
render() {
return (
<div className='control-pane'>
<div className='control-section'>
<GridComponent dataSource={orderDetails} height='350'>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='注文ID' width='120' textAlign='Right'></ColumnDirective>
<ColumnDirective field='CustomerName' headerText='顧客名' width='150'></ColumnDirective>
<ColumnDirective field='OrderDate' headerText='注文日' width='130' format='yMd' textAlign='Right' />
<ColumnDirective field='Freight' headerText='運賃' width='120' format='C2' textAlign='Right' />
<ColumnDirective field='ShippedDate' headerText='出荷日' width='130' format='yMd' textAlign='Right'></ColumnDirective>
<ColumnDirective field='ShipCountry' headerText='出荷国' width='150'></ColumnDirective>
</ColumnsDirective>
</GridComponent>
</div>
</div>
)
}
}
ソート
React DataGridで、ヘッダーをクリックするだけで、列に対して昇順または降順でソートできます。Ctrlキーを押しながらヘッダーをクリックすると、複数の列のデータをソートできます。さらに、アプリケーションのニーズに基づいて独自のカスタムソートロジックを定義できます。
フィルタリング
フィルタリングは、データグリッドで特定の基準を満たす特定のレコードまたは関連レコードを表示するのに役立ちます。データグリッドは、強力なExcelのようなフィルターを含むさまざまなフィルタータイプをサポートしています。適切なフィルタータイプを選択し、独自のカスタムフィルタリングロジックを定義し、アプリケーションのニーズに基づいてフィルタリングUIをカスタマイズします。分音記号付き文字もフィルタリングできます。
ページング
ページングは、割り当てられたデータソースからデータのセグメントを表示するために使用されます。React DataGridは、組み込みのページャーUIを提供し、そのUI全体をカスタマイズするオプションがあります。また、リモートWebサービスからの効果的なデータ取得のためのオンデマンドページングモードも備えています。
グループ化
レコードを階層的な構造に整理して表示するために行をグループ化し、レコードの展開と折りたたみを容易にします。インタラクティブなドロップ領域にその列をドラッグアンドドロップするだけで、目的の列のレコードをグループ化するオプションがあります。
列
列は、React Data Gridのデータソースのスキーマを定義します。書式設定、列の自動生成、列の定義、行と列の固定、列のスパン、テキスト折り返し、列チューザー、列メニューなどの機能をサポートしています。
フリーズ行と列
固定された行と列は、上下左右または固定位置に表示され、残りのグリッドコンテンツはスクロール可能になります。この機能は主にセルの値を比較するために使用されます。
スティッキーヘッダー
ドキュメントを垂直方向にスクロールするときに、データグリッドのコンテンツと列ヘッダーを視覚化できるように、React Data Gridヘッダーは固定位置にある必要があります。
列のドラッグ＆ドロップ
React Gridでは、ユーザーは行を別のDataGridまたはカスタムコンポーネントにドラッグアンドドロップできます。ユーザーは、ドラッグアイコンを使用して同じDataGrid内でドラッグアンドドロップすることも、異なるグループ間で転送することもできます。
マスター・ディテールグリッド
Reactマスター・ディテールグリッドは、レコードの詳細が特定の行をクリックして別のデータグリッドで表示されるユースケースシナリオです。
適応型UIレイアウト
React Data Gridのユーザーインターフェースは、小画面での優れた表示と使いやすさのためにカスタマイズおよび再設計されています。フィルタ、ソート、検索、編集ダイアログは画面サイズに適応し、行要素を垂直方向にレンダリングします。
スケルトンローディングインジケーター
React Data Gridコントロールは、データのフェッチ中や、最初のレンダリング、更新、またはソート、フィルタリング、グループ化などのグリッドアクションの実行後にデータをグリッドにバインドする際に、ローディングインジケーターとしてシマー効果を表示します。データグリッドは、スピナーとシマーの2種類のローディングインジケーター効果を提供します。
ステート管理
React Data Gridコンポーネントのステート管理機能により、ブラウザの更新後や同じブラウザセッション内で別のページに移動した後でも、グリッドの状態を維持できます。この機能は、ページのリロード後もグリッドの構成とデータを保持するのに特に役立ちます。
ライブアップデート
DataGridは、特定の時間間隔でセルのライブデータを更新します。これらの更新は、遅延や速度低下を引き起こすことなく行われ、システムが非常に応答性が高く効率的であることを保証します。
データグリッドと統合されたチャート
Data Gridはチャートコンポーネントと統合され、選択されたグリッドデータを動的でインタラクティブな視覚化に変換します。テーブルとチャートのこの強力な組み合わせにより、ユーザーは一目でより明確な洞察を得ることができます。チャートの種類、軸、ビジュアルをカスタマイズします。
追加機能
行の高さ
行の高さは、ビューポートに表示されるレコード数にとって重要な要素であり、アプリケーションのUI要件に基づいて簡単にカスタマイズできます。条件付きで行の高さを設定することも可能です。
クリップボードにコピー
クリップボードを使用すると、選択した行またはセルからデータをコピーできます。Ctrl+Cキーの組み合わせはヘッダー付きで、Ctrl+Shift+Hキーの組み合わせはヘッダーなしでデータをコピーします。
コンテキストメニュー
セル、ヘッダー、またはページャーを右クリックすると表示されるポップアップメニューを使用して、Data Gridでさまざまなアクションを実行します。組み込みのデフォルトメニュー項目に加えて、カスタムのコンテキストメニュー項目を追加できます。
幅と高さ
データグリッドのサイズを変更するには、幅と高さのプロパティを設定します。コンテンツがグリッド要素からはみ出すと、水平方向および垂直方向のスクロールバーが表示されます。データグリッドの親コンテナを埋めるには、高さと幅を100%に設定します。
積み重ねられたヘッダー
積み重ねられたヘッダーにより、列ヘッダーを積み重ねた方法でグループ化および視覚化できます。積み重ねることができる列の数に制限はありません。列が積み重ねられていても、すべてのData Gridアクションを実行できます。
アクセシビリティ
キーボードナビゲーション
React Data Gridは、キーボードを使用してすべてのセルにアクセスできることを保証します。ソート、選択、編集などの主要な機能は、キーボードコマンドのみで実行でき、マウス操作は不要です。これにより、このコンポーネントを使用して非常にアクセスしやすいアプリケーションを作成できます。
スクリーンリーダー
React Data Gridビューは、完全なWAI-ARIAアクセシビリティサポートを備えています。そのUIには、視覚障害のある人々が最高の視聴体験を得るのに役立つ高コントラストの視覚要素が含まれています。また、有効なUIの説明は、スクリーンリーダーなどの支援技術を通じて簡単にアクセスできます。
右から左（RTL）
右から左へのレンダリングは、Data Gridのテキストとレイアウトを右から左へ表示することを可能にします。これにより、RTL言語のユーザーエクスペリエンスとアクセシビリティが向上します。
モバイルに最適化され、タッチフレンドリー
ReactのDataGridは、デスクトップ、タッチスクリーン、スマートフォン向けに非常に応答性の高いレイアウトと最適化された設計を備えています。iOS、Android、Windows 8 OSを使用するすべてのモバイルフォンでうまく機能します。
タッチサポート
ユーザーフレンドリーなタッチジェスチャーとインタラクティブなUIデザインは、最高のユーザーエクスペリエンスを提供します。すべてのReact Grid機能は、ゼロ構成でタッチデバイスで動作します。
応答性の高いページャー
React DataGridページャーは、その寸法に基づいてUI全体を応答的に変更し、インテリジェントに動作します。その最適化された設計は、さまざまなデバイスで最高のUIインタラクションを提供します。
Syncfusionの完全なReactコンポーネントエコシステムを発見しよう
確立された本番環境対応のコントロールと、モダンなウェブアプリ開発のためにネイティブに構築された最新の純粋なReactコンポーネントを特徴とする、145+以上のReact UIコンポーネントをご覧ください。
-
Reactコンポーネント
-
純粋なReactコンポーネント
-
スマートコンポーネントグリッドドロップダウンインプットデータビジュアライゼーションナビゲーションボタンインタラクティブチャット
-
グリッドデータ可視化ナビゲーション
よくある質問
Syncfusion React DataGridを選ぶべき理由は何ですか？
Syncfusion React DataGridは以下の機能を提供します。
数百万のレコードを1秒でロード。
- あらゆる解像度に対応するモバイルファーストデザイン。
JSON、RESTful services、OData services、WCF servicesなどのローカルおよびリモートデータソースを使用するためのサポートを備えた柔軟なデータバインディング。
標準で利用できるExcelのようなフィルタリングとグループ化オプション。
PDF、CSV、Excelなどのシームレスなデータエクスポートオプション。
- ソフトウェアとやり取りするための機能豊富なUIを提供する市場で最高のReact DataGridの1つ。
シンプルな設定とAPI。
- すべての最新ブラウザをサポート。
その他の豊富な学習リソース（デモ、ドキュメント、ビデオ）があり、React DataGridをすばやく学習して始めることができます。
Syncfusion React DataGridの価格はいくらですか？
React DataGridは個別に販売しておりません。Syncfusionチームライセンスの一部としてのみ販売しております。これには、React DataGridを含む1,600以上のコンポーネントとフレームワークが含まれています。チームライセンスの価格は、5人開発者で月額$395から始まり、サブスクリプションの有効期限までサポートとアップデートが含まれます。さらに、現在実施されているプロモーションに基づいて割引を提供できる場合があります。追加の割引が適用されるかどうかを確認するには、今すぐ当社の製品スペシャリストにお問い合わせください。
Syncfusion React Data Gridのデモはどこで見つけられますか？
React Data Gridのデモでは、Data Gridのレンダリング方法と設定方法が示されています。
React Data Gridとは何ですか？
React Data Gridでフィルタリングを有効にするにはどうすればよいですか？
フィルタリング機能を使用するには、Filterモジュールをグリッドに注入します。Syncfusion React Gridでフィルタリングを有効にするには、allowFilteringプロパティをtrueに設定します。これにより、列ヘッダーの下にフィルターバーがレンダリングされ、ユーザーはフィルター条件を入力できます。グリッドは、filterSettings.typeプロパティを介して設定可能な複数のフィルタリングモードを提供します。
React Data Gridで大規模なデータセットを処理するにはどうすればよいですか？
React Data Gridでインライン編集を実装するにはどうすればよいですか？
グリッド内で直接編集機能を有効にするには、editSettings内のallowEditing、allowAdding、およびallowDeletingプロパティをtrueに設定する必要があります。編集には、CRUD操作用のプライマリキー列が必要です。プライマリキーを定義するには、特定の列のisPrimaryKeyをtrueに設定します。
Syncfusion React DataGridコンポーネントを個別に購入できますか？
いいえ、React DataGridを含む当社の1,600+コンポーネントやWeb、モバイル、デスクトップ向けのフレームワークは個別に販売されていません。チームライセンスの一部としてのみ利用可能です。しかし、当社は競争力のある価格を設定しており、他のベンダーがDataGridコンポーネント単独で請求する料金よりも少しだけ高くなっています。また、当社の経験上、お客様は通常、当社の製品の1つを使用し始め、すぐに複数の製品に拡大するため、すべての1,600+コンポーネントとフレームワークを、5人の開発者チームで月額395ドルから始まるサブスクリプション料金で提供するのが最善だと感じました。さらに、現在実施されているプロモーションに基づいて割引を提供できる場合があります。追加の割引が適用されるかどうかを確認するには、今すぐ当社の製品スペシャリストにお問い合わせください。
Syncfusion React DataGridを無料でダウンロードして利用できますか？
いいえ、これは商用製品であり、有料ライセンスが必要です。ただし、年間総収益が100万米ドル未満、開発者が5人以下、従業員が10人以下の組織の企業および個人向けに無料のコミュニティライセンスも利用できます。
Syncfusion React DataGridを始めるにはどうすればよいですか？
当社の総合的な入門ドキュメントから始めるのが良いでしょう。
React Data Gridの機能は何ですか？
React Data Gridにソートを追加するにはどうすればよいですか？
Syncfusion React Gridでソートを有効にするには、次の手順に従います。1. Sortモジュールがインポートされ、Gridコンポーネントに注入されていることを確認します。2. ソートをアクティブにするには、allowSortingプロパティをtrueに設定します。3. sortSettingsプロパティを使用して、初期ソート構成を定義したり、ソート動作をカスタマイズしたりします。
React Data Gridはリアルタイムデータを処理できますか？
Syncfusion React Gridは、WebSocketおよびSignalRとの統合を通じてリアルタイムデータを処理し、動的な更新とシームレスなユーザーエクスペリエンスを可能にします。
React Data Gridでサーバーサイドページネーションを設定するにはどうすればよいですか？
グリッドは、Syncfusionの組み込みデータアダプタを有効にするか、カスタムデータバインディングの概念を使用することで、サーバーサイドのページネーションを処理します。
お客様は私たちを愛しています
優れたツール群と充実したサポートチームにより、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
A Must-Have Tool for Fast Development with Top-Notch Support
We’ve been using Syncfusion Essential Studio for over 4 years, and it’s been a game-changer for our team. The components are incredibly versatile and cover almost every use case we’ve needed, from basic UI elements to complex data grids and charts. The ease of integration with our existing projects saved us countless hours during implementation. The documentation is straightforward, and even if we get stuck, their customer support team is super responsive—whether through live chat or tickets. We’ve raised nearly 50 tickets so far, and every single one was resolved quickly with clear solutions. The frequent updates with new features and improvements keep the library fresh and aligned with modern needs. It’s rare to find a tool that’s both powerful and easy to use, but Syncfusion nails it.
Labeeb M.
Lead UI Developer
実際の成功事例を見る
世界中の開発者が複雑なプロジェクトを簡素化し、納期を短縮するために Syncfusion の Essential Studio を信頼しています。豊富な UI コントロール ライブラリ、強力な SDK、信頼できるサポートにより、Essential Studio はチームがエンタープライズ対応のアプリケーションを自信を持って構築できるよう支援します。
ケーススタディを探る産業
ソフトウェア開発
75% コスト削減
50% より迅速な開発
産業
公益事業 (石油・ガス)
450+ 節約された時間
プロセスを合理化し、開発工数を大幅に削減
高度で柔軟な機能
強力で多用途な機能によりユーザーを支援
産業
ソフトウェアと技術
1000+ 節約された時間
エンタープライズ対応の UI コンポーネントで開発を加速
効率的なファイル管理
ドキュメント ライブラリにより、ゼロから構築することなくワークフローを合理化
産業
ソフトウェアと技術
2年 回避された遅延
プロアクティブな計画により 2 年間の遅延を防止
予定どおりの納品
信頼性の高いコントロールを使用してプロジェクトを期日どおりに納品
産業
ITサービスとITコンサルティング
パフォーマンスの向上
大規模データセットを簡単なカスタマイズと迅速なデバッグで処理
高いカスタマイズ性
プラグアンドプレイ方式のコントロールによりテンプレートを素早く統合
産業
プロフェッショナルサービス
即時アクセス
機能とリソースをすぐに利用可能
依存関係の削減
開発を高速化するための依存関係を最小限に
世界中のユーザーからの評価
Syncfusion React Data Gridリソース
受賞歴
偉大さ—自分で言うのではなく、他の人が認めるからこそ意味があります。 シンクフュージョンは以下の賞をいただきました。
React DataGridのブログとチュートリアルにおける最近のアクティビティ
React DataGridのブログとチュートリアルビデオは、Reactコンポーネントで最初のアプリを構築するのに役立ちます。問題解決戦略を提供し、機能と機能について説明し、新機能のリリースを発表し、ベストプラクティスを説明し、ユースケースの例を紹介します。React DataGridの最新情報を当社のブログとチュートリアルビデオチャンネルでご覧ください。
