syncfusion-react-grid

Syncfusion React Grid

Syncfusion React Grid は、表形式データの表示と操作に対応した、包括的で機能豊富なコンポーネントです。データバインディング、ページング、並べ替え、フィルタリング、グループ化、編集、エクスポート、スクロールモード、行と列のカスタマイズ、高度な状態管理など、あらゆる規模や複雑さのデータセットを効率的に扱うための幅広い機能を備えています。

⚠️ セキュリティと信頼境界

• Grid スキルはリモートデータへのアクセスを行いません。
• 外部 API とのやり取りはすべて、このスキルの信頼境界外にある別の DataManager スキルが処理します。

目次

• このスキルを使用する場面
• コンポーネントの概要
• 組み込み API の必須ルール
• 機能／スキルのナビゲーションガイド
• クイックスタートの例

このスキルを使用する場面

次のような場合は、Syncfusion React Grid を使用してください。

• React アプリケーションで表形式データを表示する
• ページング、仮想スクロール、または無限スクロールで大規模なデータセットを効率的に処理する
• 単一または複数の列で並べ替え、フィルタリング、検索を有効にする
• 複数の編集モード（Inline、Batch、Dialog）でデータをインライン編集する
• カスタマイズ機能を使ってデータを Excel または PDF 形式にエクスポートする
• 集計や計算を使ってデータをグループ化、集計する
• テンプレートとスタイルで行やセルをカスタマイズする
• 複雑な列設定（固定列、セル結合、並べ替え、サイズ変更）を管理する
• 数千件のレコードをレンダリングする際にパフォーマンスを最適化する
• ユーザー設定や構成のためにグリッドの状態を保持する
• さまざまな画面サイズに対応したレスポンシブなデータビューを提供する

コンポーネントの概要

Grid コンポーネントは、次の機能を備えています。

• データバインディング：ローカル配列、リモートデータソース、DataManager との連携をサポート
• ページング：ページサイズやナビゲーションをカスタマイズできるクライアント側のページネーション
• 並べ替え：カスタム比較関数に対応した単一列および複数列の並べ替え
• フィルタリング：複数のフィルターモード（フィルターバー、フィルターメニュー、Excel 形式のフィルター）
• 検索：列全体を対象とした検索
• グループ化：集計と遅延読み込みに対応した列ごとのデータのグループ化
• 選択：チェックボックスに対応した行、セル、列の選択
• 編集：検証とテンプレートに対応した Inline、Batch、Dialog モード
• 集計：合計、平均、件数、最小値、最大値をフッター、グループ、キャプションに表示
• エクスポート：テンプレートとサーバー側の処理に対応した Excel および PDF へのエクスポート
• スクロール：標準、仮想、無限スクロールモード
• 行のカスタマイズ：テンプレート、詳細ビュー、ドラッグ＆ドロップ、ピン留め、セル結合
• 列のカスタマイズ：テンプレート、サイズ変更、並べ替え、固定、セル結合
• パフォーマンス：大規模なデータセット向けに最適化されたレンダリング
• レスポンシブデザイン：さまざまな画面サイズに適応するレイアウト
• モジュールシステム：バンドルサイズを削減する機能別モジュール

組み込み API の必須ルール

重要：Grid の組み込み API（137 以上のメソッド、65 以上のイベント、95 以上のプロパティ）を使用する際は、次のルールに従ってください。

ルール 1：機能メソッドにはモジュールのインジェクションが必要

メソッドは対応するモジュールがインジェクションされている場合にのみ動作します。モジュールがない場合もエラーは発生しません。

メソッド	必要なモジュール	例
goToPage()	Page	<Inject services={[Page]} />
sortColumn()	Sort	<Inject services={[Sort]} />
filterByColumn()	Filter	<Inject services={[Filter]} />
addRecord(), deleteRecord()	Edit	<Inject services={[Edit]} />

ルール 2：プロパティとメソッドの違いを把握する

• プロパティ：JSX の props で設定します（<GridComponent allowPaging={true} />）
• メソッド：ref 経由で呼び出します（gridRef.current.goToPage(2)）
• メソッドでプロパティを設定したり、props でメソッドを呼び出したりすることはできません

---

📄 プロパティ API リファレンス全文： references/properties-configuration.md 📄 メソッド API リファレンス全文： references/programmatic-api.md 📄 イベント API リファレンス全文： references/events-catalog.md 📄 バックエンド連携： references/adaptors.md

---

機能別ナビゲーションガイド

はじめに・セットアップ

📄 参照： references/getting-started.md

• インストールとパッケージのセットアップ
• コンポーネントの基本的な初期化
• CSS のインポートとテーマ設定
• シンプルなデータバインディングの例
• モジュールの注入

