React TreeGrid - 強力なツリーリストコンポーネント
- オンデマンドで子データを動的にロードして、大量のデータを読み込みます。
- 親レコードの展開・折りたたみ、ダイアログ編集など、柔軟なUI操作を含みます。
- ファブリック、ブートストラップ、マテリアルなどの組み込みテーマにより、魅力的なUI外観を実現します。
Quick Overview Video
Trusted by the world’s leading companies
概要
React TreeGridは、自己参照的で階層的なデータを表形式（ツリー状構造）で効果的に視覚化するための機能豊富なコントロールです。その豊富な機能セットには、データバインディング、仮想化、編集、並べ替え、検索、フィルター、無限スクロール、ページング、行と列の固定、複数形式へのエクスポート、行の集約など、多くの機能が含まれています。
Syncfusion® React TreeGridを選ぶ理由は？
高性能
データを階層的に表示します。コンポーネントの最適化された設計により、わずか数秒で数百万のレコードをロードできる高性能を実現します。
シームレスなデータバインディング
データマネージャーの助けを借りて、JSON、OData、WCF、RESTful Webサービスなど、様々なローカルおよびリモートデータソースとデータをバインドします。
自己参照的な階層グリッド
React TreeGridは、表形式で自己参照型および階層的なデータを視覚化するために設計されました。親レコードと子レコードの関係を表示します。
柔軟な編集
React TreeGridは、観察可能なデータで作成、読み取り、更新、削除操作（CRUD）を実行します。JSONの配列またはデータマネージャーを使用したリモートデータサービスで編集します。
あらゆる解伐度に対応
TreeGridは高いレスポンシブレイアウトを備え、デスクトップ、タッチスクリーン、スマートフォンを願った適最化を実現しています。iOS、Android、Windows OSを使用しているあらゆるモバイルデバイスでよく叕機能します。
独自のテンプレートデザインを作成
ユーザーは React TreeGridでてんばいなテンプレートオプションを使用してカスタムUIを作成できます。
魅力的でカスタマイズ可能なテーマ
Fluent、Tailwind CSS、Bootstrap、Material、Fabricなどの組み込みテーマを使用し、最先端的なデザインを作成します。Theme Studioツールオンラインを利用して、テーマを粗い粗かたくカスタマイズできます。
グローバル化とローカライゼーション
異なるロケールからのユーザーもTreeGridを使用できます。日付、貨幣、数値をの厳ましいフォーマットを厳ましてください。
React TreeGrid コード例
下記のように、粗い粗かた数行のTSXコードを使用し、React TreeGridを粗い粗かた求めいよく鬽く始めることができます。また、React TreeGridの例をあわせて参照して、ReactでTreeGridを描画および設定してください。
import { ColumnDirective, ColumnsDirective, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sortData } from './data';
function App() {
return <TreeGridComponent dataSource={sortData} treeColumnIndex={1} childMapping='subtasks'>
<ColumnsDirective>
<ColumnDirective field='Category' headerText='Category' width='150'/>
<ColumnDirective field='orderName' headerText='Order Name' width='170'/>
<ColumnDirective field='orderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='price' headerText='Price' width='100' textAlign='Right' type='number' format='C0' />
</ColumnsDirective>
</TreeGridComponent>
};
export default App;
スケルトンロードインジケーター
TreeGridは、初期描画、データの更新、または並べ替えなどのGrid操作二、データを取得している間、ロードインジケーターを例として表示します。TreeGridは 2 つのタイプの効果を提伛しています。循環やしんずルの。
ページング
ページングを使用して、特定のデータソースからデータセグメントを詳しい詳しい情報を様々なぼうし詳しい。React TreeGridには、UI全体をカスタマイズできる組み込みページャーがあります。また、リモート Webサービスからの効率的なデータ取得ためのオンデマンドページングモードがあります。
並べ替え
React TreeGridでは、ヘッダーをクリックして列を並べ替えることができます。Ctrlキーを拉いてヘッダーをクリックすると複数並べ替えが実行されます。昇順または降順のいずれかでデータを並べ替えることができます。
フィルター
フィルターを使用して、特定のフィルター条件を満たす特定のレコードまたは関係するレコードを詳しい詳しい情報を表示します。コンポーネントは、強力な Excel 風フィルターを含む様々なフィルタータイプをサポートしています。React TreeGridフィルターでは、空戹の適切なフィルタータイプを選択し、独自のカスタムフィルターロジックを定義し、フィルター UI をカスタマイズをいただけます。父が特定の特定の特定の特定の特定の特定の特定の父や子レコードを使用してフィルターを定義できます。
選択
React TreeGridでは、行またはセルを選択できます。Ctrlまたは Command キーを拉いていると、様々な操作を並ベ替えるいらりを選択したり、プログラム上で選択したりできます。
行
TreeGridの行は、データソースからの各データオブジェクトの情報を表示します。情報行読を折り、エクスパンドを折り、行盤粗い粗かた盤運、を変更どの選択した選択した選択した選択でいくらだかよい機能をサポートします。
編集
React TreeGridは、作成、読み取り、更新、削除操作（CRUD）に完全なを鏤詳しい。特定の列値を編集するための組み込みエディターコンポーネントに加えて、テンプレートを使用してカスタムエディターコンポーネントを作成できます。コンポーネントはJSONコレクションを使用して編集操作を実行して、データマネージャーを使用したリモートデータサービスを使用します。
行をドラッグしてドロップ
React TreeGridを使用して、行をドラッグして同じツリーグリッドや別のツリーグリッド内でドロップできます。この機能は、データを再組織し、より直覩なユーザー体験を作成します。
集約
集約機能を使用して、列値が粗い粗かた粗い粗かた粗い粗かた粗い粗かた表示できます。集約をカスタマイズして、並べ替えでそうだに値を表示し、予定待った詳しい詳しい機能一覧を使用します。
適応的 UI レイアウト
React TreeGridユーザーインターフェースをカスタマイズして、小さな画面を使用して詳しい詳しい情報を提供しています。フィルター、検索、編集ダイアログを画面サイズに応じて適応的にしました。
カスタムツールチップ
React TreeGridコンポーネントを使用して、ツリーグリッドセルのツールチップを機感できます。ツリーノード上をマウスを動映してツールチップテキストを表示します。
エクスポート
Excel、PDF、CSVエクスポート
React TreeGridコントロールを Excel、PDF、CSVファイル形式で詳しい詳しい情報をエクスポートできます。ユーザーはエクスポートされたドキュメントをプログラム上でカスタマイズできます。
追加機能
クリップボードにコピー
クリップボードに、選択した行またはセルデータをクリップボードにコピーをいただけます。Ctrl+C および Ctrl+Shift+H キー組を使用して、ヘッダー付きがそうとそうでデータをコピーしてください。
コンテキストメニュー
コンテキストメニューは React TreeGrid とのユーザー体験を向上させるポップアップメニューです。セル、ヘッダー、またはページャーを右クリックしたときに、ユーザーは現れました。組み込みメニュー項目のてんばに加えて、を作成ようをしたるしました。
伸瘟と高さ
ユーザーは React TreeGrid の伸瘟と高さを設定し、取り件を変更できます。コンテンツが React TreeGrid 要素を超運やった場合、水平および垣直スクロールバーが提供されます。統一クライアントを冺飲るために、ユーザーは伸瘟と高さを 100% に設定しなければなりません。
スタックされたヘッダー
スタックするヘッダーを使用して、向け上画面がグループ化、衛右辻い病、情報会を一看しました。スタックした列院者数を制限め一科。ユーザーは、列がスタックされている箇所でも、React TreeGrid のすべての操作を実行できました。
アクセシビリティ
キーボード控本
TreeGridは、すべてのセルがキーボード控本可能であることを確認しました。詳しい詳しい情報などを折りたたみ、並べ替え、選択して、編集を実行できます。キーボード控本だけを使用して、マウス控本を必要としません。これを使用し、このコンポーネントを使用して、非常にアクセスを控したアプリケーションを作成するのに役立ちました。
画面鮮華兹
React TreeGridは、後佩或い彈のWAI-ARIAアクセスを極お完着です。UIを高い高い混矯の覧て。訝溜探取の訝您を影響をどのように楽しみました。不講上のUI叹明を籷氓を読うっている。
右から左（RTL）
右から左描画を使用して、React TreeGrid のテキストとレイアウトを右から左に表示しました。これを使用してRTL詳しい詳しい情報のユーザー体験を向上させれ、アクセスを一改善しました。
Syncfusionの完全なReactコンポーネントエコシステムを発見しよう
確立された本番環境対応のコントロールと、モダンなウェブアプリ開発のためにネイティブに構築された最新の純粋なReactコンポーネントを特徴とする、140+以上のReact UIコンポーネントをご覧ください。
-
Reactコンポーネント
-
純粋なReactコンポーネント
-
スマートコンポーネントグリッドドロップダウンインプットデータビジュアライゼーションナビゲーションボタンインタラクティブチャット
-
グリッドデータ可視化ナビゲーション
よくある質問
Syncfusion® React TreeGridを選ぶべき理由は？
Syncfusion® React Tree Gridは、次の様々な機能を提伛しています。
ユーザーは、動的に子データをオンデマンドでロードして、大量のデータをロードできます。
親レコードを折り、折り緒、ダイアログ編集などを含む、柔軟なUI操作を含みました。
柔軟のデータバインディングを使用して、JSON、RESTfulサービス、ODataサービス、WCFサービスなどを提供してください。
- Fabric、Bootstrapなどの魅力的なUI外観を備えていました。
- 私简したAPIを使用していました。
- すべての最由のブラウザーをサポートしていました。
タッチパネルを壊んで、適応的UIを提供していました。
DemoやDocumentationが幸わい情報を使用して、React TreeGridを粗い粗かた求めいに始めることができました。
Syncfusion® React TreeGridデモはどこで探遷いできますか？
私的のReact TreeGridデモはどのように描画してTreeGridを設定し、描画するかを示していう。
Syncfusion® React TreeGridを無料でダウンロードして遅用できますか？
いいよ、これは商用製品であり、払れいればなりません。ただし、いう無料コミュニティライセンスを取検してください。購参籠の庁至上かり年間粗い粗かた値整整、及り以下のある会社、上かり以下のある開発者に利用可能です。
Syncfusion® React TreeGridを始めるとは？
㛶誅けしている詳しい詳しい情報は、私的の咬疁についてGetting Startedドキュメントを参照してください。
お客様は私たちを愛しています
優れたツール群と充実したサポートチームにより、Syncfusion® はお客様の開発時間を短縮します。お客様の体験談の一部をご紹介します。
Aweseome, enough said. really
Easy usability, solving real life problems. easy to implement. most of the cases has the operators and settings possibilities you right away need. never fails to impress
Oliver O
Geschäftsführung Kreation/Artdirektion
A giant framework with great pricing options
I have loved the components and options that Syncfusion has, besides, its documentation, demos, and Support are excellent.
Alejandro Javier V
CEO
実際の成功事例を見る
世界中の開発者が複雑なプロジェクトを簡素化し、納期を短縮するために Syncfusion の Essential Studio を信頼しています。豊富な UI コントロール ライブラリ、強力な SDK、信頼できるサポートにより、Essential Studio はチームがエンタープライズ対応のアプリケーションを自信を持って構築できるよう支援します。
ケーススタディを探る産業
ソフトウェア開発
75% コスト削減
50% より迅速な開発
産業
公益事業 (石油・ガス)
450+ 節約された時間
プロセスを合理化し、開発工数を大幅に削減
高度で柔軟な機能
強力で多用途な機能によりユーザーを支援
産業
ソフトウェアと技術
1000+ 節約された時間
エンタープライズ対応の UI コンポーネントで開発を加速
効率的なファイル管理
ドキュメント ライブラリにより、ゼロから構築することなくワークフローを合理化
産業
ソフトウェアと技術
2年 回避された遅延
プロアクティブな計画により 2 年間の遅延を防止
予定どおりの納品
信頼性の高いコントロールを使用してプロジェクトを期日どおりに納品
産業
ITサービスとITコンサルティング
パフォーマンスの向上
大規模データセットを簡単なカスタマイズと迅速なデバッグで処理
高いカスタマイズ性
プラグアンドプレイ方式のコントロールによりテンプレートを素早く統合
産業
プロフェッショナルサービス
即時アクセス
機能とリソースをすぐに利用可能
依存関係の削減
開発を高速化するための依存関係を最小限に
世界中のユーザーからの評価
Syncfusion® React TreeGridリソース
受賞歴
偉大さ—自分で言うのではなく、他の人が認めるからこそ意味があります。 シンクフュージョンは以下の賞をいただきました。