データ管理

📄 参照： references/data-binding.md

• 配列を使ったローカルデータのバインディング
• DataManager を使ったリモートデータ
• 読み込みインジケーター（Spinner、Shimmer）
• データソースの設定

列の設定

📄 参照： references/columns.md

• 列の定義とプロパティ
• 列の型（string、number、date、boolean、checkbox）
• 列の幅と自動調整
• 列テンプレートとカスタムレンダリング
• 列の機能（セル結合、並べ替え、サイズ変更、固定）

集計とサマリー

📄 参照： references/aggregates.md

• フッターの集計（Sum、Avg、Count、Min、Max など）
• グループフッターの集計
• グループキャプションの集計
• カスタム集計関数
• リアクティブな集計の更新

ナビゲーションとページネーション

📄 参照： references/paging.md

• ページネーションの有効化と設定
• ページサイズとナビゲーション
• ページ変更イベント
• ページャー UI のカスタマイズ
• クエリ文字列との連携

データの並べ替え

📄 参照： references/sorting.md

• 単一列および複数列での並べ替え
• 並べ替え方向の制御
• 初期の並べ替え設定
• カスタム比較関数
• 特定の列の並べ替えを防止

フィルタリング

まずはこちら： 📄 references/filter-setup.md を参照 — フィルタリングを有効にし、フィルターの種類（FilterBar、Menu、Excel、CheckBox）を選択します

種類を選択：

• 📄 references/filter-types.md を参照 — 3 種類のフィルターすべて：FilterBar（インラインテキスト）、Menu（演算子）、Excel（チェックボックス）
• 📄 references/filter-operators.md を参照 — 21 種類以上の演算子、構文、ワイルドカード、AND/OR ロジック

検索

📄 参照： references/searching.md

• グリッドの検索機能
• 列を横断したグローバル検索
• フィルターと連携した検索
• 大文字と小文字を区別する検索オプション

データのグループ化

📄 参照： references/grouping.md

• 列によるグループ化の有効化
• 複数列によるグループ化
• キャプションテンプレート
• グループフッターの集計
• パフォーマンス向上のための遅延読み込みグループ化

選択

📄 参照： references/selection.md

• 行、セル、列の選択モード
• チェックボックスによる選択
• 複数選択の処理
• 選択イベントとメソッド
• プログラムによる選択

編集

📄 参照： references/editing.md

• 編集の有効化（allowEditing、allowAdding、allowDeleting）
• 編集モード：Inline、Batch、Dialog
• 編集の開始方法（ダブルクリック、ツールバー、キーボード）
• カスタム編集テンプレート
• 検証ルールとエラー処理
• 主キーの設定

⚠️ キー列では isPrimaryKey={true} が必須です。設定しないと、編集はエラーを表示せずに失敗します。

行の機能

📄 参照： references/row.md

• 行テンプレート
• 詳細テンプレート（展開／折りたたみ）
• 行のドラッグ＆ドロップ
• 行の固定
• 行のセル結合
• 行の選択とイベント

エクスポート

📄 参照： references/excel-export.md

• 基本的な Excel エクスポート機能
• エクスポートのオプションと設定
• 列テンプレートを使用したエクスポート
• サーバーサイドでのエクスポート
• エクスポート時の書式設定とスタイル設定

📄 参照： references/pdf-export.md

• PDF エクスポートの設定
• ヘッダーとフッター
• エクスポートのオプションとカスタマイズ
• テンプレートを使用したエクスポート
• サーバーサイドでの PDF エクスポート
• ページの向きとサイズ

スクロールモード

📄 参照： references/scrolling.md

• 標準スクロール
• 仮想スクロール（パフォーマンスの最適化）
• 無限スクロール
• スクロールバーのカスタマイズ
• 高さと幅の設定

⚠️ height は必須です。設定しないとスクロールは通知なく無効になります。仮想スクロールおよび無限スクロールでは、allowPaging と併用しないでください。

行数	モード	主な設定
< 1,000	allowPaging	Page モジュール
1K – 100K	enableVirtualization + height	VirtualScroll、ページングなし
連続	enableInfiniteScrolling + height	InfiniteScroll
100K+ のグループ化	enableVirtualization + lazyLoadGrouping	VirtualScroll、Group

固定とピン留め

📄 参照： references/frozen.md

• 列の固定
• 行の固定
• ヘッダーの固定
• 行のピン留め
• 固定列の動作

ツールバー

📄 参照： references/toolbar.md

• 組み込みのツールバー項目
• カスタムツールバーボタン
• ツールバーのアイコンとイベント
• 編集ツールバーとの連携
• ツールバー項目のテンプレート

コンテキストメニュー

📄 参照： references/context-menu.md

• 組み込みのコンテキストメニュー項目
• カスタムコンテキストメニュー
• コンテキストメニューの設定
• コンテキストメニューのイベント

セル操作

📄 参照： references/cell.md

• セルの編集と選択
• セルテンプレート
• セル値の書式設定
• セル範囲と操作
• セルのフォーカスとナビゲーション

📄 参照： references/clipboard.md

• コピーと貼り付けの機能
• クリップボードのイベント
• カスタムクリップボード操作
• 列ヘッダーのコピー
• 外部ソースからの貼り付け

印刷

📄 参照： references/print.md

• グリッドの印刷
• 印刷テンプレート
• 印刷のカスタマイズ
• 特定の行／列の印刷
• 印刷時の向きとサイズ

スタイルと外観

📄 参照： references/style-and-appearance.md

• CSS のカスタマイズ
• テーマ（Material、Bootstrap、Fabric）
• ダークモードのサポート
• インラインスタイルとクラス
• カスタムカラースキーム
• コンポーネントのサイズモード

⚠️ rowDataBound と queryCellInfo はレンダリングのたびに実行されます。これらの中で API を呼び出さないでください。 ❌ 決して、同じフィールドを対象とする列の template と rowDataBound ハンドラーの両方を追加しないでください。スタイル設定のロジックが重複し、競合します。

階層構造とネストされたデータ

📄 参照： references/hierarchy-grid.md

• 親子データ構造
• 子グリッド
• 展開と折りたたみの動作
• ネストされたグリッドテンプレート
• 詳細行テンプレート
• 階層データの設定

アダプティブモード

📄 参照： references/adaptive.md

• enableAdaptiveUI：フィルター、並べ替え、列選択、編集ダイアログを全画面モードで表示し、モバイルでの使いやすさを向上させます。親要素に e-bigger クラスを適用します。
• 縦方向の行表示：rowRenderingMode="Vertical" を設定すると、行要素を水平方向ではなく縦方向に表示します（デフォルトは Horizontal です）。
• 縦方向表示の機能：ページング、並べ替え、フィルタリング、選択、ダイアログ編集、集計、無限スクロール、ツールバーオプションをサポートします。
• rowRenderingMode に関する注意：列メニュー（グループ化、並べ替え、自動調整、フィルター、列選択）は Horizontal モードでのみ動作します。
• AdaptiveUIMode プロパティ：モバイル画面でのみアダプティブレイアウトを表示するには "Mobile" を、モバイルとデスクトップの両方で表示するには "Both"（デフォルト）を使用します。
• モバイル画面の最適化：enableAdaptiveUI が有効な場合、アダプティブダイアログと縦方向のレイアウトを自動的に表示します。

構成管理

📄 参照： references/global-local.md

• グリッドのグローバル設定
• 列のローカル構成
• 構成の優先順位
• 構成のマージ

📄 参照： references/state-management.md

• グリッドの状態を保持する
• グリッドの状態を手動で保存および復元する
• グリッドを初期状態に復元する
• 特定のプロパティが保持されないようにする
• 列テンプレートとヘッダーテキストを保持する

⚠️ ルール：グリッドで状態管理を使用する場合は、enablePersistence={true} を有効にする必要があります。

モジュールシステムとアーキテクチャ

📄 参照： references/modules.md

• グリッドのモジュールアーキテクチャと機能ベースのモジュール
• 30 以上の利用可能なモジュールとその依存関係
• モジュールの注入パターン
• 機能とモジュールの対応関係
• バンドルの最適化と遅延読み込み
• 条件付きのモジュール読み込み
• Syncfusion React Grid のすべての機能では、<Inject services={[...]} /> による明示的なモジュール注入が必要です。注入しない場合、エラーは発生せず、その機能は無視されます。

⚠️ ルール：<Inject services={[...]} /> は、<GridComponent> 内の最後の子要素にする必要があります。

データ接続とアダプター

📄 参照： references/adaptors.md

• バックエンド連携向けの 7 種類のアダプター
• UrlAdaptor、ODataV4Adaptor、WebApiAdaptor、GraphQLAdaptor
• カスタムアダプターと RemoteSaveAdaptor
• バックエンド構成の例（C#、Node.js）
• リクエスト／レスポンス形式の仕様
• エラー処理とアダプターの比較

パフォーマンスの最適化

📄 参照： references/performance.md

• 10,000 件以上のレコードに対応する仮想スクロール
• 無限スクロールと段階的な読み込み
• メモリ管理とクリーンアップの戦略
• バンドルサイズの最適化
• イベントのデバウンスとスロットリング
• パフォーマンスのベンチマークと監視

アクセシビリティとコンプライアンス

📄 参照： references/accessibility.md

• WCAG 2.2 および Section 508 への準拠
• WAI-ARIA の実装とスクリーンリーダー
• キーボード操作（Tab、矢印、Enter、Escape）
• 色のコントラストとフォーカス管理
• アクセシビリティテストツール（axe、NVDA、JAWS）
• セマンティック HTML の実践

データ検証

📄 参照： references/validation.md

• 組み込みバリデーター（必須、最小値、最大値、パターン）
• カスタム検証関数
• サーバー側チェックを伴う非同期検証
• 検証イベントとエラー表示
• ASP.NET によるサーバー側検証
• 列の種類ごとの検証ルール

コマンド列と行アクション

📄 参照： references/command-column.md

• 組み込みコマンド（編集、削除、保存、キャンセル）
• カスタムコマンドボタン
• ロールベースおよびステータスベースのコマンド
• コマンドクリックイベント
• 条件付きコマンド表示
• CSS のスタイル設定とアイコン

ローカライズと国際化

📄 参照先: references/localization.md

• 多言語対応（60 以上の言語）
• ロケールの設定とカルチャの構成
• 数値、日付、通貨の書式設定
• RTL 対応（アラビア語、ヘブライ語、ペルシア語）
• カスタムローカライズと翻訳
• 言語切り替え機能の実装

レスポンシブデザインとモバイル

📄 参照先: references/responsive-design.md

• モバイル／タブレット／デスクトップ向けの適応型 UI
• レスポンシブなメディアクエリとブレークポイント
• 列の表示／非表示ルール
• タッチ操作（スワイプ、長押し）
• モバイル最適化の戦略
• デバイス固有のスタイルパターン

API リファレンスとプロパティ

📄 参照先: references/properties-configuration.md

• カテゴリ別に整理された、設定可能な 95 個以上のプロパティすべて
• すばやく確認できるクイックリファレンステーブル
• 各プロパティの使用場面
• プロパティごとに必要なモジュール

プログラムによる制御（メソッド）

📄 参照先: references/programmatic-api.md

• カテゴリ別（データ、行、列、並べ替え、フィルター、グループ、ページ、編集、エクスポート）に整理された Grid の 137 個以上のメソッドすべて
• メソッドのシグネチャとパラメーター
• 戻り値と使用パターン
• メソッドごとに必要なモジュール

イベント通信（イベント）

📄 参照先: references/events-catalog.md

• 実行タイミングとユースケースを含む Grid の 65 個以上のイベントすべて
• actionBegin を使用して、アクションの前にキャンセルまたは変更します（args.cancel = true、args.data.field = value）
• actionComplete を使用して、アクションの後に処理します（API 呼び出し、トースト、更新、ツールバーの復元）
• エラー処理には actionFailure の設定が必須です
• args.requestType を使用してアクションを識別します

高度なパターンと実際のシナリオ

📄 リアルタイム更新: references/real-time-updates.md

• 自動更新、WebSocket、SignalR の統合パターン
• プッシュ型とプル型のデータ戦略
• 接続管理と再接続ロジック

📄 パフォーマンス監視: references/performance-monitoring.md

• Grid の操作時間を測定する
• レンダリングのボトルネックを特定する
• 最適化チェックリスト
• メモリ使用量の追跡

📄 Grid のテスト: references/testing-grids.md

• Jest と React Testing Library による単体テスト
• 統合テストのシナリオ
• スナップショットテスト
• Grid のテストに関するベストプラクティス

クイックスタートの例

import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page, Sort, Filter } from '@syncfusion/ej2-react-grids';
import React from 'react';
import '../styles/App.css';

const gridRef = useRef<GridComponent | null>(null);
// Sample data
const data = [
  {
    OrderID: 10248,
    CustomerID: 'VINET',
    EmployeeID: 5,
    OrderDate: new Date(1996, 6, 4)
  },
  {
    OrderID: 10249,
    CustomerID: 'TOMSP',
    EmployeeID: 6,
    OrderDate: new Date(1996, 6, 5)
  },
];

function App() {
  return (
    <GridComponent
      ref={gridRef}
      dataSource={data}
      allowPaging={true}
      allowSorting={true}
      allowFiltering={true}
      pageSettings={{ pageSize: 10 }}
    >
      <ColumnsDirective>
        <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign='Right' />
        <ColumnDirective field='CustomerID' headerText='Customer' width='120' />
        <ColumnDirective field='OrderDate' headerText='Order Date' width='130' type='date' format='yMd' />
      </ColumnsDirective>
      <Inject services={[Page, Sort, Filter]} />
    </GridComponent>
  );
}

export default App;